存档

.env.fat

@@ -1,6 +1,6 @@
 VITE_MODE = fat
 VITE_HOST = https://wmm-stg.pingan.com.cn
-VITE_CDN = https://cdn.xglpa.com
+VITE_CDN = https://cdn.xglpa.com/palc-preview
 VITE_FOLDER = /vite-4
 VITE_APPID = wxc2bc9f9e8d19b504
 VITE_API = /intfgw/data/mmoactivity

index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport"
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
     <title><%- title%></title>
 </head>
 

package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@vant/auto-import-resolver": "^1.0.2",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^4.0.0",
     "postcss-px-to-viewport-8-plugin": "^1.2.3",
     "sass": "^1.68.0",
     "sass-loader": "^13.3.2",

src/components/Question.vue

@@ -7,10 +7,9 @@ import { useMainStore } from "@/store";
 import { subAnswer } from "@/api";
 
 // 页面配置初始化
-const emit = defineEmits([ "QuestionPage"]);
+const emit = defineEmits(["QuestionPage"]);
 const userStore = useMainStore();
 
-
 // 当前题目
 // const currentId = ref(props.questionId); //当前id 0~4
 const currentId = ref(0); //当前id 0~3
@@ -19,6 +18,7 @@ const questionList = ref(data); //随机打乱题库
 const isChecked = ref(false);
 const checkedOption = ref("");
 const QaResult = ref(1); //当前答题结果
+const correctObj = ref({}); //当前正确选项
 
 // 答题事件
 const answerFn = (item, event) => {
@@ -30,6 +30,13 @@ const answerFn = (item, event) => {
     checkedOption.value = item;
     console.log("checkedOption", checkedOption.value);
     QaResult.value = item.result;
+
+    // 设置正确选项
+    correctObj.value = questionList.value[currentId.value].answer.find(
+      (item) => item.result == 1
+    );
+    console.log("correctObj", correctObj.value);
+
     gsap.to(".qp-result ", { duration: 0.5, autoAlpha: 1, delay: 1 });
   });
 };
@@ -66,7 +73,9 @@ const viewResult = (event) => {
       forbidClick: true,
     });
 
-    if (import.meta.env.VITE_MODE != "dev") {
+    let dev = "dev";
+
+    if (dev != "dev") {
       // 提交完成记录
       subAnswer({}, userStore.token).then((res) => {
         console.log("key:", res);
@@ -76,11 +85,11 @@ const viewResult = (event) => {
 
         setTimeout(() => {
           Toast.clear();
-          gsap.to(".QuestionPage", {
+          gsap.to(".QuestionPage,.qp-result", {
             duration: 0.5,
             autoAlpha: 0,
             onComplete: () => {
-              emit("showResult", { action: "showResult" });
+              emit("QuestionPage", { action: "showResult" });
             },
           });
         }, 1000);
@@ -92,7 +101,7 @@ const viewResult = (event) => {
           duration: 0.5,
           autoAlpha: 0,
           onComplete: () => {
-            emit("QuestionPage", { action: 'showResult' });
+            emit("QuestionPage", { action: "showResult" });
           },
         });
       }, 1000);
@@ -122,9 +131,13 @@ const getClass = (item) => {
         <div class="question-serial">
           <div>
             <div class="serial-icon"></div>
-            <div class="serial-text">{{ ['题目一','题目二','题目三','题目四'][currentId] }}</div>
+            <div class="serial-text">
+              {{ ["题目一", "题目二", "题目三", "题目四"][currentId] }}
+            </div>
+          </div>
+          <div class="serial-num">
+            {{ currentId + 1 }}/{{ questionList.length }}
           </div>
-          <div class="serial-num">{{ currentId+1 }}/{{ questionList.length }}</div>
         </div>
         <div class="qa-question-box">
           <div class="question">
@@ -173,14 +186,27 @@ const getClass = (item) => {
     </div>
   </div>
   <div class="qp-result">
-    <div class="qp-result-box">
+    <div
+      class="qp-result-box"
+      :class="!QaResult ? 'qp-result-box-0' : 'qp-result-box-1'"
+    >
       <div
         class="qp-result-icon"
         :class="!QaResult ? 'is-incorrect' : ''"
       ></div>
-      <div class="qp-result-text">{{ QaResult ? "答对啦" : "答错啦" }}</div>
-      <div class="qp-tips-text">{{ questionList[currentId].tips[0] }}</div>
-      <div class="qp-result-btn"></div>
+
+      <div class="qp-result-content">
+        <div
+          class="qp-result-text"
+          :class="!QaResult ? 'text-bg-2' : 'text-bg-1'"
+        >
+          {{ QaResult ? "答对啦" : "答错啦" }}
+        </div>
+        <div class="qp-tips" v-if="!QaResult">
+          答案:{{ correctObj.aid }}.{{ correctObj.text }}
+        </div>
+        <div class="qp-tips-text">解析：{{ questionList[currentId].tips[0] }}</div>
+      </div>
     </div>
     <div
       class="next-btn"
@@ -351,31 +377,63 @@ const getClass = (item) => {
   background-color: rgba($color: #000000, $alpha: 0.6);
   visibility: hidden;
   .qp-result-box {
-    @include box(569px, 399px);
-    @include bg_pos("qa/result-box.png");
+    @include box(569px, 526px);
+
     position: relative;
     .qp-result-icon {
-      @include pos(112px, 112px, 222px, -28px);
+      @include pos(112px, 112px, 223px, -30px);
       @include bg_pos("qa/correct-icon.png");
     }
     .is-incorrect {
       @include bg_pos("qa/incorrect-icon.png");
     }
+
+    .qp-result-content {
+      @include pos(569px, 430px, 0px, 95px);
+
+
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+
       .qp-result-text {
-      @include pos(569px, 50px, 0px, 104px);
-      @include flexCen();
+        @include box(319px, 47px);
+        text-align: center;
+        width: 100%;
         font-size: 35px;
         color: #ffffff;
+        margin: 20px auto;
+      }
+      .text-bg-1 {
+        @include bg_pos("qa/tips-bg.png");
+      }
+      .text-bg-2 {
+        @include bg_pos("qa/tips-bg-2.png");
+      }
+      .qp-tips {
+        width: 80%;
+        text-align: center;
+        font-size: 25px;
+        color: #ff0000;
       }
       .qp-tips-text {
-      @include pos(569px, 220px, 0px, 150px);
-      padding: 20px;
+        width: 100%;
+        padding: 10px 20px;
         font-size: 25px;
-      line-height: 35px;
+        line-height: 40px;
         text-align: justify;
         color: #b3640d;
       }
     }
+  }
+
+  .qp-result-box-1 {
+    @include bg_pos("qa/result-box.png");
+  }
+  .qp-result-box-0 {
+    @include bg_pos("qa/result-box-2.png");
+  }
 
   .next-btn {
     @include box(190px, 65px);

src/components/Rule.vue

@@ -33,7 +33,7 @@ onMounted(() => {
                     <div class="rule-text-area wrapper">
                         <div>
                             <div class="part">
-                                <div>活动时间：2025年5月28日——5月31日</div>
+                                <div>活动时间：2025年5月29日——5月31日</div>
                                 <div>活动奖励：微信红包</div>
                             </div>
                             <div class="part">

src/data/imgList.js

@@ -31,6 +31,9 @@ const page = [
   "qa/incorrect-icon.png",
   "qa/correct-icon.png",
   "qa/correct.png",
+  "qa/result-box-2.png",
+  "qa/tips-bg.png",
+  "qa/tips-bg-2.png",
 
   "result/poster.jpg",
   "result/card.png",

src/page/Home/App.vue

@@ -118,7 +118,8 @@ onMounted(() => {
   let code = getQueryString("code");
   let url = import.meta.env.VITE_URL;
 
-  let dev = import.meta.env.VITE_MODE;
+  // let dev = import.meta.env.VITE_MODE;
+  let dev = "dev";
   if (dev != "dev") {
     if (code) {
       getUserInfo({ code: code }).then((res) => {
@@ -269,7 +270,7 @@ const firstClick = () => {
 #app {
   overflow: hidden;
   background: linear-gradient(135deg, #d6d1ca, #e5dccf);
-  font-family: "FZZY_Regular";
+  // font-family: "FZZY_Regular";
 }
 
 #__vconsole {
@@ -277,7 +278,7 @@ const firstClick = () => {
 }
 
 .music_icon {
-  @include pos(60px, 60px, 20px, 175px);
+  @include pos(60px, 60px, 20px, 305px);
   @include bg_pos("music-on.png");
   z-index: 99;
   visibility: hidden;