修复了样式混乱的bug

src/App.vue

@@ -29,6 +29,7 @@
 * {
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
  
 }
 #app {

src/hooks/exam/threeExam.ts

@@ -671,7 +671,8 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
                 path: '/threeExamAnaly',
                 query: {
                     wrongListRes: JSON.stringify(wrongListRes),
-                    score: score
+                    score: score,
+                    showScore:'1'
                 }
             })
         }).catch(err => {
@@ -679,7 +680,8 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
                 path: '/threeExamAnaly',
                 query: {
                     wrongListRes: JSON.stringify(wrongListRes),
-                    score: score
+                    score: score,
+                    showScore:'1'
                 }
             })
 

src/main.ts

@@ -3,4 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './tailwindcss.css'
+// router.beforeEach(guard=>{
+//     console.log(guard)
+// })
 createApp(App).use(store).use(router).mount('#app')

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import Login from '../views/login/index.vue'
-
+import Error404 from '../views/error404/index.vue'
 const routes: Array<RouteRecordRaw> = [
   // {
   //   path: '/about',
@@ -10,6 +10,14 @@ const routes: Array<RouteRecordRaw> = [
   //   // which is lazy-loaded when the route is visited.
   //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
   // },
+  {
+    path: '/',
+    name: '',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: Login
+  },
   {
     path: '/login',
     name: 'login',
@@ -18,6 +26,7 @@ const routes: Array<RouteRecordRaw> = [
     // which is lazy-loaded when the route is visited.
     component: Login
   },
+  
   {
     path: '/studySkill',
     component: () => import('../views/studySkill/index.vue')
@@ -86,6 +95,10 @@ const routes: Array<RouteRecordRaw> = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/home/index.vue')
+  },
+  {
+    path:'/:pathMatch(.*)',
+    component:Error404
   }
 ]
 

src/views/driverExam/index.vue

@@ -13,11 +13,11 @@
             第1考台
           </div>
           <div class="pt30 pb30 pr45 pl45">
-            <img src="@/assets/img/driverExam/user_img.png" />
+            <img class="w122" src="@/assets/img/driverExam/user_img.png" />
           </div>
           <div
             style="background-color: #fff5cc"
-            class="pt20 pb20 text-left pl30"
+            class="pt20 pb20 text-left pl30 flex-grow h167"
           >
             <div class="font20 font-bold">姓名 中国驾考网</div>
             <div class="font20 font-bold">性别 男</div>
@@ -119,7 +119,7 @@
           </div>
         </div>
       </div>
-      <div class="w-full bg-driver-exam h84 pl30 pr450 flex justify-between">
+      <div class="w-full bg-driver-exam h84 pl30 flex justify-between">
         <div class="pt15 pb15 flex w500 text-left">
           <div class="font-bold flex">
             <div class="inline-block">

src/views/error404/index.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img
+          class="pic-404__parent"
+          src="@/assets/img/error404/404.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child left"
+          src="@/assets/img/error404/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child mid"
+          src="@/assets/img/error404/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child right"
+          src="@/assets/img/error404/404_cloud.png"
+          alt="404"
+        />
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">404错误!</div>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+        </div>
+        <div>
+          <div>
+            <router-link to="/home/sysconfig" class="bullshit__return-home">
+              返回系统首页
+            </router-link>
+          </div>
+    
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Page404",
+  computed: {
+    message() {
+      return "找不到网页！";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container {
+  transform: translate(-50%, -50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  text-align: left;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/reviewDriverError/index.vue

@@ -25,10 +25,12 @@
             style="background-color: #d9ffeb"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/smile_express.png"
             />
-            <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
+            <span class="lh60 align-middle" style="color: #21a65f">
+              恭喜！回答正确！</span
+            >
           </div>
           <div
             v-if="list[listIndex].isComplete && list[listIndex].isError"
@@ -36,13 +38,13 @@
             style="background-color: rgba(255, 220, 217, 1)"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/cry_express.png"
             />
             <span
+              class="lh60 align-middle"
               v-if="list[listIndex].questionType !== 3"
               style="color: rgba(239, 54, 41, 1)"
-              class="lh60"
             >
               正确答案是:{{
                 switchAnswerBySelect(list[listIndex].answer, listIndex)
@@ -51,7 +53,6 @@
             <span
               v-if="list[listIndex].questionType === 3"
               style="color: rgba(239, 54, 41, 1)"
-              class="lh60"
             >
               正确答案是:{{
                 switchAnswerBySelect(
@@ -180,7 +181,7 @@
           <div class="flex items-center">
             <div class="pr2 pl2">转到</div>
             <input
-             @keydown.enter="setPageToListIndex(listPageNum)"
+              @keydown.enter="setPageToListIndex(listPageNum)"
               class="outline-none input-border w35 h30 text-center"
               type="text"
               v-model.number="listPageNum"
@@ -301,7 +302,7 @@ export default defineComponent({
         {
           autoAnswer: false,
           countDown: false,
-          recordUncomplete:false
+          recordUncomplete: false,
         }
       ),
       changeSysConfig,

src/views/reviewThreeError/index.vue

@@ -27,10 +27,10 @@
             style="background-color: #d9ffeb"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/smile_express.png"
             />
-            <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
+            <span style="color: #21a65f" class="lh60 align-middle"> 恭喜！回答正确！</span>
           </div>
           <div
             v-if="list[listIndex].isComplete && list[listIndex].isError"
@@ -38,13 +38,13 @@
             style="background-color: rgba(255, 220, 217, 1)"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/cry_express.png"
             />
             <span
               v-if="list[listIndex].type !== 3"
               style="color: rgba(239, 54, 41, 1)"
-              class="lh60"
+              class="lh60 align-middle"
             >
               正确答案是:{{
                 switchPageNumBySelect(list[listIndex].answertrue)

src/views/studySkill/index.vue

@@ -25,10 +25,10 @@
             style="background-color: #d9ffeb"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/smile_express.png"
             />
-            <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
+            <span style="color: #21a65f" class="lh60 align-middle"> 恭喜！回答正确！</span>
           </div>
           <div
             v-if="list[listIndex].isComplete && list[listIndex].isError"
@@ -36,13 +36,13 @@
             style="background-color: rgba(255, 220, 217, 1)"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/cry_express.png"
             />
             <span
               v-if="list[listIndex].questionType !== 3"
               style="color: rgba(239, 54, 41, 1)"
-              class="lh60"
+              class="lh60 align-middle"
             >
               正确答案是:{{
                 switchAnswerBySelect(list[listIndex].answer, listIndex)

src/views/threeExam/index.vue

@@ -12,12 +12,12 @@
           >
             第1考台
           </div>
-          <div class="pt30 pb30 pr45 pl45">
-            <img src="@/assets/img/driverExam/user_img.png" />
+          <div class="pt30 pb30 pr45 pl45 ">
+            <img class="w-full" src="@/assets/img/driverExam/user_img.png" />
           </div>
           <div
             style="background-color: #fff5cc"
-            class="pt20 pb20 text-left pl30"
+            class="pt20 pb20 text-left pl30 h167"
           >
             <div class="font20 font-bold">姓名 中国驾考网</div>
             <div class="font20 font-bold">性别 男</div>

src/views/threeExamAnaly/index.vue

@@ -20,12 +20,12 @@
           <span class="font16">关闭</span>
         </div>
 
-        <div class="font0 overflow-hidden">
+        <div v-if="showScore=='1'" class="font0 overflow-hidden">
           <span class="font50 text-red-500">{{ score }}</span>
           <span class="font16 text-red-500">分</span>
         </div>
 
-        <div class="font16 w-full">你的成绩</div>
+        <div v-if="showScore=='1'" class="font16 w-full">你的成绩</div>
       </div>
       <div
         class="bg-red-100 h46 lh46 w-full pr20 pl20 text-left"

src/views/threeStudyExam/index.vue

@@ -27,10 +27,10 @@
             style="background-color: #d9ffeb"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/smile_express.png"
             />
-            <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
+            <span style="color: #21a65f" class="lh60 align-middle"> 恭喜！回答正确！</span>
           </div>
           <div
             v-if="list[listIndex].isComplete && list[listIndex].isError"
@@ -38,13 +38,13 @@
             style="background-color: rgba(255, 220, 217, 1)"
           >
             <img
-              class="inline-block w42 h42"
+              class="inline-block w42 h42 align-middle"
               src="@/assets/img/studySkill/cry_express.png"
             />
             <span
               v-if="list[listIndex].type !== 3"
               style="color: rgba(239, 54, 41, 1)"
-              class="lh60"
+              class="lh60 align-middle"
             >
               正确答案是:{{
                 switchPageNumBySelect(list[listIndex].answertrue)