You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
1.8 KiB
105 lines
1.8 KiB
<script setup>
|
|
import image_403 from "@/assets/403.png"
|
|
</script>
|
|
|
|
<template>
|
|
<div class="error-page">
|
|
<!-- 背景装饰元素 -->
|
|
<div class="bg-decoration"></div>
|
|
|
|
<el-row class="error-container">
|
|
<el-col :span="24" class="error-content">
|
|
<!-- 错误图标/图片区域 -->
|
|
<div class="error-img">
|
|
<img :src="image_403" alt="无权限访问" class="error-image">
|
|
|
|
</div>
|
|
|
|
<!-- 文本信息区域 -->
|
|
<div class="error-message">
|
|
<h2>暂无权限</h2>
|
|
<p>您当前的账号没有访问该页面的权限，请联系管理员添加权限</p>
|
|
</div>
|
|
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.error-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* 背景装饰 */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.error-container {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.error-content {
|
|
max-width: 800px;
|
|
width: 100%;
|
|
text-align: center;
|
|
animation: fadeIn 0.8s ease-out;
|
|
}
|
|
|
|
/* 错误图片区域 */
|
|
.error-img {
|
|
position: relative;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.error-image {
|
|
max-width: 280px;
|
|
width: 100%;
|
|
height: auto;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.error-image:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
|
|
/* 文本信息区域 */
|
|
.error-message {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.error-message h2 {
|
|
font-size: 2.2rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.error-message p {
|
|
font-size: 1.1rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 操作按钮区域 */
|
|
.error-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
</style>
|