* { margin: 0; padding: 0; } #forget { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } .login-container { width: 15.7rem; height: 8.2rem; display: flex; justify-content: center; align-items: center; position: relative; } .container-back { width: 15.7rem; height: 6.8rem; background: var(--color-primary); border-radius: 20px; overflow: hidden; position: relative; font-family: Source Han Sans CN; } .container-back .back-text { font-size: 0.27rem; z-index: 10; color: #FFFFFF; margin-top: 1.39rem; margin-left: 0.65rem; font-weight: 400; } .container-back .text-welcome { font-size: 0.74rem; font-family: Bahnschrift; line-height: 0.74rem; } .container-back .text-title { margin-top: 5px; } .container-back .text-level { font-size: 0.12rem; margin-top: 0.81rem; } .container-back .back-line1, .container-back .back-line2, .container-back .back-line3 { width: 60px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%); z-index: 2; position: absolute; } .container-back .back-line1 { height: 5rem; opacity: 1; transform: rotate(45deg); top: -1.2rem; left: 4.15rem; } .container-back .back-line2 { height: 7rem; transform: rotate(110deg); top: 0px; left: 5rem; } .container-back .back-line3 { height: 5rem; transform: rotate(45deg); top: 2.3rem; left: 1.5rem; } .container-before { width: 7.5rem; height: 8rem; background: #FFFFFF; box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1); position: absolute; right: 0.9rem; border: 4px; z-index: 10; } .login { padding-top: 0.8rem; padding-left: 1.24rem; padding-right: 1.05rem; font-size: 14px; font-family: PingFang SC; font-weight: 400; line-height: 14px; } .login-text { display: flex; flex-direction: column; } .login-text-title { font-size: 0.32rem; color: #1E2736; line-height: 0.32rem; } .login-text-regist { font-weight: Regular; margin-top: 0.08rem; color: #1E2736; } .login-text-regist a { color: var(--color-primary); cursor: pointer; } .login-form { margin-top: 0.68rem; } .login-top { display: flex; flex-direction: row; } .login-email, .login-phone { height: 0.34rem; color: #666B80; cursor: pointer; } .login-phone { margin-left: 0.4rem; } .active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); } .form-main { margin-top: 0.3rem; } .form-item { margin-top: 0.3rem; } .input-with-select .el-input-group__prepend { background: #FFFFFF; width: 60px; } .code-item { display: flex; flex-direction: row; } .code-btn { margin-left: 0.1rem; background: var(--color-primary); color: #FFFFFF; } .rember-item { margin-top: 0.2rem; display: flex; justify-content: space-between; } .rember-item a { color: var(--color-primary); cursor: pointer; } .login-btn { width: 100%; height: 46px; background: var(--color-primary); } .read-item { margin-top: 0.2rem; } .read-item a { color: var(--color-primary); cursor: pointer; } .line-item { margin-top: 0.4rem; } .line-item text { font-size: 16px; color: #1E2736; } .type-btn { width: 100%; height: 0.46rem; font-size: 0.16rem; } @media screen and (max-width: 750px) { .login-container { height: calc(100vh - 1.2rem); width: 100vw; background: #F2F2FE; padding: 0.6rem 0; } .container-back { display: none; } .container-before { width: 100%; height: 100%; margin: 0rem 0.3rem; position: unset; z-index: 0; } .login { padding-top: 1.17rem; padding-left: 0.3rem; padding-right: 0.3rem; font-size: 0.26rem; line-height: 0.3rem; } .login-text-title { font-size: 0.4rem; } .login-text-regist { margin-top: 0.1rem; font-size: 0.28rem; } .login-form { margin-top: 1.21rem; } .login-email, .login-phone { height: 0.34rem; width: 100%; text-align: center; color: #666B80; cursor: pointer; padding-bottom: 0.13rem; } .el-checkbox__label { font-size: 0.26rem; } .read-item { line-height: 0.3rem; } .login-btn { font-size: 0.34rem; height: 0.8rem; } .type-btn { border: none; color: var(--color-primary); font-size: 0.34rem; } }