dafuweng/addons/webman/views/login.vue

<template>
  <div class="container">
    <div class="login-layout">
      <div class="left">
        <div class="logo-container">
          <img v-if="webLogo" class="logo" src="/exadmin/img/login_logo.png"/>
        </div>
        <div class="left-container">
          <img class="ad" src="/exadmin/img/login-box-bg.9027741f.svg">
          <div class="text-block">
            {{ webName }}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="login-container">
          <a-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <div class="title-container">
              <h3 class="title">
                <span>{{ admin_login }}</span>
              </h3>
            </div>
            <a-form-item name="username">
              <a-input
                  v-model:value="loginForm.username"
                  auto-complete="on"
                  placeholder:enter_account
                  size="large"
                  tabindex="1"
              >
                <template #prefix>
                  <UserOutlined/>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="password">
              <a-input-password
                  v-model:value="loginForm.password"
                  auto-complete="on"
                  placeholder:enter_password
                  size="large"
                  tabindex="2"
                  @keyup.enter.native="handleLogin"
              >
                <template #prefix>
                  <LockOutlined/>
                </template>
              </a-input-password>
            </a-form-item>
            <div v-if="verification" style="display: flex;justify-content: space-between;">
              <a-form-item name="verify" style="flex:1;margin-right: 10px">
                <a-input
                    v-model:value="loginForm.verify"
                    auto-complete="on"
                    maxlength="4"
                    placeholder:enter_verify
                    size="large"
                    tabindex="3"
                    @keyup.enter.native="handleLogin"
                >
                  <template #prefix>
                    <SafetyCertificateOutlined/>
                  </template>
                </a-input>
              </a-form-item>
              <img :height="40" :src="verifyImage" class="verify" @click="getVerify"/>
            </div>
            <a-button :loading="loading" block size="large" type="primary" @click="handleLogin">{{ loginBtnText }}
            </a-button>
          </a-form>
        </div>
        <div class="icp"><a href="http://beian.miit.gov.cn" target="_blank">{{ webMiitbeian }}</a> | {{ webCopyright }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  props: {
    webLogo: String,
    webName: String,
    webCopyright: String,
    webMiitbeian: String,
    deBug: Boolean,
    agent_login: String,
    admin_login: String,
    enter_account: String,
    enter_password: String,
    enter_verify: String,
    password_verify: String,
    login: String,
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 5) {
        return Promise.reject(this.password_verify)
      } else {
        return Promise.resolve()
      }
    }
    return {
      verification: false,
      loginForm: {
        username: '',
        password: '',
        verify: '',
        hash: '',
        source: 'admin',
      },
      loginRules: {
        username: [{required: true, trigger: 'change', message: this.enter_account}],
        verify: [{required: true, message: this.enter_verify}],
        password: [{required: true, trigger: 'change', validator: validatePassword}]
      },
      loading: false,
      verifyImage: '',
      loginBtnText: this.login,
      redirect: null,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        if (route.query && route.query.redirect) {
          const index = route.fullPath.indexOf('?redirect=')
          if (index > -1) {
            this.redirect = route.fullPath.substr(index + 10)
          }
        }
      },
      immediate: true
    }
  },
  created() {
    if (this.deBug) {
      this.loginForm.username = '';
      this.loginForm.password = '';
    }
    this.getVerify()
  },
  methods: {
    getVerify() {
      this.$request({
        url: 'ex-admin/login/captcha'
      }).then(res => {
        this.verifyImage = res.data.image
        this.loginForm.hash = res.data.hash
        this.verification = res.data.verification
      })
    },

    handleLogin(data) {
      this.$refs.loginForm.validate().then(() => {
        this.loading = true
        this.$action.login(this.loginForm).then(res => {
          this.$router.push(this.redirect || '/')
        }).finally(() => {
          this.loading = false
        }).catch(() => {
          this.getVerify()
        })
      })
    }
  }
}
</script>
<style scoped>

.logo {

}

.login-layout .left {
  position: relative;
  width: 50%;
  height: 100%;
  margin-left: 150px;
}

.login-layout .left .ad {
  width: 45%;
}

.login-layout .right {
  position: relative;
  width: 50%;
  height: 100%;
}

.icp {
  position: absolute;
  bottom: 10px;

  width: 100%;
  color: #000;
  opacity: .5;
  font-size: 12px;

}

.icp a {
  color: #000;
  text-decoration: none;
}

@keyframes bg-run {
  0% {
    background-position-x: 0;
  }

  to {
    background-position-x: -1920px;
  }
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #FFFFFF;
}

.container:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  background-image: url("/exadmin/img/login-bg.b9f5c736.svg");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
}

.text-block {
  margin-top: 30px;
  font-size: 32px;
  color: #FFFFFF;
}

.logo-container {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  position: relative;
  top: 50px;
  margin-left: 20px;

}

.logo-container img {
  width: 100px;
  height: 100px;
}

.login-layout {
  height: 100%;
  display: flex;
  position: relative;
}

.left-container {
  position: absolute;
  top: calc(50% - 100px);
  left: 0;
  right: 0;
  bottom: 0;
}

.login-container {
  width: 400px;
  position: absolute;
  top: calc(50% - 250px);
  left: 0;
  right: 0;
  bottom: 0;
}

.login-container .login-form {

}

.login-container .tips {
  font-size: 14px;
  color: #fff;
}

.login-container .svg-container {
  padding: 6px 5px 6px 15px;
  color: #889aa4;
  vertical-align: middle;
  display: inline-block;
}

.login-container .title-container .title {
  font-size: 26px;

  font-weight: bold;
}

.login-container .show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}

.verify {
  height: 40px;
  cursor: pointer;
  border: 1px solid #ccc;
}
</style>