已给初版，设计稿有改动，待给最新设计稿

.env.production

@@ -1,6 +1,5 @@
 VITE_MODE = production
 VITE_HOST = https://hd.xglpa.com
-VITE_CDN = https://cdn.xglpa.com
+VITE_CDN = https://cdn.xglpa.com/xyyh-hhj/
-VITE_FOLDER = /palc-lantern-cash/
 VITE_API = /pingan-exchange-yx-2025
-VITE_ACTIVITY_URL = https://w.pingan.com.cn/lckj/pawm-mmo-activity-xgl-frontend/index.html
+VITE_ACTIVITY_URL = https://hd.xglpa.com/xyyh-hhj/index.html

deploy.config.js

@@ -11,14 +11,14 @@ export default {
         port: 22,//服务器端口
         username: 'root',//服务器ssh登录用户名
         password: 'JDhweh*63*03%3267',//服务器ssh登录密码
-        serverpath: '/mnt/apps/palc-lantern-cash',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目
+        serverpath: '/mnt/apps/xyyh-hhj',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目
     },
     "cdn": {
         host: '120.77.32.131',//8.135.39.87
         port: 22,//服务器端口
         username: 'root',//服务器ssh登录用户名
         password: 'JDhweh*63*03%3267',//服务器ssh登录密码
-        serverpath: '/mnt/cdn/palc-lantern-cash',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目
+        serverpath: '/mnt/cdn/xyyh-hhj',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目
     },
     //...其他自定义环境
 }

src/components/Index.vue

@@ -4,26 +4,26 @@
       <div class="title-flower"></div>
     </div>
     <div class="location">
-      <div class="building index-location-bj"></div>
+      <div class="building index-location-bj" @click="playFn(1)"></div>
-      <div class="building index-location-xa"></div>
+      <div class="building index-location-xa" @click="playFn(2)"></div>
-      <div class="building index-location-sh"></div>
+      <div class="building index-location-sh" @click="playFn(3)"></div>
-      <div class="building index-location-wh"></div>
+      <div class="building index-location-wh" @click="playFn(4)"></div>
-      <div class="building index-location-gz"></div>
+      <div class="building index-location-gz" @click="playFn(5)"></div>
     </div>
     <div class="location-name">
-      <div class="place-name bj"></div>
+      <div class="place-name bj" @click="playFn(1)"></div>
-      <div class="place-name xa"></div>
+      <div class="place-name xa" @click="playFn(2)"></div>
-      <div class="place-name sh"></div>
+      <div class="place-name sh" @click="playFn(3)"></div>
-      <div class="place-name wh"></div>
+      <div class="place-name wh" @click="playFn(4)"></div>
-      <div class="place-name gz"></div>
+      <div class="place-name gz" @click="playFn(5)"></div>
     </div>
     <div class="index-line"></div>
     <div class="location-mark">
-      <div class="mark mark-bj"></div>
+      <div class="mark mark-bj" :class="isMarkList[0] ? 'is-mark' : ''"></div>
-      <div class="mark mark-xa"></div>
+      <div class="mark mark-xa" :class="isMarkList[1] ? 'is-mark' : ''"></div>
-      <div class="mark mark-sh"></div>
+      <div class="mark mark-sh" :class="isMarkList[2] ? 'is-mark' : ''"></div>
-      <div class="mark mark-wh" @click="playFn(1)"></div>
+      <div class="mark mark-wh" :class="isMarkList[3] ? 'is-mark' : ''"></div>
-      <div class="mark mark-gz" @click="playFn(0)"></div>
+      <div class="mark mark-gz" :class="isMarkList[4] ? 'is-mark' : ''"></div>
     </div>
     <div class="top-bird-1"></div>
     <div class="top-bird-2"></div>
@@ -34,17 +34,22 @@
     <div class="boat-3"></div>
     <div class="bottom-bird-1"></div>
     <div class="bottom-cloud"></div>
-    <div class="xfl-icon">
+    <div class="xfl-icon" :class="'xfl-location-' + locationId">
       <div id="frameBox"></div>
     </div>
+    <!-- 指引提示 -->
+    <div class="click-tips" v-if="locationId == 0"></div>
+    <div class="tips-text" v-if="locationId == 0"></div>
+
   </div>
-  <div class="video-popup" @touchmove.prevent @click="hideVideo">
+  <div class="video-popup" @touchmove.prevent>
     <div class="video-box">
-      <video ref="playerRef" class="plyr" id="player" controls>
+      <video class="plyr" id="player" controls>
         <source src="https://cdn.plyr.io/static/our-video.mp4" type="video/mp4">
         <!-- 你可以根据需要添加多个source标签，支持不同的视频格式 -->
       </video>
     </div>
+    <div class="cls-btn" @click="hideVideo"></div>
   </div>
 </template>
 
@@ -53,16 +58,23 @@ import gsap from 'gsap'
 import Plyr from 'plyr';
 import 'plyr/dist/plyr.css'; // 导入 Plyr 样式
 import ImageFramePlayer from 'image-frame-player';
+import {showSuccessToast} from "vant";
 
 const playerRef = ref(null)
 const frame = ref(null)
 const imageFramePlayer = ref(null)
-const locationId = ref(1)
+const locationId = ref(0)
+const isMarkList = ref([false, false, false, false, false])
+const isDone = ref(false)
+const isShowDone = ref(false)
 
 // 视频库
 const videoList = [
-  new URL(`../assets/video/gz.mp4`, import.meta.url).href,
   new URL(`../assets/video/video.mp4`, import.meta.url).href,
+  new URL(`../assets/video/video.mp4`, import.meta.url).href,
+  new URL(`../assets/video/video.mp4`, import.meta.url).href,
+  new URL(`../assets/video/video.mp4`, import.meta.url).href,
+  new URL(`../assets/video/gz.mp4`, import.meta.url).href,
 ]
 
 // 帧图
@@ -83,9 +95,10 @@ onMounted(() => {
     autoplay: true, // 自动播放
     mute: false,    // 初始不静音
     loop: {        // 循环播放
-      active: true
+      active: false
     },
   })
+
 })
 
 // 帧图初始化
@@ -93,7 +106,7 @@ const palyFrame = () => {
   imageFramePlayer.value = new ImageFramePlayer({
     dom: document.getElementById("frameBox"),
     imgArr: frameList,
-    fps: 35,
+    fps: 25,
     useCanvas: true,
     loop: -1,
     yoyo: true
@@ -105,29 +118,78 @@ const palyFrame = () => {
 
 // 播放事件
 const playFn = (index) => {
-  gsap.to(".video-popup", {
+
-    autoAlpha: 1,
+  if (locationId.value === 0 || locationId.value === index) {
-    duration: 0.5
+    locationId.value = index
-  });
     playerRef.value.source = {
       type: 'video',
       sources: [
         {
-        src: videoList[index],
+          src: videoList[locationId.value - 1],
           type: 'video/mp4'
         }
       ]
     };
+    gsap.to(".xfl-icon", {
+      autoAlpha: 1,
+      duration: 0.5,
+      onComplete: () => {
+        gsap.to(".video-popup", {
+          autoAlpha: 1,
+          duration: 0.5
+        });
+      }
+    });
+  } else {
+
+    gsap.to(".xfl-icon", {
+      autoAlpha: 0,
+      duration: 0.5,
+      onComplete: () => {
+        locationId.value = index
+        playerRef.value.source = {
+          type: 'video',
+          sources: [
+            {
+              src: videoList[locationId.value - 1],
+              type: 'video/mp4'
+            }
+          ]
+        };
+        gsap.to(".xfl-icon", {
+          autoAlpha: 1,
+          duration: 0.5,
+          onComplete: () => {
+            gsap.to(".video-popup", {
+              autoAlpha: 1,
+              duration: 0.5
+            });
+          }
+        });
+      }
+    });
+  }
+
+
+  // 标记已经去过的地点
+  isMarkList.value[locationId.value - 1] = true
+
 }
 
 
 // 关闭弹窗
 const hideVideo = () => {
+  // playerRef.value.fullscreen.enter();
+  playerRef.value.stop();
   gsap.to(".video-popup", {
     autoAlpha: 0,
     duration: 0.5
   });
-  playerRef.value.pause();
+
+  if(isDone.value && !isShowDone.value){
+    showSuccessToast('您已完成所有任务！')
+    isShowDone.value = true
+  }
 }
 
 
@@ -135,12 +197,7 @@ const hideVideo = () => {
 const animationFn = () => {
 
 
-  const tl = gsap.timeline({});
+  const tl = gsap.timeline({
-  tl.from(".IndexPage", {
-    autoAlpha: 0,
-    scale: 1.2,
-    duration: 0.75,
-    ease: "power2.out",
     onComplete: () => {
       gsap.to(".title-flower", {
         rotation: 360,
@@ -203,6 +260,23 @@ const animationFn = () => {
         repeat: -1,
         yoyo: true,
       })
+      gsap.to(".click-tips", {
+        scale: ".7",
+        x: "-=10",
+        duration: 2,
+        repeat: -1,
+        yoyo: true,
+        ease: "bounce.out()",
+      })
+    }
+  });
+  tl.from(".IndexPage", {
+    autoAlpha: 0,
+    scale: 1.2,
+    duration: 0.75,
+    ease: "power2.out",
+    onComplete: () => {
+
     }
   })
     .from(".index-title", {
@@ -241,6 +315,17 @@ const animationFn = () => {
       duration: 1,
       ease: "back.inOut(3)",
     }, 1.2)
+    .from(".index-line,.location-mark", {
+      autoAlpha: 0,
+      duration: 1,
+      ease: "back.inOut(3)",
+    }, 1.5)
+    .from(".click-tips,.tips-text", {
+      autoAlpha: 0,
+      x: 20,
+      duration: 1,
+      ease: "back.inOut(3)",
+    })
 
 
 
@@ -333,6 +418,8 @@ const animationFn = () => {
   .location-mark {
     .mark {
       @include bgSrc("index/sign-icon.png");
+      // 灰色滤镜
+      filter: grayscale(100%);
     }
 
     .mark-bj {
@@ -354,6 +441,10 @@ const animationFn = () => {
     .mark-gz {
       @include pos(73px, 75px, 150px, 1558px);
     }
+
+    .is-mark {
+      filter: grayscale(0%);
+    }
   }
 
   .top-bird-1 {
@@ -411,13 +502,62 @@ const animationFn = () => {
   }
 
   .xfl-icon {
-    @include pos(163px, 153px, 245px, 679px);
+    pointer-events: none;
+    position: absolute;
+    width: 163px;
+    height: 153px;
+    // 以中心放大1.5倍
+    transform: scale(1.5);
 
     #frameBox {
       width: 100%;
       height: 100%;
     }
   }
+
+  .xfl-location-0 {
+    visibility: hidden;
+  }
+
+  .xfl-location-1 {
+    left: 421px;
+    top: 512px;
+  }
+
+  .xfl-location-2 {
+    left: 245px;
+    top: 679px;
+  }
+
+  .xfl-location-3 {
+    left: 347px;
+    top: 929px;
+    transform: scaleX(-1) scale(1.5);
+
+  }
+
+  .xfl-location-4 {
+    left: 104px;
+    top: 1305px;
+  }
+
+  .xfl-location-5 {
+    left: 104px;
+    top: 1513px;
+    transform: scaleX(-1) scale(1.5);
+  }
+
+  .click-tips {
+    @include pos(58px, 71px, 556px, 500px);
+    @include bgSrc("index/arrow-icon.png");
+    pointer-events: none;
+  }
+
+  .tips-text {
+    @include pos(163px, 92px, 586px, 560px);
+    @include bgSrc("index/tips.png");
+    pointer-events: none;
+  }
 }
 
 .video-popup {
@@ -426,17 +566,23 @@ const animationFn = () => {
   background-color: rgba($color: #000000, $alpha: .6);
   visibility: hidden;
 
+  .cls-btn {
+    @include box(50px, 50px);
+    @include bgSrc("index/cls-btn.png");
+    margin-top: 40px;
+  }
+
   .video-box {
     width: 700px;
-    // height: 393.75px;
     border-radius: 12px;
     border: 1px solid #fff;
-    // margin-top: -200px;
     overflow: hidden;
 
     .plyr {
-      // @include box(100%,100%);
+      @include box(100%, 100%);
     }
   }
 }
+
+
 </style>

src/data/imgList.js

@@ -27,6 +27,8 @@ const page = [
   "index/name-gz.png",
   "index/name-sh.png",
   "index/name-wh.png",
+  "index/cls-btn.png",
+  "share.jpg",
 
   "xlz/xfl_35.png",
   "xlz/xfl_1.png",

src/page/Home/main.js

@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { wxShare } from '@/plugins/wxshare';
-import {isMobile} from '@/plugins'
+// import {isMobile} from '@/plugins'
-import VConsole from 'vconsole';
+// import VConsole from 'vconsole';
 import 'vant/lib/index.css';
 
 
@@ -12,15 +12,15 @@ const app = createApp(App)
 
 // 微信分享配置
 wxShare({
-    title: '今夜宜赏灯，来测测你的专属元宵花灯',
+    title: '兴福龙 护航记',
-    desc: '赏花灯，赢惊喜，欢天喜地闹元宵！',
+    desc: '趣味地图大探索，消保守护每一程',
-    link: '/index.html'
 })
 
+
 // 测试环境开vconsole
-if (isMobile()) {
+// if (isMobile()) {
-    // const vConsole = new VConsole();
+//     // const vConsole = new VConsole();
-}
+// }
 
 app.mount('#app')
 console.log('Mode:', import.meta.env.VITE_MODE);

src/plugins/wxshare.js

@@ -36,7 +36,7 @@ export function wxShare(option) {
                     link: linkUrl, // 分享链接
                     title: option.title, // 分享标题
                     desc: option.desc, // 分享描述
-                    imgUrl: imgUrl, // 分享图标
+                    imgUrl: new URL(`@/assets/images/share.jpg`, import.meta.url).href, // 分享图标
                     success() {// 用户成功分享后执行的回调函数
                         showToast('分享成功')
                     },
@@ -45,7 +45,7 @@ export function wxShare(option) {
                     link: linkUrl, // 分享链接
                     title: option.title, // 分享标题
                     desc: option.desc, // 分享描述
-                    imgUrl: imgUrl, // 分享图标
+                    imgUrl: new URL(`@/assets/images/share.jpg`, import.meta.url).href, // 分享图标
                     success() {// 用户成功分享后执行的回调函数
                         showToast('分享成功')
 

vite.config.js

@@ -31,7 +31,7 @@ export default defineConfig(({ command, mode }) => {
             template: 'index.html',
             injectOptions: {
               data: {
-                title: '猜灯谜闹元宵',
+                title: '兴福龙 护航记',
               },
             }
           },
@@ -105,7 +105,7 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     // 公共基础路径：构建生产环境时自动载入cdn路径
-    base: mode == 'production' ? env.VITE_CDN + env.VITE_FOLDER + '/' : './',
+    base: mode == 'production' ? env.VITE_CDN  : './',
     // 打包配置
     build: {
       assetsPublicPath: './',