美化页面，加强适配

src/views/MainPage.vue

@@ -54,6 +54,8 @@
         </div>
       </div>
 
+      <div class="tips">点击获得融豆，可兑换商城好物！</div>
+
       <!-- 热门资讯 -->
       <div class="hot-news">
         <div class="news-title">热门资讯</div>
@@ -145,7 +147,7 @@ export default {
       {
         image: '/imgs/mainpage/dingdanchaxun.png',
         text: '订单查询',
-        path: '/points-history',
+        path: '/orders',
       },
       {
         image: '/imgs/mainpage/kefuzhongxin.png',
@@ -352,8 +354,11 @@ export default {
   align-items: center;
   gap: 10px;
   width: 100%;
+  overflow:hidden;
 }
 
+
+
 .action-item {
   flex: 1;
   display: flex;
@@ -369,30 +374,49 @@ export default {
 }
 
 .action-image1 {
-  width: 300%;
+  width: 175%;
   height: auto;
   max-width: 180px;
   object-fit: contain;
   border-radius: 8px;
-  margin-left: 40px;
+  margin-left: 50px;
+  margin-top: -5px;
 }
 
 .action-image2 {
-  width: 300%;
+  width: 175%;
+  height: auto;
+  max-width: 180px;
+  object-fit: contain;
+  border-radius: 8px;
+  margin-left: 12px;
+}
+
+.action-image3 {
+  width: 175%;
   height: auto;
   max-width: 180px;
   object-fit: contain;
   border-radius: 8px;
   margin-left: 20px;
+  margin-top: 0px;
 }
 
-.action-image3 {
-  width: 300%;
-  height: auto;
-  max-width: 180px;
-  object-fit: contain;
-  border-radius: 8px;
-  margin-left: 40px;
+.tips {
+  width: 100%;
+  max-width: 343px;
+  margin: 0 auto;
+  padding: 12px 20px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--primary-color);
+  background-color: rgba(67, 97, 238, 0.1);
+  border: 1px solid var(--primary-color);
+  border-radius: 25px;
+  box-shadow: 0 2px 8px rgba(67, 97, 238, 0.15);
+  color: #22a7ff;
+  margin-top: -50px;
 }
 
 /* 热门资讯 */

src/views/MyPointsHistory.vue

@@ -120,7 +120,7 @@
       <div class="points-rules">
         <el-collapse v-model="activeRules">
           <el-collapse-item title="积分获取规则" name="earn">
-            <div class="rules-content">
+            <!-- <div class="rules-content">
               <div class="rule-item">
                 <el-icon><UserFilled /></el-icon>
                 <span>注册账户：+100积分</span>
@@ -141,7 +141,7 @@
                 <el-icon><Trophy /></el-icon>
                 <span>完成任务：+50积分</span>
               </div>
-            </div>
+            </div> -->
           </el-collapse-item>
           <el-collapse-item title="积分使用规则" name="spend">
             <div class="rules-content">
@@ -300,7 +300,7 @@ const formatDateTime = (date) => {
 }
 
 const viewOrder = (orderId) => {
-  router.push(`/orders?orderId=${orderId}`)
+  router.push(`/payloading?orderId=${orderId}`)
 }
 
 const getUserPoints = async () => {
@@ -410,8 +410,10 @@ onMounted(() => {
   flex-direction: column;
   min-height: 100vh;
   width: 100%;
+  max-width: 100vw;
   margin: 0;
   padding: 0;
+  overflow-x: hidden;
   background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
@@ -426,6 +428,8 @@ onMounted(() => {
   max-width: 375px;
   margin: 0 auto;
   width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 /* 导航栏样式 */
@@ -698,6 +702,9 @@ onMounted(() => {
   color: #333;
   font-weight: 500;
   line-height: 1.4;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow-wrap: break-word;
 }
 
 .item-points {
@@ -726,6 +733,9 @@ onMounted(() => {
   font-size: 14px;
   color: #666;
   line-height: 1.4;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow-wrap: break-word;
 }
 
 .item-meta {
@@ -854,13 +864,48 @@ onMounted(() => {
 }
 
 /* 响应式设计 */
-@media (max-width: 375px) {
+@media (max-width: 480px) {
   .main-content {
     padding: 12px;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  .overview-card {
+    padding: 16px;
+  }
+
+  .current-points {
+    flex-direction: column;
+    text-align: center;
+    gap: 12px;
+    padding-right: 0;
+    align-items: center;
+  }
+
+  .balance-image {
+    position: static;
+    transform: none;
+    height: 80px;
+    max-width: 80px;
+    margin-top: 8px;
+  }
+
+  .points-info {
+    text-align: center;
+  }
+
+  .points-value {
+    font-size: 28px;
   }
 
   .points-stats {
-    gap: 16px;
+    gap: 24px;
+    justify-content: center;
+  }
+
+  .stat-value {
+    font-size: 18px;
   }
 
   .item-header {
@@ -875,18 +920,53 @@ onMounted(() => {
     gap: 4px;
   }
 
-  .current-points {
-    flex-direction: column;
-    text-align: center;
-    gap: 8px;
-  }
-
   .filter-tabs {
     gap: 4px;
   }
 
   .tab-item {
-    padding: 5px 10px;
+    padding: 8px 6px;
+    font-size: 12px;
+  }
+
+  .history-item {
+    padding: 12px;
+  }
+
+  .item-title {
+    font-size: 14px;
+    line-height: 1.3;
+  }
+
+  .item-description {
+    font-size: 13px;
+    line-height: 1.3;
+  }
+
+  .item-points {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 375px) {
+  .main-content {
+    padding: 8px;
+  }
+
+  .overview-card {
+    padding: 12px;
+  }
+
+  .points-value {
+    font-size: 24px;
+  }
+
+  .stat-value {
+    font-size: 16px;
+  }
+
+  .tab-item {
+    padding: 6px 4px;
     font-size: 11px;
   }
 }
@@ -909,7 +989,7 @@ onMounted(() => {
   align-items: center;
   gap: 16px;
   margin-bottom: 24px;
-  padding-right: 20px; /* 为图片留出空间 */
+  padding-right: 120px; /* 为图片留出更多空间 */
 }
 
 /* 调整积分概览卡片为相对定位 */