小修改

src/api/login/login.ts

@@ -16,7 +16,7 @@ export default {
         password: string,
         uuid: string
 
-    }):Promise<loginRes> {
+    }):Promise<loginApi.loginRes> {
         return request({
             url: '/login',
             method: 'post',

src/api/login/type.d.ts

@@ -1,12 +1,14 @@
-interface Res{
-    code:number,
-    msg:string
+interface Res {
+    code: number,
+    msg: string
+
+}
+declare namespace loginApi {
+    interface loginRes extends Res {
+
+        data: {
+            token: string
+        }
 
-} 
-interface loginRes extends Res{
-  
-    data:{
-        token:string
     }
-    
-}
+}

src/api/open/open.ts

@@ -3,7 +3,7 @@ import request from "../request"
 export default {
     questionInfoSelectFreeQuestionInfo(params: {
         subject: number
-    }):Promise<any> {
+    }):Promise<openApi.selectFreeQuestionInfoRes> {
         return request({
             params,
             url: "/open-api/question/info/selectFreeQuestionInfo",

src/api/open/type.d.ts

@@ -1,12 +1,56 @@
-interface Res{
-    code:number,
-    msg:string
-
-} 
-interface selectFreeQuestionInfoRes extends Res{
-  
-    data:{
-        token:string
+interface Res {
+    code: number,
+    msg: string
+
+}
+declare namespace openApi {
+    interface selectFreeQuestionInfoRes extends Res {
+        rows: {
+            optsArr: string[]
+            answer: string
+            answerkeyword: string
+            answermp3: string
+            chapterId: number
+            classIssue: string
+            classIssueName: string
+            classSort: number
+            createTime: string
+            diffDegree: number
+            excellIssue: string
+            excellIssueName: string
+            excellSort: number
+            explainGif: string
+            explainJq: string
+            explainJs: string
+            explainMp3: string
+            explainjsmp3: string
+            id: number
+            idYdt: number
+            image: string
+            imageYdt: string
+            isNew: number
+            issue: string
+            issuemp3: string
+            liceBus: string
+            liceCar: string
+            liceMoto: null
+            liceTruck: string
+            number: number
+            opts: string
+            placeIssue: null
+            placeIssueName: null
+            placeSort: null
+            questionType: number
+            sequeIssue: string
+            sequeIssueName: string
+            sequeSort: number
+            skillkeyword: string
+            subject: number
+            titlekeyword: string
+            updateTime: string
+
+        }[]
+
     }
-    
 }
+

src/components/mProblemAlert/index.vue

@@ -1,25 +1,60 @@
 <template>
-    <div class="fixed mask-bg-black items-center justify-center h100vh w100vw flex">
-        <div class="">
-
-        </div>
+  <div
+    class="fixed mask-bg-black items-center justify-center top0 h100vh left0 w100vw flex"
+    v-show="visible"
+  >
+    <div class="w450 bg-white pr30 pl30 pt30 pb30">
+      <div class="flex items-center">
+        <img class="w30 h24" src="@/assets/img/driverExam/analy_icon.png" />
+        <span class="font16 font-bold text-black ml10">{{ title }}</span>
+      </div>
+      <div class="font14 text-black text-left mt20">{{ content }}</div>
+      <div
+        @click="hideDialog"
+        class="font14 w110 lh40 bg-primary-yellow mt30 mr-auto ml-auto round4 cursor-pointer"
+      >
+        确定
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    setup () {
-        
-
-        return {}
-    }
-})
+  setup(props, context) {
+    return {
+      hideDialog: () => {
+        context.emit("update:visible", false);
+      },
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      default: "提示",
+    },
+    content: {
+      type: String,
+      default: "提示",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
 </script>
 
 <style scoped>
 .mask-bg-black {
   background: rgba(0, 0, 0, 0.45);
 }
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+.w100vw {
+  width: 100vw;
+}
 </style>

src/components/mProblemDialog/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="fixed mask-bg-black items-center justify-center top0 h100vh left0 w100vw flex"
+    v-show="visible"
+  >
+    <div class="w450 bg-white pr30 pl30 pt30 pb30">
+      <div class="flex items-center">
+        <img class="w30 h24" src="@/assets/img/driverExam/analy_icon.png" />
+        <span class="font16 font-bold text-black ml10">{{ title }}</span>
+      </div>
+      <div class="font14 text-black text-left mt20">{{ content }}</div>
+      <div class="w280 mr-auto ml-auto flex justify-between">
+        <div
+          @click="emitConfirm"
+          class="font14 w110 lh40 bg-primary-yellow mt30 mr-auto ml-auto round4 cursor-pointer"
+        >
+          确定
+        </div>
+        <div
+          @click="hideDialog"
+          class="font14 w110 lh40 bg-primary-yellow mt30 mr-auto ml-auto round4 cursor-pointer"
+        >
+          取消
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup(props, context) {
+    return {
+      hideDialog: () => {
+        context.emit("update:visible", false);
+      },
+      emitConfirm:()=>{
+         context.emit("confirm", false);
+      }
+
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      default: "提示",
+    },
+    content: {
+      type: String,
+      default: "提示",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>
+
+<style scoped>
+.mask-bg-black {
+  background: rgba(0, 0, 0, 0.45);
+}
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+.w100vw {
+  width: 100vw;
+}
+</style>

src/views/driverExam/index.vue

@@ -30,7 +30,9 @@
             考试题目
           </div>
           <div class="text-left pr20 pl20 pt20">
-            <span class="font-bold">1、在这个路口可以掉头。</span>
+            <span class="font-bold"
+              >{{ listIndex + 1 }}、{{ list[listIndex].issue }}</span
+            >
           </div>
         </div>
         <div class="w440 h440 bg-driver-exam">
@@ -117,81 +119,572 @@
       >
         <div class="text-red-500 pt15 font-bold">操作提示：判断题</div>
         <div class="flex h-full w390 items-center justify-between">
-          <div class="w120 lh46 bottom-button">上一题</div>
-          <div class="w120 lh46 bottom-button">下一题</div>
+          <div @click="preProblem()" class="w120 lh46 bottom-button">
+            上一题
+          </div>
+          <div @click="nextProblem()" class="w120 lh46 bottom-button">
+            下一题
+          </div>
           <div class="w120 lh46 bottom-button">交卷</div>
         </div>
       </div>
     </div>
+    <mProblemAlert
+      v-model:visible="alertVisible"
+      title="开启"
+      content="禁止重复"
+    ></mProblemAlert>
+    <mProblemDialog v-model:visible="dialogVisible"></mProblemDialog>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
-
+import { defineComponent, ref, onMounted } from "vue";
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
+import mProblemDialog from "@/components/mProblemDialog/index.vue";
+import api from "@/api";
 export default defineComponent({
+  name: "driverExam",
   setup() {
+    let listIndex = ref(0);
+    let list = ref([
+      {
+        createTime: "2022-10-09 15:05:43",
+        updateTime: "2022-10-10 10:19:19",
+        id: 821,
+        idYdt: 389,
+        number: 73,
+        answer: "√",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain821.gif",
+        explainJq: "题目中看到“确认安全”.“答对”。",
+        explainJs:
+          "《道路交通安全法实施条例》第四十二条：闪光警告信号灯为持续闪烁的黄灯，提示车辆、行人通行时注意瞭望，确认安全后通过。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain821.mp3",
+        image: "",
+        imageYdt: "",
+        issue: "路口黄灯持续闪烁，警示驾驶人要注意瞭望，确认安全通过。",
+        opts: "√-×",
+        skillkeyword: "确认安全-答对",
+        titlekeyword: "确认安全",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue821.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer821.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS821.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "1",
+        classIssue: "46",
+        placeIssue: null,
+        excellIssue: "28",
+        sequeIssueName: "练习一",
+        placeIssueName: null,
+        excellIssueName: "选学题一",
+        classIssueName: "交通信号灯",
+        questionType: 1,
+        subject: 1,
+        classSort: 1,
+        excellSort: 49,
+        sequeSort: 73,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 4,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:43",
+        updateTime: "2022-10-10 10:19:19",
+        id: 1295,
+        idYdt: 762,
+        number: 74,
+        answer: "√",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1295.gif",
+        explainJq: "题目中看到“确认安全”.“答对”。",
+        explainJs:
+          "车辆起步前，驾驶人应观察车辆周边交通情况，在确保安全的情况下起步。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1295.mp3",
+        image: "",
+        imageYdt: "",
+        issue:
+          "车辆起步前，驾驶人应对车辆周围交通情况进行观察，确认安全时再开始起步。",
+        opts: "√-×",
+        skillkeyword: "确认安全-答对",
+        titlekeyword: "确认安全",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1295.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1295.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1295.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "1",
+        classIssue: "44",
+        placeIssue: null,
+        excellIssue: "28",
+        sequeIssueName: "练习一",
+        placeIssueName: null,
+        excellIssueName: "选学题一",
+        classIssueName: "安全常识",
+        questionType: 1,
+        subject: 1,
+        classSort: 4,
+        excellSort: 50,
+        sequeSort: 74,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 2,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:43",
+        updateTime: "2022-10-10 10:19:19",
+        id: 1615,
+        idYdt: 26051,
+        number: 75,
+        answer: "√",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1615.gif",
+        explainJq: "题目中看到“确认安全”.“答对”。",
+        explainJs:
+          "注意进入驾驶室前，也就是上车前。上车前，要从驾驶室车门外开始，逆时针绕车一周，检查车辆及周边情况，查看车底、车后有无异常情况，确认安全后再上车。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1615.mp3",
+        image: "",
+        imageYdt: "",
+        issue:
+          "驾驶人在进入驾驶室前，首先要观察机动车周围情况，确认安全后再上车。",
+        opts: "√-×",
+        skillkeyword: "确认安全-答对",
+        titlekeyword: "确认安全",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1615.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1615.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1615.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "1",
+        classIssue: "44",
+        placeIssue: null,
+        excellIssue: "28",
+        sequeIssueName: "练习一",
+        placeIssueName: null,
+        excellIssueName: "选学题一",
+        classIssueName: "安全常识",
+        questionType: 1,
+        subject: 1,
+        classSort: 5,
+        excellSort: 51,
+        sequeSort: 75,
+        placeSort: null,
+        chapterId: 108,
+        diffDegree: 2,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:43",
+        updateTime: "2022-10-10 10:19:19",
+        id: 490,
+        idYdt: 167,
+        number: 76,
+        answer: "√",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain490.gif",
+        explainJq: "题目中看到“确认安全”.“答对”。",
+        explainJs:
+          "《道路交通安全法实施条例》第六十四条：机动车行经漫水路或者漫水桥时，应当停车察明水情，确认安全后，低速通过。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain490.mp3",
+        image: "",
+        imageYdt: "",
+        issue: "驾驶机动车遇到漫水桥时要察明水情确认安全后再低速通过。",
+        opts: "√-×",
+        skillkeyword: "确认安全-答对",
+        titlekeyword: "确认安全",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue490.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer490.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS490.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "1",
+        classIssue: "83",
+        placeIssue: null,
+        excellIssue: "28",
+        sequeIssueName: "练习一",
+        placeIssueName: null,
+        excellIssueName: "选学题一",
+        classIssueName: "特殊路段/路况",
+        questionType: 1,
+        subject: 1,
+        classSort: 6,
+        excellSort: 52,
+        sequeSort: 76,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 1,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:43",
+        updateTime: "2022-10-10 10:19:19",
+        id: 469,
+        idYdt: 150,
+        number: 77,
+        answer: "√",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain469.gif",
+        explainJq: "题目中看到“确认安全”.“答对”。",
+        explainJs:
+          "图中标志是无人看守的铁路道口，要停车观察确认安全后再通过。《道路交通安全法》第四十六条：机动车通过铁路道口时，应当按照交通信号或者管理人员的指挥通行；没有交通信号或者管理人员的，应当减速或者停车，在确认安全后通过。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain469.mp3",
+        image: "https://t1-1305573081.file.myqcloud.com/kt/image/image469.jpg",
+        imageYdt:
+          "https://t1-1305573081.file.myqcloud.com/kt/image_ydt/5eb4d75agw1e28ypmvbktj.jpg",
+        issue: "行至这种情况的铁路道口要减速或者停车观察，在确认安全后通过。",
+        opts: "√-×",
+        skillkeyword: "确认安全-答对",
+        titlekeyword: "确认安全",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue469.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer469.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS469.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "1",
+        classIssue: "84",
+        placeIssue: null,
+        excellIssue: "28",
+        sequeIssueName: "练习一",
+        placeIssueName: null,
+        excellIssueName: "选学题一",
+        classIssueName: "铁路道口",
+        questionType: 1,
+        subject: 1,
+        classSort: 1,
+        excellSort: 53,
+        sequeSort: 77,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 2,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:43",
+        updateTime: "2022-10-10 10:19:19",
+        id: 1083,
+        idYdt: 801,
+        number: 78,
+        answer: "√",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1083.gif",
+        explainJq: "题目中看到“确认安全”.“答对”。",
+        explainJs:
+          "变更车道步骤：提前开转向灯，观察后方情况，确保安全距离，再变更。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1083.mp3",
+        image: "",
+        imageYdt: "",
+        issue:
+          "在高速公路变更车道时，应提前开启转向灯，观察情况，确认安全后，驶入需要变更的车道。",
+        opts: "√-×",
+        skillkeyword: "确认安全-答对",
+        titlekeyword: "确认安全",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1083.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1083.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1083.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "1",
+        classIssue: "85",
+        placeIssue: null,
+        excellIssue: "28",
+        sequeIssueName: "练习一",
+        placeIssueName: null,
+        excellIssueName: "选学题一",
+        classIssueName: "变更车道",
+        questionType: 1,
+        subject: 1,
+        classSort: 1,
+        excellSort: 54,
+        sequeSort: 78,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 1,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:58",
+        updateTime: "2022-10-10 10:19:19",
+        id: 291,
+        idYdt: 74,
+        number: 284,
+        answer: "×",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain291.gif",
+        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
+        explainJs:
+          "超车只能从左侧超越，应提前开启左转向灯。《道路交通安全法实施条例》第五十七条：机动车向左转弯、向左变更车道、准备超车、驶离停车地点或者掉头时，应当提前开启左转向灯。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain291.mp3",
+        image: "",
+        imageYdt: "",
+        issue: "驾驶机动车在道路上超车时可以不使用转向灯。",
+        opts: "√-×",
+        skillkeyword: "可以不-答错",
+        titlekeyword: "可以不",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue291.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer291.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS291.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "2",
+        classIssue: "86",
+        placeIssue: null,
+        excellIssue: "29",
+        sequeIssueName: "练习二",
+        placeIssueName: null,
+        excellIssueName: "选学题二",
+        classIssueName: "超车题",
+        questionType: 1,
+        subject: 1,
+        classSort: 24,
+        excellSort: 41,
+        sequeSort: 99,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 1,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:58",
+        updateTime: "2022-10-10 10:19:19",
+        id: 303,
+        idYdt: 77,
+        number: 285,
+        answer: "×",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain303.gif",
+        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
+        explainJs:
+          "向右变更车道，应提前开启右转向灯，告知后方车辆。《道路交通安全法实施条例》第五十七条：机动车向右转弯、向右变更车道、超车完毕驶回原车道、靠路边停车时，应当提前开启右转向灯。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain303.mp3",
+        image: "",
+        imageYdt: "",
+        issue: "驾驶机动车在道路上向右变更车道可以不使用转向灯。",
+        opts: "√-×",
+        skillkeyword: "可以不-答错",
+        titlekeyword: "可以不",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue303.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer303.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS303.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "2",
+        classIssue: "85",
+        placeIssue: null,
+        excellIssue: "29",
+        sequeIssueName: "练习二",
+        placeIssueName: null,
+        excellIssueName: "选学题二",
+        classIssueName: "变更车道",
+        questionType: 1,
+        subject: 1,
+        classSort: 14,
+        excellSort: 42,
+        sequeSort: 100,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 5,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:58",
+        updateTime: "2022-10-10 10:19:19",
+        id: 1053,
+        idYdt: 774,
+        number: 286,
+        answer: "×",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1053.gif",
+        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
+        explainJs:
+          "任何情况下，机动车都要礼让行人。《道路交通安全法》第四十七条：机动车遇行人横过道路，应当避让。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1053.mp3",
+        image: "",
+        imageYdt: "",
+        issue: "当行人出现交通安全违法行为时，车辆可以不给行人让行。",
+        opts: "√-×",
+        skillkeyword: "可以不-答错",
+        titlekeyword: "可以不",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1053.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1053.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1053.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "2",
+        classIssue: "91",
+        placeIssue: null,
+        excellIssue: "29",
+        sequeIssueName: "练习二",
+        placeIssueName: null,
+        excellIssueName: "选学题二",
+        classIssueName: "优先通行/礼让",
+        questionType: 1,
+        subject: 1,
+        classSort: 27,
+        excellSort: 43,
+        sequeSort: 101,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 5,
+        isNew: 0,
+      },
+      {
+        createTime: "2022-10-09 15:05:58",
+        updateTime: "2022-10-10 10:19:19",
+        id: 1055,
+        idYdt: 775,
+        number: 287,
+        answer: "×",
+        answerkeyword: "",
+        explainGif:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1055.gif",
+        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
+        explainJs:
+          "任何情况下，机动车都要礼让行人、非机动车，不可与其抢行，安全行车最重要。",
+        explainMp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1055.mp3",
+        image: "",
+        imageYdt: "",
+        issue: "车辆在交叉路口绿灯亮后，遇非机动车抢道行驶时，可以不让行。",
+        opts: "√-×",
+        skillkeyword: "可以不-答错",
+        titlekeyword: "可以不",
+        issuemp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1055.mp3",
+        answermp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1055.mp3",
+        explainjsmp3:
+          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1055.mp3",
+        liceCar: "1",
+        liceBus: "1",
+        liceTruck: "1",
+        liceMoto: null,
+        sequeIssue: "2",
+        classIssue: "91",
+        placeIssue: null,
+        excellIssue: "29",
+        sequeIssueName: "练习二",
+        placeIssueName: null,
+        excellIssueName: "选学题二",
+        classIssueName: "优先通行/礼让",
+        questionType: 1,
+        subject: 1,
+        classSort: 28,
+        excellSort: 44,
+        sequeSort: 102,
+        placeSort: null,
+        chapterId: 2,
+        diffDegree: 1,
+        isNew: 0,
+      },
+    ]);
+    let nextProblem = () => {
+      console.log("nextProblem");
+      if (listIndex.value < list.value.length - 1) {
+        listIndex.value++;
+        return;
+      }
+    };
+    let preProblem = () => {
+      if (listIndex.value > 0) {
+        listIndex.value = listIndex.value - 1;
+      }
+    };
+    onMounted(() => {
+      api.open
+        .questionInfoSelectFreeQuestionInfo({
+          subject: 1,
+        })
+        .then((res) => {
+          res.rows.forEach((element) => {
+            element.optsArr = element.opts.split("-").sort();
+          });
+        });
+    });
     return {
-      list: ref([
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-        {},
-      ]),
-      listIndex: ref(0),
+      alertVisible: ref(false),
+      dialogVisible: ref(false),
+      list: list,
+      listIndex,
+      nextProblem,
+      preProblem,
     };
   },
+
+  components: {
+    mProblemAlert,
+    mProblemDialog,
+  },
 });
 </script>
 
 <style lang="scss" scoped>
-.pr23vw{
+.pr23vw {
   padding-right: 23vw;
 }
 .bottom-button {
@@ -208,8 +701,8 @@ export default defineComponent({
 
   border: 1px solid #f9de5b;
 }
-.answer-select:hover{
-  background: #FFF7CC;
+.answer-select:hover {
+  background: #fff7cc;
 }
 .bg-driver-exam {
   background: #f5f5f3;
@@ -298,7 +791,7 @@ export default defineComponent({
       }
     }
     .collselected {
-      background: #F9DE5B;
+      background: #f9de5b;
       color: #fff;
     }
   }

src/views/driverExamAnaly/index.vue

@@ -36,7 +36,7 @@
           <div>×A、正确</div>
           <div>√B、错误</div>
           <div
-            class="bg-primary-yellow font16 lh40 w110 text-center round4 mt20"
+            class="bg-primary-yellow font16 lh40 w110 text-center round4 mt20 cursor-pointer"
           >
             本题解析
           </div>