优化

src/components/TabBar.vue

@@ -31,16 +31,16 @@ export default {
           iconActive: 'index1.png'
         },
         {
-          path: '/mall',
-          title: '退休计划',
-          icon: 'hang0.png',
-          iconActive: 'hang1.png'
+          path: '/dynamic',
+          title: '邀请百姓',
+          icon: '6.png',
+          iconActive: '5.png'
         },
         {
           // path: '/dynamic', //邀请百姓
           // path: '/China', // 红旗医疗
           path: '/Medical', // 红旗原始股
-          title: '红旗基金',
+          title: '建科基金',
           icon: 'gang0.png',
           iconActive: 'gang1.png'
         },

src/views/Medical.vue

@@ -10,11 +10,23 @@
     <!-- 团队奖励卡片 -->
     <div class="commission-card">
       <div class="commission-content">
-        <span class="commission-title">团队奖励</span>
-        <div class="commission-rates">
-          <span class="rate-item">一级5%</span>
-          <span class="rate-item">二级3%</span>
-          <span class="rate-item">三级1%</span>
+        <div class="reward-left">
+          <div class="reward-icon">🎯</div>
+          <span class="reward-label">团队奖励</span>
+        </div>
+        <div class="reward-right">
+          <div class="reward-item">
+            <span class="reward-level">一级</span>
+            <span class="reward-percent">5%</span>
+          </div>
+          <div class="reward-item">
+            <span class="reward-level">二级</span>
+            <span class="reward-percent">3%</span>
+          </div>
+          <div class="reward-item">
+            <span class="reward-level">三级</span>
+            <span class="reward-percent">1%</span>
+          </div>
         </div>
       </div>
     </div>
@@ -30,13 +42,18 @@
         
         <!-- 项目内容 -->
         <div class="project-content">
-          <div class="income-info">
-            <div class="income-rate">{{ item.power }}%</div>
-            <div class="income-label">每日收益</div>
+          <div class="project-image">
+            <img :src="item.images" :alt="item.title" class="project-img" />
           </div>
-          <div class="amount-info">
-            <div class="amount-value">{{ item.money }}元</div>
-            <div class="amount-label">参与金额</div>
+          <div class="project-info">
+            <div class="income-info">
+              <div class="income-rate">{{ item.power }}%</div>
+              <div class="income-label">每日收益</div>
+            </div>
+            <div class="amount-info">
+              <div class="amount-value">{{ item.money }}元</div>
+              <div class="amount-label">参与金额</div>
+            </div>
           </div>
           <button class="join-btn" @click="toPayment(item)">立即参与</button>
         </div>
@@ -98,46 +115,100 @@ export default {
 
 .desc-text {
   color: #333;
-    font-size: 14px;
-    line-height: 1.5;
-    text-align: justify;
-    font-weight: 700;
-    font-family: auto;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: justify;
+  font-weight: 700;
+  font-family: auto;
 }
 
 /* 团队奖励卡片 */
 .commission-card {
-  background: #fff;
-  border-radius: 12px;
-  padding: 18px 20px;
+  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+  border-radius: 20px;
+  padding: 16px 20px;
   margin-bottom: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  box-shadow: 0 4px 12px rgba(180, 58, 57, 0.15);
+  position: relative;
+}
+
+.commission-card::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  height: 4px;
+  background: linear-gradient(90deg, #b43a39, #d91d42, #b43a39);
+  border-radius: 20px 20px 0 0;
 }
 
 .commission-content {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-weight: bold;
+  white-space: nowrap;
 }
 
-.commission-title {
-  color: #d0021b;
-  font-weight: bold;
+.reward-left {
+  display: flex;
+  align-items: center;
+}
+
+.reward-icon {
+  font-size: 24px;
+  margin-right: 8px;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.reward-label {
+  color: #b53b38;
+  font-weight: 600;
   font-size: 16px;
-  margin-right: 24px;
-  white-space: nowrap;
 }
 
-.commission-rates {
+.reward-right {
   display: flex;
-  gap: 32px;
   align-items: center;
 }
 
-.rate-item {
-  color: #222;
-  font-size: 14px;
+.reward-item {
+  margin: 0 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.reward-level {
+  color: #666;
+  font-size: 11px;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.reward-percent {
+  background: linear-gradient(135deg, #b43a39, #d91d42);
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
   font-weight: bold;
-  letter-spacing: 1px;
+  min-width: 32px;
+  box-shadow: 0 2px 4px rgba(180, 58, 57, 0.3);
+  transition: all 0.2s ease;
+}
+
+.reward-percent:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(180, 58, 57, 0.4);
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
 }
 
 /* 项目列表 */
@@ -155,7 +226,7 @@ export default {
 .project-header {
   background: #d91d42;
   color: #fff;
-  padding: 12px 20px;
+  padding: 5px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -172,10 +243,37 @@ export default {
 }
 
 .project-content {
-  padding: 20px;
+  padding: 2px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
+}
+
+.project-image {
+  flex-shrink: 0;
+}
+
+.project-img {
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+  object-fit: cover;
+  border: 2px solid #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.project-img:hover {
+  border-color: #d91d42;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(217, 29, 66, 0.3);
+}
+
+.project-info {
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+  align-items: center;
 }
 
 .income-info, .amount-info {
@@ -198,7 +296,7 @@ export default {
   background: #d91d42;
   color: #fff;
   border: none;
-  padding: 12px 24px;
+  padding: 5px 7px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: bold;