vueadmin/src/layouts/other/empty.vue

<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>