优化侧边栏，和顶部导航栏

doc/h5/src/components/Header.vue

@@ -7,17 +7,26 @@
       <img src="@/static/imgs/logo.png" class="w-130 h-26 mb-2 cursor-pointer" alt="Logo" @click="router.push('/')">
     </div>
     <div class="flex gap-26">
-      <el-input
-          v-model="search"
-          class="responsive-input"
-          placeholder="搜索产品和文档"
-          :prefix-icon="Search"
-        />
+      <el-input v-model="searchVal" class="responsive-input" placeholder="搜索产品和文档" :prefix-icon="Search" />
+
+      <el-popover placement="bottom" :width="180" trigger="click" :show-arrow="false">
+        <template #reference>
           <el-button type="primary" class="nav-button">
             <span class="pt-2">企业</span><el-icon class="el-icon--right" size="12">
               <ArrowDownBold />
             </el-icon>
           </el-button>
+        </template>
+        <div class="">
+          <div v-for="(item, index) in poverMenus" :key="index" class=" py-6 cursor-pointer mt-4 menuhover" @click="router.push(item.path)">{{ item.name }}</div>
+        </div>
+      </el-popover>
+
+      <!-- <el-button type="primary" class="nav-button">
+        <span class="pt-2">企业</span><el-icon class="el-icon--right" size="12">
+          <ArrowDownBold />
+        </el-icon>
+      </el-button> -->
       <el-button type="primary" class="nav-button">
         <span class="pt-2">工具</span><el-icon class="el-icon--right" size="12">
           <ArrowDownBold />
@@ -36,7 +45,9 @@
       <el-button type="primary" class="nav-button pt-2">备案</el-button>
       <el-button type="primary" class="nav-button pt-2">文档</el-button>
       <el-badge :value="12" class="mt-6 cursor-pointer">
-        <el-icon size="18"><Bell /></el-icon>
+        <el-icon size="18">
+          <Bell />
+        </el-icon>
       </el-badge>
       <el-button type="primary" link class="nav-button fw-bold color">中文</el-button>
       <div class="w-30 h-30 flex-center rounded-circle headimg fs-12 mt-2">黄</div>
@@ -51,7 +62,34 @@ import { ArrowDownBold, Bell, Search } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
-const search = ref('');
+const searchVal = ref('');
+const poverMenus = ref([
+  {
+    name: '企业组织',
+    path: '',
+    value: 1
+  },
+  {
+    name: '云身份中心',
+    path: '',
+    value: 2
+  },
+  {
+    name: '访问控制',
+    path: '',
+    value: 3
+  },
+  {
+    name: '资源管理',
+    path: '',
+    value: 4
+  },
+  {
+    name: '操作审计（云审计）',
+    path: '',
+    value: 5
+  }
+])
 </script>
 
 <style scoped lang="scss">
@@ -59,17 +97,20 @@ const search = ref('');
   box-shadow: 0 3px 5px #eee;
   z-index: 1;
 }
+
 .responsive-input {
   width: 240px;
   height: 36px;
   border-radius: 8px !important;
   border: 1px solid #E5E7EB;
   overflow: hidden;
+
   :deep(.el-input__wrapper) {
     box-shadow: none !important;
     background-color: #F9FAFB;
   }
 }
+
 .headimg {
   background-color: #EFF6FF;
   border: 1px solid #DBEAFE;
@@ -90,6 +131,7 @@ const search = ref('');
 .pt-2 {
   padding-top: 2px;
 }
+
 .color {
   color: #155DFC;
 }
@@ -102,4 +144,17 @@ const search = ref('');
 .active {
   color: #409eff;
 }
+.menuhover {
+  &:hover {
+    background-color: #F0F2F5;
+    border-radius: 4px;
+  }
+}
+</style>
+<style lang="scss">
+.el-popover {
+  &.el-popper {
+    padding: 4px 10px !important;
+  }
+}
 </style>