diff --git a/f/web-kboss/src/views/login/indexNew.vue b/f/web-kboss/src/views/login/indexNew.vue index 92890a7..80657fd 100644 --- a/f/web-kboss/src/views/login/indexNew.vue +++ b/f/web-kboss/src/views/login/indexNew.vue @@ -1210,10 +1210,186 @@ $dark_gray: #889aa4; } /* 响应式 */ -@media screen and (max-width: 760px) { +@media screen and (max-width: 768px) { + .main-box { + min-height: 100vh; + min-height: 100dvh; + height: auto; + width: 100%; + padding: 92px 18px 24px; + flex-direction: column; + justify-content: flex-start; + align-items: center; + overflow-x: hidden; + overflow-y: auto; + background-position: center top; + box-sizing: border-box; + } + + .conter { + width: 100%; + max-width: 390px; + margin-top: 0; + display: flex; + justify-content: center; + align-items: flex-start; + } + + .left { + display: none; + } + + .right { + width: 100%; + display: flex; + justify-content: center; + } + + .logo-top, + .logo-top1 { + top: 16px; + left: 18px; + object-fit: contain; + z-index: 20; + } + + .logo-top { + width: 132px !important; + height: auto !important; + max-height: 46px; + } + + .logo-top1 { + width: 168px !important; + height: auto !important; + max-height: 52px; + } + .login-form { - width: 90% !important; - padding: 30px 20px; + width: 100%; + max-width: 360px; + margin: 0 auto; + padding: 24px 20px 22px; + border-radius: 18px; + } + + .main-content-box { + margin-top: 0 !important; + } + + .login-text { + margin-bottom: 10px; + font-size: 22px; + } + + .login-mode-tabs, + .two-btn { + width: 100%; + } + + .login-mode-tabs { + margin: 14px 0; + + button { + height: 36px; + font-size: 13px; + } + } + + .login-form-l { + width: 100%; + } + + ::v-deep .login-form-l .el-form-item__content { + width: 100%; + } + + ::v-deep .login-form-l .el-form-item { + width: 100% !important; + margin-bottom: 22px !important; + } + + ::v-deep .login-form-l .el-input__inner { + font-size: 13px; + } + + .login-form-style { + .invitecode { + flex: 1; + width: auto !important; + min-width: 0; + } + } + + .login-form-l > div[style*="display:flex"] { + width: 100%; + } + + .login-btn { + width: 100% !important; + height: 42px; + margin-bottom: 10px !important; + font-size: 15px; + } + + .getCodeStyleNew { + width: 104px; + flex-shrink: 0; + margin-left: 8px !important; + font-size: 12px; + } + + .two-btn { + font-size: 13px; + } + + .forgot-password, + .go-register { + font-size: 13px; + } + + .message-footer { + position: absolute; + right: 16px; + bottom: 14px; + left: 16px; + display: block; + width: auto; + height: auto; + margin: 0 auto; + padding: 0; + color: rgba(0, 0, 0, 0.62); + font-size: 10px; + line-height: 16px; + text-align: center; + + .item { + display: inline; + margin: 0; + } + + span { + display: inline; + margin: 0 5px; + white-space: normal; + } + } +} + +@media screen and (max-width: 375px) { + .main-box { + padding-right: 10px; + padding-left: 10px; + } + + .login-form { + max-width: 340px; + padding: 22px 16px 20px; + } + + .getCodeStyleNew { + width: 92px; + font-size: 11px; } } diff --git a/f/web-kboss/src/views/registrationPage/indexNew.vue b/f/web-kboss/src/views/registrationPage/indexNew.vue index a054c9a..d793b49 100644 --- a/f/web-kboss/src/views/registrationPage/indexNew.vue +++ b/f/web-kboss/src/views/registrationPage/indexNew.vue @@ -41,7 +41,7 @@
-
+
验证码 @@ -70,7 +70,7 @@
-
+
密码 @@ -442,6 +442,7 @@ $light-gray: #909399; width: 100vw; height: 100vh; overflow: hidden; + box-sizing: border-box; img { width: 100%; @@ -484,6 +485,7 @@ $light-gray: #909399; backdrop-filter: blur(10px); overflow: hidden; z-index: 999; + box-sizing: border-box; } // 注册内容区域样式 @@ -545,6 +547,7 @@ $light-gray: #909399; border-radius: 8px; transition: all 0.3s ease; position: relative; + box-sizing: border-box; &:hover { border-color: $primary-color; @@ -582,6 +585,7 @@ $light-gray: #909399; // 自定义输入框样式 .custom-input { flex: 1; + min-width: 0; border: none !important; outline: none !important; background: transparent; @@ -605,6 +609,22 @@ $light-gray: #909399; } } + .form-item.has-code { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 120px; + } + } + } + + .form-item.has-suffix { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 42px; + } + } + } + // 获取验证码按钮样式 .get-code-btn { position: absolute; @@ -706,27 +726,179 @@ $light-gray: #909399; // 响应式设计 - 移动端适配 @media (max-width: 768px) { - .register-form { - width: 95%; - min-width: unset; + .main-box { + min-height: 100vh; + min-height: 100dvh; height: auto; - max-height: 90vh; + padding: 76px 12px 20px; + overflow-x: hidden; overflow-y: auto; } + .imgStyle { + position: fixed; + inset: 0; + z-index: 0; + + img { + width: 100% !important; + height: 100% !important; + object-fit: cover; + } + } + + .register-form { + position: relative; + top: auto; + left: auto; + transform: none; + width: 100%; + max-width: 420px; + min-width: 0; + min-height: 0; + height: auto; + max-height: none; + margin: 0 auto; + border-radius: 14px; + overflow: visible; + } + .regist-container { - padding: 24px 20px; + padding: 24px 18px; + + .title-container { + margin-bottom: 22px; + + .title { + font-size: 22px; + } + + .subtitle { + font-size: 13px; + } + } + + .form-row { + margin-bottom: 16px; + } + + .form-item { + height: 46px; + border-radius: 7px; + } + + .svg-container { + min-width: 64px; + padding: 0 10px; + font-size: 13px; + flex-shrink: 0; + + &.country-code { + min-width: 48px; + } + } + + .custom-input { + ::v-deep .el-input__inner { + height: 44px; + padding: 0 10px; + font-size: 13px; + } + } + + .form-item.has-code { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 100px; + } + } + } + + .get-code-btn { + right: 8px; + padding: 4px 2px; + font-size: 12px; + } + + .show-pwd { + right: 10px; + } + + .agreement { + margin: 16px 0; + + ::v-deep .el-checkbox { + display: flex; + align-items: flex-start; + white-space: normal; + + .el-checkbox__input { + margin-top: 2px; + } + + .el-checkbox__label { + flex: 1; + padding-left: 8px; + font-size: 12px; + line-height: 18px; + white-space: normal; + } + } + } + + .twoBtn { + margin-top: 22px; + } + + .register-btn { + height: 46px; + font-size: 15px; + } } // 移动端调整头部图标大小 .logo-top { - width: 150px !important; - height: 52px !important; + width: 132px !important; + height: auto !important; + max-height: 48px; + top: 16px; + left: 16px; } .logo-top1 { - width: 200px !important; - height: 62px !important; + width: 160px !important; + height: auto !important; + max-height: 52px; + top: 14px; + left: 16px; + object-fit: contain; + } +} + +@media (max-width: 375px) { + .main-box { + padding-right: 10px; + padding-left: 10px; + } + + .regist-container { + padding: 22px 14px; + + .svg-container { + min-width: 58px; + } + + .form-item.has-code { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 88px; + } + } + } + + .get-code-btn { + font-size: 11px; + } } } diff --git a/f/web-kboss/src/views/registrationPageMobile/index.vue b/f/web-kboss/src/views/registrationPageMobile/index.vue index a054c9a..d793b49 100644 --- a/f/web-kboss/src/views/registrationPageMobile/index.vue +++ b/f/web-kboss/src/views/registrationPageMobile/index.vue @@ -41,7 +41,7 @@
-
+
验证码 @@ -70,7 +70,7 @@
-
+
密码 @@ -442,6 +442,7 @@ $light-gray: #909399; width: 100vw; height: 100vh; overflow: hidden; + box-sizing: border-box; img { width: 100%; @@ -484,6 +485,7 @@ $light-gray: #909399; backdrop-filter: blur(10px); overflow: hidden; z-index: 999; + box-sizing: border-box; } // 注册内容区域样式 @@ -545,6 +547,7 @@ $light-gray: #909399; border-radius: 8px; transition: all 0.3s ease; position: relative; + box-sizing: border-box; &:hover { border-color: $primary-color; @@ -582,6 +585,7 @@ $light-gray: #909399; // 自定义输入框样式 .custom-input { flex: 1; + min-width: 0; border: none !important; outline: none !important; background: transparent; @@ -605,6 +609,22 @@ $light-gray: #909399; } } + .form-item.has-code { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 120px; + } + } + } + + .form-item.has-suffix { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 42px; + } + } + } + // 获取验证码按钮样式 .get-code-btn { position: absolute; @@ -706,27 +726,179 @@ $light-gray: #909399; // 响应式设计 - 移动端适配 @media (max-width: 768px) { - .register-form { - width: 95%; - min-width: unset; + .main-box { + min-height: 100vh; + min-height: 100dvh; height: auto; - max-height: 90vh; + padding: 76px 12px 20px; + overflow-x: hidden; overflow-y: auto; } + .imgStyle { + position: fixed; + inset: 0; + z-index: 0; + + img { + width: 100% !important; + height: 100% !important; + object-fit: cover; + } + } + + .register-form { + position: relative; + top: auto; + left: auto; + transform: none; + width: 100%; + max-width: 420px; + min-width: 0; + min-height: 0; + height: auto; + max-height: none; + margin: 0 auto; + border-radius: 14px; + overflow: visible; + } + .regist-container { - padding: 24px 20px; + padding: 24px 18px; + + .title-container { + margin-bottom: 22px; + + .title { + font-size: 22px; + } + + .subtitle { + font-size: 13px; + } + } + + .form-row { + margin-bottom: 16px; + } + + .form-item { + height: 46px; + border-radius: 7px; + } + + .svg-container { + min-width: 64px; + padding: 0 10px; + font-size: 13px; + flex-shrink: 0; + + &.country-code { + min-width: 48px; + } + } + + .custom-input { + ::v-deep .el-input__inner { + height: 44px; + padding: 0 10px; + font-size: 13px; + } + } + + .form-item.has-code { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 100px; + } + } + } + + .get-code-btn { + right: 8px; + padding: 4px 2px; + font-size: 12px; + } + + .show-pwd { + right: 10px; + } + + .agreement { + margin: 16px 0; + + ::v-deep .el-checkbox { + display: flex; + align-items: flex-start; + white-space: normal; + + .el-checkbox__input { + margin-top: 2px; + } + + .el-checkbox__label { + flex: 1; + padding-left: 8px; + font-size: 12px; + line-height: 18px; + white-space: normal; + } + } + } + + .twoBtn { + margin-top: 22px; + } + + .register-btn { + height: 46px; + font-size: 15px; + } } // 移动端调整头部图标大小 .logo-top { - width: 150px !important; - height: 52px !important; + width: 132px !important; + height: auto !important; + max-height: 48px; + top: 16px; + left: 16px; } .logo-top1 { - width: 200px !important; - height: 62px !important; + width: 160px !important; + height: auto !important; + max-height: 52px; + top: 14px; + left: 16px; + object-fit: contain; + } +} + +@media (max-width: 375px) { + .main-box { + padding-right: 10px; + padding-left: 10px; + } + + .regist-container { + padding: 22px 14px; + + .svg-container { + min-width: 58px; + } + + .form-item.has-code { + .custom-input { + ::v-deep .el-input__inner { + padding-right: 88px; + } + } + } + + .get-code-btn { + font-size: 11px; + } } }