优化导航栏

admin/src/router.js

@@ -39,6 +39,7 @@ const router = createRouter({
           path: 'firstpage',
           name: 'FirstPage',
           component: () => import('./view/user/firstpage.vue'),
+		  redirect: { name: 'FirstPage1' },
           children: [
             {
               path: '1',

admin/src/view/user/firstpage.vue

@@ -1,5 +1,6 @@
 <template>
   <el-container style="height: 1600px;">
+	 
     <el-main style="height: 500px;">
       <div>
         <el-carousel indicator-position="none" height="450px" autoplay>

admin/src/view/user/index.vue

@@ -1,11 +1,40 @@
 <template>
   <div class="common-layout">
-		<!-- <el-container>
+    <el-container>
       <el-header>
-        <el-menu class="el-menu-demo" mode="horizontal">
+        <el-row type="flex" justify="space-between" align="middle">
-          <el-menu-item index="1">欢迎您：135******111 管理员</el-menu-item>
+          <!-- 菜单部分 -->
+          <el-col :span="18">
+            <el-menu
+              :default-active="activeIndex2"
+              class="el-menu-demo"
+              mode="horizontal"
+              @select="handleSelect"
+              background-color="#545c64"
+              text-color="#fff"
+              active-text-color="#ffd04b"
+            >
+              <el-menu-item index="1">处理中心</el-menu-item>
+              <el-submenu index="2">
+                <el-submenu index="2-4">
+                  <template #title>信息</template>
+                  <el-menu-item index="2-4-1">选项1</el-menu-item>
+                  <el-menu-item index="2-4-2">选项2</el-menu-item>
+                  <el-menu-item index="2-4-3">选项3</el-menu-item>
+                </el-submenu>
+              </el-submenu>
+              <el-menu-item index="3" disabled>消息中心</el-menu-item>
+              <el-menu-item index="4">管理</el-menu-item>
             </el-menu>
-      </el-header> -->
+          </el-col>
+
+          <!-- 头像部分：放在右侧 -->
+          <el-col :span="3" class="header-avatar">
+            <img src="/public/adminHead.jpg" alt="头像" class="avatar" />
+          </el-col>
+        </el-row>
+      </el-header>
+
       <el-container>
         <el-aside width="200px" class="el-aside">
           <el-row class="tac">
@@ -29,17 +58,17 @@
                 </el-sub-menu>
 
                 <el-sub-menu index="2">
-								<template #title><el-icon></el-icon>
+                  <template #title>
-									<span style="color: #cdd1d3;">
+                    <el-icon></el-icon>
-										首页和通知
+                    <span style="color: #cdd1d3;">首页和通知</span>
-									</span></template>
+                  </template>
                   <router-link to='/admin/firstpage'>
                     <el-menu-item index="2-1">首页</el-menu-item>
                   </router-link>
                   <el-sub-menu index="2-2">
-									<template #title><span style="color: #cdd1d3;">
+                    <template #title>
-											通知
+                      <span style="color: #cdd1d3;">通知</span>
-										</span></template>
+                    </template>
                     <router-link to='/admin/notice'>
                       <el-menu-item index="2-2-1">通知管理</el-menu-item>
                     </router-link>
@@ -61,7 +90,6 @@
                     <span>用户反馈与建议</span>
                   </el-menu-item>
                 </router-link>
-
               </el-menu>
             </el-col>
           </el-row>
@@ -70,10 +98,23 @@
           <router-view></router-view>
         </el-main>
       </el-container>
-		<!-- </el-container> -->
+    </el-container>
   </div>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+
+// 组合式 API 语法糖
+const activeIndex2 = ref('1')  // 当前选中的菜单项
+
+// 处理选择菜单项的函数
+const handleSelect = (index) => {
+  console.log('选中的菜单项是:', index)
+  activeIndex2.value = index
+}
+</script>
+
 <style>
   .common-layout {
     position: absolute;
@@ -92,16 +133,27 @@
   .el-footer {
     background-color: #47484c;
     color: #fff;
-		/* 确保文本颜色为白色 */
     text-align: center;
     line-height: 60px;
   }
 
+  .header-avatar {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 20px;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
   .el-aside {
     background-color: #2d2e36;
-		/* 设置侧边栏背景颜色为黑色 */
     color: #fff;
-		/* 文本颜色为白色 */
     text-align: center;
   }
 
@@ -112,30 +164,22 @@
     background-color: #cdd1d3;
   }
 
-	body>.el-container {
-		height: 100%;
-	}
-
-	.user {
-		height: 58px;
-	}
-
-	.el-menu--horizontal>.el-menu-item:nth-child(3) {
-		margin-right: auto;
-	}
-
   .el-menu {
     background-color: #2d2e36;
-
   }
 
   .el-menu-item {
     color: #cdd1d3;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  .el-menu-item:hover {
+    background-color: #fba414;
+    color: #fff;
   }
 
-/* #fba414 */
+  .el-menu-item[disabled] {
-	.user-info {
+    color: #6c757d;
-		margin-top: 10px;
+    pointer-events: none;
-		/* 添加一些顶部边距，视觉上与其它菜单项分隔开 */
   }
 </style>