Jelajahi Sumber

实名认证

tt0101 2 minggu lalu
induk
melakukan
e382d18ce3
1 mengubah file dengan 111 tambahan dan 75 penghapusan
  1. 111 75
      src/views/UserCenter.vue

+ 111 - 75
src/views/UserCenter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vh100">
+  <div class="container">
     <!-- Add Toast component -->
     <Toast ref="toast" />
     <!-- 导航栏 -->
@@ -11,7 +11,7 @@
     </div>
 
     <!-- 已认证状态 -->
-    <div v-if="userInfo.if_real === 1" class="auth-success">
+    <div v-if="userInfo.if_real === 1"  class="auth-success">
       <div class="success-icon">
         <svg viewBox="64 64 896 896" data-icon="check-circle" width="80px" height="80px" fill="#52c41a" aria-hidden="true">
           <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
@@ -21,42 +21,45 @@
     </div>
 
     <!-- 未认证状态 -->
-    <div v-else>
-      <div style="color: #fff;font-size: 14px;padding: 40px 20px;font-weight: bold;">
-        实名认证<br/>
-        获得红旗资产18000元
+    <div v-else  class="main">
+      <div class="form-containerr">
+        <div class="bdyhk">
+          <span class="bdyhkk">实名认证</span>
+            <img src="@/assets/icons8-name-tag-64.png" alt="实名认证" style="width: 64px;height: 64px;">
+        </div>
       </div>
+      
       <!-- 认证表单 -->
       <div class="form-container">
         <div class="form-item">
-          <div class="form-label">姓名</div>
-          <input 
+          <div class="form-label" style="font-size: 16px;">填写本人信息</div>
+          <div class="form-label">真实姓名:<input 
             type="text" 
             class="form-input" 
             placeholder="请输入您的姓名"
             v-model="formData.realName"
-          >
+          /></div>
+        </div>
+        <div>
+        <soan class="form-label">证明类型:<span class="form-label" style="margin-left: 10px;">身份证</span></soan>
         </div>
-
         <div class="form-item">
-          <div class="form-label">身份证号码</div>
-          <input 
+          <div class="form-label">身份证号码:<input 
             type="text" 
             class="form-input" 
             placeholder="请输入身份证号码"
             v-model="formData.idCard"
-          >
-          <div style="display: flex;justify-content: center;align-items: center;">
-            <button 
+          /></div>
+        </div>
+      </div>
+      
+      <div style="display: flex;justify-content: center;align-items: center;">
+        <button 
           class="submit-btn"
           @click="handleSubmit"
         >
           提交实名认证
         </button>
-          </div>
-        </div>
-
-       
       </div>
     </div>
 
@@ -128,9 +131,11 @@ export default {
 </script>
 
 <style scoped>
-.vh100 {
+.container {
   min-height: 100vh;
-  background:#c94545;
+  background-color: #b43a39;
+  background-size: cover;
+  background-position: center;
 }
 
 .nav-bar {
@@ -167,6 +172,91 @@ export default {
   font-weight: 500;
 }
 
+.main {
+  /* 和银行卡页面保持一致的主容器样式 */
+}
+
+.form-containerr {
+  background: #f4c1c1;
+  border-radius: 8px;
+  margin: 0 20px;
+  padding: 20px;
+  margin-bottom: 50px;
+  margin-top: 33px;
+}
+
+.bdyhk {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bdyhkk {
+  font-size: 18px;
+  font-weight: 600;
+  color: #de3232;
+}
+
+.form-container {
+  background: #fff;
+  border-radius: 8px;
+  margin: 0 20px;
+  padding: 20px;
+}
+
+.form-item {
+  /* margin-bottom: 20px; */
+}
+
+.form-label {
+  font-size: 15px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.form-input {
+  width: 60%;
+  height: 44px;
+  border: none;
+  background: #fff;
+  font-size: 14px;
+  padding: 0;
+  color: #333;
+}
+
+.form-input::placeholder {
+  color: #999;
+  font-weight: 500;
+}
+
+.form-input:focus {
+  outline: none;
+}
+
+.submit-btn {
+  width: 60%;
+  height: 44px;
+  background: #d89191;
+  border-radius: 22px;
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+.submit-btn:active {
+  opacity: 0.9;
+}
+
+/* 保留原有的其他样式以防需要 */
+.vh100 {
+  min-height: 100vh;
+  background:#c94545;
+}
+
 .flex { display: flex; }
 .between { justify-content: space-between; }
 .alcenter { align-items: center; }
@@ -281,58 +371,4 @@ export default {
   color: #333;
   margin-left: 5px;
 }
-
-.form-container {
-  padding: 0 20px;
-}
-
-.form-item {
-  background: #fff;
-  padding: 18px;
-}
-
-.form-label {
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.form-input {
-  width: 100%;
-  height: 44px;
-  border: none;
-  background: #fff;
-  font-size: 14px;
-  padding: 0;
-  color: #333;
-}
-
-.form-input::placeholder {
-  color: #999;
-}
-
-.form-input:focus {
-  outline: none;
-  border-bottom-color: #ed4b39;
-}
-
-.submit-btn {
-  width: 60%;
-  height: 44px;
-  background: #FF6B6B;
-  border-radius: 22px;
-  border: none;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 500;
-  margin-top: 30px;
-  cursor: pointer;
-  
-}
-
-.submit-btn:active {
-  opacity: 0.9;
-  
-}
 </style>