登录注册手机适配

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;
+    width: 100%;
-    padding: 30px 20px;
+    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;
   }
 }
 </style>

f/web-kboss/src/views/registrationPage/indexNew.vue

@@ -41,7 +41,7 @@
           <!-- 验证码输入区域 -->
           <div class="form-row">
             <el-form-item prop="vcode" class="form-item-custom full-width">
-              <div class="form-item">
+              <div class="form-item has-code">
                 <span class="svg-container">
                   验证码
                 </span>
@@ -70,7 +70,7 @@
           <!-- 密码输入区域 -->
           <div class="form-row">
             <el-form-item prop="password" class="form-item-custom full-width">
-              <div class="form-item">
+              <div class="form-item has-suffix">
                 <span class="svg-container">
                   密码
                 </span>
@@ -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 {
+  .main-box {
-    width: 95%;
+    min-height: 100vh;
-    min-width: unset;
+    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;
+    width: 132px !important;
-    height: 52px !important;
+    height: auto !important;
+    max-height: 48px;
+    top: 16px;
+    left: 16px;
   }
 
   .logo-top1 {
-    width: 200px !important;
+    width: 160px !important;
-    height: 62px !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;
+    }
   }
 }
 

f/web-kboss/src/views/registrationPageMobile/index.vue

@@ -41,7 +41,7 @@
           <!-- 验证码输入区域 -->
           <div class="form-row">
             <el-form-item prop="vcode" class="form-item-custom full-width">
-              <div class="form-item">
+              <div class="form-item has-code">
                 <span class="svg-container">
                   验证码
                 </span>
@@ -70,7 +70,7 @@
           <!-- 密码输入区域 -->
           <div class="form-row">
             <el-form-item prop="password" class="form-item-custom full-width">
-              <div class="form-item">
+              <div class="form-item has-suffix">
                 <span class="svg-container">
                   密码
                 </span>
@@ -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 {
+  .main-box {
-    width: 95%;
+    min-height: 100vh;
-    min-width: unset;
+    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;
+    width: 132px !important;
-    height: 52px !important;
+    height: auto !important;
+    max-height: 48px;
+    top: 16px;
+    left: 16px;
   }
 
   .logo-top1 {
-    width: 200px !important;
+    width: 160px !important;
-    height: 62px !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;
+    }
   }
 }