.login { width: 100%; height: 100%; background: url('./images/2.png') no-repeat center; background-size: 100% 100%; background-clip: border-box; position: relative; min-height: 7.0rem; overflow: hidden; } .login .inner-bg { width: 100%; height: 100%; &>div { width: 70%; margin: 0 auto; } } .inner-wrapper { width: 29.6%; position: absolute; top: 46%; right: 0; transform: translateY(-50%); } .img-wrapper { width: 388px; height: 134px; background: url('./images/1.png') no-repeat center; background-size: 100% 100%; margin-bottom: 48px; } .login .inner-bg img[role="logo"] { height: 40px; } .login .inner-bg .title { font-size: 27px; font-weight: bold; color: rgba(255, 255, 255, 1); letter-spacing: 2px; } @keyframes waving { from { top: 0; } to { top: 10px; } } @keyframes waving2 { from { left: 0; } to { left: -9999px; } } .form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .inner-center { display: flex; flex-flow: column; align-items: center; } .formgroup2 { display: flex; align-items: center; display: flex; margin: 0px 5.5%; margin-bottom: 10%; align-items: center; margin-bottom: 40px; } .APPcodeBox { width: 100%; display: flex; flex-flow: column; align-items: center; cursor: pointer; position: relative; } .APPCtext { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #000000; line-height: 30px; opacity: 0.75; } .APPCimg { width: 138px; height: 150px; background: url('./images/3.png'); background-size: 100% 100%; background-repeat: no-repeat; display: none; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); padding: 23px 11px 12px; span { font-size: 12px; opacity: 0.75; } } .APPcodeBox:hover .APPCtext { color: #1685FF; } .APPcodeBox:hover .APPCimg { display: flex; } .APPCimg .codeCase { text-align: center; padding-top: 32px; }