diff --git a/src/components/d2-module-index/components/banner/index.vue b/src/components/d2-module-banner/index.vue
similarity index 100%
rename from src/components/d2-module-index/components/banner/index.vue
rename to src/components/d2-module-banner/index.vue
diff --git a/src/components/d2-module-index/index.vue b/src/components/d2-module-index/index.vue
deleted file mode 100644
index 16536edb..00000000
--- a/src/components/d2-module-index/index.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <d2-module-index-banner v-bind="banner"/>
-  </div>
-</template>
-
-<script>
-import d2ModuleIndexBanner from './components/banner'
-export default {
-  components: {
-    d2ModuleIndexBanner
-  },
-  props: {
-    banner: {
-      type: Object,
-      default: () => ({
-        title: '',
-        subTitle: '',
-        link: ''
-      })
-    }
-  }
-}
-</script>
diff --git a/src/components/index.js b/src/components/index.js
index 72bcd145..e738d7de 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -16,6 +16,6 @@ Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('./d2-markdown'))
 Vue.component('d2-mde', () => import('./d2-mde'))
-Vue.component('d2-module-index', () => import('./d2-module-index'))
+Vue.component('d2-module-banner', () => import('./d2-module-banner'))
 Vue.component('d2-quill', () => import('./d2-quill'))
 Vue.component('d2-ueditor', () => import('./d2-ueditor'))
diff --git a/src/pages/demo/business/index/index.vue b/src/pages/demo/business/index/index.vue
index d9ddfc45..bc962084 100644
--- a/src/pages/demo/business/index/index.vue
+++ b/src/pages/demo/business/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/charts/index/index.vue b/src/pages/demo/charts/index/index.vue
index ce43891e..fd2df087 100644
--- a/src/pages/demo/charts/index/index.vue
+++ b/src/pages/demo/charts/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/components/index/index.vue b/src/pages/demo/components/index/index.vue
index 656b4f88..afd7f701 100644
--- a/src/pages/demo/components/index/index.vue
+++ b/src/pages/demo/components/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/d2-crud/index/index.vue b/src/pages/demo/d2-crud/index/index.vue
index 36de5b70..a9b03e64 100644
--- a/src/pages/demo/d2-crud/index/index.vue
+++ b/src/pages/demo/d2-crud/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/element/index/index.vue b/src/pages/demo/element/index/index.vue
index 3bcd2324..b2190ab0 100644
--- a/src/pages/demo/element/index/index.vue
+++ b/src/pages/demo/element/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/frame/index/index.vue b/src/pages/demo/frame/index/index.vue
index f6c7543a..0053b976 100644
--- a/src/pages/demo/frame/index/index.vue
+++ b/src/pages/demo/frame/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/playground/index/index.vue b/src/pages/demo/playground/index/index.vue
index 2bc8845c..a6e27fe9 100644
--- a/src/pages/demo/playground/index/index.vue
+++ b/src/pages/demo/playground/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/plugins/index/index.vue b/src/pages/demo/plugins/index/index.vue
index 846ae4c8..917337d6 100644
--- a/src/pages/demo/plugins/index/index.vue
+++ b/src/pages/demo/plugins/index/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <d2-container :filename="filename" type="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <d2-module-banner slot="header" v-bind="banner"/>
   </d2-container>
 </template>