引入了图片的模块和接口的引入

package-lock.json

@@ -2890,6 +2890,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -2910,6 +2915,16 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -3378,6 +3393,14 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
@@ -3945,6 +3968,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -4910,8 +4938,7 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.3",
@@ -5026,6 +5053,16 @@
         }
       }
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -6125,14 +6162,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -7244,6 +7279,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",

package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build:dev": "vue-cli-service build --mode development",
+    "dev": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",

src/api/index.ts

@@ -0,0 +1,9 @@
+import request  from "./request";
+import login from './login/login'
+const api  = {
+    login,
+    
+
+
+}
+export default api

src/api/login/login.ts

@@ -0,0 +1,14 @@
+
+import request from "../request"
+export default {
+    captchaImage() {
+        return request({
+            url: '/captchaImage',
+            method: 'get'
+        })
+
+    }
+
+}
+
+

src/api/request.ts

@@ -0,0 +1,25 @@
+import axios from 'axios'
+const request = axios.create({
+	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)
+	const token = window.localStorage.getItem("token")
+	// 是否需要设置 token
+	if (config.headers.isLogin == '1' || !token) {
+		config.headers["Authorization"] = ""; // 让每个请求携带自定义token 请根据实际情况自行修改
+	}
+	else {
+		config.headers["Authorization"] = ("Bearer " + token);
+	}
+
+	return config;
+}, error => {
+	console.log(error)
+
+});
+request.interceptors.response.use(res=>{
+	return res.data
+
+})
+export default request

src/router/index.ts

@@ -22,9 +22,12 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/home',
     name: 'home',
-    children:[{
-      path:'sysconfig',
-      component:()=>import('../views/home/sysconfig/index.vue')
+    children: [{
+      path: 'sysconfig',
+      component: () => import('../views/home/sysconfig/index.vue')
+    }, {
+      path: 'practise',
+      component: () => import('../views/home/practise/index.vue')
     }],
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route

src/shims-vue.d.ts

@@ -4,3 +4,13 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+/* eslint-disable */
+/* 需要声明图片文件,不然报错 */
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.bmp'
+declare module '*.tiff'

src/store/index.ts

@@ -2,6 +2,11 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
+    sysConfig:{
+      autoNext:false,
+      keyTip:false,
+      voiceTip:false
+    }
   },
   getters: {
   },

src/views/home/practise/index.vue

@@ -0,0 +1,66 @@
+<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>
+.pt30{
+    padding-top: 30px;
+}
+.pl50{
+    padding-left: 50px;
+}
+.radius4{
+    border-radius: 4px;
+}
+.bg-primary-yellow {
+  background-color: #f9de5b;
+}
+.mr15{
+    margin-right:15px ;
+}
+.w64{
+    width: 64px;
+}
+.lh34{
+    line-height:34px ;
+}
+.w1603 {
+  width: 1603px;
+}
+.h885 {
+  height: 885px;
+}
+.font20 {
+  font-size: 20px;
+}
+.mr10{
+    margin-right: 10px;
+}
+.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/sysconfig/index.vue

@@ -1,43 +1,138 @@
 <template>
   <div class="content">
     <div class="w-full h255 bg-white pl30 pt30 text-left">
-      <div class="">
-        <span> 1.答题时若答对答案后自动跳到下一题：<input class="yello-radio" type="radio" /></span>
+      <div class="flex font18">
+        1.答题时若答对答案后自动跳到下一题：
+        <div class="w90 justify-between flex">
+          <label>
+            <input
+              v-model="sysConfig.autoNext"
+              :value="true"
+              class="yello-radio"
+              name="autoNext"
+              type="radio"
+            />
+            <span>是</span>
+          </label>
+          <label>
+            <input
+              v-model="sysConfig.autoNext"
+              :value="false"
+              class="yello-radio"
+              name="autoNext"
+              type="radio"
+            />
+            <span>否</span>
+          </label>
+        </div>
       </div>
-      <div class="">
+
+      <div class="flex font18 align-bottom">
         <span> 2.答题时有红字关键字提示：</span>
+        <div class="w90 justify-between flex">
+          <label>
+            <input
+              v-model="sysConfig.keyTip"
+              :value="true"
+              class="yello-radio"
+              name="keyTip"
+              type="radio"
+            />
+            <span>是</span>
+          </label>
+          <label>
+            <input
+              v-model="sysConfig.keyTip"
+              :value="false"
+              class="yello-radio"
+              name="keyTip"
+              type="radio"
+            />
+            <span>否</span>
+          </label>
+        </div>
       </div>
-      <div class="">
+      <div class="flex font18">
         <span>3.答题时有语音提示：</span>
+        <div class="w90 justify-between flex">
+          <label>
+            <input
+              class="yello-radio"
+              :value="true"
+              v-model="sysConfig.voiceTip"
+              name="voiceTip"
+              type="radio"
+            />
+            <span>是</span>
+          </label>
+          <label>
+            <input
+              class="yello-radio"
+              :value="false"
+              v-model="sysConfig.voiceTip"
+              name="voiceTip"
+              type="radio"
+            />
+            <span>否</span>
+          </label>
+        </div>
       </div>
-      <div class="">
-        <span> 4.答题时有语音提示：</span>
+      <div class="save">
+        <div class="save-button">保存</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { reactive, ref, toRefs } from "vue";
 export default {
+  name: "sysconfig",
   setup() {
-    return {};
+    const state = reactive({
+      sysConfig: {
+        autoNext: false,
+        keyTip: false,
+        voiceTip: false,
+      },
+    });
+    return {
+      ...toRefs(state),
+    };
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.save {
+  margin-top: 30px;
+  padding-left: 80px;
+  .save-button {
+    width: 110px;
+    line-height: 40px;
+    background: #f9de5b;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    color: #333;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+.font18{
+  font-size: 18px;
+}
 .pl30 {
   padding-left: 30px;
 }
-.pt30{
-    padding-top: 30px;
+.pt30 {
+  padding-top: 30px;
 }
 .content {
   padding: 0 30px;
   padding-top: 21px;
-  .yello-radio{
-    color: yellow;
-  }
+}
+.w90 {
+  width: 90px;
 }
 .h754 {
   height: 754px;
@@ -45,4 +140,48 @@ export default {
 .h255 {
   height: 255px;
 }
+input[type="radio"] {
+  margin-right: 5px;
+
+  cursor: pointer;
+
+  font-size: 14px;
+
+  width: 15px;
+
+  height: 12px;
+
+  position: relative;
+}
+
+input[type="radio"]:after {
+  position: absolute;
+
+  width: 16px;
+
+  height: 16px;
+
+  top: 0;
+  left: 0px;
+
+  content: " ";
+
+  background-color: #fff;
+
+  color: #fff;
+
+  display: inline-block;
+
+  visibility: visible;
+  border-radius: 50%;
+  border: 1px solid #333;
+}
+
+input[type="radio"]:checked:after {
+  width: 16px;
+  height: 16px;
+  background-size: 100%;
+  background-image: url("./../../../assets/login/radio_icon.png");
+  border: none;
+}
 </style>

src/views/login/index.vue

@@ -24,12 +24,13 @@
               class="password"
             />
           </div>
+          <img v-if="codeUrl" :src="codeUrl" />
           <div class="w-full save">
             <input class="save-input" type="checkbox" />
             <span class="save-text">记住用户名和密码</span>
           </div>
           <div class="submit">
-            <button class="confirm">确定</button>
+            <button @click="loginByPassword" class="confirm">确定</button>
             <button class="cancel">取消</button>
           </div>
         </div>
@@ -43,7 +44,11 @@
       <div class="w-full tip">
         <div>
           <div>
-            1、请注意：第一次使用时需要安装播放电脑插件，否则不能登陆哦，<a class="tip-download" href="https://www.google.cn/chrome/index.html">点击下载插件</a>
+            1、请注意：第一次使用时需要安装播放电脑插件，否则不能登陆哦，<a
+              class="tip-download"
+              href="https://www.google.cn/chrome/index.html"
+              >点击下载插件</a
+            >
             看安装说明
           </div>
           <div>2、本网站推荐用360浏览器，分辨率为1024*768以上</div>
@@ -55,14 +60,33 @@
 </template>
 
 <script lang="ts">
-export default {
+import api from "@/api";
+import { defineComponent, reactive, toRefs } from "vue";
+export default defineComponent({
   setup() {
-    return {
-      a: "hello",
+    const state = reactive({
+      codeUrl: "",
       isSavePassword: false,
+      loginForm: {
+        uuid: "",
+        username: "",
+        password: "",
+      },
+    });
+    return {
+      ...toRefs(state),
     };
   },
-};
+  methods: {
+    loginByPassword() {
+      api.login.captchaImage().then((res) => {
+        // console.log(res)
+        this.codeUrl = "data:image/gif;base64," + res.data.img;
+        this.loginForm.uuid = res.data.uuid;
+      });
+    },
+  },
+});
 </script>
 
 <style lang="scss"  scoped>
@@ -215,7 +239,7 @@ export default {
   text-align: left;
   line-height: 1.5;
   margin-top: 35px;
-  .tip-download{
+  .tip-download {
     text-decoration: underline;
     text-underline-offset: 4px;
     color: #333;
@@ -225,9 +249,6 @@ export default {
   padding-left: 30px;
 }
 
-
-
-
 .bg-primary-yellow {
   background-color: #f9de5b;
 }