diff --git a/src/assets/layouts/tabs-bgp.png b/src/assets/layouts/tabs-bgp.png
new file mode 100644
index 0000000..9cabaa7
Binary files /dev/null and b/src/assets/layouts/tabs-bgp.png differ
diff --git a/src/layouts/components/tabs.vue b/src/layouts/components/tabs.vue
index 7118987..fc4d0f3 100644
--- a/src/layouts/components/tabs.vue
+++ b/src/layouts/components/tabs.vue
@@ -1,20 +1,112 @@
 <template>
-    <div class="layout-tabs"></div>
+    <div class="layout-tabs">
+        <el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane v-for="(item, index) in tabs" :key="index" :name="item.name">
+                <template #label>
+                    <XIcon :name="item.meta.icon" />
+                    <span>{{ item.meta.title }}</span>
+                </template>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="operation">
+            <el-dropdown trigger="hover">
+                <span class="el-dropdown-link">
+                    <XIcon name="apps-fill" />
+                </span>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item>关闭全部</el-dropdown-item>
+                        <el-dropdown-item>关闭其他</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+    </div>
 </template>
 
-<script setup></script>
+<script setup>
+    const activeTab = ref('home');
+    const tabs = computed(() => [
+        { path: '/', name: 'home', meta: { title: '首页', icon: 'home-fill' } },
+        { path: '/', name: 'route1', meta: { title: '菜单1', icon: 'home-fill' } },
+        { path: '/', name: 'route2', meta: { title: '菜单2', icon: 'home-fill' } },
+        { path: '/', name: 'route3', meta: { title: '菜单3', icon: 'home-fill' } },
+        { path: '/', name: 'route4', meta: { title: '菜单4', icon: 'home-fill' } },
+        { path: '/', name: 'route5', meta: { title: '菜单5', icon: 'home-fill' } },
+    ]);
+</script>
 
 <style lang="less" scoped>
     .layout-tabs {
         width: 100%;
         height: @layout-tabs-height;
-        border-top: 1px solid @color-ghost-white;
+        padding: 0 @layout-space-large;
         display: flex;
-        flex-wrap: wrap;
-        align-items: center;
+        align-items: flex-end;
         justify-content: space-between;
-        box-shadow: @layout-shadow;
+        overflow: hidden;
+        box-shadow: fade(@layout-header-fc, 15%) 0 1px 5px;
         background-color: @layout-header-bgc;
         color: @layout-header-fc;
+        .el-tabs {
+            height: 80%;
+            width: 100%;
+            flex-shrink: 1;
+            overflow: hidden;
+            :deep(.el-tabs__header) {
+                margin: 0;
+                height: 100%;
+                .el-tabs__nav-wrap {
+                    height: 100%;
+                    margin-bottom: 0;
+                    > * {
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                    }
+                    .el-tabs__nav-scroll {
+                        .el-tabs__nav {
+                            height: 100%;
+                            border: none;
+                            padding: 0 @layout-space-large;
+                            .el-tabs__item {
+                                height: 100%;
+                                min-width: 100px;
+                                margin-right: -8px;
+                                display: inline-flex;
+                                align-items: center;
+                                justify-content: center;
+                                border: none;
+                                border-top-left-radius: 10px;
+                                border-top-right-radius: 10px;
+                                mask-image: url('~/layouts/tabs-bgp.png');
+                                -webkit-mask-image: url('~/layouts/tabs-bgp.png');
+                                mask-size: 100% 100%;
+                                -webkit-mask-size: 100% 100%;
+                                &:hover {
+                                    background-color: @color-white-dark;
+                                }
+                                &.is-active {
+                                    background-color: @color-primary-white;
+                                }
+                                .x-icon {
+                                    margin-right: @layout-space-small;
+                                    margin-top: 1px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .operation {
+            height: 80%;
+            margin-left: @layout-space;
+            display: flex;
+            align-items: center;
+            &:hover {
+                transform: rotate(90deg);
+            }
+        }
     }
 </style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 7c0ddfe..05a7acc 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -43,6 +43,7 @@
             flex: 1;
             display: flex;
             flex-direction: column;
+            overflow: hidden;
         }
     }
 </style>
diff --git a/src/router/route.json b/src/router/route.json
index a53ddbd..4a27ebf 100644
--- a/src/router/route.json
+++ b/src/router/route.json
@@ -8,12 +8,12 @@
             "__file": "src/vab/layouts/index.vue",
             "__hmrId": "b1897f6a"
         },
-        "meta": { "title": "首页", "icon": "home-line", "noColumn": true, "menu": "/", "activeMenu": "/" },
+        "meta": { "title": "首页", "icon": "home-fill", "noColumn": true, "menu": "/", "activeMenu": "/" },
         "children": [
             {
                 "path": "/dashboard",
                 "name": "Dashboard",
-                "meta": { "title": "首页", "icon": "home-line", "menu": "/dashboard", "activeMenu": "/dashboard" },
+                "meta": { "title": "首页", "icon": "home-fill", "menu": "/dashboard", "activeMenu": "/dashboard" },
                 "childrenNameList": ["Dashboard"]
             }
         ],
@@ -29,7 +29,7 @@
             "__file": "src/vab/layouts/index.vue",
             "__hmrId": "b1897f6a"
         },
-        "meta": { "title": "组件示例", "icon": "test-tube-line", "menu": "/demo", "activeMenu": "/demo" },
+        "meta": { "title": "组件示例", "icon": "table-fill", "menu": "/demo", "activeMenu": "/demo" },
         "children": [
             {
                 "path": "/demo/icon",