Parcourir la source

feat: 修改样式问题

haizemu il y a 3 mois
Parent
commit
6481299b1b
2 fichiers modifiés avec 95 ajouts et 101 suppressions
  1. 88 94
      src/pages/user/components/LoginBox.scss
  2. 7 7
      src/pages/user/components/LoginBox.tsx

+ 88 - 94
src/pages/user/components/LoginBox.scss

@@ -1,107 +1,101 @@
+.login-introduce{
+  padding:40px;
+  margin-bottom:20px;
+  .title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #000000;
+    font-size: 40px;
+    font-weight: 500;
+    margin-top:20px;
+  }
+  .avatar-image{
+    width:50px;
+    height: 50px;
+  }
+  .text{
+    padding:30px 0;
+    font-size: 30px;
+    line-height: 45px;
+  }
+  .blue{
+    color:#007AFF;
+  }
+  .fontsize36{
+    font-size:36px;
+    margin-bottom:20px;
+  }
+  .custom-checkbox{
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .index-quck-btn{
+    margin: 20px 0;
+    background-color:#007AFF;
+  }
+  .other-login{
+    text-align: center;
+    margin:30px 0;
+    color:#5c6e98;
+    font-size: 26px;
+  }
+  .checkd,.checkbox{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
 .layout-body{
-    padding: 0 !important;
+  padding: 0 !important;
 }
 .avatar-image-bg{
-    width: 100%;
-    height: 240px;
-    position: absolute;
-    z-index: -1;
+  width: 100%;
+  height: 240px;
+  position: absolute;
+  z-index: -1;
 }
 .agree{
-    color:#848EB0;
+  color:#848EB0;
 }
-  .phone-Login{
-    position: relative;
-    display: block;
-    .text-title{
-      text-align: center;
-      width:100%;
-    }
-    .float{
-      position: absolute;
-      top:60px;
-      right: 40px;
-    }
-    .input-box{
-      .input-phone{
-        height: 50px;
-      }
-      .input-password{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .input-phone,.input-password{
-        border-bottom:1px solid #D7DBEC;
-        font-size: 36px;
-        height: 70px;
-        margin:50px 0;
-        >input{
-          height: 70px;
-        }
-      }
-    }
-    .get{
-     color: #C5C5C7;
-     font-size: 36px;
-     white-space: nowrap;
-    }
-    .gettime{
-      color:#007AFF;
-      font-size: 36px;
-    }
+.phone-login{
+  position: relative;
+  display: block;
+  .text-title{
+    text-align: center;
+    width:100%;
   }
-  .login-introduce{
-    padding:40px;
-    margin-bottom:20px;
-    .title{
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: #000000;
-      font-size: 40px;
-      font-weight: 500;
-      margin-top:20px;
-    }
-    .avatar-image{
-      width:50px;
+  .float{
+    position: absolute;
+    top:60px;
+    right: 40px;
+  }
+  .input-box{
+    .input-phone{
       height: 50px;
     }
-    .text{
-      padding:30px 0;
-      font-size: 30px;
-      line-height: 45px;
-    }
-    .blue{
-      color:#007AFF;
-    }
-    .fontsize36{
-      font-size:36px;
-      margin-bottom:20px;
-    }
-    .custom-checkbox {
-      display: inline-block;
-      margin-right: 10px;
-      // 你可以继续添加样式来适配你的设计需求
-    }
-    .index-quck-btn{
-      margin: 20px 0;
-    }
-    .other-login{
-      text-align: center;
-      margin:30px 0;
-      color:#5c6e98;
-      font-size: 26px;
-      
-    }
-    .checkd{
+    .input-password{
       display: flex;
-      justify-content: flex-start;
+      justify-content: space-between;
       align-items: center;
     }
-    .checkbox{
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
+    .input-phone,.input-password{
+      border-bottom:1px solid #D7DBEC;
+      font-size: 36px;
+      height: 70px;
+      margin:50px 0;
+      >input{
+        height: 70px;
+      }
     }
-  }
+  }
+  .gray{
+    color: #C5C5C7;
+    font-size: 36px;
+    white-space: nowrap;
+  }
+  .gettime{
+    color:#007AFF;
+    font-size: 36px;
+  }
+}

+ 7 - 7
src/pages/user/components/LoginBox.tsx

@@ -314,14 +314,14 @@ const LoginBox = forwardRef((props,ref) => {
           <View>
             {checked ? (
               <Button
-                className="index-quck-btn fontsize"
+                className="index-quck-btn fontsize36"
                 openType="getPhoneNumber"
                 onGetPhoneNumber={quickLogin}
               >
                 一键快捷登录
               </Button>
             ) : (
-              <Button className="index-quck-btn fontsize" onClick={quickLogin}>
+              <Button className="index-quck-btn fontsize36" onClick={quickLogin}>
                 一键快捷登录
               </Button>
             )}
@@ -331,7 +331,7 @@ const LoginBox = forwardRef((props,ref) => {
           </View>
         </View>
       ) : (
-        <View className="login-introduce phone-Login">
+        <View className="login-introduce phone-login">
           <View className="title">
             <Text className="text-title">登录诚易融</Text>
             <View onClick={handleClose} className="float">
@@ -345,7 +345,7 @@ const LoginBox = forwardRef((props,ref) => {
             <View className="input-phone">
               <Input
                 type="text"
-                placeholderClass="get"
+                placeholderClass="gray"
                 onInput={phoneNumChange}
                 value={phone}
                 placeholder="请输入本人实名认证手机号"
@@ -355,14 +355,14 @@ const LoginBox = forwardRef((props,ref) => {
             <View className="input-password">
               <Input
                 type="text"
-                placeholderClass="get"
+                placeholderClass="gray"
                 onInput={validateChange}
                 value={validate}
                 placeholder="请输入验证码"
                 maxlength={6}
               />
               {isGetValidate ? (
-                <View className="get">重新发送 ({time}S)</View>
+                <View className="gray">重新发送 ({time}S)</View>
               ) : (
                 <View className="gettime" onClick={isGetValidateChange}>
                   获取验证码
@@ -390,7 +390,7 @@ const LoginBox = forwardRef((props,ref) => {
             <Text onClick={goRegPage} className="blue">
               《注册政策》
             </Text>
-            <Text onClick={goRegPage} className="blue">
+            <Text onClick={goPrivacyPage} className="blue">
               《隐私政策》
             </Text>
           </View>