diff --git a/src/pages/demo/components/container/full-card.vue b/src/pages/demo/components/container/full-card.vue
new file mode 100644
index 00000000..f22daa43
--- /dev/null
+++ b/src/pages/demo/components/container/full-card.vue
@@ -0,0 +1,8 @@
+<template>
+  <Container type="full-card">
+    <template slot="header">
+      我是插入到 header 中的内容
+    </template>
+    <Markdown url="/static/markdownFiles/article/演示文章 - 长页面.md"></Markdown>
+  </Container>
+</template>
diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue
new file mode 100644
index 00000000..1a97e225
--- /dev/null
+++ b/src/pages/demo/components/container/ghost.vue
@@ -0,0 +1,7 @@
+<template>
+  <Container type="ghost">
+    <p style="margin-top: 0px;">这是一个隐形的页面容器</p>
+    <p>没有边界和背景颜色</p>
+    <p style="margin-bottom: 0px;">适合一些比较特殊的页面</p>
+  </Container>
+</template>
diff --git a/src/pages/demo/components/container/normal.vue b/src/pages/demo/components/container/normal.vue
new file mode 100644
index 00000000..0c824646
--- /dev/null
+++ b/src/pages/demo/components/container/normal.vue
@@ -0,0 +1,8 @@
+<template>
+  <Container>
+    <template slot="header">我是插入到 header 中的内容</template>
+    <p style="margin-top: 0px;">这是一个最基础的页面容器</p>
+    <p>它看起来像一个卡片</p>
+    <p style="margin-bottom: 0px;">它会将页面区域和导航区域区分开</p>
+  </Container>
+</template>
diff --git a/src/router/menu/_business.js b/src/router/menu/_business.js
index ceb43373..d79506c2 100644
--- a/src/router/menu/_business.js
+++ b/src/router/menu/_business.js
@@ -12,42 +12,42 @@ export const menu = {
   // },
   children: [
     // 页面容器
-    {
-      title: '页面容器',
-      icon: 'window-restore',
-      children: [
-        {
-          title: '卡片',
-          icon: 'file-o',
-          path: 'container/normal',
-          name: 'demo-business-container-normal',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/business/container/normal.vue'], resolve) }
-        },
-        {
-          title: '隐形',
-          icon: 'file-o',
-          path: 'container/ghost',
-          name: 'demo-business-container-ghost',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/business/container/ghost.vue'], resolve) }
-        },
-        {
-          title: '撑满',
-          icon: 'file-o',
-          path: 'container/full-card',
-          name: 'demo-business-container-full-card',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/business/container/full-card.vue'], resolve) }
-        }
-      ]
-    }
+    // {
+    //   title: '页面容器',
+    //   icon: 'window-restore',
+    //   children: [
+    //     {
+    //       title: '卡片',
+    //       icon: 'file-o',
+    //       path: 'container/normal',
+    //       name: 'demo-business-container-normal',
+    //       meta: {
+    //         requiresAuth: true
+    //       },
+    //       component: resolve => { require(['@/pages/demo/business/container/normal.vue'], resolve) }
+    //     },
+    //     {
+    //       title: '隐形',
+    //       icon: 'file-o',
+    //       path: 'container/ghost',
+    //       name: 'demo-business-container-ghost',
+    //       meta: {
+    //         requiresAuth: true
+    //       },
+    //       component: resolve => { require(['@/pages/demo/business/container/ghost.vue'], resolve) }
+    //     },
+    //     {
+    //       title: '撑满',
+    //       icon: 'file-o',
+    //       path: 'container/full-card',
+    //       name: 'demo-business-container-full-card',
+    //       meta: {
+    //         requiresAuth: true
+    //       },
+    //       component: resolve => { require(['@/pages/demo/business/container/full-card.vue'], resolve) }
+    //     }
+    //   ]
+    // }
   ]
 }
 
diff --git a/src/router/menu/_components.js b/src/router/menu/_components.js
index 19bf3e34..5b633c2a 100644
--- a/src/router/menu/_components.js
+++ b/src/router/menu/_components.js
@@ -11,6 +11,43 @@ export const menu = {
   //   name: ''
   // },
   children: [
+    // 页面容器
+    {
+      title: '页面容器',
+      icon: 'window-restore',
+      children: [
+        {
+          title: '卡片',
+          icon: 'file-o',
+          path: 'container/normal',
+          name: 'demo-components-container-normal',
+          meta: {
+            requiresAuth: true
+          },
+          component: resolve => { require(['@/pages/demo/components/container/normal.vue'], resolve) }
+        },
+        {
+          title: '隐形',
+          icon: 'file-o',
+          path: 'container/ghost',
+          name: 'demo-components-container-ghost',
+          meta: {
+            requiresAuth: true
+          },
+          component: resolve => { require(['@/pages/demo/components/container/ghost.vue'], resolve) }
+        },
+        {
+          title: '撑满',
+          icon: 'file-o',
+          path: 'container/full-card',
+          name: 'demo-components-container-full-card',
+          meta: {
+            requiresAuth: true
+          },
+          component: resolve => { require(['@/pages/demo/components/container/full-card.vue'], resolve) }
+        }
+      ]
+    },
     // 编辑器
     {
       title: '编辑器',