aizuda-web-vue3/src/views/login/index.vue

<template>
	<div class="login-container">
		<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
			<div class="title-container">
				<h3 class="title">{{ $t('login.title') }}</h3>
				<lang-select class="set-language" />
			</div>

			<el-form-item prop="username">
				<span class="svg-container">
					<svg-icon icon-class="user" />
				</span>
				<el-input
					ref="username"
					v-model="loginForm.username"
					:placeholder="$t('login.username')"
					name="username"
					type="text"
					tabindex="1"
					auto-complete="on"
				/>
			</el-form-item>

			<el-form-item prop="password">
				<span class="svg-container">
					<svg-icon icon-class="password" />
				</span>
				<el-input
					ref="passwordRef"
					:key="passwordType"
					v-model="loginForm.password"
					:type="passwordType"
					:placeholder="$t('login.password')"
					name="password"
					tabindex="2"
					auto-complete="on"
					@keyup.enter="handleLogin"
				/>
				<span class="show-pwd" @click="showPwd">
					<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
				</span>
			</el-form-item>

			<el-button size="default" :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.prevent="handleLogin"
				>{{ $t('login.login') }}
			</el-button>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watch, nextTick } from 'vue'

// 组件依赖
import LangSelect from '@/components/LangSelect/index.vue'

// 状态管理依赖
import useStore from '@/store'
// API依赖
// import { getGeetConfig } from '@/api/login'
import { useRoute } from 'vue-router'

const { user } = useStore()
const route = useRoute()

const loginFormRef = ref(/*ElForm*/)
const passwordRef = ref(/*ElInput*/)

const state = reactive({
	loginForm: {
		username: 'admin',
		password: '100607'
	},
	loginRules: {
		username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
		password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
	},
	loading: false,
	passwordType: 'password'
})

const { loginForm, loginRules, loading, passwordType } = toRefs(state)

function showPwd() {
	if (state.passwordType === 'password') {
		state.passwordType = ''
	} else {
		state.passwordType = 'password'
	}
	nextTick(() => {
		passwordRef.value.focus()
	})
}

function handleLogin() {
	loginFormRef.value.validate((valid: boolean) => {
		if (valid) {
			state.loading = true
			user.login(state.loginForm).finally(() => {
				state.loading = false
			})
		}
	})
}

watch(
	route,
	() => {
		const query = route.query
		user.$patch({
			loginQuery: query
		})
	},
	{
		immediate: true
	}
)
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

/* reset element-plus css */
.login-container {
	.title-container {
		position: relative;

		.title {
			font-size: 26px;
			color: $light_gray;
			margin: 0px auto 40px auto;
			text-align: center;
			font-weight: bold;
		}

		.set-language {
			color: #fff;
			position: absolute;
			top: 3px;
			font-size: 18px;
			right: 0px;
			cursor: pointer;
		}
	}

	//.localFormItem {
	//}
	//.el-form-item.localFormItem {
	.el-form-item:nth-child(2),
	.el-form-item:nth-child(3) {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		color: #454545;
		.el-input {
			display: inline-block;
			height: 47px;
			width: 85%;
			.el-input__wrapper {
				padding: 0;
				background: transparent;
				box-shadow: none;
				.el-input__inner {
					background: transparent;
					border: 0px;
					-webkit-appearance: none;
					border-radius: 0px;
					padding: 12px 5px 12px 15px;
					color: $light_gray;
					height: 47px;
					caret-color: $cursor;

					&:-webkit-autofill {
						box-shadow: 0 0 0px 1000px $bg inset !important;
						-webkit-text-fill-color: $cursor !important;
					}
				}
			}
		}
		.el-input__inner {
			&:hover {
				border-color: var(--el-input-hover-border, var(--el-border-color-hover));
				box-shadow: none;
			}

			box-shadow: none;
		}
	}
	.gt_float {
		padding: 8px 0;
	}
	.copyright {
		width: 100%;
		position: absolute;
		bottom: 0;
		font-size: 12px;
		text-align: center;
		color: #cccccc;
	}
}
//// 极验证样式
//#captcha .gt_holder {
//  &.gt_float {
//    width: 100%;
//  }
//  .gt_slider {
//    //width: 100%;
//    width: calc(100% - 42px);
//  }
//  .gt_guide_tip {
//    width: calc(100% - 42px);
//  }
//}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
	min-height: 100%;
	width: 100%;
	background-color: $bg;
	overflow: hidden;
	.login-form {
		position: relative;
		//width: 520px;
		width: 374px;
		max-width: 100%;
		padding: 160px 35px 0;
		margin: 0 auto;
		overflow: hidden;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;

		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}

	.svg-container {
		padding: 6px 5px 6px 15px;
		color: $dark_gray;
		vertical-align: middle;
		width: 30px;
		display: inline-block;
	}

	.title-container {
		position: relative;

		.title {
			font-size: 26px;
			color: $light_gray;
			margin: 0px auto 40px auto;
			text-align: center;
			font-weight: bold;
		}
	}

	.show-pwd {
		position: absolute;
		right: 10px;
		top: 12px;
		font-size: 16px;
		color: $dark_gray;
		cursor: pointer;
		user-select: none;
	}
}
</style>