JT-CIM-ZHNY/src/views/Login/Login.vue

<script setup>
	import {
		useRoute,
		useRouter
	}
	from 'vue-router';
	import BgLayout from '@/views/Login/components/BgLayout.vue'
	import {
		ElMessage,
	} from 'element-plus';
	import {
		Store
	} from '@/store/index'
	store = Store()
	import sanwei from '@/assets/video/zhnylogin.mp4'
	let route = undefined;
	let router = undefined;
</script>
<template>
	<div class="login-container">
		<bg-layout :list="bgList"></bg-layout>
		<div class="logoinTop"></div>
		<!-- 页面底部 -->
		<div class="loginBottom">
			<p>技术支持：金田集团CIM事业部</p>
			<!-- <p>地址：济南市历城区唐冶西路888号东八区企业公馆A21楼</p> -->
			<!-- <p>建议使用<a href="downLoad/360csex_setup.exe">360极速浏览器</a>在1920*1080及以上分辨率下查看</p> -->
			<p>copyright©2022 金田产业发展（山东）集团有限公司 All Right Reserved</p>
		</div>
		<!-- 登录框 -->
		<div class="loginbox">
			<div class="loginbox-title">
				用户登录
			</div>
			<div class="loginbox-input">
				<span class='iconfont icon-yonghu'></span>
				<el-input v-model="loginForm.username" type="text" clearable placeholder="请输入用户名" />
			</div>
			<div class="loginbox-input">
				<span class='iconfont icon-mima1'></span>
				<el-input v-model="loginForm.password" type="password" clearable show-password placeholder="请输入密码"
					@keyup.enter="onLoginClick" />
			</div>
			<div class="loginbox-checkbox">
				<span>
					<!-- <input id="sfjzzh" type="checkbox" title="记住账号" :checked="loginForm.remember" @click="remeberPerson"
						@keyup.enter="onLoginClick" /> -->
					<el-switch change="remeberPerson" @keyup.enter="onLoginClick" width="40rem" size="default"
						v-model="loginForm.remember"></el-switch>
					记住账号密码
				</span>
			</div>
			<div class="loginbox-btn" @click="onLoginClick">
				<div :class="disabled?'disabled':''">登录</div>
			</div>
		</div>
	</div>
</template>

<script>
	let store = undefined;
	export default {
		/* 数据 */
		data() {
			return {
				loginForm: {
					username: '',
					account: '', //账号
					password: '', //密码,
					remember: true, //记住密码,
				},
				disabled: false, //控制鼠标样式
				// 背景图片列表
				bgList: [
					sanwei
				],
			}
		},

		/* 方法 */
		methods: {

			//记住账号密码,true设置本地存储，否则不设置
			remeberPerson() {
				this.loginForm.remember = !this.loginForm.remember
			},

			//登录按钮
			onLoginClick() {
				this.disabled = true //修改鼠标样式
				//需要修改，像数据库发送账号密码，根据返回值判断
				// let password = this.$md5(this.loginForm.password)
				// this.$http.get('/getTableList', {
				// 	tableName: 'base_sys_user',
				// 	sqlWhere: "username = '" + this.loginForm.username + "' and password = '" + password + "'",
				// 	orderByField: ''
				// }).then(res => {
				// 	if (res.data.length > 0) {
				// 		this.loginForm.id = res.data[0].id
				// 		store.realName = res.data[0].name;
				// 		this.storageAndgoTo()
				// 	} else {
				// 		ElMessage.error('账号或密码输入错误!')
				// 	}
				// })



				this.storageAndgoTo()
			},

			//本地储存与跳转
			storageAndgoTo() {
				//存储用户权限id
				// this.$http.get('/getTableList', {
				// 	tableName: 'base_sys_user_role', //
				// 	sqlWhere: '"userId"' + " = " + this.loginForm.id, //+ this.loginForm.id
				// 	orderByField: ''
				// }).then(res => {
				// 	//存储用户ID
				// 	let _this = this
				// 	console.log('打印',res)
				// 	store.roleId = res.data[0].roleid
				// 	console.log(store.roleId)
				// 	if (
				// 		window.navigator.userAgent.match(
				// 			/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				// 		)
				// 	) {
				// 		store.userport = 'APP'
				// 	} else {
				// 		store.userport = 'PC'
				// 	}
				// 	//跳转到Main3D页面			
				// 	this.$router.replace({
				// 		path: '/home'
				// 	})

				// })
				if (
					window.navigator.userAgent.match(
						/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
					)
				) {
					store.userport = 'APP'
				} else {
					store.userport = 'PC'
				}
				store.roleId = 1 

				this.$router.replace({
					path: '/home'
				})

				let userInfo = {
					account: this.loginForm.username,
					password: this.loginForm.password,
					id: this.loginForm.id
				}
				localStorage.setItem('person', JSON.stringify(userInfo))

				//登陆成功判断是否记住密码，设置本地存储账号信息，isRemeber存储是否记住密码状态
				if (!this.loginForm.remember) {
					localStorage.setItem('isRemeber', false)
				} else {
					localStorage.setItem('isRemeber', true)
				}

			},
		},

		mounted() {
			//本地获取判断是否记住密码信息
			let isRemeber = localStorage.getItem('isRemeber')
			if (isRemeber == 'true') {
				//获取账户信息
				let person = JSON.parse(localStorage.getItem('person'))
				this.loginForm.username = person.account
				this.loginForm.password = person.password
			} else if (isRemeber == 'false') {
				this.loginForm.remember = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .el-input__wrapper {
		padding-left: 56rem !important;
	}

	::v-deep .is-checked .el-switch__core .el-switch__action {
		margin-left: calc(-1rem - 14rem);
	}

	el-switch {
		margin: 3rem 0rem;
		width: 36rem !important;
	}

	::v-deep .el-switch__core .el-switch__action {
		width: 16rem !important;
		height: 16rem !important;
	}


	::v-deep .el-switch__core .el-switch__action {
		top: 1rem;
	}


	::v-deep .el-switch__core {
		width: 40rem !important;
		height: 20rem !important;
	}

	/* 账号密码输入框样式设置 */
	::v-deep .el-input__wrapper {
		background-color: rgba(0, 0, 0, 0) !important;
		box-shadow: 0 0 0 0 !important;
		border: 1rem solid #0055ff !important;
		width: 340rem;
		height: 43rem;
		padding-left: 56rem;
		border-radius: 3rem;
		line-height: inherit;
		background-color: rgba(255, 255, 255, 0.5);
	}

	::v-deep .el-input__wrapper.is-focus {
		border: 1rem solid rgb(255, 85, 0) !important;
	}

	.el-input {
		position: static !important;
		box-sizing: inherit !important;
	}

	/* 页面背景样式 */
	.login-container {
		border: 0rem solid red !important;
		width: calc(100vw - 0rem);
		height: calc(100vh - 0rem);
		background: url(@/assets/images/login/login-bg-1.webp) 0rem no-repeat;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		user-select: none;
		animation: switch 10s infinite;
		height: calc(100vh - 0rem);
		position: relative;
	}

	@keyframes switch {

		50% {
			background: url(@/assets/images/login/login-bg.webp) 0rem no-repeat;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}

	/* 页面顶部标题栏样式 */
	.logoinTop {
		width: calc(100% - 0rem);
		height: 70rem;
		line-height: 70rem;
		background: url(@/assets/images/login/ZHNYlogo.png) 0rem no-repeat, linear-gradient(100deg, rgba(16, 96, 210, .2) 30%, rgba(16, 106, 250, .1) 70%);
		background-size: 510rem 70rem, 100% 70rem;
		background-repeat: no-repeat;
		user-select: none;
		position: absolute;
		top: 0;
	}

	/* 页面底部样式 */
	.loginBottom {
		position: absolute;
		width: calc(100% - 0rem);
		height: 110rem;
		bottom: -40rem;
		background: linear-gradient(100deg, rgba(16, 96, 210, .1) 20%, rgba(16, 106, 250, .1) 40%);
		background-size: 100% 110rem;
		background-repeat: no-repeat;
		font-size: 13rem;
		text-align: center;
		color: #ffffff;
		overflow: hidden;
		user-select: none;
		padding: 10rem 0rem;
	}

	.loginBottom>p {
		height: 25rem;
		line-height: 25rem;
		margin: 5rem;
	}

	.loginBottom>p>a {
		color: red;
	}

	/* 登录框 容器样式 */
	.loginbox {
		position: absolute;
		width: 446rem; //400
		height: 423rem; //420
		padding: 0rem 90rem;
		top: calc(50% - 220rem);
		left: calc(50% - 300rem);
		background-color: rgba(235, 209, 249, 0.7);
		box-shadow: 8rem 16rem 16rem #27496d;
		user-select: none;
		border-radius: 15rem;
	}

	/* 登录框标题样式 */
	.loginbox-title {
		height: 70rem;
		line-height: 70rem;
		font-size: 30rem;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		margin-top: 30rem;
		padding: 0rem;
		/* 字间距 */
		letter-spacing: 2rem;
		font-family: "Alimama_ShuHeiTi_Bold";
	}

	/* 登录框 用户名密码输入框样式 */
	.loginbox-input {
		width: calc(100%);
		height: 45rem;
		margin: 0 auto;
		padding: 15rem 0rem;
		background-size: 30rem 30rem;
		position: relative;
	}

	.loginbox-input span {
		position: absolute;
		top: 28rem;
		left: 20rem;
		font-size: 20rem;
		color: #0099f0;
	}

	/* 记住账号复选框样式 */
	.loginbox-checkbox {
		width: calc(100% - 0rem);
		height: 40rem;
		line-height: 40rem;
		/* 字间距 */
		letter-spacing: 2rem;
		color: #ffffff;
		font-size: 14rem;
	}

	/* 记住账号复选框样式 */
	.loginbox-checkbox span {
		height: 40rem;
		line-height: 40rem;
		vertical-align: middle;
		float: left;
	}

	/* 记住账号复选框样式 */
	.loginbox-checkbox span input[type="checkbox"] {
		height: 18rem;
		width: 18rem;
		margin-right: 10rem;
		cursor: pointer;
		vertical-align: middle;
	}

	/* 登录按钮样式 */
	.loginbox-btn div {
		width: calc(100% - 0rem);
		height: 40rem;
		line-height: 40rem;
		background-color: rgba(0, 153, 240, 0.8);
		outline: none;
		border-radius: 50rem;
		/* 字间距 */
		letter-spacing: 2rem;
		font-size: 16rem;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		// box-shadow: 0 3rem 5rem 1rem#27496d;
		cursor: pointer;
		margin: 10rem 0rem;
	}

	//输入框样式
	::v-deep .el-input__wrapper {
		background-color: rgba(255, 255, 255, 0.3) !important;
		border-radius: 40rem;
		border: 0rem !important;
		height: 43rem;
	}

	::v-deep .el-input__inner {
		color: #000 !important;
		font-size: 16rem;
	}

	//获取焦点样式
	::v-deep .el-input__wrapper.is-focus {
		border: 0rem !important;
	}

	//后置图标颜色
	::v-deep .el-icon svg {
		color: #ffffff;
		height: 10rem;
		width: 10rem;
	}


	.loginbox-btn div:hover {
		background-color: lighten(#0099f0, 10%);
		font-weight: 600;
		transition: all .5s;
		// box-shadow: 0 2rem 4rem 0rem #27496d;
	}


	.disabled {
		cursor: not-allowed !important;
	}

	//占位符样式
	::v-deep .el-input__inner::-webkit-input-placeholder {
		/* WebKit browsers */
		color: rgba(255, 255, 255, 0.8) !important;
		font-size: 16rem;
	}

	::v-deep .el-input__inner::placeholder {
		color: rgba(255, 255, 255, 0.8) !important;
		font-size: 16rem;
	}

	/* 谷歌 */
	::v-deep .el-input__inner::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.8) !important;
		font-size: 16rem;
	}
</style>