增加标志页

package-lock.json

@@ -2226,6 +2226,27 @@
         "whatwg-fetch": "^3.6.2"
       },
       "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
         "autoprefixer": {
           "version": "10.4.14",
           "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -2240,6 +2261,26 @@
             "postcss-value-parser": "^4.2.0"
           }
         },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
         "postcss": {
           "version": "8.4.23",
           "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
@@ -2530,47 +2571,6 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

postcss.config.js

@@ -1,5 +1,6 @@
 const purgecss = require('@fullhuman/postcss-purgecss')
 const IN_PRODUCTION = process.env.NODE_ENV === "production";
+
 module.exports = {
   plugins: [IN_PRODUCTION && purgecss({
     content: [`./public/**/*.html`, `./src/**/*.vue`],
@@ -11,5 +12,5 @@ module.exports = {
     safelist: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/,
       /^router-link(|-exact)-active$/, /data-v-.*/, /^el-/, /^class/, /^is-/
     ],
-  })]
+  }),require('autoprefixer')(),require('tailwindcss')()]
 }

src/App.vue

@@ -24,9 +24,11 @@
 @import url("./assets/css/pr.css");
 @import url("./assets/css/pt.css");
 @import url("./assets/css/pb.css");
+@import url("./assets/css/radius.css");
 * {
   padding: 0;
   margin: 0;
+ 
 }
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/assets/css/radius.css

@@ -0,0 +1,399 @@
+.round0 {
+    border-radius: 0px;
+}
+
+.round1 {
+    border-radius: 1px;
+}
+
+.round2 {
+    border-radius: 2px;
+}
+
+.round3 {
+    border-radius: 3px;
+}
+
+.round4 {
+    border-radius: 4px;
+}
+
+.round5 {
+    border-radius: 5px;
+}
+
+.round6 {
+    border-radius: 6px;
+}
+
+.round7 {
+    border-radius: 7px;
+}
+
+.round8 {
+    border-radius: 8px;
+}
+
+.round9 {
+    border-radius: 9px;
+}
+
+.round10 {
+    border-radius: 10px;
+}
+
+.round11 {
+    border-radius: 11px;
+}
+
+.round12 {
+    border-radius: 12px;
+}
+
+.round13 {
+    border-radius: 13px;
+}
+
+.round14 {
+    border-radius: 14px;
+}
+
+.round15 {
+    border-radius: 15px;
+}
+
+.round16 {
+    border-radius: 16px;
+}
+
+.round17 {
+    border-radius: 17px;
+}
+
+.round18 {
+    border-radius: 18px;
+}
+
+.round19 {
+    border-radius: 19px;
+}
+
+.round20 {
+    border-radius: 20px;
+}
+
+.round21 {
+    border-radius: 21px;
+}
+
+.round22 {
+    border-radius: 22px;
+}
+
+.round23 {
+    border-radius: 23px;
+}
+
+.round24 {
+    border-radius: 24px;
+}
+
+.round25 {
+    border-radius: 25px;
+}
+
+.round26 {
+    border-radius: 26px;
+}
+
+.round27 {
+    border-radius: 27px;
+}
+
+.round28 {
+    border-radius: 28px;
+}
+
+.round29 {
+    border-radius: 29px;
+}
+
+.round30 {
+    border-radius: 30px;
+}
+
+.round31 {
+    border-radius: 31px;
+}
+
+.round32 {
+    border-radius: 32px;
+}
+
+.round33 {
+    border-radius: 33px;
+}
+
+.round34 {
+    border-radius: 34px;
+}
+
+.round35 {
+    border-radius: 35px;
+}
+
+.round36 {
+    border-radius: 36px;
+}
+
+.round37 {
+    border-radius: 37px;
+}
+
+.round38 {
+    border-radius: 38px;
+}
+
+.round39 {
+    border-radius: 39px;
+}
+
+.round40 {
+    border-radius: 40px;
+}
+
+.round41 {
+    border-radius: 41px;
+}
+
+.round42 {
+    border-radius: 42px;
+}
+
+.round43 {
+    border-radius: 43px;
+}
+
+.round44 {
+    border-radius: 44px;
+}
+
+.round45 {
+    border-radius: 45px;
+}
+
+.round46 {
+    border-radius: 46px;
+}
+
+.round47 {
+    border-radius: 47px;
+}
+
+.round48 {
+    border-radius: 48px;
+}
+
+.round49 {
+    border-radius: 49px;
+}
+
+.round50 {
+    border-radius: 50px;
+}
+
+.round51 {
+    border-radius: 51px;
+}
+
+.round52 {
+    border-radius: 52px;
+}
+
+.round53 {
+    border-radius: 53px;
+}
+
+.round54 {
+    border-radius: 54px;
+}
+
+.round55 {
+    border-radius: 55px;
+}
+
+.round56 {
+    border-radius: 56px;
+}
+
+.round57 {
+    border-radius: 57px;
+}
+
+.round58 {
+    border-radius: 58px;
+}
+
+.round59 {
+    border-radius: 59px;
+}
+
+.round60 {
+    border-radius: 60px;
+}
+
+.round61 {
+    border-radius: 61px;
+}
+
+.round62 {
+    border-radius: 62px;
+}
+
+.round63 {
+    border-radius: 63px;
+}
+
+.round64 {
+    border-radius: 64px;
+}
+
+.round65 {
+    border-radius: 65px;
+}
+
+.round66 {
+    border-radius: 66px;
+}
+
+.round67 {
+    border-radius: 67px;
+}
+
+.round68 {
+    border-radius: 68px;
+}
+
+.round69 {
+    border-radius: 69px;
+}
+
+.round70 {
+    border-radius: 70px;
+}
+
+.round71 {
+    border-radius: 71px;
+}
+
+.round72 {
+    border-radius: 72px;
+}
+
+.round73 {
+    border-radius: 73px;
+}
+
+.round74 {
+    border-radius: 74px;
+}
+
+.round75 {
+    border-radius: 75px;
+}
+
+.round76 {
+    border-radius: 76px;
+}
+
+.round77 {
+    border-radius: 77px;
+}
+
+.round78 {
+    border-radius: 78px;
+}
+
+.round79 {
+    border-radius: 79px;
+}
+
+.round80 {
+    border-radius: 80px;
+}
+
+.round81 {
+    border-radius: 81px;
+}
+
+.round82 {
+    border-radius: 82px;
+}
+
+.round83 {
+    border-radius: 83px;
+}
+
+.round84 {
+    border-radius: 84px;
+}
+
+.round85 {
+    border-radius: 85px;
+}
+
+.round86 {
+    border-radius: 86px;
+}
+
+.round87 {
+    border-radius: 87px;
+}
+
+.round88 {
+    border-radius: 88px;
+}
+
+.round89 {
+    border-radius: 89px;
+}
+
+.round90 {
+    border-radius: 90px;
+}
+
+.round91 {
+    border-radius: 91px;
+}
+
+.round92 {
+    border-radius: 92px;
+}
+
+.round93 {
+    border-radius: 93px;
+}
+
+.round94 {
+    border-radius: 94px;
+}
+
+.round95 {
+    border-radius: 95px;
+}
+
+.round96 {
+    border-radius: 96px;
+}
+
+.round97 {
+    border-radius: 97px;
+}
+
+.round98 {
+    border-radius: 98px;
+}
+
+.round99 {
+    border-radius: 99px;
+}

src/components/preImage/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <img src="" />
+  <div
+    class="w100vw flex justify-center content-center h100vh absolute bg-black opacity3"
+  >
+    <div class="w600 h632 bg-white"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    width: {
+      type: Number,
+      default: 100,
+    },
+    height: {
+      type: Number,
+      default: 100,
+    },
+  },
+});
+</script>
+
+<style scoped>
+.opacity3 {
+  opacity: 0.3;
+}
+</style>

src/router/index.ts

@@ -19,6 +19,14 @@ const routes: Array<RouteRecordRaw> = [
     // which is lazy-loaded when the route is visited.
     component: Login
   },
+  {
+    path: '/examInstructions',
+    component: () => import('../views/examInstructions/index.vue')
+  },
+  {
+    path:'/markLine',
+    component: () => import('../views/markLine/index.vue')
+  },
   {
     path: '/home',
     name: 'home',
@@ -26,8 +34,11 @@ const routes: Array<RouteRecordRaw> = [
       path: 'sysconfig',
       component: () => import('../views/home/sysconfig/index.vue')
     }, {
-      path: 'practise',
-      component: () => import('../views/home/practise/index.vue')
+      path: 'practiseSelect',
+      component: () => import('../views/home/practiseSelect/index.vue')
+    },{
+      path:'markLine',
+      component: () => import('../views/home/markLine/index.vue')
     }],
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route

src/views/examInstructions/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="100vw">
+    <img class="w-full" src="@/assets/img/login/top_bg.png" />
+    <div class="pt30 w-full">
+      <div class="flex justify-center">
+        <div class="w1200 h543 bg-light-pink flex items-center content-center">
+          <div class="text-left ml90 w-1/2">
+            <div
+              class="bg-primary-yellow pl25 pr25 lh50 font24 font-bold flex-grow-0 inline-block mb20"
+            >
+              考试须知
+            </div>
+            <div>
+              <div
+                class="text-left font18 font-bold"
+                v-for="(item, index) in intro"
+                :key="index"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <div class="w-1/2 flex justify-center flex-wrap">
+            <span class="font24 w-full font-bold">XX考场xx考台</span>
+            <div class="mt30 font-semibold">
+              <div class="text-left text-red-500 font20">
+                身份证号:888888888888888888
+              </div>
+              <div class="text-left text-red-500 font20">考生姓名:夏紫云</div>
+            </div>
+            <div class="w-full mt30">
+              <div
+                class="bg-primary-yellow pl25 pr25 lh40 font24 font-bold flex-grow-0 inline-block mb20 round4 cursor-pointer"
+              >
+                确定
+              </div>
+            </div>
+             <div class="text-left text-red-500 font20 font-bold">点击"确定"按钮开始考试！</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {
+      intro: [
+        "1、遵守考场纪律服从监考人员指挥",
+        "2、进入考场，手机、拷机关机。禁止抽烟禁止吃零食。",
+        "3、未经工作人员允许考生禁止随意出入考场",
+
+        "4、考场内禁止大声喧呼,禁止随意走动",
+        "5、考试中认真答题不准交头接耳",
+        "6、考试中不准冒名顶替不准弄虚作假",
+        "7、注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。",
+        "8、爱护公物及考试设备",
+      ],
+    };
+  },
+});
+</script>
+
+<style scoped>
+.w1200 {
+  width: 1200px;
+}
+.bg-light-pink {
+  background: #fffcef;
+}
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+</style>

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <img class="w-full" src="@/assets/img/login/top_bg.png" />
-    <div class="w-full flex">
+    <div class="w-full flex flex-grow-0">
       <leftTab></leftTab>
       <div class="right">
         <div class="top">
@@ -9,7 +9,10 @@
           <span>友情提示：</span>
           <span class="text-red-600">您好，请保持安静，认真学习！</span>
         </div>
-        <router-view></router-view>
+        <div class="w-full">
+          <router-view></router-view>
+        </div>
+
         <!-- <div class="content">
           <div class="w-full h754 bg-white"></div>
         </div> -->
@@ -48,10 +51,10 @@ export default {
   height: 754px;
 }
 .right {
-  width: calc(100vw - 256px);
   background: #f5f5f5;
+  flex: 1;
+  flex-shrink: 1;
   .top {
-    width: 100%;
     background: #fff;
     height: 58px;
     display: flex;
@@ -59,10 +62,7 @@ export default {
     align-content: center;
     align-items: center;
     padding-left: 30px;
-  }
-  .content {
-    padding: 0 30px;
-    padding-top: 21px;
+    flex-grow: 0;
   }
 }
 </style>

src/views/home/markLine/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="pt21 pl30">
+    <div class="content">
+      <div class=" w-full h-full bg-white flex flex-wrap items-start content-start">
+        <div
+        v-for="(item,index) in 9"
+        :key="index"
+          class="bg-white w240 h250 flex justify-center items-center content-center flex-wrap mb20"
+        >
+          <img class="w150" src="@/assets/img/home/forbidden_mark.png" />
+          <div class="font-bold w-full mt15">禁令标志</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+.content {
+  width: 1603px;
+  height: 885px;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>

src/views/home/practise/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="content">
-    <div class="w1603 h885 bg-white pl50 pt30">
-      <div class="flex items-center">
-        <div class="vertical-line mr10"></div>
-        <span class="font20 font-bold mr15">技巧练习</span>
-        <div class="w64 lh34 bg-primary-yellow radius4">试听</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-    return {};
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-
-.radius4{
-    border-radius: 4px;
-}
-.bg-primary-yellow {
-  background-color: #f9de5b;
-}
-
-.w1603 {
-  width: 1603px;
-}
-
-.content {
-  padding: 0 30px;
-  padding-top: 21px;
-  .vertical-line {
-    width: 5px;
-    height: 20px;
-    background: #f9de5b;
-    border-radius: 4px 4px 4px 4px;
-    opacity: 1;
-  }
-}
-</style>

src/views/home/practiseSelect/index.vue

@@ -0,0 +1,90 @@
+
+
+<template>
+  <div class="content">
+    <div class="h885 bg-white pl50 pt30">
+      <div class="flex items-center">
+        <div class="vertical-line mr10"></div>
+        <span class="font20 font-bold mr15">技巧练习</span>
+        <div class="lh34 select-border round4 pr15 pl15">试听</div>
+      </div>
+      <div class="">
+        <div class="flex justify-between">
+          <div
+            v-for="(item, index) in list"
+            :key="index"
+            class="flex radius4 pt15"
+          >
+            <div class="lh34 w140 text-left font18">{{ index + 1 }}. 技巧</div>
+            <div class="flex">
+              <div class="w64 lh34 mr15 round4 overflow-hidden select-border">
+                视频
+              </div>
+              <div class="w64 lh34 mr15 round4 overflow-hidden select-border">
+                练习
+              </div>
+              <div class="w64 lh34 mr15 round4 overflow-hidden select-border">
+                回顾
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center pt30">
+        <div class="vertical-line mr10"></div>
+        <span class="font20 font-bold mr15">全部错误题回顾</span>
+        <div class="lh34 round4 pr15 pl15 select-border mr15">错误回顾</div>
+        <div class="lh34 round4 pr15 pl15 select-border">清空全部错题</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  setup() {
+    return {
+      list: [{}, {}, {}],
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.select-border {
+  border: 1px solid #f9de5b;
+}
+.select-border:hover {
+  border: 1px solid #f9de5b;
+  background-color: #f9de5b;
+  cursor: pointer;
+}
+.radius4 {
+  border-radius: 4px;
+}
+.bg-primary-yellow {
+  background-color: #f9de5b;
+}
+.bg-light-yellow {
+  background: #fff7cc;
+}
+
+.w1603 {
+  width: 1603px;
+}
+
+.content {
+  padding: 0 30px;
+  padding-top: 21px;
+  padding-bottom: 30px;
+
+  .vertical-line {
+    width: 5px;
+    height: 20px;
+    background: #f9de5b;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+  }
+}
+</style>

src/views/home/sysconfig/index.vue

@@ -85,8 +85,9 @@
 </template>
 
 <script>
-import { reactive, ref, toRefs } from "vue";
-export default {
+import { reactive, ref, toRefs,defineComponent } from "vue";
+
+export default defineComponent({
   name: "sysconfig",
   setup() {
     const state = reactive({
@@ -100,7 +101,7 @@ export default {
       ...toRefs(state),
     };
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>

src/views/markLine/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="100vw">
+    <div class="relative w-full mt50">
+      <span class="font24 font-bold lh40">指示标志</span>
+      <div
+        class="right30 w72 lh40 h40 absolute right0 top0 bg-primary-yellow flex items-center justify-center"
+      >
+        <img class="w18 h16" src="@/assets/img/markLine/back_icon.png" />
+        <span class="ml4">返回</span>
+      </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="mt21 font-bold">立交直行和左转弯行驶</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+.border-gray {
+  border: 1px solid #e8e8e8;
+}
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+.margin-center {
+  margin: 0 auto;
+}
+</style>