更新，登录页功能完善

src/layouts/other/empty.vue

@@ -0,0 +1,211 @@
+<template>
+<div class="empty-container">
+	<div class="tech-decoration">
+		<div class="tech-circle"></div>
+		<div class="tech-circle"></div>
+		<div class="tech-circle"></div>
+	</div>
+
+	<div class="empty-content">
+		<div class="empty-icon">
+			<el-icon :size="120" color="#ff6b35">
+				<Box />
+			</el-icon>
+		</div>
+
+		<div class="empty-title">暂无数据</div>
+		<div class="empty-description">
+			{{ description || '当前页面暂无数据，请稍后再试' }}
+		</div>
+
+		<el-button v-if="showButton" type="primary" size="large" @click="handleAction">
+			<el-icon v-if="buttonIcon">
+				<component :is="buttonIcon" />
+			</el-icon>
+			{{ buttonText || '刷新页面' }}
+		</el-button>
+	</div>
+</div>
+</template>
+
+<script setup>
+import { Box } from '@element-plus/icons-vue'
+import '@/assets/style/auth.scss'
+
+defineProps({
+	description: {
+		type: String,
+		default: '当前页面暂无数据，请稍后再试'
+	},
+	showButton: {
+		type: Boolean,
+		default: true
+	},
+	buttonText: {
+		type: String,
+		default: '刷新页面'
+	},
+	buttonIcon: {
+		type: [String, Object],
+		default: null
+	}
+})
+
+const emit = defineEmits(['action'])
+
+const handleAction = () => {
+	emit('action')
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/style/auth.scss';
+
+.empty-container {
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+	position: relative;
+	overflow: hidden;
+
+	.tech-decoration {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+		overflow: hidden;
+
+		.tech-circle {
+			position: absolute;
+			border: 2px solid rgba(255, 107, 53, 0.1);
+			border-radius: 50%;
+			animation: pulse 4s ease-in-out infinite;
+		}
+
+		.tech-circle:nth-child(1) {
+			width: 300px;
+			height: 300px;
+			top: -150px;
+			left: -150px;
+			animation-delay: 0s;
+		}
+
+		.tech-circle:nth-child(2) {
+			width: 200px;
+			height: 200px;
+			bottom: -100px;
+			right: -100px;
+			animation-delay: 1s;
+		}
+
+		.tech-circle:nth-child(3) {
+			width: 150px;
+			height: 150px;
+			bottom: 20%;
+			left: -75px;
+			animation-delay: 2s;
+		}
+	}
+}
+
+@keyframes pulse {
+
+	0%,
+	100% {
+		opacity: 0.3;
+		transform: scale(1);
+	}
+
+	50% {
+		opacity: 0.6;
+		transform: scale(1.05);
+	}
+}
+
+.empty-content {
+	text-align: center;
+	padding: 40px;
+	position: relative;
+	z-index: 1;
+
+	.empty-icon {
+		margin-bottom: 32px;
+		animation: float 3s ease-in-out infinite;
+	}
+
+	@keyframes float {
+
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+
+		50% {
+			transform: translateY(-10px);
+		}
+	}
+
+	.empty-title {
+		font-size: 28px;
+		font-weight: 600;
+		color: var(--text-primary);
+		margin-bottom: 16px;
+	}
+
+	.empty-description {
+		font-size: 16px;
+		color: var(--text-secondary);
+		margin-bottom: 40px;
+		line-height: 1.6;
+		max-width: 400px;
+	}
+
+	.el-button {
+		--el-button-border-radius: 12px;
+		height: 48px;
+		padding: 0 40px;
+		font-size: 16px;
+		font-weight: 600;
+		background: linear-gradient(135deg, var(--auth-primary), var(--auth-primary-dark));
+		border: none;
+		box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35);
+		transition: all 0.3s ease;
+
+		&:hover {
+			background: linear-gradient(135deg, var(--auth-primary-light), var(--auth-primary));
+			transform: translateY(-2px);
+			box-shadow: 0 12px 32px rgba(255, 107, 53, 0.45);
+		}
+	}
+}
+
+// Responsive design
+@media (max-width: 768px) {
+	.empty-content {
+		padding: 20px;
+
+		.empty-icon {
+			:deep(.el-icon) {
+				font-size: 80px;
+			}
+		}
+
+		.empty-title {
+			font-size: 24px;
+		}
+
+		.empty-description {
+			font-size: 14px;
+		}
+
+		.el-button {
+			width: 100%;
+			max-width: 200px;
+		}
+	}
+}
+</style>