Skip to content

Z
ZiBoYingJI
Commit 35d34322 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

登录样式修改

parent ffa91175
Hide whitespace changes
Inline Side-by-side
Showing with 341 additions and 155 deletions
src/layout/components/Sidebar/Logo.vue
View file @ 35d34322
......@@ -29,7 +29,7 @@ export default {
data() {
return {
selectedMine: {},
title: '中和地信应急平台',
title: '中和地信企业管理平台',
logo: false,
showPublic: false,
showMineUnderground: false,
......
src/views/login.vue
View file @ 35d34322
<template>
<div v-show="show" class="login" :style="'background-image:url('+ Background +');'">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h2 class="title">
中和地信企业管理平台
</h2>
<h4 class="title">
{{ userStyle }}账号登录
</h4>
<div
v-show="show"
class="login"
:style="'background-image:url(' + Background + ');'"
>
<!-- <div class="top">
<div class="bd top_main">
<div class="tempWrap" style="overflow:hidden; position:relative; width:1280px"><ul style="width: 3840px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: -1807px;"><li class="clone" style="float: left; width: 1280px;">欢迎您访问中和地信有限公司官网 </li><li style="float: left; width: 1280px;">欢迎您访问中和地信有限公司官网 </li><li class="clone" style="float: left; width: 1280px;">欢迎您访问中和地信有限公司官网 </li></ul></div>
</div>
</div> -->
<div class="topTitle">
<div class="floating-text">中和地信有限公司欢迎您！</div>
</div>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
label-position="left"
label-width="0px"
class="login-form"
>
<h2 class="title">中和地信企业管理平台</h2>
<h4 class="title">{{ userStyle }}账号登录</h4>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode">
<img :src="codeUrl" @click="getCode" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">
记住我
</el-checkbox>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
<el-form-item style="width: 100%">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
......@@ -43,220 +93,356 @@
</el-form-item> -->
</el-form>
<!-- 底部 -->
<div v-if="$store.state.settings.showFooter" id="el-login-footer">
<!-- <div v-if="$store.state.settings.showFooter" id="el-login-footer">
<span v-html="$store.state.settings.footerTxt" />
<span v-if="$store.state.settings.caseNumber"> ⋅ </span>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
</div> -->
<div class="foots">
<div class="foots_logo">
<img
src="http://zhidcl.com/static/modules/cms/images/foot_logo.png"
alt="logo"
/>
</div>
<div class="foots_con">
<div class="foots_info" style="float: left">
<p>网址t:http://zhidcLcomy</p>
<p>地址:淄博市张店区潘南西路8号院</p>
<p>电话/传真:0533-3338333</p>
</div>
<div
class="r foots_ewm"
style="
float: right;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div class="foots_ewm_info">
扫一扫<br /><br />
手机浏览网站
</div>
<div class="foots_ewm_img">
<img
src="http://zhidcl.com/static/modules/cms/images/ewm.jpg"
alt="二维码"
/>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</template>
<script>
import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import qs from 'qs'
import Background from '@/assets/images/background.webp'
import { mapGetters } from 'vuex'
import { encrypt } from "@/utils/rsaEncrypt";
import Config from "@/settings";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import qs from "qs";
import Background from "@/assets/images/background.webp";
import { mapGetters } from "vuex";
export default {
name: 'Login',
name: "Login",
data() {
return {
show: false,
userStyle: null,
Background: Background,
codeUrl: '',
cookiePass: '',
codeUrl: "",
cookiePass: "",
loginForm: {
username: '',
password: '',
username: "",
password: "",
rememberMe: false,
code: '',
uuid: ''
code: "",
uuid: "",
},
loginRules: {
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" },
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" },
],
code: [
{ required: true, trigger: "change", message: "验证码不能为空" },
],
},
loading: false,
redirect: undefined
}
redirect: undefined,
};
},
computed: {
...mapGetters([
'user'
])
...mapGetters(["user"]),
},
watch: {
$route: {
handler: function(route) {
const data = route.query
handler: function (route) {
const data = route.query;
if (data && data.redirect) {
this.redirect = data.redirect
delete data.redirect
if (JSON.stringify(data) !== '{}') {
this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false })
this.redirect = data.redirect;
delete data.redirect;
if (JSON.stringify(data) !== "{}") {
this.redirect =
this.redirect + "&" + qs.stringify(data, { indices: false });
}
}
},
immediate: true
}
immediate: true,
},
},
created() {
// 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
const host = window.location.host
if (host === 'yingji.longxijiancai.com') {
this.userStyle = '应急局'
const host = window.location.host;
if (host === "yingji.longxijiancai.com") {
this.userStyle = "应急局";
}
if (host === 'qiye.longxijiancai.com') {
this.userStyle = '企业'
if (host === "qiye.longxijiancai.com") {
this.userStyle = "企业";
}
this.show = true
this.show = true;
// 获取验证码
this.getCode()
this.getCode();
// 获取用户名密码等Cookie
this.getCookie()
this.getCookie();
// token 过期提示
this.point()
this.point();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.codeUrl = res.img
this.loginForm.uuid = res.uuid
})
getCodeImg().then((res) => {
this.codeUrl = res.img;
this.loginForm.uuid = res.uuid;
});
},
getCookie() {
const username = Cookies.get('username')
let password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe')
const username = Cookies.get("username");
let password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe");
// 保存cookie里面的加密后的密码
this.cookiePass = password === undefined ? '' : password
password = password === undefined ? this.loginForm.password : password
this.cookiePass = password === undefined ? "" : password;
password = password === undefined ? this.loginForm.password : password;
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
code: ''
}
code: "",
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
this.$refs.loginForm.validate((valid) => {
const user = {
username: this.loginForm.username,
password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe,
code: this.loginForm.code,
uuid: this.loginForm.uuid
}
uuid: this.loginForm.uuid,
};
if (user.password !== this.cookiePass) {
user.password = encrypt(user.password)
user.password = encrypt(user.password);
}
if (valid) {
this.loading = true
this.loading = true;
if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires })
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
Cookies.set("username", user.username, {
expires: Config.passCookieExpires,
});
Cookies.set("password", user.password, {
expires: Config.passCookieExpires,
});
Cookies.set("rememberMe", user.rememberMe, {
expires: Config.passCookieExpires,
});
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
}
this.$store.dispatch('Login', user).then(() => {
this.loading = false
if (this.userStyle) {
if (this.userStyle === '应急局' && this.user.enterpriseId !== 0) {
this.$message.error('您是企业用户，请使用企业端登录')
setTimeout(() => {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
}, 1000)
return
}
if (this.userStyle === '企业' && this.user.enterpriseId === 0) {
this.$message.error('您是应急局用户，请使用应急局端登录')
setTimeout(() => {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
}, 1000)
return
this.$store
.dispatch("Login", user)
.then(() => {
this.loading = false;
if (this.userStyle) {
if (
this.userStyle === "应急局" &&
this.user.enterpriseId !== 0
) {
this.$message.error("您是企业用户，请使用企业端登录");
setTimeout(() => {
this.$store.dispatch("LogOut").then(() => {
location.reload();
});
}, 1000);
return;
}
if (this.userStyle === "企业" && this.user.enterpriseId === 0) {
this.$message.error("您是应急局用户，请使用应急局端登录");
setTimeout(() => {
this.$store.dispatch("LogOut").then(() => {
location.reload();
});
}, 1000);
return;
}
}
}
// this.$router.push({ path: /* 记住上次退出时的页面 */ /* this.redirect || */'/home4Login' })
this.$router.push({ path: 'login4Index' })
}).catch(() => {
this.loading = false
this.getCode()
})
// this.$router.push({ path: /* 记住上次退出时的页面 */ /* this.redirect || */'/home4Login' })
this.$router.push({ path: "login4Index" });
})
.catch(() => {
this.loading = false;
this.getCode();
});
} else {
console.log('error submit!!')
return false
console.log("error submit!!");
return false;
}
})
});
},
point() {
const point = Cookies.get('point') !== undefined
const point = Cookies.get("point") !== undefined;
if (point) {
this.$notify({
title: '提示',
message: '当前登录状态已过期，请重新登录！',
type: 'warning',
duration: 5000
})
Cookies.remove('point')
title: "提示",
message: "当前登录状态已过期，请重新登录！",
type: "warning",
duration: 5000,
});
Cookies.remove("point");
}
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.foots {
position: absolute;
bottom: 0;
width: 100%;
padding: 0.8rem 0 0.2rem 0;
background: #04264b;
.foots_logo {
width: 1140px;
padding-bottom: 0.2rem;
margin: 0 auto;
font-size: 0;
// border-bottom: 1px solid #4a637e;
img {
height: 48px;
}
}
.foots_con {
width: 1140px;
margin: 2px auto 15px;
overflow: hidden;
.foots_info {
font-size: 14px;
line-height: 18px;
color: #adb2ba;
letter-spacing: 1px;
}
.foots_ewm {
font-size: 16px;
line-height: 16px;
color: #c7cacf;
padding-top: 0.3rem;
letter-spacing: 1px;
.foots_ewm_info {
text-align: right;
padding-right: 18px;
}
.foots_ewm_img img {
width: 101px;
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
@keyframes floatShadow {
0% {
transform: translateX(1300px);
display: block;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
100% {
transform: translateX(-200px);
display: none;
}
}
.floating-text {
font-size: 14px;
color: #fff;
animation: floatShadow;
animation-name: floatShadow;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: absolute;
top: 0px;
}
.topTitle {
position: absolute;
// display: flex;
// align-items: center;
top: 0;
background: #a0bceb;
color: #fff;
height: 30px;
width: 100%;
line-height: 30px;
text-align: center;
}
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 500px; /* 385px */
padding: 25px 25px 5px 25px;
.el-input {
.login-form {
border-radius: 6px;
background: #ffffff;
width: 500px; /* 385px */
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
input {
height: 38px;
}
}
.input-icon{
height: 39px;width: 14px;margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img{
cursor: pointer;
vertical-align:middle
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment