整合

src/components/Index.vue

@@ -119,7 +119,7 @@ const showVC = () => {
 
 <style lang="scss" scoped>
 .IndexPage {
-  @include pos(100%, 100vh, 0px, 0px);
+  @include pos(100%, 1624px, 0px, 0px);
   overflow: hidden;
   background: linear-gradient(135deg, #d6d1ca, #e5dccf);
 
@@ -130,8 +130,8 @@ const showVC = () => {
   }
 
   .index-container {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
+    @include pos(750px, 1624px, 0px, 0px);
+    // transform: translateY(-50%);
 
 
     .index-logo {

src/components/Question.vue

@@ -5,6 +5,7 @@ import { data } from "@/data";
 import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
 import { useMainStore } from "@/store";
 import { subAnswer } from "@/api";
+import { computed } from "vue";
 
 // 页面配置初始化
 const emit = defineEmits(["hide", "showResult", "QuestionPage"]);
@@ -29,14 +30,14 @@ const checkedOption = ref('')
 // 答题事件
 const answerFn = (item, event) => {
   let e = event.target.parentElement;
-  console.log('选项', item);
-  // console.log('当前题目：', currentId.value + 1);
 
   debounceTap(e, () => {
     gsap.set('.answer-box', { pointerEvents: 'none' })
     isChecked.value = true
-    checkedOption.value = item.aid
-    if (item.result === 'correct') {
+    checkedOption.value = item
+    console.log('checkedOption', checkedOption.value);
+
+    if (item.result) {
       gsap.set('.create-btn', { display: 'block' })
     } else {
       gsap.set('.return-btn', { display: 'block' })
@@ -111,13 +112,25 @@ onMounted(() => {
   gsap.from('.question-box', { duration: 0.5, scale: 0.4, autoAlpha: 0, })
 
 });
+
+
+
+const getClass = (item) => {
+  if (isChecked.value) {
+    if (checkedOption.value.aid == item.aid) {
+      return item.result ? 'correct' : 'incorrect'
+    }
+  }
+}
+
+
+
 </script>
 
 <template>
   <div class="QuestionPage" @touchmove.prevent>
     <div class="question-bg"></div>
     <div class="question-container">
-
       <div class="question-box">
         <!-- 问题序号 -->
         <div class="qa-question-box">
@@ -129,23 +142,24 @@ onMounted(() => {
           </div>
           <!-- 选项 -->
           <div class="answer-box">
-            <div class="answer"
-              :class="[(isChecked) ? item.result + '-bg' : '', checkedOption == item.aid ? 'checked' : 'no-checked']"
-              v-for="item in questionList[currentId].answer" :key="item.aid">
-              <div class="answer-text-box">
-                <div class="answer-text">
-                  {{ item.aid }}.{{ item.text }}
-                </div>
+            <div class="answer" :class="getClass(item)" v-for="item in questionList[currentId].answer" :key="item.aid">
+              <div class="answer-text">
+                {{ item.aid }}.{{ item.text }}
+              </div>
+              <div class="result-icon" v-if="isChecked && (item.aid == checkedOption.aid)">
+                <div :class="item.result ? 'icon-correct' : 'icon-incorrect'"></div>
               </div>
               <!-- 可点击区域 -->
               <div class="click-area" @click="answerFn(item, $event)"></div>
             </div>
           </div>
-          <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">{{ t }}</div>
-
-          <div class="return-btn" @click="nextQuestion($event)"></div>
-          <div class="create-btn" @click="viewResult($event)"></div>
+          <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
+            {{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
+          </div>
         </div>
+        <div class="return-btn" @click="nextQuestion($event)"></div>
+        <div class="create-btn" @click="viewResult($event)"></div>
+        <div class="qa-megaphone"></div>
       </div>
       <div class="question-gold-icon-1"></div>
     </div>
@@ -154,56 +168,43 @@ onMounted(() => {
 
 <style lang='scss' scope>
 .QuestionPage {
-  @include pos(100%, 100%, 0px, 0px);
+  @include pos(100%, 1624px, 0px, 0px);
   overflow: hidden;
 
   .question-bg {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
-    background-color: rgba($color: #000000, $alpha: 0.3);
+    @include pos(750px, 1624px, 0px, 0px);
+    // transform: translateY(-50%);
+    @include bg_pos("index/bg.jpg");
   }
 
 
   .question-container {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
+    @include pos(750px, 1624px, 0px, 0px);
     @include flexCen();
-
-    .question-lantern-icon {
-      pointer-events: none;
-      @include pos(349px, 443px, 489px, 49px);
-      @include bg_pos('qa/lantern-icon.png');
-    }
-
+    background-color: rgba($color: #000000, $alpha: 0.3);
 
     .question-box {
       @include pos(721px, 857px, 20px, 340px);
       @include bg_pos("qa/paper.png");
 
-
       .qa-question-box {
         @include pos(563px, 660px, 74px, 126px);
         display: flex;
         flex-direction: column;
-        // justify-content: space-around;
-        justify-content: flex-start;
+        justify-content: space-around;
+        // justify-content: flex-start;
         align-items: center;
 
         // 问题样式
         .question {
 
           .question-text {
-            width: 100%;
             font-family: 'HarmonyOS_Sans_SC_Regular';
             font-size: 34px;
             color: #9e4b00;
-
-            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);
+            line-height: 50px;
           }
 
-
         }
 
         // 选项样式
@@ -214,89 +215,59 @@ onMounted(() => {
           justify-content: space-around;
           height: 200px;
 
-          // 选中状态
-          .checked {
-            border: 1px solid rgb(255, 238, 186) !important;
-            background-color: #d42122;
-
-            .answer-option {
-              color: #96100f;
-            }
-
-            .answer-text-box {
-              color: #fff2b9 !important;
-            }
-
-          }
-
-          .no-checked {
-            background-color: #fff2b9;
-            .answer-option {
-              color: #9e4b00;
-            }
-
-            .answer-text-box {
-              color: #9e4b00 !important;
-            }
-
-          }
 
+          // 选项通用样式
           .answer {
             @include box(350px, 65px);
             position: relative;
             border-radius: 32.5px;
             display: flex;
-            justify-content: space-around;
+            justify-content: center;
+            align-items: center;
             border: 1px solid #fff;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+            color: #9e4b00;
+            background-color: #fff2b9;
+            font-weight: 700;
+
+            .answer-text {
+              font-size: 30px;
+              @include flexCen()
+            }
 
             .click-area {
               @include pos(350px, 65px, 0px, 0px);
               border-radius: 32.5px;
             }
 
+            .result-icon {
 
-            .option-tips {
-              @include box(60px, 60px);
+              @include box(49px, 45px);
+              margin-left: 20px;
 
-              .correct {
+
+              .icon-correct {
                 @include box(100%, 100%);
                 @include bg_pos("qa/correct.png");
               }
 
-              .incorrect {
-                @include box(100%, 100%);
+              .icon-incorrect {
+                @include box(49px, 45px);
                 @include bg_pos("qa/incorrect.png");
               }
             }
-
-
-
-            .answer-text-box {
-              @include box(270px, 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;
-              }
-
-            }
           }
 
+          .correct {
+            color: #d42122;
+          }
 
+          .incorrect {
+            color: #fff2b9;
+            background-color: #d42122;
 
-
-
+          }
         }
 
-
         .question-tips {
           font-size: 25px;
           width: 100%;
@@ -307,25 +278,26 @@ onMounted(() => {
         }
 
 
-        .return-btn {
-          @include box(246px, 73px);
-          @include bg_pos("rule/cls-btn.png");
-          display: none;
-
-        }
-
-        .create-btn {
-          @include box(246px, 73px);
-          @include bg_pos("qa/create-btn.png");
-          display: none;
-        }
-
       }
     }
 
+    .return-btn {
+      @include pos(363px, 113px, 179px, 887px);
+      @include bg_pos("qa/cls-btn.png");
+      display: none;
+    }
 
+    .create-btn {
+      @include pos(363px, 113px, 179px, 887px);
+      @include bg_pos("qa/create-btn.png");
+      display: none;
+    }
 
-
+    .qa-megaphone {
+      @include pos(171px, 208px, 562px, 512px);
+      @include bg_pos("qa/megaphone.png");
+      pointer-events: none;
+    }
   }
 }
 </style>

src/components/QuestionList.vue

@@ -8,8 +8,7 @@
                     <swiper-slide v-for="item in 3"
                         :style="{ width: '100%', display: 'flex', justifyContent: 'center', }">
                         <div class="card-slide" :class="'card-slide-' + item">
-                            <img class="card-img" :class="'card-img-' + item" :src="getLarntenImg(item)" alt=""
-                                srcset="">
+                            <img class="card-img" :class="'card-img-' + item" :src="getCardImg(item)" alt="" srcset="">
                         </div>
                     </swiper-slide>
                 </swiper>
@@ -33,11 +32,11 @@ import gsap from "gsap"
 
 const emit = defineEmits(['QuestionList', "showResult"]);
 
-const showQuestion = ref(true)
+const showQuestion = ref(false)
 const questionId = ref(1)
 
 // 获取灯笼图片
-function getLarntenImg(item) {
+function getCardImg(item) {
     return new URL(`../assets/images/question-list/card-${item}.png`, import.meta.url).href
 }
 
@@ -58,17 +57,36 @@ const onShowQuestion = (event) => {
 
 
 onMounted(() => {
-    showPoster()
+    entryAnimation()
 })
 
 
-const showPoster = () => {
-    gsap.to(".QuestionList", {
-        duration: 0.3,
-        autoAlpha: 1,
+const entryAnimation = () => {
+    gsap.from(".QuestionList", {
+        duration: 0.5,
+        autoAlpha: 0,
+    });
+    gsap.from(".ql-swiper-box", {
+        duration: 0.75,
+        autoAlpha: 0,
+        y: -50,
+        delay: 0.2,
+    });
+    gsap.from(".ql-icon", {
+        duration: 0.75,
+        autoAlpha: 0,
+        x: 50,
+        delay: 0.2,
+    });
+    gsap.from(".ql-start-btn", {
+        duration: 0.75,
+        autoAlpha: 0,
+        y: 50,
+        delay: 0.5,
+        onComplete: () => {
+            gsap.fromTo('.ql-icon', { x: 0 }, { duration: 1, scale: 1.1, x: 25, repeat: -1, yoyo: true, ease: 'bount.in' })
+        }
     });
-    // gsap.fromTo('.larnten-slide', { rotation: 0 }, { duration: 2, rotation: 5, transformOrigin: 'top center', repeat: -1, yoyo: true, ease: 'none' })
-
 
 
 
@@ -87,14 +105,14 @@ register();
 
 <style lang='scss' scoped>
 .QuestionList {
-    @include pos(100%, 100vh, 0px, 0px);
+    @include pos(100%, 1624px, 0px, 0px);
     overflow: hidden;
     background: linear-gradient(135deg, #a11b15, #f80c00);
-    visibility: hidden;
+    // visibility: hidden;
 
     .question-list-bg {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
+        @include pos(750px, 1624px, 0px, 0px);
+        // transform: translateY(-50%);
         @include bg_pos("index/bg.jpg");
     }
 

src/components/Result.vue

@@ -16,17 +16,11 @@ console.log('海报id', posterId.value);
 
 
 const posterImgList = reactive([
-    new URL(`../assets/images/poster/poster-1.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-2.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-3.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-4.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-5.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-6.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-7.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-8.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-9.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-10.jpg`, import.meta.url).href,
-    new URL(`../assets/images/poster/poster-11.jpg`, import.meta.url).href,
+    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,
+
 ])
 
 // 生成二维码逻辑
@@ -56,10 +50,10 @@ const executeTasks = async () => {
     if (posterImgList[posterId.value - 1] && eqcodePic.value) {
 
         posterCreate(
-            { width: 750, height: 1334 },
+            { width: 750, height: 2106 },
             [
-                { 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: 194, x: 514, y: 1098 } },
+                { 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 } },
             ]
         );
     } else {
@@ -219,21 +213,25 @@ const posterCreate = (option, imageArr) => {
 </script>
 
 <template>
-    <!-- 海报弹窗 -->
     <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 class="poster-bg"></div>
+        <div class="poster-container">
+            <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 class="poster-cls-btn"></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="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">
@@ -244,182 +242,99 @@ const posterCreate = (option, imageArr) => {
 
 
 <style lang="scss" scoped>
-.ResultPage {
-    @include fixed();
-    visibility: hidden;
-
-    .result-bg {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-        background-color: rgba($color: #000000, $alpha: 0.6);
-    }
-
-    .result-container {
-        @include pos(750px, 1624px, 0px, 50%);
-        transform: translateY(-50%);
-
-
-
-        .result-product {
-            @include pos(619px, 138px, 65px, 1015px);
-        }
-
-        .product-1 {
-            @include bg_pos("poster/card-1.png");
-        }
-
-        .product-2 {
-            @include bg_pos("poster/card-2.png");
-        }
-
-        .product-3 {
-            @include bg_pos("poster/card-3.png");
-        }
-
-        .product-4 {
-            @include bg_pos("poster/card-4.png");
-        }
-
-        .product-5 {
-            @include bg_pos("poster/card-5.png");
-        }
-
-        .product-6 {
-            @include bg_pos("poster/card-6.png");
-        }
-
-        .product-7 {
-            @include bg_pos("poster/card-7.png");
-        }
-
-        .product-8 {
-            @include bg_pos("poster/card-8.png");
-        }
-
-        .product-9 {
-            @include bg_pos("poster/card-9.png");
-        }
-
-        .product-10 {
-            @include bg_pos("poster/card-10.png");
-        }
-
-        .product-11 {
-            @include bg_pos("poster/card-11.png");
-        }
-
-
-
-        .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);
+    @include pos(100%, 1624px, 0px, 0px);
+    overflow: hidden;
+    background: linear-gradient(135deg, #d6d1ca, #e5dccf);
     visibility: hidden;
 
-    .cls-btn-box {
-        width: 617px;
-        display: flex;
-        justify-content: flex-end;
-
-        .cls-btn {
-            @include box(49px, 49px);
-            @include bg_pos("question-list/cls-btn.png");
-            margin-right: -20px;
-        }
+    .poster-bg {
+        @include pos(750px, 1624px, 0px, 0px);
+        // transform: translateY(-50%);
+        @include bg_pos("index/bg.jpg");
     }
 
-    .save-tips {
-        font-size: 20px;
-        line-height: 20px;
-        margin-top: 20px;
-        color: #fff;
-        letter-spacing: 2px;
-    }
+    .poster-container {
+        @include pos(750px, 1624px, 0px, 0px);
+        // transform: translateY(-50%);
+        @include flexCen();
+        background-color: rgba($color: #000000, $alpha: 0.3);
 
-    .poster-box {
-        @include box(617px, 881px);
-        margin-top: 20px;
-        overflow: hidden;
+        .cls-btn-box {
+            width: 617px;
+            display: flex;
+            justify-content: flex-end;
 
-        .poster {
-            @include box(100%, 100%);
-            overflow: hidden;
-
-            #posterSrc {
-                @include box(100%, 100%);
-                opacity: 0;
+            .cls-btn {
+                @include box(49px, 49px);
+                @include bg_pos("question-list/cls-btn.png");
+                margin-right: -20px;
             }
         }
 
-        .poster-1 {
-            @include bg_pos("poster/card-1.png");
+        .save-tips {
+            font-size: 20px;
+            line-height: 20px;
+            margin-top: 20px;
+            color: #9e4b00;
+            letter-spacing: 2px;
         }
 
-        .poster-2 {
-            @include bg_pos("poster/card-2.png");
+        .poster-box {
+            @include box(713px, 995px);
+            margin-top: 20px;
+            overflow: hidden;
+            position: relative;
+            
+            .poster-cls-btn{
+                @include pos(53px, 53px,660px,10px);
+                @include bg_pos("result/cls-btn.png");
+            }
+
+            .poster {
+                @include box(100%, 100%);
+                overflow: hidden;
+
+                #posterSrc {
+                    @include box(100%, 100%);
+                    opacity: 0;
+                }
+            }
+
+            .poster-1 {
+                @include bg_pos("result/card-1.png");
+            }
+
+            .poster-2 {
+                @include bg_pos("result/card-1.png");
+            }
+
+            .poster-3 {
+                @include bg_pos("result/card-1.png");
+            }
+
         }
 
-        .poster-3 {
-            @include bg_pos("poster/card-3.png");
-        }
+        .btn-box {
+            @include box(550px, 99px);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 20px;
 
-        .poster-4 {
-            @include bg_pos("poster/card-4.png");
-        }
+            .go-draw {
+                @include box(264px, 99px);
+                @include bg_pos("result/go-draw-btn.png");
+            }
 
-        .poster-5 {
-            @include bg_pos("poster/card-5.png");
-        }
-
-        .poster-6 {
-            @include bg_pos("poster/card-6.png");
-        }
-
-        .poster-7 {
-            @include bg_pos("poster/card-7.png");
-        }
-
-        .poster-8 {
-            @include bg_pos("poster/card-8.png");
-        }
-
-        .poster-9 {
-            @include bg_pos("poster/card-9.png");
-        }
-
-        .poster-10 {
-            @include bg_pos("poster/card-10.png");
-        }
-
-        .poster-11 {
-            @include bg_pos("poster/card-11.png");
+            .go-share {
+                @include box(274px, 95px);
+                @include bg_pos("result/go-share-btn.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 {
@@ -428,14 +343,14 @@ const posterCreate = (option, imageArr) => {
     visibility: hidden;
 
     .tips-pic {
-        @include pos(100px, 100px, 600px, 100px);
+        @include pos(100px, 100px, 600px, 140px);
         @include bg_pos("result/share-tips.svg");
         stroke: #ffffff;
     }
 
     .tips-text {
         font-size: 25px;
-        @include pos(750px, 100px, 0px, 220px);
+        @include pos(750px, 100px, 0px, 260px);
         color: #ffffff;
         text-align: right;
     }

src/data/imgList.js

@@ -1,9 +1,62 @@
-const load = ["load/icon.png", "load/bg.jpg"];
+const load = [
+  "load/icon.png",
+  "load/icon-2.png",
+  "index/bg.jpg",
+  "music-on.png",
+  "share.jpg",
+];
 
 const page = [
+  "index/title.png",
+  "index/time.png",
+  "index/paper.png",
+  "index/text.png",
+  "index/megaphone.png",
+  "index/logo.png",
+  "index/line.png",
+  "index/card-5.png",
+  "index/card-3.png",
+  "index/card-4.png",
+  "index/card-2.png",
   "index/card-1.png",
+  "index/bg.jpg",
+  "index/btn.png",
 
+  "prize/tips.png",
+  "prize/star.png",
+  "prize/draw-text.png",
+  "prize/light.png",
+  "prize/myPrize-box.png",
+  "prize/no-prize.png",
+  "prize/cls-btn.png",
+  "prize/copy-btn.png",
+  "prize/draw-box.png",
 
+  "qa/paper.png",
+  "qa/megaphone.png",
+  "qa/cls-btn.png",
+  "qa/correct.png",
+  "qa/create-btn.png",
+  "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/arrow-l.png",
+
+  "result/share-tips.svg",
+  "result/go-share-btn.png",
+  "result/poster-1.jpg",
+  "result/go-draw-btn.png",
+  "result/cls-btn.png",
+  "result/card-1.png",
+
+  "rule/rule-box.png",
+  "rule/icon.png",
+  "rule/arrow.png",
+  "rule/cls-btn.png",
 ];
 
 // 处理为vite引入图片格式

src/page/Home/App.vue

@@ -1,13 +1,21 @@
 <template>
-  <div class="home" @click.once="playMusic">
-    <Index v-if="showIndex" @IndexPage="indexFn"></Index>
-    <QuestionList v-if="showQuestionList" ref="QuestionListRef" @QuestionList="questionListFn" @showResult="onShowResult"></QuestionList>
-    <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
-    <Result v-if="showResult" @ResultPage="resultFn"></Result>
-    <MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
-    <Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
-    <Rule v-if="showRule" @RulePage="ruleFn"></Rule>
-    <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
+  <div class="home" @click.once="firstClick">
+    <div class="home-container">
+      <Index v-if="showIndex" @IndexPage="indexFn"></Index>
+      <QuestionList v-if="showQuestionList" ref="QuestionListRef" @QuestionList="questionListFn"
+        @showResult="onShowResult"></QuestionList>
+      <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
+      <Result v-if="showResult" @ResultPage="resultFn"></Result>
+      <MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
+      <Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
+      <Rule v-if="showRule" @RulePage="ruleFn"></Rule>
+      <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
+      <!-- 音乐图标 -->
+      <div class="music_icon" @click="musicPlay">
+        <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="musicUrl"
+          loop="loop"></audio>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,18 +30,19 @@ import Draw from "@/components/Draw";
 import Result from "@/components/Result";
 import Rule from "@/components/Rule";
 import {
-  createBGM,
   getQueryString,
   screenOrientation,
-  isAndriod,
   fontAdpat,
 } from "@/plugins";
 import { authorize, getUserInfo } from "@/api";
 import { Toast } from "vant";
 import { useMainStore } from "@/store";
 
+
 const userStore = useMainStore();
 
+const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href
+
 const showLoad = ref(false);
 const loadFn = (item) => {
   if (item.action == "hide") {
@@ -78,8 +87,8 @@ const myPrizeFn = (item) => {
   }
 };
 
-const QuestionListRef=  ref(null)
-const showQuestionList = ref(true);
+const QuestionListRef = ref(null)
+const showQuestionList = ref(false);
 const questionListFn = (item) => {
   if (item.action == "hide") {
     showQuestionList.value = false;
@@ -87,7 +96,8 @@ const questionListFn = (item) => {
 };
 const posterId = ref(1)
 const onShowResult = (item) => {
-  posterId.value = item.pid || 1
+  // posterId.value = item.pid || 1
+  posterId.value = 1
   showResult.value = true;
 }
 
@@ -105,7 +115,7 @@ const resultFn = (item) => {
 
     showResult.value = false;
 
-    console.log('hide',showResult.value);
+    console.log('hide', showResult.value);
 
   }
   if (item.action == "showDraw") {
@@ -123,6 +133,7 @@ const ruleFn = (item) => {
 onMounted(() => {
   fontAdpat(); //字体适配
   screenOrientation(); //横竖屏检测
+  iosMusic() //自动播放音乐
 
   let code = getQueryString("code");
   let url = import.meta.env.VITE_URL;
@@ -134,27 +145,8 @@ onMounted(() => {
         if (res.code == 0) {
           console.log("我的信息：", res.data);
           userStore.updateToken(res.data);
-          createBGM();
           // 开始加载组件
           showLoad.value = true;
-
-          // ios自动播放音乐
-          document.addEventListener("DOMContentLoaded", function () {
-            function audioAutoPlay() {
-              var audio = document.getElementById("musicBtn");
-              audio.play();
-              document.addEventListener(
-                "WeixinJSBridgeReady",
-                function () {
-                  WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
-                    audio.play();
-                  });
-                },
-                false
-              );
-            }
-            audioAutoPlay();
-          });
           return;
         } else {
           authorize({ scopeType: 1, redirectUri: url }).then((res) => {
@@ -230,32 +222,100 @@ onMounted(() => {
     }
   } else {
     showLoad.value = true;
-    createBGM();
+    // createBGM();
   }
 });
 
-const playMusic = () => {
-  var audioEle = document.getElementById("audio");
-  audioEle.play();
+
+
+// ios端音乐自动播放
+const iosMusic = () => {
+  // ios自动播放音乐
+  document.addEventListener("DOMContentLoaded", function () {
+    function audioAutoPlay() {
+      var audio = document.getElementById("bg-music");
+      audio.play();
+      document.addEventListener(
+        "WeixinJSBridgeReady",
+        function () {
+          WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
+            audio.play();
+          });
+        },
+        false
+      );
+    }
+    audioAutoPlay();
+  });
+
+  musicBtnAni.fromTo(
+    ".music_icon",
+    { rotation: "0" },
+    { rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
+  );
+  musicBtnAni.play();
 };
+
+
+// 音乐播放
+const musicBtnAni = gsap.timeline();
+const playStatu = ref(true);
+const musicPlay = () => {
+  let audio = document.getElementById("bg-music");
+  if (playStatu.value == true) {
+    musicBtnAni.pause();
+    audio.pause();
+    playStatu.value = false;
+    console.log("暂停");
+  } else {
+    musicBtnAni.play();
+    audio.play();
+    playStatu.value = true;
+    console.log("播放");
+  }
+};
+
+const firstClick = () => {
+  let audio = document.getElementById("bg-music");
+
+  musicBtnAni.play();
+  audio.play();
+  playStatu.value = true;
+  console.log("播放");
+}
+
 </script>
 
 <style lang="scss">
 #app {
   overflow: hidden;
   background: linear-gradient(135deg, #d6d1ca, #e5dccf);
-
+  font-family: "HarmonyOS_Sans_SC_Regular";
 }
 
 #__vconsole {
   visibility: hidden;
 }
 
-#musicBtn {
-  @include pos(60px, 60px, 50px, 55px);
+
+.music_icon {
+  @include pos(60px, 60px, 50px, 245px);
+  @include bg_pos("music-on.png");
   z-index: 99;
 }
 
+.home {
+  @include pos(100%, 100vh, 0px, 0px);
+  overflow: hidden;
+
+  .home-container {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+  }
+
+}
+
+
 // 音乐-on样式
 .music-on {
   @include bg_pos("music-on.png");
@@ -266,12 +326,6 @@ const playMusic = () => {
   @include bg_pos("music-off.png");
 }
 
-.home {
-  @include box(750px, 100vh);
-  overflow: hidden;
-  margin: 0 auto;
-}
-
 .orientationPop {
   @include fixed();
   @include flexCen();

src/store/index.js

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

vite.config.js

@@ -86,7 +86,7 @@ export default defineConfig(({ command, mode }) => {
             propList: ['*'], // 能转化为vw的属性列表
             viewportUnit: 'vw', // 希望使用的视口单位
             fontViewportUnit: 'vw', // 字体使用的视口单位
-            selectorBlackList: ['home', 'pc-content'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+            selectorBlackList: [ 'pc-content'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
             minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
             mediaQuery: true, // 媒体查询里的单位是否需要转换单位
             replace: true, //  是否直接更换属性值，而不添加备用属性