Skip to content

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

登录样式修改

parent ffa91175
Show 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 { ...@@ -29,7 +29,7 @@ export default {
data() { data() {
return { return {
selectedMine: {}, selectedMine: {},
title: '中和地信应急平台', title: '中和地信企业管理平台',
logo: false, logo: false,
showPublic: false, showPublic: false,
showMineUnderground: false, showMineUnderground: false,
......
src/views/login.vue
View file @ 35d34322
<template> <template>
<div v-show="show" class="login" :style="'background-image:url('+ Background +');'"> <div
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form"> v-show="show"
<h2 class="title"> class="login"
中和地信企业管理平台 :style="'background-image:url(' + Background + ');'"
</h2> >
<h4 class="title"> <!-- <div class="top">
{{ userStyle }}账号登录 <div class="bd top_main">
</h4> <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-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> 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-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin"> <el-input
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> 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-input>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <el-form-item prop="code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin"> <el-input
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> 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> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode"> <img :src="codeUrl" @click="getCode" />
</div> </div>
</el-form-item> </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-checkbox>
<el-form-item style="width:100%;"> <el-form-item style="width: 100%">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin"> <el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
...@@ -43,193 +93,327 @@ ...@@ -43,193 +93,327 @@
</el-form-item> --> </el-form-item> -->
</el-form> </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-html="$store.state.settings.footerTxt" />
<span v-if="$store.state.settings.caseNumber"> ⋅ </span> <span v-if="$store.state.settings.caseNumber"> ⋅ </span>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a> <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>
</div> </div>
</template> </template>
<script> <script>
import { encrypt } from '@/utils/rsaEncrypt' import { encrypt } from "@/utils/rsaEncrypt";
import Config from '@/settings' import Config from "@/settings";
import { getCodeImg } from '@/api/login' import { getCodeImg } from "@/api/login";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import qs from 'qs' import qs from "qs";
import Background from '@/assets/images/background.webp' import Background from "@/assets/images/background.webp";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
export default { export default {
name: 'Login', name: "Login",
data() { data() {
return { return {
show: false, show: false,
userStyle: null, userStyle: null,
Background: Background, Background: Background,
codeUrl: '', codeUrl: "",
cookiePass: '', cookiePass: "",
loginForm: { loginForm: {
username: '', username: "",
password: '', password: "",
rememberMe: false, rememberMe: false,
code: '', code: "",
uuid: '' uuid: "",
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }], username: [
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }], { required: true, trigger: "blur", message: "用户名不能为空" },
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }] ],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" },
],
code: [
{ required: true, trigger: "change", message: "验证码不能为空" },
],
}, },
loading: false, loading: false,
redirect: undefined redirect: undefined,
} };
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(["user"]),
'user'
])
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
const data = route.query const data = route.query;
if (data && data.redirect) { if (data && data.redirect) {
this.redirect = data.redirect this.redirect = data.redirect;
delete data.redirect delete data.redirect;
if (JSON.stringify(data) !== '{}') { if (JSON.stringify(data) !== "{}") {
this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false }) this.redirect =
this.redirect + "&" + qs.stringify(data, { indices: false });
} }
} }
}, },
immediate: true immediate: true,
} },
}, },
created() { created() {
// 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面 // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
const host = window.location.host const host = window.location.host;
if (host === 'yingji.longxijiancai.com') { if (host === "yingji.longxijiancai.com") {
this.userStyle = '应急局' this.userStyle = "应急局";
} }
if (host === 'qiye.longxijiancai.com') { if (host === "qiye.longxijiancai.com") {
this.userStyle = '企业' this.userStyle = "企业";
} }
this.show = true this.show = true;
// 获取验证码 // 获取验证码
this.getCode() this.getCode();
// 获取用户名密码等Cookie // 获取用户名密码等Cookie
this.getCookie() this.getCookie();
// token 过期提示 // token 过期提示
this.point() this.point();
}, },
methods: { methods: {
getCode() { getCode() {
getCodeImg().then(res => { getCodeImg().then((res) => {
this.codeUrl = res.img this.codeUrl = res.img;
this.loginForm.uuid = res.uuid this.loginForm.uuid = res.uuid;
}) });
}, },
getCookie() { getCookie() {
const username = Cookies.get('username') const username = Cookies.get("username");
let password = Cookies.get('password') let password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe') const rememberMe = Cookies.get("rememberMe");
// 保存cookie里面的加密后的密码 // 保存cookie里面的加密后的密码
this.cookiePass = password === undefined ? '' : password this.cookiePass = password === undefined ? "" : password;
password = password === undefined ? this.loginForm.password : password password = password === undefined ? this.loginForm.password : password;
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password, password: password,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
code: '' code: "",
} };
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
const user = { const user = {
username: this.loginForm.username, username: this.loginForm.username,
password: this.loginForm.password, password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe, rememberMe: this.loginForm.rememberMe,
code: this.loginForm.code, code: this.loginForm.code,
uuid: this.loginForm.uuid uuid: this.loginForm.uuid,
} };
if (user.password !== this.cookiePass) { if (user.password !== this.cookiePass) {
user.password = encrypt(user.password) user.password = encrypt(user.password);
} }
if (valid) { if (valid) {
this.loading = true this.loading = true;
if (user.rememberMe) { if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires }) Cookies.set("username", user.username, {
Cookies.set('password', user.password, { expires: Config.passCookieExpires }) expires: Config.passCookieExpires,
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires }) });
Cookies.set("password", user.password, {
expires: Config.passCookieExpires,
});
Cookies.set("rememberMe", user.rememberMe, {
expires: Config.passCookieExpires,
});
} else { } else {
Cookies.remove('username') Cookies.remove("username");
Cookies.remove('password') Cookies.remove("password");
Cookies.remove('rememberMe') Cookies.remove("rememberMe");
} }
this.$store.dispatch('Login', user).then(() => { this.$store
this.loading = false .dispatch("Login", user)
.then(() => {
this.loading = false;
if (this.userStyle) { if (this.userStyle) {
if (this.userStyle === '应急局' && this.user.enterpriseId !== 0) { if (
this.$message.error('您是企业用户，请使用企业端登录') this.userStyle === "应急局" &&
this.user.enterpriseId !== 0
) {
this.$message.error("您是企业用户，请使用企业端登录");
setTimeout(() => { setTimeout(() => {
this.$store.dispatch('LogOut').then(() => { this.$store.dispatch("LogOut").then(() => {
location.reload() location.reload();
}) });
}, 1000) }, 1000);
return return;
} }
if (this.userStyle === '企业' && this.user.enterpriseId === 0) { if (this.userStyle === "企业" && this.user.enterpriseId === 0) {
this.$message.error('您是应急局用户，请使用应急局端登录') this.$message.error("您是应急局用户，请使用应急局端登录");
setTimeout(() => { setTimeout(() => {
this.$store.dispatch('LogOut').then(() => { this.$store.dispatch("LogOut").then(() => {
location.reload() location.reload();
}) });
}, 1000) }, 1000);
return return;
} }
} }
// this.$router.push({ path: /* 记住上次退出时的页面 */ /* this.redirect || */'/home4Login' }) // this.$router.push({ path: /* 记住上次退出时的页面 */ /* this.redirect || */'/home4Login' })
this.$router.push({ path: 'login4Index' }) this.$router.push({ path: "login4Index" });
}).catch(() => {
this.loading = false
this.getCode()
}) })
.catch(() => {
this.loading = false;
this.getCode();
});
} else { } else {
console.log('error submit!!') console.log("error submit!!");
return false return false;
} }
}) });
}, },
point() { point() {
const point = Cookies.get('point') !== undefined const point = Cookies.get("point") !== undefined;
if (point) { if (point) {
this.$notify({ this.$notify({
title: '提示', title: "提示",
message: '当前登录状态已过期，请重新登录！', message: "当前登录状态已过期，请重新登录！",
type: 'warning', type: "warning",
duration: 5000 duration: 5000,
}) });
Cookies.remove('point') 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"> @keyframes floatShadow {
.login { 0% {
transform: translateX(1300px);
display: block;
}
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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
text-align: center; text-align: center;
color: #707070; color: #707070;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 500px; /* 385px */ width: 500px; /* 385px */
...@@ -240,23 +424,25 @@ export default { ...@@ -240,23 +424,25 @@ export default {
height: 38px; height: 38px;
} }
} }
.input-icon{ .input-icon {
height: 39px;width: 14px;margin-left: 2px; height: 39px;
width: 14px;
margin-left: 2px;
} }
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
display: inline-block; display: inline-block;
height: 38px; height: 38px;
float: right; float: right;
img{ img {
cursor: pointer; cursor: pointer;
vertical-align:middle vertical-align: middle;
}
} }
}
</style> </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