.container { min-height: 100vh; background: #EFF1F4; .bg { width: 100%; height: 250px; image { width: 100%; height: 100%; display: block; } } .sign-in-container { width: calc(100% - 40px); height: 90px; margin: -120px auto 0; border-radius: 8px; position: relative; .bg { width: 100%; height: 100%; position: absolute; image { width: 100%; height: 100%; display: block; } } .title { position: absolute; top: -114px; left: 50%; transform: translateX(-50%); .icon { width: 86px; height: 70px; image { width: 100%; height: 100%; display: block; } } .name { margin-top: 8px; color: #fff; font-size: 20px; } } .inf { width: 100%; padding: 24px 20px; box-sizing: border-box; position: relative; .row { width: 100%; margin-bottom: 8px; font-size: 14px; display: flex; // align-items: center; .icon { width: 14px; height: 14px; margin: 2px 0; vertical-align: text-bottom; image { width: 100%; height: 100%; display: block; } } .label { margin: 0 8px 0 2px; color: #9499AB; white-space: nowrap; } .val { color: #2E3A4F; } } .btn-box { width: calc(100% - 40px); margin: 0px auto; display: flex; justify-content: space-between; align-items: center; position: relative; .btn { width: 100%; height: 40px; line-height: 40px; box-sizing: border-box; border-radius: 4px; font-size: 15px; font-weight: bold; text-align: center; } .btn-record { color: #4381FC; border: 1px solid #4381FC; } .btn-back { background: linear-gradient(90deg, #3B7CFC 0%, #548BFC 100%); color: #fff; } } } } }