ui更改

src/components/TabBar.vue

@@ -74,7 +74,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 50px;
+  height: 60px;
   background-color: #fff;
   display: flex;
   box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
@@ -90,13 +90,13 @@ export default {
     font-size: 14px;
 
     .tab-icon {
-      width: 24px;
-      height: 24px;
+      width: 30px;
+      height: 30px;
       margin-bottom: 2px;
     }
 
     &.active {
-      color: rgb(237, 75, 57);
+      color: #000;
     }
   }
 }

src/views/Mall.vue

@@ -15,27 +15,29 @@
       <div class="plan-header">
         {{ item.title }}
       </div>
-      <div class="plan-table-row">
-        <div class="plan-col">
-          <div class="plan-label">参与金额</div>
-          <div class="plan-value">{{ item.money }}红旗资产</div>
-        </div>
-        <div class="plan-col">
-          <div class="plan-label">退休金</div>
-          <div class="plan-value">{{ item.computing_power }}</div>
-        </div>
-        <div class="plan-col">
-          <div class="plan-label">日收益</div>
-          <div class="plan-value">{{ item.power }}%</div>
-        </div>
-        <div class="plan-col-btn">
-          <button 
-            class="plan-btn"
-            @click="toPayment(item)"
-          >
-            立即参与
-          </button>
+      <div class="plan-content">
+        <div class="plan-info">
+          <div class="plan-amount">
+            <span class="amount-label">参与金额</span>
+            <span class="amount-value">{{ item.money }}红旗资产</span>
+          </div>
+          <div class="plan-details">
+            <div class="detail-item">
+              <span class="detail-label">退休金</span>
+              <span class="detail-value">{{ item.computing_power }}</span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">日收益</span>
+              <span class="detail-value highlight">{{ item.power }}%</span>
+            </div>
+          </div>
         </div>
+        <button 
+          class="action-btn"
+          @click="toPayment(item)"
+        >
+          立即参与
+        </button>
       </div>
     </div>
     <div v-if="loading" class="loading-mask">
@@ -171,97 +173,130 @@ export default {
 
 <style scoped>
 .usremei-container {
-   min-height: 100vh;
+  min-height: 100vh;
   background-image: url('../assets/dabag.png');
   background-size: cover;
   background-position: center;
-  padding-top: 60px;
-  padding-bottom: 80px; /* 为底部tab预留空间 */
-  box-sizing: border-box; /* 确保padding不会增加容器高度 */
-  overflow-y: auto; /* 允许内容滚动 */
-  position: relative; /* 为fixed定位提供参考 */
+  padding:60px 10px 60px;
+  box-sizing: border-box;
 }
 
 .desc-card {
-  background: #fff8e1;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-  margin: 0px 16px 24px 16px;
-  padding: 18px 16px 12px 16px;
-  z-index: 2;
-  position: relative;
+  background: rgba(255, 248, 225, 0.95);
+  border-radius: 8px;
+  margin: 0 0 8px;
+  padding: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
+
 .desc-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: bold;
-  margin-bottom: 8px;
+  color: #d0021b;
+  margin-bottom: 6px;
+  line-height: 1.2;
 }
+
 .desc-content {
   font-size: 12px;
   color: #333;
-  line-height: 1.7;
+  line-height: 1.4;
+  max-height: 48px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
+
 .plan-card {
-  background: #d0021b;
+  background: #fff;
   border-radius: 8px;
-  margin: 0 16px 22px 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
-  
+  margin-bottom: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
 }
+
 .plan-header {
-  background: #fff8e1;
-  color: #333;
+  background: #fce5b1;
+  color: #000;
   font-size: 14px;
   font-weight: bold;
-  padding: 6px 12px;
-  border-bottom: 1px solid #f5c6cb;
+  padding: 6px 10px;
+
 }
-.plan-table-row {
+
+.plan-content {
+  padding: 8px 10px;
+  background: #fff;
   display: flex;
+  justify-content: space-between;
   align-items: center;
+}
+
+.plan-info {
+  flex: 1;
+  display: flex;
   justify-content: space-between;
-  background: #fff;
-  padding: 0 18px;
-  height: 70px;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.plan-amount {
+  text-align: left;
+}
+
+.amount-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 2px;
 }
-.plan-col {
-  width:auto;
-  font-size:12px;
+
+.amount-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #d0021b;
   white-space: nowrap;
+}
+
+.plan-details {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  gap: 15px;
 }
-.plan-label {
-  color: #333;
-  font-size: 14px;
-  font-weight: bold;
+
+.detail-item {
+  text-align: center;
+}
+
+.detail-label {
+  font-size: 12px;
+  color: #666;
   margin-bottom: 2px;
 }
-.plan-value {
-  margin-top:6px;
+
+.detail-value {
   font-size: 14px;
-  text-align:center;
+  font-weight: bold;
+  color: #333;
 }
-.plan-col-btn {
-  
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+.detail-value.highlight {
+  color: #d0021b;
 }
-.plan-btn {
-  background: #b80032;
+
+.action-btn {
+  width: 80px;
+  height: 32px;
+  background: #d0021b;
   color: #fff;
   border: none;
-  border-radius: 18px;
-  padding: 2px 6px;
+  border-radius: 16px;
   font-size: 14px;
+  font-weight: bold;
   cursor: pointer;
-  transition: background 0.2s;
-}
-.plan-btn:hover {
-  background: #a00028;
+  flex-shrink: 0;
 }
+
 .loading-mask {
   position: fixed;
   left: 0; top: 0; right: 0; bottom: 0;
@@ -272,6 +307,7 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
 .loading-spinner {
   border: 4px solid #f3f3f3;
   border-top: 4px solid #b80032;
@@ -280,6 +316,7 @@ export default {
   animation: spin 1s linear infinite;
   margin-bottom: 10px;
 }
+
 @keyframes spin {
   0% { transform: rotate(0deg);}
   100% { transform: rotate(360deg);}
@@ -390,7 +427,7 @@ export default {
   width: 100%;
   height: 2px;
   background-color: #999;
-  top: 50%;
+  top: 51%;
   left: 0;
 }
 

src/views/home/index.vue

@@ -52,11 +52,14 @@
       </button>
     </div>
     <div class="news-title">新闻中心</div>
-    <div
-      class="news_content"
-      v-if="newsList[2]"
-      v-html="newsList[2].content"
-    ></div>
+    <div class="news-list">
+      <div
+        class="news_content"
+        v-for="(news, index) in newsList"
+        :key="index"
+        v-html="news.content"
+      ></div>
+    </div>
     <van-dialog
       v-model="showAuthDialog"
       :show-confirm-button="false"
@@ -166,21 +169,23 @@ export default {
 
 <style lang="scss" scoped>
 .home {
-  height: 100%;
+  min-height: 100vh;
   width: 100%;
-  background: url('~@/assets/dabag.png') no-repeat center center;
-  background-size: 100% 100%;
-  background-position: center;
+  background: url('~@/assets/dabag.png') no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
   display: flex;
   flex-direction: column;
-  padding: 18px;
+  padding:100px 18px 80px;
   box-sizing: border-box;
+  position: relative;
 }
 
 .top-btns {
   width: 100%;
   display: flex;
   justify-content: space-between;
+  margin-top: 15px;
   .row {
     display: flex;
     justify-content: center;
@@ -301,13 +306,67 @@ export default {
   font-weight: bold;
   text-shadow: 0 2px 8px rgba(0,0,0,0.12);
 }
-.news_content {
+.news-list {
   width: 100%;
-  min-height: 450px; /* 保证在小屏下也有合适高度 */
+  padding-bottom: 40px;
+  overflow-x: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.news_content {
+  width: 90%;
+  min-height: 100px;
   border: none;
-  margin-top: 12px;
+  margin: 16px auto 0;
   border-radius: 8px;
   background: #fff;
+  padding: 15px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  box-sizing: border-box;
+  
+  &:last-child {
+    margin-bottom: 20px;
+  }
+
+  :deep(p) {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    flex-wrap: wrap;
+  }
+
+  :deep(img) {
+    width: 120px;
+    height: 90px;
+    object-fit: cover;
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  :deep(span) {
+    flex: 1;
+    min-width: 200px;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #333;
+  }
+
+  :deep(div) {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    margin-bottom: 10px;
+  }
+
+  :deep(*:not(img)) {
+    max-width: 100%;
+    word-break: break-word;
+  }
 }
 
 .close-icon-wrapper {