登录页

src/layouts/UserLayout.vue

@@ -1,12 +1,11 @@
 <template>
-
   <div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
+    <img style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover" :src="bg" alt="" />
     <div class="container">
       <div class="user-layout-lang">
         <select-lang class="select-lang-trigger" />
       </div>
       <div class="user-layout-content">
-
         <router-view />
 
         <div class="footer">
@@ -26,22 +25,27 @@ import SelectLang from '@/components/SelectLang'
 export default {
   name: 'UserLayout',
   components: {
-    SelectLang
+    SelectLang,
   },
   mixins: [deviceMixin],
-  mounted () {
+  data() {
+    return {
+      bg: require('@/assets/images/user/bg.jpg'),
+    }
+  },
+  mounted() {
     document.body.classList.add('userLayout')
   },
-  beforeDestroy () {
+  beforeDestroy() {
     document.body.classList.remove('userLayout')
-  }
+  },
 }
 </script>
 
 <style lang="less" scoped>
 #userLayout.user-layout-wrapper {
   height: 100%;
-
+  position: relative;
   &.mobile {
     .container {
       .main {
@@ -54,7 +58,7 @@ export default {
   .container {
     width: 100%;
     min-height: 100%;
-    background: #f0f2f5 url(~@/assets/background.png) no-repeat 50%;
+    // background: #f0f2f5 url(~@/assets/background.png) no-repeat 50%;
     background-size: 100%;
     //padding: 50px 0 84px;
     position: relative;
@@ -106,7 +110,7 @@ export default {
 
           .title {
             font-size: 33px;
-            color: rgba(0, 0, 0, .85);
+            color: rgba(0, 0, 0, 0.85);
             font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
             font-weight: 600;
             position: relative;
@@ -156,7 +160,6 @@ export default {
     a {
       text-decoration: none;
     }
-
   }
 }
 </style>

src/store/modules/simulation.js

@@ -72,7 +72,7 @@ export default {
     async getSystemModules({ commit }, payload) {
       try {
         const res = await request({ url: '/baseData/moduleStatus/list' })
-        commit('setSystemModules', res.data.data)
+        commit('setSystemModules', res.data)
       } catch (error) {
         console.log(error)
       }

src/views/user/Login.vue

@@ -1,19 +1,43 @@
 <template>
-  <div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;position: fixed;left: 0;top: 0;">
-    <div style="width: 908px; height: 490px;" class="flexRowStart">
-      <div style="width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.4);" class="flexColumnCenterCenter">
-        <img src="@/assets/loginLeft.png" alt="" style="width: 100%;height: 100%;">
+  <div class="flexColumnCenterCenter" style="width: 100%; height: 100vh; position: fixed; left: 0; top: 0">
+    <div
+      style="
+        height: 36px;
+        font-size: 36px;
+        line-height: 1;
+        font-weight: bolder;
+        letter-spacing: 7px;
+        color: #ffffff;
+        margin-bottom: 75px;
+      "
+    >
+      某仿真分析方法工具
+    </div>
+    <div style="width: 917px; height: 445px; position: relative; overflow: hidden" class="flexRowStart">
+      <img
+        style="position: absolute; left: -10px; top: -8px; z-index: 1; width: 937px; height: 465px"
+        :src="bgLogin"
+        alt=""
+      />
+      <div style="width: 524px; height: 100%; position: relative; z-index: 2" class="flexColumnCenterCenter">
+        <!-- <img src="@/assets/loginLeft.png" alt="" style="width: 100%;height: 100%;"> -->
       </div>
-      <div style="width: 50%;height: 100%;background-color: #fff;padding: 70px 50px;">
+      <div style="width: 393px; height: 100%; padding: 48px 32px; position: relative; z-index: 3">
         <div class="main">
-          <a-form
-            id="formLogin"
-            class="user-layout-login"
-            ref="formLogin"
-            :form="form"
-            @submit="handleSubmit"
+          <div
+            style="
+              font-size: 24px;
+              line-height: 1;
+              font-weight: bolder;
+              font-stretch: normal;
+              letter-spacing: 5px;
+              color: #ffffff;
+              margin-bottom: 27px;
+            "
           >
-            
+            用户登录
+          </div>
+          <a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
             <!-- <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" :message="$t('user.login.message-invalid-credentials')" /> -->
             <a-form-item>
               <a-input
@@ -22,23 +46,29 @@
                 placeholder="请输入用户名"
                 v-decorator="[
                   'username',
-                  {rules: [{ required: true, message: $t('user.userName.required') }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
+                  {
+                    rules: [
+                      { required: true, message: $t('user.userName.required') },
+                      { validator: handleUsernameOrEmail },
+                    ],
+                    validateTrigger: 'change',
+                  },
                 ]"
               >
-                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
               </a-input>
             </a-form-item>
-                
+
             <a-form-item>
               <a-input-password
                 size="large"
                 placeholder="请输入密码"
                 v-decorator="[
                   'password',
-                  {rules: [{ required: true, message: $t('user.password.required') }], validateTrigger: 'blur'}
+                  { rules: [{ required: true, message: $t('user.password.required') }], validateTrigger: 'blur' },
                 ]"
               >
-                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
               </a-input-password>
             </a-form-item>
             <a-form-item>
@@ -60,7 +90,7 @@
                 <img class="code" :src="codeImg" @click="codeClick" ref="code" alt="更新验证码" />
               </div>
             </a-form-item>
-          
+
             <!-- <a-form-item>
               <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">{{ $t('user.login.remember-me') }}</a-checkbox>
               <router-link
@@ -69,8 +99,8 @@
                 style="float: right;"
               >{{ $t('user.login.forgot-password') }}</router-link>
             </a-form-item> -->
-          
-            <a-form-item style="margin-top:104px">
+
+            <a-form-item style="margin-top: 16px">
               <a-button
                 size="large"
                 type="primary"
@@ -78,11 +108,11 @@
                 class="login-button"
                 :loading="state.loginBtn"
                 :disabled="state.loginBtn"
-              >{{ $t('user.login.login') }}</a-button>
+                >{{ $t('user.login.login') }}</a-button
+              >
             </a-form-item>
-          
           </a-form>
-          
+
           <two-step-captcha
             v-if="requiredTwoStepCaptcha"
             :visible="stepCaptchaVisible"
@@ -104,10 +134,11 @@ import { getSmsCaptcha } from '@/api/login'
 
 export default {
   components: {
-    TwoStepCaptcha
+    TwoStepCaptcha,
   },
-  data () {
+  data() {
     return {
+      bgLogin: require('@/assets/images/user/bg-login.png'),
       customActiveKey: 'tab1',
       loginBtn: false,
       // login type: 0 email, 1 username, 2 telephone
@@ -121,13 +152,13 @@ export default {
         loginBtn: false,
         // login type: 0 email, 1 username, 2 telephone
         loginType: 0,
-        smsSendBtn: false
+        smsSendBtn: false,
       },
       clientCode: '',
       codeImg: '',
     }
   },
-  created () {
+  created() {
     // get2step({ })
     //   .then(res => {
     //     this.requiredTwoStepCaptcha = res.result.stepCode
@@ -140,12 +171,12 @@ export default {
   },
   methods: {
     ...mapActions(['Login', 'Logout']),
-    codeClick () {
+    codeClick() {
       this.clientCode = 'c' + Math.random() * 100000000
       this.codeImg = '/api/validateCode?t=' + new Date().getTime() + '&clientCode=' + this.clientCode
     },
     // 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)) {
@@ -155,17 +186,17 @@ export default {
       }
       callback()
     },
-    handleTabClick (key) {
+    handleTabClick(key) {
       this.customActiveKey = key
       // this.form.resetFields()
     },
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       const {
         form: { validateFields },
         state,
         customActiveKey,
-        Login
+        Login,
       } = this
 
       state.loginBtn = true
@@ -181,9 +212,9 @@ export default {
           loginParams.password = values.password
           Login(loginParams)
             .then((res) => {
-                this.loginSuccess(res)
+              this.loginSuccess(res)
             })
-            .catch(err => {
+            .catch((err) => {
               this.requestFailed(err)
               console.log(err)
             })
@@ -197,9 +228,12 @@ export default {
         }
       })
     },
-    getCaptcha (e) {
+    getCaptcha(e) {
       e.preventDefault()
-      const { form: { validateFields }, state } = this
+      const {
+        form: { validateFields },
+        state,
+      } = this
 
       validateFields(['mobile'], { force: true }, (err, values) => {
         if (!err) {
@@ -214,33 +248,35 @@ export default {
           }, 1000)
 
           const hide = this.$message.loading('验证码发送中..', 0)
-          getSmsCaptcha({ mobile: values.mobile }).then(res => {
-            setTimeout(hide, 2500)
-            this.$notification['success']({
-              message: '提示',
-              description: '验证码获取成功，您的验证码为：' + res.result.captcha,
-              duration: 8
+          getSmsCaptcha({ mobile: values.mobile })
+            .then((res) => {
+              setTimeout(hide, 2500)
+              this.$notification['success']({
+                message: '提示',
+                description: '验证码获取成功，您的验证码为：' + res.result.captcha,
+                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)
-          })
         }
       })
     },
-    stepCaptchaSuccess () {
+    stepCaptchaSuccess() {
       this.loginSuccess()
     },
-    stepCaptchaCancel () {
+    stepCaptchaCancel() {
       this.Logout().then(() => {
         this.loginBtn = false
         this.stepCaptchaVisible = false
       })
     },
-    loginSuccess (res) {
+    loginSuccess(res) {
       console.log(res)
       // check res.homePage define, set $router.push name res.homePage
       // Why not enter onComplete
@@ -258,100 +294,133 @@ export default {
       setTimeout(() => {
         this.$notification.success({
           message: '欢迎',
-          description: `${timeFix()}，欢迎回来`
+          description: `${timeFix()}，欢迎回来`,
         })
       }, 1000)
       this.isLoginError = false
     },
-    requestFailed (err) {
+    requestFailed(err) {
       this.isLoginError = true
       this.$notification['error']({
         message: '错误',
         description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
-        duration: 4
+        duration: 4,
       })
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-  @import '../../assets/bootstrap.css';
-  #login-wrapper {
-    margin: 50px auto 0;
-    position: relative;
-    z-index: 5;
+@import '../../assets/bootstrap.css';
+#login-wrapper {
+  margin: 50px auto 0;
+  position: relative;
+  z-index: 5;
+}
+#logo-login {
+  background: rgba(48, 65, 96, 0.8);
+  border-radius: 3px 3px 0 0;
+  color: #ffffff;
+  padding: 1px 0 14px 25px;
+}
+.f-item {
+  position: relative;
+}
+.code {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50%;
+  height: 52px;
+  object-fit: cover;
+}
+.account-box {
+  -moz-border-radius: 0 0 4px 4px;
+  -webkit-border-radius: 0 0 4px 4px;
+  -khtml-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+  z-index: 3;
+  font-size: 13px !important;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  background-color: #ffffff;
+  padding: 20px;
+}
+.user-layout-login {
+  label {
+    font-size: 14px;
   }
-  #logo-login {
-    background: rgba(48, 65, 96, 0.8);
-    border-radius: 3px 3px 0 0;
-    color: #FFFFFF;
-    padding: 1px 0 14px 25px;
-  }
-  .f-item {
-    position: relative;
-  }
-  .code {
-    position: absolute;
-    top: 0;
-    right: 0;
+
+  .getCaptcha {
+    display: block;
+    width: 100%;
     height: 40px;
   }
-  .account-box{
-    -moz-border-radius: 0 0 4px 4px;
-    -webkit-border-radius: 0 0 4px 4px;
-    -khtml-border-radius: 0 0 4px 4px;
-    border-radius: 0 0 4px 4px;
-    z-index: 3;
-    font-size: 13px !important;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background-color: #ffffff;
-    padding: 20px;
+
+  .forge-password {
+    font-size: 14px;
   }
-  .user-layout-login {
-    label {
-      font-size: 14px;
-    }
-  
-    .getCaptcha {
-      display: block;
-      width: 100%;
-      height: 40px;
-    }
-  
-    .forge-password {
-      font-size: 14px;
-    }
-  
-    button.login-button {
-      padding: 0 15px;
-      font-size: 16px;
-      height: 40px;
-      width: 100%;
-    }
-  
-    .user-login-other {
-      text-align: left;
-      margin-top: 24px;
-      line-height: 22px;
-  
-      .item-icon {
-        font-size: 24px;
-        color: rgba(0, 0, 0, 0.2);
-        margin-left: 16px;
-        vertical-align: middle;
-        cursor: pointer;
-        transition: color 0.3s;
-  
-        &:hover {
-          color: #1890ff;
-        }
-      }
-  
-      .register {
-        float: right;
+
+  button.login-button {
+    padding: 0 15px;
+    font-size: 16px;
+    height: 40px;
+    width: 100%;
+    background-image: url(../../assets/images/user/btn-login.png);
+    border: none;
+    background-position: -2px 0px;
+  }
+
+  .user-login-other {
+    text-align: left;
+    margin-top: 24px;
+    line-height: 22px;
+
+    .item-icon {
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.2);
+      margin-left: 16px;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: color 0.3s;
+
+      &:hover {
+        color: #1890ff;
       }
     }
+
+    .register {
+      float: right;
+    }
   }
-  
+}
+::v-deep {
+  .ant-input-lg {
+    height: 52px;
+    background-color: #0b293a;
+    border: solid 1px #1d5777;
+    color: #ffffff;
+  }
+  .ant-input-lg:-webkit-autofill {
+    -webkit-text-fill-color: #fff !important;
+    transition: background-color 5000s ease-in-out 0s;
+    caret-color: #acfff2;
+  }
+  .ant-input-prefix .anticon {
+    color: #ffffff !important;
+  }
+  .ant-input-suffix {
+    color: #ffffff;
+  }
+  .ant-input-suffix .anticon:hover {
+    color: #ffffffcc;
+  }
+  .has-error .ant-input-lg:hover {
+    background-color: #0b293a;
+  }
+  .has-error .ant-input-affix-wrapper .ant-input-lg,
+  .has-error .ant-input-affix-wrapper .ant-input-lg:hover {
+    background-color: #0b293a;
+  }
+}
 </style>