zhgdyun/src/views/login/index.vue

<template>
		<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">

	<div class="loginBigImg">
		<div class="loginTitle">
			<div>数字化项目监管平台</div>
			<div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div>
		</div>
		<div class="loginFrom">
			<div class="inutFrom">
				<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
					<el-form-item prop="account" style="margin-bottom: 10%">
						<el-input v-model="loginForm.account" placeholder="请输入账号">
							<template #prefix>
								<img src="@/assets/images/login/accountImg1.png" alt="" />
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							type="password"
							v-model="loginForm.password"
							placeholder="请输入密码"
							show-password
							autocomplete="new-password"
						>
							<template #prefix>
								<img src="@/assets/images/login/passwordImg1.png" alt="" />
							</template>
						</el-input>
					</el-form-item>
					<!-- <div class="passwordBox">
						<span><el-checkbox style="color: #fff" v-model="checked">记住密码</el-checkbox></span>
						<span style="float: right; margin-top: 2.5%">忘记密码？</span>
					</div> -->
				</el-form>
				<div style="height: 45%">
					<el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</ScaleBox>

</template>

<script setup lang="ts" name="logonPage">
import ScaleBox from "vue3-scale-box";

import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { Login } from "@/api/interface";
import { ElMessage, ElNotification } from "element-plus";
import { loginApi, jumpLoginApi } from "@/api/modules/login";
import { GlobalStore } from "@/stores";
import { TabsStore } from "@/stores/modules/tabs";
import { KeepAliveStore } from "@/stores/modules/keepAlive";
import { getTimeState } from "@/utils/util";
import { HOME_URL } from "@/enums/Home";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
// import { CircleClose, UserFilled } from "@element-plus/icons-vue";
import type { ElForm } from "element-plus";
import { log } from "console";

const router = useRouter();
const tabsStore = TabsStore();
const keepAlive = KeepAliveStore();
const globalStore = GlobalStore();

// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
	account: [{ required: true, message: "请输入账号", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({ account: "", password: "" });
const login = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid, params) => {
		if (!valid) return;
		loading.value = true;
		try {
			const arr = ref(["/government", "/home", "/home", "/home"]);
			// 1.执行登录接口
			const { result } = await loginApi({ ...loginForm, password: loginForm.password });
			console.log("执行登录接口 ：结果：=========", result);
			globalStore.setSN(result.sn);
			globalStore.setToken(result.token);
			globalStore.setAccount(result.account);
			globalStore.setAccountType(result.accountType);
			globalStore.setProjectDateAuth(result.menuAuthority);
			globalStore.setIsManager(result.isManager); //我已知晓

			// 2.添加动态路由
			// await initDynamicRouter();
			// router.push(arr[result.accountType - 1]);
			// 3.清空 tabs、keepAlive 保留的数据
			tabsStore.closeMultipleTab();
			keepAlive.setKeepAliveName();

			router.push("/large");
			// router.push(arr.value[result.accountType - 1]);
			// 4.跳转到首页

			// ElNotification({
			// 	title: getTimeState(),
			// 	message: "欢迎登录",
			// 	type: "success",
			// 	duration: 3000
			// });
			// return router.go(0);
		} finally {
			loading.value = false;
		}
	});
};

// resetForm
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

onMounted(async () => {
	

	// 监听enter事件（调用登录）
	document.onkeydown = (e: any) => {
		e = window.event || e;
		if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
			if (loading.value) return;
			login(loginFormRef.value);
		}
	};
});
// login页面销毁时，需要去掉enter监听
onBeforeUnmount(() => {
	document.onkeydown = null;
});
</script>

<style lang="scss" scoped>
.loginBigImg {
	width: 100%;
	height: 100%;
	background: url("@/assets/images/login/loginImg.gif") no-repeat;
	background-size: 100% 100%;

	.loginTitle {
		width: 20%;
		top: 30%;
		position: relative;
		left: 70%;
		font-size: calc(100vw * 40 / 1920);
		color: #65c4f9;
		font-family: "pmzd";
		background-image: linear-gradient(to right, #65c4f9, #82fbea);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		.titltText {
			margin-top: 2%;
			font-size: calc(100vw * 17 / 1920);
			font-family: "normal";
		}
	}

	.loginFrom {
		width: 22%;
		height: 35%;
		position: relative;
		top: 33%;
		left: 68%;
		background: url("@/assets/images/login/loginFormImg.png") no-repeat;
		background-size: 100% 100%;

		.inutFrom {
			width: 80%;
			height: 68%;
			position: absolute;
			top: 18%;
			left: 10%;
			color: #fff;

			.passwordBox {
				font-family: SourceHanSansCN-Regular;
				color: #fff;
				font-size: calc(100vw * 14 / 1920);
				margin-top: -4%;
			}
		}

		.loginBtn {
			width: 100%;
			height: 45%;
			color: #eeeeee;
			font-family: SourceHanSansCN-Regular;
			font-size: calc(100vw * 20 / 1920);
			border: none !important;
			border-radius: 0 !important;
			background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%);
			margin-top: 2%;
		}
	}
}

::v-deep .el-input__wrapper {
	background: #2758c0;
	background: rgba(39, 88, 192, 0.4);
	box-shadow: none;
	border: 1px solid #2758c0;
	border-radius: 0 !important;
}

::v-deep .el-input__inner {
	color: #fff;
	font-size: calc(100vw * 16 / 1920);
	font-family: SourceHanSansCN-Regular;
}

::v-deep .el-input {
	height: 110%;
}

::v-deep .el-input__prefix {
	width: 10%;
	border-right: 1px solid #2758c0;
	margin-right: 5%;
}

::v-deep .el-input .el-input__icon {
	color: #3676ff;
}

::v-deep .el-input .el-input__icon:hover {
	color: #3676ff;
}

::v-deep .el-checkbox__inner {
	border-color: #2758c0;
	background: #2758c0;
	background: rgba(39, 88, 192, 0.4);
}

::v-deep .el-input__inner:-webkit-autofill {
	transition: background-color 50000s ease-in-out 0s;
	-webkit-text-fill-color: #fff; //记住密码的颜色
	caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
}

//鼠标聚焦修改图标颜色
::v-deep .el-input__inner:focus {
	.el-input__prefix-inner {
		img {
		}
	}
}
</style>