diff --git a/src/custom-border/custom-dv-1/custom-dv-1.scss b/src/custom-border/custom-dv-1/custom-dv-1.scss
index 2cc667922df170a61fac0ca34e96dffdd6f2cfaf..876ca0e7f6e1bb17639d654606e234ced0e31dd1 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.scss
+++ b/src/custom-border/custom-dv-1/custom-dv-1.scss
@@ -1,8 +1,13 @@
+$style-1: (
+    'offsetY': 0,
+);
+
 @include b(custom-border) {
+  @include set-component-css-var(style-1, $style-1);
   @include when(style-1) {
     position: relative;
     width: 100%;
-    height: 100%;
+    height: calc(100% - getCssVar(style-1,'offsetY'));
     @include e(border-box) {
     z-index: 100;
     height: 0;
diff --git a/src/custom-border/custom-dv-1/custom-dv-1.tsx b/src/custom-border/custom-dv-1/custom-dv-1.tsx
index b6a8717ec73cd6a6f0a3afcee06a3cb5b1f89a27..edb238b6d5d31b09d6e6f4e12c210c9d25d4fda0 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.tsx
+++ b/src/custom-border/custom-dv-1/custom-dv-1.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   defineComponent,
   onMounted,
@@ -19,14 +20,18 @@ import './custom-dv-1.scss';
 export const CustomDV1 = defineComponent({
   name: 'CustomDV1',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -38,35 +43,36 @@ export const CustomDV1 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
+
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
     /**
      * 绘制边框svg
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <div class={[ns.e('border-box')]}>
-          <svg
-            class={[ns.e('border')]}
-            width={width.value}
-            height={height.value}
-          >
+          <svg class={[ns.e('border')]} width={_width} height={_height}>
             <polygon
-              fill={props.backgroundColor}
-              points={`10, 27 10, ${height.value - 27} 13, ${
-                height.value - 24
-              } 13, ${height.value - 21} 24, ${height.value - 11}
-        38, ${height.value - 11} 41, ${height.value - 8} 73, ${
-          height.value - 8
-        } 75, ${height.value - 10} 81, ${height.value - 10}
-        85, ${height.value - 6} ${width.value - 85}, ${height.value - 6} ${
+              fill={backgroundColor}
+              points={`10, 27 10, ${height.value - 27 - props.offsetY} 13, ${
+                height.value - 24 - props.offsetY
+              } 13, ${height.value - 21 - props.offsetY} 24, ${height.value - 11 - props.offsetY}
+        38, ${height.value - 11 - props.offsetY} 41, ${height.value - 8 - props.offsetY} 73, ${
+          height.value - 8 - props.offsetY
+        } 75, ${height.value - 10 - props.offsetY} 81, ${height.value - 10 - props.offsetY}
+        85, ${height.value - 6 - props.offsetY} ${width.value - 85}, ${height.value - 6 - props.offsetY} ${
           width.value - 81
-        }, ${height.value - 10} ${width.value - 75}, ${height.value - 10}
-        ${width.value - 73}, ${height.value - 8} ${width.value - 41}, ${
-          height.value - 8
-        } ${width.value - 38}, ${height.value - 11}
-        ${width.value - 24}, ${height.value - 11} ${width.value - 13}, ${
-          height.value - 21
-        } ${width.value - 13}, ${height.value - 24}
-        ${width.value - 10}, ${height.value - 27} ${width.value - 10}, 27 ${
+        }, ${height.value - 10 - props.offsetY} ${width.value - 75}, ${height.value - 10 - props.offsetY}
+        ${width.value - 73}, ${height.value - 8 - props.offsetY} ${width.value - 41}, ${
+          height.value - 8 - props.offsetY
+        } ${width.value - 38}, ${height.value - 11 - props.offsetY}
+        ${width.value - 24}, ${height.value - 11 - props.offsetY} ${width.value - 13}, ${
+          height.value - 21 - props.offsetY
+        } ${width.value - 13}, ${height.value - 24 - props.offsetY}
+        ${width.value - 10}, ${height.value - 27 - props.offsetY} ${width.value - 10}, 27 ${
           width.value - 13
         }, 25 ${width.value - 13}, 21
         ${width.value - 24}, 11 ${width.value - 38}, 11 ${
@@ -82,7 +88,9 @@ export const CustomDV1 = defineComponent({
               <svg key={item} class={[ns.e(item), ns.e('border')]}>
                 <polygon
                   fill={mergedColor.value[0]}
-                  points='6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63'
+                  points={`
+                  ${6 + padding},${66 + padding} ${6 + padding},${18 + padding} ${12 + padding},${12 + padding} ${18 + padding},${12 + padding} ${24 + padding},${6 + padding} ${27 + padding},${6 + padding} ${30 + padding},${9 + padding} ${36 + padding},${9 + padding} ${39 + padding},${6 + padding} ${84 + padding},${6 + padding} ${81 + padding},${9 + padding} ${75 + padding},${9 + padding} ${73.2 + padding},${7 + padding} ${40.8 + padding},${7 + padding} ${37.8 + padding},${10.2 + padding} ${24 + padding},${10.2 + padding} ${12 + padding},${21 + padding} ${12 + padding},${24 + padding} ${9 + padding},${27 + padding} ${9 + padding},${51 + padding} ${7.8 + padding},${54 + padding} ${7.8 + padding},${63 + padding}
+                `}
                 >
                   <animate
                     attributeName='fill'
@@ -94,7 +102,9 @@ export const CustomDV1 = defineComponent({
                 </polygon>
                 <polygon
                   fill={mergedColor.value[1]}
-                  points='27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8'
+                  points={`
+                  ${27.6 + padding},${4.8 + padding} ${38.4 + padding},${4.8 + padding} ${35.4 + padding},${7.8 + padding} ${30.6 + padding},${7.8 + padding}
+                `}
                 >
                   <animate
                     attributeName='fill'
@@ -106,7 +116,9 @@ export const CustomDV1 = defineComponent({
                 </polygon>
                 <polygon
                   fill={mergedColor.value[0]}
-                  points='9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54'
+                  points={`
+                  ${9 + padding},${54 + padding} ${9 + padding},${63 + padding} ${7.2 + padding},${66 + padding} ${7.2 + padding},${75 + padding} ${7.8 + padding},${78 + padding} ${7.8 + padding},${110 + padding} ${8.4 + padding},${110 + padding} ${8.4 + padding},${66 + padding} ${9.6 + padding},${66 + padding} ${9.6 + padding},${54 + padding}
+                `}
                 >
                   <animate
                     attributeName='fill'
@@ -148,7 +160,11 @@ export const CustomDV1 = defineComponent({
   },
   render() {
     return (
-      <div ref='customDv1' class={[this.ns.b(), this.ns.is('style-1', true)]}>
+      <div
+        ref='customDv1'
+        class={[this.ns.b(), this.ns.is('style-1', true)]}
+        style={`--ibiz-style-1-offsetY:${this.offsetY}px`}
+      >
         {this.renderBorder()}
         <div class={this.ns.e('content')}>{this.$slots.default?.()}</div>
       </div>
diff --git a/src/custom-border/custom-dv-10/custom-dv-10.scss b/src/custom-border/custom-dv-10/custom-dv-10.scss
index 8ab5442c1415c6c1924592f44417d2d200017931..1e513d3e6c4f0d0cdc47617d25e38799f1b3850e 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.scss
+++ b/src/custom-border/custom-dv-10/custom-dv-10.scss
@@ -1,13 +1,27 @@
+$style-10: (
+  'offsetY': 0,
+  'padding': 0,
+);
+
 @include b(custom-border) {
+  @include set-component-css-var(style-10, $style-10);
+
   @include when(style-10) {
     position: relative;
     width: 100%;
-    height: 100%;
-    border-radius: 10px;
+    height: calc(100% - getCssVar(style-10, 'offsetY'));
     @include e(border-box) {
       z-index: 100;
       height: 0;
     }
+    @include e(mask) {
+      position: absolute;
+      top: getCssVar(style-10, 'padding');
+      left: getCssVar(style-10, 'padding');
+      width:  calc(100% - 2 * getCssVar(style-10, 'padding'));
+      height: calc(100% - 2 * getCssVar(style-10, 'padding'));
+      border-radius: 10px;
+    }
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
diff --git a/src/custom-border/custom-dv-10/custom-dv-10.tsx b/src/custom-border/custom-dv-10/custom-dv-10.tsx
index 242c8c82337bf7617101392fa82dcf3d44356182..13d10f1fec351f8ef625fd840accbb2cbb2751e7 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.tsx
+++ b/src/custom-border/custom-dv-10/custom-dv-10.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   defineComponent,
   onMounted,
@@ -19,14 +20,18 @@ import './custom-dv-10.scss';
 export const CustomDV10 = defineComponent({
   name: 'CustomDV10',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -38,6 +43,9 @@ export const CustomDV10 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
+    const offsety = ref(props.offsetY);
+    const padding = ref(8);
     /**
      * 绘制边框svg
      */
@@ -47,13 +55,22 @@ export const CustomDV10 = defineComponent({
           {border.map((item: string) => (
             <svg
               width='150px'
-              height='150px'
+              height={`${150 - props.offsetY / 2}px`}
               key={item}
               class={[ns.e(item), ns.em('border-svg', 'container')]}
             >
               <polygon
                 fill={mergedColor.value[1]}
-                points='40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3'
+                points={`
+               ${40 + padding.value}, ${0 + padding.value} 
+               ${5 + padding.value}, ${0 + padding.value} 
+               ${0 + padding.value}, ${5 + padding.value} 
+               ${0 + padding.value}, ${16 + padding.value} 
+               ${3 + padding.value}, ${19 + padding.value} 
+               ${3 + padding.value}, ${7 + padding.value} 
+               ${7 + padding.value}, ${3 + padding.value} 
+               ${35 + padding.value}, ${3 + padding.value}
+             `}
               />
             </svg>
           ))}
@@ -83,6 +100,9 @@ export const CustomDV10 = defineComponent({
       customDv10,
       mergedColor,
       renderBorder,
+      backgroundColor,
+      padding,
+      offsety,
     };
   },
   render() {
@@ -90,9 +110,13 @@ export const CustomDV10 = defineComponent({
       <div
         ref='customDv10'
         class={[this.ns.b(), this.ns.is('style-10', true)]}
-        style={`box-shadow: inset 0 0 25px 3px ${this.mergedColor[0]};background-color: ${this.backgroundColor};`}
+        style={`--ibiz-style-10-offsetY:${this.offsety}px;--ibiz-style-10-padding:${this.padding}px`}
       >
         {this.renderBorder()}
+        <div
+          class={this.ns.e('mask')}
+          style={`box-shadow: inset 0 0 25px 3px ${this.mergedColor[0]};background-color: ${this.backgroundColor};`}
+        ></div>
         <div class={this.ns.e('content')}>{this.$slots.default?.()}</div>
       </div>
     );
diff --git a/src/custom-border/custom-dv-11/custom-dv-11.tsx b/src/custom-border/custom-dv-11/custom-dv-11.tsx
index a952c61ca51f9b66bf17d6504f1240617cbabea6..3f42f6616d94006f8f78ea485b924f3fb84dc5ed 100644
--- a/src/custom-border/custom-dv-11/custom-dv-11.tsx
+++ b/src/custom-border/custom-dv-11/custom-dv-11.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import { createUUID } from 'qx-util';
 import {
   defineComponent,
@@ -21,6 +22,14 @@ import './custom-dv-11.scss';
 export const CustomDV11 = defineComponent({
   name: 'CustomDV11',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
@@ -33,10 +42,6 @@ export const CustomDV11 = defineComponent({
       type: String,
       default: '',
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -49,15 +54,20 @@ export const CustomDV11 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
+
     /**
      * 绘制边框svg
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[ns.em('border-svg', 'container')]}
-          width={width.value}
-          height={height.value}
+          width={_width}
+          height={_height}
         >
           <defs>
             <filter
@@ -89,7 +99,7 @@ export const CustomDV11 = defineComponent({
           </defs>
 
           <polygon
-            fill={props.backgroundColor}
+            fill={backgroundColor}
             points={`
         20, 32 ${width.value * 0.5 - props.titleWidth / 2}, 32 ${
           width.value * 0.5 - props.titleWidth / 2 + 20
@@ -108,46 +118,43 @@ export const CustomDV11 = defineComponent({
             stroke={mergedColor.value[0]}
             filter={`url(#${filterId.value})`}
             points={`
-          ${(width.value - props.titleWidth) / 2}, 30
-          20, 30 7, 50 7, ${50 + (height.value - 167) / 2}
-          13, ${55 + (height.value - 167) / 2} 13, ${
-            135 + (height.value - 167) / 2
-          }
-          7, ${140 + (height.value - 167) / 2} 7, ${height.value - 27}
-          20, ${height.value - 7} ${width.value - 20}, ${height.value - 7} ${
-            width.value - 7
-          }, ${height.value - 27}
-          ${width.value - 7}, ${140 + (height.value - 167) / 2} ${
-            width.value - 13
-          }, ${135 + (height.value - 167) / 2}
-          ${width.value - 13}, ${55 + (height.value - 167) / 2} ${
-            width.value - 7
-          }, ${50 + (height.value - 167) / 2}
-          ${width.value - 7}, 50 ${width.value - 20}, 30 ${
-            (width.value + props.titleWidth) / 2
-          }, 30
-          ${(width.value + props.titleWidth) / 2 - 20}, 7 ${
-            (width.value - props.titleWidth) / 2 + 20
-          }, 7
-          ${(width.value - props.titleWidth) / 2}, 30 ${
-            (width.value - props.titleWidth) / 2 + 20
-          }, 52
-          ${(width.value + props.titleWidth) / 2 - 20}, 52 ${
-            (width.value + props.titleWidth) / 2
-          }, 30
-        `}
+    ${(width.value - props.titleWidth) / 2 + padding}, ${30 + padding}
+    ${20 + padding}, ${30 + padding}
+    ${7 + padding}, ${50 + padding} 
+    ${7 + padding}, ${50 + (height.value - 167) / 2 + padding}
+    ${13 + padding}, ${55 + (height.value - 167) / 2 + padding}
+    ${13 + padding}, ${135 + (height.value - 167) / 2 + padding}
+    ${7 + padding}, ${140 + (height.value - 167) / 2 + padding} 
+    ${7 + padding}, ${height.value - 27 - padding}
+    ${20 + padding}, ${height.value - 7 - padding} 
+    ${width.value - 20 - padding}, ${height.value - 7 - padding} 
+    ${width.value - 7 - padding}, ${height.value - 27 - padding}
+    ${width.value - 7 - padding}, ${140 + (height.value - 167) / 2 + padding} 
+    ${width.value - 13 - padding}, ${135 + (height.value - 167) / 2 + padding}
+    ${width.value - 13 - padding}, ${55 + (height.value - 167) / 2 + padding} 
+    ${width.value - 7 - padding}, ${50 + (height.value - 167) / 2 + padding}
+    ${width.value - 7 - padding}, ${50 + padding}  ${width.value - 20 - padding},  ${30 + padding} 
+     ${(width.value + props.titleWidth) / 2}, ${30 + padding}
+     ${(width.value + props.titleWidth) / 2 - 20}, ${7 + padding} 
+     ${(width.value - props.titleWidth) / 2 + 20}, ${7 + padding} 
+     ${(width.value - props.titleWidth) / 2}, ${30 + padding}
+     ${(width.value - props.titleWidth) / 2 + 20}, ${52 + padding} 
+     ${(width.value + props.titleWidth) / 2 - 20}, ${52 + padding} 
+     ${(width.value + props.titleWidth) / 2}, ${30 + padding}
+          
+          `}
           />
 
           <polygon
             stroke={mergedColor.value[0]}
             fill='transparent'
             points={`
-          ${(width.value + props.titleWidth) / 2 - 5}, 30 ${
+          ${(width.value + props.titleWidth) / 2 - 5}, ${30 + padding} ${
             (width.value + props.titleWidth) / 2 - 21
-          }, 11
-          ${(width.value + props.titleWidth) / 2 - 27}, 11 ${
+          }, ${11 + padding}
+          ${(width.value + props.titleWidth) / 2 - 27}, ${11 + padding} ${
             (width.value + props.titleWidth) / 2 - 8
-          }, 34
+          }, ${34 + padding}
         `}
           />
 
@@ -155,12 +162,12 @@ export const CustomDV11 = defineComponent({
             stroke={mergedColor.value[0]}
             fill='transparent'
             points={`
-          ${(width.value - props.titleWidth) / 2 + 5}, 30 ${
+          ${(width.value - props.titleWidth) / 2 + 5}, ${30 + padding} ${
             (width.value - props.titleWidth) / 2 + 22
-          }, 49
-          ${(width.value - props.titleWidth) / 2 + 28}, 49 ${
+          }, ${49 + padding}
+          ${(width.value - props.titleWidth) / 2 + 28}, ${49 + padding} ${
             (width.value - props.titleWidth) / 2 + 8
-          }, 26
+          }, ${26 + padding}
         `}
           />
 
@@ -169,15 +176,15 @@ export const CustomDV11 = defineComponent({
             fill={fade(mergedColor.value[1] || defaultColor[1], 30) || ''}
             filter={`url(#${filterId.value})`}
             points={`
-        ${(width.value + props.titleWidth) / 2 - 11}, 37 ${
+        ${(width.value + props.titleWidth) / 2 - 11}, ${37 + padding} ${
           (width.value + props.titleWidth) / 2 - 32
-        }, 11
-        ${(width.value - props.titleWidth) / 2 + 23}, 11 ${
+        }, ${11 + padding}
+        ${(width.value - props.titleWidth) / 2 + 23}, ${11 + padding} ${
           (width.value - props.titleWidth) / 2 + 11
-        }, 23
-        ${(width.value - props.titleWidth) / 2 + 33}, 49 ${
+        }, ${23 + padding}
+        ${(width.value - props.titleWidth) / 2 + 33}, ${49 + padding} ${
           (width.value + props.titleWidth) / 2 - 22
-        }, 49
+        }, ${49 + padding}
       `}
           />
 
@@ -186,12 +193,12 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             opacity='1'
             points={`
-          ${(width.value - props.titleWidth) / 2 - 10}, 37 ${
+          ${(width.value - props.titleWidth) / 2 - 10}, ${37 + padding} ${
             (width.value - props.titleWidth) / 2 - 31
-          }, 37
-          ${(width.value - props.titleWidth) / 2 - 25}, 46 ${
+          }, ${37 + padding}
+          ${(width.value - props.titleWidth) / 2 - 25}, ${46 + padding} ${
             (width.value - props.titleWidth) / 2 - 4
-          }, 46
+          }, ${46 + padding}
         `}
           >
             <animate
@@ -208,12 +215,12 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             opacity='0.7'
             points={`
-          ${(width.value - props.titleWidth) / 2 - 40}, 37 ${
+          ${(width.value - props.titleWidth) / 2 - 40}, ${37 + padding} ${
             (width.value - props.titleWidth) / 2 - 61
-          }, 37
-          ${(width.value - props.titleWidth) / 2 - 55}, 46 ${
+          }, ${37 + padding}
+          ${(width.value - props.titleWidth) / 2 - 55}, ${46 + padding} ${
             (width.value - props.titleWidth) / 2 - 34
-          }, 46
+          }, ${46 + padding}
         `}
           >
             <animate
@@ -230,12 +237,12 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             opacity='0.5'
             points={`
-          ${(width.value - props.titleWidth) / 2 - 70}, 37 ${
+          ${(width.value - props.titleWidth) / 2 - 70}, ${37 + padding} ${
             (width.value - props.titleWidth) / 2 - 91
-          }, 37
-          ${(width.value - props.titleWidth) / 2 - 85}, 46 ${
+          }, ${37 + padding}
+          ${(width.value - props.titleWidth) / 2 - 85}, ${46 + padding} ${
             (width.value - props.titleWidth) / 2 - 64
-          }, 46
+          }, ${46 + padding}
         `}
           >
             <animate
@@ -252,12 +259,12 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             opacity='1'
             points={`
-          ${(width.value + props.titleWidth) / 2 + 30}, 37 ${
+          ${(width.value + props.titleWidth) / 2 + 30}, ${37 + padding} ${
             (width.value + props.titleWidth) / 2 + 9
-          }, 37
-          ${(width.value + props.titleWidth) / 2 + 3}, 46 ${
+          }, ${37 + padding}
+          ${(width.value + props.titleWidth) / 2 + 3}, ${46 + padding} ${
             (width.value + props.titleWidth) / 2 + 24
-          }, 46
+          }, ${46 + padding}
         `}
           >
             <animate
@@ -274,12 +281,12 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             opacity='0.7'
             points={`
-          ${(width.value + props.titleWidth) / 2 + 60}, 37 ${
+          ${(width.value + props.titleWidth) / 2 + 60}, ${37 + padding} ${
             (width.value + props.titleWidth) / 2 + 39
-          }, 37
-          ${(width.value + props.titleWidth) / 2 + 33}, 46 ${
+          }, ${37 + padding}
+          ${(width.value + props.titleWidth) / 2 + 33}, ${46 + padding} ${
             (width.value + props.titleWidth) / 2 + 54
-          }, 46
+          }, ${46 + padding}
         `}
           >
             <animate
@@ -296,12 +303,12 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             opacity='0.5'
             points={`
-        ${(width.value + props.titleWidth) / 2 + 90}, 37 ${
+        ${(width.value + props.titleWidth) / 2 + 90}, ${37 + padding} ${
           (width.value + props.titleWidth) / 2 + 69
-        }, 37
-        ${(width.value + props.titleWidth) / 2 + 63}, 46 ${
+        }, ${37 + padding}
+        ${(width.value + props.titleWidth) / 2 + 63}, ${46 + padding} ${
           (width.value + props.titleWidth) / 2 + 84
-        }, 46
+        }, ${46 + padding}
       `}
           >
             <animate
@@ -329,10 +336,10 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             filter={`url(#${filterId.value})`}
             points={`
-          7, ${53 + (height.value - 167) / 2} 11, ${
+          ${7 + padding}, ${53 + (height.value - 167) / 2} ${11 + padding}, ${
             57 + (height.value - 167) / 2
           }
-          11, ${133 + (height.value - 167) / 2} 7, ${
+          ${11 + padding}, ${133 + (height.value - 167) / 2} ${7 + padding}, ${
             137 + (height.value - 167) / 2
           }
         `}
@@ -342,11 +349,11 @@ export const CustomDV11 = defineComponent({
             fill={mergedColor.value[0]}
             filter={`url(#${filterId.value})`}
             points={`
-          ${width.value - 7}, ${53 + (height.value - 167) / 2} ${
-            width.value - 11
+          ${width.value - 7 - padding}, ${53 + (height.value - 167) / 2} ${
+            width.value - 11 - padding
           }, ${57 + (height.value - 167) / 2}
-          ${width.value - 11}, ${133 + (height.value - 167) / 2} ${
-            width.value - 7
+          ${width.value - 11 - padding}, ${133 + (height.value - 167) / 2} ${
+            width.value - 7 - padding
           }, ${137 + (height.value - 167) / 2}
         `}
           />
diff --git a/src/custom-border/custom-dv-12/custom-dv-12.scss b/src/custom-border/custom-dv-12/custom-dv-12.scss
index 5473adf3776afef2d01dfe84ecd3e4ae80ba8bb1..e5452d79584ec82daea1073e6abecbc18d7ad9c6 100644
--- a/src/custom-border/custom-dv-12/custom-dv-12.scss
+++ b/src/custom-border/custom-dv-12/custom-dv-12.scss
@@ -1,4 +1,10 @@
+$style-12: (
+    'offsetY': 0,
+);
+
 @include b('custom-border') {
+  @include set-component-css-var(style-12, $style-12);
+
   @include when(style-12) {
     position: relative;
     width: 100%;
@@ -11,7 +17,8 @@
       top: 0;
       left: 0;
       width: 100%;
-      height: 100%;
+      height: calc(100% - getCssVar(style-12,'offsetY'));
+
   
       & > polyline {
         fill: none;
diff --git a/src/custom-border/custom-dv-12/custom-dv-12.tsx b/src/custom-border/custom-dv-12/custom-dv-12.tsx
index 2ef6dd3c9c01e2ec5e9e20d383360b282d866b6a..6b91c941ae2bf5af6511292e2c0cd2197e733ae1 100644
--- a/src/custom-border/custom-dv-12/custom-dv-12.tsx
+++ b/src/custom-border/custom-dv-12/custom-dv-12.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   ComponentInternalInstance,
   PropType,
@@ -17,14 +18,18 @@ import './custom-dv-12.scss';
 export const CustomDV12 = defineComponent({
   name: 'CustomDV12',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -38,6 +43,7 @@ export const CustomDV12 = defineComponent({
     let domObserver: MutationObserver | null;
     const id = uuid(false);
     const filterId = `borderr-box-12-filterId-${id}`;
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
 
     /**
      *  初始化宽高
@@ -150,10 +156,16 @@ export const CustomDV12 = defineComponent({
      * 绘制边框
      */
     const renderBorder = () => {
-      const _width = width.value;
-      const _height = height.value;
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
-        <svg class={[ns.e('svg-container')]} width={_width} height={_height}>
+        <svg
+          class={[ns.e('svg-container')]}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-12-offsetY:${props.offsetY}px`}
+        >
           <defs>
             <filter id={filterId} height='150%' width='150%' x='-25%' y='-25%'>
               <feMorphology
@@ -195,17 +207,15 @@ export const CustomDV12 = defineComponent({
           </defs>
           {_width && _height ? (
             <path
-              fill={props.backgroundColor}
+              fill={backgroundColor}
               stroke-width={2}
               stroke={mergedColor.value[0]}
               d={`
-            M15 5 L ${_width - 15} 5 Q ${_width - 5} 5, ${_width - 5} 15
-            L ${_width - 5} ${_height - 15} Q ${_width - 5} ${_height - 5}, ${
-              _width - 15
-            } ${_height - 5}
-            L 15, ${_height - 5} Q 5 ${_height - 5} 5 ${_height - 15} L 5 15
-            Q 5 5 15 5
-          `}
+        M ${15 + padding} 5 L ${_width - 15 - padding} 5 Q ${_width - 5 - padding} 5, ${_width - 5 - padding} 15
+        L ${_width - 5 - padding} ${_height - 15 - padding} Q ${_width - 5 - padding} ${_height - 5 - padding}, ${_width - 15 - padding} ${_height - 5 - padding}
+        L ${15 + padding}, ${_height - 5 - padding} Q ${5 + padding} ${_height - 5 - padding} ${5 + padding} ${_height - 15 - padding} L ${5 + padding} 15
+        Q ${5 + padding} 5 ${15 + padding} 5
+      `}
             />
           ) : null}
 
@@ -215,18 +225,16 @@ export const CustomDV12 = defineComponent({
             stroke-linecap='round'
             filter={`url(#${filterId})`}
             stroke={mergedColor.value[1]}
-            d={`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`}
+            d={`M ${20 + padding} 5 L ${15 + padding} 5 Q ${5 + padding} 5 ${5 + padding} 15 L ${5 + padding} ${_height - 5 - padding}`}
           />
 
           <path
-            stroke-width='2'
+            stroke-width={2}
             fill='transparent'
             stroke-linecap='round'
             filter={`url(#${filterId})`}
             stroke={mergedColor.value[1]}
-            d={`M ${_width - 20} 5 L ${_width - 15} 5 Q ${_width - 5} 5 ${
-              _width - 5
-            } 15 L ${_width - 5} 20`}
+            d={`M ${_width - 20 - padding} 5 L ${_width - 15 - padding} 5 Q ${_width - 5 - padding} 5 ${_width - 5 - padding} 15 L ${_width - 5 - padding} ${_height - 5 - padding}`}
           />
 
           <path
@@ -235,11 +243,7 @@ export const CustomDV12 = defineComponent({
             stroke-linecap='round'
             filter={`url(#${filterId})`}
             stroke={mergedColor.value[1]}
-            d={`
-          M ${_width - 20} ${_height - 5} L ${_width - 15} ${_height - 5}
-          Q ${_width - 5} ${_height - 5} ${_width - 5} ${_height - 15}
-          L ${_width - 5} ${_height - 20}
-        `}
+            d={`M ${_width - 20 - padding} ${_height - 5 - padding} L ${_width - 15 - padding} ${_height - 5 - padding} Q ${_width - 5 - padding} ${_height - 5 - padding} ${_width - 5 - padding} ${_height - 15 - padding} L ${_width - 5 - padding} ${_height - 20 - padding}`}
           />
 
           <path
@@ -248,11 +252,7 @@ export const CustomDV12 = defineComponent({
             stroke-linecap='round'
             filter={`url(#${filterId})`}
             stroke={mergedColor.value[1]}
-            d={`
-          M 20 ${_height - 5} L 15 ${_height - 5}
-          Q 5 ${_height - 5} 5 ${_height - 15}
-          L 5 ${_height - 20}
-        `}
+            d={`M ${20 + padding} ${_height - 5 - padding} L ${15 + padding} ${_height - 5 - padding} Q ${5 + padding} ${_height - 5 - padding} ${5 + padding} ${_height - 15 - padding} L ${5 + padding} ${_height - 20 - padding}`}
           />
         </svg>
       );
diff --git a/src/custom-border/custom-dv-13/custom-dv-13.scss b/src/custom-border/custom-dv-13/custom-dv-13.scss
index 946a8d1eec488f5c3cc0f1387f61981e24d9e592..8853391d1a83222ade523b15caa090048b7544a5 100644
--- a/src/custom-border/custom-dv-13/custom-dv-13.scss
+++ b/src/custom-border/custom-dv-13/custom-dv-13.scss
@@ -1,4 +1,9 @@
+$style-13: (
+    'offsetY': 0,
+);
+
 @include b(custom-border) {
+  @include set-component-css-var(style-13, $style-13);
   @include when(style-13) {
     position: relative;
     width: 100%;
@@ -9,7 +14,7 @@
         top: 0;
         left: 0;
         width: 100%;
-        height: 100%;
+        height: calc(100% - getCssVar(style-13,'offsetY'));
       }
     }
   }
diff --git a/src/custom-border/custom-dv-13/custom-dv-13.tsx b/src/custom-border/custom-dv-13/custom-dv-13.tsx
index e92c16147e7147db373a1f30eed0e1349a1dc94b..a0370a4125a17b3e7651b8655caf2eadf8513084 100644
--- a/src/custom-border/custom-dv-13/custom-dv-13.tsx
+++ b/src/custom-border/custom-dv-13/custom-dv-13.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   defineComponent,
   onMounted,
@@ -19,14 +20,18 @@ import './custom-dv-13.scss';
 export const CustomDV13 = defineComponent({
   name: 'CustomDV13',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -37,25 +42,32 @@ export const CustomDV13 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
+
     /**
      * 绘制边框svg
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[ns.em('border-svg', 'container')]}
-          width={width.value}
-          height={height.value}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-13-offsetY:${props.offsetY}px`}
         >
           <path
-            fill={props.backgroundColor}
+            fill={backgroundColor}
             stroke={mergedColor.value[0]}
             d={`
-          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
-          L ${width.value - 20} 10 L ${width.value - 5} 25
-          L ${width.value - 5} ${height.value - 5} L 20 ${height.value - 5}
-          L 5 ${height.value - 20} L 5 20
-        `}
+            M ${5 + padding} ${20 + padding} L ${5 + padding} ${10 + padding} L ${12 + padding} ${3 + padding} 
+            L ${60 - padding} ${3 + padding} L ${68 - padding} ${10 + padding}
+            L ${width.value - 20 - padding} ${10 + padding} L ${width.value - 5 - padding} ${25 + padding}
+            L ${width.value - 5 - padding} ${_height - 5 - padding} L ${20 + padding} ${_height - 5 - padding}
+            L ${5 + padding} ${_height - 20 - padding} L ${5 + padding} ${20 + padding}
+          `}
           />
 
           <path
@@ -64,21 +76,20 @@ export const CustomDV13 = defineComponent({
             stroke-linecap='round'
             stroke-dasharray='10, 5'
             stroke={mergedColor.value[0]}
-            d={`M 16 9 L 61 9`}
+            d={`M ${16 + padding} ${9 + padding} L ${61 - padding} ${9 + padding}`}
           />
 
           <path
             fill='transparent'
             stroke={mergedColor.value[1]}
-            d={`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`}
+            d={`M ${5 + padding} ${20 + padding} L ${5 + padding} ${10 + padding} L ${12 + padding} ${3 + padding} 
+            L ${60 - padding} ${3 + padding} L ${68 - padding} ${10 + padding}`}
           />
 
           <path
             fill='transparent'
             stroke={mergedColor.value[1]}
-            d={`M ${width.value - 5} ${height.value - 30} L ${
-              width.value - 5
-            } ${height.value - 5} L ${width.value - 30} ${height.value - 5}`}
+            d={`M ${width.value - 5 - padding} ${_height - 30 - padding} L ${width.value - 5 - padding} ${_height - 5 - padding} L ${width.value - 30 - padding} ${_height - 5 - padding}`}
           />
         </svg>
       );
diff --git a/src/custom-border/custom-dv-2/custom-dv-2.scss b/src/custom-border/custom-dv-2/custom-dv-2.scss
index e891e216b861418996be47a8c9a72170c0528920..65c5a835c5abdfc20da7701f43e9306844e0d91a 100644
--- a/src/custom-border/custom-dv-2/custom-dv-2.scss
+++ b/src/custom-border/custom-dv-2/custom-dv-2.scss
@@ -1,4 +1,9 @@
+$style-2: (
+    'offsetY': 0,
+);
+
 @include b(custom-border) {
+  @include set-component-css-var(style-2, $style-2);
   @include when(style-2) {
     position: relative;
     z-index: 1;
@@ -11,6 +16,7 @@
         left: 0;
         width: 100%;
         height: 100%;
+        height: calc(100% - getCssVar(style-2,'offsetY'));
   
         & > polyline {
           fill: none;
diff --git a/src/custom-border/custom-dv-2/custom-dv-2.tsx b/src/custom-border/custom-dv-2/custom-dv-2.tsx
index 0a8f7e43d1f4ec8c7515fd569f6a14aa898e2c0c..fe95ceadf037ed9378fec3048275eee30665e0b6 100644
--- a/src/custom-border/custom-dv-2/custom-dv-2.tsx
+++ b/src/custom-border/custom-dv-2/custom-dv-2.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   defineComponent,
   onMounted,
@@ -19,14 +20,18 @@ import './custom-dv-2.scss';
 export const CustomDV2 = defineComponent({
   name: 'CustomDV2',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -37,54 +42,74 @@ export const CustomDV2 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
+
     /**
      * 绘制边框svg
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[ns.em('border-svg', 'container')]}
-          width={width.value}
-          height={height.value}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-2-offsetY:${props.offsetY}px`}
         >
           <polygon
-            fill={props.backgroundColor}
+            fill={backgroundColor}
             points={`
-        7, 7 ${width.value - 7}, 7 ${width.value - 7}, ${height.value - 7} 7, ${
-          height.value - 7
-        }
-      `}
+            ${7 + padding}, ${7 + padding} 
+            ${width.value - 7 - padding}, ${7 + padding} 
+            ${width.value - 7 - padding}, ${height.value - 7 - props.offsetY - padding} 
+            ${7 + padding}, ${height.value - 7 - padding - props.offsetY}
+          `}
           />
 
           <polyline
             stroke={mergedColor.value[0]}
-            points={`2, 2 ${width.value - 2} ,2 ${width.value - 2}, ${
-              height.value - 2
-            } 2, ${height.value - 2} 2, 2`}
+            points={`
+            ${2 + padding}, ${2 + padding} 
+            ${width.value - 2 - padding}, ${2 + padding} 
+            ${width.value - 2 - padding}, ${height.value - 2 - props.offsetY - padding} 
+            ${2 + padding}, ${height.value - 2 - props.offsetY - padding} 
+            ${2 + padding}, ${2 + padding}
+          `}
           />
           <polyline
             stroke={mergedColor.value[1]}
-            points={`6, 6 ${width.value - 6}, 6 ${width.value - 6}, ${
-              height.value - 6
-            } 6, ${height.value - 6} 6, 6`}
+            points={`
+            ${6 + padding}, ${6 + padding} 
+            ${width.value - 6 - padding}, ${6 + padding} 
+            ${width.value - 6 - padding}, ${height.value - 6 - padding - props.offsetY} 
+            ${6 + padding}, ${height.value - 6 - props.offsetY - padding} 
+            ${6 + padding}, ${6 + padding}
+          `}
+          />
+          <circle
+            fill={mergedColor.value[0]}
+            cx={`${11 + padding}`}
+            cy={`${11 + padding}`}
+            r='1'
           />
-          <circle fill={mergedColor.value[0]} cx='11' cy='11' r='1' />
           <circle
             fill={mergedColor.value[0]}
-            cx={width.value - 11}
-            cy='11'
+            cx={`${width.value - 11 - padding}`}
+            cy={`${11 + padding}`}
             r='1'
           />
           <circle
             fill={mergedColor.value[0]}
-            cx={width.value - 11}
-            cy={height.value - 11}
+            cx={`${width.value - 11 - padding}`}
+            cy={`${height.value - 11 - padding - props.offsetY}`}
             r='1'
           />
           <circle
             fill={mergedColor.value[0]}
-            cx='11'
-            cy={height.value - 11}
+            cx={`${11 + padding}`}
+            cy={`${height.value - 11 - padding - props.offsetY}`}
             r='1'
           />
         </svg>
diff --git a/src/custom-border/custom-dv-3/custom-dv-3.scss b/src/custom-border/custom-dv-3/custom-dv-3.scss
index 27c84461a00f279409367b7c2111a7b3db3e330b..532899959ce8c8276d45560f3ecee9fddb189b5d 100644
--- a/src/custom-border/custom-dv-3/custom-dv-3.scss
+++ b/src/custom-border/custom-dv-3/custom-dv-3.scss
@@ -1,4 +1,10 @@
+$style-3: (
+    'offsetY': 0,
+);
+
 @include b(custom-border) {
+  @include set-component-css-var(style-3, $style-3);
+
   @include when(style-3) {
     position: relative;
     z-index: 1;
@@ -10,7 +16,8 @@
         top: 0;
         left: 0;
         width: 100%;
-        height: 100%;
+        height: calc(100% - getCssVar(style-3,'offsetY'));
+
   
         & > polyline {
           fill: none;
diff --git a/src/custom-border/custom-dv-3/custom-dv-3.tsx b/src/custom-border/custom-dv-3/custom-dv-3.tsx
index 019835eec80543c92382a3cfea2ab45fb9ed3e22..d426b9e629aa0fdda7909aa16644102de3432913 100644
--- a/src/custom-border/custom-dv-3/custom-dv-3.tsx
+++ b/src/custom-border/custom-dv-3/custom-dv-3.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   defineComponent,
   onMounted,
@@ -19,14 +20,18 @@ import './custom-dv-3.scss';
 export const CustomDV3 = defineComponent({
   name: 'CustomDV3',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -37,52 +42,74 @@ export const CustomDV3 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
     /**
      * 绘制边框svg
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[ns.em('border-svg', 'container')]}
-          width={width.value}
-          height={height.value}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-3-offsetY:${props.offsetY}px`}
         >
           <polygon
-            fill={props.backgroundColor}
+            fill={backgroundColor}
             points={`
-        23, 23 ${width.value - 24}, 23 ${width.value - 24}, ${
-          height.value - 24
-        } 23, ${height.value - 24}
-      `}
+            ${23 + padding}, ${23 + padding} 
+            ${width.value - 24 - padding}, ${23 + padding} 
+            ${width.value - 24 - padding}, ${height.value - 24 - props.offsetY - padding} 
+            ${23 + padding}, ${height.value - 24 - props.offsetY - padding}
+          `}
           />
 
           <polyline
             class={[ns.e('bb3-line1')]}
             stroke={mergedColor.value[0]}
-            points={`4, 4 ${width.value - 22} ,4 ${width.value - 22}, ${
-              height.value - 22
-            } 4, ${height.value - 22} 4, 4`}
+            points={`
+            ${4 + padding}, ${4 + padding} 
+            ${width.value - 22 - padding}, ${4 + padding} 
+            ${width.value - 22 - padding}, ${height.value - 22 - props.offsetY - padding} 
+            ${4 + padding}, ${height.value - 22 - props.offsetY - padding} 
+            ${4 + padding}, ${4 + padding}
+          `}
           />
           <polyline
             class={[ns.e('bb3-line2')]}
             stroke={mergedColor.value[1]}
-            points={`10, 10 ${width.value - 16}, 10 ${width.value - 16}, ${
-              height.value - 16
-            } 10, ${height.value - 16} 10, 10`}
+            points={`
+            ${10 + padding}, ${10 + padding} 
+            ${width.value - 16 - padding}, ${10 + padding} 
+            ${width.value - 16 - padding}, ${height.value - 16 - props.offsetY - padding} 
+            ${10 + padding}, ${height.value - 16 - props.offsetY - padding} 
+            ${10 + padding}, ${10 + padding}
+          `}
           />
           <polyline
             class={[ns.e('bb3-line2')]}
             stroke={mergedColor.value[1]}
-            points={`16, 16 ${width.value - 10}, 16 ${width.value - 10}, ${
-              height.value - 10
-            } 16, ${height.value - 10} 16, 16`}
+            points={`
+            ${16 + padding}, ${16 + padding} 
+            ${width.value - 10 - padding}, ${16 + padding} 
+            ${width.value - 10 - padding}, ${height.value - 10 - props.offsetY - padding} 
+            ${16 + padding}, ${height.value - 10 - props.offsetY - padding} 
+            ${16 + padding}, ${16 + padding}
+          `}
           />
           <polyline
             class={[ns.e('bb3-line2')]}
             stroke={mergedColor.value[1]}
-            points={`22, 22 ${width.value - 4}, 22 ${width.value - 4}, ${
-              height.value - 4
-            } 22, ${height.value - 4} 22, 22`}
+            points={`
+            ${22 + padding}, ${22 + padding} 
+            ${width.value - 4 - padding}, ${22 + padding} 
+            ${width.value - 4 - padding}, ${height.value - 4 - props.offsetY - padding} 
+            ${22 + padding}, ${height.value - 4 - props.offsetY - padding} 
+            ${22 + padding}, ${22 + padding}
+          `}
           />
         </svg>
       );
diff --git a/src/custom-border/custom-dv-4/custom-dv-4.scss b/src/custom-border/custom-dv-4/custom-dv-4.scss
index 3adfa368ad6165760b82204f782a84b3c2ecfb56..4c77d8bb9277d2f9f3f874eed101b6f533b6c2cd 100644
--- a/src/custom-border/custom-dv-4/custom-dv-4.scss
+++ b/src/custom-border/custom-dv-4/custom-dv-4.scss
@@ -1,5 +1,11 @@
 /* stylelint-disable scss/at-extend-no-missing-placeholder */
+$style-4: (
+    'offsetY': 0,
+);
+
 @include b('custom-border') {
+  @include set-component-css-var(style-4, $style-4);
+
   @include when(style-4) {
     position: relative;
     width: 100%;
@@ -12,7 +18,7 @@
       top: 0;
       left: 0;
       width: 100%;
-      height: 100%;
+      height: calc(100% - getCssVar(style-4,'offsetY'));
   
       & > polyline {
         fill: none;
diff --git a/src/custom-border/custom-dv-4/custom-dv-4.tsx b/src/custom-border/custom-dv-4/custom-dv-4.tsx
index 1381ca805a0f5dc230d44e0a45da68a2fd97b6ad..9422c460417e98594bd2dc1470da4bb94dfb8de8 100644
--- a/src/custom-border/custom-dv-4/custom-dv-4.tsx
+++ b/src/custom-border/custom-dv-4/custom-dv-4.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   ComponentInternalInstance,
   PropType,
@@ -17,6 +18,14 @@ import './custom-dv-4.scss';
 export const CustomDV4 = defineComponent({
   name: 'CustomDV4',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
@@ -25,10 +34,6 @@ export const CustomDV4 = defineComponent({
       type: Boolean,
       default: false,
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -40,7 +45,7 @@ export const CustomDV4 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
     /**
      *  初始化宽高
      * @param resize
@@ -152,78 +157,126 @@ export const CustomDV4 = defineComponent({
      * 绘制边框
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[
             ns.e('svg-container'),
             { [ns.e('de-reverse')]: props.reverse },
           ]}
-          width={width.value}
-          height={height.value}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-4-offsetY:${props.offsetY}px`}
         >
           <polygon
-            fill={props.backgroundColor}
-            points={`${
-              width.value - 15
-            }, 22 170, 22 150, 7 40, 7 28, 21 32, 24 16, 42 16, ${
-              height.value - 32
-            } 41, ${height.value - 7} ${width.value - 15}, ${height.value - 7}`}
+            fill={backgroundColor}
+            points={`
+            ${width.value - 15 - padding}, ${22 + padding} 
+            ${170 - padding}, ${22 + padding} 
+            ${150 - padding}, ${7 + padding} 
+            ${40 - padding}, ${7 + padding} 
+            ${40 - padding}, ${28 + padding} 
+            ${21 - padding}, ${32 + padding} 
+            ${16 - padding}, ${42 + padding} 
+            ${16 - padding}, ${height.value - 32 - props.offsetY + padding} 
+            ${41 - padding}, ${height.value - 7 - props.offsetY + padding} 
+            ${width.value - 15 - padding}, ${height.value - 7 - props.offsetY + padding}
+          `}
           />
 
           <polyline
             class='dv-bb4-line-1'
             stroke={mergedColor.value[0]}
-            points={`145, ${height.value - 5} 40, ${height.value - 5} 10, ${
-              height.value - 35
-            } 10, 40 40, 5 150, 5 170, 20 ${width.value - 15}, 20`}
+            points={`
+            ${145 - padding}, ${height.value - 5 - props.offsetY + padding} 
+            ${40 - padding}, ${height.value - 5 - props.offsetY + padding} 
+            ${10 - padding}, ${height.value - 35 - props.offsetY + padding} 
+            ${10 - padding}, ${40 + padding} 
+            ${40 - padding}, ${5 + padding} 
+            ${150 - padding}, ${5 + padding} 
+            ${170 - padding}, ${20 + padding} 
+            ${width.value - 15 - padding}, ${20 + padding}
+          `}
           />
           <polyline
             stroke={mergedColor.value[1]}
             class='dv-bb4-line-2'
-            points={`245, ${height.value - 1} 36, ${height.value - 1} 14, ${
-              height.value - 23
-            }    14, ${height.value - 100}`}
+            points={`
+            ${245 - padding}, ${height.value - 1 - props.offsetY + padding} 
+            ${36 - padding}, ${height.value - 1 - props.offsetY + padding} 
+            ${14 - padding}, ${height.value - 23 - props.offsetY + padding} 
+            ${14 - padding}, ${height.value - 100 - props.offsetY + padding}
+          `}
           />
 
           <polyline
             class='dv-bb4-line-3'
             stroke={mergedColor.value[0]}
-            points={`7, ${height.value - 40} 7, ${height.value - 75}`}
+            points={`
+            ${7 - padding}, ${height.value - 40 - props.offsetY + padding} 
+            ${7 - padding}, ${height.value - 75 - props.offsetY + padding}
+          `}
           />
           <polyline
             class='dv-bb4-line-4'
             stroke={mergedColor.value[0]}
-            points={`28, 24 13, 41 13, 64`}
+            points={`
+            ${28 - padding}, ${24 + padding} 
+            ${13 - padding}, ${41 + padding} 
+            ${13 - padding}, ${64 + padding}
+          `}
           />
           <polyline
             class='dv-bb4-line-5'
             stroke={mergedColor.value[0]}
-            points={`5, 45 5, 140`}
+            points={`
+            ${5 - padding}, ${45 + padding} 
+            ${5 - padding}, ${140 + padding}
+          `}
           />
           <polyline
             class='dv-bb4-line-6'
             stroke={mergedColor.value[1]}
-            points={`14, 75 14, 100`}
+            points={`
+            ${14 - padding}, ${75 + padding} 
+            ${14 - padding}, ${100 + padding}
+          `}
           />
           <polyline
             class='dv-bb4-line-7'
             stroke={mergedColor.value[1]}
-            points={`55, 11 147, 11 167, 26 250, 26`}
+            points={`
+            ${55 - padding}, ${11 + padding} 
+            ${147 - padding}, ${11 + padding} 
+            ${167 - padding}, ${26 + padding} 
+            ${250 - padding}, ${26 + padding}
+          `}
           />
           <polyline
             class='dv-bb4-line-8'
             stroke={mergedColor.value[1]}
-            points={`158, 5 173, 16`}
+            points={`
+            ${158 - padding}, ${5 + padding} 
+            ${173 - padding}, ${16 + padding}
+          `}
           />
           <polyline
             class='dv-bb4-line-9'
             stroke={mergedColor.value[0]}
-            points={`200, 17 ${width.value - 10}, 17`}
+            points={`
+            ${200 - padding}, ${17 + padding} 
+            ${width.value - 10 - padding}, ${17 + padding}
+          `}
           />
           <polyline
             class='dv-bb4-line-10'
             stroke={mergedColor.value[1]}
-            points={`385, 17 ${width.value - 10}, 17`}
+            points={`
+            ${385 - padding}, ${17 + padding} 
+            ${width.value - 10 - padding}, ${17 + padding}
+          `}
           />
         </svg>
       );
diff --git a/src/custom-border/custom-dv-5/custom-dv-5.scss b/src/custom-border/custom-dv-5/custom-dv-5.scss
index 37a0b05193ab0454ab9a33147f1bc30104e2fdb8..4b9d332d49ffd256757c796571142c6cc7898976 100644
--- a/src/custom-border/custom-dv-5/custom-dv-5.scss
+++ b/src/custom-border/custom-dv-5/custom-dv-5.scss
@@ -1,4 +1,9 @@
+$style-5: (
+    'offsetY': 0,
+);
+
 @include b('custom-border') {
+  @include set-component-css-var(style-5, $style-5);
   @include when(style-5) {
     position: relative;
     width: 100%;
@@ -11,7 +16,7 @@
       top: 0;
       left: 0;
       width: 100%;
-      height: 100%;
+      height: calc(100% - getCssVar(style-5,'offsetY'));
   
       & > polyline {
         fill: none;
diff --git a/src/custom-border/custom-dv-5/custom-dv-5.tsx b/src/custom-border/custom-dv-5/custom-dv-5.tsx
index 97d15234f4014b04a8aea54fc4be6fa8d77c78e3..1e285e841e5f95ce23cdaa25d6c2e13f8ef1a7a4 100644
--- a/src/custom-border/custom-dv-5/custom-dv-5.tsx
+++ b/src/custom-border/custom-dv-5/custom-dv-5.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   ComponentInternalInstance,
   PropType,
@@ -17,6 +18,14 @@ import './custom-dv-5.scss';
 export const CustomDV5 = defineComponent({
   name: 'CustomDV5',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
@@ -25,10 +34,6 @@ export const CustomDV5 = defineComponent({
       type: Boolean,
       default: false,
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -40,7 +45,7 @@ export const CustomDV5 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
     /**
      *  初始化宽高
      * @param resize
@@ -152,66 +157,84 @@ export const CustomDV5 = defineComponent({
      * 绘制边框
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[
             ns.e('svg-container'),
             { [ns.e('de-reverse')]: props.reverse },
           ]}
-          width={width.value}
-          height={height.value}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-5-offsetY:${props.offsetY}px`}
         >
           <polygon
-            fill={props.backgroundColor}
+            fill={backgroundColor}
             points={`
-        10, 22 ${width.value - 22}, 22 ${width.value - 22}, ${
-          height.value - 86
-        } ${width.value - 84}, ${height.value - 24} 10, ${height.value - 24}
-      `}
+            ${10 + padding}, ${22 + padding} 
+            ${width.value - 22 - padding}, ${22 + padding} 
+            ${width.value - 22 - padding}, ${height.value - 86 - props.offsetY + padding} 
+            ${width.value - 84 - padding}, ${height.value - 24 - props.offsetY + padding} 
+            ${10 + padding}, ${height.value - 24 - props.offsetY + padding}
+          `}
           />
           <polyline
             class='dv-bb5-line-1'
             stroke={mergedColor.value[0]}
-            points={`8, 5 ${width.value - 5}, 5 ${width.value - 5}, ${
-              height.value - 100
-            }
-          ${width.value - 100}, ${height.value - 5} 8, ${
-            height.value - 5
-          } 8, 5`}
+            points={`
+            ${8 + padding}, ${5 + padding} 
+            ${width.value - 5 - padding}, ${5 + padding} 
+            ${width.value - 5 - padding}, ${height.value - 100 - padding} 
+            ${width.value - 100 - padding}, ${height.value - 5 - props.offsetY - padding} 
+            ${8 + padding}, ${height.value - 5 - props.offsetY - padding} 
+            ${8 + padding}, ${5 + padding}
+          `}
           />
           <polyline
             class='dv-bb5-line-2'
             stroke={mergedColor.value[1]}
-            points={`3, 5 ${width.value - 20}, 5 ${width.value - 20}, ${
-              height.value - 60
-            }
-              ${width.value - 74}, ${height.value - 5} 3, ${
-                height.value - 5
-              } 3, 5`}
+            points={`
+            ${3 + padding}, ${5 + padding} 
+            ${width.value - 20 - padding}, ${5 + padding} 
+            ${width.value - 20 - padding}, ${height.value - 60 - props.offsetY - padding} 
+            ${width.value - 74 - padding}, ${height.value - 5 - props.offsetY - padding} 
+            ${3 + padding}, ${height.value - 5 - props.offsetY - padding} 
+            ${3 + padding}, ${5 + padding}
+          `}
           />
           <polyline
             class='dv-bb5-line-3'
             stroke={mergedColor.value[1]}
-            points={`50, 13 ${width.value - 35}, 13`}
+            points={`
+            ${50 + padding}, ${13 + padding} 
+            ${width.value - 35 - padding}, ${13 + padding}
+          `}
           />
           <polyline
             class='dv-bb5-line-4'
             stroke={mergedColor.value[1]}
-            points={`15, 20 ${width.value - 35}, 20`}
+            points={`
+            ${15 + padding}, ${20 + padding} 
+            ${width.value - 35 - padding}, ${20 + padding}
+          `}
           />
           <polyline
             class='dv-bb5-line-5'
             stroke={mergedColor.value[1]}
-            points={`15, ${height.value - 20} ${width.value - 110}, ${
-              height.value - 20
-            }`}
+            points={`
+            ${15 + padding}, ${height.value - 20 - props.offsetY - padding} 
+            ${width.value - 110 - padding}, ${height.value - 20 - props.offsetY - padding}
+          `}
           />
           <polyline
             class='dv-bb5-line-6'
             stroke={mergedColor.value[1]}
-            points={`15, ${height.value - 13} ${width.value - 110}, ${
-              height.value - 13
-            }`}
+            points={`
+            ${15 + padding}, ${height.value - 13 - props.offsetY - padding} 
+            ${width.value - 110 - padding}, ${height.value - 13 - props.offsetY - padding}
+          `}
           />
         </svg>
       );
diff --git a/src/custom-border/custom-dv-6/custom-dv-6.scss b/src/custom-border/custom-dv-6/custom-dv-6.scss
index a4fbab6c374d96d735c9cea01fd4455b28188640..784dd023f24f1e92fb543a166fa7939512a5ec14 100644
--- a/src/custom-border/custom-dv-6/custom-dv-6.scss
+++ b/src/custom-border/custom-dv-6/custom-dv-6.scss
@@ -1,4 +1,8 @@
+$style-6: (
+    'offsetY': 0,
+);
 @include b('custom-border') {
+  @include set-component-css-var(style-6, $style-6);
   @include when(style-6) {
     position: relative;
     width: 100%;
@@ -11,7 +15,7 @@
       top: 0;
       left: 0;
       width: 100%;
-      height: 100%;
+      height: calc(100% - getCssVar(style-6,'offsetY'));
   
       & > polyline {
         fill: none;
diff --git a/src/custom-border/custom-dv-6/custom-dv-6.tsx b/src/custom-border/custom-dv-6/custom-dv-6.tsx
index da7fa5231dbbf3a0fd256469e3743dc4440d5fe8..984bd68e99567497b87eb9d19c4f7ed18c087bbb 100644
--- a/src/custom-border/custom-dv-6/custom-dv-6.tsx
+++ b/src/custom-border/custom-dv-6/custom-dv-6.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   ComponentInternalInstance,
   PropType,
@@ -17,6 +18,14 @@ import './custom-dv-6.scss';
 export const CustomDV6 = defineComponent({
   name: 'CustomDV6',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
@@ -25,10 +34,6 @@ export const CustomDV6 = defineComponent({
       type: Boolean,
       default: false,
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -40,7 +45,7 @@ export const CustomDV6 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
     /**
      *  初始化宽高
      * @param resize
@@ -152,8 +157,9 @@ export const CustomDV6 = defineComponent({
      * 绘制边框
      */
     const renderBorder = () => {
-      const _width = width.value;
-      const _height = height.value;
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[
@@ -162,68 +168,90 @@ export const CustomDV6 = defineComponent({
           ]}
           width={_width}
           height={_height}
+          style={`--ibiz-style-6-offsetY:${props.offsetY}px`}
         >
           <polygon
-            fill={props.backgroundColor}
-            points={` 9, 7 ${_width - 9}, 7 ${_width - 9}, ${_height - 7} 9, ${
-              _height - 7
-            }`}
+            fill={backgroundColor}
+            points={`
+            ${9 + padding}, ${7 + padding} 
+            ${_width - 9 - padding}, ${7 + padding} 
+            ${_width - 9 - padding}, ${_height - 7 - padding} 
+            ${9 + padding}, ${_height - 7 - padding}
+          `}
           />
 
-          <circle fill={mergedColor.value[1]} cx={5} cy={5} r={2} />
-          <circle fill={mergedColor.value[1]} cx={_width - 5} cy={5} r={2} />
           <circle
             fill={mergedColor.value[1]}
-            cx={_width - 5}
-            cy={_height - 5}
+            cx={5 + padding}
+            cy={5 + padding}
+            r={2}
+          />
+          <circle
+            fill={mergedColor.value[1]}
+            cx={_width - 5 - padding}
+            cy={5 + padding}
+            r={2}
+          />
+          <circle
+            fill={mergedColor.value[1]}
+            cx={_width - 5 - padding}
+            cy={_height - 5 - padding}
             r={2}
           />
-          <circle fill={mergedColor.value[1]} cx={5} cy={_height - 5} r={2} />
+          <circle
+            fill={mergedColor.value[1]}
+            cx={5 + padding}
+            cy={_height - 5 - padding}
+            r={2}
+          />
+
+          <polyline
+            stroke={mergedColor.value[0]}
+            points={` ${10 + padding}, 4 ${_width - 10 - padding}, 4`}
+          />
+          <polyline
+            stroke={mergedColor.value[0]}
+            points={` ${10 + padding}, ${_height - 4 - padding} ${_width - 10 - padding}, ${_height - 4 - padding}`}
+          />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`10, 4 ${_width - 10}, 4`}
+            points={` ${5 + padding}, 70 ${5 + padding}, ${_height - 70 - padding}`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`10, ${_height - 4} ${_width - 10}, ${_height - 4}`}
+            points={` ${_width - 5 - padding}, 70 ${_width - 5 - padding}, ${_height - 70 - padding}`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`5, 70 5, ${_height - 70}`}
+            points={` ${3 + padding}, 10 ${3 + padding}, 50`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`${_width - 5}, 70 ${_width - 5}, ${_height - 70}`}
+            points={` ${7 + padding}, 30 ${7 + padding}, 80`}
           />
-          <polyline stroke={mergedColor.value[0]} points={`3, 10, 3, 50`} />
-          <polyline stroke={mergedColor.value[0]} points={`7, 30 7, 80`} />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`${_width - 3}, 10 ${_width - 3}, 50`}
+            points={` ${_width - 3 - padding}, 10 ${_width - 3 - padding}, 50`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`${_width - 7}, 30 ${_width - 7}, 80`}
+            points={` ${_width - 7 - padding}, 30 ${_width - 7 - padding}, 80`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`3, ${_height - 10} 3, ${_height - 50}`}
+            points={` ${3 + padding}, ${_height - 10 - padding} ${3 + padding}, ${_height - 50 - padding}`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`7, ${_height - 30} 7, ${_height - 80}`}
+            points={` ${7 + padding}, ${_height - 30 - padding} ${7 + padding}, ${_height - 80 - padding}`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`${_width - 3}, ${_height - 10} ${_width - 3}, ${
-              _height - 50
-            }`}
+            points={` ${_width - 3 - padding}, ${_height - 10 - padding} ${_width - 3 - padding}, ${_height - 50 - padding}`}
           />
           <polyline
             stroke={mergedColor.value[0]}
-            points={`${_width - 7}, ${_height - 30} ${_width - 7}, ${
-              _height - 80
-            }`}
+            points={` ${_width - 7 - padding}, ${_height - 30 - padding} ${_width - 7 - padding}, ${_height - 80 - padding}`}
           />
         </svg>
       );
diff --git a/src/custom-border/custom-dv-7/custom-dv-7.scss b/src/custom-border/custom-dv-7/custom-dv-7.scss
index 232d078d874d028ef44275e6ec0b12c3de8c47d1..89c7f4f73429f0b739835ae6f08a082588392088 100644
--- a/src/custom-border/custom-dv-7/custom-dv-7.scss
+++ b/src/custom-border/custom-dv-7/custom-dv-7.scss
@@ -1,4 +1,8 @@
+$style-7: (
+    'offsetY': 0,
+);
 @include b('custom-border') {
+  @include set-component-css-var(style-7, $style-7);
   @include when(style-7) {
     position: relative;
     width: 100%;
@@ -11,7 +15,7 @@
       top: 0;
       left: 0;
       width: 100%;
-      height: 100%;
+      height: calc(100% - getCssVar(style-7,'offsetY'));
   
       & > polyline {
         fill: none;
diff --git a/src/custom-border/custom-dv-7/custom-dv-7.tsx b/src/custom-border/custom-dv-7/custom-dv-7.tsx
index 50e59ec37f0adc8d0f74de988afb9b626ec32666..d57d371e9be728fe6f2f863ae554053ad759e28a 100644
--- a/src/custom-border/custom-dv-7/custom-dv-7.tsx
+++ b/src/custom-border/custom-dv-7/custom-dv-7.tsx
@@ -96,7 +96,12 @@ export const CustomDV7 = defineComponent({
       const offset = 25;
       const minOffset = 10;
       return (
-        <svg class={[ns.e('svg-container')]} width={_width} height={_height}>
+        <svg
+          class={[ns.e('svg-container')]}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-7-offsetY:${props.offsetY}px`}
+        >
           <polyline
             class='dv-bb7-line-width-2'
             stroke={mergedColor}
diff --git a/src/custom-border/custom-dv-8/custom-dv-8.scss b/src/custom-border/custom-dv-8/custom-dv-8.scss
index d992448cf85141a1f7906e7c4c447212ca7749cc..2e992f175385e4f47663fb08fd9459efe0a77ba5 100644
--- a/src/custom-border/custom-dv-8/custom-dv-8.scss
+++ b/src/custom-border/custom-dv-8/custom-dv-8.scss
@@ -1,4 +1,8 @@
+$style-8: (
+    'offsetY': 0,
+);
 @include b('custom-border') {
+  @include set-component-css-var(style-8, $style-8);
   @include when(style-8) {
     position: relative;
     width: 100%;
@@ -10,6 +14,7 @@
       left: 0;
       width: 100%;
       height: 100%;
+      height: calc(100% - getCssVar(style-8,'offsetY'));
     }
   
     @include e('border-box-content') {
diff --git a/src/custom-border/custom-dv-8/custom-dv-8.tsx b/src/custom-border/custom-dv-8/custom-dv-8.tsx
index 330af0f006d41d10ba415f5d48b8ec93c87661d7..8dacc276c22ca6bc39fd3571e6f1d47fb3054b15 100644
--- a/src/custom-border/custom-dv-8/custom-dv-8.tsx
+++ b/src/custom-border/custom-dv-8/custom-dv-8.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import {
   ComponentInternalInstance,
   PropType,
@@ -18,6 +19,14 @@ import './custom-dv-8.scss';
 export const CustomDV8 = defineComponent({
   name: 'CustomDV8',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
@@ -26,10 +35,6 @@ export const CustomDV8 = defineComponent({
       type: Boolean,
       default: false,
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
     dur: {
       // 单次动画时长，单位秒，默认为3秒
       type: Number,
@@ -51,20 +56,18 @@ export const CustomDV8 = defineComponent({
     const path = `border-box-8-path-${id}`;
     const gradient = `border-box-8-gradient-${id}`;
     const mask = `border-box-8-mask-${id}`;
-
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
     const length = computed(() => {
-      return (width.value + height.value - 5) * 2;
+      return (width.value + height.value - props.offsetY - 5) * 2;
     });
 
-    const pathD = () => {
+    const pathD = (padding: number) => {
       if (props.reverse) {
-        return `M 2.5, 2.5 L 2.5, ${height.value - 2.5} L ${
-          width.value - 2.5
-        }, ${height.value - 2.5} L ${width.value - 2.5}, 2.5 L 2.5, 2.5`;
+        // 当reverse为true时，从左上角开始，逆时针方向绘制
+        return `M ${2.5 + padding},${2.5 + padding} L ${2.5 + padding},${height.value - 2.5 - props.offsetY - padding} L ${width.value - 2.5 - padding},${height.value - 2.5 - props.offsetY - padding} L ${width.value - 2.5 - padding},${2.5 + padding} Z`;
       }
-      return `M2.5, 2.5 L${width.value - 2.5}, 2.5 L${width.value - 2.5}, ${
-        height.value - 2.5
-      } L2.5, ${height.value - 2.5} L2.5, 2.5`;
+      // 当reverse为false时，从左上角开始，顺时针方向绘制
+      return `M ${2.5 + padding},${2.5 + padding} L ${width.value - 2.5 - padding},${2.5 + padding} L ${width.value - 2.5 - padding},${height.value - 2.5 - props.offsetY - padding} L ${2.5 + padding},${height.value - 2.5 - props.offsetY - padding} Z`;
     };
 
     /**
@@ -172,19 +175,25 @@ export const CustomDV8 = defineComponent({
      * 绘制边框
      */
     const renderBorder = () => {
-      const _width = width.value;
-      const _height = height.value;
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
-        <svg class={[ns.e('svg-container')]} width={_width} height={_height}>
+        <svg
+          class={[ns.e('svg-container')]}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-8-offsetY:${props.offsetY}px`}
+        >
           <defs>
-            <path id={path} d={pathD()} fill='transparent' />
+            <path id={path} d={pathD(padding)} fill='transparent' />
             <radialGradient id={gradient} cx='50%' cy='50%' r='50%'>
               <stop offset='0%' stop-color='#fff' stop-opacity='1' />
               <stop offset='100%' stop-color='#fff' stop-opacity='0' />
             </radialGradient>
 
             <mask id={mask}>
-              <path id='myPath' d={pathD()} stroke='black' fill='none' />
+              <path id='myPath' d={pathD(padding)} stroke='black' fill='none' />
               <circle cx='0' cy='0' r='150' fill={`url(#${gradient})`}>
                 <animateMotion
                   dur={`${props.dur}s`}
@@ -198,10 +207,8 @@ export const CustomDV8 = defineComponent({
           </defs>
 
           <polygon
-            fill={props.backgroundColor}
-            points={`5, 5 ${width.value - 5}, 5 ${width.value - 5} ${
-              height.value - 5
-            } 5, ${height.value - 5}`}
+            fill={backgroundColor}
+            points={`${5 + padding}, ${5 + padding} ${width.value - 5 - padding}, ${5 + padding} ${width.value - 5 - padding} ${height.value - 5 - props.offsetY - padding}, ${5 + padding}, ${height.value - 5 - props.offsetY - padding}`}
           />
 
           <use
diff --git a/src/custom-border/custom-dv-9/custom-dv-9.scss b/src/custom-border/custom-dv-9/custom-dv-9.scss
index 6bb33a628e0438b35f100198cfb8b79db9d45e51..bbfdc87ba7ba77a56194a60000641fae5e2ed99a 100644
--- a/src/custom-border/custom-dv-9/custom-dv-9.scss
+++ b/src/custom-border/custom-dv-9/custom-dv-9.scss
@@ -1,4 +1,10 @@
+$style-9: (
+    'offsetY': 0,
+);
+
 @include b(custom-border) {
+  @include set-component-css-var(style-9, $style-9);
+
   @include when(style-9) {
     position: relative;
     z-index: 1;
@@ -10,7 +16,7 @@
         top: 0;
         left: 0;
         width: 100%;
-        height: 100%;
+        height: calc(100% - getCssVar(style-9,'offsetY'));
       }
     }
     @include e(content) {
diff --git a/src/custom-border/custom-dv-9/custom-dv-9.tsx b/src/custom-border/custom-dv-9/custom-dv-9.tsx
index 9d7d30c283e6dac944c7632381388fc9aa88d299..be3686aa7bd1f35b59737298eb421ae57773e8eb 100644
--- a/src/custom-border/custom-dv-9/custom-dv-9.tsx
+++ b/src/custom-border/custom-dv-9/custom-dv-9.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable vue/require-prop-types */
 import { createUUID } from 'qx-util';
 import {
   defineComponent,
@@ -15,18 +16,23 @@ import {
   bindDomResizeCallback,
   unbindDomResizeCallback,
 } from '../util';
+import './custom-dv-9.scss';
 
 export const CustomDV9 = defineComponent({
   name: 'CustomDV9',
   props: {
+    offsetX: {
+      style: Number,
+      default: 0,
+    },
+    offsetY: {
+      style: Number,
+      default: 0,
+    },
     color: {
       type: Array as PropType<string[]>,
       default: () => [],
     },
-    backgroundColor: {
-      type: String,
-      default: 'transparent',
-    },
   },
   setup(props) {
     const ns = useNamespace('custom-border');
@@ -40,15 +46,20 @@ export const CustomDV9 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
+    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
     /**
      * 绘制边框svg
      */
     const renderBorder = () => {
+      const _width = width.value - props.offsetX;
+      const _height = height.value - props.offsetY;
+      const padding = 8;
       return (
         <svg
           class={[ns.em('border-svg', 'container')]}
-          width={width.value}
-          height={height.value}
+          width={_width}
+          height={_height}
+          style={`--ibiz-style-9-offsetY:${props.offsetY}px`}
         >
           <defs>
             <linearGradient
@@ -99,16 +110,12 @@ export const CustomDV9 = defineComponent({
                 stroke='#fff'
                 stroke-width='3'
                 fill='transparent'
-                points={`8, ${height.value * 0.4} 8, 3, ${
-                  width.value * 0.4 + 7
-                }, 3`}
+                points={`${8 + padding}, ${_height * 0.4 + padding} ${8 + padding}, ${3 + padding}, ${width.value * 0.4 + 7 + padding}, ${3 + padding}`}
               />
               <polyline
                 fill='#fff'
-                points={`8, ${height.value * 0.15} 8, 3, ${
-                  width.value * 0.1 + 7
-                }, 3
-              ${width.value * 0.1}, 8 14, 8 14, ${height.value * 0.15 - 7}
+                points={`${8 + padding}, ${_height * 0.15 + padding} ${8 + padding}, ${3 + padding}, ${width.value * 0.1 + 7 + padding}, ${3 + padding}
+              ${width.value * 0.1 + padding}, ${8 + padding} ${14 + padding}, ${8 + padding} ${14 + padding}, ${_height * 0.15 - 7 + padding}
             `}
               />
 
@@ -116,26 +123,26 @@ export const CustomDV9 = defineComponent({
                 stroke='#fff'
                 stroke-width='3'
                 fill='transparent'
-                points={`${width.value * 0.5}, 3 ${width.value - 3}, 3, ${
-                  width.value - 3
-                }, ${height.value * 0.25}`}
+                points={`${width.value * 0.5 - padding}, ${3 + padding} ${width.value - 3 - padding}, ${3 + padding}, ${
+                  width.value - 3 - padding
+                }, ${_height * 0.25 + padding}`}
               />
               <polyline
                 fill='#fff'
                 points={`
-              ${width.value * 0.52}, 3 ${width.value * 0.58}, 3
-              ${width.value * 0.58 - 7}, 9 ${width.value * 0.52 + 7}, 9
+              ${width.value * 0.52}, ${3 + padding} ${width.value * 0.58}, ${3 + padding}
+              ${width.value * 0.58 - 7}, ${9 + padding} ${width.value * 0.52 + 7}, ${9 + padding}
             `}
               />
               <polyline
                 fill='#fff'
                 points={`
-              ${width.value * 0.9}, 3 ${width.value - 3}, 3 ${
-                width.value - 3
-              }, ${height.value * 0.1}
-              ${width.value - 9}, ${height.value * 0.1 - 7} ${
-                width.value - 9
-              }, 9 ${width.value * 0.9 + 7}, 9
+              ${width.value * 0.9 - padding}, ${3 + padding} 
+              ${width.value - 3 - padding}, ${3 + padding} 
+              ${width.value - 3 - padding}, ${_height * 0.1 + padding}
+              ${width.value - 9 - padding}, ${_height * 0.1 - 7 + padding}
+               ${width.value - 9 - padding}, ${9 + padding}
+                ${width.value * 0.9 + 7 - padding}, ${9 + padding}
             `}
               />
 
@@ -143,15 +150,15 @@ export const CustomDV9 = defineComponent({
                 stroke='#fff'
                 stroke-width='3'
                 fill='transparent'
-                points={`8, ${height.value * 0.5} 8, ${height.value - 3} ${
+                points={`${8 + padding}, ${_height * 0.5} ${8 + padding}, ${_height - 3 - padding} ${
                   width.value * 0.3 + 7
-                }, ${height.value - 3}`}
+                }, ${_height - 3 - padding}`}
               />
               <polyline
                 fill='#fff'
                 points={`
-              8, ${height.value * 0.55} 8, ${height.value * 0.7}
-              2, ${height.value * 0.7 - 7} 2, ${height.value * 0.55 + 7}
+              ${8 + padding}, ${_height * 0.55} ${8 + padding}, ${_height * 0.7}
+              ${2 + padding}, ${_height * 0.7 - 7} ${2 + padding}, ${_height * 0.55 + 7}
             `}
               />
 
@@ -159,30 +166,27 @@ export const CustomDV9 = defineComponent({
                 stroke='#fff'
                 stroke-width='3'
                 fill='transparent'
-                points={`${width.value * 0.35}, ${height.value - 3} ${
-                  width.value - 3
-                }, ${height.value - 3} ${width.value - 3}, ${
-                  height.value * 0.35
-                }`}
+                points={`${width.value * 0.35 - padding}, ${_height - 3 - padding} ${
+                  width.value - 3 - padding
+                }, ${_height - 3 - padding} ${width.value - 3 - padding}, ${_height * 0.35 - padding}`}
               />
               <polyline
                 fill='#fff'
                 points={`
-              ${width.value * 0.92}, ${height.value - 3} ${width.value - 3}, ${
-                height.value - 3
-              } ${width.value - 3}, ${height.value * 0.8}
-              ${width.value - 9}, ${height.value * 0.8 + 7} ${
-                width.value - 9
-              }, ${height.value - 9} ${width.value * 0.92 + 7}, ${
-                height.value - 9
-              }
+              ${width.value * 0.92 - padding}, ${_height - 3 - padding}
+               ${width.value - 3 - padding}, ${
+                 _height - 3 - padding
+               } ${width.value - 3 - padding}, ${_height * 0.8 - padding}
+              ${width.value - 9 - padding}, ${_height * 0.8 + 7 - padding} ${
+                width.value - 9 - padding
+              }, ${_height - 9 - padding} ${width.value * 0.92 + 7 - padding}, ${_height - 9 - padding}
             `}
               />
             </mask>
           </defs>
 
           <polygon
-            fill={props.backgroundColor}
+            fill={backgroundColor}
             points={`
         15, 9 ${width.value * 0.1 + 1}, 9 ${width.value * 0.1 + 4}, 6 ${
           width.value * 0.52 + 2
@@ -192,16 +196,14 @@ export const CustomDV9 = defineComponent({
         }, 6
         ${width.value * 0.9 + 2}, 6 ${width.value * 0.9 + 6}, 10 ${
           width.value - 10
-        }, 10 ${width.value - 10}, ${height.value * 0.1 - 6}
-        ${width.value - 6}, ${height.value * 0.1 - 1} ${width.value - 6}, ${
-          height.value * 0.8 + 1
-        } ${width.value - 10}, ${height.value * 0.8 + 6}
-        ${width.value - 10}, ${height.value - 10} ${width.value * 0.92 + 7}, ${
-          height.value - 10
-        }  ${width.value * 0.92 + 2}, ${height.value - 6}
-        11, ${height.value - 6} 11, ${height.value * 0.15 - 2} 15, ${
-          height.value * 0.15 - 7
-        }
+        }, 10 ${width.value - 10}, ${_height * 0.1 - 6}
+        ${width.value - 6}, ${_height * 0.1 - 1} ${width.value - 6}, ${
+          _height * 0.8 + 1
+        } ${width.value - 10}, ${_height * 0.8 + 6}
+        ${width.value - 10}, ${_height - 10} ${width.value * 0.92 + 7}, ${
+          _height - 10
+        }  ${width.value * 0.92 + 2}, ${_height - 6}
+        11, ${_height - 6} 11, ${_height * 0.15 - 2} 15, ${_height * 0.15 - 7}
       `}
           />
 
@@ -209,7 +211,7 @@ export const CustomDV9 = defineComponent({
             x='0'
             y='0'
             width={width.value}
-            height={height.value}
+            height={_height}
             fill={`url(#${gradientId.value})`}
             mask={`url(#${maskId.value})`}
           />
diff --git a/src/custom-decoration/custom-decoration-1/custom-decoration-1.scss b/src/custom-decoration/custom-decoration-1/custom-decoration-1.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fbf00971b00a04e30f25ef1f4832c92442d7bbf2
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-1/custom-decoration-1.scss
@@ -0,0 +1,10 @@
+@include b(custom-decoration-1) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  >svg {
+    position: absolute;
+    transform-origin: left top;
+  }
+}
diff --git a/src/custom-decoration/custom-decoration-1/custom-decoration-1.tsx b/src/custom-decoration/custom-decoration-1/custom-decoration-1.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f6d156ebb705a869cce820e5cdac6cbf530cc9ab
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-1/custom-decoration-1.tsx
@@ -0,0 +1,190 @@
+/* eslint-disable no-use-before-define */
+import { defineComponent, ref, computed, PropType } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { deepMerge, getThemeVar } from '../util';
+import { autoResize } from '../util/autoResize';
+import './custom-decoration-1.scss';
+
+export const CustomDecoration1 = defineComponent({
+  name: 'CustomDecoration1',
+  props: {
+    color: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('custom-decoration-1');
+    const customDecoration1 = ref();
+    const svgWH = ref<[number, number]>([20, 50]);
+    const rowNum = ref<number>(4);
+    const rowPoints = ref<number>(20);
+
+    const pointSideLength = ref<number>(2.5);
+    const halfPointSideLength = ref<number>(pointSideLength.value / 2);
+    const defaultColor = [getThemeVar() || '#0095ee', '#95d8f8'];
+
+    const mergedColor = computed(() => {
+      return deepMerge(defaultColor, props.color || []) as string[];
+    });
+
+    const rects = ref<number[][]>([]);
+    const points = ref<number[][]>([]);
+    const svgScale = ref([1, 1]);
+
+    const calcPointsPosition = () => {
+      const [w, h] = svgWH.value;
+      const horizontalGap = w / (rowPoints.value + 1);
+      const verticalGap = h / (rowNum.value + 1);
+      const newPoints = Array.from({ length: rowNum.value })
+        .fill(0)
+        .map((_foo, i) =>
+          Array.from({ length: rowPoints.value })
+            .fill(0)
+            .map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]),
+        );
+
+      points.value = newPoints.reduce((all, item) => [...all, ...item], []);
+    };
+
+    const calcRectsPosition = () => {
+      const rect1 = points.value[rowPoints.value * 2 - 1];
+      const rect2 = points.value[rowPoints.value * 2 - 3];
+      rects.value = [rect1, rect2];
+    };
+
+    const onResize = () => {
+      calcSVGData();
+    };
+
+    const afterAutoResizeMixinInit = () => {
+      calcSVGData();
+    };
+
+    const { width, height } = autoResize(
+      customDecoration1,
+      onResize,
+      afterAutoResizeMixinInit,
+    );
+
+    const calcScale = () => {
+      const [w, h] = svgWH.value;
+      svgScale.value = [width.value / w, height.value / h];
+    };
+
+    const calcSVGData = () => {
+      calcPointsPosition();
+      calcRectsPosition();
+      calcScale();
+    };
+
+    /**
+     * 绘制边框svg
+     */
+    const renderBorder = () => {
+      return (
+        <svg
+          width={`${svgWH.value[0]}px`}
+          height={`${svgWH.value[1]}px`}
+          style={`transform:scale(${svgScale.value[0]}, ${svgScale.value[1]});`}
+        >
+          {points.value.map(point => {
+            if (Math.random() > 0.6) {
+              return (
+                <rect
+                  key={point.join(',')}
+                  fill={mergedColor.value[0]}
+                  x={point[0] - halfPointSideLength.value}
+                  y={point[1] - halfPointSideLength.value}
+                  width={pointSideLength.value}
+                  height={pointSideLength.value}
+                >
+                  {Math.random() > 0.6 ? (
+                    <animate
+                      attributeName='fill'
+                      values={`${mergedColor.value[0]};transparent`}
+                      dur={'1s'}
+                      begin={Math.random() * 2}
+                      repeatCount='indefinite'
+                    />
+                  ) : null}
+                </rect>
+              );
+            }
+            return null;
+          })}
+          {rects.value[0] ? (
+            <rect
+              fill={mergedColor.value[1]}
+              x={rects.value[0][0] - pointSideLength.value}
+              y={rects.value[0][1] - pointSideLength.value}
+              width={pointSideLength.value * 2}
+              height={pointSideLength.value * 2}
+            >
+              <animate
+                attributeName='width'
+                values={`0;${pointSideLength.value * 2}`}
+                dur='2s'
+                repeatCount='indefinite'
+              />
+              <animate
+                attributeName='height'
+                values={`0;${pointSideLength.value * 2}`}
+                dur='2s'
+                repeatCount='indefinite'
+              />
+              <animate
+                attributeName='x'
+                values={`${rects.value[0][0]};${rects.value[0][0] - pointSideLength.value}`}
+                dur='2s'
+                repeatCount='indefinite'
+              />
+              <animate
+                attributeName='y'
+                values={`${rects.value[0][1]};${rects.value[0][1] - pointSideLength.value}`}
+                dur='2s'
+                repeatCount='indefinite'
+              />
+            </rect>
+          ) : null}
+          {rects.value[1] ? (
+            <rect
+              fill={mergedColor.value[1]}
+              x={rects.value[1][0] - 40}
+              y={rects.value[1][1] - pointSideLength.value}
+              width={40}
+              height={pointSideLength.value * 2}
+            >
+              <animate
+                attributeName='width'
+                values='0;40;0'
+                dur='2s'
+                repeatCount='indefinite'
+              />
+              <animate
+                attributeName='x'
+                values={`${rects.value[1][0]};${rects.value[1][0] - 40};${rects.value[1][0]}`}
+                dur='2s'
+                repeatCount='indefinite'
+              />
+            </rect>
+          ) : null}
+        </svg>
+      );
+    };
+
+    return {
+      ns,
+      customDecoration1,
+      renderBorder,
+    };
+  },
+  render() {
+    return (
+      <div ref='customDecoration1' class={this.ns.b()}>
+        {this.renderBorder()}
+        {this.$slots.default?.()}
+      </div>
+    );
+  },
+});
diff --git a/src/custom-decoration/custom-decoration-1/index.ts b/src/custom-decoration/custom-decoration-1/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0e84a69a130275f71bedc66a7c98b27cc46ea283
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-1/index.ts
@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CustomDecoration1 } from './custom-decoration-1';
+
+export const IBizCustomDecoration1 = withInstall(
+  CustomDecoration1,
+  function (v: App) {
+    v.component(CustomDecoration1.name, CustomDecoration1);
+  },
+);
+
+export default IBizCustomDecoration1;
diff --git a/src/custom-decoration/custom-decoration-2/custom-decoration-2.scss b/src/custom-decoration/custom-decoration-2/custom-decoration-2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..01c43c3d6730e8481f16aa9c966df935d6531194
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-2/custom-decoration-2.scss
@@ -0,0 +1,12 @@
+@include b(custom-decoration-2) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  >svg{
+    position: absolute;
+    top: 50%;
+  }
+}
diff --git a/src/custom-decoration/custom-decoration-2/custom-decoration-2.tsx b/src/custom-decoration/custom-decoration-2/custom-decoration-2.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..672ccc2e491a368b16b3efe16e6a09aaf5bb22f3
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-2/custom-decoration-2.tsx
@@ -0,0 +1,151 @@
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  nextTick,
+  computed,
+  PropType,
+  watch,
+} from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import {
+  deepMerge,
+  getThemeVar,
+  bindDomResizeCallback,
+  unbindDomResizeCallback,
+} from '../util';
+import './custom-decoration-2.scss';
+
+export const CustomDecoration2 = defineComponent({
+  name: 'CustomDecoration2',
+  props: {
+    color: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    dur: {
+      type: Number,
+      default: 2,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('custom-decoration-2');
+    const defaultColor = [getThemeVar() || '#0095ee', '#95d8f8'];
+    const customDecoration2 = ref();
+
+    const x = ref<number>(0);
+    const y = ref<number>(0);
+    const w = ref<number>(0);
+    const h = ref<number>(0);
+
+    const width = ref<number>(0);
+    const height = ref<number>(0);
+    const mergedColor = computed(() => {
+      return deepMerge(defaultColor, props.color || []) as string[];
+    });
+
+    const calcSVGData = () => {
+      if (props.reverse) {
+        w.value = 1;
+        h.value = height.value;
+        x.value = width.value / 2;
+        y.value = 0;
+      } else {
+        w.value = width.value;
+        h.value = 1;
+        x.value = 0;
+        y.value = height.value / 2;
+      }
+    };
+
+    watch(
+      () => props.reverse,
+      () => {
+        calcSVGData();
+      },
+      { immediate: true },
+    );
+    /**
+     * 绘制边框svg
+     */
+    const renderBorder = () => {
+      return (
+        <svg width={`${width.value}px`} height={`${height.value}px`}>
+          <rect
+            x={x.value}
+            y={y.value}
+            width={w.value}
+            height={h.value}
+            fill={mergedColor.value[0]}
+          >
+            <animate
+              attributeName={props.reverse ? 'height' : 'width'}
+              from='0'
+              to={props.reverse ? height.value : width.value}
+              dur={`${props.dur}s`}
+              calcMode='spline'
+              keyTimes='0;1'
+              keySplines='.42,0,.58,1'
+              repeatCount='indefinite'
+            />
+          </rect>
+
+          <rect
+            x={x.value}
+            y={y.value}
+            width='1'
+            height='1'
+            fill={mergedColor.value[1]}
+          >
+            <animate
+              attributeName={props.reverse ? 'y' : 'x'}
+              from='0'
+              to={props.reverse ? height.value : width.value}
+              dur={`${props.dur}s`}
+              calcMode='spline'
+              keyTimes='0;1'
+              keySplines='0.42,0,0.58,1'
+              repeatCount='indefinite'
+            />
+          </rect>
+        </svg>
+      );
+    };
+    const initWH = () => {
+      nextTick(() => {
+        const dom = customDecoration2.value as Element;
+        if (dom) {
+          width.value = dom.clientWidth;
+          height.value = dom.clientHeight;
+        }
+      });
+    };
+    onMounted(() => {
+      initWH();
+      bindDomResizeCallback(customDecoration2.value, initWH);
+      window.addEventListener('resize', initWH);
+    });
+    onUnmounted(() => {
+      unbindDomResizeCallback(customDecoration2.value);
+      window.removeEventListener('resize', initWH);
+    });
+    return {
+      ns,
+      customDecoration2,
+      renderBorder,
+    };
+  },
+  render() {
+    return (
+      <div ref='customDecoration2' class={this.ns.b()}>
+        {this.renderBorder()}
+        {this.$slots.default?.()}
+      </div>
+    );
+  },
+});
diff --git a/src/custom-decoration/custom-decoration-2/index.ts b/src/custom-decoration/custom-decoration-2/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1275a9ed8567ce1e07b2ef19ce8807882822641c
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-2/index.ts
@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CustomDecoration2 } from './custom-decoration-2';
+
+export const IBizCustomDecoration2 = withInstall(
+  CustomDecoration2,
+  function (v: App) {
+    v.component(CustomDecoration2.name, CustomDecoration2);
+  },
+);
+
+export default IBizCustomDecoration2;
diff --git a/src/custom-decoration/custom-decoration-3/custom-decoration-3.scss b/src/custom-decoration/custom-decoration-3/custom-decoration-3.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b44820331ede341acbe46bbe9c26a58b84d47128
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-3/custom-decoration-3.scss
@@ -0,0 +1,10 @@
+@include b(custom-decoration-3) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  > svg {
+    position: absolute;
+    transform-origin: left top;
+  }
+}
diff --git a/src/custom-decoration/custom-decoration-3/custom-decoration-3.tsx b/src/custom-decoration/custom-decoration-3/custom-decoration-3.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d306d7baac323e980ccdd6daf7d1ae48ea721718
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-3/custom-decoration-3.tsx
@@ -0,0 +1,132 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-shadow */
+import { defineComponent, ref, computed, PropType } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { deepMerge, getThemeVar } from '../util';
+import './custom-decoration-3.scss';
+import autoResize from '../util/autoResize';
+
+export const CustomDecoration3 = defineComponent({
+  name: 'CustomDecoration3',
+  props: {
+    color: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    dur: {
+      type: Number,
+      default: 1.2,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('custom-decoration-3');
+
+    const pointSideLength = ref(7);
+    const svgWH = ref<[number, number]>([300, 35]);
+    const svgScale = ref<[number, number]>([1, 1]);
+    const rowNum = ref<number>(2);
+    const rowPoints = ref<number>(25);
+
+    const halfPointSideLength = ref(pointSideLength.value / 2);
+
+    const points = ref<number[][]>([]);
+
+    const defaultColor = [getThemeVar() || '#0095ee', '#95d8f8'];
+    const customDecoration3 = ref();
+    const mergedColor = computed(() => {
+      return deepMerge(defaultColor, props.color || []) as string[];
+    });
+
+    const calcPointsPosition = () => {
+      const [w, h] = svgWH.value;
+
+      const horizontalGap = w / (rowPoints.value + 1);
+      const verticalGap = h / (rowNum.value + 1);
+
+      const points1 = Array.from({ length: rowNum.value })
+        .fill(0)
+        .map((_foo, i) =>
+          Array.from({ length: rowPoints.value })
+            .fill(0)
+            .map((_foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]),
+        );
+
+      points.value = points1.reduce((all, item) => [...all, ...item], []);
+    };
+
+    /**
+     * 绘制边框svg
+     */
+    const renderBorder = () => {
+      return (
+        <svg
+          width={`${svgWH.value[0]}px`}
+          height={`${svgWH.value[1]}px`}
+          style={`transform:scale(${svgScale.value[0]},${svgScale.value[1]});`}
+        >
+          {points.value.map(point => {
+            return (
+              <rect
+                key={point.join()}
+                fill={mergedColor.value[0]}
+                x={point[0] - halfPointSideLength.value}
+                y={point[1] - halfPointSideLength.value}
+                width={pointSideLength.value}
+                height={pointSideLength.value}
+              >
+                {Math.random() > 0.6 ? (
+                  <animate
+                    attributeName='fill'
+                    values={`${mergedColor.value.join(';')}`}
+                    dur={`${Math.random() + 1}s`}
+                    begin={Math.random() * 2}
+                    repeatCount='indefinite'
+                  />
+                ) : null}
+              </rect>
+            );
+          })}
+        </svg>
+      );
+    };
+
+    const afterAutoResizeMixinInit = () => {
+      calcSVGData();
+    };
+
+    const calcSVGData = () => {
+      calcPointsPosition();
+
+      calcScale();
+    };
+
+    const onResize = () => {
+      calcSVGData();
+    };
+
+    const { width, height } = autoResize(
+      customDecoration3,
+      onResize,
+      afterAutoResizeMixinInit,
+    );
+    const calcScale = () => {
+      const [w, h] = svgWH.value;
+
+      svgScale.value = [width.value / w, height.value / h];
+    };
+
+    return {
+      ns,
+      customDecoration3,
+      renderBorder,
+    };
+  },
+  render() {
+    return (
+      <div ref='customDecoration3' class={this.ns.b()}>
+        {this.renderBorder()}
+        {this.$slots.default?.()}
+      </div>
+    );
+  },
+});
diff --git a/src/custom-decoration/custom-decoration-3/index.ts b/src/custom-decoration/custom-decoration-3/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..58659f4c93326c4f2a0accb8b567fbfbe56571a7
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-3/index.ts
@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CustomDecoration3 } from './custom-decoration-3';
+
+export const IBizCustomDecoration3 = withInstall(
+  CustomDecoration3,
+  function (v: App) {
+    v.component(CustomDecoration3.name, CustomDecoration3);
+  },
+);
+
+export default IBizCustomDecoration3;
diff --git a/src/custom-decoration/custom-decoration-4/custom-decoration-4.scss b/src/custom-decoration/custom-decoration-4/custom-decoration-4.scss
new file mode 100644
index 0000000000000000000000000000000000000000..992eff65950faf8d3f09ce6df04e8561da0aca0a
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-4/custom-decoration-4.scss
@@ -0,0 +1,56 @@
+@include b(custom-decoration-4) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .container {
+    position: absolute;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .normal {
+    left: 50%;
+    margin-left: -2px;
+    animation: ani-height ease-in-out infinite;
+  }
+
+  .reverse {
+    top: 50%;
+    margin-top: -2px;
+    animation: ani-width ease-in-out infinite;
+  }
+
+  @keyframes ani-height {
+    0% {
+      height: 0%;
+    }
+
+    70% {
+      height: 100%;
+    }
+
+    100% {
+      height: 100%;
+    }
+  }
+
+  @keyframes ani-width {
+    0% {
+      width: 0%;
+    }
+
+    70% {
+      width: 100%;
+    }
+
+    100% {
+      width: 100%;
+    }
+  }
+
+  >svg {
+    position: absolute;
+  }
+}
diff --git a/src/custom-decoration/custom-decoration-4/custom-decoration-4.tsx b/src/custom-decoration/custom-decoration-4/custom-decoration-4.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c2a123c85b72081ee5ce8d3fa962a7c0b6a07fb9
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-4/custom-decoration-4.tsx
@@ -0,0 +1,117 @@
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  nextTick,
+  computed,
+  PropType,
+} from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import {
+  deepMerge,
+  getThemeVar,
+  bindDomResizeCallback,
+  unbindDomResizeCallback,
+} from '../util';
+import './custom-decoration-4.scss';
+
+export const CustomDecoration4 = defineComponent({
+  name: 'CustomDecoration4',
+  props: {
+    color: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    dur: {
+      type: Number,
+      default: 1.2,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('custom-decoration-4');
+    const defaultColor = [getThemeVar() || '#0095ee', '#95d8f8'];
+    const customDecoration4 = ref();
+    const width = ref<number>(0);
+    const height = ref<number>(0);
+    const mergedColor = computed(() => {
+      return deepMerge(defaultColor, props.color || []) as string[];
+    });
+    /**
+     * 绘制边框svg
+     */
+    const renderBorder = () => {
+      return (
+        <div
+          class={`container ${props.reverse ? 'reverse' : 'normal'}`}
+          style={
+            props.reverse
+              ? `width:${width.value}px;height:5px;animation-duration:${props.dur}s`
+              : `width:5px;height:${height.value}px;animation-duration:${props.dur}s`
+          }
+        >
+          <svg
+            width={props.reverse ? width.value : 5}
+            height={props.reverse ? 5 : height.value}
+          >
+            <polyline
+              stroke={mergedColor.value[0]}
+              points={
+                props.reverse
+                  ? `0, 2.5 ${width.value}, 2.5`
+                  : `2.5, 0 2.5, ${height.value}`
+              }
+            />
+            <polyline
+              class='bold-line'
+              stroke={mergedColor.value[1]}
+              stroke-width='3'
+              stroke-dasharray='20, 80'
+              stroke-dashoffset='-30'
+              points={
+                props.reverse
+                  ? `0, 2.5 ${width.value}, 2.5`
+                  : `2.5, 0 2.5, ${height.value}`
+              }
+            />
+          </svg>
+        </div>
+      );
+    };
+    const initWH = () => {
+      nextTick(() => {
+        const dom = customDecoration4.value as Element;
+        if (dom) {
+          width.value = dom.clientWidth;
+          height.value = dom.clientHeight;
+        }
+      });
+    };
+    onMounted(() => {
+      initWH();
+      bindDomResizeCallback(customDecoration4.value, initWH);
+      window.addEventListener('resize', initWH);
+    });
+    onUnmounted(() => {
+      unbindDomResizeCallback(customDecoration4.value);
+      window.removeEventListener('resize', initWH);
+    });
+    return {
+      ns,
+      customDecoration4,
+      renderBorder,
+    };
+  },
+  render() {
+    return (
+      <div ref='customDecoration4' class={this.ns.b()}>
+        {this.renderBorder()}
+        {this.$slots.default?.()}
+      </div>
+    );
+  },
+});
diff --git a/src/custom-decoration/custom-decoration-4/index.ts b/src/custom-decoration/custom-decoration-4/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c7dd37f86ce336aff26527e963b6d64249e1541a
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-4/index.ts
@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CustomDecoration4 } from './custom-decoration-4';
+
+export const IBizCustomDecoration4 = withInstall(
+  CustomDecoration4,
+  function (v: App) {
+    v.component(CustomDecoration4.name, CustomDecoration4);
+  },
+);
+
+export default IBizCustomDecoration4;
diff --git a/src/custom-decoration/custom-decoration-6/custom-decoration-6.scss b/src/custom-decoration/custom-decoration-6/custom-decoration-6.scss
new file mode 100644
index 0000000000000000000000000000000000000000..348f7cd789a4d64ce556bfef7d6eeacf53d85d25
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-6/custom-decoration-6.scss
@@ -0,0 +1,9 @@
+@include b(custom-decoration-6) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  >svg {
+    transform-origin: left top;
+  }
+}
diff --git a/src/custom-decoration/custom-decoration-6/custom-decoration-6.tsx b/src/custom-decoration/custom-decoration-6/custom-decoration-6.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0a9dd38f79b961c317a531685d90ac68ca4b7d0e
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-6/custom-decoration-6.tsx
@@ -0,0 +1,171 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-multi-assign */
+import { defineComponent, ref, computed, PropType } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { deepMerge, getThemeVar } from '../util';
+import './custom-decoration-6.scss';
+import autoResize from '../util/autoResize';
+
+export const CustomDecoration6 = defineComponent({
+  name: 'CustomDecoration6',
+  props: {
+    color: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('custom-decoration-6');
+
+    const rectWidth = ref<number>(7);
+
+    const svgWH = ref<[number, number]>([300, 35]);
+    const svgScale = ref<[number, number]>([1, 1]);
+    const rowNum = ref<number>(1);
+    const rowPoints = ref<number>(40);
+    const halfRectWidth = ref<number>(rectWidth.value / 2);
+
+    const points = ref<number[][]>([]);
+    const heights = ref<number[]>([]);
+    const minHeights = ref<number[]>([]);
+    const randoms = ref<number[]>([]);
+
+    const customDecoration6 = ref();
+    const defaultColor = [getThemeVar() || '#0095ee', '#95d8f8'];
+    const mergedColor = computed(() => {
+      return deepMerge(defaultColor, props.color || []) as string[];
+    });
+
+    const randomExtend = (minNum: number, maxNum: number) => {
+      if (arguments.length === 1)
+        return Number.parseInt((Math.random() * minNum + 1).toString(), 10);
+      return Number.parseInt(
+        (Math.random() * (maxNum - minNum + 1) + minNum).toString(),
+        10,
+      );
+    };
+
+    const calcPointsPosition = () => {
+      const [w, h] = svgWH.value;
+
+      const horizontalGap = w / (rowPoints.value + 1);
+      const verticalGap = h / (rowNum.value + 1);
+
+      const points1 = Array.from({ length: rowNum.value })
+        .fill(0)
+        .map((foo, i) =>
+          Array.from({ length: rowPoints.value })
+            .fill(0)
+            .map((foo, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)]),
+        );
+
+      points.value = points1.reduce((all, item) => [...all, ...item], []);
+      const heights1 = Array.from({
+        length: rowNum.value * rowPoints.value,
+      })
+        .fill(0)
+        .map(() =>
+          Math.random() > 0.8
+            ? randomExtend(0.7 * h, h)
+            : randomExtend(0.2 * h, 0.5 * h),
+        );
+
+      heights.value = heights1;
+
+      minHeights.value = Array.from({ length: rowNum.value * rowPoints.value })
+        .fill(0)
+        .map((foo, i) => heights1[i] * Math.random());
+
+      randoms.value = Array.from({ length: rowNum.value * rowPoints.value })
+        .fill(0)
+        .map(() => Math.random() + 1.5);
+    };
+
+    const calcSVGData = () => {
+      calcPointsPosition();
+
+      calcScale();
+    };
+
+    const onResize = () => {
+      calcSVGData();
+    };
+
+    const afterAutoResizeMixinInit = () => {
+      calcSVGData();
+    };
+
+    const { width, height } = autoResize(
+      customDecoration6,
+      onResize,
+      afterAutoResizeMixinInit,
+    );
+
+    const calcScale = () => {
+      const [w, h] = svgWH.value;
+
+      svgScale.value = [width.value / w, height.value / h];
+    };
+
+    /**
+     * 绘制边框svg
+     */
+    const renderBorder = () => {
+      return (
+        <svg
+          width={`${svgWH.value[0]}px`}
+          height={`${svgWH.value[1]}px`}
+          style={`transform:scale(${svgScale.value[0]},${svgScale.value[1]});`}
+        >
+          {points.value.map((point, i) => {
+            return (
+              <rect
+                key={i}
+                fill={mergedColor.value[Math.random() > 0.5 ? 0 : 1]}
+                x={point[0] - halfRectWidth.value}
+                y={point[1] - heights.value[i] / 2}
+                width={rectWidth.value}
+                height={heights.value[i]}
+              >
+                <animate
+                  attributeName='y'
+                  values={`${point[1] - minHeights.value[i] / 2};${point[1] - heights.value[i] / 2};${point[1] - minHeights.value[i] / 2}`}
+                  dur={`${randoms.value[i]}s`}
+                  keyTimes='0;0.5;1'
+                  calcMode='spline'
+                  keySplines='0.42,0,0.58,1;0.42,0,0.58,1'
+                  begin='0s'
+                  repeatCount='indefinite'
+                />
+                <animate
+                  attributeName='height'
+                  values={`${minHeights.value[i]};${heights.value[i]};${minHeights.value[i]}`}
+                  dur={`${randoms.value[i]}s`}
+                  keyTimes='0;0.5;1'
+                  calcMode='spline'
+                  keySplines='0.42,0,0.58,1;0.42,0,0.58,1'
+                  begin='0s'
+                  repeatCount='indefinite'
+                />
+              </rect>
+            );
+          })}
+        </svg>
+      );
+    };
+
+    return {
+      ns,
+      customDecoration6,
+      renderBorder,
+    };
+  },
+  render() {
+    return (
+      <div ref='customDecoration6' class={this.ns.b()}>
+        {this.renderBorder()}
+        {this.$slots.default?.()}
+      </div>
+    );
+  },
+});
diff --git a/src/custom-decoration/custom-decoration-6/index.ts b/src/custom-decoration/custom-decoration-6/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3dc2ae603ecabd9c422ccc3565664d713132f2b
--- /dev/null
+++ b/src/custom-decoration/custom-decoration-6/index.ts
@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CustomDecoration6 } from './custom-decoration-6';
+
+export const IBizCustomDecoration6 = withInstall(
+  CustomDecoration6,
+  function (v: App) {
+    v.component(CustomDecoration6.name, CustomDecoration6);
+  },
+);
+
+export default IBizCustomDecoration6;
diff --git a/src/custom-decoration/index.ts b/src/custom-decoration/index.ts
index 3e8dcda49fb47b6dd408c5460db18ee50f7b85d8..c18b4977051701cd452d3880c88d893e8f8bbb46 100644
--- a/src/custom-decoration/index.ts
+++ b/src/custom-decoration/index.ts
@@ -1,2 +1,7 @@
+export * from './custom-decoration-1';
+export * from './custom-decoration-2';
+export * from './custom-decoration-3';
+export * from './custom-decoration-4';
 export * from './custom-decoration-5';
+export * from './custom-decoration-6';
 export * from './custom-decoration-11';
diff --git a/src/custom-decoration/util/autoResize.ts b/src/custom-decoration/util/autoResize.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4a82925bce7e82a3efa379dfcc7ab613b133863
--- /dev/null
+++ b/src/custom-decoration/util/autoResize.ts
@@ -0,0 +1,100 @@
+import type { ComponentInternalInstance, Ref } from 'vue';
+import {
+  getCurrentInstance,
+  nextTick,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
+import { debounce, observerDomResize } from './index';
+
+export function autoResize(
+  dom: Ref<HTMLElement | null>,
+  onResize?: () => void,
+  afterAutoResizeMixinInit?: () => void,
+) {
+  const width = ref(0);
+  const height = ref(0);
+
+  let debounceInitWHFun: () => void;
+  let domObserver: MutationObserver | null = null;
+  let domHtml: HTMLElement | null = null;
+
+  const initWH = (resize = true) => {
+    return new Promise(resolve => {
+      nextTick(() => {
+        domHtml = dom.value;
+        width.value = dom.value ? dom.value.clientWidth : 0;
+        height.value = dom.value ? dom.value.clientHeight : 0;
+
+        if (!dom.value)
+          console.warn(
+            'DataV: Failed to get dom node, component rendering may be abnormal!',
+          );
+        else if (!width.value || !height.value)
+          console.warn(
+            'DataV: Component width or height is 0px, rendering abnormality may occur!',
+          );
+
+        if (typeof onResize === 'function' && resize) onResize();
+        resolve(true);
+      });
+    });
+  };
+  const getDebounceInitWHFun = () => {
+    debounceInitWHFun = debounce(
+      200,
+      initWH,
+      getCurrentInstance() as ComponentInternalInstance,
+      null,
+    );
+  };
+  const bindDomResizeCallback = () => {
+    domObserver = observerDomResize(domHtml!, debounceInitWHFun);
+
+    window.addEventListener(
+      'resize',
+      debounceInitWHFun as EventListenerOrEventListenerObject,
+    );
+  };
+  const unbindDomResizeCallback = () => {
+    if (!domObserver) return;
+
+    domObserver.disconnect();
+    domObserver.takeRecords();
+    domObserver = null;
+  };
+
+  const autoResizeMixinInit = async () => {
+    await initWH(false);
+
+    getDebounceInitWHFun();
+
+    bindDomResizeCallback();
+
+    if (typeof afterAutoResizeMixinInit === 'function')
+      afterAutoResizeMixinInit();
+  };
+
+  onMounted(() => {
+    autoResizeMixinInit();
+  });
+
+  onUnmounted(() => {
+    unbindDomResizeCallback();
+  });
+
+  onActivated(autoResizeMixinInit);
+
+  onDeactivated(unbindDomResizeCallback);
+
+  return {
+    width,
+    height,
+    initWH,
+  };
+}
+
+export default autoResize;
diff --git a/src/index.ts b/src/index.ts
index f19e4023e19d25412cb5955fdd6a70e648110ae3..6d434c13c776b34ac41f3c93506d8a3bcea26706 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,7 +29,12 @@ import {
 } from './custom-border';
 // 装饰器
 import {
+  IBizCustomDecoration1,
+  IBizCustomDecoration2,
+  IBizCustomDecoration3,
+  IBizCustomDecoration4,
   IBizCustomDecoration5,
+  IBizCustomDecoration6,
   IBizCustomDecoration11,
 } from './custom-decoration';
 
@@ -63,7 +68,12 @@ export default {
     _app.use(IBizCustomDV12);
     _app.use(IBizCustomDV13);
     // 装饰器
+    _app.use(IBizCustomDecoration1);
+    _app.use(IBizCustomDecoration2);
+    _app.use(IBizCustomDecoration3);
+    _app.use(IBizCustomDecoration4);
     _app.use(IBizCustomDecoration5);
+    _app.use(IBizCustomDecoration6);
     _app.use(IBizCustomDecoration11);
   },
 };
diff --git a/src/screen-dashboard/screen-dashboard.scss b/src/screen-dashboard/screen-dashboard.scss
index 5231a2ed9e604b9a931e5914d4e13300d76c8a95..9100d86ab80ea566df8b9153989c283231ade3a8 100644
--- a/src/screen-dashboard/screen-dashboard.scss
+++ b/src/screen-dashboard/screen-dashboard.scss
@@ -7,6 +7,7 @@ $screen-dashboard: (
     'light-text-color': transparent,
     'border-color': #18a9d9,
     'border-radius': 0,
+    'custom-dv-bg':transparent,
 );
 @include b(screen-dashboard) {
     @include set-component-css-var('screen-dashboard', $screen-dashboard);
diff --git a/src/screen-portlet/screen-portlet.controller.ts b/src/screen-portlet/screen-portlet.controller.ts
index 188ef1c39b69d2603bfca43e859c53f01eb55f48..a49815220a91f7b505d35a9f306b4cdc376d6a68 100644
--- a/src/screen-portlet/screen-portlet.controller.ts
+++ b/src/screen-portlet/screen-portlet.controller.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-useless-constructor */
-import { IControlParam, IDBPortletPart } from '@ibiz/model-core';
+import { IAppPortlet, IControlParam, IDBPortletPart } from '@ibiz/model-core';
 import {
   IDashboardController,
   IPortletContainerController,
@@ -35,6 +35,9 @@ export class ScreenPortletController extends PortletPartController<IDBPortletPar
    */
   iconType: 'full' | 'icon' = 'icon';
 
+  // 所有应用门户
+  public appPortlets: IAppPortlet[] = [];
+
   /**
    * 重写
    * @param {T} model
@@ -56,9 +59,19 @@ export class ScreenPortletController extends PortletPartController<IDBPortletPar
    * @memberof ScreenPortletController
    */
   public initControlParams() {
-    this.controlParam = this.model.controlParam!;
-    // todo
-    this.iconType = 'full';
-    this.borderStyle = 'CustomDV7';
+    const app = ibiz.hub.getApp(this.context.srfappid);
+    this.appPortlets = app.model.appPortlets || [];
+    const porltlet = this.appPortlets.find(
+      x => x.codeName === this.model.codeName,
+    );
+    if (porltlet && porltlet.portletParams) {
+      this.controlParam = porltlet.portletParams as IControlParam;
+      if (porltlet.portletParams?.BORDERSTYLE) {
+        this.borderStyle = porltlet.portletParams?.BORDERSTYLE;
+      }
+      if (porltlet.portletParams?.ICONTYPE) {
+        this.iconType = porltlet.portletParams?.ICONTYPE;
+      }
+    }
   }
 }
diff --git a/src/screen-portlet/screen-portlet.scss b/src/screen-portlet/screen-portlet.scss
index b7203e1ee0d8833b7cc2f8f3a2b51f65be60dd5b..84248ac9dc6aa675c8af9d24505b8971464dbc3f 100644
--- a/src/screen-portlet/screen-portlet.scss
+++ b/src/screen-portlet/screen-portlet.scss
@@ -1,42 +1,78 @@
 @include b(screen-portlet) {
+  width: 100%;
+  height: 100%;
+  @include when('full-icon') {
+    .#{bem(portlet-layout-header)} {
+      position: relative;
+    }
+
+    .#{bem(portlet-layout-header, left)} {
+      position: unset;
+    }
+
+    .#{bem(portlet-layout, caption)} {
+      &::before {
+        display: none;
+      }
+    }
+
+    .#{bem(portlet-layout, caption-icon)} {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+@include b('custom-border') {
+  @include e('content') {
+    position: relative;
     width: 100%;
     height: 100%;
-    @include when('full-icon') {
-      .#{bem(portlet-layout-header)} {
-        position: relative;
+  }
+  @include when(full-border) {
+    > svg {
+      transform: translateY(50px);
+    }
+
+    &.is-style-1 {
+      .#{bem(custom-border,left-top)} {
+        transform: translateY(50px);
       }
 
-      .#{bem(portlet-layout-header, left)} {
-        position: unset;
+      .#{bem(custom-border,right-top)} {
+        transform: translateY(50px) rotateY(180deg);
       }
 
-      .#{bem(portlet-layout, caption)} {
-        &::before {
-          display: none;
-        }
+      .#{bem(custom-border,left-bottom)} {
+        transform: translateY(50px) rotateX(180deg);
       }
 
-      .#{bem(portlet-layout, caption-icon)} {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-        width: 100%;
-        height: 100%;
+      .#{bem(custom-border,right-bottom)} {
+        transform: translateY(50px) rotateX(180deg) rotateY(180deg);
       }
     }
-}
 
-
-@include b('custom-border') {
-    @include e('content') {
-      position: relative;
-      width: 100%;
-      height: 100%;
+    &.is-style-10 {
+      transform: translateY(50px);
+      .#{bem(custom-border,content)} {
+        transform: translateY(-50px);
+      }
     }
-    @include when(full-border) {
-      >svg {
-        transform: translateY(50px);
+
+    &.is-style-11 {
+      > svg {
+        transform: translateY(0);
+      }
+      .#{bem(portlet-layout-header,left)} {
+        position: absolute;
+        top: 12%;
+        left: 49%;
+        transform: translate(-50%, -50%);
       }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/screen-real-time/screen-real-time.controller.ts b/src/screen-real-time/screen-real-time.controller.ts
index 2f024198e437c895a078cd710e1bc837900c58ba..7c293fa223537d8b9746156fc2ea598c928a7c09 100644
--- a/src/screen-real-time/screen-real-time.controller.ts
+++ b/src/screen-real-time/screen-real-time.controller.ts
@@ -40,16 +40,40 @@ export class ScreenRealTimeController extends EditorController<ISpan> {
    */
   protected async onInit(): Promise<void> {
     super.onInit();
-    if (this.model.editorParams) {
-      const { SHOWWEEK, LEFTTIME, RIGHTTIME } = this.model.editorParams;
-      if (SHOWWEEK) {
-        this.showWeek = JSON.parse(SHOWWEEK);
-      }
-      if (LEFTTIME) {
-        this.leftTime = LEFTTIME;
-      }
-      if (RIGHTTIME) {
-        this.rightTime = RIGHTTIME;
+    if (this.parent.valueFormat) {
+      const arr = this.parent.valueFormat.split(',');
+      const index = arr.findIndex(w => w === 'week'); // 找到week
+
+      if (index > -1) {
+        this.showWeek = true;
+        if (index === 0) {
+          // 左侧没配 0 1
+          this.leftTime = '';
+          this.rightTime = arr[1];
+        }
+        if (index === 1) {
+          // 左侧配了  0 1 ， 0 1 2
+          arr.splice(index, 1);
+          arr.forEach((str, i) => {
+            if (i === 0) {
+              this.leftTime = str;
+            }
+            if (i === 1) {
+              this.rightTime = str;
+            }
+          });
+        }
+      } else {
+        this.showWeek = false;
+        // 按顺序赋值  0 2
+        arr.forEach((str, i) => {
+          if (i === 0) {
+            this.leftTime = str;
+          }
+          if (i === 1) {
+            this.rightTime = str;
+          }
+        });
       }
     }
   }