增加图片验证码和登录日志 权限管理优化

石广澎

2024-01-02 0cd1631ceaa93e6483908fd692d2cb693b85324b

 admin-web/src/views/login/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="login-container">
    <img src="@/assets/images/login-name.png" alt="固定资产项目建设进度" class="logo-name"/>
    <img src="@/assets/images/login-name.png" alt="低值易耗品库存管理系统" class="logo-name"/>
    <el-row
      type="flex"
      justify="center"
@@ -11,7 +11,7 @@
      <el-col>
        <div class="form-main w1050">
          <el-row>
            <el-col :span="12"><img src="@/assets/images/form-lf.png" alt="登录" class="logo-lf"/></el-col>
            <el-col :span="12"><img src="@/assets/images/form-lf.jpg" alt="登录" class="logo-lf"/></el-col>
            <el-col :span="12">
              <div class="login-box">
                <el-form
@@ -52,24 +52,23 @@
                      :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                    /></span>
                  </el-form-item>
<!--                  <el-form-item prop="code" class="captcha" v-if="loginForm.verifyType==='code' && captchaEnabled">-->
<!--                    <div class="captcha">-->
<!--                      <el-input-->
<!--                        v-model.trim="loginForm.code"-->
<!--                        style="width: 218px"-->
<!--                        prefix-icon="el-icon-message"-->
<!--                        placeholder="验证码"-->
<!--                        type="text"-->
<!--                        tabindex="3"-->
<!--                        autocomplete="off"-->
<!--                      />-->
<!--                      <div class="imgs" @click="getCode()">-->
<!--                        &lt;!&ndash;                <img :src="captchatImg" />&ndash;&gt;-->
<!--                        <img :src="codeUrl"/>-->
<!--                        <span v-show="showCaptchatImg">已失效</span>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
                  <template v-if="loginForm.verifyType==='code' && captchaEnabled">
                    <div class="f-lable">验证码</div>
                    <el-form-item prop="code" class="captcha">
                      <el-input
                        v-model.trim="loginForm.code"
                        style="width: 218px"
                        placeholder="验证码"
                        type="text"
                        tabindex="3"
                        autocomplete="off"
                      />
                      <div class="imgs" @click="getCode()">
                        <img :src="codeUrl"/>
                        <span v-show="showCaptchatImg">已失效</span>
                      </div>
                    </el-form-item>
                  </template>
                  <el-button
                    id="loginBtn"
                    :loading="loading"
@@ -127,18 +126,13 @@
        },
      },
      loginForm: {
        account: 'jmy123456', // admin
        password: 'Adu_8097',
        account: '', // admin
        password: '',
        // key: '',
        uuid: '',
        code: '',
        loginType: 'user_pass',  // 用户名、密码方式登录
        verifyType: 'code'     //  'code': 验证码  'slide':滑块  'jigsaw':拼图
        // captcha: {
        //   captchaVerification: '',
        //   secretKey: '',
        //   token: '',
        // },
      },
      loginRules: {
        account: [{required: true, trigger: 'blur', message: '请输入用户名'}], // validator: validateUsername
@@ -154,7 +148,7 @@
      disabled: false,
      isWeixin: this.$wechat.isWeixin(),
      // 验证码开关
      captchaEnabled: true
      captchaEnabled: false
    };
  },
  components: {},
@@ -272,7 +266,7 @@
      if (this.loginForm.verifyType === 'code') {
        getCodeImg().then(data => {
          this.captchaEnabled = data.captchaEnabled === undefined ? true : data.captchaEnabled;
          console.log("captchaEnabled = " + this.captchaEnabled);

          if (this.captchaEnabled) {
            this.codeUrl = "data:image/jpeg;base64," + data.img;
          }
@@ -328,16 +322,20 @@
    color: $cursor;
  }
}

.flex-1 {
  flex: 1;
}

.min-1200 {
  min-width: 1200px;
}

/* reset element-ui css */
.login-container {
  padding:50px;
  padding: 50px;
  line-height: 54px;

  .el-form-item__content {
    display: flex;
    flex: 1;
@@ -347,18 +345,20 @@
    background-color: #F1F3F5;
    border-radius: 4px;
  }

  .el-input {
    flex: 1;
    margin-left: 6px;
    position: relative;
    background-color: #F1F3F5;
    top: 3px;

    input {
      border: none;
      padding: 0;
      font-size: 16px;
      line-height: 54px;
      background: #F1F3F5;
      // background: #F1F3F5;
      color: #333333;
    }
  }
@@ -366,9 +366,34 @@
</style>

<style lang="scss" scoped>
.captcha {
  display: flex;
  align-items: flex-start;
}

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.imgs {
  position: relative;
  height: 36px;
  cursor: pointer;

  img {
    height: 100%;
  }

  span {
    width: 84px;
    line-height: 36px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    color: #fff;
  }
}

.login-container {
  height: 100%;
  width: 100%;
@@ -377,43 +402,53 @@
  background-size: cover;
  position: relative;
}
.school-logo{

.school-logo {
  position: absolute;
  top:30px;
  top: 30px;
  left: 40px;
}
.form-main{

.form-main {
  background-color: #FFFFFF;
  overflow: hidden;
  border-radius: 8px;
}
>>>.el-button{

> > > .el-button {
  font-size: 16px;
}
.logo-name{

.logo-name {
  margin-bottom: 30px;
}
.logo-lf{
  width:100%;

.logo-lf {
  width: 100%;
}
.login-box{
  padding:100px;
  .title{

.login-box {
  padding: 100px;

  .title {
    font-size: 22px;
    font-weight: bold;
  }
  .f-lable{

  .f-lable {
    line-height: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333333;
  }
}

.w1050 {
  width: 1050px;
  margin: 0 auto;
  overflow: hidden;
}

.login-btn {
  width: 100%;
  height: 45px;
@@ -422,11 +457,13 @@
  color: #FFFFFF;
  background-color: #0d997c;
}

.logo-txt {
  position: absolute;
  top: 5%;
  left: 2%;
}

.txtBox {
  color: #fff;
  opacity: 0.7;
@@ -439,24 +476,27 @@
  line-height: 30px;
  width: 610px;
}
.show-pwd{

.show-pwd {
  position: relative;
  top:5px;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.td-outer-wrapper {
  width: 1200px !important;
  margin: 0 auto !important;
}

@media screen and(max-width: 1400px) {
  .w1050 {
    width: 850px;
    margin: 0 auto;
    overflow: hidden;
  }
  .login-box{
    padding:40px;
  .login-box {
    padding: 40px;
  }
}
</style>