增加考试页

src/api/login/login.ts

@@ -7,8 +7,23 @@ export default {
             method: 'get'
         })
 
+    },
+    login(data: {
+        code:string,
+        username:string,
+        password:string,
+        uuid:string
+
+    }) {
+        return request({
+            url: '/login',
+            method: 'post',
+            data: data
+        })
+
     }
 
+
 }
 
 

src/components/preImage/index.vue

@@ -1,23 +1,53 @@
 <template>
-  <img src="" />
+  <img
+    @click="
+      () => {
+        preImageVisible = true;
+      }
+    "
+    :src="src"
+    class="w-full h-full"
+  />
   <div
-    class="w100vw flex justify-center content-center h100vh absolute bg-black opacity3"
+    v-show="preImageVisible"
+    class="w100vw top0 left0 h100vh z-20 flex justify-center items-center fixed mask-bg-black"
   >
-    <div class="w600 h632 bg-white"></div>
+    <div class="bg-white pt30 pr110 pl110 relative round5 overflow-hidden">
+      <img
+        @click="
+          () => {
+            preImageVisible = false;
+          }
+        "
+        class="w53 h53 absolute right30"
+        :src="yellow_close"
+      />
+      <img :src="src" />
+      <div class="w-full h222 flex text-center items-center justify-center content-center flex-wrap">
+        <slot></slot>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-
+import { defineComponent, ref } from "vue";
+import yellow_close from "@/assets/img/markLine/yellow_close.png";
 export default defineComponent({
   setup() {
-    return {};
+    return {
+      yellow_close,
+    };
+  },
+  data() {
+    return {
+      preImageVisible: false,
+    };
   },
   props: {
     src: {
       type: String,
-      default: '',
+      default: "",
     },
     width: {
       type: Number,
@@ -32,7 +62,16 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.mask-bg-black {
+  background: rgba(0, 0, 0, 0.45);
+}
 .opacity3 {
   opacity: 0.3;
 }
+.h100vh {
+  height: 100vh;
+}
+.w100vw {
+  width: 100vw;
+}
 </style>

src/router/index.ts

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

src/views/driverExam/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="pt30 pb30 pr30 pl30 w100vw h100vh">
+    <div class="w-full h-full flex">
+      <div class="w-full flex h450">
+        <div class="w215">
+          <div class="w-full h50 lh50 font-semibold">视频输入设备</div>
+          <div
+            class="w-full h50 lh50 font-semibold"
+            style="background-color: #fff5cc"
+          >
+            第1考台
+          </div>
+          <div class="pt30 pb30 pr45 pl45">
+            <img src="@/assets/img/driverExam/user_img.png" />
+          </div>
+          <div 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 style="background-color: #fff5cc" class="lh50 font-bold">
+            考试题目
+          </div>
+          <div class="text-left pr20 pl20 pt20">
+            <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"
+                      :class="{
+                        'text-red': list[index * 10 + _index].isError,
+                      }"
+                    >
+                      {{ list[index * 10 + _index].userAnswerLetter || "" }}
+                    </div>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {
+      list: ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]),
+      listIndex: ref(0),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.h100vh {
+  height: 100vh;
+}
+.w1196 {
+  width: 1196px;
+}
+.bg-primary-yellow {
+  background-color: #f9de5b;
+}
+
+.coll {
+  position: relative;
+  display: flex;
+
+  .coll-header1 {
+    width: 231px;
+    height: 21px;
+    border-spacing: 0;
+    border-right: 1px solid #b8c0cc;
+    div {
+      box-sizing: border-box;
+    }
+    .coll-header1-row {
+      width: 21px;
+      height: 21px;
+      line-height: 21px;
+      background: #498ef5;
+      border-right: 1px solid #b8c0cc;
+      font-size: 10px;
+      white-space: nowrap;
+    }
+    // .coll-header1-row_border{
+    //   border-bottom: 1px solid #fff;
+    // }
+  }
+  .coll-header2 {
+    // position: absolute;
+    // top: 0px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    border-spacing: 0;
+    height: 237px;
+    width: 21px;
+
+    .coll-header2-col {
+      width: 23px;
+      height: 25px;
+      border-top: 1px solid #b8c0cc;
+      font-size: 10px;
+      line-height: 21px;
+      background: #498ef5;
+      white-space: nowrap;
+    }
+  }
+
+  .coll-table-topic {
+    background: #f2f3f5;
+    border-spacing: 0;
+    border-left: 1px solid #d2d1cf;
+    border-top: 1px solid #d2d1cf;
+    td {
+      border-bottom: 1px solid #d2d1cf;
+      border-right: 1px solid #d2d1cf;
+
+      div {
+        font-size: 8px;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+      }
+      // font-size: 12px;
+      .coll-table-topic-item {
+        border: none;
+
+        white-space: nowrap;
+        div {
+          white-space: nowrap;
+        }
+      }
+    }
+    .collselected {
+      background: #498ef5;
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/login/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="w-full vh100">
-    <div class="w-full flex-wrap">
+    <div class="w-full flex-wrap ">
       <img class="w-full" src="@/assets/img/login/top_bg.png" />
-      <div class="w-full bg-primary-yellow h46 lh46 pl30 flex-wrap">
+      <div class="w-full bg-primary-yellow h46 lh46 pl30 flex-wrap flex cursor-pointer">
         <div class="w80 bg-primary-darkyellow">首页</div>
         <div class="w80">体验</div>
       </div>
@@ -13,18 +13,32 @@
         <div class="content">
           <div class="row">
             <img class="preicon" src="@/assets/img/login/username_icon.png" />
-            <input placeholder="请输入账号" class="username" />
+            <input
+              v-model="loginForm.username"
+              placeholder="请输入账号"
+              class="username"
+            />
           </div>
           <div class="row">
             <img class="preicon" src="@/assets/img/login/password_icon.png" />
             <input
+              v-model="loginForm.password"
               :checked="isSavePassword"
               placeholder="请输入密码"
               type="password"
               class="password"
             />
           </div>
-          <img v-if="codeUrl" :src="codeUrl" />
+          <div class="row mt20 flex justify-between">
+            <img class="w80 h30" v-if="codeUrl" :src="codeUrl" />
+            <input
+              v-model="loginForm.code"
+              placeholder="验证码"
+              type="text"
+              class="w160 h30 pl10 border-0 outline-0 border-light-gray"
+            />
+          </div>
+
           <div class="w-full save">
             <input class="save-input" type="checkbox" />
             <span class="save-text">记住用户名和密码</span>
@@ -69,16 +83,28 @@ export default defineComponent({
       isSavePassword: false,
       loginForm: {
         uuid: "",
-        username: "",
-        password: "",
+        code: "",
+        username: "hc",
+        password: "123456",
       },
     });
     return {
       ...toRefs(state),
     };
   },
+  mounted() {
+    this.getCaptchaImage()
+  },
   methods: {
     loginByPassword() {
+      console.log("登录了");
+      api.login.login(this.loginForm).then(res=>{
+        console.log(res.data)
+
+      })
+
+    },
+    getCaptchaImage() {
       api.login.captchaImage().then((res) => {
         // console.log(res)
         this.codeUrl = "data:image/gif;base64," + res.data.img;
@@ -90,6 +116,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss"  scoped>
+.border-light-gray {
+  border: 1px solid #d9d9d9;
+}
 .mid {
   display: flex;
   justify-content: space-between;
@@ -107,7 +136,7 @@ export default defineComponent({
     align-items: flex-start;
     justify-content: center;
     border-radius: 10px 10px 10px 10px;
-    height: 401px;
+    height: 451px;
 
     .submit {
       margin-top: 50px;
@@ -250,8 +279,6 @@ export default defineComponent({
   background-color: #f9de5b;
 }
 .bg-primary-darkyellow {
-
   background-color: #f2c900;
 }
-
 </style>

src/views/markLine/index.vue

@@ -10,12 +10,17 @@
       </div>
     </div>
     <div class="text-left font16">
-      <div class=" inline-block text-left ml20">
-        <div class="w200 h184 justify-center text-center border-gray pt12 inline-block cursor-pointer">
-          <img
-            class="w100 h100 margin-center"
-            src="@/assets/img/home/forbidden_mark.png"
-          />
+      <div class="inline-block text-left ml20">
+        <div
+          class="w200 h184 justify-center text-center border-gray pt12 inline-block cursor-pointer"
+        >
+          <div class="w100 h100 margin-center">
+            <preImage :src="forbiddenMark">
+              <div class="font-bold font24">向左转弯</div>
+              <div class="font24 w-full">5/29</div>
+            </preImage>
+          </div>
+
           <div class="mt21 font-bold">立交直行和左转弯行驶</div>
         </div>
       </div>
@@ -25,10 +30,16 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+import preImage from "@/components/preImage/index.vue";
+import forbiddenMark from "@/assets/img/home/forbidden_mark.png";
 export default defineComponent({
   setup() {
-    return {};
+    return {
+      forbiddenMark: forbiddenMark,
+    };
+  },
+  components: {
+    preImage,
   },
 });
 </script>