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

调整

parent 73d1c7cf
......@@ -145,8 +145,8 @@
}
.el-menu-item{
font-size: 14px!important;
line-height: 20px!important;
height: 20px!important;
line-height: 22.5px!important;
height: 22.5px!important;
text-align: left;
text-decoration: underline;
}
......
......@@ -11,6 +11,7 @@ NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
router.beforeEach((to, from, next) => {
console.log(to,'route')
// console.log(store.state.user.token)
// NProgress.start()
if (getToken()) {
......
<template>
<div class="login my-element ">
<div class="login">
<vue-particles
class="login-bg"
color="#34a4ea"
:particleOpacity="0.8"
:particlesNumber="25"
:particlesNumber="19"
shapeType="circle"
:particleSize="5"
linesColor="#8DD1FE"
:linesWidth="1"
:lineLinked="false"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="1"
:hoverEffect="true"
:hoverEffect="false"
hoverMode="repulse"
:clickEffect="false"
clickMode="push"
>
</vue-particles>
<!-- 新登录框-->
<div class="login_form">
<div class="login_logo">
<div class="favicon" ></div>
<div class="favicon_text" >
格物云ERP
</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-input
class="loginput"
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
</el-input>
</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="handleLogin1"
>
</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="企业号"
>
</el-input>
</el-form-item>
<el-form-item prop="username">
<el-input
class="loginput"
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
</el-input>
</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" />
</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="handleLogin2"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="position: absolute;right: 5px ;">
<ul class="bg-bubbles" >
<li v-for="i in 10" :key="i"></li>
</ul>
<!-- -->
<!-- -->
<!-- <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>
<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>
</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>
</el-form-item>
<!-- <el-form-item prop="code" v-if="captchaEnabled">
<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" 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:100%;margin-bottom: 50px;">
<el-button
class="btn btn-primary btn-ghost btn-shine"
:loading="loading"
size="medium"
type="primary"
style="width:100%;background-color:#3A8FFA;color: #fff;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<!-- <span>Copyright © 2016-2022 gavelinfo All Rights Reserved.</span> -->
</div>
</div>
</template>
......@@ -147,22 +97,16 @@ import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import md5 from '@/utils/md5.js'
import {systeminfo} from "@/api/common/common.js"
import logo from '@/assets/images/favicon.png'
export default {
mounted() {
// alert(window.location.origin+'/'+(window.pathname||'')+process.env.VUE_APP_BASE_API)
},
name: "Login",
data() {
return {
tabPaneName:'zh',
/* 登录方式*/
isqyh:false,
logo:logo,
appName:'',
codeUrl: "",
loginForm: {
systemid:"",
username: "",
password: "",
rememberMe: false,
......@@ -170,9 +114,6 @@ export default {
uuid: ""
},
loginRules: {
systemid: [
{ required: true, trigger: "blur", message: "请输入企业号" }
],
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
],
......@@ -209,119 +150,54 @@ export default {
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
}
});
// getCodeImg().then(res => {
// this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
// if (this.captchaEnabled) {
// this.codeUrl = "data:image/gif;base64," + res.img;
// this.loginForm.uuid = res.uuid;
// }
// });
},
getCookie() {
const systemid = Cookies.get("systemid");
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
systemid: systemid === undefined ? this.loginForm.systemid : systemid,
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin1() {
this.isqyh=false
this.$refs.loginForm1.validate(valid => {
handleLogin() {
this.$refs.loginForm.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.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({path:'index'})
// this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
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();
// }
});
}
});
}
}
};
</script>
<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 {
--hue: 190;
padding: 0px!important;
......@@ -330,11 +206,11 @@ export default {
position: relative;
// padding: 1rem 3rem;
font-size: 1rem;
line-height: 40px;
line-height: 30px;
color: white;
text-decoration: none;
text-transform: uppercase;
background-color:#0389ff;
background-color:(#0389ff, 100%, 41%);
border: 1px solid #0389ff;
outline: transparent;
overflow: hidden;
......@@ -353,47 +229,45 @@ export default {
&-ghost {
color: (#0389ff, 100%, 41%);
background-color: #0389ff;
background-color: transparent;
border-color: (#0389ff, 100%, 41%);
&:hover {
color: #fff;
color: white;
}
}
&-shine {
color: white;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
hsla(var(--hue), 100%, 41%, 0.5),
transparent
);
transform: translateX(-100%);
transition: 0.6s;
}
// &::before {
// position: absolute;
// content: "";
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background: linear-gradient(
// 120deg,
// transparent,
// hsla(var(--hue), 100%, 41%, 0.5),
// transparent
// );
// transform: translateX(-100%);
// transition: 0.6s;
// }
&:hover {
background: #00a2f8;
box-shadow: 0 0 5px 2px hsla(var(--hue), 100%, 41%, 0.5);
}
// &:hover {
// background: transparent;
// box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
// }
&:hover::before {
transform: translateX(100%);
}
// &:hover::before {
// transform: translateX(100%);
// }
}
}
::v-deep .el-input__inner{
line-height: 42px!important;
height: 42px!important;
&:hover{
border: #014dff 1px solid;
}
......@@ -413,9 +287,9 @@ export default {
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
text-shadow:inset 0px 1px 0px #154682;
background:linear-gradient(#0389ff, #00aaff);
// box-shadow:inset 0px 1px 0px 0px #54a3f7;
// text-shadow:inset 0px 1px 0px #154682;
// background:linear-gradient(#0389ff, #00aaff);
}
.buttonClass:hover {
......@@ -442,26 +316,46 @@ export default {
background-image: url("../assets/images/login_iot.png");
background-size: 100% 100%;
}
.title {
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0px auto 30px auto;
text-align: center;
color: #ffffff;
}
.login-form2{
padding-top: 10px!important;
.iot_title {
color: #666;
margin-top: 30px;
text-align: center;
font-size: 20px;
font-family: SimHei;
line-height: 40px;
height: 40px;
display: flex;
justify-content: center;
transform: translateY(-20px);
font-weight: 600;
letter-spacing: 1.3px;
}
.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 {
height: 42px;
height: 38px;
input {
height: 42px;
color: #000;
height: 38px;
}
}
.input-icon {
height: 42px;
height: 39px;
width: 14px;
margin-left: 2px;
}
......@@ -496,58 +390,105 @@ export default {
height: 38px;
}
</style>
<style lang='scss' scoped >
.login_form{
height: 550px;
width: 400px;
position: absolute;
right: 100px;
.login_logo{
padding-top: 15px;
height: 30%;
width: 100%;
.favicon{
background-image: url("../assets/images/favicon.png");
height:70px;
width:70px;
background-size: 100% 100%;
margin: 0 auto;
<style lang='scss'>
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
li {
position: absolute;
bottom: -160px;
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);
}
&:nth-child(8) {
left: 55%;
width: 12px;
height: 12px;
animation-delay: 4s;
animation-duration: 15s;
background-color: rgba(126, 255, 28, 0.2);
}
&:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 12s;
background-color: rgba(53, 134, 255, 0.5);
}
&:nth-child(10) {
left: 85%;
width: 16px;
height: 16px;
animation-delay: 5s;
background-color: rgba(85, 85, 127, 0.2);
}
}
@keyframes square {
0% {
opacity: 0.5;
transform: translateY(0px) rotate(45deg);
}
25% {
opacity: 0.75;
transform: translateY(-400px) rotate(90deg)
}
50% {
opacity: 1;
transform: translateY(-600px) rotate(135deg);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
}
.favicon_text{
margin-top: 8px;
text-align: center;
line-height: 24px;
font-size: 24px;
width: 100%;
font-weight: 800;
color: #fff;
}
}
.login_submit{
transform: translate(0.7);
height: 70%;
width: 100%;
}
}
::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;
}
}
::v-deep .el-tabs__content{
height: 100%;
}
::v-deep .el-tab-pane{
height: 100%;
}
</style>
......@@ -38,6 +38,10 @@
mounted() {
/* 自适应*/
this.$nextTick(()=>{
if($('#scrollPane')[0]){
(this.full=false)
}else{
......@@ -118,6 +122,19 @@
realchartDown(this.id).then(res => {
this.nowHtml = res
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) => {
var a = {
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