更新提示

src/views/MainPage.vue

@@ -73,6 +73,38 @@
         </div>
       </div>
     </div>
+
+    <!-- 欢迎弹窗 -->
+    <el-dialog
+      v-model="showWelcomeDialog"
+      width="90%"
+      :style="{ maxWidth: '400px' }"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :close-on-press-escape="true"
+      center
+      class="welcome-dialog"
+    >
+      <div class="welcome-content">
+        <div class="welcome-icon">🎉</div>
+        <h3>融汇通更新</h3>
+        <div class="welcome-features">
+          <div class="feature-item">
+            <span class="feature-icon">💎</span>
+            <span>获取融豆赚取积分</span>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">🛒</span>
+            <span>积分商城兑换好礼</span>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showWelcomeDialog = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -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;
+  }
+}
 </style>