wasn

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/i18n",
+        "public/ueditor/lang",
+        "public/utf8-jsp/lang",
+        "src/assets/static/ueditor/lang"
+    ]
+}

src/layouts/UserLayout.vue

@@ -7,9 +7,9 @@
       <!--            <img src="~@/assets/logo.png" class="logo" alt="logo">-->
       <!--          </a>-->
       <!--        </div>-->
-      <div class="top font">
+      <!-- <div class="top font">
         设备管理系统平台
-      </div>
+      </div> -->
       <!--      </div>-->
 
       <route-view></route-view>
@@ -20,7 +20,7 @@
         <!--          <a href="_self">隐私</a>-->
         <!--          <a href="_self">条款</a>-->
         <!--        </div>-->
-<!--        <div class="copyright">
+        <!--        <div class="copyright">
           Copyright &copy; 2022
         </div>-->
       </div>
@@ -36,120 +36,71 @@ export default {
   name: 'UserLayout',
   components: { RouteView },
   mixins: [mixinDevice],
-  data () {
+  data() {
     return {}
   },
-  mounted () {
+  mounted() {
     document.body.classList.add('userLayout')
   },
-  beforeDestroy () {
+  beforeDestroy() {
     document.body.classList.remove('userLayout')
   }
 }
 </script>
 
 <style lang="less" scoped>
-  #userLayout.user-layout-wrapper {
-    height: 100%;
-    background: #f0f2f5 url(~@/assets/NewBg.png);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    &.mobile {
-      .container {
-        .main {
-          max-width: 368px;
-          width: 98%;
-        }
+#userLayout.user-layout-wrapper {
+  height: 100%;
+  background: #f0f2f5 url(~@/assets/NewBg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  &.mobile {
+    .container {
+      .main {
+        max-width: 368px;
+        width: 98%;
       }
     }
-.font{
-  font-size:50px;
-  color:#00EAFF;
-  letter-spacing: 3px;
-}
-    .container {
+  }
+  .font {
+    font-size: 50px;
+    color: #00eaff;
+    letter-spacing: 3px;
+  }
+  .container {
+    width: 100%;
+    min-height: 100%;
+    background-size: 100%;
+    position: relative;
+    a {
+      text-decoration: none;
+    }
+    .footer {
+      position: absolute;
       width: 100%;
-      min-height: 100%;
-      background-size: 100%;
-      padding: 110px 0 144px;
-      position: relative;
-      a {
-        text-decoration: none;
-      }
-
-      .top {
-        text-align: center;
-
-        .header {
-          height: 44px;
-          line-height: 44px;
-
-          .badge {
-            position: absolute;
-            display: inline-block;
-            line-height: 1;
-            vertical-align: middle;
-            margin-left: -12px;
-            margin-top: -10px;
-            opacity: 0.8;
-          }
+      bottom: 15%;
+      padding: 0 16px;
+      margin: 48px 0 24px;
+      text-align: center;
 
-          .logo {
-            height: 44px;
-            vertical-align: top;
-            margin-right: 16px;
-            border-style: none;
-          }
-
-          .title {
-            font-size: 33px;
-            color: rgba(0, 0, 0, .85);
-            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-            font-weight: 600;
-            position: relative;
-            top: 2px;
-          }
-        }
-        .desc {
-          font-size: 24px;
+      .links {
+        margin-bottom: 8px;
+        font-size: 14px;
+        a {
           color: white;
-          margin-top: 30px;
-          margin-bottom: 40px;
-        }
-      }
-
-      .main {
-        min-width: 260px;
-        width: 368px;
-        margin: 0 auto;
-      }
-
-      .footer {
-        position: absolute;
-        width: 100%;
-        bottom: 15%;
-        padding: 0 16px;
-        margin: 48px 0 24px;
-        text-align: center;
-
-        .links {
-          margin-bottom: 8px;
-          font-size: 14px;
-          a {
-            color: white;
-            transition: all 0.3s;
-            &:not(:last-child) {
-              margin-right: 40px;
-            }
+          transition: all 0.3s;
+          &:not(:last-child) {
+            margin-right: 40px;
           }
         }
-        .copyright {
-          color: #00EAFF;
-          font-size: 20px;
-          font-weight: 500;
-          font-family: PingFang SC;
-        }
+      }
+      .copyright {
+        color: #00eaff;
+        font-size: 20px;
+        font-weight: 500;
+        font-family: PingFang SC;
       }
     }
   }
+}
 </style>

src/permission.js

@@ -17,7 +17,7 @@ const whiteList = ['login', 'register', 'test', 'registerResult', GlobalConstant
 router.beforeEach((to, from, next) => {
   if (to.path === GlobalConstant.PC_INDEX_PATH) {
     if (BaseTool.Util._isMobile()) {
-      next({ path: GlobalConstant.MOBILE_INDEX_PATH, query: { } })
+      next({ path: GlobalConstant.MOBILE_INDEX_PATH, query: {} })
       NProgress.done()
       return
     }
@@ -35,8 +35,6 @@ router.beforeEach((to, from, next) => {
       next({ path: GlobalConstant.PC_INDEX_PATH })
       NProgress.done()
     } else {
-      console.log('to.path=================' + to.path)
-      console.log('to.path=================2' + store.getters.roles.length)
       if (store.getters.roles.length === 0) {
         store
           .dispatch('GetInfo')
@@ -46,30 +44,10 @@ router.beforeEach((to, from, next) => {
               // 根据roles权限生成可访问的路由表
               // 动态添加可访问路由表
               router.addRoutes(store.getters.addRouters)
-              // 根据权限前往工作台
-              let newPath = null
-              if (to.path === '/toWorkplaceBacklog') {
-                const role = res.data.roles.join()
-                console.log('to.path=================3' + role)
-                switch (true) {
-                  case role.includes('repair'):
-                    newPath = '/NewWorkplaceBacklog'
-                    break
-                  case role.includes('store'):
-                    newPath = '/StoreWorkplaceBacklog'
-                    break
-                  default :
-                    newPath = '/WorkplaceBacklog'
-                    break
-                }
-              } else {
-                newPath = to.path
-              }
-              const redirect = decodeURIComponent(from.query.redirect || newPath)
-
-              if (newPath === redirect) {
+              const redirect = decodeURIComponent(from.query.redirect || to.path)
+              if (to.path === redirect) {
                 // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
-                next({ ...to, path: newPath, replace: true })
+                next({ ...to, replace: true })
               } else {
                 // 跳转到目的路由
                 next({ path: redirect })
@@ -95,7 +73,7 @@ router.beforeEach((to, from, next) => {
       next()
     } else {
       // next({ path: '/user/login', query: { redirect: to.fullPath } })
-      next({ path: '/user/login', query: { } })
+      next({ path: '/user/login', query: {} })
       NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }
   }

src/views/Login copy.vue

@@ -0,0 +1,407 @@
+<template>
+  <div>
+    <div class="fh-login">
+      <!-- <div class="fh-login-left">
+        <h2 style="padding-bottom: 0px"></h2>
+        <h2 style="padding-bottom: 0px">乾元科技</h2>
+        <h2 style="font-size:30px">设备管理系统</h2>
+      </div> -->
+      <div class="fh-login-right">
+        <div class="login-title">账号登录</div>
+        <a-form id="formLogin" ref="formLogin" :form="form" class="login-form" @submit="handleSubmit">
+          <a-form-item>
+            <a-input
+              type="text"
+              placeholder="用户名"
+              class="login-input"
+              v-decorator="[
+                'username',
+                {
+                  rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }],
+                  validateTrigger: 'change',
+                },
+              ]"
+            >
+              <template slot="addonBefore">
+                <a-icon type="user" :style="{ color: '#00DEFF;', fontSize: '16px' }" />
+                账号:
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item>
+            <a-input
+              type="password"
+              autocomplete="false"
+              placeholder="请输入密码"
+              class="login-input"
+              max="6"
+              v-decorator="[
+                'password',
+                { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' },
+              ]"
+            >
+              <template slot="addonBefore">
+                <a-icon type="lock" :style="{ color: '#00DEFF;', fontSize: '16px' }" />
+                密码:
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-checkbox :checked="remberMe" v-model="remberMe"
+            ><span style="color: #00deff; font-size: 14px">记住密码</span></a-checkbox
+          >
+          <a-button class="btn" type="primary" htmlType="submit"> 登录 </a-button>
+        </a-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
+import { mapActions } from 'vuex'
+import { timeFix } from '@/utils/util'
+import { getSmsCaptcha, checkCaptchaCode, getInfo } from '@/api/upms/login'
+import { encryptPassword } from '@/common/common'
+import cookie from 'vue-cookie'
+import BaseTool from '@/utils/tool'
+
+export default {
+  components: {
+    TwoStepCaptcha,
+  },
+  data() {
+    return {
+      customActiveKey: 'tab1',
+      loginBtn: false,
+      // login type: 0 email, 1 username, 2 telephone
+      loginType: 0,
+      randomStr: '',
+      captchaImage: null,
+      isLoginError: false,
+      requiredTwoStepCaptcha: false,
+      stepCaptchaVisible: false,
+      form: this.$form.createForm(this),
+      state: {
+        time: 60,
+        loginBtn: false,
+        // login type: 0 email, 1 username, 2 telephone
+        loginType: 0,
+        smsSendBtn: false,
+      },
+      remberMe: null,
+      password: null,
+    }
+  },
+  created() {
+    // get2step({ })
+    //   .then(res => {
+    //     this.requiredTwoStepCaptcha = res.result.stepCode
+    //   })
+    //   .catch(() => {
+    //     this.requiredTwoStepCaptcha = false
+    //   })
+    // this.requiredTwoStepCaptcha = true
+    // 获取用户名和密码
+    let username = cookie.get('username')
+    if (BaseTool.Object.isBlank(username)) {
+      username = ''
+    }
+    const password = cookie.get('password')
+    console.log(username, password, 33333)
+    this.remberMe = this.getRemberMe()
+    const {
+      form: { setFieldsValue },
+    } = this
+    this.$nextTick(() => {
+      setFieldsValue({
+        username: username,
+        password,
+      })
+    })
+    this.getCaptchaImage()
+  },
+  methods: {
+    ...mapActions(['Login', 'Logout']),
+    // handler
+    handleUsernameOrEmail(rule, value, callback) {
+      const { state } = this
+      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
+      if (regex.test(value)) {
+        state.loginType = 0
+      } else {
+        state.loginType = 1
+      }
+      callback()
+    },
+    handleTabClick(key) {
+      this.customActiveKey = key
+      // this.form.resetFields()
+    },
+    handleSubmit(e) {
+      e.preventDefault()
+      const {
+        form: { validateFields },
+        state,
+        customActiveKey,
+        Login,
+      } = this
+
+      state.loginBtn = true
+
+      const validateFieldsKey =
+        customActiveKey === 'tab1' ? ['username', 'password', 'captchaCode'] : ['mobile', 'smsCode', 'captchaCode']
+      validateFields(validateFieldsKey, { force: true }, (err, values) => {
+        if (!err) {
+          const loginParams = {
+            ...values,
+            randomStr: this.randomStr,
+            password: values.password ? encryptPassword(values.password) : '',
+            grant_type: 'password',
+            scope: 'server',
+            loginType: customActiveKey === 'tab1' ? 1 : 2,
+          }
+          // 记住密码的时候直接使用cookie中的密码
+          if (values.password === cookie.get('password')) {
+            loginParams.password = cookie.get('password')
+          }
+          this.password = loginParams.password
+          delete loginParams.username
+          loginParams[!state.loginType ? 'email' : 'username'] = values.username
+          // loginParams.password = md5(values.password)
+          Login(loginParams)
+            .then((res) => this.loginSuccess(res))
+            .catch((err) => console.log(err))
+            .finally(() => {
+              state.loginBtn = false
+              this.getCaptchaImage()
+            })
+        } else {
+          setTimeout(() => {
+            state.loginBtn = false
+          }, 600)
+        }
+      })
+    },
+    getCaptcha(e) {
+      e.preventDefault()
+      const {
+        form: { validateFields },
+        state,
+      } = this
+
+      validateFields(['mobile', 'captchaCode'], { force: true }, (err, values) => {
+        if (!err) {
+          checkCaptchaCode({ captchaCode: values.captchaCode, randomStr: this.randomStr }).then((res) => {
+            const flag = res.data
+            if (flag) {
+              state.smsSendBtn = true
+
+              const interval = window.setInterval(() => {
+                if (state.time-- <= 0) {
+                  state.time = 60
+                  state.smsSendBtn = false
+                  window.clearInterval(interval)
+                }
+              }, 1000)
+
+              const hide = this.$message.loading('验证码发送中..', 0)
+              getSmsCaptcha({ mobile: values.mobile, captchaCode: values.captchaCode, randomStr: this.randomStr })
+                .then((res) => {
+                  setTimeout(hide, 2500)
+                  this.$notification['success']({
+                    message: '提示',
+                    description: '验证码获取成功，您的验证码为：' + res.data,
+                    duration: 8,
+                  })
+                })
+                .catch((err) => {
+                  setTimeout(hide, 1)
+                  clearInterval(interval)
+                  state.time = 60
+                  state.smsSendBtn = false
+                  this.requestFailed(err)
+                })
+            } else {
+              this.$message.error('图片验证码错误')
+              this.getCaptchaImage()
+            }
+          })
+        }
+      })
+    },
+    stepCaptchaSuccess() {
+      this.loginSuccess()
+    },
+    stepCaptchaCancel() {
+      this.Logout().then(() => {
+        this.loginBtn = false
+        this.stepCaptchaVisible = false
+      })
+    },
+    loginSuccess(res) {
+      // 延迟 1 秒显示欢迎信息
+      this.$router.push({ path: '/WorkplaceBacklog' })
+      setTimeout(() => {
+        this.$notification.success({
+          message: '欢迎',
+          description: `${timeFix()}，欢迎回来`,
+        })
+      }, 1000)
+      this.isLoginError = false
+      // 记住密码
+      cookie.set('remberMe', this.remberMe, 7)
+      cookie.set('username', this.form.getFieldValue('username'), 7)
+      cookie.set('repairTips', 1, 7)
+      if (this.remberMe) {
+        cookie.set('password', this.password, 7)
+      } else {
+        cookie.delete('password')
+      }
+    },
+    requestFailed(err) {
+      console.log(err)
+      this.isLoginError = true
+      this.$notification['error']({
+        message: '错误',
+        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
+        duration: 4,
+      })
+    },
+    getCaptchaImage() {
+      this.randomStr = this.getRandomStr()
+      // this.captchaImage = location.protocol + '//' + location.host + '/api/verify/captcha/' + this.randomStr
+      this.captchaImage = process.env.VUE_APP_API_BASE_URL + '/verify/captcha/' + this.randomStr
+      // getCaptchaImage(this.randomStr).then(res)
+    },
+    getRandomStr() {
+      return new Date().getTime() + Math.random() * 1000
+    },
+    remberPassword(param) {
+      console.log(param)
+    },
+    getRemberMe() {
+      const remberMe = cookie.get('remberMe')
+      if (BaseTool.Object.isBlank(remberMe)) {
+        return true
+      } else {
+        return remberMe === 'true'
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.fh-login {
+  /* width: 830px;
+    height: 435px; */
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  /* margin-top: -250px;
+    margin-left: -440px; */
+  transform: translate(-50%, -43%);
+  /* background: url('~@/assets/logn.png') no-repeat; */
+}
+/* .fh-login .fh-login-left {
+    float: left;
+    width: 50%;
+  } */
+/* .fh-login .fh-login-left img {
+    margin: 132px auto 0;
+    display: block;
+  }
+  .fh-login .fh-login-left h2 {
+    margin-top: 65px;
+    padding-bottom: 20px;
+    color: #ffffff;
+    font-size: 40px;
+    font-weight: 600;
+    text-align: center;
+  } */
+.fh-login .fh-login-right {
+  /* float: right; */
+  width: 390px;
+  height: 335px;
+}
+.fh-login-right .login-title {
+  width: 95px;
+  letter-spacing: 1px;
+  padding-bottom: 2px;
+  font-size: 20px;
+  color: #fff;
+  font-family: PingFang SC;
+  border-bottom: 4px solid #00deff;
+  margin: 0 auto;
+  margin-bottom: 13px;
+  text-align: center;
+}
+.btn {
+  display: inline-block;
+  color: #fff !important;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
+  border: 5px solid #fff;
+  border-radius: 0;
+  margin-top: 10px;
+  box-shadow: none !important;
+  -webkit-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
+  -o-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
+  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
+  cursor: pointer;
+  vertical-align: middle;
+  width: 89%;
+  height: 40px;
+  border: none;
+  background: rgb(82, 166, 212) !important;
+  color: rgb(255, 255, 255);
+  user-select: none;
+}
+.fh-login .login-input {
+  border: none !important;
+  outline: none !important;
+  height: 36px !important;
+  width: 89% !important;
+  background-color: rgba(0, 0, 0, 0) !important;
+
+  border: 1px solid #9ce7ff !important;
+  border-radius: 6px !important;
+}
+/*设置输入图标大小*/
+.ant-input-affix-wrapper {
+  font-size: 20px;
+}
+/deep/ .ant-input {
+  height: 36px !important;
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: none;
+  color: #fff;
+}
+.login-form {
+  margin-left: 38px;
+}
+/*调整图标位置*/
+.login-form .ant-input-affix-wrapper .ant-input-prefix {
+  left: 9px !important;
+}
+.login-form .ant-input-affix-wrapper .ant-input:not(:first-child) {
+  padding-left: 38px;
+}
+.ant-form-item {
+  margin-bottom: 16px;
+}
+/deep/.has-error .ant-input-affix-wrapper .ant-input,
+.has-error .ant-input-affix-wrapper .ant-input:hover {
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: none;
+}
+/deep/ .ant-input-group-addon {
+  border: none;
+  color: #00deff;
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+/deep/.ant-form-item-control-wrapper {
+}
+/deep/.ant-checkbox {
+  color: #00deff !important;
+}
+</style>

src/views/Login.vue

@@ -1,63 +1,50 @@
 <template>
-  <div>
-    <div class="fh-login">
-      <!-- <div class="fh-login-left">
-        <h2 style="padding-bottom: 0px"></h2>
-        <h2 style="padding-bottom: 0px">乾元科技</h2>
-        <h2 style="font-size:30px">设备管理系统</h2>
-      </div> -->
-      <div class="fh-login-right">
-        <div class="login-title">账号登录</div>
-        <a-form
-          id="formLogin"
-          ref="formLogin"
-          :form="form"
-          class="login-form"
-          @submit="handleSubmit">
-          <a-form-item>
-            <a-input
-              type="text"
-              placeholder="用户名"
-              class="login-input"
-              v-decorator="[
-                'username',
-                {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
-              ]"
-            >
-              <template slot="addonBefore" >
-                <a-icon type="user" :style="{ color: '#00DEFF;',fontSize:'16px', }"/>
-                账号:
-              </template>
-            </a-input>
-          </a-form-item>
-          <a-form-item>
-            <a-input
-              type="password"
-              autocomplete="false"
-              placeholder="请输入密码"
-              class="login-input"
-              max="6"
-              v-decorator="[
-                'password',
-                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
-              ]"
-            >
-              <template slot="addonBefore" >
-                <a-icon type="lock" :style="{ color: '#00DEFF;',fontSize:'16px', }"/>
-                密码:
-              </template>
-            </a-input>
-          </a-form-item>
-          <a-checkbox :checked="remberMe" v-model="remberMe"><span style="color: #00DEFF;font-size: 14px;">记住密码</span></a-checkbox>
-          <a-button class="btn" type="primary" htmlType="submit">
-            登录
-          </a-button>
-        </a-form>
-      </div>
-    </div>
+  <div class="login-container">
+    <h1>欢迎登录</h1>
+    <a-form id="formLogin" ref="formLogin" :form="form" class="login-form" @submit="handleSubmit">
+      <a-form-item>
+        <a-input
+          type="text"
+          placeholder="用户名"
+          class="login-input"
+          v-decorator="[
+            'username',
+            {
+              rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }],
+              validateTrigger: 'change'
+            }
+          ]"
+        >
+          <template slot="prefix">
+            <div class="icon">
+              <a-icon type="user" />
+            </div>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item>
+        <a-input
+          type="password"
+          autocomplete="false"
+          placeholder="请输入密码"
+          class="login-input"
+          max="6"
+          v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
+        >
+          <template slot="prefix">
+            <div class="icon">
+              <a-icon type="lock" />
+            </div>
+          </template>
+        </a-input>
+      </a-form-item>
+      <!-- <a-checkbox :checked="remberMe" v-model="remberMe"
+        ><span style="color: #00deff; font-size: 14px">记住密码</span></a-checkbox
+      > -->
+      <a-button class="btn" type="primary" htmlType="submit"> 登录 </a-button>
+    </a-form>
   </div>
 </template>
-
 <script>
 import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
 import { mapActions } from 'vuex'
@@ -71,7 +58,7 @@ export default {
   components: {
     TwoStepCaptcha
   },
-  data () {
+  data() {
     return {
       customActiveKey: 'tab1',
       loginBtn: false,
@@ -94,7 +81,7 @@ export default {
       password: null
     }
   },
-  created () {
+  created() {
     // get2step({ })
     //   .then(res => {
     //     this.requiredTwoStepCaptcha = res.result.stepCode
@@ -111,7 +98,9 @@ export default {
     const password = cookie.get('password')
     console.log(username, password, 33333)
     this.remberMe = this.getRemberMe()
-    const { form: { setFieldsValue } } = this
+    const {
+      form: { setFieldsValue }
+    } = this
     this.$nextTick(() => {
       setFieldsValue({
         username: username,
@@ -123,7 +112,7 @@ export default {
   methods: {
     ...mapActions(['Login', 'Logout']),
     // handler
-    handleUsernameOrEmail (rule, value, callback) {
+    handleUsernameOrEmail(rule, value, callback) {
       const { state } = this
       const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
       if (regex.test(value)) {
@@ -133,11 +122,11 @@ export default {
       }
       callback()
     },
-    handleTabClick (key) {
+    handleTabClick(key) {
       this.customActiveKey = key
       // this.form.resetFields()
     },
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       const {
         form: { validateFields },
@@ -148,7 +137,8 @@ export default {
 
       state.loginBtn = true
 
-      const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password', 'captchaCode'] : ['mobile', 'smsCode', 'captchaCode']
+      const validateFieldsKey =
+        customActiveKey === 'tab1' ? ['username', 'password', 'captchaCode'] : ['mobile', 'smsCode', 'captchaCode']
       validateFields(validateFieldsKey, { force: true }, (err, values) => {
         if (!err) {
           const loginParams = {
@@ -168,7 +158,7 @@ export default {
           loginParams[!state.loginType ? 'email' : 'username'] = values.username
           // loginParams.password = md5(values.password)
           Login(loginParams)
-            .then((res) => this.loginSuccess(res))
+            .then(res => this.loginSuccess(res))
             .catch(err => console.log(err))
             .finally(() => {
               state.loginBtn = false
@@ -181,9 +171,12 @@ export default {
         }
       })
     },
-    getCaptcha (e) {
+    getCaptcha(e) {
       e.preventDefault()
-      const { form: { validateFields }, state } = this
+      const {
+        form: { validateFields },
+        state
+      } = this
 
       validateFields(['mobile', 'captchaCode'], { force: true }, (err, values) => {
         if (!err) {
@@ -201,20 +194,22 @@ export default {
               }, 1000)
 
               const hide = this.$message.loading('验证码发送中..', 0)
-              getSmsCaptcha({ mobile: values.mobile, captchaCode: values.captchaCode, randomStr: this.randomStr }).then(res => {
-                setTimeout(hide, 2500)
-                this.$notification['success']({
-                  message: '提示',
-                  description: '验证码获取成功，您的验证码为：' + res.data,
-                  duration: 8
+              getSmsCaptcha({ mobile: values.mobile, captchaCode: values.captchaCode, randomStr: this.randomStr })
+                .then(res => {
+                  setTimeout(hide, 2500)
+                  this.$notification['success']({
+                    message: '提示',
+                    description: '验证码获取成功，您的验证码为：' + res.data,
+                    duration: 8
+                  })
+                })
+                .catch(err => {
+                  setTimeout(hide, 1)
+                  clearInterval(interval)
+                  state.time = 60
+                  state.smsSendBtn = false
+                  this.requestFailed(err)
                 })
-              }).catch(err => {
-                setTimeout(hide, 1)
-                clearInterval(interval)
-                state.time = 60
-                state.smsSendBtn = false
-                this.requestFailed(err)
-              })
             } else {
               this.$message.error('图片验证码错误')
               this.getCaptchaImage()
@@ -223,18 +218,18 @@ export default {
         }
       })
     },
-    stepCaptchaSuccess () {
+    stepCaptchaSuccess() {
       this.loginSuccess()
     },
-    stepCaptchaCancel () {
+    stepCaptchaCancel() {
       this.Logout().then(() => {
         this.loginBtn = false
         this.stepCaptchaVisible = false
       })
     },
-    loginSuccess (res) {
+    loginSuccess(res) {
       // 延迟 1 秒显示欢迎信息
-      this.$router.push({ path: '/toWorkplaceBacklog' })
+      this.$router.push({ path: '/WorkplaceBacklog' })
       setTimeout(() => {
         this.$notification.success({
           message: '欢迎',
@@ -252,7 +247,7 @@ export default {
         cookie.delete('password')
       }
     },
-    requestFailed (err) {
+    requestFailed(err) {
       console.log(err)
       this.isLoginError = true
       this.$notification['error']({
@@ -261,19 +256,19 @@ export default {
         duration: 4
       })
     },
-    getCaptchaImage () {
+    getCaptchaImage() {
       this.randomStr = this.getRandomStr()
       // this.captchaImage = location.protocol + '//' + location.host + '/api/verify/captcha/' + this.randomStr
       this.captchaImage = process.env.VUE_APP_API_BASE_URL + '/verify/captcha/' + this.randomStr
       // getCaptchaImage(this.randomStr).then(res)
     },
-    getRandomStr () {
+    getRandomStr() {
       return new Date().getTime() + Math.random() * 1000
     },
-    remberPassword (param) {
+    remberPassword(param) {
       console.log(param)
     },
-    getRemberMe () {
+    getRemberMe() {
       const remberMe = cookie.get('remberMe')
       if (BaseTool.Object.isBlank(remberMe)) {
         return true
@@ -284,120 +279,45 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-  .fh-login {
-    /* width: 830px;
-    height: 435px; */
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    /* margin-top: -250px;
-    margin-left: -440px; */
-    transform: translate(-50%,-43%);
-    /* background: url('~@/assets/logn.png') no-repeat; */
-  }
-  /* .fh-login .fh-login-left {
-    float: left;
-    width: 50%;
-  } */
-  /* .fh-login .fh-login-left img {
-    margin: 132px auto 0;
-    display: block;
-  }
-  .fh-login .fh-login-left h2 {
-    margin-top: 65px;
-    padding-bottom: 20px;
-    color: #ffffff;
+<style lang="less" scoped>
+.login-container {
+  width: 588px;
+  height: 624px;
+  background: #ffffff;
+  border-radius: 24px;
+  opacity: 0.83;
+  position: absolute;
+  left: 10%;
+  top: 50%;
+  font-family: PingFang SC;
+  transform: translateY(-50%);
+  padding: 100px;
+  text-align: center;
+  h1 {
     font-size: 40px;
-    font-weight: 600;
-    text-align: center;
-  } */
-  .fh-login .fh-login-right {
-    /* float: right; */
-    width: 390px;
-    height: 335px;
+    color: #2882fe;
+    padding-bottom: 70px;
   }
-  .fh-login-right .login-title {
-    width: 95px;
-    letter-spacing: 1px;
-    padding-bottom: 2px;
+  /deep/ .ant-input {
+    height: 56px;
+    background: #ffffff;
+    border-radius: 10px;
     font-size: 20px;
-    color: #fff;
-    font-family: PingFang SC;
-    border-bottom: 4px solid #00DEFF ;
-    margin: 0 auto;
-    margin-bottom: 13px;
-    text-align: center;
-  }
-  .btn {
-    display: inline-block;
-    color: #FFF !important;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
-    border: 5px solid #FFF;
-    border-radius: 0;
-    margin-top:10px;
-    box-shadow: none !important;
-    -webkit-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
-    -o-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
-    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
-    cursor: pointer;
-    vertical-align: middle;
-    width: 89%;
-    height: 40px;
-    border: none;
-    background: rgb(82, 166, 212) !important;
-    color: rgb(255, 255, 255);
-    user-select: none;
+    padding-left: 50px;
   }
-  .fh-login .login-input{
-    border: none!important;
-    outline: none!important;
-    height: 36px!important;
-    width: 89%!important;
-    background-color: rgba(0,0,0,0)!important;
-
-   border: 1px solid #9CE7FF!important;
-border-radius: 6px!important;
-
-  }
-  /*设置输入图标大小*/
-  .ant-input-affix-wrapper{
+  .icon {
+    color: #333;
     font-size: 20px;
   }
- /deep/ .ant-input{
-    height: 36px!important;
-    background-color: rgba(0,0,0,0)!important;
-    border: none;
-color:#fff;
-
-  }
-  .login-form{
-    margin-left: 38px;
-  }
-  /*调整图标位置*/
-  .login-form .ant-input-affix-wrapper .ant-input-prefix {
-    left: 9px !important;
+  /deep/.ant-input-affix-wrapper .ant-input-prefix {
+    left: 18px;
   }
-  .login-form .ant-input-affix-wrapper .ant-input:not(:first-child){
-    padding-left: 38px;
-  }
-  .ant-form-item {
-    margin-bottom: 16px;
+  .btn {
+    width: 383px;
+    height: 56px;
+    background: #2882fe;
+    border-radius: 10px;
+    margin-top: 20px;
   }
-  /deep/.has-error .ant-input-affix-wrapper .ant-input, .has-error .ant-input-affix-wrapper .ant-input:hover {
-    background-color: rgba(0,0,0,0)!important;
-    border: none;
-
-}
- /deep/ .ant-input-group-addon  {
-  border: none;
-  color: #00DEFF;
-  background-color: rgba(0,0,0,0)!important;
-}
- /deep/.ant-form-item-control-wrapper{
-}
- /deep/.ant-checkbox{
-  color:#00DEFF !important;
 }
 </style>