切图完成

src/components/Index.vue

@@ -35,16 +35,9 @@ const showRule = (event) => {
 
 
 onMounted(() => {
-  gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
-  gsap.from(".index-bottom-bg", { duration: 1, y: 100,  });
-  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-bg,.index-island,.index-cloud-1,.index-cloud-2,.index-tree-1", { duration: 1, scale: 1.2, autoAlpha: 0 });
   gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1  });
-  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-fan-2", { duration: 1, x: -220, 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-sub-title", { duration: 1, x: 20, autoAlpha: 0,delay:1  });
   gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
   gsap.from(".index-prize-btn", {
     duration: 1,
@@ -65,11 +58,12 @@ onMounted(() => {
     delay: 0.5,
     onComplete:()=>{
       // gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
-      gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
-      gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
-      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-cloud-1',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-cloud-2',{duration:2,x:30,repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-tree-1',{duration:2,y:10,repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-title',{duration:2.5,y:-20,repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-sub-title',{duration:3,x:10,repeat:-1,yoyo:true,ease:'none'})
+
     }
   });
 
@@ -92,25 +86,21 @@ const showVC = () => {
   <div class="IndexPage" @touchmove.prevent>
     <div class="index-bg"></div>
     <div class="index-container">
-      <div class="index-fan-1"></div>
-      <div class="index-fan-2"></div>
-      <div class="index-fan-3"></div>
-      <div class="index-fan-4"></div>
+      <div class="index-cloud-1"></div>
+      <div class="index-cloud-2"></div>
+      <div class="index-tree-1"></div>
+      <div class="index-island"></div>
       <div class="index-logo"></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>
+      <!-- v-if="userStore.hasPrize" -->
+      <div class="index-prize-btn"  @click="showMyPrize($event)"></div>
       <div class="index-start-btn" @click="start"></div>
       <div class="index-agreement">
-        风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
+          风险提示: 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
           class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
-          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
-          class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
+          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
       </div>
     </div>
   </div>
@@ -120,7 +110,7 @@ const showVC = () => {
 .IndexPage {
   @include pos(100%, 100vh, 0px, 0px);
   overflow: hidden;
-  background: linear-gradient(135deg, #a11b15, #f80c00);
+  background: linear-gradient(135deg, #90dcff, #51b7ff);
 
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);
@@ -132,95 +122,76 @@ const showVC = () => {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
 
-    .index-bottom-bg{
-      pointer-events: none;
-      @include pos(750px, 558px, 0px, 1066px);
-      @include bg_pos("index/bottom-bg.png");
-    }
 
-    .index-fan-1{
-      pointer-events: none;
-      @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, 267px);
-      @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);
-      @include bg_pos("index/fan-4.png");
-    }
-
-    .index-cloud{
-      pointer-events: none;
-      @include pos(88px, 46px, 621px, 253px);
-      @include bg_pos("index/cloud.png");
-    }
-
-    .index-firework{
-      pointer-events: none;
-      @include pos(120px, 120px, 651px, 474px);
-      @include bg_pos("index/firework.png");
-    }
-
-    .index-windows{
-      pointer-events: none;
-      @include pos(743px, 744px, 3px, 440px);
-      @include bg_pos("index/windows.png");
-    }
-
-    .index-pet{
-      pointer-events: none;
-      @include pos(234px, 386px, 353px, 614px);
-      @include bg_pos("index/pet-icon.png");
-    }
+    // .index-logo{
+    //   pointer-events: none;
+    //   @include pos(632px, 94px, 59px, 267px);
+    //   @include bg_pos("index/logo.png");
+    // }
 
     .index-title {
       // pointer-events: none;
-      @include pos(542px, 101px, 104px, 369px);
+      @include pos(632px, 253px, 46px, 254px);
       @include bg_pos("index/title.png");
     }
 
+    .index-island{
+      pointer-events: none;
+      @include pos(714px, 867px, 15px, 542px);
+      @include bg_pos("index/island.png");
+    }
+
+    .index-cloud-1{
+      pointer-events: none;
+      @include pos(210px, 147px, -15px, 535px);
+      @include bg_pos("index/cloud-1.png");
+    }
+
+    .index-cloud-2{
+      pointer-events: none;
+      @include pos(151px, 172px, 656px, 486px);
+      @include bg_pos("index/cloud-2.png");
+    }
+
+    .index-tree-1{
+      pointer-events: none;
+      @include pos(228px, 199px, -45px, 492px);
+      @include bg_pos("index/tree-1.png");
+    }
+
+    .index-sub-title {
+      pointer-events: none;
+      @include pos(423px, 87px, 170px, 486px);
+      @include bg_pos("index/sub-title.png");
+    }
+
     .index-rule-btn {
-      @include pos(184px, 49px, -37px, 506px);
+      @include pos(193px, 50px, 612px, 553px);
       @include bg_pos("index/rule-btn.png");
     }
 
     .index-prize-btn {
-      @include pos(184px, 49px, -37px, 575px);
+      @include pos(184px, 49px, 612px, 615px);
       @include bg_pos("index/prize-btn.png");
     }
 
     .index-start-btn {
-      @include pos(311px, 90px, 220px, 1168px);
+      @include pos(423px, 152px, 156px, 1025px);
       @include bg_pos("index/start-btn.png");
     }
 
     .index-agreement {
-      font-family: "HarmonyOS_Sans_SC_Regular";
+      font-family: 'HarmonyOS_Sans_SC_Regular';
       pointer-events: none;
-      @include pos(736px, 182px, 7px, 1258px);
-      // background: rgba($color: #f49e6a, $alpha: 0.55);
+      @include pos(736px, 182px, 7px, 1203px);
+      background-color: rgba(255, 255, 255,0.75);
       font-size: 14px;
       text-align: justify;
       letter-spacing: 0.1px;
-      color: #ff8c84;
+      color: #124284;
       padding: 10px;
       box-sizing: border-box;
-      border-radius: 10px;
+      border-radius: 2px;
       line-height: 20px;
 
       .b {
@@ -228,7 +199,7 @@ const showVC = () => {
       }
 
       .orange {
-        color: #fdf9de;
+        color: #f5430c;
         font-weight: 700;
       }
     }

src/components/Loading.vue

@@ -13,7 +13,6 @@ const userStore = useMainStore();
 const loadNum = ref(0);
 
 onMounted(() => {
-
   Preloader({
     name: "加载页资源",
     imgs: loadImg,
@@ -25,6 +24,7 @@ onMounted(() => {
       duration: 0.2,
       autoAlpha: 1,
       onComplete: () => {
+        // 非本地环境
         if (import.meta.env.VITE_MODE != "dev") {
           getMyPrize({}, userStore.token).then((res) => {
             if (res.code == 0) {
@@ -36,7 +36,6 @@ onMounted(() => {
             }
           });
         }
-
         Preloader({
           name: "内页资源",
           imgs: pageImg,
@@ -47,7 +46,6 @@ onMounted(() => {
           },
         }).then((res) => {
           console.log("加载完成");
-
           gsap.to(".LoadPage", {
             duration: 1,
             autoAlpha: 0,
@@ -66,9 +64,11 @@ onMounted(() => {
   <div class="LoadPage" @touchmove.prevent>
     <div class="load-bg"></div>
     <div class="load-container">
-    <div class="load-icon"></div>
+      <div class="load-icon"></div>
       <div class="load-box">
-        <div class="bar"></div>
+        <div class="bar">
+          <div class="bar-icon"></div>
+        </div>
       </div>
       <div class="load-num">{{ loadNum }}%</div>
     </div>
@@ -93,40 +93,45 @@ onMounted(() => {
     @include box(750px, 1180px);
     // transform: translateY(-50%);
 
-    .load-icon{
-      @include pos(101px, 55px, 325px, 370px);
+    .load-icon {
+      @include pos(83px, 101px, 325px, 370px);
       @include bg_pos("load/icon.png");
     }
 
     .load-box {
-      @include pos(512px, 35px, 119px, 450px);
-      border-style: solid;
-      border-width: 2px;
-      border-color: #e17c4d;
+      @include pos(576px, 36px, 87px, 500px);
       border-radius: 20px;
-      padding: 2px;
+      overflow: hidden;
+      padding: 4.5px;
+      @include bg_pos("load/bar-box.png");
 
       .bar {
-        @include box(0%, 26px);
-        border-radius: 20px;
-        background: linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
-        background-image: -webkit-linear-gradient( -178deg, rgb(255,184,127) 0%, rgb(255,238,186) 100%);
-
+        @include box(0%, 27px);
+        position: relative;
+        @include bg_pos("load/bar.png");
+        background-size: 551px 27px;
+        .bar-icon {
+          @include box(35px, 36px);
+          position: absolute;
+          top: -4.5px;
+          left: 95%;
+          @include bg_pos("load/bar-icon.png");
+        }
       }
     }
 
     .load-num {
-      @include pos(750px, 50px, 0px, 511px);
+      @include pos(750px, 50px, 0px, 570px);
       text-align: center;
       font-size: 38px;
-      color: #ffaf5e;
+      color: rgb(255, 255, 255);
       line-height: 40px;
       font-weight: 700;
-      background: linear-gradient(to right, #f2733a, #ffd667);
+      background: linear-gradient(to right, #dadada, #ffffff);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      // letter-spacing: 2px;
+      text-shadow: 0.9px 3.897px 0px rgba(44, 182, 255, 0.004);
     }
 
     .btn {

src/components/MyPrize.vue

@@ -2,27 +2,26 @@
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
 import { Toast } from "vant";
-import useClipboard from 'vue-clipboard3'
+import useClipboard from "vue-clipboard3";
 import { useMainStore } from "@/store";
 import { onMounted } from "vue";
 
 // 页面配置初始化
 const emit = defineEmits(["MyPrizePage"]);
 const userStore = useMainStore();
-const { toClipboard } = useClipboard()
+const { toClipboard } = useClipboard();
 
 const money = ref(userStore.prizeMoney);
 const code = ref(userStore.prizeCode);
 
 const copyFn = (event) => {
   let e = event.target;
-  toClipboard(code.value)
+  toClipboard(code.value);
   debounceTap(e, () => {
     Toast(`复制成功：${code.value}`);
   });
 };
 
-
 const hide = (event) => {
   let e = event.target;
   debounceTap(e, () => {
@@ -49,13 +48,18 @@ onMounted(() => {
 <template>
   <div class="MyPrizePage">
     <div class="myPrize-container">
-      <div class="myPrize-money">¥{{ money }}元</div>
-      <div class="myPrize-code-box">
-        <div class="code">{{ code }}</div>
-        <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
+      <div class="myPrize-has-prize">
+        <div class="myPrize-icon"></div>
+        <div class="myPrize-money">已获得¥{{ money }}元现金红包</div>
+        <div class="myPrize-code-box">
+          <div class="code">兑换码：{{ code }}</div>
+          <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
+        </div>
+        <div class="myPrize-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“清凉一夏”获取兑奖链接，输入兑换码兑换奖品。</div>
       </div>
-      <div class="myPrize-cls-btn" @click="hide($event)"></div>
+      
     </div>
+    <div class="myPrize-cls-btn" @click="hide($event)"></div>
   </div>
 </template>  
 
@@ -67,43 +71,63 @@ onMounted(() => {
 
   .myPrize-container {
     position: relative;
-    @include box(665px, 731px);
-    @include bg_pos("prize/myPrize-box.png");
+    @include box(683px, 585px);
+    @include bg_pos("prize/prize-box.png");
 
-    .myPrize-money {
-      @include pos(370px, 81px, 139px, 239px);
+    .myPrize-has-prize {
+      @include pos(683px, 485px, 0px, 130px);
       display: flex;
-      justify-content: center;
+      flex-direction: column;
+      // justify-content: space-around;
       align-items: center;
-      color: #e95b46;
-      font-weight: 700;
-      font-size: 58px;
-      letter-spacing: 4px;
-    }
+      color: #0070d9;
 
-    .myPrize-code-box {
-      @include pos(312px, 52px, 197px, 508px);
-      display: flex;
-      flex-direction: row;
-      align-items: center;
+      .myPrize-icon {
+        @include box(204px, 214px);
+        @include bg_pos("prize/lucky-bag.png");
+        margin: 20px auto;
+      }
 
-      .code {
-        font-size: 25px;
+      .myPrize-money {
+        align-items: center;        
         font-weight: 700;
-        margin-right: 10px;
-        color: #fff6cc;
+        font-size: 28px;
+        letter-spacing: 2px;
       }
 
-      .myPrize-copy-btn {
-        @include box(77px, 39px);
-        @include bg_pos("prize/copy-btn.png");
+      .myPrize-code-box {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 70%;
+
+        .code {
+          font-size: 20px;
+          font-weight: 700;
+          margin-right: 10px;
+          color: #0070d9;
+        }
+
+        .myPrize-copy-btn {
+          @include box(77px, 39px);
+          @include bg_pos("prize/copy-btn.png");
+        }
+      }
+
+      .myPrize-tips{
+        width: 70%;
+        font-size: 20px;
+        // padding: 0px 100px;
+
       }
     }
 
-    .myPrize-cls-btn {
-      @include pos(82px, 82px, 517px, 114px);
-      @include bg_pos("prize/cls-btn.png");
-    }
+    
   }
+  .myPrize-cls-btn {
+      @include box(43px, 43px);
+      @include bg_pos("prize/cls-btn.png");
+      margin-top: 50px;
+    }
 }
 </style>

src/components/Question.vue

@@ -16,13 +16,13 @@ const questionList = ref(data); //随机打乱题库
 const answerList = ref([]); // 答案库统计
 const activeId = ref(""); // 当前题目所选答案选项
 const showResultBtn = ref(false);
-const isChecked = ref(false)
+const isChecked = ref(false);
 
 // 答题事件
 const answerFn = (item, event) => {
   let e = event.target.parentElement;
-  activeId.value = item.aid;  //更新选中状态
-  console.log('选项', item);
+  activeId.value = item.aid; //更新选中状态
+  console.log("选项", item);
   debounceTap(e, () => {
     let cid = questionList.value[currentId.value].id;
     let has = answerList.value.findIndex((obj) => obj.id === cid);
@@ -38,51 +38,45 @@ const answerFn = (item, event) => {
       answerList.value[has].answer = item.text;
     }
 
-    
-    gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
-    gsap.set('.answer-box', { pointerEvents: 'none' })
-    isChecked.value = true
-    console.log('currentId.value',currentId.value);
-    if(currentId.value == 2 ){
-      gsap.set('.create-btn', { display: 'block' })
-    }else{
-      gsap.set('.next-btn', { display: 'block' })
-
+    gsap.set(".option-tips,.analysis", { autoAlpha: 1 });
+    gsap.set(".answer-box", { pointerEvents: "none" });
+    isChecked.value = true;
+    console.log("currentId.value", currentId.value);
+    if (currentId.value == 2) {
+      console.log("over");
+      gsap.set(".create-btn", { autoAlpha: 1 });
+    } else {
+      gsap.set(".next-btn", { autoAlpha: 1 });
     }
-
-  })
-
-}
-
+  });
+};
 
 // 下一题
 const nextQuestion = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-    isChecked.value = false
-    gsap.set('.option-tips,.analysis', { autoAlpha: 0 })
-    currentId.value++
-    activeId.value = ''
-    gsap.set('.answer-box', { pointerEvents: 'initial' })
-    gsap.set('.next-btn', { display: 'none' })
-
-  })
-
-}
+    isChecked.value = false;
+    gsap.set(".option-tips,.analysis", { autoAlpha: 0 });
+    currentId.value++;
+    activeId.value = "";
+    gsap.set(".answer-box", { pointerEvents: "initial" });
+    gsap.set(".next-btn", { autoAlpha: 0 });
+  });
+};
 
 // 查看结果事件
 const viewResult = (event) => {
   let e = event.target;
   debounceTap(e, () => {
     // 随机生成海报id
-    userStore.updatePosterId(getRandomNumber([1, 2, 3]))
-    gsap.set('.question-box', { pointerEvents: 'none' })
-    Toast('答题结束')
+    userStore.updatePosterId(getRandomNumber([1, 2, 3]));
+    gsap.set(".question-box", { pointerEvents: "none" });
+    Toast("答题结束");
     Toast.loading({
-      message: '结果生成中',
+      message: "结果生成中",
       duration: 0,
       forbidClick: true,
-    })
+    });
 
     if (import.meta.env.VITE_MODE != "dev") {
       // 提交完成记录
@@ -93,96 +87,108 @@ const viewResult = (event) => {
         }
 
         setTimeout(() => {
-          Toast.clear()
-          gsap.to('.QuestionPage', {
-            duration: 0.5, autoAlpha: 0, onComplete: () => {
+          Toast.clear();
+          gsap.to(".QuestionPage", {
+            duration: 0.5,
+            autoAlpha: 0,
+            onComplete: () => {
               emit("QuestionPage", { action: "showResult" });
-            }
-          })
-        }, 1000)
+            },
+          });
+        }, 1000);
       });
     } else {
       setTimeout(() => {
-        Toast.clear()
-        gsap.to('.QuestionPage', {
-          duration: 0.5, autoAlpha: 0, onComplete: () => {
+        Toast.clear();
+        gsap.to(".QuestionPage", {
+          duration: 0.5,
+          autoAlpha: 0,
+          onComplete: () => {
             emit("QuestionPage", { action: "showResult" });
-          }
-        })
-      }, 1000)
+          },
+        });
+      }, 1000);
     }
-  })
-}
+  });
+};
 
 // 从数组中随机生成一个数字
 const getRandomNumber = (arr) => {
   var randomIndex = Math.floor(Math.random() * arr.length);
   return arr[randomIndex];
-}
-
+};
 
 onMounted(() => {
-  gsap.from('.question-bg', { duration: 0.5, autoAlpha: 0, })
-  gsap.from('.question-box', { duration: 0.5, scale: 0.4, autoAlpha: 0, })
-  gsap.to('.question-lantern-icon', { duration: 5, transformOrigin: '100% 0%', rotation: '10deg', repeat: -1, yoyo: true, ease: 'none' })
-
-
+  gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
+  gsap.from(".question-box", { duration: 0.5, y: 30, autoAlpha: 0 });
+  gsap.from(".answer-box", { duration: 0.5, y: 30, autoAlpha: 0 });
+  gsap.to('.question-tree', { duration: 3, transformOrigin: '0% 70%', rotation: '-10deg', repeat: -1, yoyo: true, ease: 'none' })
 });
 </script>
 
 <template>
   <div class="QuestionPage" @touchmove.prevent>
-    <div class="question-bg">
-      <div class="bottom-fan-1"></div>
-      <div class="bottom-fan-2"></div>
-      <div class="question-bottom-bg"></div>
-    </div>
+    <div class="question-bg"></div>
     <div class="question-container">
-      <div class="container-fan-1"></div>
-      <div class="container-fan-2"></div>
-
       <div class="question-box">
-        <!-- 问题序号 -->
-        <div class="qa-number">{{ questionList[currentId].id }}</div>
+        <div class="question-tree"></div>
+        <div class="question-con">
+ <!-- 问题序号 -->
+ <div class="qa-number">第{{ questionList[currentId].id }}题</div>
         <div class="qa-question-box">
           <!-- 问题 -->
-          <div class="question">
-            <div class="question-text" v-for="item in questionList[currentId].question" :key="item">
-              {{ item }}
-            </div>
-            <div class="question-tips">打一系列产品</div>
+          <div
+            class="question-text"
+            v-for="item in questionList[currentId].question"
+            :key="item"
+          >
+            {{ item }}
           </div>
-          <!-- 选项 -->
-          <div class="answer-box">
-            <div class="answer" :class="isChecked ? item.result + '-bg' : ''"
-              v-for="item in questionList[currentId].answer" :key="item.aid">
-              <div class="answer-text-box">
-                <div class="answer-text" v-for="a in item.text" :key="a">
-                  {{ item.aid }}.{{ a }}
-                </div>
-              </div>
-              <div class="option-tips">
-                <div :class="item.result"></div>
-              </div>
-              <!-- 可点击区域 -->
-              <div class="click-area" @click="answerFn(item, $event)"></div>
-            </div>
+        </div>
+        </div>
+       
+      </div>
+      <!-- 选项 -->
+      <div class="answer-box">
+        <div
+          class="answer"
+          v-for="(item, index) in questionList[currentId].answer"
+          :class="[
+            isChecked ? item.result + '-text' : '',
+            isChecked ? item.result + '-box' : '',
+            ]"
+          :key="item.aid"
+        >
+          <div class="answer-text" v-for="a in item.text" :key="a">
+            {{ item.aid }}.{{ a }}
           </div>
-          <!-- 解析 -->
-          <div class="analysis" >
-            <div v-for="li in questionList[currentId].analysis" :key="li">{{li}}</div>
+          <div class="option-tips">
+            <div :class="item.result"></div>
           </div>
-          <div class="next-btn" @click="nextQuestion($event)"></div>
-          <div class="create-btn" @click="viewResult($event)"></div>
+          <!-- 对话框气泡 -->
+          <div class="bubble-1"></div>
+          <div :class="index == 0 ? 'bubble-left' : 'bubble-right'"></div>
+          <!-- 可点击区域 -->
+          <div class="click-area" @click="answerFn(item, $event)"></div>
         </div>
       </div>
-      <div class="question-lantern-icon"></div>
-      <div class="question-gold-icon-1"></div>
-      <div class="question-gold-icon-2"></div>
+      <!-- 解析 -->
+      <div class="analysis">
+        <div v-for="li in questionList[currentId].analysis" :key="li">
+          <span class="analysis-icon"></span>
+          {{ li }}
+        </div>
+      </div>
+      <div class="next-btn" @click="nextQuestion($event)"></div>
+      <div class="create-btn" @click="viewResult($event)"></div>
     </div>
     <!-- 进度条 -->
-    <Progress :percentage="(currentId + 1) / 3 * 100" pivot-color="#7232dd" :show-pivot="false"
-      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
+    <Progress
+      :percentage="((currentId + 1) / 3) * 100"
+      pivot-color="#7232dd"
+      :show-pivot="false"
+      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))"
+    />
   </div>
 </template>
 
@@ -194,7 +200,7 @@ onMounted(() => {
   .question-bg {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
-    @include bg_pos('qa/bg.jpg');
+    @include bg_pos("qa/bg.jpg");
 
     .question-bottom-bg {
       pointer-events: none;
@@ -207,235 +213,190 @@ onMounted(() => {
 
     .bottom-fan-1 {
       @include pos(370px, 334px, 545px, 1022px);
-      @include bg_pos('index/fan-3.png');
+      @include bg_pos("index/fan-3.png");
     }
 
     .bottom-fan-2 {
       @include pos(350px, 205px, 494px, 1128px);
-      @include bg_pos('index/fan-4.png');
+      @include bg_pos("index/fan-4.png");
     }
   }
 
-
   .question-container {
-    @include pos(750px, 1624px, 0px, 50%);
+    @include pos(750px, 1180px, 0px, 50%);
     transform: translateY(-50%);
     @include flexCen();
+    justify-content: space-around;
 
-    .question-lantern-icon {
-      // pointer-events: none;
-      @include pos(349px, 443px, 489px, 49px);
-      @include bg_pos('qa/lantern-icon.png');
-    }
+    .question-box{
+      @include box(696px, 441px);
+      @include bg_pos("qa/question-box.png");
+      position: relative;
 
-    .container-fan-1 {
-      pointer-events: none;
-      @include pos(235px, 574px, 0px, 60px);
-      @include bg_pos("index/fan-1.png");
-    }
+      .question-tree{
+        @include pos(277px, 232px,-100px,-141px);
+        @include bg_pos("qa/tree.png");
+      }
 
-    .container-fan-2 {
-      pointer-events: none;
-      @include pos(316px, 317px, -205px, 405px);
-      @include bg_pos("index/fan-2.png");
-    }
-
-    .question-box {
-      @include pos(656px, 913px, 47px, 339px);
+      .question-con {
+      @include pos(696px, 441px,0px,0px);
       @include bg_pos("qa/question-box.png");
 
       .qa-number {
-        @include pos(100px, 56px, 278px, 89px);
+        @include pos(696px, 86px, 0px, 0px);
         font-size: 40px;
-        font-style: italic;
-        color: #c61a1a;
+        color: #ffffff;
         font-weight: 700;
         display: flex;
         justify-content: center;
         align-items: center;
+        text-align: justifyLeft;
+        text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9);
       }
 
       .qa-question-box {
-        @include pos(570px, 700px, 43px, 194px);
+        @include pos(626px, 243px, 37px, 177px);
         display: flex;
         flex-direction: column;
-        // justify-content: space-around;
-        justify-content: flex-start;
+        justify-content: center;
         align-items: center;
 
         // 问题样式
-        .question {
-          display: flex;
-          flex-direction: column;
-          // margin-bottom: 10px;
-          height: 270px;
-          justify-content: center;
-
-          .question-text {
-            width: 100%;
-            font-family: 'DouyinSansBold';
-            font-size: 35px;
-            color: rgb(255, 255, 255);
-            text-align: center;
-            padding: 10px;
-            text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
-            // -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
-          }
-
-          .question-tips {
-            font-size: 25px;
-            width: 100%;
-            font-family: 'DouyinSansBold';
-            color: rgb(255, 255, 255);
-            text-align: center;
-            padding: 10px;
-            text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
-          }
-        }
-
-        // 选项样式
-        .answer-box {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: space-between;
-          height: 200px;
-
-          // 选中状态
-          .correct-bg {
-            border: 1px solid rgb(255, 238, 186) !important;
-            background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
-            background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
-
-            .answer-option {
-              color: #96100f;
-            }
-
-            .answer-text-box {
-              color: #96100f !important;
-            }
-
-          }
-
-          .incorrect-bg {
-            background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
-            box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
-
-            .answer-option {
-              color: #ffe2ad;
-            }
-
-            .answer-text-box {
-              color: #ffe2ad !important;
-            }
-
-          }
-
-
-
-          .answer {
-            @include box(476px, 92px);
-            position: relative;
-            border-radius: 47.5px;
-            border: 2px solid rgb(255, 225, 172);
-            // margin-bottom: 35px;
-            justify-content: space-between;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-around;
-            align-items: center;
-
-            .click-area {
-              @include pos(476px, 92px, 0px, 0px);
-              border-radius: 47.5px;
-            }
-
-
-            .option-tips {
-              @include box(60px, 60px);
-              visibility: hidden;
-
-              .correct {
-                @include box(100%, 100%);
-                @include bg_pos("qa/correct.png");
-              }
-
-              .incorrect {
-                @include box(100%, 100%);
-                @include bg_pos("qa/incorrect.png");
-              }
-            }
-
-
-
-            .answer-text-box {
-              @include box(335px, 100%);
-              font-family: 'HarmonyOS_Sans_SC_Regular';
-              color: #ffe2ad;
-              font-size: 28px;
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-
-              .answer-text {
-                width: 100%;
-                // text-align: center;
-                padding-left: 40px;
-              }
-
-            }
-          }
-
-
-
-
-
-        }
-
-        // 解析样式
-        .analysis {
-          visibility: hidden;
-          width: 95%;
-          font-family: 'HarmonyOS_Sans_SC_Regular';
-          font-size: 20px;
-          color: #ffe2ad;
+        .question-text {
+          width: 100%;
+          font-family: "HarmonyOS_Sans_SC_Regular";
+          font-size: 30px;
+          letter-spacing: 1.5px;
+          color: #065ac6;
           text-align: center;
-          // padding: 20px;
-          height: 100px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
+          padding: 40px;
+          text-align: justify;
+          line-height: 55px;
+        }
+      }
+    }
+    }
+
+
+    // 选项样式
+    .answer-box {
+      @include box(750px, 205px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      color: #065ac6;
+      font-size: 26px;
+      line-height: 80px;
+      margin-top: 40px;
+      padding: 0 50px;
+      font-family: "HarmonyOS_Sans_SC_Regular";
+
+      .answer {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        line-height: 75px;
+        height: 74px;
+        padding: 0px 30px;
+        border-radius: 50px;
+        border: 1px solid rgb(255, 255, 255);
+        background-color: rgba(255, 255, 255, 0.361);
+        position: relative;
+        box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.361) inset;
+
+        .bubble-1 {
+          @include pos(55px, 5px, 88px, 7px);
+          @include bg_pos("qa/bubble-1.png");
         }
 
-        .next-btn{
-          @include box(234px,65px);
-          @include bg_pos("qa/next-btn.png");
-          display: none;
-
-        }
-        .create-btn{
-          @include box(234px,65px);
-          @include bg_pos("qa/create-btn.png");
-          display: none;
-        
+        .bubble-left {
+          @include pos(26px, 15px, 88px, 72px);
+          border: 10px solid transparent;
+          border-top-color: rgba(255, 255, 255, 0.9);
+          border-bottom: 0;
+          margin-left: -10px;
+          margin-bottom: -10px;
+          // @include bg_pos("qa/jiao-1.png");
         }
 
+        .bubble-right {
+          @include box(26px, 15px);
+          border: 10px solid transparent;
+          border-top-color: rgba(255, 255, 255, 0.9);
+          border-bottom: 0;
+          margin-left: -5px;
+          margin-bottom: -5px;
+          position: absolute;
+          top: 72px;
+          right: 88px;
+        }
+
+        .click-area {
+          @include pos(100%, 100%, 0px, 0px);
+          border-radius: 47.5px;
+          // background: rgba($color: #000000, $alpha: 0.5);
+        }
+      }
+
+      .correct-text {
+        color: #e74c00;
+        // background-color: rgba(255, 255, 255, 0.471);
+        box-shadow: 5px  5px 5px rgba(255, 240, 192, 0.471) inset;
+
+      }
+
+      .option-tips {
+        @include box(40px, 40px);
+        visibility: hidden;
+
+        .correct {
+          @include box(74px, 74px);
+          @include bg_pos("qa/correct.png");
+          position: absolute;
+          right: -20px;
+          top: 0px;
+        }
+
+        .incorrect {
+          @include box(74px, 74px);
+          @include bg_pos("qa/incorrect.png");
+          position: absolute;
+          right: -20px;
+          top: 0px;
+        }
       }
     }
 
-    .question-gold-icon-1 {
-      pointer-events: none;
-      @include pos(135px, 128px, 604px, 773px);
-      @include bg_pos("qa/gold-icon.png");
+    // 解析样式
+    .analysis {
+      visibility: hidden;
+      width: 95%;
+      font-family: "HarmonyOS_Sans_SC_Regular";
+      font-size: 20px;
+      color: #e74c00;
+      text-align: justify;
+      padding: 10px 50px;
+      height: 100px;
+      .analysis-icon {
+        display: inline-block;
+        @include box(32px, 31px);
+        @include bg_pos("qa/analysis-icon.png");
+      }
     }
 
-    .question-gold-icon-2 {
-      pointer-events: none;
-      @include pos(276px, 241px, -70px, 1089px);
-      @include bg_pos("qa/gold-icon-2.png");
+    .next-btn {
+      @include box(256px, 70px);
+      @include bg_pos("qa/next-btn.png");
+      // display: none;
+      visibility: hidden;
+    }
+    .create-btn {
+      @include box(256px, 70px);
+      @include bg_pos("qa/create-btn.png");
+      // display: none;
+      visibility: hidden;
     }
-
   }
 }
 </style>

src/components/Result copy.vue

@@ -0,0 +1,381 @@
+<script setup>
+import { gsap } from "gsap";
+import { debounceTap } from "@/plugins";
+import { useMainStore } from "@/store";
+import { posterCreate } from "@/plugins";
+import { Toast } from "vant";
+import QRCode from "qrcode";
+import { reactive } from "vue";
+
+// 页面配置初始化
+const emit = defineEmits(["ResultPage"]);
+const userStore = useMainStore();
+const posterId = ref(userStore.posterId); //海报背景id：1～4
+
+const posterImgList = reactive([
+    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
+])
+
+// 生成二维码逻辑
+const eqcodePic = ref();
+onMounted(() => {
+    console.log('posterId:',posterId.value);
+    let eqCodeUrl = import.meta.env.VITE_URL;
+    QRCode.toDataURL(eqCodeUrl)
+        .then((url) => {
+            eqcodePic.value = url;
+            // console.log("eq", eqcodePic.value);
+        })
+        .catch((err) => {
+            console.error(err);
+        });
+
+    gsap.from(".result-bg", {
+        duration: 0.7,
+        scale: 1.2,
+        autoAlpha: 0,
+    });
+
+    gsap.from(".result-larnten-box", {
+        duration: 0.7,
+        scale: 1.4,
+        autoAlpha: 0,
+    });
+    gsap.from(".result-larnten", {
+        duration: 0.7,
+        scale: 0.7,
+        autoAlpha: 0,
+    });
+    gsap.from(".result-blessing-1", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:0.5
+    });
+    gsap.from(".result-blessing-2", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:0.7
+    });
+    gsap.from(".result-product", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:1
+    });
+    gsap.from(".result-tips", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:1.2
+    });
+    gsap.from(".create-poster", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:1.4,
+        onComplete:()=>{
+            // gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
+            let gl = gsap.timeline({repeat:-1,yoyo:true})
+            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
+            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
+            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
+            // gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
+
+        }
+    });
+});
+
+// 生成海报逻辑
+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;
+    debounceTap(e, () => {
+        if (userStore.hasDraw) {
+            emit("ResultPage", { action: "showDraw" });
+        } else {
+            Toast("今日暂无抽奖机会");
+        }
+    });
+};
+
+// 隐藏海报弹窗
+const hidePop = (event) => {
+    let e = event.target;
+    debounceTap(e, () => {
+        gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
+    });
+};
+
+// 展示分享
+const goShare = (event) => {
+    let e = event.target;
+    debounceTap(e, () => {
+        gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
+    });
+};
+
+// 隐藏分享提示
+const hideShare = () => {
+    gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
+};
+</script>
+
+<template>
+    <div class="ResultPage" @touchmove.prevent>
+        <div class="result-bg"></div>
+        <div class="result-container">
+            <div class="result-larnten-box" :class="'larnten-box-'+posterId"></div>
+            <div class="result-larnten" :class="'larnten-'+posterId"></div>
+            <!-- 新年祝福语 -->
+            <div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
+            <div class="result-blessing-2" :class="'blessing-'+posterId+'-2'"></div>
+            <!-- 产品 -->
+            <div class="result-product" :class="'product-'+posterId"></div>
+            <!-- 提示语 -->
+            <div class="result-tips"></div>
+            <!-- 生成海报按钮 -->
+            <div class="create-poster" @click="createPoster($event)"></div>
+        </div>
+    </div>
+    <!-- 海报弹窗 -->
+    <div class="posterPop" @touchmove.prevent>
+        <div class="cls-btn-box">
+            <div class="cls-btn" @click="hidePop($event)"></div>
+        </div>
+        <div class="poster-box">
+            <div class="poster" :class="'poster-'+posterId">
+                <img id="posterSrc" src="" alt="" srcset="">
+            </div>
+        </div>
+        <div class="save-tips">*长按保存海报</div>
+        <div class="btn-box">
+            <div class="go-draw" @click="goDraw($event)"></div>
+            <div class="go-share" @click="goShare($event)"></div>
+        </div>
+    </div>
+    <!-- 分享提示 -->
+    <div class="sharePop" @click="hideShare">
+        <div class="tips-pic"></div>
+        <div class="tips-text">点击右上角分享给你的好友！</div>
+    </div>
+</template>  
+
+
+<style lang="scss" scoped>
+.ResultPage {
+    @include fixed();
+    background-color: azure;
+
+    .result-bg {
+        @include pos(750px, 1624px, 0px, 50%);
+        @include bg_pos("result/bg.jpg");
+        transform: translateY(-50%);
+        pointer-events: none;
+    }
+
+    .result-container {
+        @include pos(750px, 1624px, 0px, 50%);
+        transform: translateY(-50%);
+
+        .larnten-box-1{
+            @include pos(437px, 809px, 283px, 181px);
+            @include bg_pos("result/larnten-box-1.png");
+        }
+        .larnten-box-2{
+            @include pos(423px, 790px, 304px, 178px);
+            @include bg_pos("result/larnten-box-2.png");
+        }
+        .larnten-box-3{
+            @include pos(447px, 807px, 280px, 170px);
+            @include bg_pos("result/larnten-box-3.png");
+        }
+
+        .larnten-1{
+            @include pos(397px, 787px, 315px, 297px);
+            @include bg_pos("result/larnten-1.png");
+        }
+
+        .larnten-2{
+            @include pos(444px, 771px, 306px, 302px);
+            @include bg_pos("result/larnten-2.png");
+        }
+
+        .larnten-3{
+            @include pos(472px, 789px, 278px, 285px);
+            @include bg_pos("result/larnten-3.png");
+        }
+
+
+        .blessing-1-1{
+            @include pos(86px, 565px, 70px, 347px);
+            @include bg_pos("result/blessing-text-1-1.png");
+        }
+        .blessing-1-2{
+            @include pos(82px, 561px, 165px, 347px);
+            @include bg_pos("result/blessing-text-1-2.png");
+        }
+
+        .blessing-2-1{
+            @include pos(86px, 563px, 70px, 347px);
+            @include bg_pos("result/blessing-text-2-1.png");
+        }
+        .blessing-2-2{
+            @include pos(88px, 565px, 165px, 347px);
+            @include bg_pos("result/blessing-text-2-2.png");
+        }
+
+        .blessing-3-1{
+            @include pos(86px, 568px, 70px, 347px);
+            @include bg_pos("result/blessing-text-3-1.png");
+        }
+        .blessing-3-2{
+            @include pos(87px, 563px, 165px, 347px);
+            @include bg_pos("result/blessing-text-3-2.png");
+        }
+
+        .result-product{
+            @include pos(619px, 138px, 65px, 1015px);
+        }
+        .product-1{
+            @include bg_pos("result/product-1.png");
+        }
+        .product-2{
+            @include bg_pos("result/product-2.png");
+        }
+        .product-3{
+            @include bg_pos("result/product-3.png");
+        }
+
+        .result-tips{
+            @include pos(645px, 71px, 52px, 1183px);
+            @include bg_pos("result/text.png");
+        }
+
+        .create-poster{
+            @include pos(237px, 80px, 257px, 1284px);
+            @include bg_pos("result/create-btn.png");
+        }
+
+    }
+}
+
+.posterPop {
+    @include fixed();
+    @include flexCen();
+    background-color: rgba($color: #000000, $alpha: 0.6);
+    visibility: hidden;
+
+    .cls-btn-box {
+        width: 617px;
+        display: flex;
+        justify-content: flex-end;
+
+        .cls-btn {
+            @include box(49px, 49px);
+            @include bg_pos("result/cls-btn.png");
+            margin-right: -20px;
+        }
+    }
+
+    .save-tips {
+        font-size: 20px;
+        line-height: 20px;
+        margin-top: 20px;
+        color: #fff;
+        letter-spacing: 2px;
+    }
+
+    .poster-box {
+        @include box(617px, 881px);
+        margin-top: 20px;
+        overflow: hidden;
+
+        .poster {
+            @include box(100%, 100%);
+            overflow: hidden;
+            #posterSrc{
+                @include box(100%, 100%);
+                opacity: 0;
+            }
+        }
+        .poster-1{
+            @include bg_pos("result/preveiw-1.png");
+        }
+        .poster-2{
+            @include bg_pos("result/preveiw-2.png");
+        }
+        .poster-3{
+            @include bg_pos("result/preveiw-3.png");
+        }
+    }
+
+    .btn-box {
+        @include box(489px, 76px);
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20px;
+
+        .go-draw {
+            @include box(226px, 76px);
+            @include bg_pos("result/go-draw-btn.png");
+        }
+
+        .go-share {
+            @include box(226px, 76px);
+            @include bg_pos("result/go-share-btn.png");
+        }
+    }
+}
+
+.sharePop {
+    @include fixed();
+    background-color: rgba($color: #000000, $alpha: 0.54);
+    visibility: hidden;
+
+    .tips-pic {
+        @include pos(100px, 100px, 600px, 100px);
+        @include bg_pos("result/share-tips.svg");
+        stroke: #ffffff;
+    }
+
+    .tips-text {
+        font-size: 25px;
+        @include pos(750px, 100px, 0px, 220px);
+        color: #ffffff;
+        text-align: right;
+    }
+}
+</style>

src/components/Result.vue

@@ -10,372 +10,294 @@ import { reactive } from "vue";
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
 const userStore = useMainStore();
-const posterId = ref(userStore.posterId); //海报背景id：1～4
+const posterId = ref(Math.floor(Math.random() * 3) + 1); //海报背景id：1～3
+
+const posterTextSrc = new URL(`../assets/images/result/poster-text.png`, import.meta.url).href
 
 const posterImgList = reactive([
-    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
-])
+  new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
+  new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
+  new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
+]);
 
 // 生成二维码逻辑
 const eqcodePic = ref();
 onMounted(() => {
-    console.log('posterId:',posterId.value);
-    let eqCodeUrl = import.meta.env.VITE_URL;
-    QRCode.toDataURL(eqCodeUrl)
-        .then((url) => {
-            eqcodePic.value = url;
-            // console.log("eq", eqcodePic.value);
-        })
-        .catch((err) => {
-            console.error(err);
-        });
-
-    gsap.from(".result-bg", {
-        duration: 0.7,
-        scale: 1.2,
-        autoAlpha: 0,
+  console.log("posterId:", posterId.value);
+  let eqCodeUrl = import.meta.env.VITE_URL;
+  QRCode.toDataURL(eqCodeUrl)
+    .then((url) => {
+      eqcodePic.value = url;
+      // console.log("eq", eqcodePic.value);
+    })
+    .catch((err) => {
+      console.error(err);
     });
 
-    gsap.from(".result-larnten-box", {
-        duration: 0.7,
-        scale: 1.4,
-        autoAlpha: 0,
-    });
-    gsap.from(".result-larnten", {
-        duration: 0.7,
-        scale: 0.7,
-        autoAlpha: 0,
-    });
-    gsap.from(".result-blessing-1", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:0.5
-    });
-    gsap.from(".result-blessing-2", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:0.7
-    });
-    gsap.from(".result-product", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1
-    });
-    gsap.from(".result-tips", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1.2
-    });
-    gsap.from(".create-poster", {
-        duration: 0.7,
-        y: -30,
-        autoAlpha: 0,
-        delay:1.4,
-        onComplete:()=>{
-            // gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
-            let gl = gsap.timeline({repeat:-1,yoyo:true})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
-            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
-            // gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
-
-        }
-    });
+  gsap.from(".result-bg", {
+    duration: 0.7,
+    scale: 1.2,
+    autoAlpha: 0,
+  });
 });
 
 // 生成海报逻辑
 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 },
-                },
-            ],
-        );
+  let e = event.target.parentElement;
+  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: 194, h: 195, x: 502, y: 1090 },
+        },
+        // 文案
+        {
+          name: "text",
+          src: posterTextSrc,
+          pos: { w: 337, h: 117, x: 81, y: 1133 },
+        },
+      ]
+    );
 
-        // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
-        
-    });
+    // gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
+  });
 };
 
 // 去抽奖
 const goDraw = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        if (userStore.hasDraw) {
-            emit("ResultPage", { action: "showDraw" });
-        } else {
-            Toast("今日暂无抽奖机会");
-        }
-    });
+  let e = event.target.parentElement;
+  console.log('e',e);
+  debounceTap(e, () => {
+    if (userStore.hasDraw) {
+      emit("ResultPage", { action: "showDraw" });
+    } else {
+      Toast("今日暂无抽奖机会");
+    }
+  });
 };
 
 // 隐藏海报弹窗
 const hidePop = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
-    });
+  let e = event.target;
+  debounceTap(e, () => {
+    gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
+  });
 };
 
 // 展示分享
 const goShare = (event) => {
-    let e = event.target;
-    debounceTap(e, () => {
-        gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
-    });
+  let e = event.target;
+  debounceTap(e, () => {
+    gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
+  });
 };
 
 // 隐藏分享提示
 const hideShare = () => {
-    gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
+  gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
 };
 </script>
 
 <template>
-    <div class="ResultPage" @touchmove.prevent>
-        <div class="result-bg"></div>
-        <div class="result-container">
-            <div class="result-larnten-box" :class="'larnten-box-'+posterId"></div>
-            <div class="result-larnten" :class="'larnten-'+posterId"></div>
-            <!-- 新年祝福语 -->
-            <div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
-            <div class="result-blessing-2" :class="'blessing-'+posterId+'-2'"></div>
-            <!-- 产品 -->
-            <div class="result-product" :class="'product-'+posterId"></div>
-            <!-- 提示语 -->
-            <div class="result-tips"></div>
-            <!-- 生成海报按钮 -->
-            <div class="create-poster" @click="createPoster($event)"></div>
-        </div>
+  <div class="ResultPage" @touchmove.prevent>
+    <div :class="'result-bg-' + posterId"></div>
+    <div class="result-container">
+      <!-- 标题 -->
+      <div class="result-title"></div>
+      <!-- 文案 -->
+      <div :class="'r-text-' + posterId" class="r-text"></div>
+      <!-- 生成海报按钮 -->
+      <div class="create-poster" >
+        <div class="r-click-area" @click="createPoster($event)"></div>
+      </div>
     </div>
-    <!-- 海报弹窗 -->
-    <div class="posterPop" @touchmove.prevent>
-        <div class="cls-btn-box">
-            <div class="cls-btn" @click="hidePop($event)"></div>
-        </div>
-        <div class="poster-box">
-            <div class="poster" :class="'poster-'+posterId">
-                <img id="posterSrc" src="" alt="" srcset="">
-            </div>
-        </div>
-        <div class="save-tips">*长按保存海报</div>
-        <div class="btn-box">
-            <div class="go-draw" @click="goDraw($event)"></div>
-            <div class="go-share" @click="goShare($event)"></div>
-        </div>
+  </div>
+  <!-- 海报弹窗 -->
+  <div class="posterPop" @touchmove.prevent>
+    <div class="cls-btn-box">
+      <div class="cls-btn" @click="hidePop($event)"></div>
     </div>
-    <!-- 分享提示 -->
-    <div class="sharePop" @click="hideShare">
-        <div class="tips-pic"></div>
-        <div class="tips-text">点击右上角分享给你的好友！</div>
+    <div class="poster-box">
+      <div class="poster" :class="'poster-' + posterId">
+        <img id="posterSrc" src="" alt="" srcset="" />
+      </div>
     </div>
+    <div class="save-tips">*长按保存海报</div>
+    <div class="btn-box">
+      <div class="go-draw" >
+        <div class="r-click-area" @click="goDraw($event)"></div>
+      </div>
+      <div class="go-share" >
+        <div class="r-click-area" @click="goShare($event)"></div>
+      </div>
+    </div>
+  </div>
+  <!-- 分享提示 -->
+  <div class="sharePop" @click="hideShare">
+    <div class="tips-pic"></div>
+    <div class="tips-text">点击右上角分享给你的好友！</div>
+  </div>
 </template>  
 
 
 <style lang="scss" scoped>
 .ResultPage {
-    @include fixed();
-    background-color: azure;
+  @include fixed();
+  background-color: azure;
 
-    .result-bg {
-        @include pos(750px, 1624px, 0px, 50%);
-        @include bg_pos("result/bg.jpg");
-        transform: translateY(-50%);
-        pointer-events: none;
+  .result-bg-1 {
+    @include pos(750px, 1624px, 0px, 50%);
+    @include bg_pos("result/r-bg-1.jpg");
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+  .result-bg-2 {
+    @include pos(750px, 1624px, 0px, 50%);
+    @include bg_pos("result/r-bg-2.jpg");
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+  .result-bg-3 {
+    @include pos(750px, 1624px, 0px, 50%);
+    @include bg_pos("result/r-bg-3.jpg");
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .result-container {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+
+    .result-title {
+      @include pos(537px, 116px, 118px, 258px);
+      @include bg_pos("result/title.png");
+      pointer-events: none;
     }
 
-    .result-container {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-
-        .larnten-box-1{
-            @include pos(437px, 809px, 283px, 181px);
-            @include bg_pos("result/larnten-box-1.png");
-        }
-        .larnten-box-2{
-            @include pos(423px, 790px, 304px, 178px);
-            @include bg_pos("result/larnten-box-2.png");
-        }
-        .larnten-box-3{
-            @include pos(447px, 807px, 280px, 170px);
-            @include bg_pos("result/larnten-box-3.png");
-        }
-
-        .larnten-1{
-            @include pos(397px, 787px, 315px, 297px);
-            @include bg_pos("result/larnten-1.png");
-        }
-
-        .larnten-2{
-            @include pos(444px, 771px, 306px, 302px);
-            @include bg_pos("result/larnten-2.png");
-        }
-
-        .larnten-3{
-            @include pos(472px, 789px, 278px, 285px);
-            @include bg_pos("result/larnten-3.png");
-        }
-
-
-        .blessing-1-1{
-            @include pos(86px, 565px, 70px, 347px);
-            @include bg_pos("result/blessing-text-1-1.png");
-        }
-        .blessing-1-2{
-            @include pos(82px, 561px, 165px, 347px);
-            @include bg_pos("result/blessing-text-1-2.png");
-        }
-
-        .blessing-2-1{
-            @include pos(86px, 563px, 70px, 347px);
-            @include bg_pos("result/blessing-text-2-1.png");
-        }
-        .blessing-2-2{
-            @include pos(88px, 565px, 165px, 347px);
-            @include bg_pos("result/blessing-text-2-2.png");
-        }
-
-        .blessing-3-1{
-            @include pos(86px, 568px, 70px, 347px);
-            @include bg_pos("result/blessing-text-3-1.png");
-        }
-        .blessing-3-2{
-            @include pos(87px, 563px, 165px, 347px);
-            @include bg_pos("result/blessing-text-3-2.png");
-        }
-
-        .result-product{
-            @include pos(619px, 138px, 65px, 1015px);
-        }
-        .product-1{
-            @include bg_pos("result/product-1.png");
-        }
-        .product-2{
-            @include bg_pos("result/product-2.png");
-        }
-        .product-3{
-            @include bg_pos("result/product-3.png");
-        }
-
-        .result-tips{
-            @include pos(645px, 71px, 52px, 1183px);
-            @include bg_pos("result/text.png");
-        }
-
-        .create-poster{
-            @include pos(237px, 80px, 257px, 1284px);
-            @include bg_pos("result/create-btn.png");
-        }
-
+    .r-text {
+      pointer-events: none;
     }
+
+    .r-text-1 {
+      @include pos(638px, 814px, 67px, 396px);
+      @include bg_pos("result/text-1.png");
+    }
+    .r-text-2 {
+      @include pos(643px, 814px, 67px, 396px);
+      @include bg_pos("result/text-2.png");
+    }
+    .r-text-3 {
+      @include pos(643px, 844px, 63px, 392px);
+      @include bg_pos("result/text-3.png");
+    }
+
+    .create-poster {
+      @include pos(337px, 151px, 206px, 1253px);
+      @include bg_pos("result/create-btn.png");
+      .r-click-area {
+      @include pos(256px, 69px, 35px, 14px);
+    }
+    }
+  }
 }
 
 .posterPop {
-    @include fixed();
-    @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.6);
-    visibility: hidden;
+  @include fixed();
+  @include flexCen();
+  background-color: rgba($color: #000000, $alpha: 0.6);
+  visibility: hidden;
 
-    .cls-btn-box {
-        width: 617px;
-        display: flex;
-        justify-content: flex-end;
+  .cls-btn-box {
+    width: 617px;
+    display: flex;
+    justify-content: flex-end;
 
-        .cls-btn {
-            @include box(49px, 49px);
-            @include bg_pos("result/cls-btn.png");
-            margin-right: -20px;
-        }
+    .cls-btn {
+      @include box(43px, 43px);
+      @include bg_pos("result/cls-btn.png");
+      margin-right: -20px;
+    }
+  }
+
+  .save-tips {
+    font-size: 20px;
+    line-height: 20px;
+    margin-top: 20px;
+    color: #fff;
+    letter-spacing: 2px;
+  }
+
+  .poster-box {
+    @include box(617px, 881px);
+    margin-top: 20px;
+    overflow: hidden;
+
+    .poster {
+      @include box(100%, 100%);
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      #posterSrc {
+        // @include box(100%, 100%);
+        width: 80%;
+        border: 1px solid #fff;
+        border-radius: 20px;
+        // opacity: 0;
+      }
+    }
+  }
+
+  .btn-box {
+    @include box(650px, 76px);
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+    .r-click-area {
+      @include pos(256px, 69px, 35px, 14px);
     }
 
-    .save-tips {
-        font-size: 20px;
-        line-height: 20px;
-        margin-top: 20px;
-        color: #fff;
-        letter-spacing: 2px;
+    .go-draw {
+      @include box(337px, 151px);
+      @include bg_pos("result/go-draw-btn.png");
+      position: relative;
     }
 
-    .poster-box {
-        @include box(617px, 881px);
-        margin-top: 20px;
-        overflow: hidden;
-
-        .poster {
-            @include box(100%, 100%);
-            overflow: hidden;
-            #posterSrc{
-                @include box(100%, 100%);
-                opacity: 0;
-            }
-        }
-        .poster-1{
-            @include bg_pos("result/preveiw-1.png");
-        }
-        .poster-2{
-            @include bg_pos("result/preveiw-2.png");
-        }
-        .poster-3{
-            @include bg_pos("result/preveiw-3.png");
-        }
-    }
-
-    .btn-box {
-        @include box(489px, 76px);
-        display: flex;
-        justify-content: space-between;
-        margin-top: 20px;
-
-        .go-draw {
-            @include box(226px, 76px);
-            @include bg_pos("result/go-draw-btn.png");
-        }
-
-        .go-share {
-            @include box(226px, 76px);
-            @include bg_pos("result/go-share-btn.png");
-        }
+    .go-share {
+      @include box(337px, 151px);
+      @include bg_pos("result/go-share-btn.png");
+      position: relative;
     }
+  }
 }
 
 .sharePop {
-    @include fixed();
-    background-color: rgba($color: #000000, $alpha: 0.54);
-    visibility: hidden;
+  @include fixed();
+  background-color: rgba($color: #000000, $alpha: 0.54);
+  visibility: hidden;
 
-    .tips-pic {
-        @include pos(100px, 100px, 600px, 100px);
-        @include bg_pos("result/share-tips.svg");
-        stroke: #ffffff;
-    }
+  .tips-pic {
+    @include pos(100px, 100px, 600px, 100px);
+    @include bg_pos("result/share-tips.svg");
+    stroke: #ffffff;
+  }
 
-    .tips-text {
-        font-size: 25px;
-        @include pos(750px, 100px, 0px, 220px);
-        color: #ffffff;
-        text-align: right;
-    }
+  .tips-text {
+    font-size: 25px;
+    @include pos(750px, 100px, 0px, 220px);
+    color: #ffffff;
+    text-align: right;
+  }
 }
 </style>

src/components/Rule.vue

@@ -39,14 +39,14 @@ onMounted(() => {
                         <div class="part">
                             <div>活动攻略：</div>
                             <div>
-                                1、【猜灯谜闹元宵】活动共设计3道题目，全部选择完毕后即可获取测试结果。参与抽奖活动；
+                                1、进入活动参加【好理在手 邂逅清凉一夏】答题，共设计3道题目，全部选择完毕后即可参与抽奖活动；
                             </div>
-                            <div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
+                            <div>2、活动期间不限制参与答题次数，每人每日有1次抽奖机会。</div>
                         </div>
                         <div class="part">
                             <div>领奖说明：</div>
                             <div>
-                                1、中奖后在中奖页面复制兑换码，前往<span class="blod">[平安理财服务号]</span>消息框输入“元宵快乐”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
+                                <span class="blod">1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“清凉一夏”获取兑换链接，进入链接输入兑换码兑换奖品。</span>如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
                             </div>
                             <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
                             <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
@@ -98,25 +98,25 @@ onMounted(() => {
 
     .rule-container {
         position: relative;
-        @include box(612px, 794px);
+        @include box(664px, 861px);
         overflow: hidden;
 
         .content {
             .rule-content {
-                @include box(612px, 794px);
+                @include box(663px, 861px);
                 @include bg_pos("rule/rule-box.png");
                 position: relative;
                 overflow: hidden;
 
                 .rule-text-area {
-                    @include pos(612px, 676px, 0px, 101px);
+                    @include pos(663px, 645px, 0px, 131px);
                     overflow: hidden;
                     // overflow-y: scroll;
-                    padding: 0px 20px;
+                    padding: 0px 50px;
                     
 
                     .part {
-                        color: #a31b15;
+                        color: #0070d9;
                         font-size: 20px;
                         line-height: 35px;
                         margin-top: 30px;
@@ -127,7 +127,7 @@ onMounted(() => {
 
                     .blod{
                         font-weight: 700;
-                        color: #6c0500;
+                        color: #0070d9;
                     }
 
                     .margin-bottom-area{
@@ -138,18 +138,18 @@ onMounted(() => {
             }
 
             .rule-arrow {
-                @include pos(149px, 84px, 231px, 682px);
+                @include pos(149px, 84px, 257px, 712px);
                 @include bg_pos("rule/arrow.png");
                 pointer-events: none;
             }
             .rule-bottom-bg {
                 // visibility: hidden;
-                @include pos(588px, 102px, 12px, 682px);
+                @include pos(600px, 102px, 30px, 728px);
                 pointer-events: none;
-                background-image: -webkit-linear-gradient( 90deg, rgba(255,238,186,0.7) , rgba(255, 255, 255, 0.1) 100%);
+                background-image: -webkit-linear-gradient( 90deg, rgba(0, 112, 217, 0.1) , rgba(255, 255, 255, 0.1) 100%);
             }
             .rule-icon {
-                @include pos(118px, 146px, 511px, 25px);
+                @include pos(165px, 180px, 517px, 666px);
                 @include bg_pos("rule/icon.png");
                 pointer-events: none;
             }

src/data/imgList.js

@@ -6,75 +6,9 @@ const load = [
 
 const page = [
 
-    'index/prize-btn.png',
-    'index/cloud.png',
-    'index/firework.png',
-    'index/rule-btn.png',
-    'index/start-btn.png',
-    'index/fan-3.png',
-    'index/title.png',
-    'index/fan-4.png',
-    'index/pet-icon.png',
-    'index/fan-2.png',
-    'index/fan-1.png',
-    'index/windows.png',
-    'index/bottom-bg.png',
+
     'index/bg.jpg',
 
-    'prize/tips.png',
-    'prize/cls-btn.png',
-    'prize/copy-btn.png',
-    'prize/draw-text.png',
-    'prize/light.png',
-    'prize/draw-box.png',
-    'prize/myPrize-box.png',
-    'prize/no-prize.png',
-    'prize/star.png',
-
-    'qa/correct.png',
-    'qa/gold-icon.png',
-    'qa/incorrect.png',
-    'qa/gold-icon-2.png',
-    'qa/next-btn.png',
-    'qa/create-btn.png',
-    'qa/lantern-icon.png',
-    'qa/question-box.png',
-    'qa/bottom-bg.png',
-    'qa/bg.jpg',
-
-    'result/tips.png',
-    'result/product-3.png',
-    'result/share-tips.svg',
-    'result/text.png',
-    'result/larnten-box-1.png',
-    'result/larnten-box-2.png',
-    'result/larnten-box-3.png',
-    'result/poster-1.jpg',
-    'result/poster-2.jpg',
-    'result/poster-3.jpg',
-    'result/preveiw-1.png',
-    'result/preveiw-2.png',
-    'result/preveiw-3.png',
-    'result/product-1.png',
-    'result/product-2.png',
-    'result/blessing-text-1-1.png',
-    'result/blessing-text-1-2.png',
-    'result/blessing-text-2-1.png',
-    'result/blessing-text-2-2.png',
-    'result/blessing-text-3-1.png',
-    'result/blessing-text-3-2.png',
-    'result/cls-btn.png',
-    'result/create-btn.png',
-    'result/go-draw-btn.png',
-    'result/go-share-btn.png',
-    'result/larnten-1.png',
-    'result/larnten-2.png',
-    'result/larnten-3.png',
-    'result/bg.jpg',
-    'rule/arrow.png',
-    'rule/cls-btn.png',
-    'rule/icon.png',
-    'rule/rule-box.png',
 ]
 
 // 处理为vite引入图片格式

src/data/index.js

@@ -2,72 +2,70 @@ export const data = [
     {
         id: 1,
         question: [
-            '兄弟好多个，个个都爱赢',
-            '目标很合适，止盈有方法',
+            '激情夏日温度攀升，理财投资热情高涨。当理财市场有波动、收益上涨，别人劝你搏一搏时，正确的做法是:',
         ],
         answer: [
             {
                 aid: 'A',
                 text: [
-                    '灵活策略目标盈',
+                    '当然all in，我就是热点中心',
                 ],
-                result:'correct',
+                result:'incorrect',
             },
             {
                 aid: 'B',
                 text: [
-                    '灵活策略目标强',
+                    '鸡蛋不放在一个篮子里，样样都来点儿',
                 ],
-                result:'incorrect',
+                result:'correct',
             },
         ],
+        analysis: ['解析：选择B。虽然市场热点可能带来诱人的收益，但理财的基本原则是风险管理。通过将投资分散在不同的理财产品和市场，可以降低单一投资的风险，争取资产增长的机会。']
     },
     {
         id: 2,
         question: [
-            '固收旗舰团，兄弟有志气',
-            '三个金牛奖，开启财富门',
+            '2、夏日闲钱早规划，get生活小确幸。长期来看，选择哪类型理财，可以较稳健地进行闲钱进阶？',
         ],
         answer: [
             {
                 aid: 'A',
                 text: [
-                    '启航',
+                    '较低风险的现金类产品',
                 ],
-                result:'correct',
+                result:'incorrect',
             },
             {
                 aid: 'B',
                 text: [
-                    '远航',
+                    '策略稳健的固收类理财产品',
                 ],
-                result:'incorrect',
+                result:'correct',
             },
         ],
-        analysis: ['（注：截止2024年2月19日，启航','系列历史到期正收益概率100%）']
+        analysis: ['解析：选择B。现金类产品具有高流动性的特征，更适合日常流动资金。但在长期限选择中，固收理财拥有较大的投资范围和空间，运用策略提供稳健体验，有效平衡风险，力争增厚收益机会，闲钱再进阶。因此不同的资金用途记得匹配不同产品噢。']
     },
     {
         id: 3,
         question: [
-            '兄弟好多个，口碑都很好',
-            '考试常满分，稳重不轻浮',
+            '3、夏天的快乐是多巴胺旅行给的！想要一场说走就走的快乐，平时的旅行备用金该如何准备才好呢？',
         ],
         answer: [
             {
                 aid: 'A',
                 text: [
-                    '稳健精选（封闭型）',
+                    '购买最短持有期理财产品，享灵活与收益空间',
                 ],
                 result:'correct',
             },
             {
                 aid: 'B',
                 text: [
-                    '稳妥精选',
+                    '船到桥头自然直',
                 ],
                 result:'incorrect',
             },
         ],
-        analysis: ['（注：截止2024年2月19日，稳健精选系列（封闭型）','历史到期业绩基准达标率100%）']
+        analysis: ['解析：选择A。最短持有期理财产品拥有较为灵活的申赎机制，在持有时间超过最短持有的时间要求后，随时可发起赎回，闲置时力争收益机会，用钱时满足你的流动性需求。']
     },
 ]

src/page/Home/App.vue

@@ -33,6 +33,15 @@ import { useMainStore } from "@/store";
 const userStore = useMainStore();
 
 const showLoad = ref(false);
+const showIndex = ref(false);
+const showQuestion = ref(false);
+const showMyPrize = ref(false);
+const showDraw = ref(false);
+const showRule = ref(false);
+const showResult = ref(false);
+
+
+
 const loadFn = (item) => {
   if (item.action == "hide") {
     showLoad.value = false;
@@ -40,7 +49,6 @@ const loadFn = (item) => {
   }
 };
 
-const showIndex = ref(false);
 const indexFn = (item) => {
   if (item.action == "hide") {
     showIndex.value = false;
@@ -57,7 +65,6 @@ const indexFn = (item) => {
   }
 };
 
-const showQuestion = ref(false);
 const questionFn = (item) => {
   if (item.action == "hide") {
     showQuestion.value = false;
@@ -69,21 +76,18 @@ const questionFn = (item) => {
   }
 };
 
-const showMyPrize = ref(false);
 const myPrizeFn = (item) => {
   if (item.action == "hide") {
     showMyPrize.value = false;
   }
 };
 
-const showDraw = ref(false);
 const drawFn = (item) => {
   if (item.action == "hide") {
     showDraw.value = false;
   }
 };
 
-const showResult = ref(false);
 const resultFn = (item) => {
   if (item.action == "hide") {
     showResult.value = false;
@@ -93,7 +97,6 @@ const resultFn = (item) => {
   }
 };
 
-const showRule = ref(false);
 const ruleFn = (item) => {
   if (item.action == "hide") {
     showRule.value = false;
@@ -223,7 +226,7 @@ const playMusic = () => {
 <style lang="scss" >
 #app {
   overflow: hidden;
-  background: linear-gradient(135deg, #a11b15, #f80c00);
+  background: linear-gradient(135deg, #90dcff, #51b7ff);
 }
 
 #__vconsole {

src/page/Home/main.js

@@ -19,8 +19,8 @@ app.config.globalProperties.imgUrl = (url) => {
 
 // 微信分享配置
 wxShare({
-    title: '欢乐猜灯谜，喜庆闹元宵',
-    desc: '猜灯谜、赏花灯，金龙贺岁过“龘”年',
+    title: '好理在手 邂逅清凉一夏',
+    desc: '答题闯关 “理”享不停',
 })
 
 // 测试环境开vconsole

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: '',