diff --git a/src/views/demo/d2-crud-plus/index/code.js b/src/views/demo/d2-crud-plus/index/code.js
new file mode 100644
index 000000000..5e0cd2164
--- /dev/null
+++ b/src/views/demo/d2-crud-plus/index/code.js
@@ -0,0 +1,31 @@
+export default `columns: [
+  {
+    title: '日期', //字段名称
+    key: 'date', //字段key
+    type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
+  },
+  {
+    title: '状态',
+    key: 'status',
+    type: 'select', //选择框，默认单选
+    dict: { url: '/dicts/OpenStatusEnum' }//远程数据字典
+  },
+  {
+    title: '地区',
+    key: 'address',
+    type: 'select', //选择框
+    form: { //表单组件自定义配置
+      component: { //支持任何v-model组件
+        props: {  multiple: true } // 此处配置选择框为多选
+      }
+    },
+    dict: {
+      data: [ //本地数据字典
+        { value: 'sz', label: '深圳' },
+        { value: 'gz', label: '广州' },
+        { value: 'wh', label: '武汉' },
+        { value: 'sh', label: '上海' }
+      ]
+    }
+  }
+]`
diff --git a/src/views/demo/d2-crud-plus/index/helper.js b/src/views/demo/d2-crud-plus/index/helper.js
deleted file mode 100644
index a836beb5c..000000000
--- a/src/views/demo/d2-crud-plus/index/helper.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export default {
-  crud: `  columns: [
-    {
-      title: '日期', //字段名称
-      key: 'date', //字段key
-      type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
-    },
-    {
-      title: '状态',
-      key: 'status',
-      type: 'select', //选择框，默认单选
-      dict: { url: '/dicts/OpenStatusEnum' }//远程数据字典
-    },
-    {
-      title: '地区',
-      key: 'address',
-      type: 'select', //选择框
-      form: { //表单组件自定义配置
-        component: { //支持任何v-model组件
-          props: {  multiple: true } // 此处配置选择框为多选
-        }
-      },
-      dict: {
-        data: [ //本地数据字典
-          { value: 'sz', label: '深圳' },
-          { value: 'gz', label: '广州' },
-          { value: 'wh', label: '武汉' },
-          { value: 'sh', label: '上海' }
-        ]
-      }
-    }
-  ]
-  `
-}
diff --git a/src/views/demo/d2-crud-plus/index/index.vue b/src/views/demo/d2-crud-plus/index/index.vue
index 42b7c55b0..421e72334 100644
--- a/src/views/demo/d2-crud-plus/index/index.vue
+++ b/src/views/demo/d2-crud-plus/index/index.vue
@@ -1,29 +1,24 @@
 <template>
   <d2-container type="ghost">
     <d2-module-index-banner slot="header" v-bind="banner"/>
-<!--    <d2-module-index-menu :menu="menu"/>-->
-
-    <div class="exampleBox d2-mt-20 ">
-      <div class="left">
-        <d2-highlight :code="helper.crud" lang="javascript"/>
-      </div>
-      <div class="icon">
-        <i class="el-icon-right"></i>
-      </div>
-      <div class="right">
-        <img src="./image/gif.webp">
-      </div>
-    </div>
+    <el-tabs>
+      <el-tab-pane label="效果" name="result">
+        <img src="./image/gif.webp" style="width: 600px; border: 1px solid #E4E7ED; border-radius: 4px;">
+      </el-tab-pane>
+      <el-tab-pane label="code" name="code">
+        <d2-highlight :code="code" lang="javascript"/>
+      </el-tab-pane>
+    </el-tabs>
   </d2-container>
 </template>
 
 <script>
-import helper from './helper'
+import code from './code'
 
 export default {
   data () {
     return {
-      helper,
+      code,
       banner: {
         title: 'D2 CRUD PLUS',
         subTitle: 'D2 Crud Plus 是一个面向配置的Crud开发框架，辅助d2-crud和d2-crud-x，让开发crud更简单',
@@ -33,37 +28,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.exampleBox{
-  display: flex;
-  align-items:center;
-  height:420px;
-  width:90%;
-  padding:5px;
-  margin:auto;
-  justify-content: center;
-.left{
-  height:100%;
-  overflow-y: hidden;
-  border: 1px solid #aaa;
-}
-.icon{
-  width:120px;
-  display: flex;
-  flex-direction:  column;
-  align-items:center;
-  i{font-size: 50px;}
-}
-.right{
-  height:100%;
-img{
-  height:100%;
-}
-}
-.d2-highlight{
-  font-size: 8px;
-}
-}
-
-</style>