轮播图更新

src/views/MainPage.vue

@@ -15,7 +15,7 @@
           :pagination="{ clickable: true }"
           :loop="true"
         >
-          <swiper-slide v-for="(item, index) in carouselItems" :key="index">
+          <swiper-slide v-for="(item, index) in carouselItems" :key="index" @click="handleCarouselClick(item)" class="carousel-slide">
             <img :src="item.image" :alt="item.title" class="carousel-img" />
             <div class="carousel-title">{{ item.title }}</div>
           </swiper-slide>
@@ -122,6 +122,7 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { ElMessage, ElDialog, ElButton } from 'element-plus';
 import { transferAPI } from '../utils/api';
 import { useUserStore } from '../stores/user';
+import { useRouter } from 'vue-router';
 import 'swiper/css';
 import 'swiper/css/autoplay';
 import 'swiper/css/pagination';
@@ -135,6 +136,7 @@ export default {
   setup() {
     // 用户store
     const userStore = useUserStore();
+    const router = useRouter();
     
     // 响应式数据
     const userPoints = ref(0);
@@ -148,9 +150,9 @@ export default {
       return userStore.user?.username || '用户';
     });
     const carouselItems = ref([
-      { image: '/imgs/top/1.jpg', title: '限时优惠活动' },
-      { image: '/imgs/top/2.jpg', title: '新用户专享' },
-      { image: '/imgs/top/3.jpg', title: '积分兑换' },
+      { image: '/imgs/mainpage/lunbotu/1.png', title: '招商中', path: '/' },
+      { image: '/imgs/mainpage/lunbotu/2.png', title: '代理合作', path: '/agent/login' },
+      { image: '/imgs/mainpage/lunbotu/3.png', title: '积分兑换', path: '/myshop' },
     ]);
     const headerItems = ref([
       {
@@ -321,6 +323,14 @@ export default {
       showWelcomeDialog.value = true; // 无条件显示对话框
     };
 
+    // 处理轮播图点击事件
+    const handleCarouselClick = (item) => {
+      if (item.path && item.path !== '#') {
+        // 使用Vue Router进行页面跳转
+        router.push(item.path);
+      }
+    };
+
     return {
       modules: [Autoplay, Pagination],
       userPoints,
@@ -338,6 +348,7 @@ export default {
       closeWelcomeDialog,
       handleReadClick,
       handleSystemAnnouncementClick,
+      handleCarouselClick,
       displayAnnouncements,
       isSystemAnnouncementClick,
     };
@@ -413,6 +424,15 @@ export default {
   z-index: 1; /* 设置较低的z-index，让背景图显示在上面 */
 }
 
+.carousel-slide {
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.carousel-slide:hover {
+  transform: scale(1.02);
+}
+
 .carousel-img {
   width: 100%;
   height: 100%;
@@ -421,7 +441,7 @@ export default {
 
 .carousel-title {
   position: absolute;
-  bottom: 0;
+  bottom: 12px;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.5);