选项自动高度

src/views/aprilExam/test.vue

@@ -27,6 +27,9 @@
         <div class="topics-content">
           {{ list[listIndex].name }}
         </div>
+        <div class="image">
+          <img v-if="list[listIndex].image" :src="list[listIndex].image" />
+        </div>
       </div>
       <div class="options">
         <div
@@ -70,7 +73,7 @@
               {{ list[listIndex].an1 }}
             </div>
           </div>
-          <div class="options-bg"></div>
+          <div class="options-bg">{{ list[listIndex].an1 }}</div>
         </div>
         <div
           class="options-select"
@@ -113,7 +116,7 @@
               {{ list[listIndex].an2 }}
             </div>
           </div>
-          <div class="options-bg"></div>
+          <div class="options-bg">{{ list[listIndex].an2 }}</div>
         </div>
         <div
           class="options-select"
@@ -156,7 +159,7 @@
               {{ list[listIndex].an3 }}
             </div>
           </div>
-          <div class="options-bg"></div>
+          <div class="options-bg">{{ list[listIndex].an3 }}</div>
         </div>
 
         <div
@@ -200,7 +203,7 @@
               {{ list[listIndex].an4 }}
             </div>
           </div>
-          <div class="options-bg"></div>
+          <div class="options-bg">{{ list[listIndex].an4 }}</div>
         </div>
 
         <div
@@ -244,7 +247,7 @@
               {{ list[listIndex].an5 }}
             </div>
           </div>
-          <div class="options-bg"></div>
+          <div class="options-bg">{{ list[listIndex].an5 }}</div>
         </div>
 
         <div
@@ -288,12 +291,10 @@
               {{ list[listIndex].an6 }}
             </div>
           </div>
-          <div class="options-bg"></div>
+          <div class="options-bg">{{ list[listIndex].an6 }}</div>
         </div>
       </div>
-      <div class="image">
-        <img v-if="list[listIndex].image" :src="list[listIndex].image" />
-      </div>
+
       <div class="explain" v-opacity="list[listIndex].isExplainJs">
         <div class="explain-answer">
           <div class="explain-answerText">
@@ -328,11 +329,11 @@ import blueTabItemImg0 from '@/assets/img/blueCar.png';
 import blueTabItemImg1 from '@/assets/img/blueBus.png';
 import blueTabItemImg2 from '@/assets/img/blueTruck.png';
 import blueTabItemImg3 from '@/assets/img/blueMoto.png';
-
 import whiteTabItemImg0 from '@/assets/img/whiteCar.png';
 import whiteTabItemImg1 from '@/assets/img/whiteBus.png';
 import whiteTabItemImg2 from '@/assets/img/whiteTruck.png';
 import whiteTabItemImg3 from '@/assets/img/whiteMoto.png';
+import { useRoute } from 'vue-router';
 const tabItemListIndex = ref(0);
 const answerIndexMap = ['!', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
 const tabItemList = [
@@ -448,8 +449,8 @@ let getPage = (index: number) => {
       break;
   }
 };
-let nextTopics = (e: Event) => {
-  e.preventDefault();
+let nextTopics = (e?: Event) => {
+  e?.preventDefault();
   if (listIndex.value == list.value.length - 1) {
     Toast('到底了');
     return;
@@ -459,8 +460,8 @@ let nextTopics = (e: Event) => {
   container.value.scrollTo(0, 0);
   // container.scrollTo(0, 0);
 };
-let backTopics = (e: Event) => {
-  e.preventDefault();
+let backTopics = (e?: Event) => {
+  e?.preventDefault();
   if (listIndex.value == 0) {
     Toast('到底了');
     return;
@@ -510,7 +511,9 @@ let slideTopics = (() => {
 })();
 //初始获取题目
 getPage(0);
-
+//获取url参数来跳转题目
+const route = useRoute();
+listIndex.value = route.query.listIndex ? Number(route.query.listIndex) : 0;
 //truck
 </script>
 
@@ -590,7 +593,6 @@ getPage(0);
   }
 }
 .image {
-  margin-bottom: 15px;
   img {
     width: 640px;
   }
@@ -601,13 +603,13 @@ getPage(0);
   padding-left: 60px;
   .options-select {
     width: 644px;
-    height: 98px;
     position: relative;
     margin-bottom: 26px;
+    overflow: hidden;
   }
   .options-selectText {
     border: 5px solid #2d2d2d;
-    height: 84px;
+
     text-align: left;
     display: flex;
     align-content: center;
@@ -617,6 +619,7 @@ getPage(0);
     position: absolute;
     left: 0;
     top: 0;
+
     width: 630px;
     z-index: 10;
   }
@@ -635,10 +638,17 @@ getPage(0);
     border-radius: 8px;
     flex-basis: 1;
     flex-shrink: 0;
+    position: absolute;
+    left: -4px;
+    top: 14px;
   }
 
   .options-selectText-mid {
-    margin-left: 20px;
+    padding-left: 75px;
+    padding-right: 72px;
+    padding-top: 22px;
+    padding-bottom: 22px;
+    font-size: 30px;
   }
   .options-selectText-mid_selectOk {
     color: #12af85;
@@ -660,14 +670,18 @@ getPage(0);
   }
   .options-bg {
     width: 630px;
-    height: 84px;
     background: #d6b352;
     border: 5px solid #2d2d2d;
-    position: absolute;
-    right: 0;
-    bottom: 0;
+    padding: 22px 0;
+    margin-left: 14px;
+    margin-top: 14px;
     border-radius: 8px;
-    overflow: hidden;
+    color: #d6b352;
+    padding-left: 75px;
+    padding-right: 72px;
+    padding-top: 22px;
+    padding-bottom: 22px;
+    font-size: 30px;
   }
 }
 .explain {
@@ -712,6 +726,7 @@ getPage(0);
   align-content: center;
   align-items: center;
   padding: 0 60px;
+  z-index: 100;
   .bottom-container {
     width: 100%;
     display: flex;