From 9dc930acceb32e6ef214aa844480f8953df3bf62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E5=B0=8F=E9=A9=AC?= <heixiaoma@gmail.com>
Date: Wed, 23 Jul 2025 17:46:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/components/layout.vue | 119 ++++++++++++++++++++--------
 1 file changed, 87 insertions(+), 32 deletions(-)

diff --git a/web/src/views/components/layout.vue b/web/src/views/components/layout.vue
index c7fe72d..b98df7b 100644
--- a/web/src/views/components/layout.vue
+++ b/web/src/views/components/layout.vue
@@ -4,15 +4,28 @@
     <header class="bg-primary text-white shadow-md h-16 flex items-center justify-between px-6">
       <!-- 左侧Logo和菜单按钮 -->
       <div class="flex items-center">
-        <button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none">
-          <el-icon><Fold /></el-icon>
-        </button>
-        <div class="flex items-center">
-          <el-icon><Platform /></el-icon>
-          <span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span>
+        <div class="flex">
+          <button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none">
+            <el-icon><Fold /></el-icon>
+          </button>
+          <div class="flex items-center">
+            <el-icon><Platform /></el-icon>
+            <span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span>
+          </div>
+        </div>
+        <div class="top-header">
+          <el-menu
+              mode="horizontal"
+              :ellipsis="false"
+          >
+            <el-menu-item index="1">新闻中心</el-menu-item>
+            <el-menu-item index="2">公告</el-menu-item>
+          </el-menu>
         </div>
       </div>
 
+
+
       <!-- 右侧用户信息 -->
       <div class="flex items-center">
         <div class="relative mr-6">
@@ -50,32 +63,32 @@
             <el-icon><IconMenu /></el-icon>
             <template #title>应用中心</template>
           </el-menu-item>
-          <el-sub-menu index="2">
-            <template #title>
-              <el-icon><Location /></el-icon>
-              <span>导航一</span>
-            </template>
-            <el-menu-item-group>
-              <template #title><span>分组一</span></template>
-              <el-menu-item index="1-1">菜单项一</el-menu-item>
-              <el-menu-item index="1-2">菜单项二</el-menu-item>
-            </el-menu-item-group>
-            <el-menu-item-group title="分组二">
-              <el-menu-item index="1-3">菜单项三</el-menu-item>
-            </el-menu-item-group>
-            <el-sub-menu index="1-4">
-              <template #title><span>菜单项四</span></template>
-              <el-menu-item index="1-4-1">子菜单项一</el-menu-item>
-            </el-sub-menu>
-          </el-sub-menu>
-          <el-menu-item index="3" disabled>
-            <el-icon><Document /></el-icon>
-            <template #title>导航三</template>
-          </el-menu-item>
-          <el-menu-item index="4">
-            <el-icon><Setting /></el-icon>
-            <template #title>导航四</template>
-          </el-menu-item>
+<!--          <el-sub-menu index="2">-->
+<!--            <template #title>-->
+<!--              <el-icon><Location /></el-icon>-->
+<!--              <span>导航一</span>-->
+<!--            </template>-->
+<!--            <el-menu-item-group>-->
+<!--              <template #title><span>分组一</span></template>-->
+<!--              <el-menu-item index="1-1">菜单项一</el-menu-item>-->
+<!--              <el-menu-item index="1-2">菜单项二</el-menu-item>-->
+<!--            </el-menu-item-group>-->
+<!--            <el-menu-item-group title="分组二">-->
+<!--              <el-menu-item index="1-3">菜单项三</el-menu-item>-->
+<!--            </el-menu-item-group>-->
+<!--            <el-sub-menu index="1-4">-->
+<!--              <template #title><span>菜单项四</span></template>-->
+<!--              <el-menu-item index="1-4-1">子菜单项一</el-menu-item>-->
+<!--            </el-sub-menu>-->
+<!--          </el-sub-menu>-->
+<!--          <el-menu-item index="3" disabled>-->
+<!--            <el-icon><Document /></el-icon>-->
+<!--            <template #title>导航三</template>-->
+<!--          </el-menu-item>-->
+<!--          <el-menu-item index="4">-->
+<!--            <el-icon><Setting /></el-icon>-->
+<!--            <template #title>导航四</template>-->
+<!--          </el-menu-item>-->
         </el-menu>
       </aside>
 
@@ -117,4 +130,46 @@ const handleClose = (key: string, keyPath: string[]) => {
   width: 200px;
   min-height: 400px;
 }
+
+
+
+.top-header{
+  border:none;
+  :deep(.el-menu-item){
+    background-color: #085ce6;
+    color: #fff !important;
+    border: none !important;
+  }
+  :deep(.el-menu-item):hover{
+    color: #ffffff !important;
+    background-color: #206ce8 !important;
+    border: none !important;
+
+
+  }
+  :deep(.el-menu-item):active{
+  color: #ffffff !important;
+    background-color: #085ce6 !important;
+    border: none !important;
+
+
+  }
+
+  :deep(.el-menu-item):focus{
+    color: #ffffff !important;
+    background-color: #206ce8 !important;
+    border: none !important;
+  }
+
+
+
+  margin-left: 20px;
+}
+:deep(.el-menu--horizontal.el-menu ){
+  border-bottom: none !important;
+}
+
+:deep(.el-menu) {
+  background-color: transparent !important;
+}
 </style>
\ No newline at end of file