整合

2025-04-16 17:29:16 +08:00
parent 7e4e3af65f
commit 83a60df68d
75 changed files with 2243 additions and 604 deletions
--- a/src/components/Question.vue
+++ b/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>