From cc50224d90b3a71b8cbab892faaa4ff82f0d9399 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Wed, 14 Apr 2021 11:01:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E9=A1=B6=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F&=E7=AA=97=E5=8F=A3=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E6=94=B9=E5=8F=98=E5=AE=9E=E6=97=B6=E6=9B=B4=E6=96=B0=E6=A0=8F?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/components/TopNav/index.vue  | 17 ++++++++---------
 ruoyi-ui/src/layout/components/Navbar.vue |  7 ++++++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue
index 31d06e2..3eebda4 100644
--- a/ruoyi-ui/src/components/TopNav/index.vue
+++ b/ruoyi-ui/src/components/TopNav/index.vue
@@ -95,21 +95,20 @@ export default {
       return activePath;
     },
   },
+  beforeMount() {
+    window.addEventListener('resize', this.setVisibleNumber)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setVisibleNumber)
+  },
   mounted() {
     this.setVisibleNumber();
   },
   methods: {
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
-      const width = document.body.getBoundingClientRect().width - 380;
-      const elWidth = this.$el.getBoundingClientRect().width;
-      const menuItemNodes = this.$el.children;
-      const menuWidth = Array.from(menuItemNodes).map(
-        (i) => i.getBoundingClientRect().width
-      );
-      this.visibleNumber = (
-        parseInt(width - elWidth) / parseInt(menuWidth)
-      ).toFixed(0);
+      const width = document.body.getBoundingClientRect().width / 3;
+      this.visibleNumber = parseInt(width / 85);
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index db69e1d..18c89a0 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -3,7 +3,7 @@
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="breadcrumb-container" v-if="topNav"/>
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
@@ -135,6 +135,11 @@ export default {
     float: left;
   }
 
+  .topmenu-container {
+    position: absolute;
+    left: 50px;
+  }
+
   .errLog-container {
     display: inline-block;
     vertical-align: top;