考试部分ui改版2

src/views/exam/test.vue

@@ -25,12 +25,13 @@
             <div class="kaoti-header">金牌驾考</div>
             <div class="kaoti-headerText">第01考台</div>
           </div>
-          <div class="student mt6">
+          <div class="student">
             <div class="student-header">考生信息</div>
-            <div class="mt13">
+            <div class="mt10">
               <img class="driver" :src="headimg" />
               <div class="driverInfo">
                 <div>姓名：{{ username }}</div>
+                <div>性别：{{ sex }}</div>
                 <div>类型：{{ carType }}</div>
                 <div>科目：{{ subject }}</div>
               </div>
@@ -42,63 +43,99 @@
           </div>
         </div>
         <div class="container2">
-          <div class="topic">
-            <div class="topic-header">考试题目</div>
-            <div class="topic-issue">
-              <span>{{ listIndex + 1 }}.{{ list[listIndex].issue }}</span>
+          <div class="container2-row1">
+            <div class="topic">
+              <div class="topic-header">考试题目</div>
+              <div class="topic-issue">
+                <span>{{ listIndex + 1 }}.{{ list[listIndex].issue }}</span>
+              </div>
+              <div class="mt9 topic-select">
+                <div
+                  v-for="(item, index) in list[listIndex].optsArr"
+                  :key="index"
+                  class="topic-select-item"
+                >
+                  {{ letter[index] }}.<span>{{ item }}</span>
+                </div>
+                <!-- <div class="topic-select-item">B.<span>xx</span></div> countdown-->
+              </div>
             </div>
-            <div class="mt9 topic-select">
-              <div
-                v-for="(item, index) in list[listIndex].optsArr"
-                :key="index"
-                class="topic-select-item"
-              >
-                {{ letter[index] }}.<span>{{ item }}</span>
+            <div class="answer">
+              <span class="answer-tip">您选择的答案：</span>
+              <div style="display: flex; align-items: center">
+                <span>选项:</span>
+                <div class="answer-list">
+                  <div
+                    v-for="(item, index) in list[listIndex].optsArr"
+                    :key="index"
+                    class="answer-list-item"
+                    @click="selectExamAnswer(item)"
+                    :class="{
+                      answer_selected: list[listIndex].userAnswer == item,
+                    }"
+                  >
+                    {{ letter[index] }}
+                  </div>
+                  <!-- <div class="answer-list-item answer-list-item_select">B</div> -->
+                </div>
               </div>
-              <!-- <div class="topic-select-item">B.<span>xx</span></div> countdown-->
+            </div>
+            <div class="coll">
+              <table border="0" class="coll-table-topic">
+                <tr :key="index" v-for="(item, index) in list.length / 10">
+                  <td
+                    v-for="(_item, _index) in 10"
+                    :class="{
+                      collselected: index * 10 + _index == listIndex,
+                    }"
+                    :data-key="index * 10 + _index + 1"
+                    :key="_index"
+                    @click="changeListIndex"
+                  >
+                    <div
+                      style="white-space: nowrap"
+                      :data-key="index * 10 + _index + 1"
+                      class="coll-table-topic-item"
+                    >
+                      {{ index * 10 + _index + 1 }}
+                    </div>
+                  </td>
+                </tr>
+              </table>
             </div>
           </div>
-          <div class="answer">
-            <span>您选择的答案：</span>
-            <div style="display: flex; align-items: center">
-              <span>选项:</span>
-              <div class="answer-list">
+          <div class="container2-row2">
+            <div class="w-half">
+              <div class="left-line1">操作提示：判断题</div>
+              <div class="left-line2">请在备选答案中选择你认为正确的答案！</div>
+            </div>
+            <div class="w-half">
+              <div class="right">
                 <div
-                  v-for="(item, index) in list[listIndex].optsArr"
-                  :key="index"
-                  class="answer-list-item"
-                  @click="selectExamAnswer(item)"
+                  @click="beforeTopic"
+                  class="right-button1"
+                  :class="{
+                    button1_disabled: listIndex == 0,
+                  }"
+                >
+                  上一题
+                </div>
+                <div
+                  @click="nextTopic"
+                  class="right-button1"
                   :class="{
-                    answer_selected: list[listIndex].userAnswer == item,
+                    button1_disabled: listIndex == list.length - 1,
                   }"
                 >
-                  {{ letter[index] }}
+                  下一题
                 </div>
-                <!-- <div class="answer-list-item answer-list-item_select">B</div> -->
+                <div @click="submitScore" class="right-button2">交卷</div>
               </div>
             </div>
           </div>
         </div>
-        <div class="container3">
+        <!-- <div class="container3">
           <div class="coll">
-            <!-- <div class="coll-header1">
-              <table class="coll-header1">
-                <td class="coll-header1-row">题目</td>
-                <td class="coll-header1-row" v-for="(item, index) in 10" :key="index">
-                  {{ index + 1 }}列
-                </td>
-              </table>
-            </div> -->
-            <!-- <div class="coll-header2"> -->
-            <!-- <table>
-                <td class="coll-header1-row" v-for="(item, index) in 10" :key="index"></td>
-              </table> -->
-
-            <!-- <div class="coll-header2-col">题目</div> -->
-            <!-- <div class="coll-header2-col" v-for="(item, index) in 10" :key="index">
-                {{ index + 1 }}行
-              </div>
-            </div> -->
             <table border="0" class="coll-table-topic">
               <tr>
                 <td class="coll-table-topic-item bg-498ef5">
@@ -139,25 +176,18 @@
               </tr>
             </table>
           </div>
-        </div>
+        </div> -->
       </div>
-
       <div class="bottom">
-        <div class="left">
-          <div style="color: #bc322d; width: 100%">操作提示：选择题</div>
-          <div>请在备选答案中选择你认为正确的答案！</div>
-        </div>
-        <div class="right">
-          <div @click="beforeTopic" class="right-button1" :class="{
-            button1_disabled:listIndex==0
-          }">上一题</div>
-          <div @click="nextTopic"  class="right-button1" :class="{
-            button1_disabled:listIndex==(list.length-1)
-          }">下一题</div>
-          <div @click="submitScore" class="right-button2">交卷</div>
-        </div>
-      </div>
-      <div class="mt16">
+        <img
+          class="icon"
+          @click="
+            () => {
+              router.back();
+            }
+          "
+          src="@/assets/img/backButton.png"
+        />
         <img class="answer-img" v-if="list[listIndex].image" :src="list[listIndex].image" />
       </div>
     </div>
@@ -174,17 +204,21 @@ import { countdownTime, countdown, countdownTimer } from '@/hooks/countdown';
 import { useStore } from 'vuex';
 // import router from '@/router';
 import { useExamTest } from '@/hooks/examTest';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useStringMap } from '@/hooks/stringMap';
 export default defineComponent({
   setup() {
     //清除定时器
+    //
     window.clearInterval(countdownTimer.value);
     const headimg = useRoute().query?.headimg;
     const username = useRoute().query?.username;
     const store = useStore();
+    const router = useRouter();
+
     const { subjectMap, carTypeMap } = useStringMap();
     let subject = subjectMap[Number(useRoute().query?.subject)];
+    let sex = '男';
     let carType = carTypeMap[useRoute().query?.type as string];
     let {
       list,
@@ -698,6 +732,7 @@ export default defineComponent({
       selectExamAnswer,
       countdownTime,
       store,
+      router,
       submitScore,
       beforeSubmitVisible,
       submitVisible,
@@ -707,6 +742,7 @@ export default defineComponent({
       subject,
       username,
       carType,
+      sex,
     };
   },
   components: {
@@ -717,6 +753,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.w-half {
+  width: 50%;
+}
+.mt10 {
+  margin-top: 10px;
+}
 .mt6 {
   margin-top: 6px;
 }
@@ -730,61 +772,19 @@ export default defineComponent({
   background: #498ef5;
 }
 .bottom {
-  margin-top: 3px;
   display: flex;
-  padding: 0px 8px;
-  font-size: 13px;
-  flex-wrap: wrap;
-  text-align: left;
-  height: 100%;
-  overflow-y: scroll;
-  height: 46px;
-  border: 1px solid #b8c0cc;
-  border-radius: 6px;
-  padding: 4px 0px;
-  padding-left: 6px;
-  padding-right: 12px;
-  .left {
-    display: flex;
-    width: 50%;
-    font-size: 12px;
-    flex-wrap: wrap;
-  }
-  .right {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    justify-content: flex-end;
-    width: 50%;
-    .right-button1 {
-      width: 58px;
-      height: 28px;
-      background: #FFFFFB;
-      opacity: 1;
-
-      font-size: 12px;
-      color: #3D3C38;
-      line-height: 28px;
-      text-align: center;
-      margin-left: 16px;
-    }
-    .button1_disabled{
-      background-color: #F9FAF5;
-      color: #979893;
-
-    }
-    .right-button2 {
-      width: 58px;
-      height: 28px;
-      background: #FFFFFB;
-      opacity: 1;
-
-      font-size: 12px;
-   
-      line-height: 28px;
-      text-align: center;
-      margin-left: 16px;
-    }
+  position: relative;
+  justify-content: center;
+  border-left: 1px solid #c6c7c9;
+  border-bottom: 1px solid #c6c7c9;
+  border-right: 1px solid #c6c7c9;
+  height: 74px;
+  .icon {
+    width: 35px;
+    height: 35px;
+    position: absolute;
+    left: 17px;
+    bottom: 21px;
   }
 }
 .center {
@@ -794,34 +794,101 @@ export default defineComponent({
   background: #f6f2f1;
 }
 .box {
-  padding-top: 16px;
-  padding-bottom: 16px;
-  padding-left: 14px;
-  padding-right: 14px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 7px;
+  padding-right: 7px;
   overflow: hidden;
 }
 
 .main {
   display: flex;
+  border: 1px solid #c6c7c9;
 }
 .container3 {
   flex: 1;
 }
 .container2 {
   box-sizing: border-box;
-  padding-left: 3px;
-  padding-right: 3px;
-  width: 454px;
-  height: 151px;
+  width: 613px;
+  .container2-row1 {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 220px;
+    width: 100%;
+  }
+  .container2-row2 {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    height: 42px;
+    width: 100%;
+    align-content: center;
+    align-items: center;
+    border-top: 1px solid #b8c0cc;
+    border-left: 1px solid #b8c0cc;
+    text-align: left;
+    font-size: 11px;
+    padding-left: 8px;
+    .left-line1 {
+      color: #bc322d;
+      text-align: left;
+      font-size: 11px;
+      width: 100%;
+    }
+    .left-line2 {
+      color: #3d3c38;
+      text-align: left;
+      font-size: 11px;
+      width: 100%;
+    }
+    .right {
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 16px;
+      .right-button1 {
+        width: 58px;
+        height: 28px;
+        background: #fffffb;
+        opacity: 1;
+
+        font-size: 12px;
+        color: #3d3c38;
+        line-height: 28px;
+        text-align: center;
+        margin-left: 16px;
+      }
+      .button1_disabled {
+        background-color: #f9faf5;
+        color: #979893;
+      }
+      .right-button2 {
+        width: 58px;
+        height: 28px;
+        background: #fffffb;
+        opacity: 1;
+
+        font-size: 12px;
+
+        line-height: 28px;
+        text-align: center;
+        margin-left: 16px;
+      }
+    }
+  }
 }
 .container1 {
   display: flex;
-  width: 73px;
+  width: 119px;
   flex-direction: column;
 }
 .coll {
   position: relative;
   display: flex;
+  margin-top: 9px;
 
   .coll-header1 {
     width: 231px;
@@ -868,17 +935,17 @@ export default defineComponent({
   .coll-table-topic {
     background: #f2f3f5;
     border-spacing: 0;
-    border-left: 1px solid #b8c0cc;
-    border-top: 1px solid #fff;
+    border-left: 1px solid #d2d1cf;
+    border-top: 1px solid #d2d1cf;
     td {
-      border-bottom: 1px solid #b8c0cc;
-      border-right: 1px solid #b8c0cc;
+      border-bottom: 1px solid #d2d1cf;
+      border-right: 1px solid #d2d1cf;
 
       div {
         font-size: 8px;
         width: 15px;
-        height: 15px;
-        line-height: 15px;
+        height: 17px;
+        line-height: 17px;
       }
       // font-size: 12px;
       .coll-table-topic-item {
@@ -897,18 +964,23 @@ export default defineComponent({
   }
 }
 .answer {
+  width: 410px;
   font-size: 13px;
   text-align: left;
-  height: 31px;
-  line-height: 31px;
-  font-weight: 600;
+  height: 41px;
+  line-height: 41px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-content: center;
   flex-wrap: wrap;
   padding-left: 18px;
-
+  padding-right: 13px;
+  border-left: 1px solid #b8c0cc;
+  .answer-tip {
+    color: #498ef5;
+    font-weight: 700;
+  }
   .answer-list {
     display: flex;
     justify-content: space-between;
@@ -922,12 +994,13 @@ export default defineComponent({
       width: 24px;
       height: 24px;
       line-height: 24px;
+      border-radius: 2px;
       font-size: 13px;
       font-weight: 600;
       border: 1px solid #b8c0cc;
       border-radius: 6px;
       text-align: center;
-      margin-left: 8px;
+      margin-left: 6px;
     }
     .answer-list-item_select {
       color: #fff;
@@ -936,28 +1009,31 @@ export default defineComponent({
   }
 }
 .answer-img {
-
-  height: 90px;
+  height: 74px;
 }
 .topic {
   border: 1px solid #b8c0cc;
-  width: 100%;
-  height: 161px;
+  width: 410px;
+  height: 178px;
   position: relative;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  padding-top: 6px;
+
   .topic-issue {
-    margin-top: 8px;
-    font-size: 13px;
+    font-size: 14px;
     padding-left: 10px;
     font-weight: normal;
     text-align: left;
+    font-weight: 700;
   }
   .topic-header {
+    display: none;
     color: #498ef5;
-    position: absolute;
     background: #f6f2f1;
     top: 0;
     left: 30px;
-    transform: translate(-50%, -50%);
     text-align: left;
     padding-left: 2px;
     padding-right: 2px;
@@ -974,95 +1050,99 @@ export default defineComponent({
     flex-wrap: wrap;
   }
   .topic-select-item {
-    width: 50%;
-    height: 50%;
+    width: 100%;
+    font-size: 14px;
     text-align: left;
+    font-weight: 700;
   }
 }
 .student {
-  border: 1px solid #b8c0cc;
-  width: 70px;
-  height: 125px;
+  border-bottom: 1px solid #b8c0cc;
+  width: 100%;
+  height: 175px;
   font-size: 13px;
   position: relative;
   .student-header {
     color: #498ef5;
-    position: absolute;
     background: #f6f2f1;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -50%);
     text-align: left;
     padding-left: 2px;
     padding-right: 2px;
     white-space: nowrap;
     font-weight: 600;
     font-size: 10px;
+    text-align: center;
+    margin-top: 7px;
   }
   .driver {
-    width: 57px;
-    height: 57px;
+    width: 54px;
+    height: 54px;
   }
   .driverInfo {
     font-size: 9px;
     font-weight: 600;
-    padding-top: 6px;
+    padding-top: 10px;
     text-align: left;
-    padding-left: 2px;
+    padding-left: 10px;
     div {
-      margin-bottom: 4px;
+      margin-bottom: 6px;
     }
   }
 }
 .kaoti {
-  width: 70px;
+  width: 100%;
   position: relative;
-  height: 26px;
-  border: 1px solid #b8c0cc;
+  height: 46px;
+  border-bottom: 1px solid #b8c0cc;
   font-size: 13px;
   font-weight: 600;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
   .kaoti-header {
     color: #498ef5;
-    position: absolute;
     background: #f6f2f1;
-    top: 0;
-    left: 50%;
+    width: 100%;
     font-size: 10px;
-    transform: translate(-50%, -50%);
-    text-align: left;
-    padding-left: 2px;
-    padding-right: 2px;
+    text-align: center;
     white-space: nowrap;
+    font-size: 12px;
   }
   .kaoti-headerText {
     font-size: 8px;
     font-weight: normal;
-    margin-top: 8px;
+    width: 100%;
+    text-align: center;
+    font-size: 11px;
+    color: #3d3c38;
   }
 }
 .restTime {
-  width: 70px;
+  width: 100%;
   position: relative;
-  height: 26px;
-  border: 1px solid #b8c0cc;
+  height: 42px;
   font-size: 9px;
   font-weight: 600;
-  margin-top: 6px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  // border-right: 1px solid #b8c0cc;
   .restTime-header {
     color: #498ef5;
-    position: absolute;
+    font-size: 11px;
     background: #f6f2f1;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: left;
+    width: 100%;
+    text-align: center;
     padding-left: 8px;
     padding-right: 8px;
     white-space: nowrap;
   }
   .restTime-headerText {
-    margin-top: 7px;
-    font-size: 12px;
+    font-size: 14px;
+    color: #3d3c38;
+    width: 100%;
   }
 }
 .mt6 {