diff --git a/public/imgs/mainpage/lunbotu/1.png b/public/imgs/mainpage/lunbotu/1.png new file mode 100644 index 0000000..7899120 Binary files /dev/null and b/public/imgs/mainpage/lunbotu/1.png differ diff --git a/public/imgs/mainpage/lunbotu/2.png b/public/imgs/mainpage/lunbotu/2.png new file mode 100644 index 0000000..d9e8186 Binary files /dev/null and b/public/imgs/mainpage/lunbotu/2.png differ diff --git a/public/imgs/mainpage/lunbotu/3.png b/public/imgs/mainpage/lunbotu/3.png new file mode 100644 index 0000000..63c9bdd Binary files /dev/null and b/public/imgs/mainpage/lunbotu/3.png differ diff --git a/public/imgs/top/1.jpg b/public/imgs/top/1.jpg deleted file mode 100644 index 108e7b3..0000000 Binary files a/public/imgs/top/1.jpg and /dev/null differ diff --git a/public/imgs/top/2.jpg b/public/imgs/top/2.jpg deleted file mode 100644 index 62ebbf5..0000000 Binary files a/public/imgs/top/2.jpg and /dev/null differ diff --git a/public/imgs/top/3.jpg b/public/imgs/top/3.jpg deleted file mode 100644 index 6c736ec..0000000 Binary files a/public/imgs/top/3.jpg and /dev/null differ diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue index 5817329..64fcd7e 100644 --- a/src/views/MainPage.vue +++ b/src/views/MainPage.vue @@ -15,7 +15,7 @@ :pagination="{ clickable: true }" :loop="true" > - + @@ -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);