tk-mini-program-PC/src/views/HomeView.vue

<template>
	<div class="main">
		<div class="container">
			<div class="right">
				<!-- 视频背景 -->
				<video autoplay loop muted class="background-video">
					<source :src="require('@/assets/video/bg.mp4')" type="video/mp4">
					您的浏览器不支持 HTML5 视频。
				</video>

				<!-- 设置 -->
				<div class="center-align">
					<div></div>
					<div class="setup">
						<div class="setup-item center-justify">
							<div></div>
							<span>
								网络设置
							</span>
						</div>
						<div class="setup-item center-justify">
							<div></div>
							<span>
								简体中文
							</span>
						</div>
					</div>
				</div>
				<div class="center-line" style="margin-top: 15vh;">
					<!-- logo -->
					<div class="logo">
						<div class="center-justify" style="height: 80px; width: 300px;">
							<img style="margin-right: 20px;" src="@/assets/logo.png">
							<img src="@/assets/logotext.png">
						</div>
					</div>

					<!-- From -->
					<div class="from">
						<div class="from-title center-justify">
							<div>账号登陆</div>
						</div>

						<div class="from-input">
							<el-form label-position="left" label-width="100px" :model="formData">

								<div class="from-input-item1">
									<img src="@/assets/password.png" alt="">
									<el-input style="height: 25px;" v-model="formData.userId" placeholder="账号" clearable
										@keyup.enter="onSubmit" />
								</div>
								<div class="from-input-item1">
									<img src="@/assets/password.png" alt="">
									<el-input style="height: 25px; " v-model="formData.password" type="password"
										placeholder="密码" show-password @keyup.enter="onSubmit" />
								</div>

								<div class="from-input-item">
									<el-button class="loginButton" color="#8f7ee7" type="primary"
										@click="onSubmit">登录</el-button>
								</div>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/account';
import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
import { ElLoading } from 'element-plus';

const router = useRouter();

const formData = ref({
	userId: getUserPass() == null ? '' : getUserPass().userId,
	password: getUserPass() == null ? '' : getUserPass().password,
});

const onSubmit = () => {
	const loading = ElLoading.service({
		lock: true,
		text: 'Loading',
		background: 'rgba(0, 0, 0, 0.7)',
	});
	console.log('submit!');
	setUserPass(formData.value);
	login({
		userId: formData.value.userId,
		password: formData.value.password,
	}).then((res) => {
		loading.close();
		setToken(res.currcode);
		setUser(res);
		router.push('/nav');
	}).catch((err) => {
		loading.close();
	});
};
</script>

<style lang="less">
.main {
	width: 100vw;
	overflow: hidden;

	.container {
		display: flex;
		box-sizing: border-box;

		.right {
			position: relative;
			width: 1600px;
			height: 900px;
			padding: 20px 40px 20px 50px;
			border-left: 3px solid #23516e;
			position: relative;
			/* 添加 position: relative */
			overflow: hidden;
			/* 防止内容溢出 */

			.background-video {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: -1;
				/* 确保视频在内容之下 */
			}

			.setup {
				display: flex;
				color: #fff;

				.setup-item {
					padding: 10px 6px;
					display: flex;

					div {
						width: 20px;
						height: 20px;
						border-radius: 50%;
						background-color: rgb(255, 255, 255);
						margin-right: 5px;
					}
				}
			}

			.logo {
				padding: 20px 0;
			}

			.from {
				width: 420px;
				height: 320px;
				color: #107A4E;
				background-color: #ffffff44;
				border-radius: 20px;
				border: 1px solid #fff;
				padding: 32px;
				box-sizing: border-box;

				.from-title {
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 24px;
					color: #107A4E;
					line-height: 37px;


					div {
						font-size: 20px;
						font-weight: 600;
						// border-bottom: 4px solid #1db97d;
					}
				}

				.from-input {
					width: 100%;
					padding: 15px 0;

					.from-input-item {
						display: flex;
						padding: 8px 0;

						.from-input-item-title {
							color: #107A4E;
							font-size: 18px;
							font-weight: 500;
							width: 80px;
							height: 50px;
						}

						.loginButton {
							width: 359px;
							height: 50px;
							background: #FFFFFF;
							border-radius: 24px;
							border: 1px solid #FFFFFF;


							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 18px;
							color: #107A4E;
							line-height: 37px;
						}
					}

					.from-input-item1 {
						display: flex;
						width: 359px;
						height: 50px;
						background: rgba(147, 174, 158, 0.37);
						border-radius: 24px;
						border: 1px solid #FFFFFF;
						padding: 12px 25px 13px 25px;
						box-sizing: border-box;
						margin-bottom: 16px;
					}
				}
			}
		}
	}
}

.center-line {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.center-justify {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.center-align {
	display: flex;
	justify-content: space-between;
}

.center-flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-input__wrapper {
	--el-input-focus-border-color: rgba(255, 255, 0, 0);
	--el-menu-hover-bg-color: rgba(255, 255, 0, 0);

}
</style>

<style scoped>
::v-deep(.el-input__wrapper) {
	background-color: rgba(255, 0, 0, 0);
	box-shadow: none;

}

::v-deep(.el-input__inner) {
	color: #107A4E;

}

::v-deep(.el-input__inner::placeholder) {
	color: #107A4E;
}
</style>