合并代码

src/components/BottomNav.vue

@@ -10,8 +10,8 @@
     </div>
     <div 
       class="nav-item" 
-      :class="{ active: isActive('/mymatching') }"
-      @click="handleNavClick('/mymatching')"
+      :class="{ active: isActive('/matching') }"
+      @click="handleNavClick('/matching')"
     >
       <User class="nav-icon" />
       <span class="nav-label">资金匹配</span>

src/views/MainPage.vue

@@ -40,12 +40,12 @@
       <!-- 修改后的操作区域 - 三个部分等宽 -->
       <div class="action-area">
         <div class="action-grid">
-          <router-link to="/mymatching" class="action-main">
+            <div @click="startMatching" class="action-main">
               <div class="matching-text">
                 <div>开始</div>
                 <div>匹配</div>
               </div>
-          </router-link>
+            </div>
           <div class="action-stack">
             <div class="action-sub-item top">
               <div class="action-icon">💎</div>
@@ -87,19 +87,38 @@ export default {
     Swiper,
     SwiperSlide
   },
-  setup() {
+  methods:{
+    async startMatching(type = 'small', amount = null) {
+      // 先导航到匹配页面
+      await this.$router.push('/matching')
+      
+      // 等待页面加载完成后触发匹配
+      setTimeout(() => {
+        // 通过全局事件总线触发匹配页面的匹配方法
+        window.dispatchEvent(new CustomEvent('autoStartMatching', {
+          detail: {
+            type,
+            amount
+          }
+        }))
+      }, 500)
+    }
+  },
+  setup(){
+
+
     // 响应式数据
     const userPoints = ref(0)
     const carouselItems = ref([
-      { image: '/imgs/top/1.jpg', title: '限时优惠活动' },
-      { image: '/imgs/top/2.jpg', title: '新用户专享' },
-      { image: '/imgs/top/3.jpg', title: '积分兑换' }
+      { image: '../..../../imgs/top/1.jpg', title: '限时优惠活动' },
+      { image: '../../imgs/top/2.jpg', title: '新用户专享' },
+      { image: '../../imgs/top/3.jpg', title: '积分兑换' }
     ])
     const headerItems = ref([
-      { image: "/imgs/mainpage/交易记录.png", text: "交易记录", path: "/transfers" },
-      { image: "/imgs/mainpage/订单查询.png", text: "订单查询", path: "/points-history" },
-      { image: "/imgs/mainpage/客服中心.png", text: "客服中心", path: "/support" },
-      { image: "/imgs/mainpage/系统公告.png", text: "系统公告", path: "/announcements" }
+      { image: "../../imgs/mainpage/交易记录.png", text: "交易记录", path: "/transfers" },
+      { image: "../../imgs/mainpage/订单查询.png", text: "订单查询", path: "/points-history" },
+      { image: "../../imgs/mainpage/客服中心.png", text: "客服中心", path: "/support" },
+      { image: "../../imgs/mainpage/系统公告.png", text: "系统公告", path: "/announcements" }
     ])
     const newsItems = ref([
       "最新活动：双十一特惠",
@@ -145,7 +164,7 @@ export default {
       carouselItems,
       headerItems,
       newsItems,
-      getUserPoints // 如果需要外部调用可以暴露
+      getUserPoints// 如果需要外部调用可以暴露
     }
   }
 }

src/views/MyMatching.vue

@@ -207,6 +207,25 @@ export default {
   },
   async mounted() {
     await this.loadData()
+  
+    // 监听自动开始匹配事件
+    const handleAutoStartMatching = async (event) => {
+      const { type, amount } = event.detail
+      
+      // 如果有指定匹配类型则切换
+      if (type === 'large' && amount) {
+        this.matchingType = 'large'
+        this.customAmount = amount
+      } else {
+        this.matchingType = 'small'
+      }
+      
+      // 触发匹配
+      await this.createOrder()
+    }
+    
+    window.addEventListener('autoStartMatching', handleAutoStartMatching)
+    
   },
   methods: {
     async loadData() {

src/views/MyShop.vue

@@ -10,7 +10,7 @@
         <router-link to="/mypoints-history" class="detail-btn">
           <div>点击查看积分明细</div>
         </router-link>
-        <img src="/imgs/shop.png" alt="积分商城图标" class="balance-image">
+        <img src="../../imgs/shop.png" alt="积分商城图标" class="balance-image">
       </div>
       
       <!-- 公告区域 -->
@@ -19,7 +19,12 @@
       </div>
       
       <!-- 空白间隔 -->
-      <div class="empty-spacer"></div>
+      <div class="empty-spacer">
+        <router-link to="/shop">
+          <button>点击查看全部商品</button>
+        </router-link>
+        <img src="../../imgs/shop2.png" alt="">
+      </div>
       
       <!-- 分类区域 -->
       <div class="category-section">
@@ -178,13 +183,67 @@ export default {
   color: #666;
 }
 
-/* 空白间隔 - 添加圆角 */
+/* 空白间隔区域 - 完整样式 */
 .empty-spacer {
   width: 344px;
   height: 71px;
   margin: 0 auto;
   background: white;
   border-radius: 12px;
+  box-shadow: var(--box-shadow); /* 增加阴影，与其他区块保持一致 */
+  padding: 0 16px; /* 左右内边距，避免内容贴边 */
+  display: flex; /* 使用flex布局排列按钮和图片 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: space-between; /* 按钮居左，图片居右 */
+}
+
+/* 按钮容器链接样式 */
+.empty-spacer router-link {
+  text-decoration: none; /* 去除链接默认下划线 */
+  width: auto; /* 宽度由按钮内容决定 */
+}
+
+/* 按钮样式优化 */
+.empty-spacer button {
+  height: 40px; /* 固定按钮高度，增强点击区域 */
+  padding: 0 20px; /* 增加左右内边距，扩大按钮面积 */
+  background: linear-gradient(135deg, #ffae00 0%, #ff8c00 100%); /* 渐变背景，呼应顶部色调 */
+  color: white; /* 文字白色，提高对比度 */
+  border: none; /* 去除默认边框 */
+  border-radius: 20px; /* 圆角设计，与页面风格统一 */
+  font-size: 15px; /* 适中字体大小 */
+  font-weight: 500; /* 半粗体，增强视觉权重 */
+  cursor: pointer; /* 鼠标悬停显示手型 */
+  transition: var(--transition); /* 过渡动画，与其他交互元素保持一致 */
+  box-shadow: 0 2px 4px rgba(255, 140, 0, 0.3); /* 轻微阴影，增强立体感 */
+}
+
+/* 按钮悬停效果 */
+.empty-spacer button:hover {
+  transform: translateY(-2px); /* 轻微上浮效果 */
+  box-shadow: 0 4px 8px rgba(255, 140, 0, 0.4); /* 阴影加深，增强交互反馈 */
+  background: linear-gradient(135deg, #ff9a00 0%, #ff7b00 100%); /* 悬停时颜色加深 */
+}
+
+/* 按钮:active状态 */
+.empty-spacer button:active {
+  transform: translateY(0); /* 点击时恢复原位 */
+  box-shadow: 0 1px 2px rgba(255, 140, 0, 0.3); /* 阴影变浅，模拟按压效果 */
+}
+
+/* 图片样式优化 */
+.empty-spacer img {
+  height: 45px; /* 图片高度略大于按钮，形成视觉平衡 */
+  width: auto; /* 宽度自适应，保持比例 */
+  object-fit: contain; /* 确保图片完整显示 */
+  opacity: 0.9; /* 轻微降低不透明度，避免喧宾夺主 */
+  transition: var(--transition); /* 过渡动画 */
+}
+
+/* 图片悬停效果（可选） */
+.empty-spacer img:hover {
+  opacity: 1; /* 悬停时恢复完全不透明度 */
+  transform: scale(1.05); /* 轻微放大，增强交互感 */
 }
 
 /* 分类区域样式 */