feat(noPermissionPage): 优化无权限页面

src/views/noPermissionPage.vue

@@ -1,24 +1,105 @@
 <script setup>
-import { ref, onMounted, reactive, computed, nextTick } from "vue";
-
-const image = "../src/assets/hqz大拇指.png";
-
+import image_403 from "@/assets/403.png"
 </script>
 
 <template>
-    <el-row>
-        <el-col>
-            <div>
-                <p style="font-size: 50px; font-weight: bold; text-align: center;">
-                    暂无权限
-                </p>
-                <p style="font-size: 60px; font-weight: bold; text-align: center;">
-                    请联系管理员添加权限！！！
-                </p>
-            </div>
-        </el-col>
-    </el-row>
+  <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></style>
+<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>