ai_images/portal-ui/src/layout/components/Login.vue

<template>
	<div>
		<mf-dialog
			:visible="visible"
			modal-class="login-dialog"
			class="login-dialog-wrapper"
			hideTitle
			:footer="false"
			unmountOnClose
			@cancel="cancel"
			width="500px">
			<div class="login-close">
				<mf-icon
					value="icon-close"
					@click="cancel" />
			</div>
			<div class="login-title">
				{{ $t('common.loginAccount') }}
				<!-- <div class="login-title-lang">
					<div
						:class="`login-title-lang-item ${
							lang == 'zh_HK' ? 'active' : ''
						}`"
						@click="changeLang('zh_HK')">
						繁中
					</div>
					<div class="login-title-lang-divider"></div>
					<div
						:class="`login-title-lang-item ${
							lang == 'en_US' ? 'active' : ''
						}`"
						@click="changeLang('en_US')">
						English
					</div>
				</div> -->
			</div>
			<mf-input
				v-model="username"
				class="login-input"
				:placeholder="`${$t('common.userEmailPlaceholder')}`" />
			<mf-input
				v-model="password"
				class="login-input"
				inputType="password"
				:placeholder="`${$t('common.passwordPlaceholder')}`" />

			<div class="login-submit">
				<mf-button
					size="large"
					type="primary"
					@click="login"
					:loading="loading">
					{{ $t('common.login') }}
				</mf-button>
			</div>
		</mf-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import i18n from '@/lang/i18n'

export default {
	data() {
		return {
			email: '',
			emailVisible: false,
			loading: false,
			username: '',
			password: ''
		}
	},
	props: {
		visible: Boolean
	},
	components: {},
	computed: {
		...mapGetters(['lang'])
	},
	mounted() {
		// let loginInfo = this.$auth.getLogin()
		// if (loginInfo) {
		// 	loginInfo = JSON.parse(loginInfo)
		// 	this.username = loginInfo.username
		// 	this.password = loginInfo.password
		// }
		this.username = ""
		this.password = ""
	},
	methods: {
		cancel() {
			this.username = ''
			this.password = ''
			this.$emit('cancel')
		},
		changeLang(value) {
			if (value != this.lang) {
				this.$store.dispatch('main/setLanguage', value)
				i18n.global.locale = value
			}
		},
		login() {
			if (!this.username) {
				this.$message.error(this.$t('common.userEmailPlaceholder'))
				return
			}
			if (!this.password) {
				this.$message.error(this.$t('common.passwordPlaceholder'))
				return
			}
			this.loading = true
			this.$axios({
				url: 'api/user/login',
				method: 'POST',
				data: {
					username: this.username,
					password: this.password
				}
			})
				.then((res) => {
					if (res.code == 200) {
						this.$store.dispatch('user/login', res).then((_) => {
							this.loading = false
							this.$message.success(
								this.$t('common.loginSuccessfully')
							)
							this.$store.dispatch('user/setLoginInfo', {
								username: this.username,
								password: this.password
							})
							this.username = ""
							this.password = ""
							this.$router.replace({ name: 'video-gen' })
							this.$emit('cancel')
						})
					} else {
						this.loading = false
					}
				})
				.catch((_) => {
					this.loading = false
				})
		}
	}
}
</script>

<style lang="less">
.login-dialog {
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(
		0deg,
		rgba(39, 20, 51, 0.7) 0%,
		rgba(230, 33, 122, 0.7) 49%
	);
	border-radius: 20px;
	border: 2px solid #e6217a;
	width: 500px;
	height: 320px;
	top: 45% !important;
	transform: translateY(-45%) !important;

	&-wrapper {
		.arco-modal-mask {
			/* 背景高斯模糊关键属性 */
			backdrop-filter: blur(10px);
			background-color: rgba(0, 0, 0, 0.7);
		}
	}

	.arco-modal-body {
		padding: 24px 30px 30px 30px;
	}

	.login-close {
		position: absolute;
		right: 12px;
		top: 6px;
		cursor: pointer;
		color: #fff;

		.mf-icon {
			font-size: 14px;
		}
	}

	.login-title {
		font-size: 20px;
		color: #ffffff;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-lang {
			display: flex;
			align-items: center;
			height: 24px;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 5px;

			&-divider {
				height: 8px;
				width: 1px;
				background-color: rgba(#fff, 0.2);
			}

			&-item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 16px;
				font-size: 12px;
				color: rgba(#ffffff, 0.3);
				cursor: pointer;

				&.active {
					color: #fff;
				}
			}
		}
	}

	.login-input {
		display: flex;
		align-items: center;
		border-radius: 10px;
		justify-content: center;
		border-radius: 10px;
		border: 1px solid rgba(#ffffff, 0.3);
		height: 40px;
		margin-top: 20px;
		padding: 0 16px;
		font-size: 14px;
		color: #ffffff;
		position: relative;
		cursor: pointer;
		background-color: transparent !important;
		cursor: text;
		font-size: 14px;

		::placeholder {
			color: rgba(#fff, 0.5);
		}

		&.arco-input-wrapper:focus-within {
			background-color: transparent;
		}

		&:hover {
			background-color: transparent;
			border-color: #fff;
		}

		.arco-image {
			position: absolute;
			left: 16px;
			&-img {
				width: 100%;
				height: 100%;
				vertical-align: unset;
			}
		}
	}

	.login-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
		.mf-button {
			width: 220px;
			border-radius: 10px;
		}
	}
}

@media (max-width: 576px) {
	.login-dialog {
		width: calc(100% - 16px) !important;
	}
}
</style>