|
|
@@ -1,16 +1,21 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <video src="../../static/images/loginMp3.mp4"></video>
|
|
|
+ <div class="innerBox">
|
|
|
+ <div class="video">
|
|
|
+ <video id="myVideo"
|
|
|
+ class="video-js vjs-default-skin vjs-big-play-centered"
|
|
|
+ autoplay
|
|
|
+ loop
|
|
|
+ >
|
|
|
+ <!-- <source src="https://video.699pic.com/videos/27/79/49/b_Ktm3pE7sabvX1556277949.mp4" type="video/mp4" > //视频地址 -->
|
|
|
+ <source :src="videourl" type="video/mp4" >
|
|
|
+ <!-- <source src="http://www.yfzhwlw.com/static/flash/cbd.mp4" type="video/mp4" > -->
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
<div class="login_box">
|
|
|
<div class="tit-box">
|
|
|
<div class="tit-con">
|
|
|
- <p class="txt">
|
|
|
- 欢迎来到
|
|
|
- <span class="arrow">
|
|
|
- <i class="el-icon-arrow-right"></i>
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p class="tit">智慧农业大数据平台</p>
|
|
|
+ <p class="tit">高标准农田智慧管理平台</p>
|
|
|
+ <p class="txt">High standard farmland intelligent management platform</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="f-box">
|
|
|
@@ -18,6 +23,7 @@
|
|
|
<li>
|
|
|
<i class="iconfont icon-yonghu1"></i>
|
|
|
<input
|
|
|
+ autocomplete="off"
|
|
|
type="text"
|
|
|
@keyup="fillPass()"
|
|
|
id="username"
|
|
|
@@ -28,6 +34,7 @@
|
|
|
<li>
|
|
|
<i class="iconfont icon-mima1"></i>
|
|
|
<input
|
|
|
+ autocomplete="off"
|
|
|
type="password"
|
|
|
id="password"
|
|
|
@keyup.enter="submit()"
|
|
|
@@ -47,8 +54,9 @@
|
|
|
<!-- <a>忘记密码？</a> -->
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li>
|
|
|
- <button class="logon-btn" @click="submit()">登录</button>
|
|
|
+ <li class="loginBtn">
|
|
|
+ <button class="logon-btn" @click="submit()">登录设备管理系统</button>
|
|
|
+ <button class="logon-btn" @click="submit('jiangan')">登录数据监管系统</button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -60,6 +68,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ videourl:require('../../static/images/loginMp3.mp4'),
|
|
|
bjImage: '/static/images/login/login_bg.jpg',
|
|
|
username: '',
|
|
|
pass: '',
|
|
|
@@ -67,7 +76,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- submit() {
|
|
|
+ submit(flag) {
|
|
|
if (this.username == '' || this.pass == '') {
|
|
|
this.$message.error('请输入用户名和密码！')
|
|
|
return
|
|
|
@@ -90,11 +99,20 @@ export default {
|
|
|
}
|
|
|
localStorage.setItem('isLogin', true)
|
|
|
let selHome = sessionStorage.getItem('selHome')
|
|
|
- if (selHome) {
|
|
|
- this.$router.push(selHome) //登录后默认选择首页
|
|
|
- } else {
|
|
|
+ if(flag){
|
|
|
+ var routeUrl = this.$router.resolve({
|
|
|
+ path: '/bHome'
|
|
|
+ })
|
|
|
+ window.open(routeUrl.href, '_blank')
|
|
|
this.$router.push('/plantGuard')
|
|
|
+ }else{
|
|
|
+ if (selHome) {
|
|
|
+ this.$router.push(selHome) //登录后默认选择首页
|
|
|
+ } else {
|
|
|
+ this.$router.push('/plantGuard')
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
localStorage.setItem('cUsername',res.data.params.username)
|
|
|
} else {
|
|
|
this.$message.error(res.data.message)
|
|
|
@@ -113,157 +131,87 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang='less' scoped>
|
|
|
-.login_container {
|
|
|
+.innerBox{
|
|
|
+ background: #000;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ .video,#myVideo{
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
-
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- // background: url(../../static/images/login/1.gif) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- .login_box {
|
|
|
- width: 900px;
|
|
|
- height: 450px;
|
|
|
+ }
|
|
|
+ .login_box{
|
|
|
position: absolute;
|
|
|
+ width: 460px;
|
|
|
+ height: 340px;
|
|
|
left: 50%;
|
|
|
+ margin-left: -230px;
|
|
|
top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- display: flex;
|
|
|
- .tit-box {
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
+ margin-top: -170px;
|
|
|
+ text-align: center;
|
|
|
+ .tit:nth-child(1){
|
|
|
+ font-size: 31px;
|
|
|
color: #fff;
|
|
|
- letter-spacing: 5px;
|
|
|
- .tit-con {
|
|
|
- display: block;
|
|
|
- padding: 180px 50px;
|
|
|
- .txt {
|
|
|
- font-size: 24px;
|
|
|
- padding-bottom: 15px;
|
|
|
- border-bottom: 1px solid #fff;
|
|
|
- position: relative;
|
|
|
- .arrow {
|
|
|
- position: absolute;
|
|
|
- top: 4px;
|
|
|
- margin-left: 10px;
|
|
|
- background: #fff;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- border-radius: 50%;
|
|
|
- i {
|
|
|
- color: #000;
|
|
|
- font-size: 18px;
|
|
|
- position: absolute;
|
|
|
- left: 4px;
|
|
|
- top: 4px;
|
|
|
- }
|
|
|
- i:before {
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tit {
|
|
|
- font-size: 32px;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ letter-spacing: 9px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 54px;
|
|
|
}
|
|
|
- .f-box {
|
|
|
- flex: 1;
|
|
|
- background: #fff;
|
|
|
- .loginItems {
|
|
|
- padding: 80px 50px 0 50px;
|
|
|
- li {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 45px;
|
|
|
- position: relative;
|
|
|
- i.iconfont {
|
|
|
- position: absolute;
|
|
|
- font-size: 22px;
|
|
|
- left: 0;
|
|
|
- top: 5px;
|
|
|
- color: #b5b5b5;
|
|
|
- }
|
|
|
- }
|
|
|
- input::-webkit-input-placeholder {
|
|
|
- /* WebKit browsers 适配谷歌 */
|
|
|
- color: #b5b5b5;
|
|
|
- }
|
|
|
- input:-moz-placeholder {
|
|
|
- /* Mozilla Firefox 4 to 18 适配火狐 */
|
|
|
- color: #b5b5b5;
|
|
|
- }
|
|
|
- input::-moz-placeholder {
|
|
|
- /* Mozilla Firefox 19+ 适配火狐 */
|
|
|
- color: #b5b5b5;
|
|
|
- }
|
|
|
- input:-ms-input-placeholder {
|
|
|
- /* Internet Explorer 10+ 适配ie*/
|
|
|
- color: #b5b5b5;
|
|
|
+ .txt:nth-child(2){
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .loginItems{
|
|
|
+ li{
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: left;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ i{
|
|
|
+ position: absolute;
|
|
|
+ line-height: 35px;
|
|
|
+ left: 5px;
|
|
|
+ color: #12555d;
|
|
|
}
|
|
|
- input[type='text'],
|
|
|
- input[type='password'] {
|
|
|
- border: none;
|
|
|
- padding: 10px 20px 10px 30px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 1px solid #b5b5b5;
|
|
|
+ input{
|
|
|
+ display: block;
|
|
|
+ line-height: 33px;
|
|
|
+ height: 33px;
|
|
|
width: 100%;
|
|
|
- font-size: 15px;
|
|
|
+ padding-left: 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #12555d;
|
|
|
outline: none;
|
|
|
- box-shadow: 0 0 0px 1000px white inset !important;
|
|
|
- -webkit-box-shadow: 0 0 0px 1000px white inset !important;
|
|
|
- }
|
|
|
- input[type='checkbox'] {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- input[type='checkbox'] + label span {
|
|
|
- display: inline-block;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- border-radius: 3px;
|
|
|
- border: 1px solid #b5b5b5;
|
|
|
- float: left;
|
|
|
- margin-right: 10px;
|
|
|
- i {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ border: 1px solid #12555d;
|
|
|
}
|
|
|
- input[type='checkbox']:checked + label span {
|
|
|
- background: #2f3945;
|
|
|
- i {
|
|
|
- display: block;
|
|
|
- font-size: 15px;
|
|
|
+ .pass{
|
|
|
+ text-align: left;
|
|
|
+ color: #fff;
|
|
|
+ i{
|
|
|
color: #fff;
|
|
|
}
|
|
|
- i:before {
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
- }
|
|
|
- .pass {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 14px;
|
|
|
- label {
|
|
|
- color: #b5b5b5;
|
|
|
- }
|
|
|
- a {
|
|
|
- color: red;
|
|
|
+ input{
|
|
|
+ width: inherit;
|
|
|
+ vertical-align: middle;
|
|
|
+ display: inline;
|
|
|
}
|
|
|
}
|
|
|
- button {
|
|
|
- width: 100%;
|
|
|
+ }
|
|
|
+ .loginBtn{
|
|
|
+ button{
|
|
|
+ background: #eb959b;
|
|
|
border: none;
|
|
|
- background: #3d4c5a;
|
|
|
- border-radius: 30px;
|
|
|
color: #fff;
|
|
|
- line-height: 40px;
|
|
|
- height: 40px;
|
|
|
+ line-height: 33px;
|
|
|
+ padding: 3px 34px;
|
|
|
cursor: pointer;
|
|
|
- outline: none;
|
|
|
}
|
|
|
- button:hover {
|
|
|
- background: #4b647b;
|
|
|
+ button:nth-child(2){
|
|
|
+ margin-left: 14px;
|
|
|
+ background: #15b6b4;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
