新增技巧练习页面

.babelrc

@@ -0,0 +1,12 @@
+{
+    "plugins": [
+      [
+        "import",
+        {
+          "libraryName": "ant-design-vue",
+          "libraryDirectory": "lib",   // default: lib
+          "style": true
+        },
+      ]
+    ]
+  }

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@fullhuman/postcss-purgecss": "^3.0.0",
+    "ant-design-vue": "^4.0.0-beta.2",
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
@@ -27,8 +28,11 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "autoprefixer": "^10.4.14",
+    "babel-plugin-import": "^1.13.6",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "less": "^2.7.3",
+    "less-loader": "^11.1.0",
     "postcss": "^8.4.23",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",

src/api/index.ts

@@ -1,7 +1,9 @@
 import request  from "./request";
 import login from './login/login'
+import open from './open/open'
 const api  = {
     login,
+    open
     
 
 

src/api/login/login.ts

@@ -1,24 +1,27 @@
 
+import { AxiosPromise } from "axios"
 import request from "../request"
 export default {
     captchaImage() {
         return request({
             url: '/captchaImage',
-            method: 'get'
+            method: 'get',
+            headers: { isLogin: '1' }
         })
 
     },
     login(data: {
-        code:string,
-        username:string,
-        password:string,
-        uuid:string
+        code: string,
+        username: string,
+        password: string,
+        uuid: string
 
-    }) {
+    }):Promise<loginRes> {
         return request({
             url: '/login',
             method: 'post',
-            data: data
+            data: data,
+            headers: { isLogin: '1' }
         })
 
     }

src/api/open/open.ts

@@ -0,0 +1,14 @@
+import request from "../request"
+
+export default {
+    questionInfoSelectFreeQuestionInfo(params: {
+        subject: number
+    }):Promise<any> {
+        return request({
+            params,
+            url: "/open-api/question/info/selectFreeQuestionInfo",
+            method: 'get'
+
+        })
+    }
+}

src/api/request.ts

@@ -1,6 +1,9 @@
 import axios from 'axios'
+import { AxiosRequestConfig, AxiosResponse } from 'axios'
+import { message, Modal } from 'ant-design-vue';
+import router from '@/router';
 const request = axios.create({
-	baseURL: process.env.NODE_ENV === "development" ? "https://jpcj1.zzxcx.net/stage-api/":"https://jpcj.zzxcx.net/prod-api/",
+	baseURL: process.env.NODE_ENV === "development" ? "https://jpcj1.zzxcx.net/stage-api/" : "https://jpcj.zzxcx.net/prod-api/",
 });
 request.interceptors.request.use((config) => {
 	console.log(config)
@@ -18,7 +21,24 @@ request.interceptors.request.use((config) => {
 	console.log(error)
 
 });
-request.interceptors.response.use(res=>{
+request.interceptors.response.use((res) => {
+	const code = res.data.code
+	switch (code) {
+		case 401:
+			Modal.confirm({
+				content:'登录失效,是否需要重新登录',
+				onOk:()=>{
+					router.push('/login')
+				}
+			})
+			break;
+		case 500:
+			message.error('服务器错误')
+			break;
+
+	}
+
+
 	return res.data
 
 })

src/api/type.d.ts

@@ -0,0 +1,12 @@
+interface Res{
+    code:number,
+    msg:string
+
+} 
+interface loginRes extends Res{
+  
+    data:{
+        token:string
+    }
+    
+}

src/router/index.ts

@@ -19,6 +19,10 @@ const routes: Array<RouteRecordRaw> = [
     // which is lazy-loaded when the route is visited.
     component: Login
   },
+  {
+    path: '/studySkill',
+    component: () => import('../views/studySkill/index.vue')
+  },
   {
     path: '/examInstructions',
     component: () => import('../views/examInstructions/index.vue')

src/store/index.ts

@@ -13,6 +13,9 @@ export default createStore({
   mutations: {
   },
   actions: {
+    LoginOut(){
+      localStorage.setItem('token','')
+    }
   },
   modules: {
   }

src/views/driverExamAnaly/index.vue

@@ -5,7 +5,9 @@
       <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">
+        <div
+          class="flex w72 h40 right0 round4 items-center justify-center absolute bottom16 bg-primary-yellow cursor-pointer"
+        >
           <img
             class="w15 h15 mr5"
             src="@/assets/img/driverExamAnaly/close_icon.png"
@@ -27,25 +29,41 @@
         提示：打"√"表示是正确答案；打"×"表示你答错的答案；答题是红色表示没有做。
       </div>
       <div class="pt30 pb30 pt30 pb30">
-        <div class="round10 pt30 pr30 pl30 pb30 text-left round10">
-          1、驾驶机动车不妨碍其他车辆正常行驶时，可连续变更两条车道。
+        <div
+          class="round10 pt30 pr30 pl30 pb30 text-left round10 gray-border mb20"
+        >
+          <div>1、驾驶机动车不妨碍其他车辆正常行驶时，可连续变更两条车道。</div>
+          <div>×A、正确</div>
+          <div>√B、错误</div>
+          <div
+            class="bg-primary-yellow font16 lh40 w110 text-center round4 mt20"
+          >
+            本题解析
+          </div>
         </div>
       </div>
     </div>
+ 
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+// import { Button } from "ant-design-vue";
 export default defineComponent({
   setup() {
     return {};
   },
+  components: {
+    // aButton: Button,
+  },
 });
 </script>
 
 <style scoped>
+.gray-border {
+  border: 1px solid #d8d8d8;
+}
 .bg-primary-yellow {
   background: #f9de5b;
 }

src/views/login/index.vue

@@ -75,6 +75,7 @@
 
 <script lang="ts">
 import api from "@/api";
+import router from "@/router";
 import { defineComponent, reactive, toRefs } from "vue";
 export default defineComponent({
   setup() {
@@ -99,7 +100,10 @@ export default defineComponent({
     loginByPassword() {
       console.log("登录了");
       api.login.login(this.loginForm).then(res=>{
-        console.log(res.data)
+        window.localStorage.setItem('token',res.data.token)
+        router.push('/home/sysconfig')
+        console.log(res.data.token)
+     
 
       })
 

src/views/studySkill/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="bg-gray w-full min-h-screen">
+    <div class="pt30 pr30 pl30 pb30">
+      <div class="w-full gray-border">
+        <div class="pt30 pl30 text-left font26 pb50 bg-white">
+          <span
+            >2.避让特种车辆使其顺利通过后，车辆应该有序回到原车道继续行驶，</span
+          >
+          <div>B.错误</div>
+          <div>A.正确</div>
+          <div class="inline-block pl15 pr5 mt15" style="background-color: #d9ffeb">
+            <img
+              class="inline-block w42 h42"
+              src="@/assets/img/studySkill/smile_express.png"
+            />
+            <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
+          </div>
+          <div>
+            <div
+              class="mt30 w88 items-center bottom-button flex h40 justify-center"
+            >
+              <img
+                class="w18 h18 inline-block mr10"
+                src="@/assets/img/studySkill/voice_icon.png"
+              />
+              <span class="font16">读题</span>
+            </div>
+          </div>
+          <div class="flex mt15">
+            <div class="w57 lh46 bottom-button mr15">√</div>
+            <div class="w57 lh46 bottom-button">×</div>
+          </div>
+        </div>
+      </div>
+      <div class="w-full pt30">
+        <div class="w1200 flex justify-between mr-auto ml-auto">
+          <div class="w120 lh46 bottom-button lh46">上一题</div>
+          <div class="w120 lh46 bottom-button lh46">下一题</div>
+          <div class="w120 lh46 bottom-button lh46">本题解析</div>
+          <div class="w120 lh46 bottom-button lh46">语音播报</div>
+          <div class="w120 lh46 bottom-button lh46">不设为错题</div>
+          <div class="w120 lh46 bottom-button lh46">交卷</div>
+        </div>
+      </div>
+      <div class="w-full mt20">
+        <div
+          class="flex w1200 mr-auto ml-auto h30 items-center content-center justify-around"
+        >
+          <div class="flex items-center">
+            <div class="pr2 pl2">转到</div>
+            <input class="outline-none input-border w35 h30 text-center" type="text" />
+            <div class="pr2 pl2">题</div>
+          </div>
+
+          <div>共 <span class="font-semibold">48</span> 题</div>
+          <div class="align-baseline">
+            <input class="" type="checkbox" />
+            <span>答对自动跳转到下一题</span>
+          </div>
+          <div>
+            <div class="mr15 inline-block">
+              答对<span style="color: #21a65f">2</span>题
+            </div>
+            <div class="inline-block">
+              答错<span style="color: #ef3629">2</span>题
+            </div>
+          </div>
+          <div class=""><span class="text-black font16">正确率100%</span></div>
+          <div class=""><span class="text-black font16">进度 42%</span></div>
+          <div class="flex items-center content-center">
+            <div class="mr15"><input class="" type="checkbox" /> <span>自动播放</span></div>
+            <div><input class="" type="checkbox" /> <span>提示红字</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import api from '@/api'
+export default defineComponent({
+  setup() {
+    api.open.questionInfoSelectFreeQuestionInfo({
+      subject:4
+    }).then(res=>{
+      console.log(res)
+
+    })
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+input[type="checkbox"] {
+  margin-right: 5px;
+
+  cursor: pointer;
+
+  font-size: 14px;
+
+  width: 15px;
+
+  height: 12px;
+
+  position: relative;
+}
+
+input[type="checkbox"]:after {
+  position: absolute;
+
+  width: 16px;
+
+  height: 16px;
+
+  top: 0;
+  left: 0px;
+
+  content: " ";
+
+  background-color: #f9de5b;
+
+  color: #fff;
+
+  display: inline-block;
+
+  visibility: visible;
+
+  border-radius: 3px;
+}
+
+input[type="checkbox"]:checked:after {
+  width: 16px;
+  height: 16px;
+  background-size: 100%;
+  background-image: url("./../../assets/img/login/checked_icon.png");
+}
+.input-border {
+  border: 1px solid #707070;
+}
+.bg-gray {
+  background: #f5f5f5;
+}
+.gray-border {
+  border: 1px solid #d8d8d8;
+}
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+.bottom-button {
+  text-align: center;
+  border: 1px solid #f9de5b;
+  cursor: pointer;
+}
+.bottom-button:hover {
+  background: #fff7cc;
+}
+.w1200 {
+  width: 1200px;
+}
+</style>

vue.config.js

@@ -1,5 +1,16 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
+  css: {
+    loaderOptions: {
+      less: {
+        // 用于babel-plugin-import的less
+        lessOptions: {
+          javascriptEnabled: true,
+        }
+      },
+    },
+  }
+
 
 })