VUE 端源码

vue/.gitignore

@@ -1,23 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

vue/README.md

@@ -1,5 +1,10 @@
 # demo
 
+## 项目简介
+```
+这是一个驾照考试的前端项目，具有登录、知识库、习题练习、模拟考试、正式考试、考试记录、错题集功能页面
+```
+
 ## Project setup
 ```
 npm install

vue/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue",
+  "name": "",
   "version": "0.1.0",
   "private": true,
   "scripts": {

vue/src/App.vue

@@ -11,12 +11,9 @@ body {
 }
 @font-face {
   font-family: "iconfont"; /* Project id 2724689 */
-  src: url("//at.alicdn.com/t/font_2724689_mtterbh58wm.woff2?t=1631789608637")
-      format("woff2"),
-    url("//at.alicdn.com/t/font_2724689_mtterbh58wm.woff?t=1631789608637")
-      format("woff"),
-    url("//at.alicdn.com/t/font_2724689_mtterbh58wm.ttf?t=1631789608637")
-      format("truetype");
+  src: url("./utils/font_2724689_mtterbh58wm.woff2") format("woff2"),
+    url("./utils/font_2724689_mtterbh58wm.woff") format("woff"),
+    url("./utils/font_2724689_mtterbh58wm.ttf") format("truetype");
 }
 
 .iconfont {

vue/src/api/global.js

@@ -0,0 +1,4 @@
+import { post } from '@/api/request'
+export default {
+  update: query => post("/staff/change_password/", query)
+}

vue/src/components/Basic/index.vue

@@ -5,10 +5,17 @@
   >
     <el-container>
       <!-- 导航栏 -->
-      <el-header>
+      <el-header
+        :style="{backgroundImage:'url('+nav.icon+')'}"
+        style="background-size:calc(40px * 944 / 84 ) 40px ; background-repeat:no-repeat;background-position:200px"
+      >
         <div class="left">
-          <el-image :src="nav.icon" />
           <span>人员能力评估系统</span>
+          <!-- 944 84  -->
+          <!-- <el-image
+            style="height:50px;width:calc(50px * 944 / 84);padding-left:10px;"
+            :src="nav.icon"
+          /> -->
         </div>
         <div class="right">
           <div
@@ -24,11 +31,64 @@
         <slot />
       </el-main>
     </el-container>
+    <!-- 修改密码 -->
+    <el-dialog
+      title="提示"
+      :visible.sync="centerDialogVisible"
+      width="500px"
+      center
+    >
+      <el-form
+        :rules="rules"
+        :model="value"
+        ref="update"
+        label-width="100px"
+      >
+        <el-form-item
+          label="旧密码"
+          prop="old_password"
+        >
+          <el-input v-model="value.old_password" />
+        </el-form-item>
+        <el-form-item
+          label="新密码"
+          prop="new_password"
+        >
+          <el-input
+            type="password"
+            v-model="value.new_password"
+          />
+        </el-form-item>
+        <el-form-item
+          label="确认密码"
+          prop="confirm_password"
+        >
+          <el-input
+            type="password"
+            v-model="value.confirm_password"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="submitForm('update')"
+          >提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <!-- logo -->
+    <!-- <img
+      src="@/assets/login/2.jpg"
+      class="logo"
+      style="width:200px;position:fixed;bottom:50px;right:50px;"
+      alt=""
+    > -->
   </div>
 </template>
 
 <script>
-import icon from "@/assets/home/u25.png"
+import icon from "@/assets/login/1.png";
+import Global from "@/api/global.js"
 export default {
   props: {
     Type: {
@@ -37,41 +97,75 @@ export default {
     }
   },
   data () {
+    var validatorAFunc = (rule, value, callback) => {
+      this.value.old_password == value ? callback(new Error("新密码不能和记密码一致！")) :
+        callback();
+    }
+    var validatorBFunc = (rule, value, callback) => {
+      this.value.new_password !== value ? callback(new Error("两次密码不一致")) :
+        callback();
+    }
     return {
       // 导航栏
       nav: {
         icon,
         btns: [{
-          name: "账户设置", success (that) {
-            alert("账户设置")
+          name: "用户 - " + sessionStorage.getItem("username"), success () {
+            this.centerDialogVisible = true;
           }
         },
         {
           name: "退出登录",
-          success (that) {
+          success () {
             sessionStorage.clear();
-            that.$router.push("/login")
+            this.$router.push("/login")
           }
         }
         ]
       },
+      // 修改密码
+      centerDialogVisible: false,
+      value: {
+        old_password: '',
+        new_password: '',
+        confirm_password: "",
+      },
+      rules: {
+        old_password: [
+          { required: true, message: "旧密码不能为空！", trigger: "blur" },
+          { min: 4, message: "旧密码最短4个字符", trigger: "blur" },
+        ],
+        new_password: [
+          { required: true, message: "新密码不能为空！", trigger: "blur" },
+          { min: 4, message: "新密码最短4个字符！", trigger: "blur" },
+          { validator: validatorAFunc, trigger: "blur" }
+        ],
+        confirm_password: [
+          { required: true, message: "确认密码不能为空！", trigger: "blur" },
+          { validator: validatorBFunc, trigger: "blur" }
+        ]
+      }
     }
   },
   methods: {
-    Success (func) {
-      let that = this;
-      func(that)
-    },
-    // 正式考试 严格模式
-    Static () {
-      // window.onbeforeunload = function (e) {
-      //   var e = window.event || e;
-      //   e.returnValue = ("确定离开当前页面吗？");
-      // }
-      // console.log(this.Type, this.$refs)
-      // this.$refs["basic"].addEventListener("mouseleave", function () {
-      //   alert("123")
-      // })
+    Success (func) { func.bind(this)() },
+    // 提交数据
+    submitForm (refName) {
+      this.$refs[refName].validate(valid => {
+        if (valid) {
+          Global.update(this.value).then(res => {
+            this.$message({ type: "success", message: "密码已修改！" });
+            sessionStorage.clear();
+            this.value = {
+              old_password: '',
+              new_password: '',
+              confirm_password: "",
+            }
+            this.centerDialogVisible = false;
+            this.$router.push("/login")
+          })
+        }
+      })
     }
   },
   mounted () {
@@ -80,8 +174,17 @@ export default {
 }
 </script>
 <style lang="less" >
+.logo {
+  display: none;
+}
+@media screen and (min-width: 1680px) {
+  .logo {
+    display: block;
+  }
+}
 #basic {
   min-height: 100vh;
+  position: relative;
   .el-container {
     // h:60 p:0 20
     .el-header {

vue/src/components/TestPaper/components/bool.vue

@@ -17,14 +17,6 @@
         </el-radio-group>
       </div>
     </div>
-    <div
-      v-if="State"
-      class="right"
-    >
-      <div class="header">共错误3次，最后一次出错：2021-04-26 15:23，XXXXXX模拟考试</div>
-      <div class="body">解析：
-        XXXXXX</div>
-    </div>
   </div>
 </template>
 <script>
@@ -93,9 +85,5 @@ export default {
       margin: 5px 0;
     }
   }
-  .right {
-    width: 400px;
-    background-color: #f4f7ed;
-  }
 }
 </style>

vue/src/components/TestPaper/components/checkbox.vue

@@ -15,14 +15,6 @@
         />
       </div>
     </div>
-    <div
-      v-if="State"
-      class="right"
-    >
-      <div class="header">共错误3次，最后一次出错：2021-04-26 15:23，XXXXXX模拟考试</div>
-      <div class="body">解析：
-        XXXXXX</div>
-    </div>
   </div>
 </template>
 <script>
@@ -61,6 +53,7 @@ export default {
   display: flex;
   .left {
     width: 100%;
+    overflow: hidden;
     h3 {
       margin-top: 0;
     }
@@ -68,9 +61,5 @@ export default {
       margin: 5px 0;
     }
   }
-  .right {
-    width: 400px;
-    background-color: #f4f7ed;
-  }
 }
 </style>

vue/src/components/TestPaper/components/input.vue

@@ -22,14 +22,6 @@
         </div>
       </div>
     </div>
-    <div
-      v-if="State"
-      class="right"
-    >
-      <div class="header">共错误3次，最后一次出错：2021-04-26 15:23，XXXXXX模拟考试</div>
-      <div class="body">解析：
-        XXXXXX</div>
-    </div>
   </div>
 </template>
 <script>
@@ -122,9 +114,5 @@ export default {
       }
     }
   }
-  .right {
-    width: 400px;
-    background-color: #f4f7ed;
-  }
 }
 </style>

vue/src/components/TestPaper/components/radio.vue

@@ -16,14 +16,6 @@
         />
       </div>
     </div>
-    <div
-      v-if="State"
-      class="right"
-    >
-      <div class="header">共错误3次，最后一次出错：2021-04-26 15:23，XXXXXX模拟考试</div>
-      <div class="body">解析：
-        XXXXXX</div>
-    </div>
   </div>
 </template>
 <script>
@@ -72,9 +64,5 @@ export default {
       margin: 15px 0;
     }
   }
-  .right {
-    width: 400px;
-    background-color: #f4f7ed;
-  }
 }
 </style>

vue/src/components/TestPaper/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="testpaper">
+  <div class="testpaper">
     <div class="card">
       <el-card shadow="hover">
         <Radio
@@ -40,10 +40,7 @@
         </p>
       </el-card>
     </div>
-    <div
-      v-if="!State"
-      class="list"
-    >
+    <div class="list">
       <el-card
         style="background-color:#f03;color:#fff;text-align:center"
         shadow="never"
@@ -205,6 +202,9 @@ export default {
   },
   watch: {
     Data (val, oldval) {
+      clearInterval(this.timer)
+      this.Type == 'formal' ?
+        this.TimeFunc(false) : this.TimeFunc();
       val.id == 1 ? this.A = true : this.A = false;
       val.id == this.Total ? this.B = true : this.B = false;
       this.value = [];
@@ -216,14 +216,15 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-#testpaper {
+.testpaper {
   display: flex;
   .card {
-    width: 100%;
+    width: 910px;
     box-sizing: border-box;
+    overflow: hidden;
   }
   .list {
-    width: 300px;
+    width: 230px !important;
     margin-left: 20px;
   }
 

vue/src/components/WTestPaper/components/bool.vue

@@ -107,8 +107,10 @@ export default {
 }
 .bool {
   display: flex;
+  justify-content: space-around;
   .left {
-    width: 100%;
+    width: 800px;
+    overflow: hidden;
     h3 {
       margin-top: 0;
     }
@@ -117,7 +119,7 @@ export default {
     }
   }
   .right {
-    width: 400px;
+    width: 300px;
     background-color: #f4f7ed;
     .header {
       padding: 10px;

vue/src/components/WTestPaper/components/checkbox.vue

@@ -75,8 +75,10 @@ export default {
 <style lang="less" scoped>
 .checkbox {
   display: flex;
+  justify-content: space-around;
   .left {
-    width: 100%;
+    width: 800px;
+    overflow: hidden;
     h3 {
       margin-top: 0;
     }
@@ -85,7 +87,7 @@ export default {
     }
   }
   .right {
-    width: 400px;
+    width: 300px;
     background-color: #f4f7ed;
     .header {
       padding: 10px;

vue/src/components/WTestPaper/components/input.vue

@@ -109,8 +109,10 @@ export default {
 <style lang="less" scoped>
 .input {
   display: flex;
+  justify-content: space-around;
   .left {
-    width: 100%;
+    width: 800px;
+    overflow: hidden;
     h3 {
       margin-top: 0;
     }
@@ -138,7 +140,7 @@ export default {
     }
   }
   .right {
-    width: 400px;
+    width: 300px;
     background-color: #f4f7ed;
     .header {
       padding: 10px;

vue/src/components/WTestPaper/components/radio.vue

@@ -75,8 +75,10 @@ export default {
 <style lang="less" scoped>
 .radio {
   display: flex;
+  justify-content: space-around;
   .left {
-    width: 100%;
+    width: 800px;
+    overflow: hidden;
     h3 {
       margin-top: 0;
     }
@@ -85,7 +87,7 @@ export default {
     }
   }
   .right {
-    width: 400px;
+    width: 300px;
     background-color: #f4f7ed;
     .header {
       padding: 10px;

vue/src/views/Exam/formal_exam.vue

@@ -73,7 +73,7 @@ export default {
       },
       dialogTableVisible: false,//反馈
       practise: null,//请求题目套卷的唯一表示
-      name: "第一次世界大战知识综合测试",//考卷的名字
+      name: "",//考卷的名字
       state: false, //false stateData必须 做题状态
       timer: 0,//计时器
       Unselected: 0,//未做的题
@@ -178,6 +178,7 @@ export default {
           total_question = [],//总题目id储存
           Unselected = 0//几道题未做
           ;
+        this.name = data.question_data.exam_title
         // 解决排序跳转问题
         let show_question_id = data.question_data.id, next_question_id = null, top_question_id = null, show_question_li = null, i = null;
         function mapfunc (data) {

vue/src/views/Exam/index.vue

@@ -71,7 +71,7 @@ export default {
       },
       dialogTableVisible: false,//反馈
       practise: null,//请求题目套卷的唯一表示
-      name: "第一次世界大战知识综合测试",//考卷的名字
+      name: "",//考卷的名字
       state: false, //false stateData必须 做题状态
       timer: 0,//计时器
       Unselected: 0,//未做的题
@@ -175,6 +175,7 @@ export default {
           total_question = [],//总题目id储存
           Unselected = 0//几道题未做
           ;
+        this.name = data.question_data.exam_title;
         // 解决排序跳转问题
         let show_question_id = data.question_data.id, next_question_id = null, top_question_id = null, show_question_li = null, i = null;
         function mapfunc (data) {

vue/src/views/Exam/mock_exam.vue

@@ -71,7 +71,7 @@ export default {
       },
       dialogTableVisible: false,//反馈
       practise: null,//请求题目套卷的唯一表示
-      name: "第一次世界大战知识综合测试",//考卷的名字
+      name: "",//考卷的名字
       state: false, //false stateData必须 做题状态
       timer: 0,//计时器
       Unselected: 0,//未做的题
@@ -175,6 +175,8 @@ export default {
           total_question = [],//总题目id储存
           Unselected = 0//几道题未做
           ;
+        this.name = data.question_data.exam_title
+        // this.timer = (new Date - new Date(data.question_data.create_time)) / 1000;
         // 解决排序跳转问题
         let show_question_id = data.question_data.id, next_question_id = null, top_question_id = null, show_question_li = null, i = null;
         function mapfunc (data) {

vue/src/views/Home/pages/components/P_tab_a.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="taba">
     <!-- 提示 -->
-    <p class="msg">
+    <!-- <p class="msg">
       <span>{{msg}}</span>
       <span class="link">继续练习</span>
-    </p>
+    </p> -->
     <!-- table -->
     <Table
       v-for='(item,index) in tableData'

vue/src/views/Home/pages/formal_examination.vue

@@ -131,7 +131,6 @@ export default {
       })
     },
     handleClick (data) {
-      console.log(data)
       let time = (new Date(data.exam_time) - new Date()) / 1000;
       this.dialog = {
         id: data.id,

vue/src/views/Home/pages/knowledge_base.vue

@@ -166,7 +166,7 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .knowledgebase {
   display: flex;
   .left,
@@ -202,14 +202,18 @@ export default {
     }
   }
   .left {
-    width: 300px;
+    width: 150px;
   }
   .center {
-    width: 100%;
+    width: 820px;
     margin: 0 20px;
+    overflow: hidden;
+    img {
+      max-width: 790px;
+    }
   }
   .right {
-    width: 300px;
+    width: 150px;
     .content {
       p {
         margin: 0;

vue/src/views/Login/index.vue

@@ -2,6 +2,7 @@
   <div
     ref="login"
     class="login"
+    style="position: relative;"
   >
     <div class="card">
       <el-card shadow="hover">
@@ -46,6 +47,12 @@
         </div>
       </el-card>
     </div>
+    <img
+      style="position:absolute;bottom:0;height:50px"
+      src="@/assets/login/1.png"
+      alt=""
+      class="logo"
+    >
   </div>
 </template>
 <script>