完整逻辑

src/components/Question.vue

@@ -38,10 +38,18 @@ const answerFn = (item, event) => {
       answerList.value[has].answer = item.text;
     }
 
-    // 判断是否为最后一题
+    
     gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
-    gsap.set('.question-box', { pointerEvents: 'none' })
+    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' })
+
+    }
+
   })
 
 }
@@ -55,7 +63,9 @@ const nextQuestion = (event) => {
     gsap.set('.option-tips,.analysis', { autoAlpha: 0 })
     currentId.value++
     activeId.value = ''
-    gsap.set('.question-box', { pointerEvents: 'initial' })
+    gsap.set('.answer-box', { pointerEvents: 'initial' })
+    gsap.set('.next-btn', { display: 'none' })
+
   })
 
 }
@@ -161,7 +171,7 @@ onMounted(() => {
           <!-- 解析 -->
           <div class="analysis">{{ questionList[currentId].analysis }}</div>
           <div class="next-btn" @click="nextQuestion($event)"></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>
@@ -247,12 +257,15 @@ onMounted(() => {
         @include pos(570px, 700px, 43px, 194px);
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
+        // justify-content: space-around;
+        justify-content: flex-start;
+        align-items: center;
 
         // 问题样式
         .question {
           display: flex;
           flex-direction: column;
+          margin-bottom: 10px;
 
           .question-text {
             width: 100%;
@@ -374,24 +387,29 @@ onMounted(() => {
 
         // 解析样式
         .analysis {
+          visibility: hidden;
           width: 100%;
           font-family: 'HarmonyOS_Sans_SC_Regular';
-          font-size: 25px;
+          font-size: 20px;
           color: #ffe2ad;
           text-align: center;
-          padding: 10px;
+          padding: 20px;
-          height: 150px;
+          height: 80px;
-          line-height: 40px;
+          line-height: 30px;
+          margin-bottom: 20px;
         }
 
         .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;
+        
         }
 
       }

src/page/Home/App.vue

@@ -57,7 +57,7 @@ const indexFn = (item) => {
   }
 };
 
-const showQuestion = ref(true);
+const showQuestion = ref(false);
 const questionFn = (item) => {
   if (item.action == "hide") {
     showQuestion.value = false;
@@ -209,7 +209,7 @@ onMounted(() => {
       });
     }
   } else {
-    // showLoad.value = true;
+    showLoad.value = true;
     createBGM();
   }
 });

src/page/Home/main.js

@@ -19,8 +19,8 @@ app.config.globalProperties.imgUrl = (url) => {
 
 // 微信分享配置
 wxShare({
-    title: '今夜宜赏灯，来测测你的专属元宵花灯',
+    title: '欢乐猜灯谜，喜庆闹元宵',
-    desc: '赏花灯，赢惊喜，欢天喜地闹元宵！',
+    desc: '猜灯谜、赏花灯，金龙贺岁过“龘”年',
 })
 
 // 测试环境开vconsole