待发布测试版本

src/components/Question.vue

@@ -24,6 +24,7 @@ const currentId = ref(props.questionId); //当前id 0~11
 
 const questionList = ref(data); //随机打乱题库
 const isChecked = ref(false)
+const checkedOption = ref('')
 
 // 答题事件
 const answerFn = (item, event) => {
@@ -35,6 +36,7 @@ const answerFn = (item, event) => {
     gsap.set('.option-tips,.analysis', { autoAlpha: 1 })
     gsap.set('.answer-box', { pointerEvents: 'none' })
     isChecked.value = true
+    checkedOption.value = item.aid
     if (item.result === 'correct') {
       gsap.set('.create-btn', { display: 'block' })
     } else {
@@ -131,7 +133,8 @@ onMounted(() => {
           </div>
           <!-- 选项 -->
           <div class="answer-box">
-            <div class="answer" :class="isChecked ? item.result + '-bg' : ''"
+            <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" v-for="a in item.text" :key="a">
@@ -147,7 +150,7 @@ onMounted(() => {
           </div>
           <!-- 解析 -->
           <div class="analysis">
-            <div v-for="(li,index) in questionList[currentId].analysis" :key="li">
+            <div v-for="(li, index) in questionList[currentId].analysis" :key="li">
               <span class="analysis-tips" v-if="index == 0">提示:</span>
               <span v-html="li"></span>
             </div>
@@ -266,7 +269,7 @@ onMounted(() => {
 
 
           // 选中状态
-          .correct-bg {
+          .checked {
             border: 1px solid rgb(255, 238, 186) !important;
             background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
             background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
@@ -281,9 +284,14 @@ onMounted(() => {
 
           }
 
-          .incorrect-bg {
+          .no-checked {
-            background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
+            // background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
-            box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
+            // box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
+
+            box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85),inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
+            background-image: -webkit-linear-gradient( 177deg, rgb(195,59,22) 0%, rgb(209,84,51) 100%);
+
+
 
             .answer-option {
               color: #ffe2ad;
@@ -295,6 +303,10 @@ onMounted(() => {
 
           }
 
+          .checked{
+
+          }
+
 
 
           .answer {
@@ -302,7 +314,7 @@ onMounted(() => {
 
             position: relative;
             border-radius: 47.5px;
-            border: 2px solid rgb(255, 225, 172);
+            // border: 2px solid rgb(255, 225, 172);
             // margin-bottom: 35px;
             justify-content: space-between;
             display: flex;

src/components/Result.vue

@@ -59,7 +59,7 @@ const executeTasks = async () => {
             { width: 750, height: 1334 },
             [
                 { name: "bg", src: posterImgList[posterId.value - 1], pos: { w: 750, h: 1334, x: 0, y: 0 } },
-                { name: "eqcode", src: eqcodePic.value, pos: { w: 164, h: 164, x: 159, y: 1122 } },
+                { name: "eqcode", src: eqcodePic.value, pos: { w: 194, h: 194, x: 514, y: 1098 } },
             ]
         );
     } else {