登录模块完成

.env

+VUE_APP_API=/dev
\ No newline at end of file

src/api/apis_moudles/author.js

+// 状态管理api
+export default {
+  getVerifyImg: "/backstage/user/getVerificationCode/authority",
+  login: "/backstage/user/login/authority",
+  loginOut: "/backstage/user/exit",
+  getVerifyEmail: "/backstage/user/pwdEmail",
+  pwdReset: "/backstage/user/resetPwd",
+};

src/api/apis_moudles/base.js

 // 基础api
 export default {
   getUserInfo: `/getUserInfo`,
+  corporateCodeList: "/backstage/auth/corporateList",
 };

src/api/apis_moudles/customer.js

 // 客户管理api
-export default {};
+export default {
+  getCustomerList: "/backstage/auth/patientList",
+};

src/api/apis_moudles/index.js

 // 基础
 import base from "./base";
+// 用户状态api
+import author from "./author";
 // 报表api
 import bi from "./bi";
 // 收费查询api
@@ -17,6 +19,7 @@ import welfare from "./welfare";
 
 const apis = {
   ...base,
+  ...author,
   ...bi,
   ...chargeQuery,
   ...customer,

src/api/env.js

 // 根据环境变量确认baseurl
 let baseUrl = "";
 switch (process.env.NODE_ENV) {
-  case "dev":
+  case "development":
     // 本地地址，dev会被代理到测试环境
-    baseUrl = `${window.location.protocol}//${window.location.host}/dev`;
+    baseUrl = "/dev";
     break;
   // 正式地址
   case "production":

src/api/funcs_modules/author.js

+// 用户管理函数库
+import apis from "../apis_moudles";
+import req from "../request";
+
+function toQuery(params) {
+  if (!params) {
+    return "";
+  }
+  let query = [];
+  for (let i in params) {
+    query.push(`${i}=${params[i]}`);
+  }
+  return query.join("&");
+}
+// 对象数组
+const GETVERIFYIMG = function () {
+  return req.get(apis.getVerifyImg, { responseType: "blob" });
+};
+
+const GETVERIFYEMAIL = function (params) {
+  const queryStr = toQuery(params);
+  return req.post(apis.getVerifyEmail + "?" + queryStr);
+};
+
+const LOGIN = function (params) {
+  const queryStr = toQuery(params);
+  return req.post(apis.login + "?" + queryStr);
+};
+
+const LOGINOUT = function () {
+  return req.get(apis.loginOut);
+};
+
+const RESETPASSWORD = function (params) {
+  const queryStr = toQuery(params);
+  return req.post(apis.pwdReset + "?" + queryStr);
+};
+
+export default { GETVERIFYIMG, GETVERIFYEMAIL, LOGIN, LOGINOUT, RESETPASSWORD };

src/api/funcs_modules/base.js

@@ -8,6 +8,12 @@ const GETUSERINFO = (params) => {
     params,
   });
 };
+// get corporate Code
+const GETCORPORATECODE = (data) => {
+  return req.post(apis.corporateCodeList, {
+    data,
+  });
+};
 
 // 对象数组
-export default { GETUSERINFO };
+export default { GETUSERINFO, GETCORPORATECODE };

src/api/funcs_modules/customer.js

 // 客户管理函数库
-// import apis from "../apis_moudles/index";
-// import req from "../request";
+import apis from "../apis_moudles/";
+import req from "../request";
 
 // 对象数组
-export default {};
+const GETCUSTOMERLIST = function (data) {
+  return req.post(apis.getCustomerList, data);
+};
+
+export default { GETCUSTOMERLIST };

src/api/funcs_modules/index.js

 // 基础模块
 import base from "./base";
+// 用户状态
+import author from "./author";
 // 报表api
 import bi from "./bi";
 // 收费查询api
@@ -16,6 +18,7 @@ import verification from "./verification";
 import welfare from "./welfare";
 const funcs = {
   ...base,
+  ...author,
   ...bi,
   ...chargeQuery,
   ...customer,

src/api/request.js

 // axios二次封装
 import axios from "axios"; // 引入 axios
-import baseUrl from "./env"; // 基础url
+// import baseUrl from "./env"; // 基础url
 import Vue from "vue";
 import code from "./state_code"; // 状态码维护
 import store from "@/store";
@@ -9,7 +9,7 @@ const service = axios.create({
   validateStatus(status) {
     return status >= 200 && status <= 504; // 合法状态码
   },
-  baseURL: baseUrl, // 基础请求路径
+  baseURL: process.env.VUE_APP_API, // 基础请求路径
   timeout: 10000, // 请求超时
 });
 // 重复尝试此时
@@ -30,6 +30,7 @@ service.interceptors.request.use(
         config.data = {};
       }
     }
+    console.log(config);
     return config;
   },
   (error) => {
@@ -50,14 +51,11 @@ service.interceptors.response.use(
         // 请求失败
         reject(response);
       } else {
+        const { returnCode, returnMsg } = response.data || {};
         // 判断token有效
-        const TOKENSTATE = code.TOKEN_INVLIDE_TO_LOGIN(response.data.status);
+        const TOKENSTATE = code.TOKEN_INVLIDE_TO_LOGIN(returnCode);
         // 全局错误拦截
-        const PUBSTATE = code.PUB_ERR(
-          response.data.status,
-          response.data.message,
-          response.config
-        );
+        const PUBSTATE = code.PUB_ERR(returnCode, returnMsg, response.config);
         // 请求成功，但逻辑或者业务有错，返回具体数据，根据业务决定是否要提示 有token失效全局异常不返回
         if (TOKENSTATE && PUBSTATE) {
           resolve(response.data);

src/api/state_code.js

@@ -6,7 +6,7 @@ let that = new Vue();
 // token失效
 const TOKEN_INVLIDE_TO_LOGIN = (code) => {
   // 状态码判断
-  if (code) {
+  if (code === "1012") {
     if (store.state.common.userInfo !== "") {
       that.$msg.error({
         message: "登陆失败",
@@ -25,7 +25,11 @@ const TOKEN_INVLIDE_TO_LOGIN = (code) => {
 };
 // 全局错误处理
 const PUB_ERR = (code, message, config) => {
+  if (config.responseType && config.responseType === "blob") {
+    return true;
+  }
   console.log("错误信息", code, message, config);
+  return true;
 };
 
 export default {

src/assets/style/common.css

 li {
-  list-style: none;
+    list-style: none;
 }
 * {
-  padding: 0;
-  margin: 0;
+    padding: 0;
+    margin: 0;
 }
 button {
-  outline: none !important;
+    outline: none !important;
 }
 button:focus {
-  outline: 0 !important;
+    outline: 0 !important;
 }
 button::-moz-focus-inner {
-  border-color: transparent;
+    border-color: transparent;
 }
 /*for mozilla*/
 .el-drawer {
-  box-shadow: none !important;
+    box-shadow: none !important;
 }
 .text-overOne {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }

src/assets/style/common.less

+@import './reset.less';
+
 // 公共样式
 li {
-  list-style: none;
+    list-style: none;
 }
 
-* {
-  padding: 0;
-  margin: 0;
-}
+// * {
+//     padding: 0;
+//     margin: 0;
+// }
 
 button {
-  outline: none !important;
+    outline: none !important;
 }
 
 button:focus {
-  outline: 0 !important;
+    outline: 0 !important;
 }
 
 button::-moz-focus-inner {
-  border-color: transparent;
+    border-color: transparent;
 }
 
 /*for mozilla*/
 
 .el-drawer {
-  box-shadow: none !important;
+    box-shadow: none !important;
+}
+
+.mar-left10 {
+    .mg-l(40);
+}
+
+// form部分全局样式重置
+.ant-form label{
+  .fs(19);
+}
+.ant-calendar-picker {
+    width: 100%;
 }
 
 // 媒体查询
 // 文本超长
 .too-long(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    width: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    width: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    width: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        width: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    width: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        width: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    width: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        width: @num*1px;
+    }
 
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 // 文本一行显示省略号
 .text-overOne {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 // 文本几行显示省略号
 .text-n(@num) {
-  word-break: break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: @num;
-  overflow: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: @num;
+    overflow: hidden;
 }
 
 // 最小宽
 .min-w(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    min-width: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        min-width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    min-width: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        min-width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    min-width: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        min-width: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    min-width: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        min-width: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    min-width: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        min-width: @num*1px;
+    }
 }
 
 // 最小宽不自适应
 .min-w-n(@num) {
-  min-width: @num*1px;
+    min-width: @num*1px;
 }
 
 //最大宽度
 .max-w(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    max-width: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        max-width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    max-width: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        max-width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    max-width: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        max-width: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    max-width: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        max-width: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    max-width: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        max-width: @num*1px;
+    }
 }
 
 //最大宽度不自适应
 .max-w-n(@num) {
-  max-width: @num*1px;
+    max-width: @num*1px;
 }
 
 //最小高度
 .min-h(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    min-height: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        min-height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    min-height: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        min-height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    min-height: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        min-height: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    min-height: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        min-height: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    min-height: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        min-height: @num*1px;
+    }
 }
 
 //最小高度不自适应
 .min-h-n(@num) {
-  min-height: @num*1px;
+    min-height: @num*1px;
 }
 
 //最大高度
 .max-h(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    max-height: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        max-height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    max-height: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        max-height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    max-height: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        max-height: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    max-height: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        max-height: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    max-height: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        max-height: @num*1px;
+    }
 }
 
 //最大高度不自适应
 .max-h-n(@num) {
-  max-height: @num*1px;
+    max-height: @num*1px;
 }
 
 // 宽度
 .w(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    width: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    width: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        width: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    width: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        width: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    width: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        width: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    width: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        width: @num*1px;
+    }
 }
 
 // 宽度不自适应
 .w-n(@num) {
-  width: @num*1px;
+    width: @num*1px;
 }
 
 // 宽度
 .w-im(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    width: @num*0.66px !important;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        width: @num*0.66px !important;
+    }
 
-  @media screen and (min-width: 1280px) {
-    width: @num*0.66px !important;
-  }
+    @media screen and (min-width: 1280px) {
+        width: @num*0.66px !important;
+    }
 
-  @media screen and (min-width: 1366px) {
-    width: @num*0.71px !important;
-  }
+    @media screen and (min-width: 1366px) {
+        width: @num*0.71px !important;
+    }
 
-  @media screen and (min-width: 1440px) {
-    width: @num*0.75px !important;
-  }
+    @media screen and (min-width: 1440px) {
+        width: @num*0.75px !important;
+    }
 
-  @media screen and (min-width: 1920px) {
-    width: @num*1px !important;
-  }
+    @media screen and (min-width: 1920px) {
+        width: @num*1px !important;
+    }
 }
 
 // 宽度优先级不自适应
 .w-im-n(@num) {
-  width: @num*1px !important;
+    width: @num*1px !important;
 }
 
 //  高度
 .h(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    height: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    height: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    height: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        height: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    height: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        height: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    height: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        height: @num*1px;
+    }
 }
 
 //  高度不自适应
 .h-n(@num) {
-  height: @num*1px;
+    height: @num*1px;
 }
 
 // 行高
 .lh(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    line-height: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        line-height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    line-height: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        line-height: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    line-height: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        line-height: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    line-height: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        line-height: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    line-height: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        line-height: @num*1px;
+    }
 }
 
 // 行高不自适应
 .lh-n(@num) {
-  line-height: @num*1px;
+    line-height: @num*1px;
 }
 
 // 平均内边距
 .pd(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    padding: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        padding: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    padding: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        padding: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    padding: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        padding: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    padding: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        padding: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    padding: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        padding: @num*1px;
+    }
 }
 
 // 内边距不自适应
 .pd-n(@num) {
-  padding: @num*1px;
+    padding: @num*1px;
 }
 
 // 自定义内边距
 .pa(@num1, @num2, @num3, @num4) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    padding: @num1*0.66px @num2*0.66px @num3*0.66px @num4*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        padding: @num1*0.66px @num2*0.66px @num3*0.66px @num4*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    padding: @num1*0.66px @num2*0.66px @num3*0.66px @num4*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        padding: @num1*0.66px @num2*0.66px @num3*0.66px @num4*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    padding: @num1*0.71px @num2*0.71px @num3*0.71px @num4*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        padding: @num1*0.71px @num2*0.71px @num3*0.71px @num4*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    padding: @num1*0.75px @num2*0.75px @num3*0.75px @num4*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        padding: @num1*0.75px @num2*0.75px @num3*0.75px @num4*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    padding: @num1*1px @num2*1px @num3*1px @num4*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        padding: @num1*1px @num2*1px @num3*1px @num4*1px;
+    }
 }
 
 .pa-n(@num1, @num2, @num3, @num4) {
-  padding: @num1*1px @num2*1px @num3*1px @num4*1px;
+    padding: @num1*1px @num2*1px @num3*1px @num4*1px;
 }
 
 // 内左边距
 .pl(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    padding-left: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        padding-left: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    padding-left: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        padding-left: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    padding-left: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        padding-left: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    padding-left: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        padding-left: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    padding-left: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        padding-left: @num*1px;
+    }
 }
 
 .pl-n(@num) {
-  padding-left: @num*1px;
+    padding-left: @num*1px;
 }
 
 // 内右边距
 .pr(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    padding-right: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        padding-right: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    padding-right: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        padding-right: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    padding-right: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        padding-right: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    padding-right: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        padding-right: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    padding-right: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        padding-right: @num*1px;
+    }
 }
 
 .pr-n(@num) {
-  padding-right: @num*1px;
+    padding-right: @num*1px;
 }
 
 // 内部顶部边距
 .pt(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    padding-top: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        padding-top: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    padding-top: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        padding-top: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    padding-top: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        padding-top: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    padding-top: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        padding-top: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    padding-top: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        padding-top: @num*1px;
+    }
 }
 
 .pt-n(@num) {
-  padding-top: @num*1px;
+    padding-top: @num*1px;
 }
 
 // 内下边距
 .pb(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    padding-bottom: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        padding-bottom: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    padding-bottom: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        padding-bottom: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    padding-bottom: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        padding-bottom: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    padding-bottom: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        padding-bottom: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    padding-bottom: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        padding-bottom: @num*1px;
+    }
 }
 
 .pb-n(@num) {
-  padding-bottom: @num*1px;
+    padding-bottom: @num*1px;
 }
 
 // 外边距
 .mg-l(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    margin-left: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        margin-left: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    margin-left: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        margin-left: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    margin-left: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        margin-left: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    margin-left: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        margin-left: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    margin-left: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        margin-left: @num*1px;
+    }
 }
 
 // 外边距
 .mg-l-n(@num) {
-  margin-left: @num*1px;
+    margin-left: @num*1px;
 }
 
 // 上边距
 .mg-t(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    margin-top: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        margin-top: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    margin-top: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        margin-top: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    margin-top: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        margin-top: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    margin-top: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        margin-top: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    margin-top: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        margin-top: @num*1px;
+    }
 }
 // 取消自适应
 .mg-t-n(@num) {
-  margin-top: @num*1px;
+    margin-top: @num*1px;
 }
 
 // 右边距
 .mg-r(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    margin-right: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        margin-right: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    margin-right: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        margin-right: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    margin-right: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        margin-right: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    margin-right: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        margin-right: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    margin-right: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        margin-right: @num*1px;
+    }
 }
 
 .mg-r-n(@num) {
-  margin-right: @num*1px;
+    margin-right: @num*1px;
 }
 
 // 下边距
 .mg-b(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    margin-bottom: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        margin-bottom: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    margin-bottom: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        margin-bottom: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    margin-bottom: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        margin-bottom: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    margin-bottom: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        margin-bottom: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    margin-bottom: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        margin-bottom: @num*1px;
+    }
 }
 //下边距取消适应
 .mg-b-n(@num) {
-  margin-bottom: @num*1px;
+    margin-bottom: @num*1px;
 }
 
 // 平均边距
 .mg(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    margin: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        margin: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    margin: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        margin: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    margin: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        margin: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    margin: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        margin: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    margin: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        margin: @num*1px;
+    }
 }
 // 平均边距取消适应
 .mg-n(@num) {
-  margin: @num*1px;
+    margin: @num*1px;
 }
 
 // 下边距
 .mg-t(@num, @num1) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    margin: @num*0.66px @num1*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        margin: @num*0.66px @num1*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    margin: @num*0.66px @num1*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        margin: @num*0.66px @num1*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    margin: @num*0.71px @num1*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        margin: @num*0.71px @num1*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    margin: @num*0.75px @num1*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        margin: @num*0.75px @num1*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    margin: @num*1px @num1*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        margin: @num*1px @num1*1px;
+    }
 }
 
 .mg-t-n(@num, @num1) {
-  margin: @num*1px @num1*1px;
+    margin: @num*1px @num1*1px;
 }
 
 // 自定义四边距
 .mg-f(@num, @num1, @num2, @num3) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    margin: @num*0.66px @num1*0.66px @num2*0.66px @num3*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        margin: @num*0.66px @num1*0.66px @num2*0.66px @num3*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    margin: @num*0.66px @num1*0.66px @num2*0.66px @num3*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        margin: @num*0.66px @num1*0.66px @num2*0.66px @num3*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    margin: @num*0.71px @num1*0.71px @num2*0.71px @num3*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        margin: @num*0.71px @num1*0.71px @num2*0.71px @num3*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    margin: @num*0.75px @num1*0.75px @num2*0.75px @num3*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        margin: @num*0.75px @num1*0.75px @num2*0.75px @num3*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    margin: @num*1px @num1*1px @num2*1px @num3*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        margin: @num*1px @num1*1px @num2*1px @num3*1px;
+    }
 }
 // 取消边距适配
 .mg-f-n(@num, @num1, @num2, @num3) {
-  margin: @num*1px @num1*1px @num2*1px @num3*1px;
+    margin: @num*1px @num1*1px @num2*1px @num3*1px;
 }
 
 // 左侧
 .l(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    left: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        left: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    left: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        left: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    left: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        left: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    left: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        left: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    left: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        left: @num*1px;
+    }
 }
 
 .l-n(@num) {
-  left: @num*1px;
+    left: @num*1px;
 }
 
 // 右侧
 .r(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    right: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        right: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    right: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        right: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    right: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        right: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    right: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        right: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    right: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        right: @num*1px;
+    }
 }
 
 .r-n(@num) {
-  right: @num*1px;
+    right: @num*1px;
 }
 
 // 顶部
 .t(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    top: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        top: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    top: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        top: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    top: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        top: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    top: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        top: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    top: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        top: @num*1px;
+    }
 }
 // 取消适配
 .t-n(@num) {
-  top: @num*1px;
+    top: @num*1px;
 }
 
 // 底部
 .b(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    bottom: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        bottom: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    bottom: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        bottom: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    bottom: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        bottom: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    bottom: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        bottom: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    bottom: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        bottom: @num*1px;
+    }
 }
 // 取消适配
 .b-n(@num) {
-  bottom: @num*1px;
+    bottom: @num*1px;
 }
 
 // 边框
 .bd(@type, @size, @c) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    border: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        border: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1280px) {
-    border: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 1280px) {
+        border: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1366px) {
-    border: @type @size*0.71px @c;
-  }
+    @media screen and (min-width: 1366px) {
+        border: @type @size*0.71px @c;
+    }
 
-  @media screen and (min-width: 1440px) {
-    border: @type @size*0.75px @c;
-  }
+    @media screen and (min-width: 1440px) {
+        border: @type @size*0.75px @c;
+    }
 
-  @media screen and (min-width: 1920px) {
-    border: @type @size*1px @c;
-  }
+    @media screen and (min-width: 1920px) {
+        border: @type @size*1px @c;
+    }
 }
 
 // 边框顶部
 .bd-t(@type, @size, @c) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    border-top: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        border-top: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1280px) {
-    border-top: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 1280px) {
+        border-top: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1366px) {
-    border-top: @type @size*0.71px @c;
-  }
+    @media screen and (min-width: 1366px) {
+        border-top: @type @size*0.71px @c;
+    }
 
-  @media screen and (min-width: 1440px) {
-    border-top: @type @size*0.75px @c;
-  }
+    @media screen and (min-width: 1440px) {
+        border-top: @type @size*0.75px @c;
+    }
 
-  @media screen and (min-width: 1920px) {
-    border-top: @type @size*1px @c;
-  }
+    @media screen and (min-width: 1920px) {
+        border-top: @type @size*1px @c;
+    }
 }
 
 // 右边框
 .bd-r(@type, @size, @c) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    border-right: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        border-right: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1280px) {
-    border-right: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 1280px) {
+        border-right: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1366px) {
-    border-right: @type @size*0.71px @c;
-  }
+    @media screen and (min-width: 1366px) {
+        border-right: @type @size*0.71px @c;
+    }
 
-  @media screen and (min-width: 1440px) {
-    border-right: @type @size*0.75px @c;
-  }
+    @media screen and (min-width: 1440px) {
+        border-right: @type @size*0.75px @c;
+    }
 
-  @media screen and (min-width: 1920px) {
-    border-right: @type @size*1px @c;
-  }
+    @media screen and (min-width: 1920px) {
+        border-right: @type @size*1px @c;
+    }
 }
 // 取消适配
 .bd-r-n(@num) {
-  border-radius: @num*1px;
+    border-radius: @num*1px;
 }
 
 // 左边框
 .bd-l(@type, @size, @c) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    border-left: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        border-left: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1280px) {
-    border-left: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 1280px) {
+        border-left: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1366px) {
-    border-left: @type @size*0.71px @c;
-  }
+    @media screen and (min-width: 1366px) {
+        border-left: @type @size*0.71px @c;
+    }
 
-  @media screen and (min-width: 1440px) {
-    border-left: @type @size*0.75px @c;
-  }
+    @media screen and (min-width: 1440px) {
+        border-left: @type @size*0.75px @c;
+    }
 
-  @media screen and (min-width: 1920px) {
-    border-left: @type @size*1px @c;
-  }
+    @media screen and (min-width: 1920px) {
+        border-left: @type @size*1px @c;
+    }
 }
 
 // 下边框
 .bd-b(@type, @size, @c) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    border-bottom: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        border-bottom: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1280px) {
-    border-bottom: @type @size*0.66px @c;
-  }
+    @media screen and (min-width: 1280px) {
+        border-bottom: @type @size*0.66px @c;
+    }
 
-  @media screen and (min-width: 1366px) {
-    border-bottom: @type @size*0.71px @c;
-  }
+    @media screen and (min-width: 1366px) {
+        border-bottom: @type @size*0.71px @c;
+    }
 
-  @media screen and (min-width: 1440px) {
-    border-bottom: @type @size*0.75px @c;
-  }
+    @media screen and (min-width: 1440px) {
+        border-bottom: @type @size*0.75px @c;
+    }
 
-  @media screen and (min-width: 1920px) {
-    border-bottom: @type @size*1px @c;
-  }
+    @media screen and (min-width: 1920px) {
+        border-bottom: @type @size*1px @c;
+    }
 }
 
 .bd-b-n(@type, @size, @c) {
-  border-bottom: @type @size*1px @c;
+    border-bottom: @type @size*1px @c;
 }
 
 // 边框圆角
 .bd-rd(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    border-radius: @num*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        border-radius: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    border-radius: @num*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        border-radius: @num*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    border-radius: @num*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        border-radius: @num*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    border-radius: @num*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        border-radius: @num*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    border-radius: @num*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        border-radius: @num*1px;
+    }
 }
 
 // 阴影
 .shadow(@p1, @p2, @p3, @p4, @p5) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    box-shadow: @p1*0.66px @p2*0.66px @p3*0.66px @p4*0.66px @p5;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        box-shadow: @p1*0.66px @p2*0.66px @p3*0.66px @p4*0.66px @p5;
+    }
 
-  @media screen and (min-width: 1280px) {
-    box-shadow: @p1*0.66px @p2*0.66px @p3*0.66px @p4*0.66px @p5;
-  }
+    @media screen and (min-width: 1280px) {
+        box-shadow: @p1*0.66px @p2*0.66px @p3*0.66px @p4*0.66px @p5;
+    }
 
-  @media screen and (min-width: 1366px) {
-    box-shadow: @p1*0.71px @p2*0.71px @p3*0.71px @p4*0.71px @p5;
-  }
+    @media screen and (min-width: 1366px) {
+        box-shadow: @p1*0.71px @p2*0.71px @p3*0.71px @p4*0.71px @p5;
+    }
 
-  @media screen and (min-width: 1440px) {
-    box-shadow: @p1*0.75px @p2*0.75px @p3*0.75px @p4*0.75px @p5;
-  }
+    @media screen and (min-width: 1440px) {
+        box-shadow: @p1*0.75px @p2*0.75px @p3*0.75px @p4*0.75px @p5;
+    }
 
-  @media screen and (min-width: 1920px) {
-    box-shadow: @p1*1px @p2*1px @p3*1px @p4*1px @p5;
-  }
+    @media screen and (min-width: 1920px) {
+        box-shadow: @p1*1px @p2*1px @p3*1px @p4*1px @p5;
+    }
 }
 
 //字体大小
 .fs(@size) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    font-size: @size*0.66px;
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        font-size: @size*0.66px;
+    }
 
-  @media screen and (min-width: 1280px) {
-    font-size: @size*0.66px;
-  }
+    @media screen and (min-width: 1280px) {
+        font-size: @size*0.66px;
+    }
 
-  @media screen and (min-width: 1366px) {
-    font-size: @size*0.71px;
-  }
+    @media screen and (min-width: 1366px) {
+        font-size: @size*0.71px;
+    }
 
-  @media screen and (min-width: 1440px) {
-    font-size: @size*0.75px;
-  }
+    @media screen and (min-width: 1440px) {
+        font-size: @size*0.75px;
+    }
 
-  @media screen and (min-width: 1920px) {
-    font-size: @size*1px;
-  }
+    @media screen and (min-width: 1920px) {
+        font-size: @size*1px;
+    }
 }
 
 // flex左对齐
 .flex-l() {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
 }
 
 // flex居中
 .flex-c() {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 // flex右对齐
 .flex-r() {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 }
 
 // flex平均对齐
 .flex-bt() {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 // 数字
 .trans-x(@num) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    -webkit-transform: translateX(@num * 0.66px);
-    transform: translateX(@num * 0.66px);
-  }
-
-  @media screen and (min-width: 1280px) {
-    -webkit-transform: translateX(@num * 0.66px);
-    transform: translateX(@num * 0.66px);
-  }
-
-  @media screen and (min-width: 1366px) {
-    -webkit-transform: translateX(@num * 0.71px);
-    transform: translateX(@num * 0.71px);
-  }
-
-  @media screen and (min-width: 1440px) {
-    -webkit-transform: translateX(@num * 0.75px);
-    transform: translateX(@num * 0.75px);
-  }
-
-  @media screen and (min-width: 1920px) {
-    -webkit-transform: translateX(@num * 1px);
-    transform: translateX(@num * 1px);
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        -webkit-transform: translateX(@num * 0.66px);
+        transform: translateX(@num * 0.66px);
+    }
+
+    @media screen and (min-width: 1280px) {
+        -webkit-transform: translateX(@num * 0.66px);
+        transform: translateX(@num * 0.66px);
+    }
+
+    @media screen and (min-width: 1366px) {
+        -webkit-transform: translateX(@num * 0.71px);
+        transform: translateX(@num * 0.71px);
+    }
+
+    @media screen and (min-width: 1440px) {
+        -webkit-transform: translateX(@num * 0.75px);
+        transform: translateX(@num * 0.75px);
+    }
+
+    @media screen and (min-width: 1920px) {
+        -webkit-transform: translateX(@num * 1px);
+        transform: translateX(@num * 1px);
+    }
 }
 // 宽度计算
 .w-m(@value, @value1) {
-  @media screen and (min-width: 0px) and (max-width: 1280px) {
-    width: calc(@value - @value1 * 0.66px);
-  }
+    @media screen and (min-width: 0px) and (max-width: 1280px) {
+        width: calc(@value - @value1 * 0.66px);
+    }
 
-  @media screen and (min-width: 1280px) {
-    width: calc(@value - @value1 * 0.66px);
-  }
+    @media screen and (min-width: 1280px) {
+        width: calc(@value - @value1 * 0.66px);
+    }
 
-  @media screen and (min-width: 1366px) {
-    width: calc(@value - @value1 * 0.71px);
-  }
+    @media screen and (min-width: 1366px) {
+        width: calc(@value - @value1 * 0.71px);
+    }
 
-  @media screen and (min-width: 1440px) {
-    width: calc(@value - @value1 * 0.75px);
-  }
+    @media screen and (min-width: 1440px) {
+        width: calc(@value - @value1 * 0.75px);
+    }
 
-  @media screen and (min-width: 1920px) {
-    width: calc(@value - @value1 * 1px);
-  }
+    @media screen and (min-width: 1920px) {
+        width: calc(@value - @value1 * 1px);
+    }
 }
 
 // 固定定位
 .p-f() {
-  position: fixed;
+    position: fixed;
 }
 
 // 绝对定位
 .p-a() {
-  position: absolute;
+    position: absolute;
 }
 
 // 相对定位
 .p-r() {
-  position: relative;
+    position: relative;
 }

src/assets/style/reset.less

+html,
+body,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+//   outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+//   box-sizing: border-box;
+}
+
+body {
+  line-height: 1;
+  height: auto;
+}
+
+:focus {
+  outline: 1;
+}
+
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+a {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+ins {
+  background-color: #ff9;
+  color: #000;
+  text-decoration: none;
+}
+
+mark {
+  background-color: #ff9;
+  color: #000;
+  font-style: italic;
+  font-weight: bold;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+abbr[title],
+dfn[title] {
+  border-bottom: 1px dotted #000;
+
+  cursor: help;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #cccccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+input,
+select {
+  vertical-align: middle;
+}

src/components/Antd/index.js

 import Vue from "vue";
-import { Button, Input, notification, menu, dropdown } from "ant-design-vue";
+import {
+  Button,
+  Input,
+  Select,
+  DatePicker,
+  notification,
+  menu,
+  dropdown,
+  FormModel,
+  Row,
+  Col,
+  Table,
+  InputNumber,
+  message,
+} from "ant-design-vue";
 
 export default () => {
-  let els = [Button, Input, notification, menu, dropdown];
+  let els = [
+    Button,
+    Input,
+    notification,
+    menu,
+    dropdown,
+    FormModel,
+    Row,
+    Col,
+    Select,
+    DatePicker,
+    Table,
+    InputNumber,
+    message,
+  ];
   // 注册
   els.forEach((item) => {
     Vue.use(item);
   });
   // 全局提示
   Vue.prototype.$msg = notification;
+  Vue.prototype.$message = message;
 };

src/components/Lodash/index.js

-import { after } from "lodash";
+import { after, cloneDeep } from "lodash";
 import Vue from "vue";
-let lodashs = { after };
+let lodashs = { after, cloneDeep };
 export default () => {
   Vue.prototype.$lodash = lodashs;
 };

src/router/index.js

@@ -4,6 +4,8 @@ import RouterGuard from "./router.config";
 Vue.use(VueRouter);
 // 布局容器
 import Layout from "../views/layout/index.vue";
+// 登录模块
+import author from "./modules/author";
 // 客户管理
 import customer from "./modules/customer";
 // 福利信息管理
@@ -26,7 +28,7 @@ const routes = [
     children: [
       {
         path: "/",
-        redirect: "/customer",
+        redirect: "/login",
       },
       customer,
       welfare,
@@ -37,6 +39,7 @@ const routes = [
       bi,
     ],
   },
+  author,
 ];
 
 const router = new VueRouter({

src/router/modules/author.js

+export default {
+  path: "/",
+  component: () => {
+    return import(/* webpackChunkName: "bi" */ "@/views/author");
+  },
+  children: [
+    {
+      path: "login",
+      name: "login",
+      component: () => import("@/views/author/login"),
+    },
+    {
+      path: "forget",
+      name: "forget",
+      component: () => import("@/views/author/forget"),
+    },
+  ],
+};

src/router/modules/customer.js

 // 客户信息路由表,分包名称:customer
 export default {
   path: "/customer",
-  name: "Customer",
+  redirect: "/customer/info",
   component: () => {
     return import(/* webpackChunkName: "customer" */ "@/views/customer");
   },
+  children: [
+    {
+      path: "info",
+      name: "CustomerInfo",
+      component: () => import("@/views/customer/info"),
+    },
+  ],
 };

src/router/modules/menu.js

 export default [
   {
     icon: "ssiuser",
-    path: "customer",
+    path: "1",
     title: "客户信息",
     children: [
       {
-        path: "/customer",
+        path: "/customer/info",
         title: "客户信息明细",
       },
       {

src/router/router.config.js

@@ -15,12 +15,10 @@ export default (VueRouter, router) => {
   // 页面路由切换时进度条
   // let router = new VueRouter();
   router.beforeEach((to, from, next) => {
-    console.log(to.path);
     NProgress.start();
     next();
   });
   router.afterEach(() => {
-    console.log("done");
     NProgress.done();
   });
 };

src/views/author/forget.vue

+<template>
+  <div class="forget">
+    <h2 class="title">商保管理系统</h2>
+    <div class="content">
+      <p class="module-title">
+        <router-link to="/login" replace>密码登录</router-link>
+        <span class="_forget">忘记密码</span>
+      </p>
+      <div class="steps">
+        <div :class="{ 'step-item': true, 'step-active': activeStep === '1' }">
+          <div class="_flex">
+            <p class="circle">1</p>
+            <p class="line"></p>
+          </div>
+          <p>验证邮箱</p>
+        </div>
+        <div :class="{ 'step-item': true, 'step-active': activeStep === '2' }">
+          <div class="_flex">
+            <p class="line"></p>
+            <p class="circle">2</p>
+          </div>
+          <p>填写新密码</p>
+        </div>
+      </div>
+      <a-form-model ref="form" :model="form" :rules="formRules">
+        <div v-if="activeStep === '1'">
+          <a-form-model-item prop="userName">
+            <a-input
+              size="large"
+              v-model="form.userName"
+              placeholder="请输入邮箱"
+            ></a-input>
+          </a-form-model-item>
+          <a-form-model-item prop="verificationCode">
+            <a-input
+              size="large"
+              v-model="form.verificationCode"
+              placeholder="请输入验证码"
+            >
+              <a-button type="primary" slot="addonAfter" @click="getVerifyCode"
+                >发送验证码至邮箱</a-button
+              >
+            </a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button size="large" type="primary" block @click="handlerNext"
+              >下一步</a-button
+            >
+          </a-form-model-item>
+        </div>
+        <div v-if="activeStep === '2'">
+          <a-form-model-item prop="passWord">
+            <a-input
+              size="large"
+              type="password"
+              v-model="form.passWord"
+              placeholder="请输入新密码"
+            ></a-input>
+          </a-form-model-item>
+          <a-form-model-item prop="newPwd">
+            <a-input
+              size="large"
+              type="password"
+              v-model="form.newPwd"
+              placeholder="再次输入新密码"
+            ></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button size="large" type="primary" block @click="handlerReset"
+              >确定重置密码</a-button
+            >
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeStep: "1",
+      form: {},
+      formRules: {
+        userName: [{ required: true, message: "请输入邮箱" }],
+        passWord: [{ required: true, message: "请输入密码" }],
+        newPwd: [
+          { required: true, message: "请再次输入新密码" },
+          { validator: this.isSamePwd },
+        ],
+        verificationCode: [{ required: true, message: "请输入验证码" }],
+      },
+      verifyImg: "",
+    };
+  },
+  mounted() {
+    // this._getVerifyImg();
+  },
+  methods: {
+    isSamePwd(rule, value, callback) {
+      if (value && this.form.passWord) {
+        if (value !== this.form.passWord) {
+          return callback(new Error("两次密码输入不一致"));
+        }
+      }
+      callback();
+    },
+    getVerifyCode() {
+      this.$refs.form.validateField(["userName"], (valid) => {
+        if (valid) {
+          return false;
+        }
+        const data = {
+          userName: this.form.userName,
+        };
+        this._getVerifyEmail(data);
+      });
+    },
+    handlerNext() {
+      this.$refs.form.validateField(
+        ["userName", "verificationCode"],
+        (valid) => {
+          if (valid) {
+            return false;
+          }
+          this.activeStep = "2";
+        }
+      );
+    },
+    handlerReset() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        const { userName, verificationCode, newPwd } = this.form;
+        this._reset({ userName, verificationCode, newPwd });
+      });
+    },
+    _getVerifyEmail(data) {
+      this.$apis.GETVERIFYEMAIL(data).then((res) => {
+        if (res.returnCode === "0000") {
+          this.$message.success(res.returnMsg || "发送成功");
+        } else {
+          this.$message.error(res.returnMsg || "发送失败");
+        }
+      });
+    },
+    _reset(data) {
+      this.$apis.RESETPASSWORD(data).then((res) => {
+        if (res.returnCode === "0000") {
+          this.$message.success(res.returnMsg || "修改成功");
+          this.$router.replace("/login");
+        } else {
+          this.$message.error(res.returnMsg || "修改失败");
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.forget {
+  .title {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    .fs(21);
+    .lh(29);
+    color: #fff;
+    .pa(20, 17, 20, 17);
+    transform: translate(-50%, -50%);
+    background-color: #2b63ff;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      .h(69);
+      .bd-t(solid, 35, transparent);
+      .bd-b(solid, 35, transparent);
+    }
+    &::before {
+      .l(-20);
+      .bd-r(solid, 20, #2b63ff);
+    }
+    &::after {
+      .r(-20);
+      .bd-l(solid, 20, #2b63ff);
+    }
+  }
+  .steps {
+    .pa(18, 37, 32, 37);
+    display: flex;
+    .step-item {
+      .fs(14);
+      width: 50%;
+      opacity: 0.4;
+      &:first-child {
+        ._flex {
+          .mg-l(20);
+        }
+      }
+      &:last-child {
+        text-align: right;
+        ._flex {
+          .mg-r(20);
+        }
+      }
+    }
+    ._flex {
+      display: flex;
+      align-items: center;
+      .circle {
+        .w(27);
+        .h(27);
+        .fs(12);
+        .lh(27);
+        .mg-b(4);
+        text-align: center;
+        color: #fff;
+        background-color: #373842;
+        border-radius: 50%;
+      }
+      .line {
+        flex: 1;
+        .h(3);
+        background-color: #373842;
+      }
+    }
+    .step-active {
+      opacity: 1;
+    }
+  }
+  .module-title {
+    .fs(19);
+    .lh(29);
+    .mg-b(32);
+    a {
+      color: #373842;
+      opacity: 0.4;
+    }
+    ._forget {
+      float: right;
+      font-weight: bold;
+      .fs(21);
+      color: #373842;
+    }
+  }
+  .ant-button {
+    .mg-t(13);
+  }
+}
+</style>

src/views/author/index.vue

+<template>
+  <div class="author">
+    <div class="content">
+      <h1 class="title">欢迎登陆商保管理系统</h1>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.author {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url("../../assets/image/login_bg.png") center center no-repeat;
+  background-size: 100% 100%;
+  .title {
+    .fs(120);
+    .lh(168);
+    .pb(90);
+    color: #fff;
+  }
+  .login,
+  .forget {
+    .w(525);
+    .bd-rd(27);
+    .pa(50, 63, 10, 63);
+    margin: 0 auto;
+    position: relative;
+    background-color: #fff;
+  }
+
+  input {
+    background-color: #f8fafb;
+  }
+}
+</style>
+
+<style lang="less">
+.forget,
+.login {
+  .ant-input-group > .ant-input {
+    background-color: #f8fafb;
+  }
+}
+</style>

src/views/author/login.vue

+<template>
+  <div class="login">
+    <h2 class="title">商保管理系统</h2>
+    <div class="content">
+      <p class="module-title">
+        <span>密码登录</span>
+        <router-link class="_forget" to="/forget" replace>忘记密码</router-link>
+      </p>
+      <a-form-model ref="form" :model="form" :rules="formRules">
+        <a-form-model-item prop="userName">
+          <a-input
+            size="large"
+            v-model="form.userName"
+            placeholder="请输入用户名"
+          ></a-input>
+        </a-form-model-item>
+        <a-form-model-item prop="passWord">
+          <a-input
+            size="large"
+            type="password"
+            v-model="form.passWord"
+            placeholder="请输入密码"
+          ></a-input>
+        </a-form-model-item>
+        <a-form-model-item prop="verificationCode">
+          <a-input
+            size="large"
+            v-model="form.verificationCode"
+            placeholder="请输入验证码"
+          >
+            <img
+              :src="verifyImg"
+              class="verify-img"
+              @click="_getVerifyImg"
+              slot="addonAfter"
+            />
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button size="large" type="primary" block @click="handlerLogin"
+            >登录</a-button
+          >
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      formRules: {
+        userName: [{ required: true, message: "请输入用户名" }],
+        passWord: [{ required: true, message: "请输入密码" }],
+        verificationCode: [{ required: true, message: "请输入验证码" }],
+      },
+      verifyImg: "",
+    };
+  },
+  mounted() {
+    this._getVerifyImg();
+  },
+  methods: {
+    handlerLogin() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this._login();
+      });
+    },
+    _getVerifyImg() {
+      this.$apis.GETVERIFYIMG().then((res) => {
+        const url = window.URL.createObjectURL(res);
+        this.verifyImg = url || "";
+      });
+    },
+    _login() {
+      this.$apis.LOGIN(this.form).then((res) => {
+        console.log(res);
+        if (res.returnCode === "0000") {
+          console.log(res.content);
+          this.$router.replace("/customer");
+        } else {
+          this.$message.error(res.returnMsg || "出现错误");
+          this.form.verificationCode = "";
+          this._getVerifyImg();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  .title {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    .fs(21);
+    .lh(29);
+    color: #fff;
+    .pa(20, 17, 20, 17);
+    transform: translate(-50%, -50%);
+    background-color: #2b63ff;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      .h(69);
+      .bd-t(solid, 35, transparent);
+      .bd-b(solid, 35, transparent);
+    }
+    &::before {
+      .l(-20);
+      .bd-r(solid, 20, #2b63ff);
+    }
+    &::after {
+      .r(-20);
+      .bd-l(solid, 20, #2b63ff);
+    }
+  }
+  .module-title {
+    .fs(21);
+    .lh(29);
+    .mg-b(32);
+    color: #373842;
+    font-weight: bold;
+    ._forget {
+      float: right;
+      .fs(19);
+      font-weight: normal;
+      color: #373842;
+      opacity: 0.4;
+    }
+  }
+  .ant-button {
+    .mg-t(13);
+  }
+  .verify-img {
+    cursor: pointer;
+  }
+}
+</style>

src/views/customer/index.vue

 <template>
   <div class="index">
     <!-- 客户信息 -->
-    客户信息
+    <!-- 客户信息
     <a-button>按钮</a-button>
     <a-input placeholder="按需"></a-input>
     <a-button @click="() => openNotificationWithIcon('success')">
@@ -14,7 +14,8 @@
     <a-button @click="() => openNotificationWithIcon('error')">
       Error
     </a-button>
-    <Icon :name="'ssisuccess'" :size="50" />
+    <Icon :name="'ssisuccess'" :size="50" /> -->
+    <router-view></router-view>
   </div>
 </template>
 

src/views/customer/info/index.vue

+<template>
+  <div class="custom-info">
+    <!-- form -->
+    <a-form-model ref="form" layout="vertical" :model="form">
+      <a-row :gutter="40">
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="病历号码">
+            <a-input
+              v-model="form.mrnNo"
+              size="large"
+              placeholder="请输入病历号"
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="客户姓名">
+            <a-input
+              v-model="form.patientName"
+              size="large"
+              placeholder="请输入客户姓名"
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="出生日期">
+            <a-date-picker
+              v-model="form.birthday"
+              size="large"
+              placeholder="请选择出生日期"
+            ></a-date-picker>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="保险公司">
+            <a-select
+              v-model="form.payorId"
+              size="large"
+              placeholder="请选择保险公司"
+            >
+              <a-select-option v-for="item in companyCode" :key="item.code">
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="保单号码">
+            <a-input
+              v-model="form.policyNo"
+              size="large"
+              placeholder="请输入保单号码"
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="18" :sm="16" class="none-label">
+          <a-form-model-item label="button">
+            <a-button size="large" type="primary">新建客户信息</a-button>
+            <a-button
+              size="large"
+              class="mar-left10"
+              type="primary"
+              @click="handlerSearch"
+              >查询</a-button
+            >
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+
+    <!-- table -->
+    <a-table
+      :columns="columns"
+      :data-source="dataList"
+      size="large"
+      row-key="mrnNo"
+      :pagination="pagination"
+      @change="onChange"
+    >
+      <template slot="operation" slot-scope="">
+        <a-button size="large" type="link">修改</a-button>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const columns = [
+      { title: "病历号", dataIndex: "mrnNo", width: 120 },
+      { title: "客户姓名", dataIndex: "patientName", width: 120 },
+      { title: "出生日期", dataIndex: "birthday", width: 120 },
+      { title: "性别", dataIndex: "sex", width: 60 },
+      { title: "保险公司", dataIndex: "payorId", width: 120 },
+      { title: "保单号码", dataIndex: "policyNo", width: 120 },
+      { title: "保险有效日期", dataIndex: "startDate", width: 120 },
+      { title: "保险终止日期", dataIndex: "endDate", width: 120 },
+      {
+        title: "操作",
+        key: "operation",
+        align: "center",
+        width: "90px",
+        scopedSlots: { customRender: "operation" },
+      },
+    ];
+    return {
+      columns,
+      form: {},
+      pageForm: {},
+      companyCode: [],
+      dataList: [],
+      pager: {
+        pageNum: 1,
+        pageSize: 1,
+      },
+      total: 0,
+    };
+  },
+  mounted() {
+    this._getCustomerList();
+  },
+  computed: {
+    pagination() {
+      const { pageNum, pageSize } = this.pager;
+      const pages = Math.ceil(this.total / pageSize);
+      return {
+        current: pageNum,
+        size: "large",
+        position: "bottom",
+        align: "right",
+        hideOnSinglePage: false,
+        itemRender: (current, type, originalElement) => {
+          originalElement.children = undefined;
+          if (type === "prev") {
+            originalElement.text = "上一页";
+          }
+          if (type === "page") {
+            return (
+              <p>
+                <span class="current-page">{current}</span> / {pages}
+              </p>
+            );
+          }
+          if (type === "next") {
+            originalElement.text = "下一页";
+            return (
+              <div>
+                {originalElement}
+                <a-input-number
+                  onblur={this.onShowSizeChange}
+                  class="size-change"
+                ></a-input-number>
+              </div>
+            );
+          }
+          return originalElement;
+        },
+      };
+    },
+  },
+  methods: {
+    onChange(pager) {
+      console.log(pager);
+      const { current } = pager;
+      this.apger.pageNum = current;
+    },
+    onShowSizeChange(e) {
+      e && e.stopPropagation();
+      console.log(e);
+    },
+    handlerSearch() {
+      console.log(this.$refs.form.validate);
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.pager.pageNum = 1;
+        this.pageForm = this.$lodash.cloneDeep(this.form);
+        this._getCustomerList();
+      });
+    },
+    _getCustomerList() {
+      const data = {
+        ...this.pageForm,
+        ...this.pager,
+      };
+      this.$apis.GETCUSTOMERLIST(data).then((res) => {
+        this.dataList = (res.content && res.content.list) || [];
+        this.total = (res.content && res.content.total) || 0;
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.custom-info {
+  .pa(40, 48, 67, 52);
+  background-color: #fff;
+}
+.none-label {
+  text-align: right;
+  .ant-form-item-label {
+    opacity: 0;
+  }
+}
+.current-page {
+  color: #4d7cfe;
+}
+.size-change {
+  .w(107);
+  .mg-l(40);
+  background-color: #f8fafb;
+  border: none;
+}
+</style>
+<style lang="less">
+.none-label {
+  .ant-form-item-label {
+    opacity: 0;
+  }
+}
+.custom-info {
+  .ant-pagination-item-active {
+    .fs(16);
+    border: none;
+    // vertical-align: baseline;
+  }
+  .ant-pagination-item-link {
+    .fs(16);
+    .lh(22);
+    .pa(7, 15, 7, 15);
+    display: inline-block;
+    background-color: #f8fafb;
+    border: none;
+  }
+}
+</style>

src/views/layout/components/Header.vue

@@ -15,7 +15,7 @@
           <Icon v-else :name="'ssiuser'" :size="32" />
         </div>
         <a-menu slot="overlay">
-          <a-menu-item key="1"> 退出登录 </a-menu-item>
+          <a-menu-item key="1" @click="loginOut"> 退出登录 </a-menu-item>
         </a-menu>
       </a-dropdown>
     </div>
@@ -36,6 +36,15 @@ export default {
     getPopupContainer() {
       return document.querySelector(".avator");
     },
+    loginOut() {
+      this.$apis.LOGINOUT().then((res) => {
+        if (res.returnCode) {
+          this.$router.push("/login");
+        } else {
+          this.$message.error(res.returnMsg || "退出失败");
+        }
+      });
+    },
   },
 };
 </script>

src/views/layout/components/menu/index.js

@@ -60,6 +60,7 @@ export default {
                 break;
               }
             } else if (item.path && item.path === key) {
+              console.log(item, key);
               menuStack.push(item);
               this.$store.dispatch("common/setMenuStack", menuStack);
               return true;

vue.config.js

@@ -48,10 +48,10 @@ module.exports = {
     port: 8888,
     hot: true,
     proxy: {
-      "/dev": {
-        target: "http://www.jd.com",
+      "^/dev": {
+        target: "http://47.99.75.3:8070",
         pathRewrite: {
-          "/dev": "",
+          "^/dev": "/",
         },
         changeOrigin: true,
         secure: false,