新增

src/views/BankCard.vue

@@ -11,65 +11,66 @@
     </div>
 
     <div class="main">
-      <!-- 顶部提示文字 -->
-      <div class="header-text">
-        <div class="sub-text">绑定银行卡</div>
-        <div class="sub-text">为了保证您的账户资金安全</div>
-        <div class="sub-text">请先完成银行卡绑定</div>
-      </div>
-
+      <div class="form-containerr">
+		<div class="bdyhk">
+			<span class="bdyhkk">绑定银行卡</span>
+			<svg t="1751273430369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30102" width="64" height="64"><path d="M481.8 767.8h-39.6c-7.5 0-13.1-6.7-11.8-14.1l18.3-103.8c1-5.7 6-9.9 11.8-9.9h39.6c7.5 0 13.1 6.7 11.8 14.1l-18.3 103.8c-1 5.7-6 9.9-11.8 9.9zM609.9 767.8h-39.6c-7.5 0-13.1-6.7-11.8-14.1l18.3-103.8c1-5.7 6-9.9 11.8-9.9h39.6c7.5 0 13.1 6.7 11.8 14.1l-18.3 103.8c-1 5.7-6 9.9-11.8 9.9zM801.8 767.8H698.4c-7.5 0-13.1-6.7-11.8-14.1l18.3-103.8c1-5.7 6-9.9 11.8-9.9h103.5c7.5 0 13.1 6.7 11.8 14.1l-18.3 103.8c-1 5.7-6 9.9-11.9 9.9z" fill="#a71fff" p-id="30103"></path><path d="M892.4 243.1c4.4 0 8 3.6 8 8v554.5c0 4.4-3.6 8-8 8h-761c-4.4 0-8-3.6-8-8V251.1c0-4.4 3.6-8 8-8h761m0-60h-761c-37.6 0-68 30.4-68 68v554.5c0 37.6 30.4 68 68 68h761c37.6 0 68-30.4 68-68V251.1c0-37.6-30.5-68-68-68z" fill="#a71fff" p-id="30104"></path><path d="M954.8 339.7H64.2v64.4h890.6v-64.4z" fill="#a71fff" p-id="30105"></path></svg>
+		</div>
+	</div>
       <div class="form-container">
         <div class="form-item">
-          <div class="form-label">姓名</div>
-          <input 
+			<div class="form-label" style="font-size: 20px;">填写银行卡信息</div>
+          <div class="form-label">持卡姓名:<input 
             type="text" 
             class="form-input"
             placeholder="输入姓名"
             v-model="formData.lastname"
-          />
+          /></div>
+          
         </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.banktype"
-          />
+          /></div>
+          
         </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.address"
-          />
+          /></div>
+         
         </div>
 
         <div class="form-item">
-          <div class="form-label">银行卡号</div>
-          <input 
+          <div class="form-label">银行卡号：<input 
             type="text" 
             class="form-input"
             placeholder="输入银行卡号"
             v-model="banknumInput"
             @input="handleBanknumInput"
-          />
+          /></div>
+          
         </div>
 
-        <div style="display: flex;justify-content: center;align-items: center;">
-          <button 
-            class="submit-btn"
-            @click="handleSubmit"
-            :disabled="bankInfo.status"
-          >
-            {{ bankInfo.status ? '已绑定' : '立即绑定' }}
-          </button>
-        </div>
+        
       </div>
+		<div style="display: flex;justify-content: center;align-items: center;">
+		<button 
+		class="submit-btn"
+		@click="handleSubmit"
+		:disabled="bankInfo.status"
+		>
+		{{ bankInfo.status ? '已绑定' : '立即绑定' }}
+		</button>
+		</div>
     </div>
   </div>
 </template>
@@ -178,7 +179,8 @@ export default {
 <style scoped>
 .container {
   min-height: 100vh;
-  background: url('../assets/dabag.png') no-repeat;
+  /* background: url('../assets/dabag.png') no-repeat; */
+  background-color: #b43a39;
   background-size: cover;
   background-position: center;
 }
@@ -246,7 +248,7 @@ export default {
 }
 
 .form-label {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: bold;
   color: #333;
   margin-bottom: 8px;
@@ -255,7 +257,7 @@ export default {
 }
 
 .form-input {
-  width: 100%;
+  width: 60%;
   height: 44px;
   border: none;
   background: #fff;
@@ -280,7 +282,7 @@ export default {
 .submit-btn {
   width: 60%;
   height: 44px;
-  background: #FF6B6B;
+  background: #d89191;
   border-radius: 22px;
   border: none;
   color: #fff;
@@ -298,4 +300,23 @@ export default {
   background: #ccc;
   cursor: not-allowed;
 }
+.bdyhk{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.bdyhkk{
+	font-size: 20px;
+	font-weight: 500;
+	color: #de3232;
+}
+
+.form-containerr {
+    background: #f4c1c1;
+        border-radius: 8px;
+        margin: 0 20px;
+        padding: 20px;
+        margin-bottom: 50px;
+        margin-top: 33px;
+}
 </style> 

src/views/Dynamic.vue

@@ -1,21 +1,26 @@
 <template>
   <div class="usremei-container">
-    <div class="invite-header">
-      邀请好友获得红旗资产
+    <div class="dynamic-title">《社会保障金》</div>
+    <div class="dynamic-desc">
+      通常指社会保险，是中国社会保障体系的核心组成部分，中国政府网表示，涵盖了养老保险、医疗保险、失业保险、工伤保险和生育保险五个险种。简单来说，社会保障金是国家为了保障劳动者在年老、失业、疾病、疾病、工伤和生育等情况下，能够享有生活保障而建立的社会制度。
     </div>
     <div class="invite-list">
       <div class="invite-item" v-for="item in rewards" :key="item.renshu">
         <div class="invite-info">
-          <div class="invite-title">{{ item.title }}</div>
+          <div class="invite-title">邀请{{ item.renshu }}人实名认证</div>
           <div class="invite-reward">{{ item.reward }}</div>
         </div>
         <button
           class="btn"
-          :class="{ received: item.received }"
-          :disabled="item.received"
-          @click="receiveReward(item.renshu, item.received)"
+          :class="{
+            'not-reached': item.status === 'not-reached',
+            'received': item.status === 'received',
+            'can-receive': item.status === 'can-receive'
+          }"
+          :disabled="item.status !== 'can-receive'"
+          @click="receiveReward(item.renshu, item.status === 'received')"
         >
-          {{ item.received ? '已领取' : '领取' }}
+          {{ item.status === 'not-reached' ? '未达标' : (item.status === 'received' ? '已领取' : '领取') }}
         </button>
       </div>
     </div>
@@ -49,12 +54,11 @@ export default {
   data() {
     return {
       rewards: [
-        { renshu: 5, title: '邀请5人实名认证', reward: '奖励60000元红旗资产', received: false },
-        { renshu: 10, title: '邀请10人实名认证', reward: '奖励150000元红旗资产', received: false },
-        { renshu: 20, title: '邀请20人实名认证', reward: '奖励300000元红旗资产', received: false },
-        { renshu: 50, title: '邀请50人实名认证', reward: '奖励800000元红旗资产', received: false },
-        { renshu: 100, title: '邀请100人实名认证', reward: '奖励1800000元红旗资产', received: false },
-        { renshu: 150, title: '邀请150人实名认证', reward: '获得国家神秘奖励', received: false }
+        { renshu: 6, title: '邀请6人实名认证', reward: '奖励30积分以及60000元保障金', status: 'not-reached' },
+        { renshu: 15, title: '邀请15人实名认证', reward: '奖励30积分以及150000元保障金', status: 'can-receive' },
+        { renshu: 30, title: '邀请30人实名认证', reward: '奖励30积分以及300000元保障金', status: 'received' },
+        { renshu: 60, title: '邀请60人实名认证', reward: '奖励30积分以及600000元保障金', status: 'can-receive' },
+        { renshu: 150, title: '邀请150人实名认证', reward: '奖励30积分以及1500000元保障金', status: 'can-receive' }
       ],
       userInfo: {},
       showAuthDialog: false
@@ -80,7 +84,14 @@ export default {
           // 根据接口返回的received状态，更新rewards
           this.rewards = this.rewards.map(item => {
             const found = res.data.find(d => d.renshu === item.renshu);
-            return found ? { ...item, received: found.received } : item;
+            if (found) {
+              // 假设接口返回的状态有 received(已领取), canReceive(可领取), notReached(未达标)
+              let status = 'not-reached';
+              if (found.received) status = 'received';
+              else if (found.canReceive) status = 'can-receive';
+              return { ...item, status };
+            }
+            return item;
           });
         }
       } catch (error) {
@@ -115,27 +126,38 @@ export default {
 <style scoped>
 .usremei-container {
   min-height: 100vh;
-  background-image: url('../assets/dabag.png');
-  background-size: cover;
-  background-position: center;
-  padding-top: 60px;
-  padding-bottom: 80px;
+  background: #b94040;
+  padding-top: 30px;
+  padding-bottom: 30px;
   box-sizing: border-box;
   overflow-y: auto;
   position: relative;
 }
 
-.invite-header {
-  background: #ffeddf;
-  color: #f11859;
-  font-size: 24px;
-  font-weight: bold;
+.dynamic-title {
   text-align: center;
-  margin: 0 auto 30px auto;
-  padding: 20px 0 10px 0;
+  font-size: 20px;
+  font-weight: bold;
+  color: #b94040;
+  background: #fff;
+  border-radius: 12px 12px 0 0;
+  margin: 0 auto;
+  width: 90%;
+  padding: 18px 0 8px 0;
+}
+
+.dynamic-desc {
+  background: #fff;
+  color: #b94040;
+  font-size: 15px;
+  line-height: 1.7;
+  border-radius: 0 0 12px 12px;
+  margin: 0 auto 24px auto;
   width: 90%;
-  box-shadow: 0 4px 16px rgba(208,2,27,0.08);
-  letter-spacing: 2px;
+  padding: 12px 18px 18px 18px;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
 }
 
 .invite-list {
@@ -144,24 +166,24 @@ export default {
 }
 
 .invite-item {
-  background: #ffeddf;
-  margin-bottom: 22px;
+  background: #fff;
+  margin-bottom: 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 4px 20px;
+  padding: 16px 20px;
+  border-radius: 12px;
   box-shadow: 0 2px 8px rgba(208,2,27,0.06);
 }
 
 .invite-info {
   display: flex;
   flex-direction: column;
-  width:70%;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .invite-title {
-  font-size: 14px;
+  font-size: 15px;
   color: #222;
   font-weight: 600;
   margin-bottom: 6px;
@@ -169,7 +191,7 @@ export default {
 
 .invite-reward {
   font-size: 14px;
-  color: #000;
+  color: #d0021b;
 }
 
 .btn {
@@ -180,21 +202,26 @@ export default {
   font-size: 15px;
   font-weight: 500;
   padding: 0 18px;
-  cursor: default;
-  background: #d0021b;
-  color: #fff;
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-.btn.received {
+.btn.not-reached {
   background: #bdbdbd;
   color: #fff;
 }
 
-.btn.not-reached {
-  background: #d0021b;
+.btn.can-receive {
+  background: #b94040;
   color: #fff;
 }
 
+.btn.received {
+  background: #fff;
+  color: #bdbdbd;
+  border: 1px solid #bdbdbd;
+}
+
 .custom-dialog-mask {
   position: fixed;
   top: 0;

src/views/home/index.vue

@@ -296,6 +296,7 @@ export default {
   background: #fff;
   border-radius: 25px;
   padding: 12px 20px;
+  color:red;
   margin-bottom: 16px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   
@@ -306,12 +307,12 @@ export default {
     font-size: 14px;
     
     .reward-label {
-      color: #333;
+      color: red;
       font-weight: 500;
     }
     
     .reward-item {
-      color: #333;
+      color: red;
       margin: 0 8px;
     }