完成大概流程

src/components/Index.vue

@@ -40,9 +40,12 @@ onMounted(() => {
   gsap.from(".index-windows", { duration: 1, scale: 0.5, autoAlpha: 0, });
   gsap.from(".index-pet", { duration: 1, y: -50, autoAlpha: 0, delay: 0.5 });
   gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0, delay: 1 });
+  gsap.from(".index-sub-title", { duration: 1, scale: 0, autoAlpha: 0, delay: 1.2 });
   gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0, delay: 0.5 });
   gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0, delay: 0.5 });
+  gsap.from(".index-firework", { duration: 1, scale: 0, autoAlpha: 0, delay: 0.3 });
   gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0, delay: 0.75 });
+  gsap.from(".index-gift", { duration: 1, y: 50, autoAlpha: 0, delay: 0.75 });
   gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0, delay: 0.75 });
   gsap.from(".index-logo", { duration: 1, y: 20, autoAlpha: 0, delay: 0.75 });
   gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
@@ -70,13 +73,12 @@ onMounted(() => {
       gsap.to('.index-fan-3', { duration: 1.5, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
       gsap.to('.index-fan-4', { duration: 2, x: '+=20', repeat: -1, yoyo: true, ease: 'none' })
       gsap.to('.index-pet', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
+      gsap.to('.index-gift', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
+      gsap.to('.index-start-btn', { duration: 1, scale: '0.85', repeat: -1, yoyo: true, ease: 'bounce.out' })
     }
   });
 
 
-
-
-
 });
 
 const vcNum = ref(false);
@@ -97,12 +99,14 @@ const showVC = () => {
       <div class="index-fan-3"></div>
       <div class="index-fan-4"></div>
       <div class="index-logo"></div>
+      <div class="index-gift"></div>
+      <div class="index-firework"></div>
       <div class="index-bottom-bg"></div>
       <!-- <div class="index-cloud"></div> -->
-      <div class="index-firework"></div>
       <div class="index-windows"></div>
       <div class="index-pet"></div>
       <div class="index-title" @click="showVC"></div>
+      <div class="index-sub-title"></div>
       <div class="index-rule-btn" @click="showRule($event)"></div>
       <div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
       <div class="index-start-btn" @click="start"></div>
@@ -143,21 +147,25 @@ const showVC = () => {
       @include pos(235px, 574px, 0px, 60px);
       @include bg_pos("index/fan-1.png");
     }
+
     .index-fan-2 {
       pointer-events: none;
       @include pos(316px, 317px, -205px, 405px);
       @include bg_pos("index/fan-2.png");
     }
+
     .index-logo {
       pointer-events: none;
       @include pos(632px, 94px, 59px, 180px);
       @include bg_pos("index/logo.png");
     }
+
     .index-fan-3 {
       pointer-events: none;
       @include pos(370px, 334px, 545px, 910px);
       @include bg_pos("index/fan-3.png");
     }
+
     .index-fan-4 {
       pointer-events: none;
       @include pos(350px, 205px, 494px, 1011px);
@@ -170,10 +178,10 @@ const showVC = () => {
       @include bg_pos("index/cloud.png");
     }
 
-    .index-firework{
+    .index-gift {
       pointer-events: none;
-      @include pos(120px, 120px, 651px, 474px);
+      @include pos(169px, 172px, 16px, 1004px);
-      @include bg_pos("index/firework.png");
+      @include bg_pos("index/gift-icon.png");
     }
 
     .index-windows {
@@ -190,10 +198,22 @@ const showVC = () => {
 
     .index-title {
       // pointer-events: none;
-      @include pos(631px, 115px, 57px, 291px);
+      @include pos(528px, 198px, 111px, 231px);
       @include bg_pos("index/title.png");
     }
 
+    .index-sub-title {
+      pointer-events: none;
+      @include pos(200px, 130px, 517px, 472px);
+      @include bg_pos("index/sub-title.png");
+    }
+
+    .index-firework {
+      pointer-events: none;
+      @include pos(95px, 95px, -38px, 889px);
+      @include bg_pos("index/firework.png");
+    }
+
     .index-rule-btn {
       @include pos(184px, 49px, -37px, 506px);
       @include bg_pos("index/rule-btn.png");

src/components/Question.vue

@@ -147,8 +147,9 @@ onMounted(() => {
           </div>
           <!-- 解析 -->
           <div class="analysis">
-            <div v-for="li in questionList[currentId].analysis" :key="li">
+            <div v-for="(li,index) in questionList[currentId].analysis" :key="li">
-              提示：<span v-html="li"></span>
+              <span class="analysis-tips" v-if="index == 0">提示:</span>
+              <span v-html="li"></span>
             </div>
           </div>
           <div class="return-btn" @click="nextQuestion($event)"></div>
@@ -369,6 +370,13 @@ onMounted(() => {
           justify-content: center;
           align-items: center;
           flex-direction: column;
+
+          .analysis-tips {
+            background-color: rgb(175, 13, 12);
+            padding: 5px 10px;
+            margin-right: 3px;
+
+          }
         }
 
         .return-btn {

src/components/QuestionList.vue

@@ -10,7 +10,7 @@
             <div class="ql--bottom-gift-2"></div>
             <div class="ql--bottom-gift-1"></div>
             <div class="ql-select-text">
-                <div class="select-text">选择一个你喜欢的花灯</div>
+                <div class="select-text">选择一盏灯你喜欢的花灯</div>
                 <div class="select-text">开始猜谜吧</div>
             </div>
             <div class="ql-swiper-box">
@@ -26,7 +26,7 @@
                     </swiper-slide>
                 </swiper>
             </div>
-            <div class="ql-start-btn" @click="onShowQuestion"></div>
+            <div class="ql-start-btn" @click="onShowQuestion($event)"></div>
             <div class="ql-bottom-bg"></div>
         </div>
     </div>
@@ -39,6 +39,9 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import Question from './Question.vue';
+import { debounceTap } from "@/plugins";
+import gsap from "gsap"
+
 
 const emit = defineEmits(['QuestionList', "showResult"]);
 
@@ -51,7 +54,11 @@ function getLarntenImg(item) {
 }
 
 
-const onShowQuestion = () => {
+const onShowQuestion = (event) => {
+    let e = event.target;
+
+
+    debounceTap(e, () => {
         // 获取当前选中灯笼的序号 1-11
         const swiper = document.querySelector('.larnten-swiper').swiper;
         // swiper开启了loop
@@ -60,6 +67,95 @@ const onShowQuestion = () => {
         questionId.value = activeIndex - 1
         showQuestion.value = true
         // emit('QuestionList', activeIndex);
+    })
+}
+
+
+onMounted(() => {
+    showPoster()
+})
+
+
+const showPoster = () => {
+    gsap.to(".QuestionList", {
+        duration: 0.3,
+        autoAlpha: 1,
+    });
+    gsap.from(".ql-select-text", {
+        duration: 0.7,
+        scale: 1.2,
+        autoAlpha: 0,
+    });
+    gsap.from(".ql-swiper-box", {
+        duration: 0.7,
+        scale: 0.6,
+        autoAlpha: 0,
+    });
+    gsap.from(".ql--top-icon-1", {
+        duration: 0.7,
+        scale: 0.7,
+        autoAlpha: 0,
+        delay: 0.3
+    });
+    gsap.from(".ql--top-icon-2", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay: 0.5
+    });
+    gsap.from(".ql--top-icon-3", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay: 0.7
+    });
+    gsap.from(".ql--bottom-gift-1", {
+        duration: 0.7,
+        y: 30,
+        autoAlpha: 0,
+        delay: 0.7
+    });
+    gsap.from(".ql--bottom-gift-2", {
+        duration: 0.7,
+        x: -50,
+        autoAlpha: 0,
+        delay: 0.5
+    });
+    gsap.from(".ql--bottom-icon-1", {
+        duration: 0.7,
+        y: 30,
+        autoAlpha: 0,
+        delay: 0.5
+    });
+    gsap.from(".ql-start-btn", {
+        duration: 0.7,
+        scale: 0,
+        autoAlpha: 0,
+        delay: 0.7,
+    });
+    gsap.from(".ql-bottom-bg", {
+        duration: 0.7,
+        y: 130,
+        autoAlpha: 0,
+        delay: 0.2,
+    });
+    gsap.from(".ql--bottom-icon-2", {
+        duration: 0.7,
+        y: 30,
+        autoAlpha: 0,
+        delay: 0.7,
+        onComplete: () => {
+            // gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
+            gsap.to('.ql--top-icon-1', { duration: 2, y: '-=30', repeat: -1, yoyo: true, ease: 'none' })
+            gsap.to('.ql--top-icon-3', { duration: 1.5, x: '-=20', repeat: -1, yoyo: true, ease: 'none' })
+            gsap.to('.ql--top-icon-2', { duration: 1.5, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
+            gsap.to('.ql--bottom-gift-1', { duration: 2, y: '+=20', repeat: -1, yoyo: true, ease: 'none' })
+            gsap.to('.ql--bottom-gift-2', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
+            gsap.to('.ql--bottom-icon-2', { duration: 2, x: '-=10', repeat: -1, yoyo: true, ease: 'none' })
+            gsap.to('.ql--bottom-icon-1', { duration: 2, y: '-=10', repeat: -1, yoyo: true, ease: 'none' })
+        }
+    });
+
 }
 
 
@@ -71,15 +167,6 @@ const onShowResult = (result) => {
 
 
 register();
-
-const hidiQuestion = () => {
-    showQuestion.value = false
-}
-
-
-defineExpose({
-    hidiQuestion
-})
 </script>
 
 <style lang='scss' scoped>
@@ -87,6 +174,7 @@ defineExpose({
     @include pos(100%, 100vh, 0px, 0px);
     overflow: hidden;
     background: linear-gradient(135deg, #a11b15, #f80c00);
+    visibility: hidden;
 
     .question-list-bg {
         @include pos(750px, 1624px, 0px, 50%);

src/components/Result.vue

@@ -10,15 +10,23 @@ import { reactive } from "vue";
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
 const userStore = useMainStore();
-const posterId = ref(userStore.posterId); //海报背景id：1～4
+const posterId = ref(userStore.posterId); //海报背景id：1～11
 
 console.log('海报id', posterId.value);
 
 
 const posterImgList = reactive([
-    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-2.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-3.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-4.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-5.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-6.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-7.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-8.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-9.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-10.jpg`, import.meta.url).href,
+    new URL(`../assets/images/poster/poster-11.jpg`, import.meta.url).href,
 ])
 
 // 生成二维码逻辑
@@ -28,8 +36,6 @@ onMounted(async () => {
     // 执行任务队列
     await executeTasks();
 
-
-
 });
 
 
@@ -48,7 +54,8 @@ const executeTasks = async () => {
 
 
     if (posterImgList[posterId.value - 1] && eqcodePic.value) {
-        await posterCreate(
+
+        posterCreate(
             { width: 750, height: 1334 },
             [
                 { name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: 1334, x: 0, y: 0 } },
@@ -75,13 +82,14 @@ const showPoster = () => {
     });
     gsap.from(".poster-box", {
         duration: 0.7,
-        scale: 1.4,
+        scale: 0.6,
         autoAlpha: 0,
     });
     gsap.from(".save-tips", {
         duration: 0.7,
         scale: 0.7,
         autoAlpha: 0,
+        delay: 0.3
     });
     gsap.from(".go-draw", {
         duration: 0.7,
@@ -99,35 +107,6 @@ const showPoster = () => {
 }
 
 
-// 生成海报逻辑
-const createPoster = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        // 海报生成
-        posterCreate(
-            { width: 750, height: 1334 }, //海报尺寸
-            // 海报素材，按顺序依次渲染
-            [
-                // 背景
-                {
-                    name: "bg",
-                    src: posterImgList[posterId.value - 1],
-                    pos: { w: 750, h: 1334, x: 0, y: 0 },
-                },
-                // 二维码
-                {
-                    name: "eqcode",
-                    src: eqcodePic.value,
-                    pos: { w: 164, h: 164, x: 159, y: 1122 },
-                },
-            ],
-        );
-
-        // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
-
-    });
-};
-
 // 去抽奖
 const goDraw = (event) => {
     let e = event.target;
@@ -201,6 +180,7 @@ const posterCreate = (option, imageArr) => {
     //Promise的.all方法，当所有预加载的图像加载好的回调函数 
     Promise.all(loader_p)
         .then(imgList => {
+            console.log('imgList', imgList);
 
             // 图片素材遍历绘制
             imgList.map((item, index) => {
@@ -344,15 +324,47 @@ const posterCreate = (option, imageArr) => {
         }
 
         .product-1 {
-            @include bg_pos("result/product-1.png");
+            @include bg_pos("poster/card-1.png");
         }
 
         .product-2 {
-            @include bg_pos("result/product-2.png");
+            @include bg_pos("poster/card-2.png");
         }
 
         .product-3 {
-            @include bg_pos("result/product-3.png");
+            @include bg_pos("poster/card-3.png");
+        }
+
+        .product-4 {
+            @include bg_pos("poster/card-4.png");
+        }
+
+        .product-5 {
+            @include bg_pos("poster/card-5.png");
+        }
+
+        .product-6 {
+            @include bg_pos("poster/card-6.png");
+        }
+
+        .product-7 {
+            @include bg_pos("poster/card-7.png");
+        }
+
+        .product-8 {
+            @include bg_pos("poster/card-8.png");
+        }
+
+        .product-9 {
+            @include bg_pos("poster/card-9.png");
+        }
+
+        .product-10 {
+            @include bg_pos("poster/card-10.png");
+        }
+
+        .product-11 {
+            @include bg_pos("poster/card-11.png");
         }
 
         .result-tips {
@@ -410,15 +422,47 @@ const posterCreate = (option, imageArr) => {
         }
 
         .poster-1 {
-            @include bg_pos("result/preveiw-1.png");
+            @include bg_pos("poster/card-1.png");
         }
 
         .poster-2 {
-            @include bg_pos("result/preveiw-2.png");
+            @include bg_pos("poster/card-2.png");
         }
 
         .poster-3 {
-            @include bg_pos("result/preveiw-3.png");
+            @include bg_pos("poster/card-3.png");
+        }
+
+        .poster-4 {
+            @include bg_pos("poster/card-4.png");
+        }
+
+        .poster-5 {
+            @include bg_pos("poster/card-5.png");
+        }
+
+        .poster-6 {
+            @include bg_pos("poster/card-6.png");
+        }
+
+        .poster-7 {
+            @include bg_pos("poster/card-7.png");
+        }
+
+        .poster-8 {
+            @include bg_pos("poster/card-8.png");
+        }
+
+        .poster-9 {
+            @include bg_pos("poster/card-9.png");
+        }
+
+        .poster-10 {
+            @include bg_pos("poster/card-10.png");
+        }
+
+        .poster-11 {
+            @include bg_pos("poster/card-11.png");
         }
     }
 

src/components/Rule.vue

@@ -39,9 +39,10 @@ onMounted(() => {
                             <div class="part">
                                 <div>活动攻略：</div>
                                 <div>
-                                    1、【猜灯谜闹元宵】活动共设计3道题目，全部选择完毕后即可获取测试结果。参与抽奖活动；
+                                    1、【猜灯谜赢红包
+                                    欢欢喜喜闹元宵】活动共设计11道题目，首页进入后左右滑动选择您喜欢的花灯，点击进行猜灯谜，答对后即可获取专属花灯海报，并参与抽奖；答错时将跳转回选择花灯的页面，重新答题。
                                 </div>
-                                <div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
+                                <div>2、活动期间不限制参与猜灯谜次数，每人每日有1次抽奖机会。</div>
                             </div>
                             <div class="part">
                                 <div>领奖说明：</div>
@@ -59,24 +60,21 @@ onMounted(() => {
                                 <div class="part">说明：平安理财有权对活动规则进行解释</div>
                             </div>
                             <div class="part">
-                                <div>活动规则：</div>
+                                <div>活动说明：</div>
                                 <div>
-                                    1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
+                                    （1）本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，并保留追究其法律责任的权利：
                                 </div>
                                 <div>
-                                    (1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
+                                    (2)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式、不正当手段等参与本活动;-同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等）单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的；
                                 </div>
                                 <div>
-                                    (2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
+                                    (3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为；
                                 </div>
                                 <div>
-                                    (3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
+                                    (4)平安理财保留调整、暂停和终止本活动的权利，并经公告后生效；
                                 </div>
                                 <div>
-                                    2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
+                                    (5)用户参与本活动，即视为理解并同意本活动细则。在法律法规及监管规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
-                                </div>
-                                <div>
-                                    3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
                                 </div>
                             </div>
                             <div class="margin-bottom-area"></div>

src/page/Home/App.vue

@@ -51,7 +51,7 @@ const indexFn = (item) => {
     showMyPrize.value = true;
   }
   if (item.action == "start") {
-    showQuestion.value = true;
+    showQuestionList.value = true;
   }
 
   if (item.action == "showRule") {
@@ -79,7 +79,7 @@ const myPrizeFn = (item) => {
 };
 
 const QuestionListRef=  ref(null)
-const showQuestionList = ref(true);
+const showQuestionList = ref(false);
 const questionListFn = (item) => {
   if (item.action == "hide") {
     showQuestionList.value = false;

src/store/index.js

@@ -7,7 +7,7 @@ export const useMainStore = defineStore("counter", {
             hasDraw: true, //是否有抽奖机会
             token: '',
             posterId: 3,    //测试结果
-            hasPrize: false,  //是否有奖品
+            hasPrize: true,  //是否有奖品
             prizeCode: 'oggSVMbeLgSK', //兑换码
             prizeMoney: '8.88', //金额
             drawKey: '',