'admin-20.12.31:处理主布局切换页面elementPlus滚动条高度不变的bug'

vue-admin-wonderful-next/src/theme/app.scss

@@ -47,8 +47,7 @@ body,
     @extend .el-scrollbar;
     padding: 15px;
   }
-  .el-scrollbar__view {
-    height: 100%;
+  .layout-container-header-main {
     display: flex;
     flex-direction: column;
   }
@@ -62,6 +61,15 @@ body,
 .h100 {
   height: 100% !important;
 }
+.vh100 {
+  height: 100vh !important;
+}
+.max100vh {
+  max-height: 100vh !important;
+}
+.min100vh {
+  min-height: 100vh !important;
+}
 
 /* 字体大小全局样式
 ------------------------------- */

vue-admin-wonderful-next/src/theme/common/transition.scss

@@ -27,7 +27,7 @@
 ------------------------------- */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
   position: absolute;
 }
 .breadcrumb-enter-from,

vue-admin-wonderful-next/src/theme/media/index.scss

@@ -10,3 +10,28 @@ $sm: 768px;
 $md: 992px;
 $lg: 1200px;
 $xl: 1920px;
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+}
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+}
+
+/* 页面宽度大于768px小于992px
+------------------------------- */
+@media screen and (min-width: $sm) and (max-width: $md) {
+}
+
+/* 页面宽度大于992px小于1200px
+------------------------------- */
+@media screen and (min-width: $md) and (max-width: $lg) {
+}
+
+/* 页面宽度大于1920px
+------------------------------- */
+@media screen and (min-width: $xl) {
+}

vue-admin-wonderful-next/src/theme/media/template.scss

@@ -1,26 +0,0 @@
-@import './index.scss';
-
-/* 页面宽度小于576px
-------------------------------- */
-@media screen and (max-width: $xs) {
-}
-
-/* 页面宽度小于768px
-------------------------------- */
-@media screen and (max-width: $sm) {
-}
-
-/* 页面宽度大于768px小于992px
-------------------------------- */
-@media screen and (min-width: $sm) and (max-width: $md) {
-}
-
-/* 页面宽度大于992px小于1200px
-------------------------------- */
-@media screen and (min-width: $md) and (max-width: $lg) {
-}
-
-/* 页面宽度大于1920px
-------------------------------- */
-@media screen and (min-width: $xl) {
-}

vue-admin-wonderful-next/src/views/layout/component/main.vue

@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <el-scrollbar class="layout-scrollbar">
+    <el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);">
       <router-view v-slot="{ Component }">
         <transition appear :name="transitionName" mode="out-in">
           <div :key="key">

vue-admin-wonderful-next/src/views/layout/fashion.vue

@@ -3,8 +3,10 @@
     <Aside />
     <el-container>
       <el-scrollbar>
-        <Header />
-        <Main />
+        <div class="layout-container-header-main">
+          <Header />
+          <Main />
+        </div>
       </el-scrollbar>
     </el-container>
   </el-container>

vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue

@@ -130,7 +130,7 @@ export default {
     list-style: none;
     margin: 0;
     padding: 0;
-    height: 100%;
+    height: 34px;
     display: flex;
     align-items: center;
     color: #606266;