完整版

src/components/Question.vue

@@ -154,7 +154,12 @@ const getClass = (item) => {
             </div>
           </div>
           <div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
+            <div v-if='questionList[currentId].tips.length == 1'>
             {{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
+            </div>
+            <div v-else>
+            {{ isChecked ? `${i==0?['回答错误！', '回答正确！'][checkedOption.result]:''}` : `${i==0?'提示：':''}${t}` }}
+            </div>
           </div>
         </div>
         <div class="return-btn" @click="nextQuestion($event)"></div>
@@ -275,7 +280,7 @@ const getClass = (item) => {
           font-family: 'HarmonyOS_Sans_SC_Regular';
           color: #ab7133;
           text-align: center;
-          padding: 10px;
+          padding: 5px;
         }
 
 

src/data/index.js

@@ -35,7 +35,7 @@ export const data = [
         result: 0,
       },
     ],
-    tips: [`有“人间天堂”美称的城市。`],
+    tips: [`有“人间天堂”美称的城市`],
   },
   {
     id: 3,
@@ -73,7 +73,7 @@ export const data = [
         result: 1,
       },
     ],
-    tips: [`拥有被成为“世界第八大奇迹”的秦始皇陵兵马俑`],
+    tips: [`拥有被称为“世界第八大奇迹”的`, `秦始皇陵兵马俑`],
   },
   {
     id: 5,
@@ -92,6 +92,6 @@ export const data = [
         result: 0,
       },
     ],
-    tips: [`全国最早实行对外开放的四个经济特区之一`],
+    tips: [`全国最早实行对外开放的`, `四个经济特区之一`],
   },
 ];

vite.config.js

@@ -33,7 +33,7 @@ export default defineConfig(({ command, mode }) => {
             template: 'index.html',
             injectOptions: {
               data: {
-                title: '欢乐闹元宵',
+                title: '打卡理想假期',
               },
             }
           },