增加考试页2

src/router/index.ts

@@ -27,6 +27,10 @@ const routes: Array<RouteRecordRaw> = [
     path:'/driverExam',
     component: () => import('../views/driverExam/index.vue')
   },
+  {
+    path:'/driverExamAnaly',
+    component: () => import('../views/driverExamAnaly/index.vue')
+  },
   {
     path:'/markLine',
     component: () => import('../views/markLine/index.vue')

src/views/driverExam/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="pt30 pb30 pr30 pl30 w100vw h100vh">
-    <div class="w-full h-full flex">
-      <div class="w-full flex h450">
+    <div
+      class="w-full h-full flex content-start items-start flex-wrap border-gray-200 border"
+    >
+      <div class="w-full flex h440">
         <div class="w215">
           <div class="w-full h50 lh50 font-semibold">视频输入设备</div>
           <div
@@ -13,14 +15,17 @@
           <div class="pt30 pb30 pr45 pl45">
             <img src="@/assets/img/driverExam/user_img.png" />
           </div>
-          <div class="pt20 pb20 text-left pl30">
+          <div
+            style="background-color: #fff5cc"
+            class="pt20 pb20 text-left pl30"
+          >
             <div class="font20 font-bold">姓名 中国驾考网</div>
             <div class="font20 font-bold">性别 男</div>
             <div class="font20 font-bold">车型 C1</div>
             <div class="font20 font-bold">科目一理论考试</div>
           </div>
         </div>
-        <div class="w1196">
+        <div class="w1196 flex-1">
           <div style="background-color: #fff5cc" class="lh50 font-bold">
             考试题目
           </div>
@@ -28,43 +33,95 @@
             <span class="font-bold">1、在这个路口可以掉头。</span>
           </div>
         </div>
-        <div class="w450 h450">
-          <div class="w-full flex flex-wrap">
-            <div class="w40 lh40 bg-primary-yellow">题号</div>
-            <div class="w40 lh40 bg-primary-yellow" v-for="(item,index) in 10" :key="index">{{index+1}}列</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="
-                      () => {
-                        listIndex = index * 10 + _index;
-                      }
-                    "
-                  >
-                    <div
-                      style="white-space: nowrap"
-                      :data-key="index * 10 + _index + 1"
-                      class="coll-table-topic-item"
+        <div class="w440 h440 bg-driver-exam">
+          <div class="w-full">
+            <div class="flex flex-wrap">
+              <div class="w40 lh40 bg-primary-yellow">题号</div>
+              <div
+                class="w40 lh40 bg-primary-yellow"
+                v-for="(item, index) in 10"
+                :key="index"
+              >
+                {{ index + 1 }}列
+              </div>
+            </div>
+
+            <div class="flex flex-col flex-wrap w-full h400 content-start">
+              <div class="w40 overflow-hidden flex flex-col">
+                <div
+                  class="w40 lh40 bg-primary-yellow"
+                  v-for="(item, index) in 10"
+                  :key="index"
+                >
+                  {{ index + 1 }}行
+                </div>
+              </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="{
-                        'text-red': list[index * 10 + _index].isError,
+                        collselected: index * 10 + _index == listIndex,
                       }"
+                      :data-key="index * 10 + _index + 1"
+                      :key="_index"
+                      @click="
+                        () => {
+                          listIndex = index * 10 + _index;
+                        }
+                      "
                     >
-                      {{ list[index * 10 + _index].userAnswerLetter || "" }}
-                    </div>
-                  </td>
-                </tr>
-              </table>
+                      <div
+                        style="white-space: nowrap"
+                        :data-key="index * 10 + _index + 1"
+                        class="coll-table-topic-item"
+                        :class="{
+                          'text-red': list[index * 10 + _index].isError,
+                        }"
+                      >
+                        {{ list[index * 10 + _index].userAnswerLetter || "" }}
+                      </div>
+                    </td>
+                  </tr>
+                </table>
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="w-full bg-driver-exam h84 pl30 pr450 flex justify-between">
+        <div class="pt15 pb15 flex w500 text-left">
+          <div class="font-bold flex">
+            <div class="inline-block">
+              <div>剩余时间</div>
+              <div class="pl20">00:39:00</div>
+            </div>
+
+            <div class="ml90 font-bold inline-block">您选择的答案：√</div>
+          </div>
+        </div>
+        <div class="flex cursor-pointer mt20">
+          <div
+            class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0"
+          >
+            √
+          </div>
+          <div class="w46 lh46 h46 answer-select font20 font-bold flex-grow-0">
+            ×
+          </div>
+        </div>
+      </div>
+      <div
+        class="border-b-gray-200 border-b w-full h84 text-left pr30 pl30 flex justify-between"
+      >
+        <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 class="w120 lh46 bottom-button">交卷</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -75,7 +132,58 @@ import { defineComponent, ref } from "vue";
 export default defineComponent({
   setup() {
     return {
-      list: ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]),
+      list: ref([
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+      ]),
       listIndex: ref(0),
     };
   },
@@ -83,6 +191,29 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.pr23vw{
+  padding-right: 23vw;
+}
+.bottom-button {
+  text-align: center;
+  border: 1px solid #f9de5b;
+  cursor: pointer;
+}
+.bottom-button:hover {
+  background: #fff7cc;
+}
+
+.answer-select {
+  background: #fffdf2;
+
+  border: 1px solid #f9de5b;
+}
+.answer-select:hover{
+  background: #FFF7CC;
+}
+.bg-driver-exam {
+  background: #f5f5f3;
+}
 .h100vh {
   height: 100vh;
 }
@@ -96,6 +227,7 @@ export default defineComponent({
 .coll {
   position: relative;
   display: flex;
+  cursor: pointer;
 
   .coll-header1 {
     width: 231px;
@@ -144,15 +276,16 @@ export default defineComponent({
     border-spacing: 0;
     border-left: 1px solid #d2d1cf;
     border-top: 1px solid #d2d1cf;
+    display: table;
     td {
       border-bottom: 1px solid #d2d1cf;
       border-right: 1px solid #d2d1cf;
 
       div {
         font-size: 8px;
-        width: 40px;
-        height: 40px;
-        line-height: 40px;
+        width: 39px;
+        height: 39px;
+        line-height: 39px;
       }
       // font-size: 12px;
       .coll-table-topic-item {
@@ -165,7 +298,7 @@ export default defineComponent({
       }
     }
     .collselected {
-      background: #498ef5;
+      background: #F9DE5B;
       color: #fff;
     }
   }

src/views/driverExamAnaly/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="">
+    <img class="w-full" src="@/assets/img/login/top_bg.png" />
+    <div class="pr30 pl30">
+      <div
+        class="flex w-full flex-col h137 justify-center content-center relative"
+      >
+        <div class="flex w72 h40 right0 round4 items-center justify-center absolute bottom16 bg-primary-yellow">
+          <img
+            class="w15 h15 mr5"
+            src="@/assets/img/driverExamAnaly/close_icon.png"
+          />
+          <span class="font16">关闭</span>
+        </div>
+
+        <div class="font0 overflow-hidden">
+          <span class="font50 text-red-500">3</span>
+          <span class="font16 text-red-500">分</span>
+        </div>
+
+        <div class="font16 w-full">你的成绩</div>
+      </div>
+      <div
+        class="bg-red-100 h46 lh46 w-full pr20 pl20 text-left"
+        style="color: #66645c"
+      >
+        提示：打"√"表示是正确答案；打"×"表示你答错的答案；答题是红色表示没有做。
+      </div>
+      <div class="pt30 pb30 pt30 pb30">
+        <div class="round10 pt30 pr30 pl30 pb30 text-left round10">
+          1、驾驶机动车不妨碍其他车辆正常行驶时，可连续变更两条车道。
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+</style>