* { margin: 0; padding: 0; } #regist { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } .custom-form { margin-top: 0.3rem; } .custom-form .el-form-item__label { line-height: 1; } .custom-form .el-select { width: 100%; } .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; } .back-text { font-size: 0.27rem; z-index: 10; color: #FFFFFF; margin-top: 1.39rem; margin-left: 0.65rem; font-weight: 400; } .text-welcome { font-size: 0.74rem; font-family: Bahnschrift; line-height: 0.74rem; } .text-title { margin-top: 5px; } .text-level { font-size: 0.12rem; margin-top: 0.81rem; } .back-line1, .back-line2, .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; } .back-line1 { height: 5rem; opacity: 1; transform: rotate(45deg); top: -1.2rem; left: 4.15rem; } .back-line2 { height: 7rem; transform: rotate(110deg); top: 0px; left: 5rem; } .back-line3 { height: 5rem; transform: rotate(45deg); top: 2.3rem; left: 1.5rem; } /* 背景板结束 */ /* 前景 登录框 开始 */ .container-before { width: 7.5rem; height: 8rem; overflow-y: auto; 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; } .active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); } .login-email { margin-right: 0.4rem; } .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-text { flex: 1; font-size: 14px; line-height: 19px; padding: 0 10px; color: #606266; font-weight: 500; } .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-btn { font-size: 0.34rem; height: 0.8rem; } .type-btn { border: none; color: var(--color-primary); font-size: 0.34rem; } .code-btn { font-size: 0.32rem; height: 0.8rem; } .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; } .form-main { margin-top: 0.6rem; } .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; } .read-item .check-div { display: flex; white-space: inherit; } }