diff --git a/docs/docs/zh-CN/components/carousel.md b/docs/docs/zh-CN/components/carousel.md
index 42969c4f..83adf7bd 100644
--- a/docs/docs/zh-CN/components/carousel.md
+++ b/docs/docs/zh-CN/components/carousel.md
@@ -119,16 +119,16 @@ export default {
 ::: field 轮播属性
 :::
 
-| Name   | Description | Accepted Values  |
-| --------- | ------ | --- |
-| v-model | 当前激活项 | `--` |
-| anim | 切换方向 | `default` `updown` |
-| indicator | 控制器位置 | `inside` `outside` `none` |
-| arrow | 切换按钮状态 | `hover` `always` `none`|
+| Name      | Description  | Accepted Values           |
+| --------- | ------------ | ------------------------- |
+| v-model   | 当前激活项   | `--`                      |
+| anim      | 切换方向     | `default` `updown`        |
+| indicator | 控制器位置   | `inside` `outside` `none` |
+| arrow     | 切换按钮状态 | `hover` `always` `none`   |
 
 ::: field 轮播事件
 :::
 
-| Name   | Description | Accepted Values  |
-| --------- | ------ | --- |
-| change | 切换回调 | id |
\ No newline at end of file
+| Name   | Description | Accepted Values |
+| ------ | ----------- | --------------- |
+| change | 切换回调    | id              |
diff --git a/docs/docs/zh-CN/components/layout.md b/docs/docs/zh-CN/components/layout.md
index 06efed5d..cb342b42 100644
--- a/docs/docs/zh-CN/components/layout.md
+++ b/docs/docs/zh-CN/components/layout.md
@@ -29,18 +29,21 @@ export default {
   line-height: 60px;
   text-align: center;
   background: #87ca9a;
+  color: white;
 }
 .lay-code .layui-side {
   display: flex;
   background: #77c38c;
   align-items: center;
   justify-content: center;
+  color: white;
 }
 .lay-code .layui-body {
   display: flex;
   background: #5FB878;
   align-items: center;
   justify-content: center;
+  color: white;
 }
 </style>
 
diff --git a/docs/src/layouts/Layout.vue b/docs/src/layouts/Layout.vue
index a0480755..a0164eba 100644
--- a/docs/src/layouts/Layout.vue
+++ b/docs/src/layouts/Layout.vue
@@ -1,53 +1,51 @@
 <template>
-  <div class="width:100%;height:300px">
-    <lay-layout>
-      <lay-header style="background: #393d49; border-bottom: 1px solid #404553"
-        ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
-          <img src="../assets/logo.png" />
-        </lay-logo>
-        <ul
-          class="layui-nav layui-layout-left"
-          style="margin-top: 0px; margin-bottom: 0px"
-        >
-          <li class="layui-nav-item">
-            <router-link to="/zh-CN/index"> 首页 </router-link>
-          </li>
-          <li class="layui-nav-item">
-            <router-link to="/zh-CN/guide"> 指南 </router-link>
-          </li>
-          <li class="layui-nav-item">
-            <router-link to="/zh-CN/components"> 组件 </router-link>
-          </li>
-          <li class="layui-nav-item">
-            <lay-form>
-              <lay-search :datas="menus" />
-            </lay-form>
-          </li>
-        </ul>
-        <ul
-          class="layui-nav layui-layout-right"
-          style="margin-top: 0px; margin-bottom: 0px"
-        >
-          <li class="layui-nav-item">
-            <a href="https://gitee.com/layui-vue">
-              <lay-icon type="layui-icon-fonts-code" size="14px"></lay-icon>
-            </a>
-          </li>
-          <li class="layui-nav-item">
-            <a
-              href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
-            >
-              <lay-icon type="layui-icon-chat" size="14px"></lay-icon>
-            </a>
-          </li>
-          <li class="layui-nav-item">
-            <a href="javascript:void(0)"> 0.2.0 </a>
-          </li>
-        </ul>
-      </lay-header>
-      <router-view></router-view>
-    </lay-layout>
-  </div>
+  <lay-layout class="layui-layout-document">
+    <lay-header
+      ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
+        <img src="../assets/logo.png" />
+      </lay-logo>
+      <ul
+        class="layui-nav layui-layout-left"
+        style="margin-top: 0px; margin-bottom: 0px"
+      >
+        <li class="layui-nav-item">
+          <router-link to="/zh-CN/index"> 首页 </router-link>
+        </li>
+        <li class="layui-nav-item">
+          <router-link to="/zh-CN/guide"> 指南 </router-link>
+        </li>
+        <li class="layui-nav-item">
+          <router-link to="/zh-CN/components"> 组件 </router-link>
+        </li>
+        <li class="layui-nav-item">
+          <lay-form>
+            <lay-search :datas="menus" />
+          </lay-form>
+        </li>
+      </ul>
+      <ul
+        class="layui-nav layui-layout-right"
+        style="margin-top: 0px; margin-bottom: 0px"
+      >
+        <li class="layui-nav-item">
+          <a href="https://gitee.com/layui-vue">
+            <lay-icon type="layui-icon-fonts-code" size="14px"></lay-icon>
+          </a>
+        </li>
+        <li class="layui-nav-item">
+          <a
+            href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
+          >
+            <lay-icon type="layui-icon-chat" size="14px"></lay-icon>
+          </a>
+        </li>
+        <li class="layui-nav-item">
+          <a href="javascript:void(0)"> 0.2.0 </a>
+        </li>
+      </ul>
+    </lay-header>
+    <router-view></router-view>
+  </lay-layout>
 </template>
 <script>
 import { ref, watch } from 'vue'
@@ -335,6 +333,29 @@ export default {
 }
 </script>
 <style>
+.layui-layout-document > .layui-header {
+  z-index: 9999;
+  width: 100%;
+  position: fixed;
+  background: #393d49;
+  border-bottom: 1px solid #404553;
+}
+
+.layui-layout-document > .layui-layout > .layui-side {
+  overflow-x: hidden;
+  position: fixed;
+  margin-top: 60px;
+  height: calc(100% - 60px);
+}
+
+.layui-layout-document > .layui-layout > .layui-body {
+  margin-top: 60px;
+  left: 200px;
+  position: absolute;
+  width: calc(100% - 200px);
+  height: calc(100% - 60px);
+}
+
 .layui-logo img {
   height: 31px;
   width: 82px;
@@ -350,6 +371,9 @@ export default {
 .layui-menu-docs .layui-menu-body-title .layui-font-gray {
   padding-left: 10px;
 }
+.layui-side hr {
+  margin: 8px;
+}
 
 @media screen and (max-width: 768px) {
   .layui-side {
diff --git a/docs/src/router/zh-CN.ts b/docs/src/router/zh-CN.ts
index 96f0246c..36e5e9e5 100644
--- a/docs/src/router/zh-CN.ts
+++ b/docs/src/router/zh-CN.ts
@@ -253,4 +253,4 @@ const zhCN = [
   },
 ]
 
-export default zhCN
\ No newline at end of file
+export default zhCN
diff --git a/docs/src/view/component.vue b/docs/src/view/component.vue
index c095ca26..27301a46 100644
--- a/docs/src/view/component.vue
+++ b/docs/src/view/component.vue
@@ -1,36 +1,40 @@
 <template>
   <lay-layout>
     <lay-side>
-      <ul class="layui-menu layui-menu-lg layui-menu-docs">
-        <li
-          v-for="menu in menus"
-          :key="menu"
-          class="layui-menu-item-group"
-          lay-options="{type: 'group', isAllowSpread: true}"
-        >
-          <div class="layui-menu-body-title">{{ menu.title }}</div>
-          <hr />
-          <ul>
-            <li
-              v-for="children in menu.children"
-              :key="children"
-              :class="[
-                currentPath === children.path ? 'layui-menu-item-checked2' : '',
-              ]"
-              @click="handleClick(children)"
-            >
-              <div class="layui-menu-body-title">
-                <router-link :to="children.path">
-                  <span>{{ children.title }}</span>
-                  <span class="layui-font-12 layui-font-gray">
-                    {{ children.subTitle }}
-                  </span>
-                </router-link>
-              </div>
-            </li>
-          </ul>
-        </li>
-      </ul>
+      <lay-scroll>
+        <ul class="layui-menu layui-menu-lg layui-menu-docs">
+          <li
+            v-for="menu in menus"
+            :key="menu"
+            class="layui-menu-item-group"
+            lay-options="{type: 'group', isAllowSpread: true}"
+          >
+            <div class="layui-menu-body-title">{{ menu.title }}</div>
+            <hr />
+            <ul>
+              <li
+                v-for="children in menu.children"
+                :key="children"
+                :class="[
+                  currentPath === children.path
+                    ? 'layui-menu-item-checked2'
+                    : '',
+                ]"
+                @click="handleClick(children)"
+              >
+                <div class="layui-menu-body-title">
+                  <router-link :to="children.path">
+                    <span>{{ children.title }}</span>
+                    <span class="layui-font-12 layui-font-gray">
+                      {{ children.subTitle }}
+                    </span>
+                  </router-link>
+                </div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </lay-scroll>
     </lay-side>
     <lay-body>
       <div style="padding: 20px">
@@ -160,6 +164,12 @@ export default {
         id: 1,
         title: '表单',
         children: [
+          {
+            id: 36,
+            title: '开关',
+            subTitle: 'switch',
+            path: '/zh-CN/components/switch',
+          },
           {
             id: 32,
             title: '复选框',
@@ -184,30 +194,24 @@ export default {
             subTitle: 'textarea',
             path: '/zh-CN/components/textarea',
           },
-          {
-            id: 36,
-            title: '开关',
-            subTitle: 'switch',
-            path: '/zh-CN/components/switch',
-          },
           {
             id: 39,
             title: '下拉选择',
             subTitle: 'select',
             path: '/zh-CN/components/select',
           },
-          {
-            id: 29,
-            title: '图标选择',
-            subTitle: 'iconPicker',
-            path: '/zh-CN/components/iconPicker',
-          },
           {
             id: 40,
             title: '颜色选择器',
             subTitle: 'colorPicker',
             path: '/zh-CN/components/colorPicker',
           },
+          {
+            id: 29,
+            title: '图标选择器',
+            subTitle: 'iconPicker',
+            path: '/zh-CN/components/iconPicker',
+          },
           {
             id: 26,
             title: '评分',
diff --git a/docs/src/view/guide.vue b/docs/src/view/guide.vue
index 94f4c1e2..f9a86465 100644
--- a/docs/src/view/guide.vue
+++ b/docs/src/view/guide.vue
@@ -1,6 +1,7 @@
 <template>
   <lay-layout>
     <lay-side>
+      <lay-scroll>
         <ul class="layui-menu layui-menu-lg layui-menu-docs">
           <li
             v-for="menu in menus"
@@ -33,6 +34,7 @@
             </ul>
           </li>
         </ul>
+      </lay-scroll>
     </lay-side>
     <lay-body>
       <div style="padding: 20px">
diff --git a/docs/src/view/index.vue b/docs/src/view/index.vue
index 66936261..4fdc2cc8 100644
--- a/docs/src/view/index.vue
+++ b/docs/src/view/index.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    style="
-      background-color: whitesmoke;
-      height: 100%;
-      width: 100%;
-    "
-  >
+  <div style="margin-top:60px;background-color: whitesmoke; height: 100%; width: 100%">
     <div class="site-banner">
       <div class="site-banner-main">
         <div class="site-zfj site-zfj-anim">
diff --git a/src/css/layer.css b/src/css/layer.css
index 2fad1e0e..db5b9c6b 100644
--- a/src/css/layer.css
+++ b/src/css/layer.css
@@ -24,7 +24,6 @@ html #layuicss-layer {
   left: 0;
   width: 100%;
   height: 100%;
-  _height: expression(document.body.offsetHeight + 'px');
 }
 
 .layui-layer {
@@ -839,7 +838,6 @@ html #layuicss-layer {
   height: 44px;
   margin-top: -22px;
   outline: 0;
-  blr: expression(this.onFocus=this.blur());
 }
 
 .layui-layer-imgprev {
@@ -873,7 +871,6 @@ html #layuicss-layer {
   width: 100%;
   height: 40px;
   line-height: 40px;
-  background-color: #000\9;
   filter: Alpha(opacity=60);
   background-color: rgba(2, 0, 0, 0.35);
   color: #fff;
diff --git a/src/module/carousel/index.vue b/src/module/carousel/index.vue
index b65d303a..df8eef1d 100644
--- a/src/module/carousel/index.vue
+++ b/src/module/carousel/index.vue
@@ -35,7 +35,14 @@
   </div>
 </template>
 <script setup name="LayCarousel" lang="ts">
-import { withDefaults, defineProps, provide, useSlots, ref, computed } from 'vue'
+import {
+  withDefaults,
+  defineProps,
+  provide,
+  useSlots,
+  ref,
+  computed,
+} from 'vue'
 
 const slot = useSlots() as any
 const slots = slot.default && (slot.default() as any[])
@@ -54,7 +61,7 @@ const props = withDefaults(
     height: '280px',
     anim: 'default',
     arrow: 'hover',
-    indicator: 'inside'
+    indicator: 'inside',
   }
 )
 
@@ -99,4 +106,4 @@ const next = function () {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/module/footer/index.vue b/src/module/footer/index.vue
index d489056d..c042ef0d 100644
--- a/src/module/footer/index.vue
+++ b/src/module/footer/index.vue
@@ -16,4 +16,4 @@ export default {
 .layui-footer {
   box-sizing: border-box;
 }
-</style>
\ No newline at end of file
+</style>