diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index 6483a4c9..996bce7f 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -71,6 +71,113 @@ export default {
   }
 }
 </script>
+<style>
+.site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.site-doc-icon li .doc-icon-name,
+.site-doc-icon li .doc-icon-code {
+  color: #c2c2c2;
+}
+
+.site-doc-icon li .doc-icon-fontclass {
+  height: 40px;
+  line-height: 20px;
+  padding: 0 5px;
+  font-size: 13px;
+  color: #333;
+}
+
+.site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.site-doc-icon li .layui-icon {
+  display: inline-block;
+  font-size: 32px;
+}
+
+.site-doc-color {
+  margin: 15px 0;
+}
+
+.site-doc-necolor li div {
+  border-radius: 0;
+  color: #000 !important;
+}
+
+.site-doc-color li div {
+  padding: 20px 10px;
+  color: #fff;
+  text-align: center;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.site-doc-bgcolor li {
+  padding: 20px 10px;
+}
+.anim .site-doc-icon {
+  margin-bottom: 50px;
+  font-size: 0;
+}
+
+.anim .site-doc-icon li {
+  width: 50%;
+}
+
+.anim .site-doc-anim li {
+  height: auto;
+}
+
+.anim .site-doc-icon li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16.5%;
+  height: 105px;
+  line-height: 25px;
+  padding: 20px 0;
+  margin-right: -1px;
+  margin-bottom: -1px;
+  border: 1px solid #e2e2e2;
+  font-size: 14px;
+  text-align: center;
+  color: #666;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.anim .site-doc-icon li .layui-anim {
+  width: 125px;
+  height: 125px;
+  line-height: 125px;
+  margin: 0 auto 10px;
+  text-align: center;
+  background-color: #009688;
+  cursor: pointer;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.anim .site-doc-icon li .code {
+  white-space: nowrap;
+}
+</style>
 
 :::
 
diff --git a/example/docs/zh-CN/components/backtop.md b/example/docs/zh-CN/components/backtop.md
index f74b53d3..fe34cbe1 100644
--- a/example/docs/zh-CN/components/backtop.md
+++ b/example/docs/zh-CN/components/backtop.md
@@ -11,6 +11,9 @@
   <lay-backtop></lay-backtop>
 </template>
 
+<script>
+</script>
+
 :::
 
 :::title 自定义
@@ -35,7 +38,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
diff --git a/example/docs/zh-CN/components/confirm.md b/example/docs/zh-CN/components/confirm.md
index 2ecce930..0df8e01d 100644
--- a/example/docs/zh-CN/components/confirm.md
+++ b/example/docs/zh-CN/components/confirm.md
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -39,7 +39,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
diff --git a/example/docs/zh-CN/components/drawer.md b/example/docs/zh-CN/components/drawer.md
index 36245771..93fb4e4f 100644
--- a/example/docs/zh-CN/components/drawer.md
+++ b/example/docs/zh-CN/components/drawer.md
@@ -90,7 +90,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -125,7 +125,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
diff --git a/example/docs/zh-CN/components/grid.md b/example/docs/zh-CN/components/grid.md
index 9902f799..8a82c51f 100644
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@@ -105,6 +105,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 
@@ -136,6 +149,19 @@ export default {
   }
 }
 </script>
+<style>
+.grid-demo-bg1 {
+    background-color: #63BA79;
+}
+.grid-demo {
+    padding: 10px;
+    line-height: 50px;
+    border-radius: 2px;
+    text-align: center;
+    background-color: #79C48C;
+    color: #fff;
+}
+</style>
 
 :::
 
diff --git a/example/docs/zh-CN/components/layout.md b/example/docs/zh-CN/components/layout.md
index 5544d6fa..6618c897 100644
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@@ -7,7 +7,7 @@
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-body>content</lay-body>
     <lay-footer>footer</lay-footer>
@@ -27,21 +27,21 @@ export default {
 </script>
 
 <style>
-.lay-code .layui-footer,
-.lay-code .layui-header {
+.example .layui-footer,
+.example .layui-header {
   line-height: 60px;
   text-align: center;
   background: #87ca9a;
   color: white;
 }
-.lay-code .layui-side {
+.example .layui-side {
   display: flex;
   background: #77c38c;
   align-items: center;
   justify-content: center;
   color: white;
 }
-.lay-code .layui-body {
+.example .layui-body {
   display: flex;
   background: #5FB878;
   align-items: center;
@@ -58,7 +58,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>left</lay-side>
     <lay-body>content</lay-body>
     <lay-side>right</lay-side>
@@ -76,6 +76,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -85,7 +108,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>header</lay-header>
     <lay-layout>
       <lay-side>side</lay-side>
@@ -105,6 +128,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
@@ -114,7 +160,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-side>side</lay-side>
     <lay-layout>
       <lay-header>header</lay-header>
@@ -123,7 +169,7 @@ export default {
     </lay-layout>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-layout>
       <lay-header>header</lay-header>
       <lay-body>body</lay-body>
@@ -132,7 +178,7 @@ export default {
     <lay-side>side</lay-side>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -143,7 +189,7 @@ export default {
     <lay-footer>Footer</lay-footer>
   </lay-layout>
   <hr>
-  <lay-layout>
+  <lay-layout class="example">
     <lay-header>Header</lay-header>
     <lay-body>
       <lay-layout>
@@ -166,6 +212,29 @@ export default {
   }
 }
 </script>
+<style>
+.example .layui-footer,
+.example .layui-header {
+  line-height: 60px;
+  text-align: center;
+  background: #87ca9a;
+  color: white;
+}
+.example .layui-side {
+  display: flex;
+  background: #77c38c;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+.example .layui-body {
+  display: flex;
+  background: #5FB878;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+</style>
 
 :::
 
diff --git a/example/docs/zh-CN/components/load.md b/example/docs/zh-CN/components/load.md
index d2ec6a65..5f935de3 100644
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@@ -16,7 +16,7 @@
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -54,7 +54,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -85,7 +85,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index 125d4711..8c06dcc2 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -28,7 +28,7 @@ export default {
     return {
         visible1
     };
-  },
+  }
 };
 </script>
 
@@ -61,7 +61,7 @@ export default {
     return {
         visible2
     };
-  },
+  }
 };
 </script>
 
@@ -94,7 +94,7 @@ export default {
     return {
         visible3
     };
-  },
+  }
 };
 </script>
 
@@ -127,7 +127,7 @@ export default {
     return {
         visible4
     };
-  },
+  }
 };
 </script>
 
@@ -160,7 +160,7 @@ export default {
     return {
         visible8
     };
-  },
+  }
 };
 </script>
 
@@ -193,7 +193,7 @@ export default {
         type5,
         visible5
     };
-  },
+  }
 };
 </script>
 
@@ -231,7 +231,7 @@ export default {
         btn6,
         visible6
     };
-  },
+  }
 };
 </script>
 
@@ -264,7 +264,7 @@ export default {
     return {
         visible7
     };
-  },
+  }
 };
 </script>
 
@@ -283,7 +283,7 @@ export default {
 
 <script>
 import { ref, watch } from "vue";
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 import { useRoute, useRouter } from "vue-router";
 export default {
   setup() {
@@ -307,7 +307,7 @@ export default {
         close,
         closeAll
     };
-  },
+  }
 };
 </script>
 
diff --git a/example/docs/zh-CN/components/msg.md b/example/docs/zh-CN/components/msg.md
index 6736383c..40110e88 100644
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
@@ -42,7 +42,7 @@ export default {
 </template>
 
 <script>
-import { layer } from "../../../../src/index.ts"
+import { layer } from "@layui/layer-vue"
 
 export default {
   setup() {
diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 0fa4f1d4..fc592423 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -46,7 +46,6 @@ export default {
 import { ref } from 'vue'
 
 export default {
-  name:'selectChange',
   setup() {
     const value = ref(null);
     var i = 1;
diff --git a/example/docs/zh-CN/components/splitPanel.md b/example/docs/zh-CN/components/splitPanel.md
index dd5ee3f0..1f6cbc57 100644
--- a/example/docs/zh-CN/components/splitPanel.md
+++ b/example/docs/zh-CN/components/splitPanel.md
@@ -18,11 +18,6 @@
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::
@@ -44,11 +39,6 @@ export default {
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::
@@ -70,11 +60,6 @@ export default {
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::
@@ -100,11 +85,6 @@ export default {
 </template>
 
 <script>
-
-export default {
-  setup() {
-  }
-}
 </script>
 
 :::