增加跳转的题目

src/main.ts

@@ -3,9 +3,11 @@ import App from './App';
 import router from './router';
 import store from './store';
 import '@/style/index.scss';
+import Vant from "vant";
 import "vant/lib/index.css";
 import "babel-polyfill"
 let app = createApp(App)
+app.use(Vant)
 app.directive('opacity', {
     mounted(el, binding) {
         console.log(binding.value)

src/views/aprilExam/test.vue

@@ -310,10 +310,25 @@
       <div class="bottom">
         <div class="bottom-container">
           <img @click="backTopics" src="@/assets/img/beforeTopics.png" />
-          <span>
-            <span style="color: #ffac4d">{{ listIndex + 1 }}</span
-            >/{{ list.length }}
-          </span>
+          <van-popover placement="top" v-model:show="showPopover">
+            <van-stepper
+              class="custom-stepper"
+              :min="1"
+              :step="5"
+              @change="changelistIndexStep"
+              :max="list.length"
+              input-width="40px"
+              button-size="32px"
+              v-model="listIndexStep"
+            />
+            <template #reference>
+              <span>
+                <span style="color: #ffac4d">{{ listIndex + 1 }}</span
+                >/{{ list.length }}
+              </span></template
+            ></van-popover
+          >
+
           <img @click="nextTopics" src="@/assets/img/nextTopics.png" />
         </div>
       </div>
@@ -322,7 +337,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onUnmounted } from 'vue';
+import { reactive, ref, onUnmounted, computed } from 'vue';
 import { Toast } from 'vant';
 import api from '@/api/api';
 import blueTabItemImg0 from '@/assets/img/blueCar.png';
@@ -335,6 +350,7 @@ import whiteTabItemImg2 from '@/assets/img/whiteTruck.png';
 import whiteTabItemImg3 from '@/assets/img/whiteMoto.png';
 import { useRoute } from 'vue-router';
 const tabItemListIndex = ref(0);
+let showPopover = ref(false);
 const answerIndexMap = ['!', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
 const tabItemList = [
   {
@@ -388,6 +404,19 @@ onUnmounted(() => {
   window.clearInterval(timer);
 });
 let listIndex = ref(0);
+let listIndexStep = computed(() => {
+  return listIndex.value + 1;
+});
+let changelistIndexStep = (val:string) => {
+  if( Number(val)==0){
+    Toast("数值太小")
+    return
+  }
+  else if(Number(val)>list.value.length){
+    Toast("数值太大")
+  }
+  listIndex.value = Number(val) - 1;
+};
 let list0 = ref<questionTwoList.row[]>([]);
 let list1 = ref<questionTwoList.row[]>([]);
 let list2 = ref<questionTwoList.row[]>([]);
@@ -512,7 +541,7 @@ let slideTopics = (() => {
 getPage(0);
 //获取url参数来跳转题目
 const route = useRoute();
-document.title = "四月份新题"
+document.title = '四月份新题';
 //truck
 </script>
 
@@ -715,6 +744,11 @@ document.title = "四月份新题"
     padding: 8px 30px;
   }
 }
+.custom-stepper {
+  :deep(.van-stepper__input) {
+    font-size: 30px;
+  }
+}
 .bottom {
   position: fixed;
   bottom: 0;
@@ -726,6 +760,7 @@ document.title = "四月份新题"
   align-items: center;
   padding: 0 60px;
   z-index: 100;
+
   .bottom-container {
     width: 100%;
     display: flex;
@@ -733,6 +768,7 @@ document.title = "四月份新题"
     height: 60px;
     line-height: 60px;
     font-weight: 700;
+
     img {
       width: 60px;
       height: 60px;