我的ui

src/router/index.js

@@ -22,6 +22,8 @@ import LeverList from "@/views/LeverList.vue";
 import CultureDetail from "@/views/cultureDetail.vue";
 import InvitePeople from '@/views/InvitePeople.vue'
 import Apply from '@/views/Apply.vue'
+import RetirementSubsidy from '@/views/RetirementSubsidy.vue'
+
 Vue.use(VueRouter);
 
 const routes = [
@@ -192,6 +194,14 @@ const routes = [
       meta: {
         hideTabBar: true
     },
+  },
+  {
+    path: "/retirement-subsidy",
+    name: "RetirementSubsidy",
+    component: RetirementSubsidy,
+    meta: {
+      hideTabBar: true
+    }
   }
 ];
 

src/views/Profile.vue

@@ -2,25 +2,28 @@
   <div class="usremei-container">
     <!-- 第一个白色背景板块 -->
     <div class="profile-card">
-      <div class="avatar-section">
-        <img src="@/assets/logo.png" class="avatar" alt="用户头像" />
-      </div>
+      
       <div class="info-row">
-        <span class="name">{{ userInfo.nickname }}</span>
-        <img src="@/assets/sign.png" class="sign-icon" alt="签到" @click="goToSignin" />
+        <div class="avatar-section">
+        <img src="@/assets/avart.png" class="avatar" alt="用户头像" />
+      
+        <div style="display: flex; flex-direction: column; align-items: flex-start;margin-left: 10px;color: #fff;">
+          <span class="name">{{ userInfo.nickname }}</span>
+          <span class="value">{{ userInfo.mobile }}</span>
+        </div>
       </div>
-      <div class="info-row">
-        <span class="label">手机号码</span>
-        <span class="value">{{ userInfo.mobile }}</span>
+      <div @click="goToSignin" style="color: #000;font-size: 14px;background-color: #fff;padding: 5px 15px;font-weight: bold;">
+        签到<br/>有奖
       </div>
-      <div class="info-row">
+      </div>
+      <!-- <div class="info-row">
         <span class="label">邀请码</span>
         <span class="value">{{ userInfo.salt }}</span>
-      </div>
+      </div> -->
     </div>
 
     <!-- 第二个银行卡板块 -->
-    <div class="bank-card">
+    <!-- <div class="bank-card">
       <div class="bank-content">
         <img src="@/assets/bank.png" class="bank-logo" alt="银行logo" />
         <div class="bank-text">
@@ -32,59 +35,50 @@
           <button class="action-btn button-click-effect" @click="goToFinancial">提升到账额度</button>
         </div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 收益板块组 -->
     <div class="profit-section">
-      <!-- 第一行 -->
       <div class="profit-block">
         <div class="profit-left">
           <div class="profit-header">
-            <span>每日分红</span>
-            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=3')">提现</button>
+            <span>红旗资产</span>
+            <button class="profit-btn button-click-effect" @click="handleRedFlagWithdraw">提现</button>
           </div>
           <div class="profit-amount">￥{{ userInfo.dayred }}</div>
         </div>
         <div class="profit-right">
           <div class="profit-header">
-            <span>万泰股权</span>
-            <button class="profit-btn button-click-effect" @click="handleCashOut">套现</button>
+            <span>退休补贴</span>
+            <button class="profit-btn button-click-effect" @click="handleRetirementWithdraw">提现</button>
           </div>
           <div class="profit-amount">￥{{ userInfo.guquan }}</div>
         </div>
-      </div>
-
-      <!-- 第二行 -->
-      <div class="profit-block">
         <div class="profit-left">
           <div class="profit-header">
-            <span>财政补贴</span>
-            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=1')">提现</button>
+            <span>党员薪资</span>
+            <button class="profit-btn button-click-effect" @click="handlePartySalaryWithdraw">提现</button>
           </div>
           <div class="profit-amount">￥{{ userInfo.coins }}</div>
         </div>
         <div class="profit-right">
           <div class="profit-header">
-            <span>养老金</span>
-            <button class="profit-btn button-click-effect" @click="handlePensionWithdraw">提现</button>
+            <span>每日现金</span>
+            <button class="profit-btn button-click-effect" @click="handleDailyCashWithdraw">提现</button>
           </div>
           <div class="profit-amount">￥{{ userInfo.xianjin }}</div>
         </div>
-      </div>
-
-      <!-- 第三行 -->
-      <div class="profit-block">
         <div class="profit-left">
           <div class="profit-header">
-            <span>万泰红利</span>
-            <button class="profit-btn button-click-effect" @click="$router.push('/mention?type=2')">提现</button>
+            <span>医疗补贴</span>
+            <button class="profit-btn button-click-effect" @click="handleMedicalWithdraw">提现</button>
           </div>
           <div class="profit-amount">￥{{ userInfo.money }}</div>
         </div>
         <div class="profit-right">
           <div class="profit-header">
-            <span>养生币</span>
-            <button class="profit-btn button-click-effect">抢福</button>
+            <span>原始股权</span>
+            <button class="profit-btn button-click-effect" @click="handleOriginalSharesWithdraw">提现</button>
           </div>
           <div class="profit-amount">￥{{ userInfo.score }}</div>
         </div>
@@ -94,44 +88,45 @@
     <!-- 应用中心板块 -->
     <div class="app-center">
       <div class="section-title">
-        <div class="title-line"></div>
-        <span>应用中心</span>
+        <span>常用工具</span>
       </div>
       <div class="function-grid">
         <div class="function-item button-click-effect" @click="$router.push('/user-center')">
-          <img src="@/assets/221.png" alt="实名认证" />
-          <span>实名认证</span>
+          <span>实名<br/>认证</span>
         </div>
         <div class="function-item button-click-effect" @click="$router.push('/bank-card')">
-          <img src="@/assets/222.png" alt="银行卡绑定" />
-          <span>银行卡绑定</span>
+          <span>银行卡<br/>绑定</span>
         </div>
         <div class="function-item button-click-effect" @click="$router.push('/member')">
-          <img src="@/assets/223.png" alt="我的团队" />
-          <span>我的团队</span>
+          <span>我的<br/>团队</span>
+        </div>
+        <div class="function-item button-click-effect" @click="$router.push('/order-list')">
+          <span>提现<br/>记录</span>
         </div>
         <div class="function-item button-click-effect" @click="$router.push('/asset-center')">
-          <img src="@/assets/224.png" alt="资金明细" />
-          <span>资金明细</span>
+          <span>资金<br/>明细</span>
         </div>
-        <div class="function-item button-click-effect" @click="$router.push('/order-list')">
-          <img src="@/assets/225.png" alt="提现记录" />
-          <span>提现记录</span>
+        <div class="function-item button-click-effect" @click="$router.push('/asset-center')">
+          <span>股权<br/>管理</span>
         </div>
-        <div class="function-item button-click-effect" @click="$router.push('/lever-list')">
-          <img src="@/assets/226.png" alt="礼品福利" />
-          <span>礼品福利</span>
+        <div class="function-item button-click-effect" @click="$router.push('/retirement-subsidy')">
+          <span>退休<br/>补贴</span>
         </div>
-        <div class="function-item button-click-effect" @click="toAppDownload">
-          <img src="@/assets/227.png" alt="APP下载" />
-          <span>APP下载</span>
+        <div class="function-item button-click-effect" @click="$router.push('/asset-center')">
+          <span>订单<br/>管理</span>
+        </div>
+        <!-- <div class="function-item button-click-effect" @click="$router.push('/lever-list')">
+          <span>礼品<br/>福利</span>
         </div>
+        <div class="function-item button-click-effect" @click="toAppDownload">
+          <span>APP<br/>下载</span>
+        </div> -->
       </div>
     </div>
 
     <!-- 退出登录按钮 -->
     <div class="logout-wrapper">
-      <button class="logout-btn button-click-effect" @click="handleLogout">退出登录</button>
+      <button class="logout-btn button-click-effect" @click="handleLogout">安全退出</button>
     </div>
 
     <!-- 自定义确认框 -->
@@ -221,7 +216,41 @@ export default {
       } finally {
         this.showConfirm = false;
       }
-    }
+    },
+    // 红旗资产提现
+    handleRedFlagWithdraw() {
+      alert('等待开启');
+    },
+    // 退休补贴提现
+    handleRetirementWithdraw() {
+      alert('中央资金筹备中');
+    },
+    // 党员薪资提现
+    handlePartySalaryWithdraw() {
+      const minAmount = 60000; // 6万起提
+      if (parseFloat(this.userInfo.coins) < minAmount) {
+        alert('余额不足，最低提现金额为6万元');
+        return;
+      }
+      this.$router.push('/mention?type=1');
+    },
+    // 每日现金提现
+    handleDailyCashWithdraw() {
+      const minAmount = 20; // 20元起提
+      if (parseFloat(this.userInfo.xianjin) < minAmount) {
+        alert('余额不足，满20元可提现');
+        return;
+      }
+      this.$router.push('/mention?type=3');
+    },
+    // 医疗补贴提现
+    handleMedicalWithdraw() {
+      alert('中央资金筹备中');
+    },
+    // 原始股权提现
+    handleOriginalSharesWithdraw() {
+      alert('等待开启');
+    },
   }
 }
 </script>
@@ -241,27 +270,23 @@ export default {
 }
 
 .profile-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 20px;
   margin-bottom: 20px;
   position: relative;
-  padding-top: 60px;
 }
 
 .avatar-section {
-  position: absolute;
-  top: -40px; /* 让头像向上偏移，实现半超出效果 */
-  left: 20px; /* 左侧距离 */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* position: absolute;
+  top: -40px;
+  left: 20px;  */
 }
 
 .avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
+  width: 50px;
+  height: 50px;
   object-fit: cover;
-  border: 2px solid #fff; /* 添加白色边框使头像更突出 */
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
 }
 
 .info-row {
@@ -287,7 +312,8 @@ export default {
 }
 
 .value {
-  color: #333;
+  color: #fff;
+  margin-top: 5px;
 }
 
 .bank-card {
@@ -362,7 +388,7 @@ export default {
 }
 
 .profit-btn {
-  background-color: #fb3f6c;
+  background-color: #ea0a1c;
   color: #fff;
   border: none;
   border-radius: 4px;
@@ -385,6 +411,12 @@ export default {
   gap: 8px;
   cursor: pointer;
   transition: all 0.2s;
+  background-color: #fff;
+  padding:  5px ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
 }
 
 .function-item:active {
@@ -471,41 +503,29 @@ export default {
   flex-direction: column;
   gap: 15px;
   margin-top: 15px;
-  margin-bottom: 15px; /* 底部添加间距 */
+  margin-bottom: 15px;
 }
 
 .profit-block {
-  display: flex;
-  gap: 15px;
-  background: url('../assets/neibg.png');
-  background-size: cover;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  padding: 10px;
+  background: #fff0e1;
   border-radius: 12px;
-  padding: 6px;
 }
 
 .profit-left, .profit-right {
-  flex: 1;
   padding: 10px;
-  position: relative; /* 为分隔线定位做准备 */
-}
-
-/* 添加分隔线 */
-.profit-block:not(:first-child) .profit-left::after {
-  content: '';
-  position: absolute;
-  right: -7.5px; /* 居中放置，gap的一半 */
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1px;
-  height: 70%;
-  background-color: #85370d;
+  background: #fff0e1;
+  border-radius: 8px;
 }
 
 .profit-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* margin-bottom: 10px; */
+  margin-bottom: 8px;
 }
 
 .profit-header span {
@@ -522,9 +542,8 @@ export default {
 /* 移动端适配 */
 @media screen and (max-width: 375px) {
   .profit-block {
-    flex-direction: column;
-    gap: 10px;
-    padding: 6px;
+    gap: 8px;
+    padding: 8px;
   }
 
   .profit-left, .profit-right {
@@ -537,9 +556,7 @@ export default {
 }
 
 .app-center {
-  background: #fff;
   border-radius: 12px;
-  padding: 20px;
   margin-top: 15px;
 }
 
@@ -548,6 +565,7 @@ export default {
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
+  color: #fff;
 }
 
 .title-line {
@@ -559,7 +577,7 @@ export default {
 .section-title span {
   font-size: 16px;
   font-weight: bold;
-  color: #333;
+  color: #fff;
 }
 
 .function-grid {
@@ -604,19 +622,23 @@ export default {
   margin-top: 30px;
   margin-bottom: 20px;
   padding: 0 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .logout-btn {
-  width: 100%;
-  background-color: #fb3f6c;
-  color: #fff;
+  width: 60%;
+  background-color: #fff;
+  color: #000;
   border: none;
-  border-radius: 6px;
+  border-radius: 20px;
   padding: 12px 0;
   font-size: 16px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  
 }
 
 .logout-btn:active {
@@ -713,7 +735,7 @@ export default {
 }
 
 .confirm-btn.confirm {
-  color: #fb3f6c;
+  color: #cf0101;
   font-weight: bold;
 }
 

src/views/RetirementSubsidy.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="container">
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">退休补贴</div>
+    </div>
+
+    <div class="content">
+      <!-- Logo和标题 -->
+      <div class="header">
+        <div class="header-left">
+          <img src="@/assets/avart.png" alt="红旗" class="logo-img" />
+        </div>
+        <div class="header-right">
+          <div class="slogan">红旗资本·民生为本·保障一生</div>
+        </div>
+      </div>
+
+      <!-- 补贴等级列表 -->
+      <div class="subsidy-list">
+        <!-- 初级退休补贴金 -->
+        <div class="subsidy-card">
+          <div class="subsidy-title">初级退休补贴金</div>
+          <div class="subsidy-content">
+            <div class="subsidy-row">
+              <span>收益率</span>
+              <span>每日获得</span>
+              <span>参与份数</span>
+            </div>
+            <div class="subsidy-row">
+              <span>10%</span>
+              <span>3000元</span>
+              <span>1份</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 一级退休补贴金 -->
+        <div class="subsidy-card">
+          <div class="subsidy-title">一级退休补贴金</div>
+          <div class="subsidy-content">
+            <div class="subsidy-row">
+              <span>收益率</span>
+              <span>每日获得</span>
+              <span>参与份数</span>
+            </div>
+            <div class="subsidy-row">
+              <span>10%</span>
+              <span>6000元</span>
+              <span>1份</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 二级退休补贴金 -->
+        <div class="subsidy-card">
+          <div class="subsidy-title">二级退休补贴金</div>
+          <div class="subsidy-content">
+            <div class="subsidy-row">
+              <span>收益率</span>
+              <span>每日获得</span>
+              <span>参与份数</span>
+            </div>
+            <div class="subsidy-row">
+              <span>10%</span>
+              <span>10000元</span>
+              <span>1份</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 三级退休补贴金 -->
+        <div class="subsidy-card">
+          <div class="subsidy-title">三级退休补贴金</div>
+          <div class="subsidy-content">
+            <div class="subsidy-row">
+              <span>收益率</span>
+              <span>每日获得</span>
+              <span>参与份数</span>
+            </div>
+            <div class="subsidy-row">
+              <span>10%</span>
+              <span>20000元</span>
+              <span>1份</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RetirementSubsidy'
+}
+</script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+  background-image: url('../assets/dabag.png');
+  background-size: cover;
+  background-position: center;
+  padding-bottom: 20px;
+}
+
+.nav-bar {
+  height: 44px;
+  background-color: transparent;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.content {
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 30px;
+  color: #fff;
+  padding: 0 15px;
+}
+
+.header-left {
+  margin-right: 15px;
+}
+
+.logo-img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.header-right {
+  flex: 1;
+}
+
+.slogan {
+  font-size: 16px;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.subsidy-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.subsidy-card {
+  background-color: #ffffff;
+  /* border-radius: 10px; */
+  overflow: hidden;
+}
+
+.subsidy-title {
+  background-color: #fdf3d0;
+  color: #333;
+  padding: 12px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: start;
+  border-bottom: 1px solid #eee;
+}
+
+.subsidy-content {
+  padding: 8px 10px;
+}
+
+.subsidy-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  color: #000;
+}
+
+.subsidy-row span {
+  flex: 1;
+  text-align: center;
+  width: 33.33%;
+}
+
+
+
+.subsidy-row:last-child {
+  margin-bottom: 0;
+  font-weight: bold;
+  color: #000;
+}
+
+@media screen and (max-width: 375px) {
+  .content {
+    padding: 15px;
+  }
+
+  .subsidy-card {
+    margin-bottom: 10px;
+  }
+
+  .subsidy-title {
+    padding: 10px;
+    font-size: 14px;
+  }
+
+  .subsidy-content {
+    padding: 12px;
+  }
+
+  .subsidy-row {
+    font-size: 14px;
+  }
+}
+</style>