新主题

src/layout/index.scss

@@ -300,6 +300,12 @@
     .el-scrollbar__view {
         height: 100%;
     }
+    .hc-router-tab-box {
+        position: relative;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+    }
     .hc-router-tab-item {
         position: relative;
         height: 100%;

src/layout/modules/RouterMenu.vue

@@ -1,17 +1,19 @@
 <template>
     <el-scrollbar>
-        <div class="hc-router-tab-item" :class="(barRoutes.key === 'home' || barRoutes.key === 'home-index') ? 'cur' : ''" @click="toHomeClick">首页</div>
-        <template v-for="(item, index) in barMenuData" :key="item.key">
-            <div
-                :class="item.key === barRoutes.key ? 'cur' : ''" class="hc-router-tab-item"
-                @click="barMenuClick(item)" @contextmenu.prevent="barMenuContextMenu($event, item, index)"
-            >
-                <span>{{ item.title }}</span>
-                <div class="close-icon" @click.stop="barMenuCloseClick(item, index)">
-                    <HcIcon name="close" />
+        <div class="hc-router-tab-box">
+            <div class="hc-router-tab-item" :class="(barRoutes.key === 'home' || barRoutes.key === 'home-index') ? 'cur' : ''" @click="toHomeClick">首页</div>
+            <template v-for="(item, index) in barMenuData" :key="item.key">
+                <div
+                    :class="item.key === barRoutes.key ? 'cur' : ''" class="hc-router-tab-item"
+                    @click="barMenuClick(item)" @contextmenu.prevent="barMenuContextMenu($event, item, index)"
+                >
+                    <span>{{ item.title }}</span>
+                    <div class="close-icon" @click.stop="barMenuCloseClick(item, index)">
+                        <HcIcon name="close" />
+                    </div>
                 </div>
-            </div>
-        </template>
+            </template>
+        </div>
     </el-scrollbar>
     <!-- 右键菜单 -->
     <HcContextMenu ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect" />