修改反馈

src/components/Draw.vue

@@ -85,6 +85,20 @@ const drawFn = (event) => {
             }, 1000);
           }
         }
+      }).catch(error =>{
+        console.log('eroor', error);
+            hasPrize.value = false; // true 中奖 || false 未中奖
+            userStore.updateDraw();
+            setTimeout(() => {
+              Toast.clear();
+              showResult.value = true;
+              gsap.from(".result-container", {
+                duration: 0.5,
+                scale: 0.7,
+                autoAlpha: 0,
+              });
+              gsap.killTweensOf(".draw-light,.draw");
+            }, 1000);
       })
     } else {
       Toast('今日抽奖次数已用完！')
@@ -150,9 +164,15 @@ onMounted(() => {
       <div class="draw-has" v-show="hasPrize">
         <div class="money">¥{{ money }}元</div>
         <div class="code-box">
-          <div class="code">{{ code }}</div>
+          <div class="code">兑奖码：{{ code }}</div>
           <div class="copy-btn" @click="copyFn($event)"></div>
         </div>
+        <div class="code-tips">
+          <div>兑奖流程：前往微信搜索【平安理财服务号】</div>
+          <div>公众号发送“清凉一夏”获取兑换链接，</div>
+          <div>输入兑换码兑换奖品。</div>
+          <div class="code-tips-text">（兑换码可在主页面“奖品”再次查看并复制）</div>
+        </div>
         <div class="cls-btn" @click="hide($event)"></div>
       </div>
       <!-- 没有奖品 -->
@@ -215,7 +235,8 @@ onMounted(() => {
     position: relative;
     @include box(665px, 731px);
     @include bg_pos("prize/myPrize-box.png");
-
+    position: relative;
+    left: 30px;
     .money {
       @include pos(370px, 81px, 139px, 239px);
       display: flex;
@@ -228,7 +249,7 @@ onMounted(() => {
     }
 
     .code-box {
-      @include pos(312px, 52px, 197px, 508px);
+      @include pos(390px, 52px, 100px, 508px);
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -242,12 +263,27 @@ onMounted(() => {
 
       .copy-btn {
         @include box(77px, 39px);
-        @include bg_pos("prize/copy-btn.png");
+        @include bg_pos("prize/copy-btn2.png");
+      }
+    }
+
+    .code-tips{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      @include pos(410px, 120px, 100px, 560px);
+      // background: rgba($color: #000000, $alpha: .7);
+      font-size: 20px;
+        font-weight: 700;
+        color: #fff6cc;
+      .code-tips-text{
+        font-size: 17px;
+        text-align: center;
       }
     }
 
     .cls-btn {
-      @include pos(82px, 82px, 517px, 114px);
+      @include pos(43px, 43px, 517px, 114px);
       @include bg_pos("prize/cls-btn.png");
     }
   }

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-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-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  });
+  gsap.from(".index-sub-title", { duration: 1, x: 20, autoAlpha: 0  });
   gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
   gsap.from(".index-prize-btn", {
     duration: 1,
@@ -64,12 +57,13 @@ onMounted(() => {
     autoAlpha: 0,
     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-start-btn',{duration:1,scale:'0.9',repeat:-1,yoyo:true,ease:'bounce.in'})
+      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, 1230px);
+      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,
@@ -68,7 +66,9 @@ onMounted(() => {
     <div class="load-container">
       <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,28 @@
 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 hasPrize = ref(userStore.hasPrize);
+
 
 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, () => {
@@ -47,15 +48,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="MyPrizePage">
+  <div class="MyPrizePage" @touchmove.prevent>
     <div class="myPrize-container">
-      <div class="myPrize-money">¥{{ money }}元</div>
+      <div v-if="hasPrize" 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="code">兑换码：{{ code }}</div>
           <div class="myPrize-copy-btn" @click="copyFn($event)"></div>
         </div>
-      <div class="myPrize-cls-btn" @click="hide($event)"></div>
+        <div class="myPrize-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“清凉一夏”获取兑奖链接，输入兑换码兑换奖品。</div>
       </div>
+      <div v-else class="myPrize-no-prize">
+        暂无中奖记录
+      </div>
+    </div>
+    <div class="myPrize-cls-btn" @click="hide($event)"></div>
   </div>
 </template>  
 
@@ -67,43 +75,76 @@ 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-has-prize {
+      @include pos(683px, 485px, 0px, 130px);
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-around;
+      align-items: center;
+      color: #0070d9;
+
+      .myPrize-icon {
+        @include box(204px, 214px);
+        @include bg_pos("prize/lucky-bag.png");
+        margin: 20px auto;
+      }
 
       .myPrize-money {
-      @include pos(370px, 81px, 139px, 239px);
-      display: flex;
-      justify-content: center;
         align-items: center;        
-      color: #e95b46;
         font-weight: 700;
-      font-size: 58px;
-      letter-spacing: 4px;
+        font-size: 28px;
+        letter-spacing: 2px;
       }
 
       .myPrize-code-box {
-      @include pos(312px, 52px, 197px, 508px);
         display: flex;
         flex-direction: row;
         align-items: center;
+        width: 70%;
 
         .code {
-        font-size: 25px;
+          font-size: 20px;
           font-weight: 700;
           margin-right: 10px;
-        color: #fff6cc;
+          color: #0070d9;
         }
 
         .myPrize-copy-btn {
-        @include box(77px, 39px);
+          @include box(52px, 25px);
           @include bg_pos("prize/copy-btn.png");
         }
       }
 
-    .myPrize-cls-btn {
-      @include pos(82px, 82px, 517px, 114px);
-      @include bg_pos("prize/cls-btn.png");
+      .myPrize-tips{
+        width: 70%;
+        font-size: 20px;
+        line-height: 27px;
+        // padding: 0px 100px;
+
       }
     }
+
+    .myPrize-no-prize{
+      @include pos(683px, 485px, 0px, 130px);
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-around;
+      align-items: center;
+      color: #6b6b6b;
+      font-size: 50px;
+      line-height: 400px;
+      pointer-events: none;
+    }
+
+    
+  }
+  .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);
+  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="question-tree"></div>
+        <div class="question-con">
  <!-- 问题序号 -->
-        <div class="qa-number">{{ questionList[currentId].id }}</div>
+ <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">
+          <div
+            class="question-text"
+            v-for="item in questionList[currentId].question"
+            :key="item"
+          >
             {{ item }}
           </div>
-            <div class="question-tips">打一系列产品</div>
+        </div>
+        </div>
+       
       </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"
+          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>
           <div class="option-tips">
             <div :class="item.result"></div>
           </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="analysis" >
-            <div v-for="li in questionList[currentId].analysis" :key="li">{{li}}</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>
-      </div>
-      <div class="question-lantern-icon"></div>
-      <div class="question-gold-icon-1"></div>
-      <div class="question-gold-icon-2"></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(49, 116, 246), rgb(83, 131, 227))"
+    />
   </div>
 </template>
 
@@ -194,248 +200,185 @@ 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;
-      @include box(750px, 393px);
-      position: absolute;
-      left: 0px;
-      bottom: 0px;
-      @include bg_pos("qa/bottom-bg.png");
   }
 
-    .bottom-fan-1 {
-      @include pos(370px, 334px, 545px, 1022px);
-      @include bg_pos('index/fan-3.png');
-    }
-
-    .bottom-fan-2 {
-      @include pos(350px, 205px, 494px, 1128px);
-      @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;
+
+      .question-tree{
+        @include pos(277px, 232px,-100px,-141px);
+        @include bg_pos("qa/tree.png");
       }
 
-    .container-fan-1 {
-      pointer-events: none;
-      @include pos(235px, 574px, 0px, 60px);
-      @include bg_pos("index/fan-1.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);
+          font-family: "HarmonyOS_Sans_SC_Regular";
+          font-size: 30px;
+          letter-spacing: 1.5px;
+          color: #065ac6;
           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);
+          padding: 40px;
+          text-align: justify;
+          line-height: 55px;
+        }
+      }
+    }
     }
 
-          .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 {
+      @include box(750px, 205px);
       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;
-            }
-
-          }
-
-
+      color: #065ac6;
+      font-size: 26px;
+      line-height: 80px;
+      margin-top: 40px;
+      padding: 0 50px;
+      font-family: "HarmonyOS_Sans_SC_Regular";
 
       .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;
+        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;
 
-            .click-area {
-              @include pos(476px, 92px, 0px, 0px);
-              border-radius: 47.5px;
+        .bubble-1 {
+          @include pos(55px, 5px, 88px, 7px);
+          @include bg_pos("qa/bubble-1.png");
         }
 
+        .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(60px, 60px);
+        @include box(40px, 40px);
         visibility: hidden;
 
         .correct {
-                @include box(100%, 100%);
+          @include box(74px, 74px);
           @include bg_pos("qa/correct.png");
+          position: absolute;
+          right: -20px;
+          top: 0px;
         }
 
         .incorrect {
-                @include box(100%, 100%);
+          @include box(74px, 74px);
           @include bg_pos("qa/incorrect.png");
+          position: absolute;
+          right: -20px;
+          top: 0px;
         }
       }
-
-
-
-            .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;
-          text-align: center;
-          // padding: 20px;
-          height: 100px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex-direction: column;
+      font-family: "HarmonyOS_Sans_SC_Regular";
+      font-size: 25px;
+      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");
+      }
     }
 
-        .next-btn{
-          @include box(234px,65px);
+    .next-btn {
+      @include box(256px, 70px);
       @include bg_pos("qa/next-btn.png");
-          display: none;
-
+      // display: none;
+      visibility: hidden;
     }
-        .create-btn{
-          @include box(234px,65px);
+    .create-btn {
+      @include box(256px, 70px);
       @include bg_pos("qa/create-btn.png");
-          display: none;
-        
+      // display: none;
+      visibility: hidden;
     }
-
-      }
-    }
-
-    .question-gold-icon-1 {
-      pointer-events: none;
-      @include pos(135px, 128px, 604px, 773px);
-      @include bg_pos("qa/gold-icon.png");
-    }
-
-    .question-gold-icon-2 {
-      pointer-events: none;
-      @include pos(276px, 241px, -70px, 1089px);
-      @include bg_pos("qa/gold-icon-2.png");
-    }
-
   }
 }
 </style>

src/components/Result.vue

@@ -10,19 +10,20 @@ 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,
-])
+]);
 
 // 生成二维码逻辑
 const eqcodePic = ref();
 onMounted(() => {
-    console.log('posterId:',posterId.value);
+  console.log("posterId:", posterId.value);
   let eqCodeUrl = import.meta.env.VITE_URL;
   QRCode.toDataURL(eqCodeUrl)
     .then((url) => {
@@ -38,53 +39,25 @@ onMounted(() => {
     scale: 1.2,
     autoAlpha: 0,
   });
-
-    gsap.from(".result-larnten-box", {
+  gsap.from(".result-title", {
     duration: 0.7,
-        scale: 1.4,
+    y: 20,
     autoAlpha: 0,
+    delay:0.3,
   });
-    gsap.from(".result-larnten", {
+  gsap.from(".r-text", {
     duration: 0.7,
-        scale: 0.7,
+    scale: .5,
     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
+    delay:0.5,
   });
   gsap.from(".create-poster", {
     duration: 0.7,
-        y: -30,
+    y: 20,
     autoAlpha: 0,
-        delay:1.4,
+    delay:1,
     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.to('.create-poster',{duration:1,scale:'0.9',repeat:-1,yoyo:true,ease:'bounce.in'})
 
     }
   });
@@ -92,7 +65,7 @@ onMounted(() => {
 
 // 生成海报逻辑
 const createPoster = (event) => {
-    let e = event.target;
+  let e = event.target.parentElement;
   debounceTap(e, () => {
     // 海报生成
     posterCreate(
@@ -102,26 +75,32 @@ const createPoster = (event) => {
         // 背景
         {
           name: "bg",
-                    src: posterImgList[posterId.value-1],
+          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 },
+          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})
-        
   });
 };
 
 // 去抽奖
 const goDraw = (event) => {
-    let e = event.target;
+  let e = event.target.parentElement;
+  console.log('e',e);
   debounceTap(e, () => {
     if (userStore.hasDraw) {
       emit("ResultPage", { action: "showDraw" });
@@ -141,7 +120,7 @@ const hidePop = (event) => {
 
 // 展示分享
 const goShare = (event) => {
-    let e = event.target;
+  let e = event.target.parentElement;
   debounceTap(e, () => {
     gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
   });
@@ -155,19 +134,16 @@ const hideShare = () => {
 
 <template>
   <div class="ResultPage" @touchmove.prevent>
-        <div class="result-bg"></div>
+    <div :class="'result-bg-' + posterId" 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="result-title"></div>
+      <!-- 文案 -->
+      <div :class="'r-text-' + posterId" class="r-text"></div>
       <!-- 生成海报按钮 -->
-            <div class="create-poster" @click="createPoster($event)"></div>
+      <div class="create-poster" >
+        <div class="r-click-area" @click="createPoster($event)"></div>
+      </div>
     </div>
   </div>
   <!-- 海报弹窗 -->
@@ -176,14 +152,18 @@ const hideShare = () => {
       <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 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 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>
   <!-- 分享提示 -->
@@ -199,9 +179,21 @@ const hideShare = () => {
   @include fixed();
   background-color: azure;
 
-    .result-bg {
+  .result-bg-1 {
     @include pos(750px, 1624px, 0px, 50%);
-        @include bg_pos("result/bg.jpg");
+    @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;
   }
@@ -210,85 +202,36 @@ const hideShare = () => {
     @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");
+    .result-title {
+      @include pos(537px, 116px, 118px, 258px);
+      @include bg_pos("result/title.png");
+      pointer-events: none;
     }
 
-        .larnten-1{
-            @include pos(397px, 787px, 315px, 297px);
-            @include bg_pos("result/larnten-1.png");
+    .r-text {
+      pointer-events: none;
     }
 
-        .larnten-2{
-            @include pos(444px, 771px, 306px, 302px);
-            @include bg_pos("result/larnten-2.png");
+    .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");
     }
 
-        .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);
+    .create-poster {
+      @include pos(337px, 151px, 206px, 1253px);
       @include bg_pos("result/create-btn.png");
+      .r-click-area {
+      @include pos(256px, 69px, 35px, 14px);
+    }
     }
-
   }
 }
 
@@ -304,7 +247,7 @@ const hideShare = () => {
     justify-content: flex-end;
 
     .cls-btn {
-            @include box(49px, 49px);
+      @include box(43px, 43px);
       @include bg_pos("result/cls-btn.png");
       margin-right: -20px;
     }
@@ -326,36 +269,37 @@ const hideShare = () => {
     .poster {
       @include box(100%, 100%);
       overflow: hidden;
-            #posterSrc{
-                @include box(100%, 100%);
-                opacity: 0;
+      display: flex;
+      justify-content: center;
+      #posterSrc {
+        // @include box(100%, 100%);
+        width: 80%;
+        border: 1px solid #fff;
+        border-radius: 20px;
+        // 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);
+    @include box(650px, 76px);
     display: flex;
-        justify-content: space-between;
+    justify-content: space-around;
     margin-top: 20px;
+    .r-click-area {
+      @include pos(256px, 69px, 35px, 14px);
+    }
 
     .go-draw {
-            @include box(226px, 76px);
+      @include box(337px, 151px);
       @include bg_pos("result/go-draw-btn.png");
+      position: relative;
     }
 
     .go-share {
-            @include box(226px, 76px);
+      @include box(337px, 151px);
       @include bg_pos("result/go-share-btn.png");
+      position: relative;
     }
   }
 }