diff --git a/package/component/package.json b/package/component/package.json
index 7aa6039b..e5ad67df 100644
--- a/package/component/package.json
+++ b/package/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
diff --git a/package/component/src/component/affix/index.vue b/package/component/src/component/affix/index.vue
index cf1fdc4f..c7af5305 100644
--- a/package/component/src/component/affix/index.vue
+++ b/package/component/src/component/affix/index.vue
@@ -18,12 +18,12 @@ export interface LayAiffxProps {
 }
 const props = withDefaults(defineProps<LayAiffxProps>(), {
   offset: 0,
-  position: 'top',
+  position: "top",
   target: () => {
     return document.body;
   },
 });
-const emit = defineEmits(['scroll'])
+const emit = defineEmits(["scroll"]);
 const outWindow = ref(false);
 const dom = ref();
 
@@ -43,7 +43,7 @@ const getStyle = computed(() => {
       bottom: "unset",
       left: orginOffsetLeft - marginLeft + "px",
     };
-    if (props.position === 'top') {
+    if (props.position === "top") {
       style.top = fixedOffset - marginTop + "px";
     } else {
       style.bottom = fixedOffset - marginBottom + "px";
@@ -56,7 +56,7 @@ const checkInWindow = () => {
   if (dom.value) {
     let offsetTop = dom.value.offsetTop;
     let scrollTop = props.target?.scrollTop;
-    if (props.position === 'top') {
+    if (props.position === "top") {
       //top检查 当前元素与容器顶部距离-减去滚动条的高度+容器offsetTop
       let result = offsetTop - scrollTop + props.target.offsetTop;
       if (result < fixedOffset) {
@@ -82,15 +82,15 @@ const checkInWindow = () => {
         }
       } else {
         if (result < fixedOffset) {
-          changeScrollTop = scrollTop - result + props.offset
+          changeScrollTop = scrollTop - result + props.offset;
           outWindow.value = true;
         }
       }
     }
-    emit('scroll', {
+    emit("scroll", {
       targetScroll: scrollTop,
       affixed: outWindow.value,
-      offset: !outWindow.value ? 0 : Math.abs(scrollTop - changeScrollTop)
+      offset: !outWindow.value ? 0 : Math.abs(scrollTop - changeScrollTop),
     });
   }
 };
@@ -106,14 +106,14 @@ const getDomStyle = (dom: any, attr: string) => {
 
 onMounted(() => {
   nextTick(() => {
-    orginOffsetTop = dom.value.offsetTop - props.target.offsetTop
-    orginOffsetLeft = dom.value.getBoundingClientRect().left
-    marginLeft = parseFloat(getDomStyle(dom.value, 'marginLeft'))
-    marginTop = parseFloat(getDomStyle(dom.value, 'marginTop'))
-    marginBottom = parseFloat(getDomStyle(dom.value, 'marginBottom'))
-    fixedOffset = props.offset + props.target.offsetTop
-    if (props.position === 'bottom') {
-      fixedOffset = props.offset
+    orginOffsetTop = dom.value.offsetTop - props.target.offsetTop;
+    orginOffsetLeft = dom.value.getBoundingClientRect().left;
+    marginLeft = parseFloat(getDomStyle(dom.value, "marginLeft"));
+    marginTop = parseFloat(getDomStyle(dom.value, "marginTop"));
+    marginBottom = parseFloat(getDomStyle(dom.value, "marginBottom"));
+    fixedOffset = props.offset + props.target.offsetTop;
+    if (props.position === "bottom") {
+      fixedOffset = props.offset;
     }
     props.target.addEventListener("scroll", checkInWindow, true);
     checkInWindow();
diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
index 3481b61c..890e01c7 100644
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@@ -174,7 +174,7 @@ function findData(orginData: any, level: number) {
 const dataContainer = ref<any>([]);
 const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
   treeData.value[parentIndex].selectIndex = selectIndex;
-  if (item.children) {
+  if (item.children && item.children.length > 0) {
     treeData.value[parentIndex + 1].selectIndex = null;
     treeData.value[parentIndex + 1].data = findData(item.children, 1);
   }
diff --git a/package/component/src/component/colorPicker/index.vue b/package/component/src/component/colorPicker/index.vue
index 19b6dbed..e4fb98d3 100644
--- a/package/component/src/component/colorPicker/index.vue
+++ b/package/component/src/component/colorPicker/index.vue
@@ -72,11 +72,9 @@ watch([red, green, blue], (newValue) => {
     rgba2hex(red.value, green.value, blue.value, alpha.value)
   );
   let { h, s, v } = rgb2hsv(red.value, green.value, blue.value);
-  hue.value = h;
   saturation.value = s;
   value.value = v;
   pointStyle.value = `top: ${100 - v * 100}%;left: ${s * 100}%;`;
-  hueSliderStyle.value = `left: ${(hue.value / 360) * 100}%;`;
 });
 
 watch(alpha, () => {
diff --git a/package/component/src/component/datePicker/index.vue b/package/component/src/component/datePicker/index.vue
index 861e4eee..75050771 100644
--- a/package/component/src/component/datePicker/index.vue
+++ b/package/component/src/component/datePicker/index.vue
@@ -1,10 +1,12 @@
 <template>
   <div>
     <lay-dropdown ref="dropdownRef" :disabled="props.disabled">
-      <lay-input :name="name" :value="dateValue || modelValue" readonly>
-        <template #prefix>
-          <lay-icon type="layui-icon-date"></lay-icon>
-        </template>
+      <lay-input
+        readonly
+        :name="name"
+        :value="dateValue || modelValue"
+        prefix-icon="layui-icon-date"
+      >
       </lay-input>
       <template #content>
         <!-- 日期选择 -->
diff --git a/package/component/src/component/dropdown/index.less b/package/component/src/component/dropdown/index.less
index 37e8fb39..68dfa6b9 100644
--- a/package/component/src/component/dropdown/index.less
+++ b/package/component/src/component/dropdown/index.less
@@ -34,6 +34,7 @@
 
 .layui-dropdown .layui-menu li {
   position: relative;
+  display: flex;
   line-height: 26px;
   color: rgba(0, 0, 0, 0.8);
   font-size: 14px;
@@ -46,7 +47,19 @@
 }
 
 .layui-dropdown .layui-menu-body-title {
-  position: relative;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.layui-dropdown-menu-prefix{
+  margin-right: 8px;
+}
+.layui-dropdown-menu-suffix{
+  margin-left: 15px;
+}
+
+.layui-dropdown .layui-line-horizontal{
+  margin: 0px;
+  border-color: #EEEEEE;
 }
\ No newline at end of file
diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue
index 8a4a8b5f..3a947ef0 100644
--- a/package/component/src/component/dropdown/index.vue
+++ b/package/component/src/component/dropdown/index.vue
@@ -387,11 +387,15 @@ const handleClick = () => {
   }
 };
 
-const handleContextMenuClick = () => {
+const handleContextMenuClick = (e: Event) => {
   if (props.disabled || (openState.value && !props.clickToClose)) {
     return;
   }
   if (triggerMethods.value.includes("contextMenu")) {
+    e.preventDefault();
+    if (props.alignPoint) {
+      hide();
+    }
     toggle();
   }
 };
@@ -511,7 +515,7 @@ defineExpose({ open, hide, toggle });
     @focusout="handleFocusout()"
     :class="{ 'layui-dropdown-up': openState }"
   >
-    <div @click="handleClick()" @contextmenu.prevent="handleContextMenuClick()">
+    <div @click="handleClick()" @contextmenu="handleContextMenuClick">
       <slot></slot>
     </div>
     <dl
diff --git a/package/component/src/component/dropdownMenuItem/index.vue b/package/component/src/component/dropdownMenuItem/index.vue
index 8e31dd76..abc4a11b 100644
--- a/package/component/src/component/dropdownMenuItem/index.vue
+++ b/package/component/src/component/dropdownMenuItem/index.vue
@@ -15,9 +15,18 @@ const handleClick = () => {
 </script>
 
 <template>
-  <li>
-    <div class="layui-menu-body-title" @click="handleClick">
-      <slot></slot>
-    </div>
+  <li
+    @click="handleClick"
+    :style="$slots.suffix ? `justify-content: space-between;` : ''"
+  >
+    <span class="layui-menu-body-title">
+      <span v-if="$slots.prefix" class="layui-dropdown-menu-prefix">
+        <slot name="prefix" />
+      </span>
+      <slot />
+    </span>
+    <span v-if="$slots.suffix" class="layui-dropdown-menu-suffix">
+      <slot name="suffix" />
+    </span>
   </li>
 </template>
diff --git a/package/component/src/component/dropdownSubMenu/index.ts b/package/component/src/component/dropdownSubMenu/index.ts
new file mode 100644
index 00000000..bc751ebc
--- /dev/null
+++ b/package/component/src/component/dropdownSubMenu/index.ts
@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;
diff --git a/package/component/src/component/dropdownSubMenu/index.vue b/package/component/src/component/dropdownSubMenu/index.vue
new file mode 100644
index 00000000..53ab2097
--- /dev/null
+++ b/package/component/src/component/dropdownSubMenu/index.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+export default {
+  name: "LayDropdownSubMenu",
+};
+</script>
+
+<script setup lang="ts">
+import { inject, Ref } from "vue";
+import LayDropdown from "../dropdown/index.vue";
+import LayDropdownMenu from "../dropdownMenu/index.vue";
+import LayDropdownMenuItem from "../dropdownMenuItem/index.vue";
+import { LayIcon } from "@layui/icons-vue";
+import { DropdownPlacement } from "../dropdown/interface";
+
+export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
+
+export interface LayDropdownProps {
+  trigger?: DropdownTrigger | DropdownTrigger[];
+  placement?: DropdownPlacement;
+  disabled?: boolean;
+  contentOffset?: number;
+}
+
+const props = withDefaults(defineProps<LayDropdownProps>(), {
+  trigger: "hover",
+  disabled: false,
+  placement: "right-top",
+  contentOffset: 2,
+});
+</script>
+
+<template>
+  <lay-dropdown
+    :trigger="trigger"
+    :placement="placement"
+    :auto-fit-min-width="false"
+    :contentOffset="contentOffset"
+  >
+    <lay-dropdown-menu-item>
+      <template v-if="$slots.prefix" #prefix>
+        <slot name="prefix" />
+      </template>
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+      <template #suffix>
+        <slot name="suffix">
+          <lay-icon type="layui-icon-right" size="14px"></lay-icon>
+        </slot>
+      </template>
+    </lay-dropdown-menu-item>
+    <template #content>
+      <lay-dropdown-menu>
+        <slot name="content" />
+      </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>
diff --git a/package/component/src/component/input/index.less b/package/component/src/component/input/index.less
index 4dc92a0a..59f91a2b 100644
--- a/package/component/src/component/input/index.less
+++ b/package/component/src/component/input/index.less
@@ -25,8 +25,9 @@
   border-radius: var(--input-border-radius);
 }
 
+.layui-input-wrapper:hover,
 .layui-input-wrapper:focus-within {
-  border-color: var(--global-checked-color);
+  border-color: #d2d2d2 !important;
 }
 
 .layui-input-prefix {
@@ -55,14 +56,6 @@
   color: rgba(0, 0, 0, 0.45);
 }
 
-.layui-input:hover {
-  border-color: #eee !important;
-}
-
-.layui-input:focus {
-  border-color: #d2d2d2 !important;
-}
-
 .layui-input::-webkit-input-placeholder {
   line-height: 1.3;
 }
diff --git a/package/component/src/component/select/index.vue b/package/component/src/component/select/index.vue
index 2d456cc4..2e4d66f5 100644
--- a/package/component/src/component/select/index.vue
+++ b/package/component/src/component/select/index.vue
@@ -20,6 +20,7 @@ import {
   shallowRef,
 } from "vue";
 import LayBadge from "../badge/index.vue";
+import LayInput from "../input/index.vue";
 import LayScroll from "../scroll/index.vue";
 import { onClickOutside } from "@vueuse/core";
 import { SelectItem } from "../../types";
diff --git a/package/component/src/component/tab/RenderTitle.vue b/package/component/src/component/tab/RenderTitle.vue
new file mode 100644
index 00000000..9b6d4922
--- /dev/null
+++ b/package/component/src/component/tab/RenderTitle.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+import { h, PropType, defineComponent } from "vue";
+import { TabData } from "./interface";
+
+export default defineComponent({
+  name: "RenderTitle",
+  props: {
+    tag: {
+      type: String,
+      required: false,
+      default: "span",
+    },
+    tabItemData: {
+      type: Object as PropType<TabData>,
+      required: false,
+    },
+  },
+  setup(props) {
+    return props.tabItemData?.slots?.title
+      ? () =>
+          h(
+            props.tag,
+            props.tabItemData?.slots?.title && props.tabItemData?.slots.title()
+          )
+      : () => props.tabItemData?.title;
+  },
+});
+</script>
diff --git a/package/component/src/component/tab/index.vue b/package/component/src/component/tab/index.vue
index 104a020c..14f423cf 100644
--- a/package/component/src/component/tab/index.vue
+++ b/package/component/src/component/tab/index.vue
@@ -8,6 +8,7 @@ export default {
 import "./index.less";
 import { LayIcon } from "@layui/icons-vue";
 import tabItem from "../tabItem/index.vue";
+import RenderTitle from "./renderTitle.vue";
 import {
   Component,
   computed,
@@ -21,8 +22,10 @@ import {
   onMounted,
   nextTick,
   CSSProperties,
+  reactive,
 } from "vue";
 import { useResizeObserver } from "@vueuse/core";
+import { TabData, TabInjectKey } from "./interface";
 
 export type tabPositionType = "top" | "bottom" | "left" | "right";
 
@@ -40,6 +43,7 @@ const slot = useSlots();
 const slots = slot.default && slot.default();
 const childrens: Ref<VNode[]> = ref([]);
 const slotsChange = ref(true);
+const tabMap = reactive(new Map<number, TabData>());
 
 const setItemInstanceBySlot = function (nodeList: VNode[]) {
   nodeList?.map((item) => {
@@ -67,6 +71,32 @@ const active = computed({
   },
 });
 
+const tabItems = computed(() => {
+  const tabData: TabData[] = [];
+  childrens.value.forEach((item) => {
+    const tab = tabMap.get(item.props?.id);
+    if (tab) tabData.push(tab);
+  });
+  return tabData;
+});
+
+const addItem = (id: number, data: any) => {
+  tabMap.set(id, data);
+};
+
+const removeItem = (id: number) => {
+  tabMap.delete(id);
+};
+
+provide(
+  TabInjectKey,
+  reactive({
+    active: active,
+    addItem,
+    removeItem,
+  })
+);
+
 const change = function (id: any) {
   if (props.beforeLeave && props.beforeLeave(id) === false) {
     return;
@@ -294,16 +324,16 @@ provide("slotsChange", slotsChange);
           :style="tabBarStyle"
         ></div>
         <li
-          v-for="(children, index) in childrens"
-          :key="children.props?.id"
-          :class="[children.props?.id === active ? 'layui-this' : '']"
-          @click.stop="change(children.props?.id)"
+          v-for="(children, index) in tabItems"
+          :key="children.id"
+          :class="[children.id === active ? 'layui-this' : '']"
+          @click.stop="change(children.id)"
         >
-          {{ children.props?.title }}
+          <RenderTitle :tabItemData="children"></RenderTitle>
           <i
-            v-if="allowClose && children.props?.closable != false"
+            v-if="allowClose && children.closable != false"
             class="layui-icon layui-icon-close layui-unselect layui-tab-close"
-            @click.stop="close(index, children.props?.id)"
+            @click.stop="close(index, children.id)"
           ></i>
         </li>
       </ul>
diff --git a/package/component/src/component/tab/interface.ts b/package/component/src/component/tab/interface.ts
new file mode 100644
index 00000000..b0805e3b
--- /dev/null
+++ b/package/component/src/component/tab/interface.ts
@@ -0,0 +1,16 @@
+import { Slots } from "vue";
+
+export const TabInjectKey = Symbol("layuiTab");
+
+export interface TabData {
+  id: string;
+  title?: string;
+  closable?: string | boolean;
+  slots: Slots;
+}
+
+export interface TabsContext {
+  active: string;
+  addItem: (id: string, data: TabData) => void;
+  removeItem: (id: string) => void;
+}
diff --git a/package/component/src/component/tabItem/index.vue b/package/component/src/component/tabItem/index.vue
index 6f4e5874..9822bff8 100644
--- a/package/component/src/component/tabItem/index.vue
+++ b/package/component/src/component/tabItem/index.vue
@@ -5,7 +5,18 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { withDefaults, inject, Ref } from "vue";
+import {
+  withDefaults,
+  inject,
+  Ref,
+  useSlots,
+  getCurrentInstance,
+  computed,
+  reactive,
+  onBeforeUnmount,
+  toRefs,
+} from "vue";
+import { TabInjectKey, TabsContext } from "../tab/interface";
 
 export interface LayTabItemProps {
   id: string;
@@ -17,9 +28,29 @@ const props = withDefaults(defineProps<LayTabItemProps>(), {
   closable: true,
 });
 
+const instance = getCurrentInstance();
+const slots = useSlots();
 const active = inject("active");
 const slotsChange: Ref<boolean> = inject("slotsChange") as Ref<boolean>;
 slotsChange.value = !slotsChange.value;
+const tabsCtx = inject<Partial<TabsContext>>(TabInjectKey, {});
+
+const data = reactive({
+  id: props.id,
+  title: props.title,
+  closable: props.closable,
+  slots: slots,
+});
+
+if (instance?.uid) {
+  tabsCtx.addItem?.(props.id, data);
+}
+
+onBeforeUnmount(() => {
+  if (instance?.uid) {
+    tabsCtx.removeItem?.(props.id);
+  }
+});
 </script>
 
 <template>
diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue
index a85ef8f6..cb5facfb 100644
--- a/package/component/src/component/table/TableRow.vue
+++ b/package/component/src/component/table/TableRow.vue
@@ -10,8 +10,10 @@ import { computed, ref, useSlots, WritableComputedRef } from "vue";
 import LayCheckbox from "../checkbox/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import LayTooltip from "../tooltip/index.vue";
+import { LayIcon } from "@layui/icons-vue";
 
 export interface LayTableRowProps {
+  index: number;
   indentSize: number;
   currentIndentSize: number;
   expandSpace: boolean;
@@ -20,6 +22,10 @@ export interface LayTableRowProps {
   childrenColumnName?: string;
   columns: Recordable[];
   checkbox?: boolean;
+  cellClassName: string | Function;
+  cellStyle: string | Function;
+  rowClassName: string | Function;
+  rowStyle: string | Function;
   id: string;
   data: any;
 }
@@ -35,6 +41,8 @@ const emit = defineEmits([
 const props = withDefaults(defineProps<LayTableRowProps>(), {
   checkbox: false,
   childrenColumnName: "children",
+  cellStyle: "",
+  cellClassName: "",
 });
 
 const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
@@ -75,11 +83,51 @@ const handleExpand = () => {
   isExpand.value = !isExpand.value;
 };
 
+const renderCellStyle = (
+  row: any,
+  column: any,
+  rowIndex: number,
+  columnIndex: number
+) => {
+  if (typeof props.cellStyle === "string") {
+    return props.cellStyle;
+  }
+  return props.cellStyle(row, column, rowIndex, columnIndex);
+};
+
+const renderCellClassName = (
+  row: any,
+  column: any,
+  rowIndex: number,
+  columnIndex: number
+) => {
+  if (typeof props.cellClassName === "string") {
+    return props.cellClassName;
+  }
+  return props.cellClassName(row, column, rowIndex, columnIndex);
+};
+
+const renderRowStyle = (data: any, index: number) => {
+  if (typeof props.rowStyle === "string") {
+    return props.rowStyle;
+  }
+  return props.rowStyle(data, index);
+};
+
+const renderRowClassName = (data: any, index: number) => {
+  if (typeof props.rowClassName === "string") {
+    return props.rowClassName;
+  }
+  return props.rowClassName(data, index);
+};
+
 const childrenIndentSize = props.currentIndentSize + props.indentSize;
 </script>
 
 <template>
   <tr
+    :style="[renderRowStyle(data, index)]"
+    :class="[renderRowClassName(data, index)]"
     @click.stop="rowClick(data, $event)"
     @dblclick.stop="rowDoubleClick(data, $event)"
     @contextmenu.stop="contextmenu(data, $event)"
@@ -96,21 +144,25 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
     </td>
 
     <!-- 数据列 -->
-    <template v-for="(column, index) in columns" :key="column">
+    <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <!-- 展示否 -->
       <template v-if="tableColumnKeys.includes(column.key)">
         <!-- 插槽列 -->
         <template v-if="column.customSlot">
           <td
             class="layui-table-cell"
-            :style="{
-              textAlign: column.align,
-              whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-            }"
+            :style="[
+              {
+                textAlign: column.align,
+                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+              },
+              renderCellStyle(data, column, index, columnIndex),
+            ]"
+            :class="[renderCellClassName(data, column, index, columnIndex)]"
           >
             <!-- 树表占位与缩进 -->
             <span
-              v-if="expandSpace && index === 0"
+              v-if="expandSpace && columnIndex === 0"
               :style="{ 'margin-right': currentIndentSize + 'px' }"
             ></span>
 
@@ -119,13 +171,15 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                 expandSpace &&
                 !data[childrenColumnName] &&
                 !slot.expand &&
-                index === 0
+                columnIndex === 0
               "
               class="layui-table-cell-expand-icon-spaced"
             ></span>
 
             <lay-icon
-              v-if="(slot.expand || data[childrenColumnName]) && index === 0"
+              v-if="
+                (slot.expand || data[childrenColumnName]) && columnIndex === 0
+              "
               class="layui-table-cell-expand-icon"
               :type="expandIconType"
               @click="handleExpand"
@@ -147,14 +201,18 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
           <template v-if="column.key in data">
             <td
               class="layui-table-cell"
-              :style="{
-                textAlign: column.align,
-                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
-              }"
+              :style="[
+                {
+                  textAlign: column.align,
+                  whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+                },
+                renderCellStyle(data, column, index, columnIndex),
+              ]"
+              :class="[renderCellClassName(data, column, index, columnIndex)]"
             >
               <!-- 树表占位与缩进 -->
               <span
-                v-if="expandSpace && index === 0"
+                v-if="expandSpace && columnIndex === 0"
                 :style="{ 'margin-right': currentIndentSize + 'px' }"
               ></span>
 
@@ -163,13 +221,15 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
                   expandSpace &&
                   !data[childrenColumnName] &&
                   !slot.expand &&
-                  index === 0
+                  columnIndex === 0
                 "
                 class="layui-table-cell-expand-icon-spaced"
               ></span>
 
               <lay-icon
-                v-if="(slot.expand || data[childrenColumnName]) && index === 0"
+                v-if="
+                  (slot.expand || data[childrenColumnName]) && columnIndex === 0
+                "
                 class="layui-table-cell-expand-icon"
                 :type="expandIconType"
                 @click="handleExpand"
@@ -198,11 +258,12 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
   <!-- 树形结构 -->
   <template v-if="data[childrenColumnName] && isExpand">
     <template
-      v-for="(children, index) in data[childrenColumnName]"
-      :key="index"
+      v-for="(children, childrenIndex) in data[childrenColumnName]"
+      :key="childrenIndex"
     >
       <table-row
         :id="id"
+        :index="childrenIndex"
         :data="children"
         :columns="columns"
         :indent-size="indentSize"
@@ -210,6 +271,10 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
         :checkbox="checkbox"
         :tableColumnKeys="tableColumnKeys"
         :expandSpace="expandSpace"
+        :cellStyle="cellStyle"
+        :cellClassName="cellClassName"
+        :rowStyle="rowStyle"
+        :rowClassName="rowClassName"
         @row="rowClick"
         @row-double="rowDoubleClick"
         @contextmenu="contextmenu"
diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue
index 8ae6435c..92265df1 100644
--- a/package/component/src/component/table/index.vue
+++ b/package/component/src/component/table/index.vue
@@ -30,6 +30,10 @@ export interface LayTableProps {
   height?: number;
   maxHeight?: string;
   even?: boolean;
+  rowClassName?: string | Function;
+  cellClassName?: string | Function;
+  rowStyle?: string | Function;
+  cellStyle?: string | Function;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -41,6 +45,10 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   selectedKeys: () => [],
   maxHeight: "auto",
   even: false,
+  rowClassName: "",
+  cellClassName: "",
+  rowStyle: "",
+  cellStyle: "",
 });
 
 const tableId = uuidv4();
@@ -384,9 +392,10 @@ props.dataSource.map((value: any) => {
             </colgroup>
             <tbody>
               <!-- 渲染 -->
-              <template v-for="data in tableDataSource" :key="data">
+              <template v-for="(data, index) in tableDataSource" :key="data">
                 <table-row
                   :id="id"
+                  :index="index"
                   :data="data"
                   :columns="columns"
                   :checkbox="checkbox"
@@ -394,6 +403,10 @@ props.dataSource.map((value: any) => {
                   :currentIndentSize="currentIndentSize"
                   :tableColumnKeys="tableColumnKeys"
                   :expandSpace="childrenExpandSpace"
+                  :cellStyle="cellStyle"
+                  :cellClassName="cellClassName"
+                  :rowStyle="rowStyle"
+                  :rowClassName="rowClassName"
                   @row="rowClick"
                   @row-double="rowDoubleClick"
                   @contextmenu="contextmenu"
diff --git a/package/component/src/component/tooltip/index.vue b/package/component/src/component/tooltip/index.vue
index 3f2b3576..bbf7e367 100644
--- a/package/component/src/component/tooltip/index.vue
+++ b/package/component/src/component/tooltip/index.vue
@@ -12,6 +12,7 @@
 import "./index.less";
 import LayPopper from "../popper/index.vue";
 import { defineComponent, ref } from "vue";
+import { useEventListener } from "@vueuse/core";
 export default defineComponent({
   name: "LayTooltip",
   components: {
@@ -45,7 +46,7 @@ export default defineComponent({
   },
   setup() {
     const isMounted = ref(false);
-    const refTooltip = ref(null);
+    const refTooltip = ref<any>(null);
     return {
       isMounted,
       refTooltip,
@@ -57,11 +58,20 @@ export default defineComponent({
     },
   },
   mounted() {
+    if (this.isAutoShow) {
+      useEventListener("resize", () => {
+        this.setEllipsis();
+      });
+    }
     this.$nextTick(() => {
+      this.setEllipsis();
+    });
+  },
+  methods: {
+    setEllipsis() {
       if (this.refTooltip) {
-        if (
-          this.refTooltip.offsetWidth >= this.refTooltip.firstChild.offsetWidth
-        ) {
+        let tooltipHtml = this.refTooltip;
+        if (tooltipHtml.offsetWidth >= tooltipHtml.firstChild.offsetWidth) {
           this.isMounted = false;
         } else {
           this.isMounted = true;
@@ -69,7 +79,7 @@ export default defineComponent({
       } else {
         this.isMounted = true;
       }
-    });
+    },
   },
 });
 </script>
diff --git a/package/component/src/index.ts b/package/component/src/index.ts
index 065204b7..300b1b3a 100644
--- a/package/component/src/index.ts
+++ b/package/component/src/index.ts
@@ -57,6 +57,7 @@ import LayRate from "./component/rate/index";
 import LayDropdown from "./component/dropdown/index";
 import LayDropdownMenu from "./component/dropdownMenu/index";
 import LayDropdownMenuItem from "./component/dropdownMenuItem/index";
+import LayDropdownSubMenu from "./component/dropdownSubMenu/index";
 import LayTab from "./component/tab/index";
 import LayTabItem from "./component/tabItem/index";
 import LayTree from "./component/tree/index";
@@ -140,6 +141,7 @@ const components: Record<string, Plugin> = {
   LayDropdown,
   LayDropdownMenu,
   LayDropdownMenuItem,
+  LayDropdownSubMenu,
   LayTab,
   LayTabItem,
   LayIconPicker,
@@ -232,6 +234,7 @@ export {
   LayDropdown,
   LayDropdownMenu,
   LayDropdownMenuItem,
+  LayDropdownSubMenu,
   LayTab,
   LayTabItem,
   LayIconPicker,
diff --git a/package/component/src/provider/index.vue b/package/component/src/provider/index.vue
index 1c1997c7..92862c11 100644
--- a/package/component/src/provider/index.vue
+++ b/package/component/src/provider/index.vue
@@ -13,6 +13,7 @@ import {
   enable as enableDarkMode,
   disable as disableDarkMode,
   auto as followSystemColorScheme,
+  setFetchMethod,
 } from "@umijs/ssr-darkreader";
 
 export interface LayConfigProviderProps {
@@ -71,6 +72,9 @@ const changeTheme = (theme: string) => {
   };
   Object.assign(defaultPartial, props.darkPartial);
   if (theme === "dark") {
+    if (window) {
+      setFetchMethod(window.fetch);
+    }
     enableDarkMode(defaultPartial, defaultFixes);
   } else if (theme === "light") {
     disableDarkMode();
diff --git a/package/document-component/src/document/zh-CN/components/cascader.md b/package/document-component/src/document/zh-CN/components/cascader.md
index 4386dac8..39049769 100644
--- a/package/document-component/src/document/zh-CN/components/cascader.md
+++ b/package/document-component/src/document/zh-CN/components/cascader.md
@@ -318,7 +318,7 @@ const valueLv=ref(null)
 
 ::: title 触发方式
 :::
-::: demo 本组弹出效果依托于DropDown组件，触发方式与其保持一致
+::: demo 本组件弹出效果依托于DropDown组件，触发方式与其保持一致
 <template>
   <lay-cascader :options="options"  placeholder="click触发(默认)" style="width:250px;margin-right:20px"></lay-cascader>
   <lay-cascader :options="options"  placeholder="hover触发" style="width:250px;margin-right:20px" trigger="hover"></lay-cascader>
diff --git a/package/document-component/src/document/zh-CN/components/dropdown.md b/package/document-component/src/document/zh-CN/components/dropdown.md
index cb2fbec5..85296465 100644
--- a/package/document-component/src/document/zh-CN/components/dropdown.md
+++ b/package/document-component/src/document/zh-CN/components/dropdown.md
@@ -362,6 +362,104 @@ export default {
 
 :::
 
+::: title 菜单插槽
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown>
+    <lay-button type="primary">图标菜单</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-return"></lay-icon></template>
+            <template #default>返回</template>
+            <template #suffix><span style="margin-left: 50px; font-size:10px">Alt + 向左键</span></template>
+          </lay-dropdown-menu-item>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-refresh"></lay-icon></template>
+            <template #default>刷新</template>
+            <template #suffix><span style="font-size:10px">Ctrl + R</span></template>
+          </lay-dropdown-menu-item>
+          <lay-line></lay-line>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-about"></lay-icon></template>
+            <template #default>更多</template>
+            <template #suffix><lay-icon type="layui-icon-right"></lay-icon></template>
+          </lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 多级菜单
+:::
+
+::: demo
+
+<template>
+  <lay-dropdown>
+    <lay-button type="primary">下拉菜单</lay-button>
+    <template #content>
+        <lay-dropdown-menu>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-list"></lay-icon></template>
+            <template #default>选项一</template>
+          </lay-dropdown-menu-item>
+          <lay-dropdown-sub-menu>
+            <template #prefix><lay-icon type="layui-icon-set-sm"></lay-icon></template>
+            <template #default>选项二</template>
+            <template #content>
+              <lay-dropdown-menu-item>子菜单一</lay-dropdown-menu-item>
+              <lay-dropdown-menu-item>子菜单二</lay-dropdown-menu-item>
+              <lay-dropdown-sub-menu>
+                <template #default>子菜单三</template>
+                <template #content>
+                   <lay-dropdown-menu-item>菜单1</lay-dropdown-menu-item>
+                   <lay-dropdown-menu-item>菜单2</lay-dropdown-menu-item>
+                   <lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item>
+                </template>
+              </lay-dropdown-sub-menu>
+            </template>
+          </lay-dropdown-sub-menu>
+          <lay-dropdown-menu-item>
+            <template #prefix><lay-icon type="layui-icon-share"></lay-icon></template>
+            <template #default>选项三</template>
+          </lay-dropdown-menu-item>
+        </lay-dropdown-menu>
+    </template>
+  </lay-dropdown>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 其它属性
 :::
 
@@ -498,6 +596,47 @@ export default {
 
 :::
 
+::: title Dropdown Menu Item 插槽
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| prefix | 前缀 | --     |
+| default | 默认 | --     |
+| suffix | 后缀|--|
+
+:::
+
+::: title Dropdown Sub Menu 属性
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| trigger | 触发方式,类型 `string` 或 trigger 数组,默认 hover  | `click` `hover` `focus` `contextMenu` |
+| disabled | 是否禁用触发 | `true` `false` |
+| placement | 下拉面板位置,默认 right-top |`top` `bottom` `right` `left` `*-left` `*-right` `*-top` `*-bottom`|
+| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -| 
+
+:::
+
+::: title Dropdown Sub Menu 插槽
+:::
+
+::: table
+
+| 插槽    | 描述     | 参数 |
+| ------- | -------- | ------ |
+| prefix | 前缀 | --     |
+| default | 默认 | --     |
+| suffix | 后缀|--|
+| content | 下拉面板内容|--|
+
+:::
+
 
 ::: contributor dropdown
 :::
diff --git a/package/document-component/src/document/zh-CN/components/skeleton.md b/package/document-component/src/document/zh-CN/components/skeleton.md
index 81c0f7b3..9ffae74f 100644
--- a/package/document-component/src/document/zh-CN/components/skeleton.md
+++ b/package/document-component/src/document/zh-CN/components/skeleton.md
@@ -15,7 +15,7 @@
 <template>
 <div>
 <div style="margin-bottom: 10px">
-<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
+<lay-switch v-model="loading" onswitch-text="加载" unswitch-text="关闭"></lay-switch>
 </div>
   <lay-skeleton :rows="4" :loading="loading" animated>
     <p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
@@ -50,7 +50,7 @@ export default {
 <template>
 <div>
 <div style="margin-bottom: 10px">
-<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
+<lay-switch v-model="loading" onswitch-text="加载" unswitch-text="关闭"></lay-switch>
 </div>
   <lay-skeleton :loading="loading" animated>
         <template #skeleton>
diff --git a/package/document-component/src/document/zh-CN/components/switch.md b/package/document-component/src/document/zh-CN/components/switch.md
index d54376e7..edc2869e 100644
--- a/package/document-component/src/document/zh-CN/components/switch.md
+++ b/package/document-component/src/document/zh-CN/components/switch.md
@@ -97,7 +97,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-switch v-model="active4" active-text="白天"  inactive-text="夜间"></lay-switch>
+  <lay-switch v-model="active4" onswitch-text="白天"  unswitch-text="夜间"></lay-switch>
 </template>
 
 <script>
diff --git a/package/document-component/src/document/zh-CN/components/tab.md b/package/document-component/src/document/zh-CN/components/tab.md
index af7f8234..14685d8f 100644
--- a/package/document-component/src/document/zh-CN/components/tab.md
+++ b/package/document-component/src/document/zh-CN/components/tab.md
@@ -36,6 +36,54 @@ export default {
 
 :::
 
+::: title 标题插槽
+:::
+
+::: demo
+
+<template>
+  <lay-tab v-model="current11" :allow-close="true">
+    <lay-tab-item title="选项一" id="1">
+      <template #title>
+        <lay-icon type="layui-icon-console"></lay-icon>
+        <span style="margin-left:10px">选项一</span>
+      </template>
+      <div style="padding:20px">选项一</div>
+    </lay-tab-item>
+    <lay-tab-item title="选项一" id="2">
+      <template #title>
+        <lay-icon type="layui-icon-user"></lay-icon>
+        <span style="margin-left:10px">选项一</span>
+      </template>
+      <div style="padding:20px">选项二</div>
+    </lay-tab-item>
+    <lay-tab-item title="选项一" id="3">
+      <template #title>
+        <lay-icon type="layui-icon-set"></lay-icon>
+        <span style="margin-left:10px">选项一</span>
+      </template>
+      <div style="padding:20px">选项三</div>
+    </lay-tab-item>
+  </lay-tab>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const current11 = ref("1")
+
+    return {
+      current11
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 简约模式
 :::
 
@@ -359,6 +407,17 @@ export default {
 
 :::
 
+::: title Tab Item 插槽
+:::
+
+::: table
+
+| 属性     | 描述     | 参数 |
+| -------- | -------- | ------ |
+| title    | 标题 | --     |
+
+:::
+
 ::: contributor tab
 ::: 
 
diff --git a/package/document-component/src/document/zh-CN/components/table.md b/package/document-component/src/document/zh-CN/components/table.md
index 010783e2..f8b12f12 100644
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@@ -530,6 +530,74 @@ export default {
 
 :::
 
+::: title 定义样式
+:::
+
+::: demo 通过 `cellStyle` `rowStyle` `cellClassName` `rowClassName` 属性, 自定义单元格样式。
+
+<template>
+  <lay-table :columns="columns1" :dataSource="dataSource1" :cellStyle="cellStyle" :rowStyle="rowStyle"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns1 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "180px",
+        key:"password"
+      },{
+        title:"年龄",
+        width: "180px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true,
+      }
+    ]
+
+    const dataSource1 = [
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+    ]
+
+    const cellStyle = function(row, column, rowIndex, columnIndex) {
+      if(columnIndex % 2 == 0) {
+        return 'color:red';
+      }
+    }
+
+    const rowStyle = function(row, rowIndex) {
+      if(rowIndex % 2 == 0) {
+        return 'color:blue';
+      }
+    }
+
+    return {
+      columns1,
+      dataSource1,
+      cellStyle,
+      rowStyle
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Table 属性
 :::
 
@@ -549,6 +617,11 @@ export default {
 | height               | 表格高度                      | `number`   | --   | -- |
 | maxHeight            | 表格最大高度                  | `number`   | --   | -- |
 | even                 | 斑马条纹                      | `boolean`  | `false`   | `true` `false` |
+| cellStyle            | 列样式 function(row, column, rowIndex, columnIndex)                  | `string` `function`   | -- | -- |
+| rowStyle             | 行样式 function(row, rowIndex)                  | `string` `function`  | --   | -- |
+| cellClassName        | 列类名称 function(row, column, rowIndex, columnIndex)               | `string` `function`   | --    | -- |
+| rowClassName         | 行类名称 function(row, rowIndex)                | `string` `function`  | --   | -- |
+
 :::
 
 ::: title Table 事件
diff --git a/package/document-component/src/document/zh-CN/components/tooltip.md b/package/document-component/src/document/zh-CN/components/tooltip.md
index 6937f770..33eec009 100644
--- a/package/document-component/src/document/zh-CN/components/tooltip.md
+++ b/package/document-component/src/document/zh-CN/components/tooltip.md
@@ -7,7 +7,12 @@
 ::: demo
 
 <template>
-<div style="width: 125px; ">
+<div style="max-width: 100%; ">
+ <lay-tooltip content="缩小浏览器时...假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" ref="tooltip" :isAutoShow="true">
+      缩小浏览器时...假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示
+  </lay-tooltip>
+</div>
+<div style="max-width: 124px;  margin-top: 20px">
  <lay-tooltip content="假装这里有文字提示" ref="tooltip" :isAutoShow="true">
       假装这里有文字提示
   </lay-tooltip>
@@ -105,8 +110,8 @@ setup() {
   <lay-tooltip :content="content" :is-dark="isDark" :disabled="!disabled">
     <lay-button>tooltip</lay-button>
   </lay-tooltip>
-  <lay-switch v-model="disabled" active-text="启用tooltip"  inactive-text="禁用tooltip" style="margin-left: 5px;"></lay-switch>
-  <lay-switch v-model="isDark" active-text="深色"  inactive-text="浅色" style="margin-left: 5px;"></lay-switch>
+  <lay-switch v-model="disabled" onswitch-text="启用tooltip"  unswitch-text="禁用tooltip" style="margin-left: 5px;"></lay-switch>
+  <lay-switch v-model="isDark" onswitch-text="深色"  unswitch-text="浅色" style="margin-left: 5px;"></lay-switch>
 </template>
 
 <script>
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 362d4d5c..f88ca0ae 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -11,17 +11,55 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.2.x">
-        <ul> 
-      <a name="1-2-3"></a> 
+    <ul> 
+      <a name="1-2-6"></a> 
       <li> 
-        <h3>1.2.3 <span class="layui-badge-rim">2022-06-26</span></h3> 
+        <h3>1.2.6 <span class="layui-badge-rim">2022-07-01</span></h3> 
+        <ul>
+          <li>[修复] tooltip 组件设置isAutoShow 属性时，宽度设置max-width 时拖动浏览器时出现...时，tooltip不显示问题。 by @dingyongya</li>
+          <li>[修复] table 组件设置 ellipsisTooltip 属性时 出现...时，tooltip不显示问题。by @dingyongya</li>
+        </ul>
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-2-5"></a> 
+      <li> 
+        <h3>1.2.5 <span class="layui-badge-rim">2022-06-29</span></h3> 
+        <ul>
+          <li>[新增] dropdown-sub-menu 组件, 用于呈现二级下拉菜单。</li>
+          <li>[新增] dropdown-menu-item 组件 default 插槽, 自定义内容。</li>
+          <li>[新增] dropdown-menu-item 组件 prefix 插槽, 自定义内容前缀。</li>
+          <li>[新增] dropdown-menu-item 组件 suffix 插槽, 自定义内容后缀。</li>
+          <li>[新增] table 组件 rowStyle 属性, 自定义行样式, 值为 function(row, rowIndex) 函数或 string 类型。</li>
+          <li>[新增] table 组件 rowClassName 属性, 自定义行样式, 值为 function(row, rowIndex) 函数或 string 类型。</li>
+          <li>[新增] table 组件 cellStyle 属性, 自定义单元格样式, 值为 function(row, column, rowIndex, columnIndex) 函数或 string 类型。</li>
+          <li>[新增] table 组件 cellClassName 属性, 自定义单元格样式, 值为 function(row, column, rowIndex, columnIndex) 函数或 string 类型。</li>
+          <li>[修复] icon-picker 组件在颜色面板中拉动选取颜色，触碰颜色面板边角时，导致色相变为 0。 </li>
+          <li>[修复] provider 组件切换主题 Embedded Dark Reader cannot access a cross-origin resource。</li>
+          <li>[修复] switch 组件 onswitch-text 与 unswitch-text 使用文档。</li>
+        </ul>
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-2-4"></a> 
+      <li> 
+        <h3>1.2.4 <span class="layui-badge-rim">2022-06-28</span></h3> 
         <ul>
           <li>[新增] select 组件 多选模式下 的搜索功能。 </li>
+          <li>[新增] table 组件 even 属性, 用于开启斑马条纹背景样式。</li>
+          <li>[新增] dropdown 组件 placement 属性 right left right-bottom right-top left-bottom left-top 值。</li>
+          <li>[新增] affix 组件, 使用锚点，可以将内容固定在容器内，并且不随容器的滚动而滚动，常用于侧边菜单导航等。 </li>
+          <li>[新增] affix 组件 position 属性, 用于设置固定的位置, 可选值为 top 与 bottom。</li>
+          <li>[新增] affix 组件 offset 属性, 定位偏移量, 默认为 0。</li>
+          <li>[新增] affix 组件 target 属性, 定位时的参考容器, 默认为 document.body。</li>
+          <li>[修复] date-picker 组件 prefix-icon 前置图标无边距的问题。</li>
+          <li>[修复] input 组件 foucs 状态时 border 颜色为 #d2d2d2。</li>
+          <li>[修复] cascader 组件 children 不能为空的问题。</li>
           <li>[修复] scroll 组件 按需加载时 index.css 不存在的问题。</li>
         </ul>
       </li>
     </ul>
-      <ul> 
+    <ul> 
       <a name="1-2-2"></a> 
       <li> 
         <h3>1.2.2 <span class="layui-badge-rim">2022-06-26</span></h3> 
diff --git a/package/document-component/src/document/zh-CN/guide/member.md b/package/document-component/src/document/zh-CN/guide/member.md
index 9f0c8980..3caa8a18 100644
--- a/package/document-component/src/document/zh-CN/guide/member.md
+++ b/package/document-component/src/document/zh-CN/guide/member.md
@@ -140,6 +140,25 @@
     </lay-row>
 </lay-card>
 
+<lay-card>
+    <lay-row>
+        <lay-col md="2">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/495/1486240_SmallWai_1656341928.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="3">
+            0o张不歪o0
+        </lay-col>
+        <lay-col md="8">
+            焦点：layui-vue layer-vue
+        </lay-col>
+        <lay-col md="4">
+            地点：中国 成都
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
 <br>
 
 ::: title 社区伙伴
diff --git a/package/document-layer/index.html b/package/document-layer/index.html
index e544e5fc..6c0fc6f3 100644
--- a/package/document-layer/index.html
+++ b/package/document-layer/index.html
@@ -21,6 +21,6 @@
     <div id="app">
       <!--app-html-->
     </div>
-    <script type="module" src="./entry-client.ts"></script>
+    <script type="module" src="./src/entry-client.ts"></script>
   </body>
 </html>
diff --git a/package/document-layer/App.vue b/package/document-layer/src/App.vue
similarity index 100%
rename from package/document-layer/App.vue
rename to package/document-layer/src/App.vue
diff --git a/package/document-layer/src/assets/css/index.css b/package/document-layer/src/assets/css/index.css
index 134350bc..ebe02b4e 100644
--- a/package/document-layer/src/assets/css/index.css
+++ b/package/document-layer/src/assets/css/index.css
@@ -6,7 +6,7 @@ button + button {
 button {
   height: 38px;
   line-height: 36px;
-  padding: 0 18px;
+  padding: 0 18px !important;
   color: #fff;
   font-size: 14px;
   text-align: center;
diff --git a/package/document-layer/src/components/Children2.vue b/package/document-layer/src/components/Children2.vue
index c0c7d11a..e98c09da 100644
--- a/package/document-layer/src/components/Children2.vue
+++ b/package/document-layer/src/components/Children2.vue
@@ -5,7 +5,7 @@
   </form>
 </template>
 <script setup>
-const emit = defineEmits("add", "sub");
+const emit = defineEmits(["add", "sub"]);
 
 const add = () => {
   emit("add");
diff --git a/package/document-layer/src/components/LayCode.vue b/package/document-layer/src/components/LayCode.vue
index 5ae046c0..7179c551 100644
--- a/package/document-layer/src/components/LayCode.vue
+++ b/package/document-layer/src/components/LayCode.vue
@@ -1,55 +1,27 @@
 <template>
   <div class="lay-code">
     <div id="source" class="source">
-      <slot />
+      <slot></slot>
       <div v-if="$slots.description" class="description">
-        <slot name="description" />
+        <slot name="description"></slot>
       </div>
     </div>
     <div ref="meta" class="meta">
       <div class="language-html">
-        <slot name="code" />
+        <slot name="code"></slot>
       </div>
     </div>
     <div :class="{ 'is-fixed': isFixContorl }" class="control">
-      <i class="layui-icon layui-icon-file btn" @click="copy"
-        ><svg
-          t="1646244236057"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="5505"
-          width="18"
-          height="18"
-        >
-          <path
-            d="M768 682.666667V170.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v512a85.333333 85.333333 0 0 0 85.333334 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333zM170.666667 170.666667h512v512H170.666667z m682.666666 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 0 85.333333 85.333334h426.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z"
-            p-id="5506"
-          ></path></svg
-      ></i>
-      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"
-        ><svg
-          t="1646244296040"
-          class="icon"
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="7127"
-          width="18"
-          height="18"
-        >
-          <path
-            d="M217.301333 414.933333a21.333333 21.333333 0 0 1-1.066666-30.165333l29.098666-31.232a21.333333 21.333333 0 0 1 30.165334-1.024l236.117333 220.16 236.16-220.16a21.333333 21.333333 0 0 1 30.122667 1.024l29.098666 31.232a21.333333 21.333333 0 0 1-1.024 30.165333L541.738667 661.333333l-13.44 14.421334a21.290667 21.290667 0 0 1-16.725334 6.741333 21.290667 21.290667 0 0 1-16.64-6.741333l-13.44-14.506667z"
-            p-id="7128"
-          ></path></svg
-      ></i>
+      <i class="layui-icon layui-icon-play btn" @click="onPlayground" />
+      <i class="layui-icon layui-icon-file btn" @click="copy"></i>
+      <i class="layui-icon layui-icon-fonts-code btn" @click="toggle"></i>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from "vue";
+import { usePlayGround } from "../composable/usePlayground";
 
 const meta = ref<HTMLElement>({} as HTMLElement);
 const isFixContorl = ref(false);
@@ -61,6 +33,13 @@ const toggle = function () {
   show.value = !show.value;
 };
 
+const onPlayground = async function () {
+  const foundCode = meta.value.querySelector(".language-html");
+  const sourceCode = foundCode?.textContent ?? "";
+  const { link } = await usePlayGround(sourceCode, true);
+  window.open(link);
+};
+
 const copy = function () {
   const foundCodes = meta.value.getElementsByClassName("language-html");
   const foundCode = foundCodes[0];
@@ -94,7 +73,9 @@ const copy = function () {
   }
 
   if (successful) {
+    window.alert("复制成功");
   } else {
+    window.alert("复制失败");
   }
 };
 
diff --git a/package/document-layer/src/composable/usePlayground.ts b/package/document-layer/src/composable/usePlayground.ts
new file mode 100644
index 00000000..e5b2d502
--- /dev/null
+++ b/package/document-layer/src/composable/usePlayground.ts
@@ -0,0 +1,147 @@
+import type { BuiltInParserName } from "prettier";
+import { zlibSync, unzlibSync, strToU8, strFromU8 } from "fflate";
+import extraCss from "../assets/css/index.css?raw";
+
+const scriptRe = /<script[^>]*>([\s\S]*)<\/script>/;
+const exportDefaultRe = /export\s*default\s*\{([\s\S]*)\}\;?\s*<\/script>/;
+const setupRe = /setup\s*\(\)\s*\{([\s\S]*)return\s*\{([\s\S]*)\}\;?\s*\}\;?/;
+const layerRe = /import\s*\{\s*layer\s*\}\s*from\s*[\"|\'][^\;\"\']*[\"|\']/;
+
+const MAIN_FILE_NAME = "App.vue";
+
+/**
+ * 将代码编码为 URI hash, 生成 playground 链接
+ * @param source 源码
+ * @param convertSetupSugar 转换 setup，仅字符串替换，没有做任何语法分析
+ * @returns 处理后的代码，URI hsah， playground 链接
+  }
+ */
+export const usePlayGround = async (
+  source: string,
+  convertSetupSugar: boolean
+) => {
+  const decodeCode = source;
+  const scriptResult = decodeCode.match(scriptRe);
+
+  // 替换 script 标签
+  // $1 正则第一个括号匹配的内容
+  let code: string | undefined = decodeCode;
+  if (convertSetupSugar) {
+    if (scriptResult) {
+      code = decodeCode.replace(
+        scriptRe,
+        `<script lang="ts" setup>$1
+        </script>`
+      );
+    } else {
+      code = `${decodeCode}
+      <script lang="ts" setup>
+
+      </script>`;
+    }
+
+    // 去除 export default,保留其中的内容
+    const exportDefaultResult = code.match(exportDefaultRe);
+    if (exportDefaultResult) {
+      code = code.replace(
+        exportDefaultRe,
+        trimBr(exportDefaultResult[1] + `</script>`).trim()
+      );
+      // console.log("export",code);
+    }
+    // 去除 setup 函数,保留其中的内容
+    const setupResult = code.match(setupRe);
+    if (setupResult) {
+      code = code.replace(setupRe, trimBr(setupResult[1]));
+      // console.log("setup",code);
+    }
+  }
+  // 替换 layer 引入语句
+  // playground 中使用最新版 layer 请从 @layui/layer-vue 引入
+  if (code.match(layerRe)) {
+    code = code.replace(layerRe, `import { layer } from "@layui/layer-vue"`);
+    // console.log("layer",code);
+  }
+
+  code = await formatCode(MAIN_FILE_NAME, code);
+  const originCode = {
+    [MAIN_FILE_NAME]: code,
+    "index.css": extraCss,
+  };
+
+  const encoded = utoa(JSON.stringify(originCode));
+  const link = `https://layui-vue.gitee.io/sandbox-vue/#${encoded}`;
+  return {
+    code,
+    encoded,
+    link,
+  };
+};
+
+/**
+ *
+ * @returns 格式化代码
+ */
+async function formatCode(filename: string, data: string) {
+  const [format, parserHtml, parserTypeScript, parserBabel, parserPostcss] =
+    await Promise.all([
+      import("prettier/standalone").then((r) => r.format),
+      import("prettier/parser-html").then((m) => m.default),
+      import("prettier/parser-typescript").then((m) => m.default),
+      import("prettier/parser-babel").then((m) => m.default),
+      import("prettier/parser-postcss").then((m) => m.default),
+    ]);
+  let code = data;
+  let parser: BuiltInParserName;
+  if (filename.endsWith(".vue")) {
+    parser = "vue";
+  } else if (filename.endsWith(".js")) {
+    parser = "babel";
+  } else if (filename.endsWith(".ts")) {
+    parser = "typescript";
+  } else if (filename.endsWith(".json")) {
+    parser = "json";
+  } else {
+    return;
+  }
+  code = format(code, {
+    parser,
+    plugins: [parserHtml, parserTypeScript, parserBabel, parserPostcss],
+    semi: false, // 语句末尾打印分号
+    singleQuote: true, // 使用单引号
+    vueIndentScriptAndStyle: false, // 是否缩进 Vue 文件中的 script 和 style 标签
+  });
+
+  return code;
+}
+
+/**
+ * 去除字符串两端的空白行
+ * @param str
+ * @returns
+ */
+function trimBr(str: string): string {
+  return str.replace(/(^[\r\n]*)|([\r\n]*$)/, "");
+}
+
+export function utoa(data: string): string {
+  const buffer = strToU8(data);
+  const zipped = zlibSync(buffer, { level: 9 });
+  const binary = strFromU8(zipped, true);
+  return btoa(binary);
+}
+
+export function atou(base64: string): string {
+  const binary = atob(base64);
+
+  // zlib header (x78), level 9 (xDA)
+  if (binary.startsWith("\x78\xDA")) {
+    const buffer = strToU8(binary, true);
+    const unzipped = unzlibSync(buffer);
+    return strFromU8(unzipped);
+  }
+
+  // old unicode hacks for backward compatibility
+  // https://base64.guru/developers/javascript/examples/unicode-strings
+  return decodeURIComponent(escape(binary));
+}
diff --git a/package/document-layer/src/document/zh-CN/demo.md b/package/document-layer/src/document/zh-CN/demo.md
new file mode 100644
index 00000000..d0a43446
--- /dev/null
+++ b/package/document-layer/src/document/zh-CN/demo.md
@@ -0,0 +1,523 @@
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>消息</legend>
+</fieldset>
+
+::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数`msg`为消息内容, 第二参数`options`为可选配置, 常用于配置`time`超时时间等。
+
+<template>
+    <button @click="msg">普通消息</button>
+    <button @click="success">成功消息</button>
+    <button @click="failure">失败消息</button>
+    <button @click="warm">警告消息</button>
+    <button @click="info">锁定消息</button>
+</template>
+
+<script>
+import { layer } from  "../../../../layer/src/index"
+
+const msg = function() {
+    layer.msg("普通消息", { time: 1000 })
+}
+
+const success = function() {
+    layer.msg("成功消息", { time: 1000, icon: 1})
+}
+
+const failure = function() {
+    layer.msg("失败消息", { time: 1000, icon: 2})
+}
+
+const warm = function() {
+    layer.msg("警告消息", { time: 1000, icon: 3})
+}
+
+const info = function() {
+    layer.msg("疑问消息", { time: 1000, icon: 4})
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>确认</legend>
+</fieldset>
+
+::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数`msg`为文本消息, 第二个参数`options`为选项配置, 你可以使用`options`的`btn`属性定义操作。
+
+<template>
+    <button @click="openConfirm1">确认框</button>
+    <button @click="openConfirm2">询问框</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const openConfirm1 = function() {
+    layer.confirm("layui-vue 1.0.0 已经发布")
+}
+
+const openConfirm2 = function() {
+    layer.confirm("你如何看待 layui-vue 的发布", 
+    {btn:
+        [
+            {text:'站着看', callback: function(id){layer.close(id);}},
+            {text:'坐着看', callback: function(id){layer.close(id);}}
+        ]
+    })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>加载</legend>
+</fieldset>
+
+::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数`type`为加载动画样式, 第二个参数`options`为可选配置, 常用于设置`time`加载时长`shade`遮盖层等。
+
+<template>
+    <button @click="load1">加载1</button>
+    <button @click="load2">加载2</button>
+    <button @click="load3">加载3</button>
+    <button @click="load4">加载4</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const load1 = function() {
+    layer.load(0, {time: 2000})
+}
+
+const load2 = function() {
+    layer.load(1, {time: 2000})
+}
+
+const load3 = function() {
+    layer.load(2, {time: 2000})
+}
+
+const load4 = function() {
+    layer.msg("加载中...",{icon: 16, time: 2000})
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>模态</legend>
+</fieldset>
+
+::: demo 通过 layer.open(option) 创建模态窗, 目前支持`iframe` `page`等类型, 你可以使用`options`选项开启`Resize` `Offset`等更多特性。
+
+<template>
+    <lay-row :space="30" >
+        <lay-col :span="24">
+            <button @click="open">小试牛刀</button>
+            <button @click="openSize">指定尺寸</button>
+            <button @click="openOffset">指定位置</button>
+            <button @click="openIframe">远程窗体</button>
+            <button @click="openHtml">代码片段</button>
+        </lay-col>
+        <lay-col :span="24">
+            <button @click="openVNode">虚拟节点</button>
+            <button @click="openMaxmin">缩小放大</button>
+            <button @click="openResize">尺寸拉伸</button>
+            <button @click="openIndex">设置层级</button>
+            <button @click="openAreaAuto">内容适应</button>
+            <button @click="openAreaAuto2">内容适应2</button>
+        </lay-col>
+    </lay-row>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const open = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        content: "内容"
+    })    
+}
+
+const openSize = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        area: ['400px','400px'],
+        content: "内容"
+    })     
+}
+
+const openOffset = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        offset: ['100px','100px'],
+        content: "内容"
+    })
+}
+
+const openIframe = function() {
+    layer.open({
+        type: 2,
+        title: "标题",
+        resize: true,
+        area: ['500px','500px'],
+        content: "http://layui-vue.pearadmin.com"
+    })
+}
+
+const openHtml = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        isHtmlFragment: true,
+        content: "<p style='color:red;'>内容</p>"
+    })
+}
+
+const openVNode = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        content: h('button', { style: 'margin: 10px;' },'按钮')
+    })
+}
+
+const openMaxmin = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        maxmin: true,
+        content: "内容",
+        full:(e)=>{console.log('full',e)},
+        min:(e)=>{console.log('min',e)},
+        restore:(e)=>{console.log('restore',e)}
+    })
+}
+
+const openResize = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        resize: true,
+        content: "内容"
+    })    
+}
+
+const openIndex = function() {
+    layer.open({
+        type: 1,
+        title: "标题",
+        zIndex: 999,
+        content: "设置层级"
+    })
+}
+
+const openAreaAuto = function(){
+    layer.open({
+        type:1,
+        title:"area:auto",
+        isHtmlFragment:true,
+        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
+    })
+}
+
+const openAreaAuto2 = function(){
+    layer.open({
+        type:1,
+        title:"area:auto",
+        offset:['10px','50%'],
+        isHtmlFragment:true,
+        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
+    })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>抽屉</legend>
+</fieldset>
+
+::: demo 通过 layer.drawer(options) 创建抽屉层, `options`选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用`offset`选项来设置方向。
+<template>
+    <button @click="openTop">上</button>
+    <button @click="openBottom">下</button>
+    <button @click="openLeft">左</button>
+    <button @click="openRight">右</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index"
+
+const openTop = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "t"
+    })
+}
+
+const openBottom = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "b"
+    })
+}
+
+const openLeft = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "l"
+    })
+}
+
+const openRight = function() {
+    layer.drawer({
+        title: "标题",
+        content: "内容",
+        offset: "r"
+    })
+}
+</script>
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>图片</legend>
+</fieldset>
+
+::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
+
+<template>
+    <button @click="signleImg">图片查看</button>
+    <button @click="signleImg2">图片标题</button>
+    <button @click="groupImg">图片分组</button>
+</template>
+
+<script>
+import { layer } from  "../../../../layer/src/index"
+
+const signleImg = function() {
+    layer.photos("/src/assets/logo.jpg")
+}
+const signleImg2 = function() {
+    layer.photos({
+      imgList:[{src:'/src/assets/logo.jpg',alt:'layer for vue'}]
+    })
+}
+const groupImg = function() {
+  layer.photos({
+    imgList:[
+      { src:'http://www.pearadmin.com/assets/images/un8.svg', alt:'图片1'},
+      { src:'http://www.pearadmin.com/assets/images/un32.svg', alt:'图片2'}
+    ]
+  })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>通知</legend>
+</fieldset>
+
+::: demo 通过 layer.notifiy(options) 创建通知。
+
+<template>
+  <lay-row :space="30" >
+    <lay-col :span="24">
+      <button @click="baseNotifiy">基本使用</button>
+      <button @click="baseNotifiyRB">右下</button>
+      <button @click="baseNotifiyLT">左上</button>
+      <button @click="baseNotifiyLB">左下</button>
+      <button @click="baseNotifiyTime0">不主动关闭</button>
+      <button @click="baseNotifiyHtml">HTML解析</button>
+    </lay-col>
+    <lay-col :span="24">
+      <button @click="NotifiySuccess">成功通知</button>
+      <button @click="NotifiyFailure">失败通知</button>
+      <button @click="NotifiyWarm">警告通知</button>
+      <button @click="NotifiyInfo">锁定通知</button>
+    </lay-col>
+  </lay-row>
+</template>
+
+<script>
+import { layer } from  "../../../../layer/src/index"
+
+const baseNotifiy = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"默认就是右上，也是用得最多的"
+    })
+}
+const baseNotifiyRB = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"我出现在右下",
+      offset:'rb',
+    })
+}
+const baseNotifiyLT = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"我出现在左上",
+      offset:'lt',
+    })
+}
+const baseNotifiyLB = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"我出现在左下",
+      offset:'lb',
+    })
+}
+const baseNotifiyTime0 = function() {
+    layer.notifiy({
+      title:"这是标题",
+      content:"不会主动关闭，请点击右上角关闭图标",
+      time:0
+    })
+}
+const baseNotifiyHtml = function() {
+    layer.notifiy({
+      title:"这是标题,有图片时请设置area参数",
+      isHtmlFragment:true,
+      content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
+      area:['330px','220px'],
+      time:3000
+    })
+}
+const NotifiySuccess=function(){
+    layer.notifiy({
+      title:"Success",
+      content:"默认就是右上，也是用得最多的",
+      icon:1
+    })
+}
+const NotifiyFailure=function(){
+    layer.notifiy({
+      title:"Error",
+      content:"默认就是右上，也是用得最多的",
+      icon:2
+    })
+}
+const NotifiyWarm=function(){
+    layer.notifiy({
+      title:"Warming",
+      content:"默认就是右上，也是用得最多的",
+      icon:3
+    })
+}
+const NotifiyInfo=function(){
+    layer.notifiy({
+      title:"Question",
+      content:"默认就是右上，也是用得最多的",
+      icon:4
+    })
+}
+</script>
+
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>销毁</legend>
+</fieldset>
+
+::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
+
+<template>
+    <button @click="open">打开</button>
+    <button @click="close">销毁</button>
+    <button @click="closeAll">销毁全部</button>
+</template>
+
+<script setup>
+import { layer } from  "../../../../layer/src/index";
+
+let id = null;
+
+const open = function() {
+    id = layer.open({
+        title: "标题",
+        content: "内容",
+        shade: false
+    })
+}
+
+const close = function() {
+    layer.close(id);
+}
+
+const closeAll = function() {
+    layer.closeAll();
+}
+</script>
+:::
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>通讯</legend>
+</fieldset>
+
+::: demo 👉 查看 [Children1.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqdUkGO00AQ/ErLFyeSY5OrSaJFK87LA3yZtTub2R3PjGba0UaWD5w4cUTiCDwA+AGfQZH4BT127HXEjZu7XNVTXd1t9Mba9NhglEcbwtoqQbgrNMDmviEyGm5KJcunbREZi/rW1NZo1LQuot3508/zx++bbCAOIqltQ0Ani6wgfKYiguOqNhUqBipBInVYC/fEeMaSTTY9CoXm2pdOWgIl9EPo4JnnkRrLXMlvO4IWHIqS5BETOCRceKOOODmDDvbO1BDzUPFMpMQJ3fTzhstGZj24umLeHqSqHOo7jRdumo3YOiTFVOi9lkZ7gjATbCdPizb8HmbMIf796+v5/Y84KXS3fNFcR8nqxRK2O+ilvaU0MIZWACRJIfc6f/nw59vn0Cug3IlYncNhMbOc8KS9o2554fmDqFi9F8pjDwUjXUh+iJqDjZJoGH5VC5s+eqP5GtriAvIK8rbrmHQVw78Hszeu7r/+4w5Ykl30s5N4uYfxBsYEsZbEuVW4lxrfcuEXcSmUwiqe5WydsX6ivQvVEGowkMPd/SOWNK5mFkh4l04KwZe8iIqR4G3YjxVVJfVDDutX9vn1GGVg76LuL+G7LGU=), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
+
+<template>
+  <button @click="openComponent1">数据</button>
+  <input type="text" v-model="data.remark" />
+</template>
+
+<script setup>
+import { reactive, h, resolveComponent } from 'vue'
+import { layer } from  "../../../../layer/src/index"
+
+const data = reactive({
+    remark: "信息"
+})
+const ChildrenOne = resolveComponent('Children1')
+const openComponent1 = () => {
+  layer.open({
+    title: '标题',
+    content: h(ChildrenOne, { data }),
+    shade: false,
+  })
+}
+</script>
+
+:::
+
+::: demo 👉 查看 [Children2.vue](https://layui-vue.gitee.io/sandbox-vue/#eNqNksFum0AQhl9lxAWsYmPnSG2UKOoTtLfSA4Yh3hZ2VzC4sRDnSO2h1x6jPkQP7esklfoWnQXWAaWHcGJmv5n9d+ZvnSutV8cGndDZEpa6SAijWAJs9w2RknCZFiL9tIsdpVFeq1IriZIuYid6+PX14ffPbTCAQ5GQuiGgk0auILyl2IHjslQZFpyQTbnnRMDsNpjcxmGdVkITFIm8MZU1YzVSo/lU8J0VQQsVJimJI/pw8DnIoYO8UiW4rN+dcEVywup8eMlhI4I+uZyR1wdRZBXKd5/VyK4Cm7swQ2E0lqmSNYGulIbdWYLXdgt7ZF7VH+XeZr1ec96ezEfGjLeAXQStGVWvZ2UIr48BSFCBIbh/7u/+/vju+kOWOxFXh3DwJnr9oYn5jLKRBVDyKsu8CuvFEwC9wtUxKRpkDZPgFWws1E1avG32L26xfN6iW/Q/ZkCdWfSwWl6k4zvD5JdlolcfayXZdW08JnnlYdt1DM128NyYuarK/u/JpKPhhoitczZtkmXs1Mcv9zObvqCwbtip0ePdt7m/g/HymX2tea1h7fqxFMTTyjAXEt9wUHvvXVbk+i63dz9MnMLZuT2gr/Z6fBikRbn0/6jpadHJ1I0+OhUIdcpuyzhj3jCUam4v5E0Im7W+fW33ZejI6f4B7opkgw==), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。 
+
+<template>
+  <button @click="openComponent2">事件</button>
+  <input type="text" v-model="numb" />
+</template>
+
+<script setup>
+import { reactive, h, resolveComponent, ref } from 'vue'
+import { layer } from  "../../../../layer/src/index"
+
+const prop = reactive({})
+const numb = ref(1000)  
+const ChildrenTwo = resolveComponent('Children2')
+
+const openComponent2 = () => {
+  layer.open({
+    title: '标题',
+    content: h(ChildrenTwo, { 
+      prop, 
+      onAdd(res){
+        numb.value = numb.value + 1;
+      }, onSub(res) {
+        numb.value = numb.value - 1;
+      }
+      }),
+  })
+}
+</script>
+
+:::
diff --git a/package/document-layer/src/document/zh-CN/help.md b/package/document-layer/src/document/zh-CN/help.md
new file mode 100644
index 00000000..e69de29b
diff --git a/package/document-layer/src/document/zh-CN/index.md b/package/document-layer/src/document/zh-CN/index.md
index 34612f2c..38c5ee41 100644
--- a/package/document-layer/src/document/zh-CN/index.md
+++ b/package/document-layer/src/document/zh-CN/index.md
@@ -69,445 +69,6 @@ const changeVisible = () => {
 }
 </script>
 ```
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>消息</legend>
-</fieldset>
-
-::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数`msg`为消息内容, 第二参数`options`为可选配置, 常用于配置`time`超时时间等。
-
-<template>
-    <button @click="msg">普通消息</button>
-    <button @click="success">成功消息</button>
-    <button @click="failure">失败消息</button>
-    <button @click="warm">警告消息</button>
-    <button @click="info">锁定消息</button>
-</template>
-
-<script>
-import { layer } from  "../../../../layer/src/index"
-
-const msg = function() {
-    layer.msg("普通消息", { time: 1000 })
-}
-
-const success = function() {
-    layer.msg("成功消息", { time: 1000, icon: 1})
-}
-
-const failure = function() {
-    layer.msg("失败消息", { time: 1000, icon: 2})
-}
-
-const warm = function() {
-    layer.msg("警告消息", { time: 1000, icon: 3})
-}
-
-const info = function() {
-    layer.msg("疑问消息", { time: 1000, icon: 4})
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>加载</legend>
-</fieldset>
-
-::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数`type`为加载动画样式, 第二个参数`options`为可选配置, 常用于设置`time`加载时长`shade`遮盖层等。
-
-<template>
-    <button @click="load1">加载1</button>
-    <button @click="load2">加载2</button>
-    <button @click="load3">加载3</button>
-    <button @click="load4">加载4</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const load1 = function() {
-    layer.load(0, {time: 2000})
-}
-
-const load2 = function() {
-    layer.load(1, {time: 2000})
-}
-
-const load3 = function() {
-    layer.load(2, {time: 2000})
-}
-
-const load4 = function() {
-    layer.msg("加载中...",{icon: 16, time: 2000})
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>模态</legend>
-</fieldset>
-
-::: demo 通过 layer.open(option) 创建模态窗, 目前支持`iframe` `page`等类型, 你可以使用`options`选项开启`Resize` `Offset`等更多特性。
-
-<template>
-    <button @click="open">小试牛刀</button>
-    <button @click="openSize">指定尺寸</button>
-    <button @click="openOffset">指定位置</button>
-    <button @click="openIframe">远程窗体</button>
-    <button @click="openHtml">HTML</button>
-    <button @click="openVNode">vNode</button>
-    <button @click="openMaxmin">缩小放大</button>
-    <button @click="openResize">尺寸拉伸</button>
-    <button @click="openIndex">设置层级</button>
-    <button @click="openAreaAuto">内容自撑开</button>
-    <button @click="openBtns">自定义按钮组</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const open = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        content: "内容"
-    })    
-}
-
-const openSize = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        area: ['400px','400px'],
-        content: "内容"
-    })     
-}
-
-const openOffset = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        offset: ['100px','100px'],
-        content: "内容"
-    })
-}
-
-const openIframe = function() {
-    layer.open({
-        type: 2,
-        title: "标题",
-        resize: true,
-        area: ['500px','500px'],
-        content: "http://layui-vue.pearadmin.com"
-    })
-}
-
-const openHtml = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        isHtmlFragment: true,
-        content: "<p style='color:red;'>内容</p>"
-    })
-}
-
-const openVNode = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        content: h('button', { style: 'margin: 10px;' },'按钮')
-    })
-}
-
-const openMaxmin = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        maxmin: true,
-        content: "内容"
-    })
-}
-
-const openResize = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        resize: true,
-        content: "内容"
-    })    
-}
-
-const openIndex = function() {
-    layer.open({
-        type: 1,
-        title: "标题",
-        zIndex: 666,
-        content: "设置层级"
-    })
-}
-
-const openAreaAuto = function(){
-    layer.open({
-        type:1,
-        title:"area:auto",
-        isHtmlFragment:true,
-        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
-    })
-}
-
-const openBtns = function(){
-    layer.open({
-        type:1,
-        title:"自定义按钮",
-        btn:[{text:"第一个按钮",callback:function(){
-            console.log("第一个按钮被点击");
-        }},{text:"第二个按钮",callback:function(){
-            console.log("第二个按钮被点击");
-        }}]
-    })
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>询问</legend>
-</fieldset>
-
-::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数`msg`为文本消息, 第二个参数`options`为选项配置, 你可以使用`options`的`btn`属性定义操作。
-
-<template>
-    <button @click="openConfirm1">确认框</button>
-    <button @click="openConfirm2">询问框</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const openConfirm1 = function() {
-    layer.confirm("layui-vue 1.0.0 已经发布")
-}
-
-const openConfirm2 = function() {
-    layer.confirm("你如何看待 layui-vue 的发布", {btn: [{text:'站着看', callback: function(){
-        layer.msg("有点意思");
-    }},{text:'坐着看', callback: function(){
-        layer.msg("无聊");
-    }}]})
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>抽屉</legend>
-</fieldset>
-
-::: demo 通过 layer.drawer(options) 创建抽屉层, `options`选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用`offset`选项来设置方向。
-<template>
-    <button @click="openTop">上</button>
-    <button @click="openBottom">下</button>
-    <button @click="openLeft">左</button>
-    <button @click="openRight">右</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index"
-
-const openTop = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "t"
-    })
-}
-
-const openBottom = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "b"
-    })
-}
-
-const openLeft = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "l"
-    })
-}
-
-const openRight = function() {
-    layer.drawer({
-        title: "标题",
-        content: "内容",
-        offset: "r"
-    })
-}
-</script>
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>图片层</legend>
-</fieldset>
-
-::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
-
-<template>
-    <button @click="signleImg">快速预览一张图片</button>
-    <button @click="signleImg2">单张图片带文字描述</button>
-    <button @click="groupImg">图片组</button>
-</template>
-
-<script>
-import { layer } from  "../../../../layer/src/index"
-
-const signleImg = function() {
-    layer.photos("/src/assets/logo.jpg")
-}
-const signleImg2 = function() {
-    layer.photos({
-      imgList:[ {src:'/src/assets/logo.jpg',alt:'layer for vue'}]
-    })
-}
-const groupImg = function() {
-  layer.photos({
-    imgList:[
-      { src:'http://www.pearadmin.com/assets/images/un8.svg', alt:'图片1'},
-      { src:'http://www.pearadmin.com/assets/images/un32.svg', alt:'图片2'}
-    ]
-  })
-}
-</script>
-
-:::
-
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>通讯</legend>
-</fieldset>
-
-::: demo 👉 查看 [Children1.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children1.vue), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
-
-<template>
-  <button @click="openComponent1">数据</button>
-  <input type="text" v-model="data.remark" />
-</template>
-
-<script setup>
-import { reactive, h, resolveComponent } from 'vue'
-import { layer } from  "../../../../layer/src/index"
-
-const data = reactive({
-    remark: "信息"
-})
-const ChildrenOne = resolveComponent('Children1')
-const openComponent1 = () => {
-  layer.open({
-    title: '标题',
-    content: h(ChildrenOne, { data }),
-    shade: false,
-  })
-}
-</script>
-
-:::
-
-::: demo 👉 查看 [Children2.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children2.vue), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。 
-
-<template>
-  <button @click="openComponent2">事件</button>
-  <input type="text" v-model="numb" />
-</template>
-
-<script setup>
-import { reactive, h, resolveComponent } from 'vue'
-import { layer } from  "../../../../layer/src/index"
-
-const prop = reactive({})
-const numb = ref(1000)  
-const ChildrenTwo = resolveComponent('Children2')
-
-const openComponent2 = () => {
-  layer.open({
-    title: '标题',
-    content: h(ChildrenTwo, { 
-      prop, 
-      onAdd(res){
-        numb.value = numb.value + 1;
-      }, onSub(res) {
-        numb.value = numb.value - 1;
-      }
-      }),
-  })
-}
-</script>
-
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>销毁</legend>
-</fieldset>
-
-::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
-
-<template>
-    <button @click="open">打开</button>
-    <button @click="close">销毁</button>
-    <button @click="closeAll">销毁全部</button>
-</template>
-
-<script setup>
-import { layer } from  "../../../../layer/src/index";
-
-let id = null;
-
-const open = function() {
-    id = layer.open({
-        title: "标题",
-        content: "内容",
-        shade: false
-    })
-}
-
-const close = function() {
-    layer.close(id);
-}
-
-const closeAll = function() {
-    layer.closeAll();
-}
-</script>
-:::
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>组件</legend>
-</fieldset>
-
-::: demo 我们提供了一些核心函数来创建弹出层, 但在一些复杂的应用场景中, `lay-layer`是一个更好的选择。
-
-<template>
-  <button @click="changeVisible">{{ visible ? '隐藏':'显示' }}</button>
-  <lay-layer title="标题" v-model="visible" :area="['300px','300px']">
-    content
-  </lay-layer>
-</template>
-
-<script setup>
-import { ref, reactive, h } from 'vue'
-import { layer } from  "../../../../layer/src/index"
-
-const visible = ref(false)
-const changeVisible = () => {
-  visible.value = !visible.value;
-}
-</script>
-
-:::
-
 <fieldset class="layui-elem-field layui-field-title">
     <legend>选项</legend>
 </fieldset>
@@ -535,6 +96,7 @@ const changeVisible = () => {
 | shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
 | isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
 | imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
+| startIndex | 图片初始浏览索引 | number | 0 | - |
 <fieldset class="layui-elem-field layui-field-title">
     <legend>动画</legend>
 </fieldset>
diff --git a/package/document-layer/entry-client.ts b/package/document-layer/src/entry-client.ts
similarity index 100%
rename from package/document-layer/entry-client.ts
rename to package/document-layer/src/entry-client.ts
diff --git a/package/document-layer/entry-server.ts b/package/document-layer/src/entry-server.ts
similarity index 100%
rename from package/document-layer/entry-server.ts
rename to package/document-layer/src/entry-server.ts
diff --git a/package/document-layer/src/layouts/Layout.vue b/package/document-layer/src/layouts/Layout.vue
index 1818d392..edf0b53c 100644
--- a/package/document-layer/src/layouts/Layout.vue
+++ b/package/document-layer/src/layouts/Layout.vue
@@ -1,47 +1,62 @@
 <template>
-  <div class="markdown-body light-scheme">
-    <div class="alone-header">
-      <img class="alone-logo" src="../assets/logo.png" />
-      <a
-        style="
-          position: absolute;
-          right: 16%;
-          line-height: 60px;
-          color: white;
-          font-size: 15px;
-        "
-        >{{ version }}</a
-      >
-      <a
-        href="https://gitee.com/layui-vue/layer-vue"
-        style="position: absolute; right: 10%; line-height: 75px"
-      >
-        <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
-          <path
-            fill="#fff"
-            d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
-          ></path>
-        </svg>
-      </a>
-    </div>
-    <div class="alone-banner layui-bg-black">
-      <div class="layui-main">
-        <img src="../assets/logo.jpg" />
-        <h1>layer vue</h1>
-        <p>首 选 的 弹 出 层 解 决 方 案 ⭐</p>
+  <lay-scroll height="100%">
+    <div class="markdown-body light-scheme">
+      <div class="alone-header">
+        <img class="alone-logo" src="../assets/logo.png" />
+        <a
+          style="
+            position: absolute;
+            right: 16%;
+            line-height: 60px;
+            color: white;
+            font-size: 15px;
+          "
+          >{{ version }}</a
+        >
+        <a
+          href="https://gitee.com/layui-vue/layer-vue"
+          style="position: absolute; right: 10%; line-height: 75px"
+        >
+          <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
+            <path
+              fill="#fff"
+              d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
+            ></path>
+          </svg>
+        </a>
+      </div>
+      <div class="alone-banner layui-bg-black">
+        <div class="layui-main">
+          <img src="../assets/logo.jpg" />
+          <h1>layer vue</h1>
+          <p>首 选 的 函 数 式 弹 出 层 解 决 方 案 ⭐</p>
+        </div>
+      </div>
+      <div class="layui-container" style="width: 80%; margin-left: 10%">
+        <lay-tab type="brief" v-model="active">
+          <lay-tab-item title="入门" id="/zh-CN/index"></lay-tab-item>
+          <lay-tab-item title="示例" id="/zh-CN/demo"></lay-tab-item>
+          <lay-tab-item title="帮助" id="/zh-CN/help"></lay-tab-item>
+        </lay-tab>
+        <router-view></router-view>
       </div>
     </div>
-    <br />
-    <div class="layui-container" style="width: 80%; margin-left: 10%">
-      <router-view></router-view>
-    </div>
-  </div>
+  </lay-scroll>
 </template>
 
 <script setup>
 import config from "../../../layer/package.json";
+import { useRouter } from "vue-router";
+import { ref, watch } from "vue";
 
 const version = config.version;
+
+const active = ref("/zh-CN/index");
+const router = useRouter();
+
+watch(active, (val) => {
+  router.push(val);
+});
 </script>
 
 <style>
@@ -116,4 +131,8 @@ body {
   border-top: 1px solid #eee;
   border-style: solid;
 }
+
+.layui-tab-content {
+  padding: 0 !important;
+}
 </style>
diff --git a/package/document-layer/main.ts b/package/document-layer/src/main.ts
similarity index 56%
rename from package/document-layer/main.ts
rename to package/document-layer/src/main.ts
index 9ffa044e..addc3931 100644
--- a/package/document-layer/main.ts
+++ b/package/document-layer/src/main.ts
@@ -1,12 +1,13 @@
 import Layout from "./App.vue";
 import { App, createApp as _createApp } from "vue";
-import { createRouter } from "./src/router/index";
+import { createRouter } from "./router/index";
 import { Router } from "vue-router";
-import LayCode from "./src/components/LayCode.vue";
-import Children1 from "./src/components/Children1.vue";
-import Children2 from "./src/components/Children2.vue";
-import layer from "../layer/src/index";
-import "./src/assets/css/index.css";
+import LayCode from "./components/LayCode.vue";
+import Children1 from "./components/Children1.vue";
+import Children2 from "./components/Children2.vue";
+import layui from "../../component/src/index";
+import layer from "../../layer/src/index";
+import "./assets/css/index.css";
 
 export function createApp(): {
   app: App<Element>;
@@ -16,6 +17,7 @@ export function createApp(): {
   const router = createRouter();
 
   app
+    .use(layui)
     .use(layer)
     .use(router)
     .component("LayCode", LayCode)
diff --git a/package/document-layer/src/router/zh-CN.ts b/package/document-layer/src/router/zh-CN.ts
index 32a20ff3..75108215 100644
--- a/package/document-layer/src/router/zh-CN.ts
+++ b/package/document-layer/src/router/zh-CN.ts
@@ -10,8 +10,17 @@ const zhCN = [
       {
         path: "/zh-CN/index",
         component: () => import("../document/zh-CN/index.md"),
-
-        meta: { title: "指南" },
+        meta: { title: "入门" },
+      },
+      {
+        path: "/zh-CN/demo",
+        component: () => import("../document/zh-CN/demo.md"),
+        meta: { title: "示例" },
+      },
+      {
+        path: "/zh-CN/help",
+        component: () => import("../document/zh-CN/help.md"),
+        meta: { title: "帮助" },
       },
     ],
   },
diff --git a/package/document-layer/tsconfig.json b/package/document-layer/tsconfig.json
new file mode 100644
index 00000000..f7c932aa
--- /dev/null
+++ b/package/document-layer/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "module": "esnext",
+      "target": "es2015",
+      "moduleResolution": "Node",
+      "strict": true,
+      "allowJs": true,
+      "resolveJsonModule": true,
+      "declaration": true,
+      "emitDeclarationOnly": true,
+      "esModuleInterop": true,
+      "declarationDir": "types",
+      "jsx": "preserve",
+      "lib": ["ESNext","DOM"]
+    },
+    "include": ["src/**/*","shims-vue.d.ts"],
+    "exclude": ["node_modules"]
+}
\ No newline at end of file
diff --git a/package/layer/src/component/Notifiy.vue b/package/layer/src/component/Notifiy.vue
new file mode 100644
index 00000000..3bf8f629
--- /dev/null
+++ b/package/layer/src/component/Notifiy.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="layer-notifiy" ref="notifyRef">
+    <h2 class="title">
+      <i v-if="icon" :class="iconClass"></i>
+      {{ title }}
+    </h2>
+    <div class="content" v-if="!isHtmlFragment">
+      <p>{{ content }}</p>
+    </div>
+    <div class="content" v-html="content" v-else></div>
+    <CloseBtnVue @click="close"></CloseBtnVue>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: "Notifiy",
+};
+</script>
+<script lang="ts" setup>
+import { nextTick, onMounted, ref } from "vue";
+import CloseBtnVue from "./CloseBtn.vue";
+
+export interface LayNotifyProps {
+  title: any;
+  content: any;
+  isHtmlFragment?: boolean;
+  icon?: string | number | undefined;
+  iconClass: string[];
+}
+const props = withDefaults(defineProps<LayNotifyProps>(), {
+  isHtmlFragment: false,
+});
+
+const emit = defineEmits(["close"]);
+const close = () => {
+  emit("close");
+};
+function addClass(obj: { className: any }, cls: string) {
+  //获取 class 内容.
+  let obj_class = obj.className,
+    //判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
+    blank = obj_class != "" ? " " : "";
+  let added = obj_class + blank + cls; //组合原来的 class 和需要添加的 class.
+  obj.className = added; //替换原来的 class.
+}
+
+const notifyRef = ref<HTMLElement | null>(null);
+onMounted(() => {
+  nextTick(() => {
+    if (notifyRef.value) {
+      setTimeout(() => {
+        //此处延迟加载class，以免影响弹出效果
+        // @ts-ignore
+        addClass(
+          notifyRef.value.parentElement?.parentElement,
+          "layui-layer-notify"
+        );
+      }, 300);
+    }
+  });
+});
+</script>
diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue
index e7e8cae2..3f8baf8d 100644
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -11,6 +11,7 @@ import Title from "./Title.vue";
 import CloseBtn from "./CloseBtn.vue";
 import Resize from "./Resize.vue";
 import Photos from "./Photos.vue";
+import Notifiy from "./Notifiy.vue";
 import {
   Ref,
   ref,
@@ -36,6 +37,8 @@ import {
   getDrawerAnimationClass,
   calculateDrawerArea,
   calculatePhotosArea,
+  calculateNotifOffset,
+  removeNotifiyFromQueen,
 } from "../utils";
 import useMove from "../composable/useMove";
 import useResize from "../composable/useResize";
@@ -62,12 +65,14 @@ export interface LayModalProps {
     | 3
     | 4
     | 5
+    | 6
     | "dialog"
     | "page"
     | "iframe"
     | "loading"
     | "drawer"
-    | "photos";
+    | "photos"
+    | "notifiy";
   content?: string | Function | object | VNodeTypes;
   isHtmlFragment?: boolean;
   shade?: boolean | string;
@@ -89,6 +94,9 @@ export interface LayModalProps {
   appContext?: any;
   startIndex?: number;
   imgList?: { src: string; alt: string }[];
+  min?: Function;
+  full?: Function;
+  restore?: Function;
 }
 
 const props = withDefaults(defineProps<LayModalProps>(), {
@@ -114,6 +122,9 @@ const props = withDefaults(defineProps<LayModalProps>(), {
   destroy: () => {},
   success: () => {},
   end: () => {},
+  full: () => {},
+  min: () => {},
+  restore: () => {},
   yesText: "确定",
   isFunction: false,
   isMessage: false,
@@ -171,13 +182,19 @@ const firstOpenDelayCalculation = function () {
         props
       );
     }
+    if (props.isHtmlFragment && props.area === "auto") {
+      area.value = ["auto", "auto"];
+    }
     offset.value = calculateOffset(props.offset, area.value, props.type);
+    if (type == 6) {
+      offset.value = calculateNotifOffset(props.offset, area.value, id.value);
+    }
     w.value = area.value[0];
     h.value = area.value[1];
-    t.value = offset.value[0];
-    l.value = offset.value[1];
     _w.value = area.value[0];
     _l.value = area.value[1];
+    t.value = offset.value[0];
+    l.value = offset.value[1];
     _t.value = offset.value[0];
     _l.value = offset.value[1];
     supportMove();
@@ -220,6 +237,7 @@ const maxHandle = () => {
     h.value = _h.value;
     t.value = _t.value;
     l.value = _l.value;
+    props.restore(props.id);
   } else {
     _t.value = t.value;
     _l.value = l.value;
@@ -229,6 +247,7 @@ const maxHandle = () => {
     h.value = maxArea().h;
     t.value = maxOffset().t;
     l.value = maxOffset().l;
+    props.full(props.id);
   }
   max.value = !max.value;
 };
@@ -247,6 +266,7 @@ const minHandle = () => {
     h.value = _h.value;
     t.value = _t.value;
     l.value = _l.value;
+    props.restore(props.id);
   } else {
     _w.value = w.value;
     _h.value = h.value;
@@ -256,6 +276,7 @@ const minHandle = () => {
     w.value = minArea().w;
     t.value = minOffset(left).t;
     l.value = minOffset(left).l;
+    props.min(props.id);
   }
   min.value = !min.value;
 };
@@ -361,6 +382,7 @@ const boxClasses = computed(() => {
     type === 3 ? "layui-layer-loading" : "",
     type === 4 ? "layui-layer-drawer" : "",
     type === 5 ? "layui-layer-photos" : "",
+    type === 6 ? "layui-layer-notifiy-border" : "",
     props.isMessage ? "layui-layer-msg" : "",
     props.isMessage && !props.icon ? "layui-layer-hui" : "",
     props.skin,
@@ -393,13 +415,39 @@ const supportMove = function () {
  * <p>
  */
 const styles = computed<any>(() => {
-  return {
+  let style = {
     top: t.value,
     left: l.value,
     width: w.value,
     height: h.value,
     zIndex: index.value,
   };
+  if (props.isHtmlFragment && props.area === "auto") {
+    // @ts-ignore
+    style.maxWidth = "calc(100% - 2px)";
+    // @ts-ignore
+    style.maxHeight = "calc(100% - 51px)";
+    style.top = "50%";
+    style.left = "50%";
+    if (Array.isArray(offset.value)) {
+      if (offset.value[0].indexOf("px") > -1) {
+        style.top = offset.value[0];
+      }
+      if (offset.value[1].indexOf("px") > -1) {
+        style.left = offset.value[1];
+      }
+      if (
+        offset.value[0].indexOf("%") > -1 ||
+        offset.value[1].indexOf("%") > -1
+      ) {
+        // @ts-ignore
+        style.transform = `translate(-${
+          style.left.indexOf("%") > -1 ? style.left : 0
+        },-${style.top.indexOf("%") > -1 ? style.top : 0})`;
+      }
+    }
+  }
+  return style;
 });
 
 /**
@@ -425,6 +473,11 @@ const closeHandle = () => {
   emit("close");
   emit("update:modelValue", false);
   props.destroy();
+
+  //Notify 从队列中移除当前实例
+  if (type === 6) {
+    removeNotifiyFromQueen(props.id);
+  }
 };
 
 /**
@@ -538,7 +591,7 @@ const showResize = computed(() => {
  * @param type  类型
  */
 const showTitle = computed(() => {
-  return props.title && props.type != 3 && props.type != "photos";
+  return props.title && props.type != 3 && props.type != 5 && props.type != 6;
 });
 
 /*
@@ -610,9 +663,21 @@ defineExpose({ reset, open, close });
             :startIndex="props.startIndex"
             @resetCalculationPohtosArea="resetCalculationPohtosArea"
           ></Photos>
+          <Notifiy
+            v-if="type === 6"
+            @close="closeHandle"
+            :title="props.title"
+            :content="props.content"
+            :isHtmlFragment="props.isHtmlFragment"
+            :icon="props.icon"
+            :iconClass="iconClass"
+          ></Notifiy>
         </div>
         <!-- 工具栏 -->
-        <span class="layui-layer-setwin" v-if="type != 3 && type != 5">
+        <span
+          class="layui-layer-setwin"
+          v-if="type != 3 && type != 5 && type != 6"
+        >
           <a
             v-if="maxmin && !max"
             class="layui-layer-min"
diff --git a/package/layer/src/index.ts b/package/layer/src/index.ts
index ba2f7a52..755ec979 100644
--- a/package/layer/src/index.ts
+++ b/package/layer/src/index.ts
@@ -2,7 +2,7 @@ import { render, h, isVNode, getCurrentInstance, AppContext, App } from "vue";
 import LayLayer from "./component/index.vue";
 import { InstallOptions } from "./types";
 import { zIndexKey } from "./tokens";
-import { nextId } from "./utils";
+import { nextId, removeNotifiyFromQueen } from "./utils";
 
 // 实例队列
 const layerInstance: any = [];
@@ -129,7 +129,7 @@ const layer = {
       };
     }
     let defaultOption = {
-      type: "photos",
+      type: 5,
       anim: 2,
       startIndex: 0,
       isOutAnim: true,
@@ -138,6 +138,18 @@ const layer = {
     };
     return layer.create(option, defaultOption, callback);
   },
+  //通知
+  notifiy: (option: any = {}, callback?: Function) => {
+    option.anim = 5;
+    option.shade = false;
+    option.type = 6;
+    let defaultOption = {
+      offset: "rt",
+      time: 2000,
+      area: "auto",
+    };
+    return layer.create(option, defaultOption, callback);
+  },
   // 创建弹出层
   create: (option: any, defaultOption: any, callback?: Function) => {
     // 销毁定时
@@ -174,7 +186,11 @@ const layer = {
     // 调用 open 函数
     modalInstance.component?.exposed?.open();
     // 延时 time 销毁
-    if (defaultOption && defaultOption.time != undefined) {
+    if (
+      defaultOption &&
+      defaultOption.time != undefined &&
+      defaultOption.time != 0
+    ) {
       timer = setTimeout(() => {
         modalInstance.component?.exposed?.close();
         if (callback) callback(modalContainer.id);
@@ -186,6 +202,10 @@ const layer = {
         }, 2000);
         // 销毁实例
         delInstance(modalContainer.id);
+        //Notifiy特殊处理
+        if (options.type === 6) {
+          removeNotifiyFromQueen(options.id);
+        }
       }, defaultOption.time);
     }
     // 维护实例
diff --git a/package/layer/src/theme/index.css b/package/layer/src/theme/index.css
index 154ea4da..9f8baa01 100644
--- a/package/layer/src/theme/index.css
+++ b/package/layer/src/theme/index.css
@@ -2,1236 +2,1284 @@
 .layui-layer-imgtit a,
 .layui-layer-tab .layui-layer-title span,
 .layui-layer-title {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    user-select:none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
 }
 
 html #layuicss-layer {
-    display: none;
-    position: absolute;
-    width: 1989px
+  display: none;
+  position: absolute;
+  width: 1989px;
 }
 
 .layui-layer,
 .layui-layer-shade {
-    position: fixed;
-    pointer-events: auto
+  position: fixed;
+  pointer-events: auto;
 }
 
 .layui-layer-shade {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(0, 0, 0);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0, 0, 0);
 }
 
 .layui-layer {
-    -webkit-overflow-scrolling: touch;
-    top: 150px;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    background-color: #fff;
-    -webkit-background-clip: content;
-    border-radius: 2px;
-    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3)
+  -webkit-overflow-scrolling: touch;
+  top: 150px;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  background-color: #fff;
+  -webkit-background-clip: content;
+  border-radius: 2px;
+  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
 }
 
 .layui-layer-close {
-    position: absolute
+  position: absolute;
 }
 
 .layui-layer-content {
-    position: relative
+  position: relative;
 }
 
 .layui-layer-border {
-    border: 1px solid #eeeeee;
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
+  border: 1px solid #eeeeee;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
 }
 
 .layui-layer-load {
-    background: url(loading-1.gif) center center no-repeat #eee
+  background: url(loading-1.gif) center center no-repeat #eee;
 }
 
 .layui-layer-ico {
-    background: url(icon.png) no-repeat
+  background: url(icon.png) no-repeat;
 }
 
 .layui-layer-btn a,
 .layui-layer-dialog .layui-layer-ico,
 .layui-layer-setwin a {
-    display: inline-block;
-    vertical-align: top
+  display: inline-block;
+  vertical-align: top;
 }
 
 .layui-layer-move {
-    display: none;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    cursor: move;
-    opacity: 0;
-    filter: alpha(opacity=0);
-    background-color: #fff;
-    z-index: 2147483647
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  cursor: move;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  background-color: #fff;
+  z-index: 2147483647;
 }
 
 .layui-layer-resize {
-    z-index: 999999999;
-    position: absolute;
-    width: 15px;
-    height: 15px;
-    right: 0;
-    bottom: 0;
-    cursor: se-resize
+  z-index: 999999999;
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
 }
 
 .layer-anim {
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-duration: .3s;
-    animation-duration: .3s
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
 }
 
 /* 抽屉开始 */
-.layer-drawer-anim{
-    -webkit-animation-duration: .3s;
-    animation-duration: .3s;
-    -webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
-    animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+.layer-drawer-anim {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+  animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
 }
 /* right to left */
 @keyframes layer-rl {
-    from {
-        -webkit-transform: translate3d(100%, 0, 0);
-        -ms-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-        opacity: 1;
-        
-    }
-    to {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @-webkit-keyframes layer-rl {
-    from {
-        -webkit-transform: translate3d(100%, 0, 0);
-        -ms-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-        opacity: 1;
-       
-    }
-    to {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-    }
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 .layer-anim-rl {
-    -webkit-animation-name: layer-rl;
-    animation-name: layer-rl;
+  -webkit-animation-name: layer-rl;
+  animation-name: layer-rl;
 }
 
 /* right to left close */
 @keyframes layer-rl-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-    to {
-        -webkit-transform: translate3d(100%, 0, 0);
-        -ms-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
 }
 
 @-webkit-keyframes layer-rl-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        
-    }
-    to {
-        -webkit-transform: translate3d(100%, 0, 0);
-        -ms-transform: translate3d(100%, 0, 0);
-        transform: translate3d(100%, 0, 0);
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(100%, 0, 0);
+    -ms-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
 }
 
 .layer-anim-rl-close {
-    -webkit-animation-name: layer-rl-close;
-    animation-name: layer-rl-close;
+  -webkit-animation-name: layer-rl-close;
+  animation-name: layer-rl-close;
 }
 /* left to right */
 @-webkit-keyframes layer-lr {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1
-    }
-    to {
-        -webkit-transform: translate3d(-100%, 0, 0);
-        -ms-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-        opacity: 1
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes layer-lr {
-    from {
-        -webkit-transform: translate3d(-100%, 0, 0);
-        -ms-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-        opacity: 1
-    }
-    to {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1
-    }
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 .layer-anim-lr {
-    -webkit-animation-name: layer-lr;
-    animation-name: layer-lr
+  -webkit-animation-name: layer-lr;
+  animation-name: layer-lr;
 }
 
 /* left to right close */
 @-webkit-keyframes layer-lr-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-    to {
-        -webkit-transform: translate3d(-100%, 0, 0);
-        -ms-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
 }
 
 @keyframes layer-lr-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-    to {
-        -webkit-transform: translate3d(-100%, 0, 0);
-        -ms-transform: translate3d(-100%, 0, 0);
-        transform: translate3d(-100%, 0, 0);
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    -ms-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
 }
 .layer-anim-lr-close {
-    -webkit-animation-name: layer-lr-close;
-    animation-name: layer-lr-close
+  -webkit-animation-name: layer-lr-close;
+  animation-name: layer-lr-close;
 }
 
 /* top to bottom */
 @-webkit-keyframes layer-tb {
-    from {
-        -webkit-transform: translate3d(0, -100%, 0);
-        -ms-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-        opacity: 1;
-        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
-    }
-    to {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
-    }
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+  }
 }
 
 @keyframes layer-tb {
-    from {
-        -webkit-transform: translate3d(0, -100%, 0);
-        -ms-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-        opacity: 1;
-        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
-    }
-    to {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1;
-        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
-    }
+  from {
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+  }
 }
 .layer-anim-tb {
-    -webkit-animation-name: layer-tb;
-    animation-name: layer-tb
+  -webkit-animation-name: layer-tb;
+  animation-name: layer-tb;
 }
 
 /* top to bottom close */
 @-webkit-keyframes layer-tb-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-    to {
-        -webkit-transform: translate3d(0, -100%, 0);
-        -ms-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
 }
 
 @keyframes layer-tb-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-    to {
-        -webkit-transform: translate3d(0, -100%, 0);
-        -ms-transform: translate3d(0, -100%, 0);
-        transform: translate3d(0, -100%, 0);
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
 }
 .layer-anim-tb-close {
-    -webkit-animation-name: layer-tb-close;
-    animation-name: layer-tb-close
+  -webkit-animation-name: layer-tb-close;
+  animation-name: layer-tb-close;
 }
 
 /* bottom to top */
 @-webkit-keyframes layer-bt {
-    from {
-        -webkit-transform: translate3d(0, 100%, 0);
-        -ms-transform: translate3d(0, 100%, 0);
-        transform: translate3d(0, 100%, 0);
-        opacity: 1
-    }
-    to {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1
-    }
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes layer-bt {
-    from {
-        -webkit-transform: translate3d(0, 100%, 0);
-        -ms-transform: translate3d(0, 100%, 0);
-        transform: translate3d(0, 100%, 0);
-        opacity: 1
-    }
-    to {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        opacity: 1
-    }
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 .layer-anim-bt {
-    -webkit-animation-name: layer-bt;
-    animation-name: layer-bt
+  -webkit-animation-name: layer-bt;
+  animation-name: layer-bt;
 }
 
 /* bottom to top close */
 @-webkit-keyframes layer-bt-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-    }
-    to {
-        -webkit-transform: translate3d(0, 100%, 0);
-        -ms-transform: translate3d(0,  100%, 0);
-        transform: translate3d(0, 100%, 0);
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
 }
 
 @keyframes layer-bt-close {
-    from {
-        -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        
-    }
-    to {
-        -webkit-transform: translate3d(0,  100%, 0);
-        -ms-transform: translate3d(0,  100%, 0);
-        transform: translate3d(0,  100%, 0);
-        
-    }
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    -webkit-transform: translate3d(0, 100%, 0);
+    -ms-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
 }
 .layer-anim-bt-close {
-    -webkit-animation-name: layer-bt-close;
-    animation-name: layer-bt-close
+  -webkit-animation-name: layer-bt-close;
+  animation-name: layer-bt-close;
 }
 /* 抽屉结束 */
 
 @-webkit-keyframes layer-bounceIn {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(.5);
-        transform: scale(.5)
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
 
-    100% {
-        opacity: 1;
-        -webkit-transform: scale(1);
-        transform: scale(1)
-    }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
 }
 
 @keyframes layer-bounceIn {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(.5);
-        -ms-transform: scale(.5);
-        transform: scale(.5)
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    transform: scale(0.5);
+  }
 
-    100% {
-        opacity: 1;
-        -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-        transform: scale(1)
-    }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
 }
 
 .layer-anim-00 {
-    -webkit-animation-name: layer-bounceIn;
-    animation-name: layer-bounceIn
+  -webkit-animation-name: layer-bounceIn;
+  animation-name: layer-bounceIn;
 }
 
 @-webkit-keyframes layer-zoomInDown {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(.1) translateY(-2000px);
-        transform: scale(.1) translateY(-2000px);
-        -webkit-animation-timing-function: ease-in-out;
-        animation-timing-function: ease-in-out
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translateY(-2000px);
+    transform: scale(0.1) translateY(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
 
-    60% {
-        opacity: 1;
-        -webkit-transform: scale(.475) translateY(60px);
-        transform: scale(.475) translateY(60px);
-        -webkit-animation-timing-function: ease-out;
-        animation-timing-function: ease-out
-    }
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(0.475) translateY(60px);
+    transform: scale(0.475) translateY(60px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
 }
 
 @keyframes layer-zoomInDown {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(.1) translateY(-2000px);
-        -ms-transform: scale(.1) translateY(-2000px);
-        transform: scale(.1) translateY(-2000px);
-        -webkit-animation-timing-function: ease-in-out;
-        animation-timing-function: ease-in-out
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translateY(-2000px);
+    -ms-transform: scale(0.1) translateY(-2000px);
+    transform: scale(0.1) translateY(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
 
-    60% {
-        opacity: 1;
-        -webkit-transform: scale(.475) translateY(60px);
-        -ms-transform: scale(.475) translateY(60px);
-        transform: scale(.475) translateY(60px);
-        -webkit-animation-timing-function: ease-out;
-        animation-timing-function: ease-out
-    }
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(0.475) translateY(60px);
+    -ms-transform: scale(0.475) translateY(60px);
+    transform: scale(0.475) translateY(60px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
 }
 
 .layer-anim-01 {
-    -webkit-animation-name: layer-zoomInDown;
-    animation-name: layer-zoomInDown
+  -webkit-animation-name: layer-zoomInDown;
+  animation-name: layer-zoomInDown;
 }
 
 @-webkit-keyframes layer-fadeInUpBig {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateY(2000px);
-        transform: translateY(2000px)
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
 
-    100% {
-        opacity: 1;
-        -webkit-transform: translateY(0);
-        transform: translateY(0)
-    }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
 }
 
 @keyframes layer-fadeInUpBig {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateY(2000px);
-        -ms-transform: translateY(2000px);
-        transform: translateY(2000px)
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
 
-    100% {
-        opacity: 1;
-        -webkit-transform: translateY(0);
-        -ms-transform: translateY(0);
-        transform: translateY(0)
-    }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
 }
 
 .layer-anim-02 {
-    -webkit-animation-name: layer-fadeInUpBig;
-    animation-name: layer-fadeInUpBig
+  -webkit-animation-name: layer-fadeInUpBig;
+  animation-name: layer-fadeInUpBig;
 }
 
 @-webkit-keyframes layer-zoomInLeft {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(.1) translateX(-2000px);
-        transform: scale(.1) translateX(-2000px);
-        -webkit-animation-timing-function: ease-in-out;
-        animation-timing-function: ease-in-out
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translateX(-2000px);
+    transform: scale(0.1) translateX(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
 
-    60% {
-        opacity: 1;
-        -webkit-transform: scale(.475) translateX(48px);
-        transform: scale(.475) translateX(48px);
-        -webkit-animation-timing-function: ease-out;
-        animation-timing-function: ease-out
-    }
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(0.475) translateX(48px);
+    transform: scale(0.475) translateX(48px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
 }
 
 @keyframes layer-zoomInLeft {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale(.1) translateX(-2000px);
-        -ms-transform: scale(.1) translateX(-2000px);
-        transform: scale(.1) translateX(-2000px);
-        -webkit-animation-timing-function: ease-in-out;
-        animation-timing-function: ease-in-out
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.1) translateX(-2000px);
+    -ms-transform: scale(0.1) translateX(-2000px);
+    transform: scale(0.1) translateX(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
 
-    60% {
-        opacity: 1;
-        -webkit-transform: scale(.475) translateX(48px);
-        -ms-transform: scale(.475) translateX(48px);
-        transform: scale(.475) translateX(48px);
-        -webkit-animation-timing-function: ease-out;
-        animation-timing-function: ease-out
-    }
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(0.475) translateX(48px);
+    -ms-transform: scale(0.475) translateX(48px);
+    transform: scale(0.475) translateX(48px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
 }
 
 .layer-anim-03 {
-    -webkit-animation-name: layer-zoomInLeft;
-    animation-name: layer-zoomInLeft
+  -webkit-animation-name: layer-zoomInLeft;
+  animation-name: layer-zoomInLeft;
 }
 
 @-webkit-keyframes layer-rollIn {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateX(-100%) rotate(-120deg);
-        transform: translateX(-100%) rotate(-120deg)
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
 
-    100% {
-        opacity: 1;
-        -webkit-transform: translateX(0) rotate(0);
-        transform: translateX(0) rotate(0)
-    }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0) rotate(0);
+    transform: translateX(0) rotate(0);
+  }
 }
 
 @keyframes layer-rollIn {
-    0% {
-        opacity: 0;
-        -webkit-transform: translateX(-100%) rotate(-120deg);
-        -ms-transform: translateX(-100%) rotate(-120deg);
-        transform: translateX(-100%) rotate(-120deg)
-    }
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    -ms-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
 
-    100% {
-        opacity: 1;
-        -webkit-transform: translateX(0) rotate(0);
-        -ms-transform: translateX(0) rotate(0);
-        transform: translateX(0) rotate(0)
-    }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0) rotate(0);
+    -ms-transform: translateX(0) rotate(0);
+    transform: translateX(0) rotate(0);
+  }
 }
 
 .layer-anim-04 {
-    -webkit-animation-name: layer-rollIn;
-    animation-name: layer-rollIn
+  -webkit-animation-name: layer-rollIn;
+  animation-name: layer-rollIn;
 }
 
 @keyframes layer-fadeIn {
-    0% {
-        opacity: 0
-    }
+  0% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 .layer-anim-05 {
-    -webkit-animation-name: layer-fadeIn;
-    animation-name: layer-fadeIn
+  -webkit-animation-name: layer-fadeIn;
+  animation-name: layer-fadeIn;
 }
 
 @-webkit-keyframes layer-shake {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
 
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        -webkit-transform: translateX(-10px);
-        transform: translateX(-10px)
-    }
-
-    20%,
-    40%,
-    60%,
-    80% {
-        -webkit-transform: translateX(10px);
-        transform: translateX(10px)
-    }
+  20%,
+  40%,
+  60%,
+  80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
 }
 
 @keyframes layer-shake {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        -ms-transform: translateX(0);
-        transform: translateX(0)
-    }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
 
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-        -webkit-transform: translateX(-10px);
-        -ms-transform: translateX(-10px);
-        transform: translateX(-10px)
-    }
-
-    20%,
-    40%,
-    60%,
-    80% {
-        -webkit-transform: translateX(10px);
-        -ms-transform: translateX(10px);
-        transform: translateX(10px)
-    }
+  20%,
+  40%,
+  60%,
+  80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
 }
 
 .layer-anim-06 {
-    -webkit-animation-name: layer-shake;
-    animation-name: layer-shake
+  -webkit-animation-name: layer-shake;
+  animation-name: layer-shake;
 }
 
 @-webkit-keyframes fadeIn {
-    0% {
-        opacity: 0
-    }
+  0% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 .layui-layer-title {
-    padding: 0 100px 0 20px;
-    height: 50px;
-    line-height: 50px;
-    border-bottom: 1px solid #F0F0F0;
-    font-size: 14px;
-    color: #333;
-    overflow: hidden;
-    border-radius: 2px 2px 0 0
+  padding: 0 100px 0 20px;
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 14px;
+  color: #333;
+  overflow: hidden;
+  border-radius: 2px 2px 0 0;
 }
 
 .layui-layer-setwin {
-    position: absolute;
-    right: 15px;
-    top: 17px;
-    font-size: 0;
-    line-height: initial
+  position: absolute;
+  right: 15px;
+  top: 17px;
+  font-size: 0;
+  line-height: initial;
 }
 
 .layui-layer-setwin a {
-    position: relative;
-    width: 16px;
-    height: 16px;
-    margin-left: 10px;
-    font-size: 12px;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  margin-left: 10px;
+  font-size: 12px;
 }
 
 .layui-layer-setwin .layui-layer-min cite {
-    position: absolute;
-    width: 14px;
-    height: 2px;
-    left: 0;
-    top: 50%;
-    margin-top: -1px;
-    background-color: #2E2D3C;
-    cursor: pointer;
+  position: absolute;
+  width: 14px;
+  height: 2px;
+  left: 0;
+  top: 50%;
+  margin-top: -1px;
+  background-color: #2e2d3c;
+  cursor: pointer;
 }
 
 .layui-layer-setwin .layui-layer-min:hover cite {
-    background-color: #2D93CA
+  background-color: #2d93ca;
 }
 
 .layui-layer-setwin .layui-layer-max {
-    background-position: -32px -40px
+  background-position: -32px -40px;
 }
 
 .layui-layer-setwin .layui-layer-max:hover {
-    background-position: -16px -40px
+  background-position: -16px -40px;
 }
 
 .layui-layer-setwin .layui-layer-maxmin {
-    background-position: -65px -40px
+  background-position: -65px -40px;
 }
 
 .layui-layer-setwin .layui-layer-maxmin:hover {
-    background-position: -49px -40px
+  background-position: -49px -40px;
 }
 
 .layui-layer-setwin .layui-layer-close1 {
-    background-position: 1px -40px;
-    cursor: pointer
+  background-position: 1px -40px;
+  cursor: pointer;
 }
 
 .layui-layer-setwin .layui-layer-close1:hover {
-    opacity: .7
+  opacity: 0.7;
 }
 
 .layui-layer-setwin .layui-layer-close2 {
-    position: absolute;
-    right: -28px;
-    top: -28px;
-    width: 30px;
-    height: 30px;
-    margin-left: 0;
-    background-position: -149px -31px;
+  position: absolute;
+  right: -28px;
+  top: -28px;
+  width: 30px;
+  height: 30px;
+  margin-left: 0;
+  background-position: -149px -31px;
 }
 
 .layui-layer-setwin .layui-layer-close2:hover {
-    background-position: -180px -31px
+  background-position: -180px -31px;
 }
 
 .layui-layer-btn {
-    text-align: right;
-    padding: 0 15px 12px;
-    pointer-events: auto;
-    user-select: none;
-    -webkit-user-select: none
+  text-align: right;
+  padding: 0 15px 12px;
+  pointer-events: auto;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .layui-layer-btn a {
-    height: 28px;
-    line-height: 28px;
-    margin: 5px 5px 0;
-    padding: 0 15px;
-    border: 1px solid #dedede;
-    background-color: #fff;
-    color: #333;
-    border-radius: 2px;
-    font-weight: 400;
-    cursor: pointer;
-    text-decoration: none
+  height: 28px;
+  line-height: 28px;
+  margin: 5px 5px 0;
+  padding: 0 15px;
+  border: 1px solid #dedede;
+  background-color: #fff;
+  color: #333;
+  border-radius: 2px;
+  font-weight: 400;
+  cursor: pointer;
+  text-decoration: none;
 }
 
 .layui-layer-btn a:hover {
-    opacity: .9;
-    text-decoration: none
+  opacity: 0.9;
+  text-decoration: none;
 }
 
 .layui-layer-btn a:active {
-    opacity: .8
+  opacity: 0.8;
 }
 
 .layui-layer-btn .layui-layer-btn0 {
-    border-color: #1E9FFF;
-    background-color: #1E9FFF;
-    color: #fff
+  border-color: #1e9fff;
+  background-color: #1e9fff;
+  color: #fff;
 }
 
 .layui-layer-btn-l {
-    text-align: left
+  text-align: left;
 }
 
 .layui-layer-btn-c {
-    text-align: center
+  text-align: center;
 }
 
 .layui-layer-dialog {
-    min-width: 300px
+  min-width: 300px;
 }
 
 .layui-layer-dialog .layui-layer-content {
-    position: relative;
-    padding: 20px;
-    line-height: 24px;
-    word-break: break-all;
-    overflow: hidden;
-    font-size: 14px;
-    overflow-x: hidden;
-    overflow-y: auto
+  position: relative;
+  padding: 20px;
+  line-height: 24px;
+  word-break: break-all;
+  overflow: hidden;
+  font-size: 14px;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .layui-layer-dialog .layui-layer-content .layui-layer-ico {
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    width: 30px;
-    height: 30px
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  width: 30px;
+  height: 30px;
 }
 
 .layui-layer-dialog .layui-layer-content .layui-layer-ico.layui-layer-ico16 {
-	width: 33px;
-	height: 33px;
+  width: 33px;
+  height: 33px;
 }
 
 .layui-layer-ico1 {
-    background-position: -30px 0
+  background-position: -30px 0;
 }
 
 .layui-layer-ico2 {
-    background-position: -60px 0
+  background-position: -60px 0;
 }
 
 .layui-layer-ico3 {
-    background-position: -90px 0
+  background-position: -90px 0;
 }
 
 .layui-layer-ico4 {
-    background-position: -120px 0
+  background-position: -120px 0;
 }
 
 .layui-layer-ico5 {
-    background-position: -150px 0
+  background-position: -150px 0;
 }
 
 .layui-layer-ico6 {
-    background-position: -180px 0
+  background-position: -180px 0;
 }
 
 .layui-layer-rim {
-    border: 6px solid #8D8D8D;
-    border: 6px solid rgba(0, 0, 0, .3);
-    border-radius: 5px;
-    box-shadow: none
+  border: 6px solid #8d8d8d;
+  border: 6px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  box-shadow: none;
 }
 
 .layui-layer-msg {
-    min-width: 180px;
-    border: 1px solid rgba(220, 220, 220, 0.5);
-    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 3%)
+  min-width: 180px;
+  border: 1px solid rgba(220, 220, 220, 0.5);
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 3%);
 }
 
 .layui-layer-hui {
-    min-width: 100px;
-    background-color: #000;
-    filter: alpha(opacity=60);
-    background-color: rgba(0, 0, 0, .6);
-    color: #fff;
-    border: none
+  min-width: 100px;
+  background-color: #000;
+  filter: alpha(opacity=60);
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  border: none;
 }
 
 .layui-layer-hui .layui-layer-content {
-    padding: 12px 25px;
-    text-align: center
+  padding: 12px 25px;
+  text-align: center;
 }
 
 .layui-layer-dialog .layui-layer-padding {
-    padding: 20px 20px 20px 55px;
-    text-align: left
+  padding: 20px 20px 20px 55px;
+  text-align: left;
 }
 
 .layui-layer-drawer {
-    border-radius: 0px;
+  border-radius: 0px;
 }
 
 .layui-layer-drawer .layui-layer-content,
 .layui-layer-page .layui-layer-content {
-    position: relative;
-    overflow: auto
+  position: relative;
+  overflow: auto;
 }
 
 .layui-layer-drawer .layui-layer-btn,
 .layui-layer-iframe .layui-layer-btn,
 .layui-layer-page .layui-layer-btn {
-    padding-top: 10px
+  padding-top: 10px;
 }
 
 .layui-layer-nobg {
-    background: 0 0
+  background: 0 0;
 }
 
 .layui-layer-iframe iframe {
-    display: block;
-    width: 100%;
-    height: 100%;
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 .layui-layer-loading {
-    border-radius: 100%;
-    background: 0 0;
-    box-shadow: none;
-    border: none
+  border-radius: 100%;
+  background: 0 0;
+  box-shadow: none;
+  border: none;
 }
 
 .layui-layer-loading .layui-layer-content {
-    width: 60px;
-    height: 24px;
-    background: url(loading-0.gif) no-repeat
+  width: 60px;
+  height: 24px;
+  background: url(loading-0.gif) no-repeat;
 }
 
 .layui-layer-loading .layui-layer-loading1 {
-    width: 37px;
-    height: 37px;
-    background: url(loading-1.gif) no-repeat
+  width: 37px;
+  height: 37px;
+  background: url(loading-1.gif) no-repeat;
 }
 
 .layui-layer-ico16,
 .layui-layer-loading .layui-layer-loading2 {
-    width: 32px;
-    height: 32px;
-    background: url(loading-2.gif) no-repeat
+  width: 32px;
+  height: 32px;
+  background: url(loading-2.gif) no-repeat;
 }
 
 .layui-layer-tips {
-    background: 0 0;
-    box-shadow: none;
-    border: none
+  background: 0 0;
+  box-shadow: none;
+  border: none;
 }
 
 .layui-layer-tips .layui-layer-content {
-    position: relative;
-    line-height: 22px;
-    min-width: 12px;
-    padding: 8px 15px;
-    font-size: 12px;
-    border-radius: 2px;
-    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
-    background-color: #000;
-    color: #fff
+  position: relative;
+  line-height: 22px;
+  min-width: 12px;
+  padding: 8px 15px;
+  font-size: 12px;
+  border-radius: 2px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  background-color: #000;
+  color: #fff;
 }
 
 .layui-layer-tips .layui-layer-close {
-    right: -2px;
-    top: -1px
+  right: -2px;
+  top: -1px;
 }
 
 .layui-layer-tips i.layui-layer-TipsG {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-width: 8px;
-    border-color: transparent;
-    border-style: dashed;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-width: 8px;
+  border-color: transparent;
+  border-style: dashed;
 }
 
 .layui-layer-tips i.layui-layer-TipsB,
 .layui-layer-tips i.layui-layer-TipsT {
-    left: 5px;
-    border-right-style: solid;
-    border-right-color: #000
+  left: 5px;
+  border-right-style: solid;
+  border-right-color: #000;
 }
 
 .layui-layer-tips i.layui-layer-TipsT {
-    bottom: -8px
+  bottom: -8px;
 }
 
 .layui-layer-tips i.layui-layer-TipsB {
-    top: -8px
+  top: -8px;
 }
 
 .layui-layer-tips i.layui-layer-TipsL,
 .layui-layer-tips i.layui-layer-TipsR {
-    top: 5px;
-    border-bottom-style: solid;
-    border-bottom-color: #000
+  top: 5px;
+  border-bottom-style: solid;
+  border-bottom-color: #000;
 }
 
 .layui-layer-tips i.layui-layer-TipsR {
-    left: -8px
+  left: -8px;
 }
 
 .layui-layer-tips i.layui-layer-TipsL {
-    right: -8px
+  right: -8px;
 }
 
-.layui-layer-lan[type=dialog] {
-    min-width: 280px
+.layui-layer-lan[type="dialog"] {
+  min-width: 280px;
 }
 
 .layui-layer-lan .layui-layer-title {
-    background: #4476A7;
-    color: #fff;
-    border: none
+  background: #4476a7;
+  color: #fff;
+  border: none;
 }
 
 .layui-layer-lan .layui-layer-btn {
-    padding: 5px 10px 10px;
-    text-align: right;
-    border-top: 1px solid #E9E7E7
+  padding: 5px 10px 10px;
+  text-align: right;
+  border-top: 1px solid #e9e7e7;
 }
 
 .layui-layer-lan .layui-layer-btn a {
-    background: #fff;
-    border-color: #E9E7E7;
-    color: #333
+  background: #fff;
+  border-color: #e9e7e7;
+  color: #333;
 }
 
 .layui-layer-lan .layui-layer-btn .layui-layer-btn1 {
-    background: #C9C5C5
+  background: #c9c5c5;
 }
 
 .layui-layer-molv .layui-layer-title {
-    background: #009f95;
-    color: #fff;
-    border: none
+  background: #009f95;
+  color: #fff;
+  border: none;
 }
 
 .layui-layer-molv .layui-layer-btn a {
-    background: #009f95;
-    border-color: #009f95
+  background: #009f95;
+  border-color: #009f95;
 }
 
 .layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
-    background: #92B8B1
+  background: #92b8b1;
 }
 
 .layui-layer-iconext {
-    background: url(icon-ext.png) no-repeat
+  background: url(icon-ext.png) no-repeat;
 }
 
 .layui-layer-prompt .layui-layer-input {
-    display: block;
-    width: 260px;
-    height: 36px;
-    margin: 0 auto;
-    line-height: 30px;
-    padding-left: 10px;
-    border: 1px solid #e6e6e6;
-    color: #333
+  display: block;
+  width: 260px;
+  height: 36px;
+  margin: 0 auto;
+  line-height: 30px;
+  padding-left: 10px;
+  border: 1px solid #e6e6e6;
+  color: #333;
 }
 
 .layui-layer-prompt textarea.layui-layer-input {
-    width: 300px;
-    height: 100px;
-    line-height: 20px;
-    padding: 6px 10px
+  width: 300px;
+  height: 100px;
+  line-height: 20px;
+  padding: 6px 10px;
 }
 
 .layui-layer-prompt .layui-layer-content {
-    padding: 20px
+  padding: 20px;
 }
 
 .layui-layer-prompt .layui-layer-btn {
-    padding-top: 0
+  padding-top: 0;
 }
 
 .layui-layer-tab {
-    box-shadow: 1px 1px 50px rgba(0, 0, 0, .4)
+  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.4);
 }
 
 .layui-layer-tab .layui-layer-title {
-    padding-left: 0;
-    overflow: visible
+  padding-left: 0;
+  overflow: visible;
 }
 
 .layui-layer-tab .layui-layer-title span {
-    position: relative;
-    float: left;
-    min-width: 80px;
-    max-width: 300px;
-    padding: 0 20px;
-    text-align: center;
-    overflow: hidden;
-    cursor: pointer
+  position: relative;
+  float: left;
+  min-width: 80px;
+  max-width: 300px;
+  padding: 0 20px;
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
 }
 
 .layui-layer-tab .layui-layer-title span.layui-this {
-    height: 51px;
-    border-left: 1px solid #eee;
-    border-right: 1px solid #eee;
-    background-color: #fff;
-    z-index: 10
+  height: 51px;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  background-color: #fff;
+  z-index: 10;
 }
 
 .layui-layer-tab .layui-layer-title span:first-child {
-    border-left: none
+  border-left: none;
 }
 
 .layui-layer-tabmain {
-    line-height: 24px;
-    clear: both
+  line-height: 24px;
+  clear: both;
 }
 
 .layui-layer-tabmain .layui-layer-tabli {
-    display: none
+  display: none;
 }
 
 .layui-layer-tabmain .layui-layer-tabli.layui-this {
-    display: block
+  display: block;
 }
 
 .layui-layer-photos {
-    background: 0 0;
-    box-shadow: none;
-    border:none
+  background: 0 0;
+  box-shadow: none;
+  border: none;
 }
 
 .layui-layer-photos .layui-layer-content {
-    overflow: hidden;
-    text-align: center
+  overflow: hidden;
+  text-align: center;
 }
 
 .layui-layer-photos .layui-layer-phimg img {
-    position: relative;
-    width: 100%;
-    display: inline-block;
-    vertical-align: top
+  position: relative;
+  width: 100%;
+  display: inline-block;
+  vertical-align: top;
 }
 
 .layui-layer-imgnext,
 .layui-layer-imgprev {
-    position: fixed;
-    top: 50%;
-    width: 27px;
-    height: 44px;
-    margin-top: -22px;
-    outline: 0;
+  position: fixed;
+  top: 50%;
+  width: 27px;
+  height: 44px;
+  margin-top: -22px;
+  outline: 0;
 }
 
 .layui-layer-imgprev {
-    left: 30px;
-    background-position: -5px -5px;
+  left: 30px;
+  background-position: -5px -5px;
 }
 
 .layui-layer-imgprev:hover {
-    background-position: -33px -5px;
+  background-position: -33px -5px;
 }
 
 .layui-layer-imgnext {
-    right: 30px;
-    background-position: -5px -50px;
+  right: 30px;
+  background-position: -5px -50px;
 }
 
 .layui-layer-imgnext:hover {
-    background-position: -33px -50px;
+  background-position: -33px -50px;
 }
 
 .layui-layer-imgbar {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    filter: Alpha(opacity=60);
-    background-color: rgba(2, 0, 0, .35);
-    color: #fff;
-    overflow: hidden;
-    font-size: 0;
-    opacity: 0;
-    transition: all 1s ease-in-out;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  filter: Alpha(opacity=60);
+  background-color: rgba(2, 0, 0, 0.35);
+  color: #fff;
+  overflow: hidden;
+  font-size: 0;
+  opacity: 0;
+  transition: all 1s ease-in-out;
 }
 
 .layui-layer-imgtit * {
-    display: inline-block;
-    vertical-align: top;
-    font-size: 12px
+  display: inline-block;
+  vertical-align: top;
+  font-size: 12px;
 }
 
 .layui-layer-imgtit a {
-    max-width: 65%;
-    overflow: hidden;
-    color: #fff
+  max-width: 65%;
+  overflow: hidden;
+  color: #fff;
 }
 
 .layui-layer-imgtit a:hover {
-    color: #fff;
-    text-decoration: underline
+  color: #fff;
+  text-decoration: underline;
 }
 
 .layui-layer-imgtit em {
-    padding-left: 10px;
-    font-style: normal
+  padding-left: 10px;
+  font-style: normal;
 }
 
 @-webkit-keyframes layer-bounceOut {
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(.7);
-        transform: scale(.7)
-    }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0.7);
+    transform: scale(0.7);
+  }
 
-    30% {
-        -webkit-transform: scale(1.05);
-        transform: scale(1.05)
-    }
+  30% {
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+  }
 
-    0% {
-        -webkit-transform: scale(1);
-        transform: scale(1)
-    }
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
 }
 
 @keyframes layer-bounceOut {
-    100% {
-        opacity: 0;
-        -webkit-transform: scale(.7);
-        -ms-transform: scale(.7);
-        transform: scale(.7)
-    }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0.7);
+    -ms-transform: scale(0.7);
+    transform: scale(0.7);
+  }
 
-    30% {
-        -webkit-transform: scale(1.05);
-        -ms-transform: scale(1.05);
-        transform: scale(1.05)
-    }
+  30% {
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
+    transform: scale(1.05);
+  }
 
-    0% {
-        -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-        transform: scale(1)
-    }
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
 }
 
 .layer-anim-close {
-    -webkit-animation-name: layer-bounceOut;
-    animation-name: layer-bounceOut;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-duration: .2s;
-    animation-duration: .2s
+  -webkit-animation-name: layer-bounceOut;
+  animation-name: layer-bounceOut;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
 }
 
-@media screen and (max-width:1100px) {
-    .layui-layer-iframe {
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch
-    }
+@media screen and (max-width: 1100px) {
+  .layui-layer-iframe {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.layer-notifiy {
+  min-width: 330px;
+  padding: 14px 26px 14px 13px;
+  box-sizing: border-box;
+  background-color: #fff;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+}
+.layer-notifiy .title {
+  font-weight: 700;
+  font-size: 16px;
+  color: #303133;
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+}
+.layer-notifiy .content {
+  font-size: 14px;
+  line-height: 21px;
+  margin: 6px 0 0 8px;
+  color: #606266;
+  text-align: justify;
+}
+.layer-notifiy .content img{
+  max-width: 100%;
+}
+.layer-notifiy .layui-layer-close1 {
+  background-position: 1px -40px;
+  cursor: pointer;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.layer-notifiy .layui-layer-close1:hover {
+  opacity: 0.7;
+}
+.layui-layer-notify{
+  transition: top 0.3s ease-in-out;
+}
+.layui-layer-notifiy-border{
+  border: none;
+  box-shadow: none;
+}
+.layer-notifiy  .title .layui-layer-ico{
+  height: 30px !important;
+  width: 30px !important;
+  display: inline-block;
+  transform: scale(0.7);
+  margin-left: -7px;
 }
\ No newline at end of file
diff --git a/package/layer/src/utils/index.ts b/package/layer/src/utils/index.ts
index 5c92bb06..1294c9c7 100644
--- a/package/layer/src/utils/index.ts
+++ b/package/layer/src/utils/index.ts
@@ -120,8 +120,10 @@ export function calculateType(modalType: number | string) {
     return 3;
   } else if (modalType === "drawer" || modalType == 4) {
     return 4;
-  } else if (modalType === "photos") {
+  } else if (modalType === "photos" || modalType == 5) {
     return 5;
+  } else if (modalType === "notifiy" || modalType == 6) {
+    return 6;
   }
   return 0;
 }
@@ -235,6 +237,7 @@ export function getDrawerAnimationClass(offset: any, isClose: boolean = false) {
   return isClose ? `${prefix}-${suffix}-close` : `${prefix}-${suffix}`;
 }
 
+//计算图片大小 并缩放
 export async function calculatePhotosArea(url: string, options: object) {
   let img = new Image();
   img.src = url;
@@ -273,3 +276,107 @@ export async function calculatePhotosArea(url: string, options: object) {
     return [imgarea[0] + "px", imgarea[1] + "px"];
   }
 }
+
+// 计算Notify位置 队列 此处先暂时定义Notify的间距为15px
+export function calculateNotifOffset(offset: any, area: any, layerId: string) {
+  let arr = ["lt", "lb", "rt", "rb"];
+  let t = "0",
+    l = "0";
+  // 间隙
+  let transOffsetLeft = 15;
+  let transOffsetTop = 15;
+  // @ts-ignore
+  window.NotifiyQueen = window.NotifiyQueen || [];
+  // @ts-ignore
+  let notifiyQueen = window.NotifiyQueen;
+  if (typeof offset != "string" || arr.indexOf(offset) === -1) {
+    offset = "rt";
+  }
+  // 当前区域元素集合
+  let nodeList = notifiyQueen.filter((e: { offset: any }) => {
+    if (e.offset === offset) {
+      return e;
+    }
+  });
+  //前一个元素
+  let prevNode = nodeList.length > 0 ? nodeList[nodeList.length - 1] : null;
+  if (prevNode) {
+    prevNode = document.getElementById(prevNode["id"])?.firstElementChild
+      ?.firstElementChild;
+    if (offset === "rt" || offset === "lt") {
+      transOffsetTop +=
+        prevNode.offsetHeight + parseFloat(prevNode.style["top"]);
+    } else {
+      let bottom = parseFloat(prevNode.style["top"].split(" - ")[1]);
+      transOffsetTop += prevNode.offsetHeight + bottom;
+    }
+  } else {
+    if (offset === "rb" || offset === "lb") {
+      transOffsetTop += parseFloat(area[1]);
+    }
+  }
+
+  // 关键字处理
+  if (offset === "rt") {
+    t = transOffsetTop + "px";
+    l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)";
+  } else if (offset === "rb") {
+    t = "calc(100vh - " + transOffsetTop + "px)";
+    l = "calc(100% - " + (parseFloat(area[0]) + transOffsetLeft) + "px)";
+  } else if (offset === "lt") {
+    t = transOffsetTop + "px";
+    l = transOffsetLeft + "px";
+  } else if (offset === "lb") {
+    t = "calc(100vh - " + transOffsetTop + "px)";
+    l = transOffsetLeft + "px";
+  }
+
+  notifiyQueen.push({
+    id: layerId,
+    offset: offset,
+  });
+  // 返回位置
+  return [t, l];
+}
+
+//移除Notify队列中某项，并且重新计算其他Notify位置
+export function removeNotifiyFromQueen(layerId: string | undefined) {
+  // 间隙
+  let transOffsetTop = 15;
+  // @ts-ignore 删除项的高度
+  let offsetHeight =
+    document.getElementById(layerId)?.firstElementChild?.firstElementChild
+      ?.offsetHeight;
+  // @ts-ignore
+  window.NotifiyQueen = window.NotifiyQueen || [];
+  // @ts-ignore
+  let notifiyQueen = window.NotifiyQueen;
+  let index = notifiyQueen.findIndex((e: { id: string }) => e.id === layerId);
+  let offsetType = notifiyQueen[index].offset;
+  let list = notifiyQueen.filter((e: { offset: any }) => {
+    if (e.offset === offsetType) {
+      return e;
+    }
+  });
+  let findIndex = list.findIndex((e: { id: string }) => e.id === layerId);
+  // //得到需要修改的定位的Notifiy集合
+  let needCalculatelist = list.slice(findIndex + 1);
+  needCalculatelist.forEach((e: { id: string }) => {
+    let dom = document.getElementById(e.id)?.firstElementChild
+      ?.firstElementChild;
+    if (offsetType === "rt" || offsetType === "lt") {
+      // @ts-ignore
+      dom.style["top"] =
+        parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
+    } else {
+      // @ts-ignore
+      let bottom =
+        parseFloat(dom.style["top"].split(" - ")[1]) -
+        transOffsetTop -
+        offsetHeight;
+      // @ts-ignore
+      dom.style["top"] = "calc(100vh - " + bottom + "px)";
+    }
+  });
+  notifiyQueen.splice(index, 1); //删除
+}