xiaoy
/
sqhj-workbench-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

xy

Browse Source
master
xy 2 years ago
parent 52154b241c
commit ef503cda01
5 changed files with 369 additions and 209 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/imgs/login-bkg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
src/assets/imgs/login-img1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/imgs/login-title.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

521
src/views/login/index.vue
Unescape View File

@ -1,266 +1,369 @@
<template> <template>
<div class="login-container" v-if="showLogin"> <div class="login-container" v-if="showLogin">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" <div ref="formContainer" class="form-container">
label-position="left">
<div class="title-container"> <div class="title-container">
<h3 class="title">内控业务管理系统</h3> <img :src="require('@/assets/imgs/login-title.png')" alt="" />
</div> </div>
<el-form-item prop="username"> <div
<span class="svg-container"> style="
<svg-icon icon-class="user" /> display: flex;
</span> justify-content: space-between;
<el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username" type="text" padding: 0 41px 0 104px;
tabindex="1" auto-complete="off" /> margin-top: 57px;
</el-form-item> "
>
<div class="left">
<img :src="require('@/assets/imgs/login-img1.png')" alt="" />
</div>
<div class="right">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-position="left"
>
<el-form-item class="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="off"
/>
</el-form-item>
<el-form-item prop="password"> <el-form-item class="form-item" prop="password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" <el-input
placeholder="请输入密码" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" /> :key="passwordType"
<!-- <span class="show-pwd" @click="showPwd"> ref="password"
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> v-model="loginForm.password"
</span> --> :type="passwordType"
</el-form-item> placeholder="请输入密码"
name="password"
tabindex="2"
auto-complete="off"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" <el-checkbox size="large" style="margin-top: 18px;zoom: 1.3;" v-model="isRemember">记住密码</el-checkbox>
@click.native.prevent="handleLogin">登录</el-button>
</el-form> <el-button
:loading="loading"
type="primary"
round
style="
margin-top: 35px;
font-size: 18px;
letter-spacing: 3px;
border-radius: 50px;
height: 50px;
width: 100%;
background-color: #3d7af6;
filter: drop-shadow(0px 4px 9px rgba(72, 93, 237, 0.63));
"
@click.native.prevent="handleLogin"
>登录</el-button
>
</el-form>
</div>
</div>
</div>
</div> </div>
<div v-else class="login-container-w"></div> <div v-else class="login-container-w"></div>
</template> </template>
<script> <script>
import { import drawMixin from "@/views/login/mixin/drawMixin";
validUsername import { validUsername } from "@/utils/validate";
} from '@/utils/validate' import Cookies from "js-cookie";
export default {
export default { mixins: [drawMixin],
name: 'Login', name: "Login",
data() { data() {
const validateUsername = (rule, value, callback) => { const validateUsername = (rule, value, callback) => {
if (false) { if (false) {
callback(new Error('请正确输入登录名')) callback(new Error("请正确输入登录名"));
} else { } else {
callback() callback();
}
} }
const validatePassword = (rule, value, callback) => { };
if (false) { const validatePassword = (rule, value, callback) => {
callback(new Error('请正确输入密码')) if (false) {
} else { callback(new Error("请正确输入密码"));
callback() } else {
} callback();
} }
return { };
showLogin: false, return {
loginForm: { isRemember: false,
username: '', showLogin: false,
password: '' loginForm: {
}, username: "",
loginRules: { password: "",
username: [{ },
loginRules: {
username: [
{
required: true, required: true,
trigger: 'blur', trigger: "blur",
validator: validateUsername validator: validateUsername,
}], },
password: [{ ],
password: [
{
required: true, required: true,
trigger: 'blur', trigger: "blur",
validator: validatePassword validator: validatePassword,
}] },
}, ],
loading: false, },
passwordType: 'password', loading: false,
redirect: undefined passwordType: "password",
} redirect: undefined,
}, };
beforeCreate() { },
beforeCreate() {},
}, created() {
created() { var query = this.$route.query;
var query = this.$route.query; if (query.tp) {
if (query.tp) { this.showLogin = false;
this.showLogin = false; } else {
} else { this.showLogin = true;
this.showLogin = true; }
} if (query.token && query.userid && query.tp) {
if (query.token && query.userid && query.tp) { this.loading = true;
this.loading = true this.$store
this.$store.dispatch('user/loginskip', { .dispatch("user/loginskip", {
token: query.token, token: query.token,
tp: query.tp tp: query.tp,
}).then(() => { })
.then(() => {
this.$router.push({ this.$router.push({
path: "/" path: "/",
}) });
this.loading = false this.loading = false;
}).catch((error) => {
console.log(error)
this.loading = false
}) })
.catch((error) => {
console.log(error);
this.loading = false;
});
}
let lgifStr = Cookies.get('lgif')
if (lgifStr) {
try {
this.isRemember = true;
this.loginForm = JSON.parse(window.atob(lgifStr))
} catch (e) {
this.loginForm = {
username: "",
password: "",
}
} }
}
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
}, },
watch: { },
$route: { methods: {
handler: function(route) { showPwd() {
this.redirect = route.query && route.query.redirect if (this.passwordType === "password") {
}, this.passwordType = "";
immediate: true } else {
this.passwordType = "password";
} }
this.$nextTick(() => {
this.$refs.password.focus();
});
}, },
methods: { handleLogin() {
showPwd() { this.$refs.loginForm.validate((valid) => {
if (this.passwordType === 'password') { if (valid) {
this.passwordType = '' this.loading = true;
} else { this.$store
this.passwordType = 'password' .dispatch("user/login", this.loginForm)
} .then(() => {
this.$nextTick(() => { console.log(this.redirect);
this.$refs.password.focus() if (this.isRemember) {
}) Cookies.set('lgif',window.btoa(JSON.stringify(this.loginForm)))
}, } else {
handleLogin() { Cookies.remove('lgif')
this.$refs.loginForm.validate(valid => { }
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
console.log(this.redirect)
this.$router.push({ this.$router.push({
path: this.redirect || '/' path: this.redirect || "/",
}) });
this.loading = false this.loading = false;
}).catch(() => {
this.loading = false
}) })
} else { .catch(() => {
console.log('error submit!!') this.loading = false;
return false });
} } else {
}) console.log("error submit!!");
} return false;
} }
} });
},
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
/* 修复input 背景不协调 和光标变色 */ /* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443; $bg: #283443;
$light_gray:#fff; $light_gray: #fff;
$cursor: #fff; $cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input { .login-container .el-input input {
color: $cursor; color: $cursor;
}
} }
}
/* reset element-ui css */ /* reset element-ui css */
.login-container { .login-container {
.el-input { .el-input {
display: inline-block; display: inline-block;
height: 47px; height: 47px;
width: 85%; width: 70%;
input { input {
background: transparent; background: transparent;
border: 0px; border: 0px;
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 0px; border-radius: 0px;
padding: 12px 5px 12px 15px; padding: 12px 5px 12px 15px;
color: $light_gray; color: #666;
height: 47px; height: 47px;
caret-color: $cursor; caret-color: $cursor;
&:-webkit-autofill { &:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important; box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: $cursor !important; -webkit-text-fill-color: $cursor !important;
}
} }
} }
}
.el-form-item { .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1); color: #0003;
background: rgba(0, 0, 0, 0.1); font-size: 16px;
border-radius: 5px; line-height: 24px;
color: #454545; border-radius: 6px;
} background-color: #ffffff;
border: 1px solid #d9d9d9;
} }
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$bg:#2d3a4b; ::v-deep .el-checkbox__inner {}
$dark_gray:#889aa4; $bg: #2d3a4b;
$light_gray:#eee; $dark_gray: #889aa4;
$light_gray: #eee;
.login-container-w { .login-container-w {
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
overflow: hidden; overflow: hidden;
} }
.login-container { .login-container {
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
background-color: $bg; background: url("../../assets/imgs/login-bkg.png") no-repeat;
overflow: hidden; background-size: cover;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;
}
.tips { .form-container {
font-size: 14px; width: 930px;
color: #fff; max-width: 100vw;
margin-bottom: 10px; background: #fff;
border-radius: 14px;
padding-bottom: 53px;
filter: drop-shadow(0px 5px 24.5px rgba(74, 113, 240, 0.23));
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container { .left {
padding: 6px 5px 6px 15px; img {
color: $dark_gray; width: 310px;
vertical-align: middle; }
width: 30px;
display: inline-block;
} }
}
.title-container { .tips {
position: relative; font-size: 14px;
color: #fff;
margin-bottom: 10px;
.title { span {
font-size: 26px; &:first-of-type {
color: $light_gray; margin-right: 16px;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
} }
} }
}
.form-item {
width: 361px;
height: 51px;
.show-pwd { margin-bottom: 0;
position: absolute;
right: 10px; }
top: 7px; .svg-container {
font-size: 16px; padding: 6px 0;
color: $dark_gray; color: $dark_gray;
cursor: pointer; vertical-align: middle;
user-select: none; width: 25px;
display: inline-block;
margin-left: 15px;
}
.title-container {
display: flex;
justify-content: center;
position: relative;
margin-top: 85px;
img {
width: 754px;
} }
} }
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
.form-item + .form-item {
margin-top: 18px;
}
</style> </style>

57
src/views/login/mixin/drawMixin.js
Unescape View File

@ -0,0 +1,57 @@
// 屏幕适配 mixin 函数
// * 默认缩放值
const scale = {
width: '1',
height: '1',
}
// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
export default {
data() {
return {
// * 定时函数
drawTiming: null
}
},
mounted () {
this.calcRate()
window.addEventListener('resize', this.resize)
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
},
methods: {
calcRate () {
const appRef = this.$refs["formContainer"]
if (!appRef) return
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (appRef) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height})`
} else {
// 表示更高
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height})`
}
}
},
resize () {
clearTimeout(this.drawTiming)
this.drawTiming = setTimeout(() => {
this.calcRate()
}, 200)
}
},
}
Write Preview
Loading…
Cancel
Save