优化样式

src/components/TopNav/index.vue

@@ -171,6 +171,11 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+.topmenu-container.el-menu--horizontal {
+  height: 50px !important;
+  border-bottom: none;
+}
+
 .topmenu-container.el-menu--horizontal > .el-menu-item {
   float: left;
   height: 50px !important;

src/layout/components/TagsView/ScrollPane.vue

@@ -39,7 +39,6 @@ function smoothScrollTo(target) {
   const duration = 300
   let startTime = null
 
-  // easeInOutQuad »º¶¯º¯Êý
   function ease(t, b, c, d) {
     t /= d / 2
     if (t < 1) return c / 2 * t * t + b
@@ -145,16 +144,13 @@ defineExpose({
   position: relative;
   overflow: hidden;
   width: 100%;
-  height: 100%;
   :deep(.el-scrollbar__bar) {
-    display: none;
+    bottom: 0px;
   }
   :deep(.el-scrollbar__wrap) {
     height: 34px;
     display: flex;
     align-items: center;
-    overflow-x: auto;
-    overflow-y: hidden;
   }
 }
 </style>

src/layout/components/TagsView/index.vue

@@ -18,10 +18,10 @@
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openMenu(tag, $event)"
       >
-        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" style="margin-right: 3px;" />
         {{ tag.title }}
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)" class="tags-close-btn">
-          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+          <close class="el-icon-close" />
         </span>
       </router-link>
     </scroll-pane>
@@ -386,7 +386,7 @@ function handleScroll() {
   $divider: 1px solid var(--tags-item-border, #d8dce5);
 
   .tags-nav-btn {
-    flex-shrink: 0;
+    flex-shrink: 0; 
     display: flex;
     align-items: center;
     justify-content: center;
@@ -418,7 +418,8 @@ function handleScroll() {
     height: 100%;
 
     .tags-view-item {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       position: relative;
       cursor: pointer;
       height: 26px;
@@ -430,6 +431,9 @@ function handleScroll() {
       font-size: 12px;
       margin-left: 5px;
       border-radius: 3px;
+      text-decoration: none;
+      vertical-align: middle;
+      padding-top: 2px !important;
 
       &:first-of-type { margin-left: 6px; }
       &:last-of-type  { margin-right: 15px; }
@@ -516,26 +520,33 @@ function handleScroll() {
 <style lang="scss">
 .tags-view-wrapper {
   .tags-view-item {
-    .el-icon-close {
+    .tags-close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       width: 16px;
       height: 16px;
-      vertical-align: 2px;
+      margin-left: 4px;
       border-radius: 50%;
-      text-align: center;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      cursor: pointer;
-      transform-origin: 100% 50%;
+      
-
+      .el-icon-close {
-      &:before {
+        width: 1em;
-        transform: scale(.6);
+        height: 1em;
-        display: inline-block;
+        vertical-align: 0;
-        vertical-align: -3px;
+        line-height: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
       }
-
+      
       &:hover {
         background-color: var(--tags-close-hover, #b4bccc);
-        color: #fff;
+        
-        width: 12px !important;
+        .el-icon-close {
-        height: 12px !important;
+          color: #fff;
+        }
       }
     }
   }
@@ -549,6 +560,9 @@ function handleScroll() {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  margin-left: 0 !important;
+  transition: none !important;
+
 }
 
 .main-container.fullscreen-mode .fixed-header {
@@ -559,6 +573,7 @@ function handleScroll() {
   right: 0;
   width: 100% !important;
   z-index: 1000;
+  transition: none !important;
 }
 
 .main-container.fullscreen-mode .fixed-header .navbar {