模拟考试开始考试界面改版2

src/components/mask/beforeSubmitMask.vue

@@ -5,20 +5,23 @@
         <div class="title">
           <span>考试确认窗口</span>
         </div>
-        <div class="mid">
-          <div class="mid-line1">操作提示：</div>
-          <div class="mid-line2">
-            你当前考试答对{{ correctScore }}题，答错{{ errorScore }}题，未答{{
-              total - correctScore - errorScore
-            }}题
-          </div>
-          <div class="mid-line3">
-            <span>1.点击【确认交卷】,将提交考试成绩,结束考试！</span>
-          </div>
-          <div class="mid-line4">
-            <span>1.点击【继续考试】,将关闭本窗口,继续考试！</span>
+        <div class="" style="background: #306ace">
+          <div class="mid">
+            <div class="mid-line1">操作提示：</div>
+            <div class="mid-line2">
+              你当前考试答对{{ correctScore }}题，答错{{ errorScore }}题，未答{{
+                total - correctScore - errorScore
+              }}题
+            </div>
+            <div class="mid-line3">
+              <span>1.点击【确认交卷】,将提交考试成绩,结束考试！</span>
+            </div>
+            <div class="mid-line4">
+              <span>2.点击【继续考试】,将关闭本窗口,继续考试！</span>
+            </div>
           </div>
         </div>
+
         <div class="bottom">
           <button @click="sendPaper">确认交卷</button>
           <button @click="cancelSubmit">继续考试</button>
@@ -92,56 +95,61 @@ button {
   align-items: center;
   justify-content: center;
   .dialog {
-    width: 420px;
+    width: 381px;
     height: 210px;
     background: #fff;
     .title {
       width: 100%;
       line-height: 40px;
       height: 40px;
-      background: #498ef5;
+      background: #306ace;
       color: #fff;
       font-size: 14px;
+      font-weight: 700;
     }
     .mid {
-      width: 100%;
+      width: 350px;
+      margin: 0 auto;
       background: #fff;
-      height: 120px;
+      height: 115px;
       font-size: 14px;
-      padding-left: 10px;
-      padding-right: 10px;
+      padding-left: 18px;
+      padding-top: 14px;
+      font-size: 13px;
+      // padding-right: 10px;
       .mid-line1 {
         line-height: 25px;
         height: 25px;
         text-align: left;
+        line-height: 25px;
       }
       .mid-line2 {
         text-align: left;
-        line-height: 30px;
+        line-height: 25px;
       }
       .mid-line3 {
         text-align: left;
-        line-height: 30px;
+        line-height: 25px;
       }
       .mid-line4 {
         text-align: left;
-        line-height: 30px;
+        line-height: 25px;
       }
     }
     .bottom {
-      background: #498ef5;
+      background: #306ace;
       width: 100%;
-      height: 50px;
+      height: 59px;
       display: flex;
       justify-content: center;
       align-content: center;
       align-items: center;
       button:nth-child(1) {
-        height: 30px;
-        margin-right: 30px;
+        height: 38px;
+        margin-right: 27px;
       }
       button:nth-child(2) {
-        height: 30px;
+        height: 38px;
       }
     }
   }

src/components/mask/submitMask.vue

@@ -35,7 +35,7 @@
 import { defineProps, reactive, toRefs, ref } from 'vue';
 import router from '@/router/';
 import Phone from '@/utils/phone';
-export default {
+export default { 
   setup(props, { emit }) {
     const state = reactive({
       count: 0,

src/views/exam/begin.vue

@@ -1,42 +1,47 @@
 <template>
   <div class="container">
+    <img @click="backView" src="@/assets/img/backButton.png" class="backButton" />
     <div style="background: #f4f3ef">
       <div class="header-text-left">Sub of a Driver Training System</div>
       <div class="headerImg"><img :src="subjectImg" /></div>
       <div class="header-text-right">Sub of a Driver Training System</div>
-      <div class="content">
-        <div class="box1">
-          <div class="info">考试须知：</div>
-          <div>1.遵守考场纪律，服从监考人员指挥。</div>
-          <div>2.进入考场、手机关机。禁止抽烟，禁止吃零食。</div>
-          <div>3.未经工作人员允许，考生禁止随意出入考场。</div>
-          <div>4.考场内禁止大声题哗，禁止随意走动。</div>
-          <div>5.考试中认真答题，不准交头接耳。</div>
-          <div>6.考试中不准冒名顶替，不准弄虚作假。</div>
-          <div>7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</div>
-          <div>8.爱护公物及考试设备。</div>
-        </div>
-        <div class="box2">
-          <div class="info">驾考理论考试01号考台：</div>
-          <div style="color: #ba2f35" class="">身份证号：123456789101112131415161718</div>
-          <div style="color: #ba2f35">考生姓名：极速驾培</div>
-          <div class="pl138 mt15">
-            <div
-              @click="
-                () => {
-                  push({
-                    name: 'examTest',
-                    query: query,
-                  });
-                }
-              "
-              class="exam-button"
-            >
-              开始考试
-            </div>
+      <div style="background: #fff; width: 100%; overflow: hidden" class="">
+        <div class="content">
+          <div class="box1">
+            <div class="info">考试须知：</div>
+            <div>1.遵守考场纪律，服从监考人员指挥。</div>
+            <div>2.进入考场、手机关机。禁止抽烟，禁止吃零食。</div>
+            <div>3.未经工作人员允许，考生禁止随意出入考场。</div>
+            <div>4.考场内禁止大声题哗，禁止随意走动。</div>
+            <div>5.考试中认真答题，不准交头接耳。</div>
+            <div>6.考试中不准冒名顶替，不准弄虚作假。</div>
+            <div>7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</div>
+            <div>8.爱护公物及考试设备。</div>
           </div>
-          <div class="mt15" style="color: #32312d">
-            操作提示：每题考试答案确认后，点击【下一题】，电脑立即判定所选答案，如选择错误，系统将提示正确答案，提示后不允许修改答案。
+          <div class="box2">
+            <div class="info">驾考理论考试01号考台：</div>
+            <div style="color: #ba2f35" class="box2-id">身份证号：123456789101112131415161718</div>
+            <div class="box2-space1"></div>
+            <div class="box2-name" style="color: #ba2f35">考生姓名：极速驾培</div>
+            <div class="pl124 exam-container">
+              <div
+                @click="
+                  () => {
+                    push({
+                      name: 'examTest',
+                      query: query,
+                    });
+                  }
+                "
+                class="exam-button"
+              >
+                开始考试
+              </div>
+            </div>
+            <div class="mt14" style="color: #ba2f35">点击"确认"按钮开始考试</div>
+            <div class="box2-tip" style="color: #666769">
+             操作提示：每题考试答案确认后，点击【下一题】，电脑立即判定所选答案，如选择错误，系统将提示正确答案，提示后不允许修改答案。
+            </div>
           </div>
         </div>
       </div>
@@ -58,7 +63,8 @@ export default defineComponent({
     //   'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjllNTU3NDk1LWQyOGQtNDMyNy1hYTBjLTdjOTk2OTk5NTk1YiJ9.GvGgys5erlFYJMLEhk2S1e7W_9CKDJohfXfW8fZpitkpZ8RWni5u9VvTGjl8dhD1916s-4MTM_7TsNaTNwsuPg',
     // );
     //旋转你的屏幕
-    // const phone = new Phone();
+    const phone = new Phone();
+    const backView = phone.backView.bind(phone)
     const push = useRouter().push;
     const route = useRoute();
     const query = route.query;
@@ -77,36 +83,59 @@ export default defineComponent({
       query,
       push,
       subjectImg,
+      backView
     };
   },
 });
 </script>
 
 <style lang="scss" scoped>
+.font11 {
+  font-size: 11px;
+}
+.mt14 {
+  margin-top: 14px;
+}
 .pl138 {
   padding-left: 138px;
 }
+.pl124 {
+  padding-left: 124px;
+}
 .pl24 {
   padding-left: 24px;
 }
-.exam-button {
-  width: 93px;
-  height: 28px;
-  background: #02a9ed;
-  opacity: 1;
-  line-height: 28px;
-  color: #fff;
-  text-align: center;
-  border-radius: 4px;
-  font-size: 16px;
+.exam-container {
+  margin-top: 18px;
+  .exam-button {
+    width: 106px;
+    height: 27px;
+    background: #fff;
+    opacity: 1;
+    line-height: 27px;
+    color: #38393b;
+    text-align: center;
+    border-radius: 4px;
+    font-size: 16px;
+    border: 1px solid #a1a2a4;
+    border-radius: 0;
+  }
 }
+
 .container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  background: #f4f3ef;
+  background: #fff;
+  position: relative;
+  .backButton{
+    position: absolute;
+    top: 28px;
+    left: 13px;
+    width: 22px;
+    height: 22px;
+  }
 }
 .header {
   width: 100%;
@@ -127,7 +156,6 @@ export default defineComponent({
   color: #a9a9a1;
   text-align: right;
   height: 13px;
-  line-height: 13px;
   font-size: 8px;
   border-bottom: 1px solid #d8d7d3;
   padding-right: 15px;
@@ -149,20 +177,23 @@ export default defineComponent({
   height: 67vh;
   padding: 0 0;
   margin: 0 auto;
-  margin-top: 4px;
+  margin-top: 16px;
   display: flex;
   flex-wrap: wrap;
   border: 1px solid #eae9e5;
+  background: #f5f6f8;
   .box1 {
     width: 50%;
     height: 100%;
-    padding-top: 18px;
-    padding-left: 17px;
+    padding-top: 15px;
+    padding-left: 20px;
     color: #3d3c38;
     border-right: 1px solid #eae9e5;
     .info {
       font-size: 14px;
       margin-bottom: 7px;
+      font-weight: 700;
+      font-size: 14px;
     }
     div {
       text-align: left;
@@ -177,8 +208,26 @@ export default defineComponent({
     padding-top: 18px;
     padding-left: 17px;
     font-size: 13px;
+    .box2-space1 {
+      height: 5px;
+    }
+    .box2-id{
+      font-weight: 700;
+      font-size: 13px;
+    }
+     .box2-name{
+      font-weight: 700;
+      font-size: 13px;
+    }
+    .box2-tip{
+      margin-top: 7px;
+      font-size: 11px;
+    }
     .info {
       margin-bottom: 7px;
+      font-size: 14px;
+      font-weight: 700;
+
     }
   }
 }