Ver código fonte

2022年8月15日-登录界面修改

zhuliu 3 anos atrás
pai
commit
411a4b4101
4 arquivos alterados com 338 adições e 237 exclusões
  1. 1 1
      src/utils/axios.js
  2. 4 4
      src/views/apply/index.vue
  3. 1 1
      src/views/layout/index.vue
  4. 332 231
      src/views/login/index.vue

+ 1 - 1
src/utils/axios.js

@@ -39,7 +39,7 @@ _axios.interceptors.request.use(
     if (config.loading) {
       loadingInstance = Loading.service({})
     }
-    console.log(config)
+    // console.log(config)
     return config;
   },
   function (error) {

+ 4 - 4
src/views/apply/index.vue

@@ -267,10 +267,10 @@ export default {
 .admin-apply {
 
 }
-.details:hover{
-  border-bottom: 1px solid black;
-  cursor: pointer;
-}
+// .details:hover{
+//   border-bottom: 1px solid black;
+//   cursor: pointer;
+// }
  .demo-table-expand {
     font-size: 0;
   }

+ 1 - 1
src/views/layout/index.vue

@@ -123,7 +123,7 @@ export default {
     },
     getUserinfo() {
       this.$api.getUserInfo().then(response => {
-        console.log(response)
+        // console.log(response)
         this.$store.commit('SET_ADMIN_USERINFO', response.data)
       })
     },

+ 332 - 231
src/views/login/index.vue

@@ -1,270 +1,371 @@
 <template>
-  <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-      <div class="title-container">
-        <h3 class="title">系统登录</h3>
+  <div class="login">
+    <div class="login-weaper">
+      <div class="login-left">
+        <div class="login-time">{{ time.txt }}</div>
+        <div class="login-left-box">
+          <div>
+            <div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
+            <h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
+            <div class="msg">
+              <div class="msg-author">
+                <span>{{ quotations.name }}</span>
+                <span>{{ quotations.comeFrom }}</span>
+              </div>
+              <div class="msg-txt">{{ quotations.content }}</div>
+            </div>
+          </div>
+        </div>
       </div>
-      <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input
-            ref="username"
-            v-model="loginForm.username"
-            placeholder="请输入用户名"
-            name="username"
-            type="text"
-            tabindex="1"
-            autocomplete="on"
-        />
-      </el-form-item>
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-        <el-form-item prop="password">
-          <span class="svg-container">
-            <svg-icon icon-class="password" />
-          </span>
-          <el-input
-              :key="passwordType"
-              ref="password"
-              v-model="loginForm.password"
-              :type="passwordType"
-              placeholder="请输入密码"
-              name="password"
-              tabindex="2"
-              autocomplete="on"
-              @keyup.native="checkCapslock"
-              @blur="capsTooltip = false"
-              @keyup.enter.native="handleLogin"
-          />
-          <span class="show-pwd" @click="showPwd">
-            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-          </span>
-        </el-form-item>
-      </el-tooltip>
-    <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-        <el-form-item prop="code">
-          <span class="svg-container">
-            <i class="el-icon-position"></i>
-          </span>
-          <el-input
-           @blur="capsTooltip = false"
-            type="text"
-            maxlength="4"
-            placeholder="请输入验证码"
-            v-model="loginForm.code"
-            clearable
-            autocomplete="off"
-            @keyup.enter.native="handleLogin"
-          />
-          <span class="show-pwd">
-            <img @click="getCode" class="login-code-img" style="margin-top: 0" :src="captcha" title="点击获取新的验证码" height="40px">
-          </span>
-        </el-form-item>
-      </el-tooltip>
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登 录</el-button>
-    </el-form>
+      <div class="login-right">
+        <div class="login-main">
+          <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
+          <el-form class="el-form login-form">
+            <el-form-item prop="username" class="margin-left_0">
+              <el-input
+                  type="text"
+                  placeholder="请输入账号"
+                  prefix-icon="el-icon-user"
+                  v-model="ruleForm.username"
+                  clearable
+                  autocomplete="off"
+                  @keyup.enter.native="submitForm"
+              >
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password" class="margin-left_0">
+              <el-input
+                  type="password"
+                  placeholder="请输入密码"
+                  prefix-icon="el-icon-lock"
+                  v-model="ruleForm.password"
+                  autocomplete="off"
+                  :show-password="true"
+                  @keyup.enter.native="submitForm"
+              >
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code" class="margin-left_0">
+              <div class="el-row" span="24">
+                <div class="el-col el-col-16">
+                  <el-input
+                      type="text"
+                      maxlength="4"
+                      placeholder="请输入验证码"
+                      prefix-icon="el-icon-position"
+                      v-model="ruleForm.code"
+                      clearable
+                      autocomplete="off"
+                      @keyup.enter.native="submitForm"
+                  ></el-input>
+                </div>
+                <div class="el-col el-col-8">
+                  <div class="login-code">
+                    <img @click="getCode" class="login-code-img" style="margin-top: 0" :src="captcha" title="点击获取新的验证码">
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" class="login-submit" @click="submitForm" :loading="btnLoading">
+                <span>登 录</span>
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <div class="login-menu"></div>
+        </div>
+      </div>
+    </div>
+    <div class="vue-particles">
+      <vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push" style="height: 100%"></vue-particles>
+    </div>
   </div>
 </template>
-<script>
 
+<script>
+import Storage from '@/utils/storage';
+import { formatDate, formatAxis } from '@/utils/formatTime';
 export default {
-  components: {
-  },
   data() {
     return {
-      loginForm: {
+      quotationsList: [
+        {
+          name: '颜渊',
+          comeFrom: '论语',
+          content:
+              '自己不喜欢的,就不要强加给别人。饥寒是自己不喜欢的,不要把它强加给别人;耻辱是自己不喜欢的,也不要把它强加给别人。将心比心,推己及人,从自己的利与害想到对别人的利与害,多替别人着想,这是终生应该奉行的原则。',
+        },
+        {
+          name: '荀子',
+          comeFrom: '劝学',
+          content:
+              '木料经过木工用墨线(木工用具)划直线加工以后,就变直了;金属物品在磨刀石上磨砺后,就能锋利。人经过学习磨练,自我反省,就会变得聪慧明智,不犯错误,也越来越坚强。',
+        },
+        {
+          name: '里仁',
+          comeFrom: '论语',
+          content:
+              '见到贤人,就应该想着向他学习;看见不贤的人,便应该自己反省,对不如自己的人喜欢讥笑、轻视,因而沾沾自喜;对比自己强的人喜欢贬低,甚至嫉妒、畏惧退缩,害怕与他们交往:这都是不正确的态度。',
+        },
+        {
+          name: '述而',
+          comeFrom: '论语',
+          content:
+              '君子心地平坦宽广,小人却经常局促忧愁。君子襟怀坦白,安贫乐业,与人为善,知足常乐,所以能坦荡荡。小人欲念太多,患得患失,忧心忡忡,怨天尤人,局促不安,所以常心怀戚戚。',
+        },
+        {
+          name: '老子',
+          comeFrom: '第六十四章',
+          content:
+              '千里遥远的路程是从脚下第一步开始的。任何事情的成功都是从头开始,从小到大逐渐积累的。万事开头难,没有个开头就不会有结果。任何事情都要从一点一滴的小事开始做起。',
+        },
+        {
+          name: '朱熹',
+          comeFrom: '训学斋规',
+          content:
+              '读书有三到,谓心到,眼到,口到。心不在此,则眼看不仔细,心眼既不专一,却只漫浪诵读,决不能记,久也不能久也。三到之中,心到最急,心既到矣,眼口岂不到乎?',
+        },
+      ],
+      quotations: {},
+      btnLoading: false,
+      ruleForm: {
         username: '',
         password: '',
-        code:''
+        code: '',
+        uuid: ''
       },
-      loginRules: {
-        username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
-        code: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
+      time: {
+        txt: '',
+        fun: null,
       },
-      passwordType: 'password',
-      capsTooltip: false,
-      loading: false,
-      showDialog: false,
-      redirect: undefined,
-      otherQuery: {},
       captcha: ''
-    }
+    };
   },
-  created(){
-    this.getCode()
+  computed: {
+    // 获取当前时间
+    currentTime() {
+      return formatAxis(new Date());
+    },
+    // 获取布局配置信息
+    getThemeConfig() {
+      return {
+        globalViceTitle: '权限管理系统',
+        globalViceDes: '用以辅助对用户权限管理的系统',
+        globalTitle: '系统登录'
+      };
+    },
+  },
+  created() {
+    this.initTime();
   },
   mounted() {
-   
+    this.initRandomQuotations();
+    this.getCode()
+    const username = Storage.getStr('username')
+    const password = Storage.getStr('password')
+    if (username) {
+      this.ruleForm.username = username
+    }
+    if (password) {
+      this.ruleForm.password = password
+    }
   },
   methods: {
+    // 随机语录
+    initRandomQuotations() {
+      this.quotations = this.quotationsList[Math.floor(Math.random() * this.quotationsList.length)];
+    },
+    // 初始化左上角时间显示
+    initTime() {
+      this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
+      this.time.fun = setInterval(() => {
+        this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
+      }, 1000);
+    },
     getCode() {
       this.$api.getVerifyCode().then(response => {
-        this.loginForm.uuid = response.data.uuid
+        this.ruleForm.uuid = response.data.uuid
         this.captcha = response.data.captcha
       })
     },
-    checkCapslock(e) {
-      const { key } = e
-      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
-    },
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          //  this.$router.push({
-          //     path: '/admin/admin'
-          //   })
-          // this.loading = true
-          this.$api.adminLogin(this.loginForm).then(response => {
-            console.log(response)
-            this.loading = true
-            this.$message.success('登录成功')
+    // 登录按钮点击
+    submitForm() {
+      this.btnLoading = true;
+      this.$api.adminLogin(this.ruleForm).then(response => {
+        Storage.setStr('username', this.ruleForm.username)
+        Storage.setStr('password', this.ruleForm.password)
+        this.btnLoading = false
+           this.$message.success('登录成功')
             this.$router.push({
               path: '/admin'
             })
-          }).catch(error => {
-            this.getCode()
-            this.loading = false
-          })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
+      }).catch(error => {
+        this.getCode()
+        this.btnLoading = false
       })
     },
-  }
-}
+  },
+  destroyed() {
+    clearInterval(this.time.fun);
+  },
+};
 </script>
 
 <style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-$bg:#283443;
-$light_gray:#fff;
-$cursor: #fff;
-
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-  .login-container .el-input input {
-    color: $cursor;
-  }
-}
-
-/* reset element-ui css */
-.login-container {
-  .el-input {
-    display: inline-block;
-    height: 47px;
-    width: 85%;
-
-    input {
-      background: transparent;
-      border: 0px;
-      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      height: 47px;
-      caret-color: $cursor;
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
-      }
-    }
-  }
-
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
-
-.login-container {
-  min-height: 100%;
+.login {
+  height: 100%;
   width: 100%;
-  background-color: $bg;
   overflow: hidden;
-
-  .login-form {
-    position: relative;
-    width: 520px;
-    max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
-    overflow: hidden;
-  }
-   
-
-  .tips {
-    font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
-
-    span {
-      &:first-of-type {
-        margin-right: 16px;
-      }
-    }
-  }
-
-  .svg-container {
-    padding: 6px 5px 6px 15px;
-    color: $dark_gray;
-    vertical-align: middle;
-    width: 30px;
-    display: inline-block;
+  display: flex;
+  position: relative;
+  .vue-particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
   }
-
-  .title-container {
+  .login-weaper {
+    margin: auto;
+    height: 500px;
+    display: flex;
+    box-sizing: border-box;
     position: relative;
-
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
+    z-index: 1;
+    border: none;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    .login-left {
+      width: 491px;
+      padding: 20px;
+      font-size: 16px;
+      color: #fff;
+      position: relative;
+      background-color: rgba(64, 158, 255, 0.8);
+      display: flex;
+      flex-direction: column;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      .login-time {
+        width: 100%;
+        color: #fff;
+        opacity: 0.9;
+        font-size: 14px;
+        overflow: hidden;
+      }
+      .login-left-box {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        padding: 80px 45px;
+        .logo {
+          font-size: 22px;
+          margin-bottom: 15px;
+        }
+        .title {
+          color: #fff;
+          font-weight: 300;
+          letter-spacing: 2px;
+          font-size: 16px;
+        }
+        .msg {
+          color: #fff;
+          font-size: 13px;
+          margin-top: 35px;
+          .msg-author {
+            opacity: 0.6;
+            span:last-of-type {
+              margin-left: 15px;
+            }
+          }
+          .msg-txt {
+            margin-top: 15px;
+            line-height: 22px;
+          }
+        }
+      }
     }
-  }
-
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .thirdparty-button {
-    position: absolute;
-    right: 0;
-    bottom: 6px;
-  }
-
-  @media only screen and (max-width: 470px) {
-    .thirdparty-button {
-      display: none;
+    .login-right {
+      width: 491px;
+      padding: 20px;
+      position: relative;
+      align-items: center;
+      display: flex;
+      background-color: rgba(255, 255, 255, 1);
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      .login-main {
+        margin: 0 auto;
+        width: 70%;
+        .login-title {
+          color: #333;
+          margin-bottom: 40px;
+          font-weight: 500;
+          font-size: 22px;
+          text-align: center;
+          letter-spacing: 4px;
+        }
+        .login-form {
+          margin: 10px 0;
+          i {
+            color: #333;
+          }
+          .el-form-item {
+            margin-bottom: 20px !important;
+            .login-code {
+              display: flex;
+              align-items: center;
+              justify-content: space-around;
+              margin: 0 0 0 10px;
+              user-select: none;
+              .login-code-img {
+                margin-top: 2px;
+                width: 100px;
+                height: 38px;
+                border: 1px solid #dcdfe6;
+                color: #333;
+                font-size: 14px;
+                font-weight: 700;
+                letter-spacing: 5px;
+                line-height: 38px;
+                text-indent: 5px;
+                text-align: center;
+                cursor: pointer;
+                transition: all ease 0.2s;
+                border-radius: 4px;
+                &:hover {
+                  border-color: #c0c4cc;
+                  transition: all ease 0.2s;
+                }
+              }
+            }
+            .login-submit {
+              width: 100%;
+              height: 45px;
+              letter-spacing: 2px;
+              font-weight: 300;
+            }
+          }
+        }
+        .login-menu {
+          margin-top: 30px;
+          width: 100%;
+          text-align: left;
+          a {
+            color: #999;
+            font-size: 12px;
+            margin: 0 8px;
+            text-decoration: none;
+            &:hover {
+              color: #1e9fff;
+              text-decoration: underline;
+            }
+          }
+        }
+      }
     }
   }
 }