Commit 92d9a25c authored by 李苏's avatar 李苏 💬

调整

parent 73d1c7cf
...@@ -145,8 +145,8 @@ ...@@ -145,8 +145,8 @@
} }
.el-menu-item{ .el-menu-item{
font-size: 14px!important; font-size: 14px!important;
line-height: 20px!important; line-height: 22.5px!important;
height: 20px!important; height: 22.5px!important;
text-align: left; text-align: left;
text-decoration: underline; text-decoration: underline;
} }
......
...@@ -11,6 +11,7 @@ NProgress.configure({ showSpinner: false }) ...@@ -11,6 +11,7 @@ NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect', '/bind', '/register'] const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log(to,'route')
// console.log(store.state.user.token) // console.log(store.state.user.token)
// NProgress.start() // NProgress.start()
if (getToken()) { if (getToken()) {
......
<template> <template>
<div class="login my-element "> <div class="login">
<vue-particles <vue-particles
class="login-bg" class="login-bg"
color="#34a4ea" color="#34a4ea"
:particleOpacity="0.8" :particleOpacity="0.8"
:particlesNumber="25" :particlesNumber="19"
shapeType="circle" shapeType="circle"
:particleSize="5" :particleSize="5"
linesColor="#8DD1FE" linesColor="#8DD1FE"
:linesWidth="1" :linesWidth="1"
:lineLinked="false" :lineLinked="true"
:lineOpacity="0.4" :lineOpacity="0.4"
:linesDistance="150" :linesDistance="150"
:moveSpeed="1" :moveSpeed="1"
:hoverEffect="true" :hoverEffect="false"
hoverMode="repulse" hoverMode="repulse"
:clickEffect="false" :clickEffect="false"
clickMode="push" clickMode="push"
> >
</vue-particles> </vue-particles>
<!-- 新登录框--> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="position: absolute;right: 5px ;">
<div class="login_form"> <ul class="bg-bubbles" >
<div class="login_logo"> <li v-for="i in 10" :key="i"></li>
<div class="favicon" ></div> </ul>
<div class="favicon_text" > <!-- -->
格物云ERP
</div> <!-- -->
<!-- <h3 class="title">{{appName}}</h3> -->
<div class="iot_title">
<img :src="logo" style="height:40px;width:40px;margin-top:1;"><span style="margin-left: 10px;" > {{appName}}</span>
<!-- <p class="title"></p> -->
</div> </div>
<div class="login_submit">
<el-tabs v-model="tabPaneName" class="full" type="border-card" >
<el-tab-pane name='zh' label="账户登录">
<div class="full" >
<el-form ref="loginForm1" :model="loginForm" :rules="loginRules" class="full login-form">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
class="loginput"
v-model="loginForm.username" v-model="loginForm.username"
type="text" type="text"
auto-complete="off" auto-complete="off"
placeholder="账号" 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 <el-input
class="loginput"
v-model="loginForm.password" v-model="loginForm.password"
type="password" type="password"
auto-complete="off" auto-complete="off"
placeholder="密码" placeholder="密码"
@keyup.enter.native="handleLogin1" @keyup.enter.native="handleLogin"
>
</el-input>
</el-form-item>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:60%;margin: 0 auto;">
<el-button
class="btn btn-primary btn-shine"
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin1"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane name='qyh' label="企业号登录">
<div class="full" >
<el-form ref="loginForm2" :model="loginForm" :rules="loginRules" class="full login-form login-form2 ">
<el-form-item prop="systemid" >
<el-input
v-model="loginForm.systemid"
type="text"
auto-complete="off"
placeholder="企业号"
> >
<!-- <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="username"> <!-- <el-form-item prop="code" v-if="captchaEnabled">
<el-input <el-input
class="loginput" v-model="loginForm.code"
v-model="loginForm.username"
type="text"
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="验证码"
> style="width: 63%"
</el-input> @keyup.enter.native="handleLogin"
</el-form-item> > -->
<el-form-item prop="password">
<el-input
class="loginput"
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin2"
>
</el-input>
</el-form-item>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <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">
...@@ -116,27 +67,26 @@ ...@@ -116,27 +67,26 @@
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:60%;margin: 0 auto;"> <el-form-item style="width:100%;margin-bottom: 50px;">
<el-button <el-button
class="btn btn-primary btn-shine" class="btn btn-primary btn-ghost btn-shine"
:loading="loading" :loading="loading"
size="medium" size="medium"
type="primary" type="primary"
style="width:100%;" style="width:100%;background-color:#3A8FFA;color: #fff;"
@click.native.prevent="handleLogin2" @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>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> <!-- 底部 -->
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="el-login-footer"> <div class="el-login-footer">
<!-- <span>Copyright © 2016-2022 gavelinfo All Rights Reserved.</span> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -147,22 +97,16 @@ import Cookies from "js-cookie"; ...@@ -147,22 +97,16 @@ import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from '@/utils/jsencrypt'
import md5 from '@/utils/md5.js' import md5 from '@/utils/md5.js'
import {systeminfo} from "@/api/common/common.js" import {systeminfo} from "@/api/common/common.js"
import logo from '@/assets/images/favicon.png'
export default { export default {
mounted() {
// alert(window.location.origin+'/'+(window.pathname||'')+process.env.VUE_APP_BASE_API)
},
name: "Login", name: "Login",
data() { data() {
return { return {
tabPaneName:'zh', logo:logo,
/* 登录方式*/
isqyh:false,
appName:'', appName:'',
codeUrl: "", codeUrl: "",
loginForm: { loginForm: {
systemid:"",
username: "", username: "",
password: "", password: "",
rememberMe: false, rememberMe: false,
...@@ -170,9 +114,6 @@ export default { ...@@ -170,9 +114,6 @@ export default {
uuid: "" uuid: ""
}, },
loginRules: { loginRules: {
systemid: [
{ required: true, trigger: "blur", message: "请输入企业号" }
],
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" } { required: true, trigger: "blur", message: "请输入您的账号" }
], ],
...@@ -209,96 +150,45 @@ export default { ...@@ -209,96 +150,45 @@ export default {
}, },
methods: { methods: {
getCode() { getCode() {
getCodeImg().then(res => { // getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled; // this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) { // if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img; // this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid; // this.loginForm.uuid = res.uuid;
} // }
}); // });
}, },
getCookie() { getCookie() {
const systemid = Cookies.get("systemid");
const username = Cookies.get("username"); const username = Cookies.get("username");
const password = Cookies.get("password"); const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe') const rememberMe = Cookies.get('rememberMe')
this.loginForm = { this.loginForm = {
systemid: systemid === undefined ? this.loginForm.systemid : systemid,
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password), password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
}; };
}, },
handleLogin1() { handleLogin() {
this.isqyh=false this.$refs.loginForm.validate(valid => {
this.$refs.loginForm1.validate(valid => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
Cookies.set("systemid", this.loginForm.systemid, { expires: 30 });
Cookies.set("username", this.loginForm.username, { expires: 30 }); Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else { } else {
Cookies.remove("systemid");
Cookies.remove("username"); Cookies.remove("username");
Cookies.remove("password"); Cookies.remove("password");
Cookies.remove('rememberMe'); Cookies.remove('rememberMe');
} }
/* 判定是否是企业号登录*/ this.$store.dispatch("Login", this.loginForm).then(() => {
const loginForm=_.cloneDeep(this.loginForm)
if(!this.isqyh){
/*
企业号登录模式为企业号必填
如何不是删除该字段
是否存在该字段将是判定是否企业号登录的标志
*/
delete loginForm.systemid
}
this.$store.dispatch("Login", loginForm).then(() => {
this.$router.push({path:'index'}) this.$router.push({path:'index'})
// this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
if (this.captchaEnabled) { if (this.captchaEnabled) {
// this.getCode(); this.getCode();
}
});
}
});
},
handleLogin2() {
this.isqyh=true
this.$refs.loginForm2.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("systemid", this.loginForm.systemid, { expires: 30 });
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("systemid");
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
} }
/* 判定是否是企业号登录*/
const loginForm=_.cloneDeep(this.loginForm)
if(!this.isqyh){
/*
企业号登录模式为企业号必填
如何不是删除该字段
是否存在该字段将是判定是否企业号登录的标志
*/
delete loginForm.systemid
}
this.$store.dispatch("Login", loginForm).then(() => {
this.$router.push({path:'index'})
}).catch(() => {
this.loading = false;
// if (this.captchaEnabled) {
// this.getCode();
// }
}); });
} }
}); });
...@@ -308,20 +198,6 @@ export default { ...@@ -308,20 +198,6 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
// .my-element {
// animation: animatedBackground 11s linear infinite;
// }
// @keyframes animatedBackground {
// 0% {
// filter: hue-rotate(0deg) saturate(100%) brightness(100%) ;
// }
// 50% {
// filter: hue-rotate(38deg) saturate(100%) brightness(100%) ;
// }
// 100% {
// filter: hue-rotate(0deg) saturate(100%) brightness(100%) ;
// }
// }
.btn { .btn {
--hue: 190; --hue: 190;
padding: 0px!important; padding: 0px!important;
...@@ -330,11 +206,11 @@ export default { ...@@ -330,11 +206,11 @@ export default {
position: relative; position: relative;
// padding: 1rem 3rem; // padding: 1rem 3rem;
font-size: 1rem; font-size: 1rem;
line-height: 40px; line-height: 30px;
color: white; color: white;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
background-color:#0389ff; background-color:(#0389ff, 100%, 41%);
border: 1px solid #0389ff; border: 1px solid #0389ff;
outline: transparent; outline: transparent;
overflow: hidden; overflow: hidden;
...@@ -353,47 +229,45 @@ export default { ...@@ -353,47 +229,45 @@ export default {
&-ghost { &-ghost {
color: (#0389ff, 100%, 41%); color: (#0389ff, 100%, 41%);
background-color: #0389ff; background-color: transparent;
border-color: (#0389ff, 100%, 41%); border-color: (#0389ff, 100%, 41%);
&:hover { &:hover {
color: #fff; color: white;
} }
} }
&-shine { &-shine {
color: white; color: white;
&::before { // &::before {
position: absolute; // position: absolute;
content: ""; // content: "";
top: 0; // top: 0;
left: 0; // left: 0;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
background: linear-gradient( // background: linear-gradient(
120deg, // 120deg,
transparent, // transparent,
hsla(var(--hue), 100%, 41%, 0.5), // hsla(var(--hue), 100%, 41%, 0.5),
transparent // transparent
); // );
transform: translateX(-100%); // transform: translateX(-100%);
transition: 0.6s; // transition: 0.6s;
} // }
&:hover { // &:hover {
background: #00a2f8; // background: transparent;
box-shadow: 0 0 5px 2px hsla(var(--hue), 100%, 41%, 0.5); // box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
} // }
&:hover::before { // &:hover::before {
transform: translateX(100%); // transform: translateX(100%);
} // }
} }
} }
::v-deep .el-input__inner{ ::v-deep .el-input__inner{
line-height: 42px!important;
height: 42px!important;
&:hover{ &:hover{
border: #014dff 1px solid; border: #014dff 1px solid;
} }
...@@ -413,9 +287,9 @@ export default { ...@@ -413,9 +287,9 @@ export default {
border-top-right-radius:3px; border-top-right-radius:3px;
border-bottom-left-radius:3px; border-bottom-left-radius:3px;
border-bottom-right-radius:3px; border-bottom-right-radius:3px;
box-shadow:inset 0px 1px 0px 0px #54a3f7; // box-shadow:inset 0px 1px 0px 0px #54a3f7;
text-shadow:inset 0px 1px 0px #154682; // text-shadow:inset 0px 1px 0px #154682;
background:linear-gradient(#0389ff, #00aaff); // background:linear-gradient(#0389ff, #00aaff);
} }
.buttonClass:hover { .buttonClass:hover {
...@@ -442,26 +316,46 @@ export default { ...@@ -442,26 +316,46 @@ export default {
background-image: url("../assets/images/login_iot.png"); background-image: url("../assets/images/login_iot.png");
background-size: 100% 100%; background-size: 100% 100%;
} }
.title { .iot_title {
font-family: Georgia, 'Times New Roman', Times, serif; color: #666;
margin: 0px auto 30px auto; margin-top: 30px;
text-align: center; text-align: center;
color: #ffffff; font-size: 20px;
} font-family: SimHei;
.login-form2{ line-height: 40px;
padding-top: 10px!important; height: 40px;
display: flex;
justify-content: center;
transform: translateY(-20px);
font-weight: 600;
letter-spacing: 1.3px;
} }
.login-form { .login-form {
padding-top: 45px; box-shadow:
5.5px 1.4px 2.2px rgba(0, 0, 0, 0.039),
12.4px 3.2px 5.3px rgba(0, 0, 0, 0.057),
21.7px 5.6px 10px rgba(0, 0, 0, 0.07),
36.2px 9.4px 17.9px rgba(0, 0, 0, 0.083),
63.8px 16.6px 33.4px rgba(0, 0, 0, 0.101),
146px 38px 80px rgba(0, 0, 0, 0.14)
;
/* */
margin-top: 50px;
margin-right: 200px;
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 42px; height: 38px;
input { input {
height: 42px; height: 38px;
color: #000;
} }
} }
.input-icon { .input-icon {
height: 42px; height: 39px;
width: 14px; width: 14px;
margin-left: 2px; margin-left: 2px;
} }
...@@ -496,58 +390,105 @@ export default { ...@@ -496,58 +390,105 @@ export default {
height: 38px; height: 38px;
} }
</style> </style>
<style lang='scss' scoped > <style lang='scss'>
.bg-bubbles {
.login_form{
height: 550px;
width: 400px;
position: absolute; position: absolute;
right: 100px; top: 0;
.login_logo{ left: 0;
padding-top: 15px;
height: 30%;
width: 100%; width: 100%;
.favicon{ height: 100%;
background-image: url("../assets/images/favicon.png"); overflow: hidden;
height:70px; li {
width:70px; position: absolute;
background-size: 100% 100%; bottom: -160px;
margin: 0 auto; width:10px;
height: 10px;
background-color: rgba(62, 146, 255, 0.5);
list-style: none;
animation: square 15s infinite;
transition-timing-function: linear;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 13px;
height: 13px;
animation-delay: 2s;
animation-duration: 7s;
background-color: rgba(97, 158, 255, 0.2);
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 7px;
height: 7px;
animation-duration: 8s;
background-color: rgba(84, 115, 255, 0.8);
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 35px;
height: 35px;
animation-delay: 3s;
background-color: rgba(255, 88, 119, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 42px;
height: 42px;
animation-delay: 2s;
background-color: rgba(170, 170, 127, 0.2);
} }
.favicon_text{ &:nth-child(8) {
margin-top: 8px; left: 55%;
text-align: center; width: 12px;
line-height: 24px; height: 12px;
font-size: 24px; animation-delay: 4s;
width: 100%; animation-duration: 15s;
font-weight: 800; background-color: rgba(126, 255, 28, 0.2);
color: #fff;
} }
&:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 12s;
background-color: rgba(53, 134, 255, 0.5);
} }
.login_submit{ &:nth-child(10) {
transform: translate(0.7); left: 85%;
height: 70%; width: 16px;
width: 100%; height: 16px;
animation-delay: 5s;
background-color: rgba(85, 85, 127, 0.2);
} }
}
::v-deep .el-tabs__nav
{
width: 100%;
display: flex;
div{
width: 50%;
text-align: center;
border: 0px!important;
font-size: 19px;
line-height: 40px;
font-weight: 700;
} }
@keyframes square {
0% {
opacity: 0.5;
transform: translateY(0px) rotate(45deg);
} }
::v-deep .el-tabs__content{ 25% {
height: 100%; opacity: 0.75;
transform: translateY(-400px) rotate(90deg)
} }
::v-deep .el-tab-pane{ 50% {
height: 100%; opacity: 1;
transform: translateY(-600px) rotate(135deg);
} }
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
}
</style> </style>
...@@ -38,6 +38,10 @@ ...@@ -38,6 +38,10 @@
mounted() { mounted() {
/* 自适应*/ /* 自适应*/
this.$nextTick(()=>{ this.$nextTick(()=>{
if($('#scrollPane')[0]){ if($('#scrollPane')[0]){
(this.full=false) (this.full=false)
}else{ }else{
...@@ -118,6 +122,19 @@ ...@@ -118,6 +122,19 @@
realchartDown(this.id).then(res => { realchartDown(this.id).then(res => {
this.nowHtml = res this.nowHtml = res
this.$nextTick(() => { this.$nextTick(() => {
const mkid = this.$route.meta.mkid
console.log(mkid)
this.$post(`kzzx/mkqx/${mkid}`).then(res=>{
let qxList =res.data.records||[]
qxList.forEach(item=>{
if(item.value=='N'){
$(`[authcode="${item.czid}"]`).hide()
}
})
})
$(this.$refs.svg).find('text[tagid]').each((i, item) => { $(this.$refs.svg).find('text[tagid]').each((i, item) => {
var a = { var a = {
id: $(item).attr("tagid"), id: $(item).attr("tagid"),
......
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