修改样式

src/App.vue

@@ -376,8 +376,8 @@ input[type="number"] {
     width: 8px;
     background-color: #F56C6C;
     border-radius: 50%;
-    right: -10px;
-    top: 15px;
+    right: 5px;
+    top: 5px;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -9,13 +9,13 @@
     <div class="indexlayout-top-menu">
       <!-- :class="{'active': getTopMenuActive === route.path}" -->
       <!-- el-scrollbar -->
-      <div class="horizontal-scrollbar">
+      <el-scrollbar class="horizontal-scrollbar" style="overflow: hidden;">
           <template v-for="route in permission_routes">
             <app-link v-if="!route.hidden" :to="route.path" :key="route.path" class="indexlayout-top-menu-li" :class="{'active': getTopMenuActive === route.path}">
                 <span>{{ route.meta.title }}</span>
             </app-link>
           </template>
-      </div>
+      </el-scrollbar>
     </div>
     <!-- <div class="left-menu">
       <i class="el-icon-location-information topIcon"></i>
@@ -304,7 +304,7 @@ export default {
 .indexlayout-top-menu{
   padding-left: 57px;
   height: 70px;
-  line-height: 70px;
+  line-height: 68px;
   flex: 1;
   display: flex;
   overflow: hidden;
@@ -402,6 +402,7 @@ export default {
       justify-content: flex-start;
       align-items: center;
       margin-right: 20px;
+      margin-left: 30px;
       position: relative;
       cursor: pointer;
       img {

src/layout/components/TagsView.vue

@@ -190,10 +190,24 @@ export default {
       this.$router.push("/");
     },
     openMenu(tag, e) {
-      this.visible = true;
-      this.selectedTag = tag;
-      this.left = e.clientX - 200;
+      // console.log(e)
+      // this.visible = true;
+      // this.selectedTag = tag;
+      // this.left = e.clientX;
+      // this.top = e.clientY - 55;
+      const menuMinWidth = 105
+      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
       this.top = e.clientY - 55;
+      this.visible = true
+      this.selectedTag = tag
     },
     closeMenu() {
       this.visible = false;