|
|
@@ -0,0 +1,326 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="top-container">
|
|
|
+ <div class="amtxts-logo" />
|
|
|
+ </div>
|
|
|
+ <div class="login-container">
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
+
|
|
|
+ <div class="title-container">
|
|
|
+ <h4 class="title">龙湾区人大预算监督系统</h4>
|
|
|
+ </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"
|
|
|
+ auto-complete="on"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <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"
|
|
|
+ auto-complete="on"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ />
|
|
|
+ <span class="show-pwd" @click="showPwd">
|
|
|
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button :loading="loading" size="medium" type="primary" class="blue-black" style="width:100%;" @click.native.prevent="handleLogin">登 录</el-button>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { validUsername } from '@/utils/validate'
|
|
|
+// import amtxts from '@/assets/login/amtxts.png'
|
|
|
+import logo from '@/assets/login/logo.png'
|
|
|
+import { Message } from 'element-ui'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Login',
|
|
|
+ data() {
|
|
|
+ const validateUsername = (rule, value, callback) => {
|
|
|
+ if (!validUsername(value)) {
|
|
|
+ callback(new Error('请输入正确的用户名'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (value.length < 6) {
|
|
|
+ callback(new Error('密码长度不能少于6位'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ loginForm: {
|
|
|
+ username: process.env.NODE_ENV === 'production' ? '' : '13392951645',
|
|
|
+ password: process.env.NODE_ENV === 'production' ? '' : 'abc.123'
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ username: [{ required: true, message: '请输入用户名', trigger: 'blur', validator: validateUsername }],
|
|
|
+ password: [{ required: true, message: '请输入密码', trigger: 'blur', validator: validatePassword }]
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ passwordType: 'password',
|
|
|
+ redirect: undefined,
|
|
|
+ logo: logo,
|
|
|
+ dialogFormVisible: false,
|
|
|
+ inputType: {
|
|
|
+ password: {
|
|
|
+ type: 'password',
|
|
|
+ icon: 'eye'
|
|
|
+ },
|
|
|
+ confirmation: {
|
|
|
+ type: 'password',
|
|
|
+ icon: 'eye'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function(route) {
|
|
|
+ this.redirect = route.query && route.query.redirect
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showPwd() {
|
|
|
+ if (this.passwordType === 'password') {
|
|
|
+ this.passwordType = ''
|
|
|
+ } else {
|
|
|
+ this.passwordType = 'password'
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.password.focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showPassword(fieldType) {
|
|
|
+ if (this.inputType[fieldType].type === 'password') {
|
|
|
+ this.inputType[fieldType].type = 'text'
|
|
|
+ this.inputType[fieldType].icon = 'eye-open'
|
|
|
+ } else {
|
|
|
+ this.inputType[fieldType].type = 'password'
|
|
|
+ this.inputType[fieldType].icon = 'eye'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleLogin() {
|
|
|
+ this.$refs.loginForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.login(this.loginForm)
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ login(data) {
|
|
|
+ // this.$router.push({ path: this.redirect || '/' })
|
|
|
+ this.loading = true
|
|
|
+ this.$store.dispatch('user/login', data).then(() => {
|
|
|
+ this.$router.push({ path: this.redirect || '/' })
|
|
|
+ this.loading = false
|
|
|
+ }, () => {
|
|
|
+ Message({
|
|
|
+ message: '无效的用户名或密码!',
|
|
|
+ type: 'error',
|
|
|
+ duration: 3 * 1000
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ validConfirmation(value) {
|
|
|
+ return this.registerForm.password === value
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss">
|
|
|
+$bg:#2d3a4b;
|
|
|
+$light_gray:#eee;
|
|
|
+
|
|
|
+/* 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;
|
|
|
+ &:-webkit-autofill {
|
|
|
+ -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
+ -webkit-text-fill-color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ border: 1px solid $light_gray;
|
|
|
+ // background: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ // color: #454545;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+$bg:#2d3a4b;
|
|
|
+$dark_gray:#889aa4;
|
|
|
+$light_gray:#eee;
|
|
|
+.top-container{
|
|
|
+ position: absolute;
|
|
|
+ top:10px;
|
|
|
+ background: transparent;
|
|
|
+ color:white;
|
|
|
+ z-index: 2;
|
|
|
+ // width:99%;
|
|
|
+ .amtxts-logo{
|
|
|
+ div{
|
|
|
+ position: relative;
|
|
|
+ top: -34px;
|
|
|
+ left: 60px;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width:50px;
|
|
|
+ height:40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ left: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .yt-logo{
|
|
|
+ position: absolute;
|
|
|
+ right:0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.footer-container{
|
|
|
+ position: absolute;
|
|
|
+ background: transparent;
|
|
|
+ z-index: 2;
|
|
|
+ bottom:10px;
|
|
|
+ width:100%;
|
|
|
+ text-align: center;
|
|
|
+ color:white;
|
|
|
+ font-size:12px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-container {
|
|
|
+ position: fixed;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-image: url('~@/assets/login/bg.png');
|
|
|
+ background-size: cover;
|
|
|
+ // background-color: $bg;
|
|
|
+ .form-logo{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 490px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 420px auto;
|
|
|
+ }
|
|
|
+ .login-form {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 490px;
|
|
|
+ padding: 35px 35px 35px 35px;
|
|
|
+ margin: 120px auto;
|
|
|
+ background:white;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ &_login {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 400;
|
|
|
+ // color: $light_gray;
|
|
|
+ margin: 0px auto 30px auto;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing:3px;
|
|
|
+ }
|
|
|
+ .show-pwd {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 7px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: $dark_gray;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .register {
|
|
|
+ margin-bottom: 0;
|
|
|
+ color: rgb(0, 98, 192);
|
|
|
+ font-size:13px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+.register-contaner {
|
|
|
+ .el-input {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .show-password {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 1px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: $dark_gray;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
