Tag Final

src/layout/components/AppMain.vue

@@ -41,13 +41,12 @@ export default {
 
 .hasTagsView {
   .app-main {
-    // 34px: tag height
-    min-height: calc(100vh - #{$headerHeight} - 34px);
+    min-height: calc(100vh - #{$headerHeight} - #{$tagHeight});
   }
 
   .fixed-header+.app-main {
     min-height: calc(100vh - #{$headerHeight});
-    padding-top: 34px;
+    padding-top: $tagHeight;
   }
 }
 

src/layout/components/TagsView/ScrollPane.vue

@@ -87,9 +87,9 @@ export default {
       bottom: 0px;
     }
     .el-scrollbar__wrap {
-      height: 49px;
-      margin-bottom: -17px !important;
-      margin-right: -17px !important;
+      height: 64px;
+      // margin-bottom: -17px !important;
+      // margin-right: -17px !important;
     }
   }
 }

src/layout/components/TagsView/index.vue

@@ -198,8 +198,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/variables.scss";
+
 .tags-view-container {
-  height: 34px;
+  height: $tagHeight;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
@@ -209,8 +211,8 @@ export default {
       display: inline-block;
       position: relative;
       cursor: pointer;
-      height: 26px;
-      line-height: 26px;
+      height: 32px;
+      line-height: 32px;
       border: 1px solid #d8dce5;
       color: #495060;
       background: #fff;

src/styles/variables.scss

@@ -23,6 +23,7 @@ $sideBarWidth: 210px;
 $siderBarCollapseWidth: 64px;
 $headerHeight: 120px;
 $footerHeight: 32px;
+$tagHeight: 42px; // must greater than 40px
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/system/index.vue

@@ -232,7 +232,7 @@ export default {
   }
   .system-box {
     width: 100%;
-    min-height: calc(100vh - #{$headerHeight} - 34px - #{$footerHeight} - 10px);
+    min-height: calc(100vh - #{$headerHeight} - #{$tagHeight} - #{$footerHeight} - 10px);
     padding-left: 20px;
     background-color: #fff;