'更新'

src/components/Draw.vue

@@ -14,10 +14,10 @@ const { toClipboard } = useClipboard()
 
 
 const money = ref("1.88");
-const code = ref("sss");
+const code = ref("PAKJ2025");
 
-const showResult = ref(false);
-const hasPrize = ref(false);
+const showResult = ref(true);
+const hasPrize = ref(true);
 
 const drawFn = (event) => {
   let e = event.target.parentElement;
@@ -148,11 +148,16 @@ onMounted(() => {
     <div v-show="showResult" class="result-container">
       <!-- 有奖品 -->
       <div class="draw-has" v-show="hasPrize">
+        <div class="draw-has-title">恭喜您抽中</div>
         <div class="money">¥{{ money }}元</div>
+        <div class="draw-has-text">奖励抽到手，快乐马上有</div>
         <div class="code-box">
-          <div class="code">{{ code }}</div>
-          <div class="copy-btn" @click="copyFn($event)"></div>
+          <span>兑奖码：</span>
+          <span class="code">{{ code }}</span>
+          <span class="copy-btn" @click="copyFn($event)"></span>
         </div>
+        <div class="exchange-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“五一快乐”获取兑奖链接，输入兑换码兑换奖品</div>
+        <div class="exchnage-tips2">（兑换码可在主页面“我的奖品” 再次查看并复制）</div>
         <div class="cls-btn" @click="hide($event)"></div>
       </div>
       <!-- 没有奖品 -->
@@ -214,30 +219,57 @@ onMounted(() => {
   .draw-has {
     position: relative;
     @include box(665px, 731px);
-    @include bg_pos("prize/myPrize-box.png");
+    @include bg_pos("prize/myPrize-box2.png");
+
+    .draw-has-title {
+      @include pos(390px, 100px, 110px, 140px);
+      font-size: 40px;
+      color: #e95b46;
+      font-weight: 700;
+      letter-spacing: 3px;
+      // background-color: aqua;
+      @include flexCen();
+    }
+
+    .draw-has-text {
+      @include pos(390px, 100px, 110px, 300px);
+      font-size: 30px;
+      color: #e95b46;
+      font-weight: 700;
+      letter-spacing: 0;
+      // background-color: aqua;
+      @include flexCen();
+
+    }
 
     .money {
-      @include pos(370px, 81px, 139px, 239px);
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      @include pos(390px, 130px, 110px, 200px);
+      @include flexCen();
       color: #e95b46;
       font-weight: 700;
       font-size: 58px;
       letter-spacing: 4px;
+      // background-color: rgb(217, 0, 255);
+
     }
 
     .code-box {
-      @include pos(312px, 52px, 197px, 508px);
+      @include pos(390px, 52px, 110px, 508px);
       display: flex;
       flex-direction: row;
       align-items: center;
-
-      .code {
+      justify-content: flex-start;
       font-size: 25px;
       font-weight: 700;
-        margin-right: 10px;
       color: #fff6cc;
+
+      span{
+        height: 77px;
+        line-height: 65px;
+      }
+      .code{
+        margin-right: 10px;
+
       }
 
       .copy-btn {

src/components/QuestionList.vue

@@ -5,7 +5,7 @@
             <div class="ql-logo"></div>
             <div class="ql-swiper-box">
                 <swiper class="card-swiper" :slides-per-view="1" :space-between="30" navigation :loop="true">
-                    <swiper-slide v-for="item in 3"
+                    <swiper-slide v-for="item in 5"
                         :style="{ width: '100%', display: 'flex', justifyContent: 'center', }">
                         <div class="card-slide" :class="'card-slide-' + item">
                             <img class="card-img" :class="'card-img-' + item" :src="getCardImg(item)" alt="" srcset="">

src/components/Result.vue

@@ -17,9 +17,10 @@ console.log('海报id', posterId.value);
 
 const posterImgList = reactive([
     new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/result/poster-1.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,
+    new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
+    new URL(`../assets/images/result/poster-5.jpg`, import.meta.url).href,
 
 ])
 
@@ -53,7 +54,7 @@ const executeTasks = async () => {
             { width: 750, height: 2106 },
             [
                 { name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: 2106, x: 0, y: 0 } },
-                { name: "eqcode", src: eqcodePic.value, pos: { w: 178, h: 178, x: 532, y: 1887 } },
+                { name: "eqcode", src: eqcodePic.value, pos: { w: 178, h: 178, x: 532, y: 1892 } },
             ]
         );
     } else {
@@ -265,11 +266,11 @@ const posterCreate = (option, imageArr) => {
             display: flex;
             justify-content: flex-end;
 
-            .cls-btn {
-                @include box(49px, 49px);
-                @include bg_pos("question-list/cls-btn.png");
-                margin-right: -20px;
-            }
+            // .cls-btn {
+            //     @include box(49px, 49px);
+            //     @include bg_pos("question-list/cls-btn.png");
+            //     margin-right: -20px;
+            // }
         }
 
         .save-tips {
@@ -303,14 +304,23 @@ const posterCreate = (option, imageArr) => {
 
             .poster-1 {
                 @include bg_pos("result/card-1.png");
+                
             }
 
             .poster-2 {
-                @include bg_pos("result/card-1.png");
+                @include bg_pos("result/card-2.png");
             }
 
             .poster-3 {
-                @include bg_pos("result/card-1.png");
+                @include bg_pos("result/card-3.png");
+            }
+
+            .poster-4 {
+                @include bg_pos("result/card-4.png");
+            }
+
+            .poster-5 {
+                @include bg_pos("result/card-5.png");
             }
 
         }

src/data/imgList.js

@@ -40,18 +40,28 @@ const page = [
   "qa/incorrect.png",
 
   "question-list/megaphone.png",
-  "question-list/card-3.png",
   "question-list/btn.png",
   "question-list/card-1.png",
   "question-list/card-2.png",
+  "question-list/card-3.png",
+  "question-list/card-4.png",
+  "question-list/card-5.png",
   "question-list/arrow-l.png",
 
   "result/share-tips.svg",
   "result/go-share-btn.png",
   "result/poster-1.jpg",
+  "result/poster-2.jpg",
+  "result/poster-3.jpg",
+  "result/poster-4.jpg",
+  "result/poster-5.jpg",
   "result/go-draw-btn.png",
   "result/cls-btn.png",
   "result/card-1.png",
+  "result/card-2.png",
+  "result/card-3.png",
+  "result/card-4.png",
+  "result/card-5.png",
 
   "rule/rule-box.png",
   "rule/icon.png",

src/page/Home/App.vue

@@ -102,7 +102,7 @@ const onShowResult = (item) => {
 }
 
 
-const showDraw = ref(false);
+const showDraw = ref(true);
 const drawFn = (item) => {
   if (item.action == "hide") {
     showDraw.value = false;
@@ -133,7 +133,6 @@ const ruleFn = (item) => {
 onMounted(() => {
   fontAdpat(); //字体适配
   screenOrientation(); //横竖屏检测
-  iosMusic() //自动播放音乐
 
   let code = getQueryString("code");
   let url = import.meta.env.VITE_URL;
@@ -147,6 +146,8 @@ onMounted(() => {
           userStore.updateToken(res.data);
           // 开始加载组件
           showLoad.value = true;
+          iosMusic() //自动播放音乐
+          gsap.set('.music_icon', { autoAlpha: 1 })
           return;
         } else {
           authorize({ scopeType: 1, redirectUri: url }).then((res) => {
@@ -222,7 +223,8 @@ onMounted(() => {
     }
   } else {
     showLoad.value = true;
-    // createBGM();
+    iosMusic() //自动播放音乐
+    gsap.set('.music_icon', { autoAlpha: 1 })
   }
 });
 
@@ -302,6 +304,7 @@ const firstClick = () => {
   @include pos(60px, 60px, 50px, 245px);
   @include bg_pos("music-on.png");
   z-index: 99;
+  visibility: hidden;
 }
 
 .home {