diff --git a/public/imgs/mainpage/gengxintishi.png b/public/imgs/mainpage/gengxintishi.png new file mode 100644 index 0000000..f1d6180 Binary files /dev/null and b/public/imgs/mainpage/gengxintishi.png differ diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue index 5383dcd..32eb3b1 100644 --- a/src/views/MainPage.vue +++ b/src/views/MainPage.vue @@ -73,6 +73,38 @@ + + + +
+
🎉
+

融汇通更新

+
+
+ 💎 + 获取融豆赚取积分 +
+
+ 🛒 + 积分商城兑换好礼 +
+
+
+ +
@@ -80,7 +112,7 @@ import { Swiper, SwiperSlide } from 'swiper/vue'; import { Autoplay, Pagination } from 'swiper'; import { ref, onMounted, onUnmounted } from 'vue'; -import { ElMessage } from 'element-plus'; +import { ElMessage, ElDialog, ElButton } from 'element-plus'; import { transferAPI } from '../utils/api'; import 'swiper/css'; import 'swiper/css/autoplay'; @@ -94,6 +126,7 @@ export default { setup() { // 响应式数据 const userPoints = ref(0); + const showWelcomeDialog = ref(false); const carouselItems = ref([ { image: '/imgs/top/1.jpg', title: '限时优惠活动' }, { image: '/imgs/top/2.jpg', title: '新用户专享' }, @@ -149,6 +182,11 @@ export default { getUserPoints(); // 每5分钟刷新一次积分(可根据需求调整时间) refreshInterval = setInterval(getUserPoints, 5 * 60 * 1000); + + // 显示欢迎弹窗 + setTimeout(() => { + showWelcomeDialog.value = true; + }, 500); // 延迟500ms显示,让页面先加载完成 }); onUnmounted(() => { @@ -161,6 +199,7 @@ export default { carouselItems, headerItems, newsItems, + showWelcomeDialog, getUserPoints, // 如果需要外部调用可以暴露 }; }, @@ -410,4 +449,128 @@ export default { :deep(.swiper-pagination-bullet-active) { background: var(--primary-color) !important; } + +/* 欢迎弹窗样式 */ +:deep(.welcome-dialog .el-dialog__body) { + background-image: url('/imgs/mainpage/gengxintishi.png'); + background-size: 100% 108%; + background-position: center; + background-repeat: no-repeat; + position: relative; + /* 调整背景图透明度,值范围0-1,0为完全透明,1为完全不透明 */ + opacity: 1; +} + +:deep(.welcome-dialog .el-dialog__body::before) { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + /* 调整遮罩层透明度,最后一个数值控制透明度(0-1) */ + background: rgba(255, 255, 255, 0.3); + z-index: 1; +} + +.welcome-content { + text-align: center; + padding: 20px 0; + position: relative; + z-index: 2; +} + +.welcome-icon { + font-size: 48px; + margin-bottom: 16px; + animation: bounce 2s infinite; +} + +.welcome-content h3 { + color: var(--primary-color); + font-size: 24px; + font-weight: 600; + margin: 0 0 12px 0; +} + +.welcome-content p { + color: #666; + font-size: 16px; + margin: 0 0 24px 0; + line-height: 1.5; +} + +.welcome-features { + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 20px; +} + +.feature-item { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 12px 16px; + border-radius: 8px; + transition: var(--transition); +} + +.feature-item:hover { + background: #e9ecef; + transform: translateX(4px); +} + +.feature-icon { + font-size: 20px; + margin-right: 12px; + width: 24px; + text-align: center; +} + +.dialog-footer { + display: flex; + justify-content: center; + gap: 12px; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-10px); + } + 60% { + transform: translateY(-5px); + } +} + +/* 弹窗响应式样式 */ +@media (max-width: 480px) { + .welcome-content { + padding: 16px 0; + } + + .welcome-icon { + font-size: 40px; + } + + .welcome-content h3 { + font-size: 20px; + } + + .welcome-content p { + font-size: 14px; + } + + .feature-item { + padding: 10px 12px; + } + + .feature-icon { + font-size: 18px; + margin-right: 10px; + } +}