|
@@ -1,11 +1,10 @@
|
|
|
<template>
|
|
|
<div class="sso-login-page scrollbar-box">
|
|
|
- <p @click="demo">点我</p>
|
|
|
<!--<img class="logo-img" :src="rectangleLogo">-->
|
|
|
<!--<div class="title-img-box">-->
|
|
|
- <!--<div>-->
|
|
|
- <!--<img class="title-img" src="@/assets/ZDimages/login/title_icon.png">-->
|
|
|
- <!--</div>-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img class="title-img" src="@/assets/ZDimages/login/title_icon.png">-->
|
|
|
+ <!--</div>-->
|
|
|
<!--</div>-->
|
|
|
<!--<p class="introduction-p">技术支持:江苏忠江智能科技有限公司</p>-->
|
|
|
</div>
|
|
@@ -13,26 +12,27 @@
|
|
|
|
|
|
<script>
|
|
|
import { decrypt } from '@/utils/jsencrypt'
|
|
|
- import { Decrypt} from '@/utils/secret.js'
|
|
|
+ import { Decrypt } from '@/utils/secret.js'
|
|
|
import store from '@/store'
|
|
|
- import { getLogoInfo,getUrlConfig} from "@/api/system/publicConfig";
|
|
|
- import { authSsoGetLoginUser } from "@/api/login";
|
|
|
+ import Cookies from 'js-cookie'
|
|
|
+ import { getLogoInfo, getUrlConfig } from '@/api/system/publicConfig'
|
|
|
+ import { ssoGetLoginUser, getLoginUser } from '@/api/login'
|
|
|
|
|
|
export default {
|
|
|
- name: "Login",
|
|
|
+ name: 'Login',
|
|
|
data() {
|
|
|
return {
|
|
|
- codeUrl: "",
|
|
|
- cookiePassword: "",
|
|
|
- type:1,
|
|
|
+ codeUrl: '',
|
|
|
+ cookiePassword: '',
|
|
|
+ type: 1,
|
|
|
loginForm: {
|
|
|
// username: "admin",
|
|
|
// password: "admin123",
|
|
|
- username: "",
|
|
|
- password: "",
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
rememberMe: false,
|
|
|
- code: "",
|
|
|
- uuid: "",
|
|
|
+ code: '',
|
|
|
+ uuid: ''
|
|
|
// userType:""
|
|
|
},
|
|
|
loginRules: {
|
|
@@ -50,402 +50,390 @@
|
|
|
// 注册开关
|
|
|
register: false,
|
|
|
redirect: undefined,
|
|
|
- text:"",
|
|
|
- userTypeCode:"",
|
|
|
- rectangleLogo:localStorage.getItem('rectangleLogo'),
|
|
|
- };
|
|
|
+ text: '',
|
|
|
+ userTypeCode: '',
|
|
|
+ rectangleLogo: localStorage.getItem('rectangleLogo')
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
$route: {
|
|
|
handler: function(route) {
|
|
|
- this.redirect = route.query && route.query.redirect;
|
|
|
+ this.redirect = route.query && route.query.redirect
|
|
|
},
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- localStorage.setItem('windowHref',window.location.href)
|
|
|
+ let url = window.location.href
|
|
|
+ if (url.indexOf('token') != -1) {
|
|
|
+ // url = url.split('ticket')[1].split('=')[1].split('#')
|
|
|
+ // url = url[1].split('=')
|
|
|
+ // url = url[1].split('#')
|
|
|
+ console.log('url',url)
|
|
|
+ // this.getLoginUser()
|
|
|
+ } else {
|
|
|
+ console.log('没找到====>')
|
|
|
+ this.ssoGetLoginUser()
|
|
|
+ }
|
|
|
+ localStorage.setItem('windowHref', window.location.href)
|
|
|
},
|
|
|
- mounted(){
|
|
|
- this.authSsoGetLoginUser();
|
|
|
- // this.getLogoInfo();
|
|
|
- // this.initPage();
|
|
|
+ mounted() {
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- demo(){
|
|
|
-
|
|
|
- // window.open('https://icas.jnu.edu.cn/cas/login?service=http://localhost:8081/sso/getLoginUser','_self')
|
|
|
+ getLoginUser(type) {
|
|
|
+ getLoginUser().then(response => {
|
|
|
+ console.log('response', response)
|
|
|
+ this.msgSuccess('操作成功')
|
|
|
+ })
|
|
|
},
|
|
|
- authSsoGetLoginUser(){
|
|
|
- let self = this;
|
|
|
- authSsoGetLoginUser(response => {
|
|
|
+ //获取身份标识
|
|
|
+ ssoGetLoginUser() {
|
|
|
+ ssoGetLoginUser(response => {
|
|
|
// window.open('https://icas.jnu.edu.cn/cas/login?service=http://localhost:8081/sso/getLoginUser','_self')
|
|
|
- });
|
|
|
-
|
|
|
- // let xhr = new XMLHttpRequest();
|
|
|
- // xhr.onreadystatechange = function() {
|
|
|
- // if (xhr.readyState === XMLHttpRequest.DONE) {
|
|
|
- // if (xhr.status === 200) {
|
|
|
- // console.log('xhr',xhr)
|
|
|
- // // window.open(item.name,item.params.skipType)
|
|
|
- // } else {
|
|
|
- // self.msgError('操作失败,请联系管理员')
|
|
|
- // }
|
|
|
- // }
|
|
|
- // };
|
|
|
- // xhr.open('get','http://192.168.1.9:8080/auth/sso/getLoginUser');
|
|
|
- // xhr.send({})
|
|
|
+ })
|
|
|
},
|
|
|
- //获取首页配置
|
|
|
- // initPage(){
|
|
|
- // initPage().then(response => {
|
|
|
- // if(response.data){
|
|
|
- // localStorage.setItem('initPage',true);
|
|
|
- // }else{
|
|
|
- // localStorage.setItem('initPage',false);
|
|
|
- // }
|
|
|
- // });
|
|
|
- // },
|
|
|
//获取公共配置数据
|
|
|
- getLogoInfo(){
|
|
|
+ getLogoInfo() {
|
|
|
getLogoInfo().then(response => {
|
|
|
- console.log('公共配置',response.data)
|
|
|
+ console.log('公共配置', response.data)
|
|
|
store.dispatch('settings/setSmartAlarmType', response.data.smartLock)
|
|
|
- localStorage.setItem('setSmartAlarmType',response.data.smartLock)
|
|
|
- this.rectangleLogo = response.data.rectangleLogo;
|
|
|
- localStorage.setItem('circularLogo',response.data.circularLogo)
|
|
|
- localStorage.setItem('rectangleLogo',response.data.rectangleLogo)
|
|
|
- localStorage.setItem('videoCover',response.data.videoCover)
|
|
|
- });
|
|
|
+ localStorage.setItem('setSmartAlarmType', response.data.smartLock)
|
|
|
+ this.rectangleLogo = response.data.rectangleLogo
|
|
|
+ localStorage.setItem('circularLogo', response.data.circularLogo)
|
|
|
+ localStorage.setItem('rectangleLogo', response.data.rectangleLogo)
|
|
|
+ localStorage.setItem('videoCover', response.data.videoCover)
|
|
|
+ })
|
|
|
getUrlConfig().then(response => {
|
|
|
- console.log('开发配置',response.data)
|
|
|
+ console.log('开发配置', response.data)
|
|
|
//判定http或者https
|
|
|
- let urlText = window.location.href.split('://')[0]+'://';
|
|
|
+ let urlText = window.location.href.split('://')[0] + '://'
|
|
|
|
|
|
- let outerNet=window.location.href.indexOf(response.data.ipIdentify) == -1//true外网 false 内网
|
|
|
+ let outerNet = window.location.href.indexOf(response.data.ipIdentify) == -1//true外网 false 内网
|
|
|
|
|
|
- if(outerNet){//外网
|
|
|
+ if (outerNet) {//外网
|
|
|
//文件预览地址
|
|
|
- localStorage.setItem('filePreviewUrl',urlText+response.data.fileExtranetUrl)
|
|
|
+ localStorage.setItem('filePreviewUrl', urlText + response.data.fileExtranetUrl)
|
|
|
//摄像头代理访问地址
|
|
|
- localStorage.setItem('cameraExtranetAgent',urlText+response.data.cameraExtranetAgent)
|
|
|
+ localStorage.setItem('cameraExtranetAgent', urlText + response.data.cameraExtranetAgent)
|
|
|
//摄像头地址ip段
|
|
|
- localStorage.setItem('ipIdentify',response.data.ipIdentify)
|
|
|
+ localStorage.setItem('ipIdentify', response.data.ipIdentify)
|
|
|
//摄像头访问地址
|
|
|
- localStorage.setItem('cameraUrl','wss://'+response.data.cameraExtranetUrl)
|
|
|
+ localStorage.setItem('cameraUrl', 'wss://' + response.data.cameraExtranetUrl)
|
|
|
//MQTT地址
|
|
|
- localStorage.setItem('mqttUrl','wss://'+Decrypt(response.data.mqttExtranetUrl))
|
|
|
+ localStorage.setItem('mqttUrl', 'wss://' + Decrypt(response.data.mqttExtranetUrl))
|
|
|
//MQTT账号
|
|
|
- localStorage.setItem('mqttUser',Decrypt(response.data.mqttExtranetUser))
|
|
|
+ localStorage.setItem('mqttUser', Decrypt(response.data.mqttExtranetUser))
|
|
|
//MQTT密码
|
|
|
- localStorage.setItem('mqttPassword',Decrypt(response.data.mqttExtranetPassword))
|
|
|
+ localStorage.setItem('mqttPassword', Decrypt(response.data.mqttExtranetPassword))
|
|
|
//可视化大屏访问地址
|
|
|
- localStorage.setItem('screenUrl',urlText+response.data.screenExtranetUrl)
|
|
|
- }else{
|
|
|
+ localStorage.setItem('screenUrl', urlText + response.data.screenExtranetUrl)
|
|
|
+ } else {
|
|
|
//文件预览地址
|
|
|
- localStorage.setItem('filePreviewUrl',urlText+response.data.fileIntranetUrl)
|
|
|
+ localStorage.setItem('filePreviewUrl', urlText + response.data.fileIntranetUrl)
|
|
|
//摄像头代理访问地址
|
|
|
- localStorage.setItem('cameraExtranetAgent',urlText+response.data.cameraIntranetAgent)
|
|
|
+ localStorage.setItem('cameraExtranetAgent', urlText + response.data.cameraIntranetAgent)
|
|
|
//摄像头地址ip段
|
|
|
- localStorage.setItem('ipIdentify',response.data.ipIdentify)
|
|
|
+ localStorage.setItem('ipIdentify', response.data.ipIdentify)
|
|
|
//摄像头访问地址
|
|
|
- localStorage.setItem('cameraUrl','wss://'+response.data.cameraIntranetUrl)
|
|
|
+ localStorage.setItem('cameraUrl', 'wss://' + response.data.cameraIntranetUrl)
|
|
|
//MQTT地址
|
|
|
- localStorage.setItem('mqttUrl','ws://'+Decrypt(response.data.mqttIntranetUrl))
|
|
|
+ localStorage.setItem('mqttUrl', 'ws://' + Decrypt(response.data.mqttIntranetUrl))
|
|
|
//MQTT账号
|
|
|
- localStorage.setItem('mqttUser',Decrypt(response.data.mqttIntranetUser))
|
|
|
+ localStorage.setItem('mqttUser', Decrypt(response.data.mqttIntranetUser))
|
|
|
//MQTT密码
|
|
|
- localStorage.setItem('mqttPassword',Decrypt(response.data.mqttIntranetPassword))
|
|
|
+ localStorage.setItem('mqttPassword', Decrypt(response.data.mqttIntranetPassword))
|
|
|
//可视化大屏访问地址
|
|
|
- localStorage.setItem('screenUrl',urlText+response.data.screenIntranetUrl)
|
|
|
+ localStorage.setItem('screenUrl', urlText + response.data.screenIntranetUrl)
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
//全屏
|
|
|
fullScreen() {
|
|
|
- var element = document.documentElement;
|
|
|
+ var element = document.documentElement
|
|
|
if (element.requestFullscreen) {
|
|
|
- element.requestFullscreen();
|
|
|
+ element.requestFullscreen()
|
|
|
} else if (element.msRequestFullscreen) {
|
|
|
- element.msRequestFullscreen();
|
|
|
+ element.msRequestFullscreen()
|
|
|
} else if (element.mozRequestFullScreen) {
|
|
|
- element.mozRequestFullScreen();
|
|
|
+ element.mozRequestFullScreen()
|
|
|
} else if (element.webkitRequestFullscreen) {
|
|
|
- element.webkitRequestFullscreen();
|
|
|
+ element.webkitRequestFullscreen()
|
|
|
}
|
|
|
},
|
|
|
//退出全屏
|
|
|
exitFullscreen() {
|
|
|
if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen();
|
|
|
+ document.exitFullscreen()
|
|
|
} else if (document.msExitFullscreen) {
|
|
|
- document.msExitFullscreen();
|
|
|
+ document.msExitFullscreen()
|
|
|
} else if (document.mozCancelFullScreen) {
|
|
|
- document.mozCancelFullScreen();
|
|
|
+ document.mozCancelFullScreen()
|
|
|
} else if (document.webkitExitFullscreen) {
|
|
|
- document.webkitExitFullscreen();
|
|
|
+ document.webkitExitFullscreen()
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
- .sso-login-page{
|
|
|
+ .sso-login-page {
|
|
|
height: 100%;
|
|
|
- width:100%;
|
|
|
+ width: 100%;
|
|
|
background-image: url("../assets/ZDimages/login/icon_dl_bbg.png");
|
|
|
- background-repeat:no-repeat;
|
|
|
+ background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
-webkit-background-size: cover;
|
|
|
-o-background-size: cover;
|
|
|
position: relative;
|
|
|
- *{
|
|
|
- margin:0;
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
- .logo-img{
|
|
|
+ .logo-img {
|
|
|
position: absolute;
|
|
|
- top:29px;
|
|
|
- left:52px;
|
|
|
- width:250px;
|
|
|
- height:55px;
|
|
|
+ top: 29px;
|
|
|
+ left: 52px;
|
|
|
+ width: 250px;
|
|
|
+ height: 55px;
|
|
|
}
|
|
|
- .title-img-box{
|
|
|
+ .title-img-box {
|
|
|
position: absolute;
|
|
|
- top:74px;
|
|
|
- left:50%;
|
|
|
- margin-left:-580px;
|
|
|
- width:1180px;
|
|
|
- height:230px;
|
|
|
- div{
|
|
|
+ top: 74px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -580px;
|
|
|
+ width: 1180px;
|
|
|
+ height: 230px;
|
|
|
+ div {
|
|
|
position: relative;
|
|
|
- img{
|
|
|
- width:1180px;
|
|
|
- height:230px;
|
|
|
+ img {
|
|
|
+ width: 1180px;
|
|
|
+ height: 230px;
|
|
|
}
|
|
|
- p{
|
|
|
+ p {
|
|
|
position: absolute;
|
|
|
- top:72px;
|
|
|
- right:300px;
|
|
|
- width:50px;
|
|
|
- height:26px;
|
|
|
- line-height:26px;
|
|
|
+ top: 72px;
|
|
|
+ right: 300px;
|
|
|
+ width: 50px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
text-align: center;
|
|
|
background: #0045AF;
|
|
|
- color:#fff;
|
|
|
- font-size:14px;
|
|
|
- border-radius:70px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 70px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .form-box{
|
|
|
- width:680px;
|
|
|
- height:520px;
|
|
|
+ .form-box {
|
|
|
+ width: 680px;
|
|
|
+ height: 520px;
|
|
|
background-image: url("../assets/ZDimages/login/img_dlk_bg.png");
|
|
|
position: absolute;
|
|
|
- top:290px;
|
|
|
- left:50%;
|
|
|
- margin-left:-340px;
|
|
|
- .form-title-p{
|
|
|
- line-height:52px;
|
|
|
- font-size:24px;
|
|
|
+ top: 290px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -340px;
|
|
|
+ .form-title-p {
|
|
|
+ line-height: 52px;
|
|
|
+ font-size: 24px;
|
|
|
text-align: center;
|
|
|
- color:#fff;
|
|
|
- font-weight:700;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
- .username-input-box-code:hover{
|
|
|
- box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
|
|
|
+ .username-input-box-code:hover {
|
|
|
+ box-shadow: 0 0 4px 1px rgba(255, 39, 39, 1) !important;
|
|
|
}
|
|
|
- .username-input-box-code{
|
|
|
- border: 1px solid #FF6A6A!important;
|
|
|
+ .username-input-box-code {
|
|
|
+ border: 1px solid #FF6A6A !important;
|
|
|
}
|
|
|
- .username-input-box:hover{
|
|
|
+ .username-input-box:hover {
|
|
|
box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
}
|
|
|
- .username-input-box{
|
|
|
- width:480px;
|
|
|
- height:60px;
|
|
|
+ .username-input-box {
|
|
|
+ width: 480px;
|
|
|
+ height: 60px;
|
|
|
border: 1px solid #00FFFC;
|
|
|
border-radius: 10px;
|
|
|
background: rgba(0, 13, 41, 0.2);
|
|
|
margin: 40px auto 32px;
|
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
|
- img{
|
|
|
- height:20px;
|
|
|
- width:20px;
|
|
|
- margin:20px;
|
|
|
+ img {
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
+ margin: 20px;
|
|
|
}
|
|
|
input:-webkit-autofill {
|
|
|
//input 背景色 #0C2034根据自己需要替换
|
|
|
- -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
|
|
|
+ -webkit-box-shadow: 0 0 0px 1000px rgba(1, 25, 67, 1) inset !important;
|
|
|
//input字体颜色 颜色根据自己要求替换
|
|
|
-webkit-text-fill-color: #FFFFFF !important;
|
|
|
}
|
|
|
- input{
|
|
|
- flex:1;
|
|
|
- border:none;
|
|
|
- outline:none;
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
background-color: transparent !important;
|
|
|
color: #dedede;
|
|
|
- font-size:16px;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
- ::placeholder{
|
|
|
- color:#999999 ;
|
|
|
- font-size:16px;
|
|
|
+ ::placeholder {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
- .password-input-box:hover{
|
|
|
+ .password-input-box:hover {
|
|
|
box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
}
|
|
|
- .password-input-box{
|
|
|
- width:480px;
|
|
|
- height:60px;
|
|
|
+ .password-input-box {
|
|
|
+ width: 480px;
|
|
|
+ height: 60px;
|
|
|
border: 1px solid #00FFFC;
|
|
|
border-radius: 10px;
|
|
|
background: rgba(0, 13, 41, 0.2);
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
|
- img{
|
|
|
- height:20px;
|
|
|
- width:20px;
|
|
|
- margin:20px;
|
|
|
+ img {
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
+ margin: 20px;
|
|
|
}
|
|
|
input:-webkit-autofill {
|
|
|
//input 背景色 #0C2034根据自己需要替换
|
|
|
- -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
|
|
|
+ -webkit-box-shadow: 0 0 0px 1000px rgba(1, 25, 67, 1) inset !important;
|
|
|
//input字体颜色 颜色根据自己要求替换
|
|
|
-webkit-text-fill-color: #FFFFFF !important;
|
|
|
}
|
|
|
- input{
|
|
|
- flex:1;
|
|
|
- border:none;
|
|
|
- outline:none;
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
background-color: transparent !important;
|
|
|
color: #dedede;
|
|
|
- font-size:16px;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
- ::placeholder{
|
|
|
- color:#999999 ;
|
|
|
- font-size:16px;
|
|
|
+ ::placeholder {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
- .text-p{
|
|
|
- width:480px;
|
|
|
- height:59px;
|
|
|
+ .text-p {
|
|
|
+ width: 480px;
|
|
|
+ height: 59px;
|
|
|
line-height: 59px;
|
|
|
margin: 0 auto;
|
|
|
font-size: 14px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
color: #DC1616;
|
|
|
}
|
|
|
- .code-input-box{
|
|
|
- width:480px;
|
|
|
- height:60px;
|
|
|
+ .code-input-box {
|
|
|
+ width: 480px;
|
|
|
+ height: 60px;
|
|
|
display: flex;
|
|
|
margin: 0 auto;
|
|
|
- .code-input-left-box:hover{
|
|
|
+ .code-input-left-box:hover {
|
|
|
box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
}
|
|
|
- .code-input-left-box{
|
|
|
- width:330px;
|
|
|
- height:60px;
|
|
|
+ .code-input-left-box {
|
|
|
+ width: 330px;
|
|
|
+ height: 60px;
|
|
|
border: 1px solid #00FFFC;
|
|
|
border-radius: 10px;
|
|
|
background: rgba(0, 13, 41, 0.2);
|
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
|
- img{
|
|
|
- height:20px;
|
|
|
- width:20px;
|
|
|
- margin:20px;
|
|
|
+ img {
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
+ margin: 20px;
|
|
|
}
|
|
|
input:-webkit-autofill {
|
|
|
-webkit-box-shadow: 0 0 0 1000px white inset !important;
|
|
|
}
|
|
|
- input{
|
|
|
- flex:1;
|
|
|
- border:none;
|
|
|
- outline:none;
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
background-color: transparent !important;
|
|
|
color: #dedede;
|
|
|
- font-size:16px;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
- ::placeholder{
|
|
|
- color:#999999 ;
|
|
|
- font-size:16px;
|
|
|
+ ::placeholder {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
- .login-code{
|
|
|
- width:124px;
|
|
|
- height:50px;
|
|
|
- margin:6px 0 0 25px;
|
|
|
+ .login-code {
|
|
|
+ width: 124px;
|
|
|
+ height: 50px;
|
|
|
+ margin: 6px 0 0 25px;
|
|
|
img {
|
|
|
- width:124px;
|
|
|
- height:50px;
|
|
|
+ width: 124px;
|
|
|
+ height: 50px;
|
|
|
cursor: pointer;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .form-button-p{
|
|
|
- font-size:16px;
|
|
|
+ .form-button-p {
|
|
|
+ font-size: 16px;
|
|
|
display: block;
|
|
|
- width:480px;
|
|
|
+ width: 480px;
|
|
|
height: 60px;
|
|
|
background: #0045AF;
|
|
|
- color:#fff;
|
|
|
- border:none;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
border-radius: 10px;
|
|
|
- margin:34px auto 0;
|
|
|
+ margin: 34px auto 0;
|
|
|
}
|
|
|
}
|
|
|
- .introduction-p{
|
|
|
- width:100%;
|
|
|
+ .introduction-p {
|
|
|
+ width: 100%;
|
|
|
text-align: center;
|
|
|
- color:#fff;
|
|
|
- font-size:16px;
|
|
|
- line-height:44px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 44px;
|
|
|
position: absolute;
|
|
|
- left:0;
|
|
|
- bottom:0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.login {
|
|
|
/*display: flex;*/
|
|
|
/*justify-content: right;*/
|
|
|
/*padding-right:220px;*/
|
|
|
/*align-items: center;*/
|
|
|
height: 100%;
|
|
|
- width:100%;
|
|
|
+ width: 100%;
|
|
|
background-image: url("../assets/ZDimages/img_dl_bg.png");
|
|
|
background-size: 100%;
|
|
|
position: relative;
|
|
|
- .login-max-box{
|
|
|
+ .login-max-box {
|
|
|
position: absolute;
|
|
|
- height:800px;
|
|
|
- width:1600px;
|
|
|
+ height: 800px;
|
|
|
+ width: 1600px;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 30px;
|
|
|
- top:50%;
|
|
|
- left:50%;
|
|
|
- margin-top:-400px;
|
|
|
- margin-left:-800px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-top: -400px;
|
|
|
+ margin-left: -800px;
|
|
|
display: flex;
|
|
|
- .left-box{
|
|
|
- width:591px;
|
|
|
- height:500px;
|
|
|
+ .left-box {
|
|
|
+ width: 591px;
|
|
|
+ height: 500px;
|
|
|
background-image: url("../assets/ZDimages/img_dl_sy.png");
|
|
|
background-size: 100%;
|
|
|
- margin:172px 0 178px 140px;
|
|
|
+ margin: 172px 0 178px 140px;
|
|
|
}
|
|
|
- .right-box{
|
|
|
- flex:1;
|
|
|
+ .right-box {
|
|
|
+ flex: 1;
|
|
|
.title {
|
|
|
- margin:91px 0 40px 0;
|
|
|
+ margin: 91px 0 40px 0;
|
|
|
text-align: center;
|
|
|
- padding:0;
|
|
|
+ padding: 0;
|
|
|
font-size: 50px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: bold;
|
|
@@ -471,7 +459,7 @@
|
|
|
border-radius: 6px;
|
|
|
background: #ffffff;
|
|
|
width: 500px;
|
|
|
- margin:0 auto;
|
|
|
+ margin: 0 auto;
|
|
|
padding: 25px 25px 5px 25px;
|
|
|
.el-input {
|
|
|
height: 38px;
|
|
@@ -484,89 +472,89 @@
|
|
|
width: 14px;
|
|
|
margin-left: 2px;
|
|
|
}
|
|
|
- .username-input-box{
|
|
|
- width:448px;
|
|
|
- height:48px;
|
|
|
+ .username-input-box {
|
|
|
+ width: 448px;
|
|
|
+ height: 48px;
|
|
|
background: #f8f8f8;
|
|
|
border: 1px solid #E0E0E0;
|
|
|
- border-radius:10px;
|
|
|
+ border-radius: 10px;
|
|
|
display: flex;
|
|
|
- margin-bottom:30px;
|
|
|
- img{
|
|
|
- width:20px;
|
|
|
- height:20px;
|
|
|
- margin:14px 16px 0 16px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin: 14px 16px 0 16px;
|
|
|
}
|
|
|
- input{
|
|
|
- height:46px;
|
|
|
- flex:1;
|
|
|
+ input {
|
|
|
+ height: 46px;
|
|
|
+ flex: 1;
|
|
|
background: #f8f8f8;
|
|
|
outline: none;
|
|
|
- border:none;
|
|
|
- margin-right:20px;
|
|
|
- color:#333;
|
|
|
+ border: none;
|
|
|
+ margin-right: 20px;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- input::placeholder{
|
|
|
- color:#ccc;
|
|
|
+ input::placeholder {
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
}
|
|
|
- .password-input-box{
|
|
|
- width:448px;
|
|
|
- height:48px;
|
|
|
+ .password-input-box {
|
|
|
+ width: 448px;
|
|
|
+ height: 48px;
|
|
|
background: #f8f8f8;
|
|
|
border: 1px solid #E0E0E0;
|
|
|
- border-radius:10px;
|
|
|
+ border-radius: 10px;
|
|
|
display: flex;
|
|
|
- img{
|
|
|
- width:20px;
|
|
|
- height:20px;
|
|
|
- margin:14px 16px 0 16px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin: 14px 16px 0 16px;
|
|
|
}
|
|
|
- input{
|
|
|
- height:46px;
|
|
|
- flex:1;
|
|
|
+ input {
|
|
|
+ height: 46px;
|
|
|
+ flex: 1;
|
|
|
background: #f8f8f8;
|
|
|
outline: none;
|
|
|
- border:none;
|
|
|
- margin-right:20px;
|
|
|
- color:#333;
|
|
|
+ border: none;
|
|
|
+ margin-right: 20px;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- input::placeholder{
|
|
|
- color:#ccc;
|
|
|
+ input::placeholder {
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
}
|
|
|
- .code-input-box{
|
|
|
- width:450px;
|
|
|
- height:50px;
|
|
|
+ .code-input-box {
|
|
|
+ width: 450px;
|
|
|
+ height: 50px;
|
|
|
display: flex;
|
|
|
- margin-bottom:60px;
|
|
|
- .code-input-left-box{
|
|
|
- width:274px;
|
|
|
- height:48px;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .code-input-left-box {
|
|
|
+ width: 274px;
|
|
|
+ height: 48px;
|
|
|
background: #f8f8f8;
|
|
|
border: 1px solid #E0E0E0;
|
|
|
- border-radius:10px;
|
|
|
- img{
|
|
|
- width:20px;
|
|
|
- height:20px;
|
|
|
- margin:14px 16px 0 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin: 14px 16px 0 16px;
|
|
|
}
|
|
|
- input{
|
|
|
- height:46px;
|
|
|
- flex:1;
|
|
|
+ input {
|
|
|
+ height: 46px;
|
|
|
+ flex: 1;
|
|
|
background: #f8f8f8;
|
|
|
outline: none;
|
|
|
- border:none;
|
|
|
- margin-right:20px;
|
|
|
- color:#333;
|
|
|
+ border: none;
|
|
|
+ margin-right: 20px;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- input::placeholder{
|
|
|
- color:#ccc;
|
|
|
+ input::placeholder {
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
display: flex;
|
|
|
}
|
|
|
.login-code {
|
|
|
- margin-left:24px;
|
|
|
+ margin-left: 24px;
|
|
|
width: 150px;
|
|
|
height: 48px;
|
|
|
img {
|
|
@@ -598,33 +586,33 @@
|
|
|
.login-code-img {
|
|
|
height: 38px;
|
|
|
}
|
|
|
- .type-max-box{
|
|
|
+ .type-max-box {
|
|
|
display: flex;
|
|
|
- margin-bottom:58px;
|
|
|
- width:450px;
|
|
|
+ margin-bottom: 58px;
|
|
|
+ width: 450px;
|
|
|
/*border-bottom:1px solid #e0e0e0;*/
|
|
|
- p{
|
|
|
- font-size:18px;
|
|
|
+ p {
|
|
|
+ font-size: 18px;
|
|
|
text-align: center;
|
|
|
- line-height:56px;
|
|
|
- margin:0;
|
|
|
- color:#666666;
|
|
|
- cursor:pointer;
|
|
|
+ line-height: 56px;
|
|
|
+ margin: 0;
|
|
|
+ color: #666666;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- p:nth-child(1){
|
|
|
- width:90px;
|
|
|
- margin-right:30px;
|
|
|
+ p:nth-child(1) {
|
|
|
+ width: 90px;
|
|
|
+ margin-right: 30px;
|
|
|
}
|
|
|
- p:nth-child(2){
|
|
|
- width:126px;
|
|
|
+ p:nth-child(2) {
|
|
|
+ width: 126px;
|
|
|
}
|
|
|
- .typeColorA{
|
|
|
- color:#0045af;
|
|
|
- border-bottom:2px solid #0045af;
|
|
|
+ .typeColorA {
|
|
|
+ color: #0045af;
|
|
|
+ border-bottom: 2px solid #0045af;
|
|
|
}
|
|
|
}
|
|
|
- .text-p{
|
|
|
- margin:0;
|
|
|
+ .text-p {
|
|
|
+ margin: 0;
|
|
|
width: 172px;
|
|
|
height: 50px;
|
|
|
font-size: 14px;
|
|
@@ -633,25 +621,25 @@
|
|
|
line-height: 50px;
|
|
|
}
|
|
|
}
|
|
|
- .logo-img{
|
|
|
+ .logo-img {
|
|
|
position: absolute;
|
|
|
- left:20px;
|
|
|
- top:20px;
|
|
|
- width:267px;
|
|
|
- height:66px;
|
|
|
+ left: 20px;
|
|
|
+ top: 20px;
|
|
|
+ width: 267px;
|
|
|
+ height: 66px;
|
|
|
}
|
|
|
}
|
|
|
- .position-p{
|
|
|
+ .position-p {
|
|
|
position: absolute;
|
|
|
- right:0;
|
|
|
- bottom:20px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 20px;
|
|
|
width: 638px;
|
|
|
height: 15px;
|
|
|
font-size: 14px;
|
|
|
color: #AAE1FF;
|
|
|
line-height: 15px;
|
|
|
- padding:0;
|
|
|
- margin:0;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|