no message

Former-commit-id: b27fb5741f95f7b353f1559dde27fa971efcbb46
Former-commit-id: 2f9375feb0a9c8b4e12eb502d275014a100d5854
Former-commit-id: 5425696bce2a7ed045b5d017e6fa6b727670e812

src/assets/style/animate/vue-transition.scss

@@ -0,0 +1,15 @@
+// 过渡动画
+.fade-enter-active {
+  transition: all .5s;
+}
+.fade-leave-active {
+  transition: all .5s;
+}
+.fade-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}

src/assets/style/public-class.scss

@@ -11,6 +11,9 @@
 // 补丁 vue-grid-layout
 @import '~@/assets/style/fixed/vue-grid-layout.scss';
 
+// 动画
+@import '~@/assets/style/animate/vue-transition.scss';
+
 // 在这里写公用的class
 // 注意 这个文件里只写class
 // mixin等内容请在 public.scss 里书写

src/components/core/Container/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="container-component" :class="{responsive}">
     <!-- [card] 卡片容器 -->
-    <el-card v-if="type === 'card'">
+    <el-card v-if="type === 'card'" class="dd-mr dd-mb">
       <slot v-if="$slots.header" name="header" slot="header"></slot>
       <slot></slot>
     </el-card>
     <!-- [ghost] 隐形的容器 -->
-    <div v-if="type === 'ghost'">
+    <div v-if="type === 'ghost'" class="dd-mr dd-mb">
       <slot name="header"></slot>
       <slot></slot>
     </div>
@@ -40,8 +40,16 @@ export default {
 <style lang="scss">
 @import '~@/assets/style/public.scss';
 .container-component {
-  margin-right: 20px;
-  margin-bottom: 20px;
+  // margin-right: 20px;
+  // margin-bottom: 20px;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  // padding-right: $margin;
+  // padding-bottom: $margin;
+  overflow: auto;
 }
 @media (min-width: 576px) {
   // 根据你的需要在这里添加样式

src/components/core/MainLayout/index.vue

@@ -16,7 +16,9 @@
         <SideMenu :collapse="collapse"></SideMenu>
       </el-aside>
       <el-main>
-        <router-view></router-view>
+        <transition name="fade">
+          <router-view></router-view>
+        </transition>
       </el-main>
     </el-container>
   </el-container>