diff --git a/src/assets/style/animate/vue-transition.scss b/src/assets/style/animate/vue-transition.scss
new file mode 100644
index 00000000..ce933862
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/assets/style/public-class.scss b/src/assets/style/public-class.scss
index 498967a8..33be9df6 100644
--- a/src/assets/style/public-class.scss
+++ b/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 里书写
diff --git a/src/components/core/Container/index.vue b/src/components/core/Container/index.vue
index f72abad3..6c9f5091 100644
--- a/src/components/core/Container/index.vue
+++ b/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) {
   // 根据你的需要在这里添加样式
diff --git a/src/components/core/MainLayout/index.vue b/src/components/core/MainLayout/index.vue
index 819b0349..6eeec478 100644
--- a/src/components/core/MainLayout/index.vue
+++ b/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>