cropland/src/components/Login.vue

<template>
	<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="tit">高标准农田智慧管理平台</p>
					<p class="txt">High standard farmland intelligent management platform</p>
				</div>
			</div>
			<div class="f-box">
				<ul class="loginItems">
					<li>
						<i class="iconfont icon-yonghu1"></i>
						<input
							autocomplete="off"
							type="text"
							@keyup="fillPass()"
							id="username"
							v-model="username"
							placeholder="请输入用户名"
						/>
					</li>
					<li>
						<i class="iconfont icon-mima1"></i>
						<input
							autocomplete="off"
							type="password"
							id="password"
							@keyup.enter="submit()"
							v-model="pass"
							placeholder="请输入密码"
						/>
					</li>
					<li>
						<div class="pass">
							<input type="checkbox" id="brand" v-model="cState" />
							<label for="brand">
								<span>
									<i class="el-icon-check"></i>
								</span>
								记住密码
							</label>
							<!-- <a>忘记密码？</a> -->
						</div>
					</li>
					<li class="loginBtn">
						<button class="logon-btn" @click="submit()">登录设备管理系统</button>
						<button class="logon-btn" @click="submit('jiangan')">登录数据监管系统</button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
  			videourl:require('../../static/images/loginMp3.mp4'),
			bjImage: '/static/images/login/login_bg.jpg',
			username: '管理员',
			pass: 'yfadmin',
			cState: false
		}
	},
	methods: {
		submit(flag) {
			if (this.username == '' || this.pass == '') {
				this.$message.error('请输入用户名和密码！')
				return
			}
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.login.login_user',
				data: this.qs.stringify({
					username: this.username,
					password: this.pass
				})
			}).then((res) => {
				if (res.data.message == '') {
					if(res.data.data.user_type == 1){
						localStorage.setItem('setHomepage', '/baseAll')
					}else{
						localStorage.setItem('setHomepage', '/base')
					}
					if (this.cState == true) {
						//是否记住密码
						localStorage.setItem('username', this.username)
						localStorage.setItem('password', this.pass)
					} else {
						localStorage.removeItem(username, password)
					}
					localStorage.setItem('isLogin', true)
					let selHome = sessionStorage.getItem('selHome')
					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)
				}
			})
		},
		fillPass() {
			let username = localStorage.getItem('username')
			if (username == this.username) {
				this.pass = localStorage.getItem('password')
			}
		}
	},
	mounted(){
		window.sessionStorage.removeItem("menuTabs");
        window.sessionStorage.removeItem("menuTabsValue");
	}
}
</script>

<style lang='less' scoped>
.innerBox{
	background: #000;
	width: 100%;
	height: 100vh;
	.video,#myVideo{
	width: 100%;
	height: 100%;
	}
	.login_box{
		position: absolute;
		width: 460px;
		height: 340px;
		left: 50%;
		margin-left: -230px;
		top: 50%;
		margin-top: -170px;
		text-align: center;
		.tit:nth-child(1){
			font-size: 31px;
			color: #fff;
			letter-spacing: 9px;
			font-weight: 700;
			line-height: 54px;
		}
		.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{
					display: block;
					line-height: 33px;
					height: 33px;
					width: 100%;
					padding-left: 25px;
					box-sizing: border-box;
					color: #12555d;
					outline: none;
					border: 1px solid #12555d;
				}
				.pass{
					text-align: left;
					color: #fff;
					i{
						color: #fff;
					}
					input{
						width: inherit;
						vertical-align: middle;
						display: none;
					}
					span{
						display: inline-block;
						width: 16px;
						height: 16px;
						border-radius: 3px;
						border: 1px solid #b5b5b5;
						float: left;
						margin-right: 10px;
						margin-top: 3px;
					}
					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;
						}
					}
					input[type="checkbox"]:checked + label span {
						background: #2f3945;
						i {
							display: block;
							font-size: 15px;
							color: #fff;
							line-height: 15px;
							left: 2px;
						}
						i:before {
							font-weight: 800;
						}
					}
				}
			}
			.loginBtn{
				display: flex;
    			justify-content: space-between;
				button{
					background: #eb959b;
					border: none;
					color: #fff;
					line-height: 33px;
					padding: 3px 34px;
					cursor: pointer;
				}
				button:nth-child(2){
					// margin-left: 14px;
					background: #15b6b4;
				}
				
			}
		}
	}
}
</style>