update

src/components/GamePage.vue

@@ -15,12 +15,19 @@
         height: circularArea.size
       }"
     ></div>
-    <div class="game-page" :style="gameBackgroundImg"></div>
+    <div class="game-page base-bg" :style="gameBackgroundImg"></div>
+
+    <!-- 上层：完成背景，一直在 DOM 里，只是透明度为 0/1 -->
+    <div
+      class="game-page finish-bg"
+      :style="finishBgStyle"
+      :class="{ 'finish-bg--show': showFinishBg }"
+    ></div>
   </ModalTransition>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import ModalTransition from "./ModalTransition.vue"
 import globalToastEvent, { ToastType } from '../globalToastEvent';
 import game1 from '../assets/images/new/game1.webp';
@@ -28,6 +35,13 @@ import game2 from '../assets/images/new/game2.webp';
 import game3 from '../assets/images/new/game3.webp';
 import game4 from '../assets/images/new/game4.webp';
 import game5 from '../assets/images/new/game5.webp';
+
+import game1_1 from '../assets/images/new/game1-1.webp';
+import game2_2 from '../assets/images/new/game2-2.webp';
+import game3_3 from '../assets/images/new/game3-3.webp';
+import game4_4 from '../assets/images/new/game4-4.webp';
+import game5_5 from '../assets/images/new/game5-5.webp';
+
 import { globalStore } from "../globalstore.js";
 import { Request } from "../libs/utils"
 
@@ -42,6 +56,21 @@ const handleGoBack = () => {
   emit('close')
 }
 
+// 重置背景状态
+const resetFinishBg = () => {
+  showFinishBg.value = false
+  finishBgStyle.value = {}
+}
+
+// 每次弹窗“打开”时重置
+watch(() => props.show,
+  (val) => {
+    if (val) {
+      resetFinishBg()
+    }
+  }
+)
+
 const gameImgMap = {
   1: game1,
   2: game2,
@@ -50,6 +79,15 @@ const gameImgMap = {
   5: game5
 }
 
+const gameImgFinishMap = {
+  1: game1_1,
+  2: game2_2,
+  3: game3_3,
+  4: game4_4,
+  5: game5_5
+}
+
+// 当前背景图
 const gameBackgroundImg = computed(() => {
   const id = Number(props.gameSlideId) || 1;
   const img = gameImgMap[id] || game1;
@@ -58,14 +96,14 @@ const gameBackgroundImg = computed(() => {
 
 const circularAreaList = {
   1: {
-    top: '62vw',
+    top: '80vw',
-    left: '55vw',
+    left: '50vw',
     size: '35vw'
   },
   2: {
-    top: '62vw',
+    top: '82vw',
-    left: '80vw',
+    left: '70vw',
-    size: '35vw'
+    size: '40vw'
   },
   3: {
     top: '88vw',
@@ -74,12 +112,12 @@ const circularAreaList = {
   },
   4: {
     top: '96vw',
-    left: '36vw',
+    left: '51vw',
     size: '35vw'
   },
   5: {
-    top: '96vw',
+    top: '98vw',
-    left: '40vw',
+    left: '74vw',
     size: '35vw'
   }
 }
@@ -93,13 +131,23 @@ const circularArea = computed(() => {
 // 点击隐藏区域显示抽奖弹窗
 //防止多次点击
 const isRequesting = ref(false)
+const showFinishBg = ref(false)
+const finishBgStyle = ref({}) // 点击后再赋值
 const handleShowLottery = async () => {
   // 如果已经在请求中，直接忽略后续点击
   if (isRequesting.value) return
   isRequesting.value = true;
 
+  // 1. 点击后才计算完成背景图
+  const id = Number(props.gameSlideId) || 1
+  const img = gameImgFinishMap[id] || game1_1
+  finishBgStyle.value = { backgroundImage: `url(${img})` }
+  // 先切换背景（慢慢显示新的）
+  showFinishBg.value = true
+  // 2. 停留 2 秒
+  await new Promise(resolve => setTimeout(resolve, 3000))
+
   const loading = weui.loading()
-  globalToastEvent.emit(ToastType.SHOW_LOTTERY);
 
   // 点击隐藏区域后，游戏结束，再次调用game log接口
   try {
@@ -110,6 +158,7 @@ const handleShowLottery = async () => {
       emit('close')
       return
     } else {
+      globalToastEvent.emit(ToastType.SHOW_LOTTERY);
       console.log(gameLogRes)
     }
   } finally {
@@ -254,6 +303,7 @@ onUnmounted(() => {
   top: 8vw;
   left: 2vw;
   animation-delay: 0s;
+  z-index: 1;
 }
 .item-2 {
   width: 12vw;
@@ -302,6 +352,27 @@ onUnmounted(() => {
   background-position: center;
 }
 
+/* 让两个背景层叠放满屏 */
+.base-bg,
+.finish-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+/* 上层完成背景：初始透明，点击后渐显 */
+.finish-bg {
+  opacity: 0;
+  transition: opacity 2.5s ease; /* 控制“缓慢”程度，越大越慢 */
+  pointer-events: none; /* 让点击事件透传给下面的元素 */
+}
+
+.finish-bg.finish-bg--show {
+  opacity: 1;
+}
+
 .carousel-container {
   width: 100%;
   max-width: 100vw;

src/components/GameSwiper.vue

@@ -29,7 +29,7 @@
               :class="['carousel-slide', { active: currentIndex === index }]"
             >
               <img v-show="slide.show" class="complete-icon" src="../assets/images/new/complete-icon.webp" alt="已完成">
-              <img :src="slide.image" :alt="slide.title" />
+              <img class="slider-img" :src="slide.image" :alt="slide.title" />
 
               <div class="shou-dev">
                 <div class="show-position">
@@ -220,7 +220,7 @@ const handleConfirmClick = async () => {
 const handleSlideClick = (slide) => {
   
   if (!hasVisitedBefore) {
-    localStorage.setItem('hasVisitedGameSwiper', 'true');
+    localStorage.setItem('hasVisitedGameSwiper', true);
     globalToastEvent.emit(ToastType.SHOW_GAMEDEMO)
     globalToastEvent.emit(ToastType.SHOW_GAMEPAGE, slide)
   } else {
@@ -424,6 +424,12 @@ onUnmounted(() => {
 }
 
 .carousel-slide {
+  width: 100%;
+  height: 112.7vw;
+  padding: 5vw;
+  background-size: cover;
+  background-position: center;
+  background-image: url('../assets/images/new/border-img.webp');
   min-width: calc(100% - 160px);
   width: calc(100% - 160px);
   margin: 0 20px;
@@ -505,7 +511,6 @@ onUnmounted(() => {
     min-width: calc(100% - 12vw);
     width: calc(100% - 12vw);
     margin: 0 10px;
-    border-radius: 8px;
   }
   
   .carousel-track {

src/components/HomePage.vue

@@ -458,6 +458,9 @@ const handleAddress = (id) => {
     <div class="home-wrapper">
       <div class="fallback-background"></div>
 
+      <!-- 透明洞的覆盖块：50x100px，背景色 #7b3d0d -->
+      <div class="transparent-hole-cover"></div>
+
       <div class="scene-item item-1" @click="handleLottery">
         <img src="../assets/images/new/lottery.webp" alt="抽奖">
       </div>
@@ -579,6 +582,7 @@ const handleAddress = (id) => {
 }
 
 .home-wrapper {
+  position: relative;
   width: 100vw;
   height: 200vw;
   display: flex;
@@ -614,11 +618,19 @@ const handleAddress = (id) => {
   width: 100%;
   height: 100%;
   background-image: url('../assets/images/new/home-bg.webp');
-  background-size: cover;
+  background-size: 100% auto;
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: 0 0;
   z-index: -1;
-  /* 置于视频下方 */
+}
+.transparent-hole-cover {
+  position: fixed;
+  width: 30vw;
+  height: 80vw;
+  background-color: #7b3d0d;
+  top: 100vw;
+  right: 8vw;
+  z-index: -2;
 }
 
 .scene-item {
@@ -643,23 +655,24 @@ const handleAddress = (id) => {
 /* 马的位置 */
 .item-ma1 {
   width: 14vw;
-  top: 47vw;
+  top: 43vw;
-  left: 4.4vw;
+  left: 6.2vw;
 }
 .item-ma2 {
   width: 14vw;
-  top: 47vw;
+  top: 43vw;
-  right: 4.4vw;
+  right: 7.1vw;
 }
 .item-ma3 {
   width: 21vw;
-  top: 162vw;
+  top: 147vw;
-  left: 3vw;
+  left: 7vw;
 }
 .item-ma4 {
   width: 25vw;
-  top: 128vw;
+  top: 121vw;
-  right: 6.6vw;
+  right: 2.6vw;
+  z-index: -2;
 }
 
 .item-jiu1 {
@@ -733,13 +746,13 @@ const handleAddress = (id) => {
 
 /* 每匹马用同一个 keyframes，但频率和起始时间不同，让节奏更自然 */
 .scene-item.item-ma1 img {
-  animation: horse-gallop 1.0s infinite ease-in-out;
+  animation: horse-gallop 1.8s infinite ease-in-out;
   animation-delay: 0s;
   transform-origin: center bottom;
 }
 
 .scene-item.item-ma2 img {
-  animation: horse-gallop 1.25s infinite ease-in-out;
+  animation: horse-gallop 2.1s infinite ease-in-out;
   /* 负 delay：进场时就已经错位，不会同时起跳 */
   animation-delay: -0.3s;
   transform-origin: center bottom;
@@ -751,7 +764,7 @@ const handleAddress = (id) => {
   transform-origin: center bottom;
 }
 
-.scene-item.item-ma4 img {
+.scene-item.item-ma4 {
   animation: horse-gallop 1.65s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
@@ -772,12 +785,12 @@ const handleAddress = (id) => {
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
-.scene-item.item-jiu1 img {
+.scene-item.item-jiu1 {
   animation: horse-gallop 2.4s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
 }
-.scene-item.item-jiu2 img {
+.scene-item.item-jiu2 {
   animation: horse-gallop 2.2s infinite ease-in-out;
   animation-delay: -0.9s;
   transform-origin: center bottom;
@@ -800,7 +813,7 @@ const handleAddress = (id) => {
 
 .item-1 {
   width: 21vw;
-  bottom: 7vw;
+  bottom: 20vw;
   left: 0;
   animation-delay: 0s;
 }
@@ -823,7 +836,7 @@ const handleAddress = (id) => {
 
 .item-2 {
   width: 48vw;
-  bottom: 5vw;
+  bottom: 18vw;
   animation-delay: 0s;
 }
 
@@ -844,7 +857,7 @@ const handleAddress = (id) => {
 
 .item-3 {
   width: 21vw;
-  bottom: 7vw;
+  bottom: 20vw;
   right: 0;
   animation-delay: 0s;
 }
@@ -879,17 +892,11 @@ const handleAddress = (id) => {
 
 .item-8 {
   width: 27vw;
-  bottom: 27vw;
+  bottom: 43vw;
   right: 1vw;
   animation-delay: 0s;
 }
 
-.item-ma1 {
-  width: 14vw;
-  top: 47vw;
-  left: 4.4vw;
-}
-
 @keyframes loginloading {
   0% {
     transform: rotate(0deg);

src/components/Lottery.vue

@@ -280,7 +280,7 @@ watch(() => props.show, async (newVal) => {
 
       // 再逐渐放大到 50 倍（2500px）
       prizeshowTime.to(layerRef.value, {
-        duration: 5.0,
+        duration: 2.0,
         ease: "none",
         '--maskSize': '2500px',
         onComplete: () => {

src/components/PopupMore.vue

@@ -14,7 +14,10 @@ const cancelBtn = () => {
 
 const startNow = () => {
   if (isWeixinPlatform()) {
-    miniJumpToScene()
+    weui.alert("2026年1月1日正式开启！")
+    return;
+    //TODO 上限更换
+    // miniJumpToScene()
   } else {
     weui.alert("请前往「泸州老窖会员中心」小程序进行查询")
   }
@@ -42,8 +45,8 @@ const startNow = () => {
 
 <style scoped>
 .haibao {
-  width: 70vw;
+  width: 82vw;
-  height: 119.444444vw;
+  height: 157vw;
   background-image: url("../assets/images/new/sanchongli.webp");
   background-repeat: no-repeat;
   background-size: 100%;

src/components/TodoList.vue

@@ -3,6 +3,11 @@
     <div class="todolist-wrapper">
       <div class="btn-group">
         <div class="btn-share" :class="globalStore.MAX_INVITE_DAILY === globalStore.MAX_INVITE_DAILY ? 'has' : ''" @click="openHaibao($event)"></div>
+        <!-- <div 
+          class="btn-share" 
+          :class="{'has': globalStore.inviteCount >= globalStore.MAX_INVITE_DAILY}"
+          @click="globalStore.inviteCount < globalStore.MAX_INVITE_DAILY && openHaibao($event)">
+        </div> -->
         <div class="btn-qiwei" :class="globalStore.followed_official && 'has'" @click="openQiwei($event)"></div>
       </div>
       <div class="close" @click="$emit('close')"></div>
@@ -42,6 +47,9 @@ const userhaibaoCover = computed(() => {
 })
 
 const openHaibao = async (e) => {
+  if (this.globalStore.inviteCount >= this.globalStore.MAX_INVITE_DAILY) {
+    return;
+  }
   globalToastEvent.emit(ToastType.SHOW_SHAREPAGE, true);
 }