Style Adjustment

src/layout/components/AppMain.vue

@@ -113,22 +113,22 @@ export default {
   width: 100%;
   position: relative;
   // overflow: auto;
-  padding-bottom: $footerHeight;
+  padding: 0 $mainTopPadding $footerHeight 15px;
 
-  &>div:not(.home-container) {
+  &>div {
     height: calc(100vh - #{$layoutHeight});
-    padding: 10px 0 0 10px;
   }
 }
 
 .hasTagsView {
   .app-main {
     min-height: calc(100vh - #{$headerHeight} - #{$tagHeight});
+    padding-top: $mainTopPadding;
   }
 
   .fixed-header+.app-main {
     min-height: calc(100vh - #{$headerHeight});
-    padding-top: $tagHeight;
+    padding-top: calc(#{$tagHeight} + #{$mainTopPadding}) !important;
   }
 }
 

src/styles/sidebar.scss

@@ -6,7 +6,6 @@
     margin-left: $sideBarWidth;
     padding-top: $headerHeight;
     position: relative;
-    padding-left: 5px;
   }
 
   .sidebar-container {

src/styles/variables.scss

@@ -24,7 +24,8 @@ $siderBarCollapseWidth: 64px;
 $headerHeight: 100px;
 $footerHeight: 32px; // must greater than 15px
 $tagHeight: 42px; // must greater than 40px
-$layoutHeight: $headerHeight + $footerHeight + $tagHeight;
+$mainTopPadding: 10px;
+$layoutHeight: $headerHeight + $footerHeight + $tagHeight + $mainTopPadding;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/application/index.vue

@@ -344,7 +344,7 @@ export default {
     }
     .el-card__body {
       height: calc(100% - 56px);
-      padding: 10px 0px 10px 20px;
+      padding: 10px 0 0 20px;
     }
 
     .el-scrollbar__wrap{

src/views/faq/index.vue

@@ -170,7 +170,7 @@ export default {
 
   .filter-box, .faq-box {
     background-color: #fff;
-    padding: 10px 0 10px 20px;
+    padding: 10px 0 0 20px;
   }
 
   .filter-box {

src/views/home/index.vue

@@ -1,21 +1,23 @@
 <template>
   <div class="home-container">
-    <grid-layout
-      :layout.sync="layout"
-      :col-num="14"
-      :row-height="30"
-      :is-draggable="false"
-      :is-resizable="false"
-      :is-mirrored="false"
-      :vertical-compact="true"
-      :margin="[10, 10]"
-      :use-css-transforms="true"
-    >
-      <!-- <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :style="'display: ' + (item.i === '1' ? 'block' : 'none' )"> -->
-      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
-        <component :is="components[item.i]" :key="item.i" :ref="components[item.i]" class="card-box" v-bind="componentProps(item.i)" />
-      </grid-item>
-    </grid-layout>
+    <el-scrollbar class="home-scrollbar">
+      <grid-layout
+        :layout.sync="layout"
+        :col-num="14"
+        :row-height="30"
+        :is-draggable="false"
+        :is-resizable="false"
+        :is-mirrored="false"
+        :vertical-compact="true"
+        :margin="[10, 10]"
+        :use-css-transforms="true"
+      >
+        <!-- <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :style="'display: ' + (item.i === '1' ? 'block' : 'none' )"> -->
+        <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
+          <component :is="components[item.i]" :key="item.i" :ref="components[item.i]" class="card-box" v-bind="componentProps(item.i)" />
+        </grid-item>
+      </grid-layout>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -84,7 +86,20 @@ export default {
 $msgCardHeaderHeight: 43px;
 
 .home-container {
-  width: calc(100% - 15px);
+  margin: -10px -6px 0 -10px;
+
+  .home-scrollbar {
+    height: calc(100% + 10px);
+  }
+
+  ::v-deep {
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+    }
+    .el-scrollbar__bar.is-horizontal {
+      display: none;
+    }
+  }
 
   .card-box {
     height: 100%;
@@ -119,12 +134,6 @@ $msgCardHeaderHeight: 43px;
           }
         }
 
-        .el-scrollbar__wrap{
-          overflow-x: hidden;
-        }
-        .el-scrollbar__bar.is-horizontal {
-          display: none;
-        }
         .el-table__row .cell {
           padding-left: 0 !important;
         }