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 a7c8dc5e0f2dfd6864d2ff04e0be1cb0bd5e3e4c..de4a7ded4096bf6f77b42d693a63070d7fe5a664 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.scss
+++ b/src/custom-border/custom-dv-1/custom-dv-1.scss
@@ -1,5 +1,5 @@
 $style-1: (
-    'offsetY': 0,
+  'offsetY': 0,
 );
 
 @include b(custom-border) {
@@ -8,14 +8,16 @@ $style-1: (
     position: relative;
     width: 100%;
     height: 100%;
-    @include e(wrapper){
+    @include e(wrapper) {
       position: absolute;
+      top: getCssVar(style-1, 'offsetY');
       width: 100%;
-      height: calc(100% - getCssVar(style-1,'offsetY'));
+      height: calc(100% - getCssVar(style-1, 'offsetY'));
     }
     @include e(border-box) {
-    z-index: 100;
-    height: 0;
+      position: relative;
+      z-index: 100;
+      height: 100%;
     }
     @include e(border) {
       position: absolute;
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 d0dfc1bdf576cbcf8e8381b3db488793318aa7a0..c8e05ef4bce92c883e2873999d031b50cbc57dc7 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.tsx
+++ b/src/custom-border/custom-dv-1/custom-dv-1.tsx
@@ -43,8 +43,7 @@ export const CustomDV1 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框svg
      */
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 23d570792729dc35f381fdeae5c29384c3b25b7d..3b0db3a4c9425c877890f4d5bb97af6b85676d9e 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.scss
+++ b/src/custom-border/custom-dv-10/custom-dv-10.scss
@@ -12,6 +12,7 @@ $style-10: (
     height: 100%;
     @include e(wrapper){
       position: absolute;
+      top: getCssVar(style-10, 'offsetY');
       width: 100%;
       height: calc(100% - getCssVar(style-10, 'offsetY'));
     }
@@ -21,7 +22,7 @@ $style-10: (
     }
     @include e(mask) {
       position: absolute;
-      top: getCssVar(style-10, 'padding');
+      top: calc(getCssVar(style-10, 'padding') + getCssVar(style-10, 'offsetY'));
       left: getCssVar(style-10, 'padding');
       width:  calc(100% - 2 * getCssVar(style-10, 'padding'));
       height: calc(100% - 2 * getCssVar(style-10, 'padding') - getCssVar(style-10, 'offsetY'));
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 4bab586edfd721d89da5b699bf45280ef22d7c93..053bec167edbcb635924ff576150e736579e4b29 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.tsx
+++ b/src/custom-border/custom-dv-10/custom-dv-10.tsx
@@ -43,8 +43,7 @@ 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 backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    const offsety = ref(props.offsetY);
     const padding = ref(8);
     /**
      * 绘制边框svg
diff --git a/src/custom-border/custom-dv-11/custom-dv-11.scss b/src/custom-border/custom-dv-11/custom-dv-11.scss
index b4b5bfc6f266a65d6c78938e8c062826d82c7db8..e3ac4e67c6803e8d5606f27ce975f244163208e6 100644
--- a/src/custom-border/custom-dv-11/custom-dv-11.scss
+++ b/src/custom-border/custom-dv-11/custom-dv-11.scss
@@ -3,6 +3,7 @@
     position: relative;
     width: 100%;
     height: 100%;
+
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
@@ -10,6 +11,7 @@
         left: 0;
         width: 100%;
         height: 100%;
+        transform: translateY(0);
   
         & > polyline {
           fill: none;
@@ -21,5 +23,11 @@
       width: 100%;
       height: 100%;
     }
+    .#{bem(portlet-layout-header,left)} {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 }
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 343be4eec06108f9114aa5fc129b02e5873b20a9..893b4d1f060da91fd0f148789506fd8fd21fce32 100644
--- a/src/custom-border/custom-dv-11/custom-dv-11.tsx
+++ b/src/custom-border/custom-dv-11/custom-dv-11.tsx
@@ -54,8 +54,7 @@ export const CustomDV11 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框svg
      */
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 e5452d79584ec82daea1073e6abecbc18d7ad9c6..c59572e8d169b28fef18fa1ad78b7c55bffe4a77 100644
--- a/src/custom-border/custom-dv-12/custom-dv-12.scss
+++ b/src/custom-border/custom-dv-12/custom-dv-12.scss
@@ -14,7 +14,7 @@ $style-12: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-12,'offsetY'));
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 f479d01894730b38d4e1a6c63dcd5102ca236e74..7f76a27980d4c12e995a346876054ef6a0f35d15 100644
--- a/src/custom-border/custom-dv-12/custom-dv-12.tsx
+++ b/src/custom-border/custom-dv-12/custom-dv-12.tsx
@@ -44,8 +44,7 @@ export const CustomDV12 = defineComponent({
     let domObserver: MutationObserver | null;
     const id = createUUID();
     const filterId = `borderr-box-12-filterId-${id}`;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      *  初始化宽高
      * @param resize
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 8853391d1a83222ade523b15caa090048b7544a5..c7ef8c6231abe877f8c2868f6077589f331c3993 100644
--- a/src/custom-border/custom-dv-13/custom-dv-13.scss
+++ b/src/custom-border/custom-dv-13/custom-dv-13.scss
@@ -11,7 +11,7 @@ $style-13: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 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 8e86b865be9f20038913fe2ff8fee1146aba1625..4936a46e631c75d39b6950d00e1feb3ad777578e 100644
--- a/src/custom-border/custom-dv-13/custom-dv-13.tsx
+++ b/src/custom-border/custom-dv-13/custom-dv-13.tsx
@@ -42,8 +42,7 @@ export const CustomDV13 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框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 65c5a835c5abdfc20da7701f43e9306844e0d91a..886d8fed05334854982fedec02a391710be4c952 100644
--- a/src/custom-border/custom-dv-2/custom-dv-2.scss
+++ b/src/custom-border/custom-dv-2/custom-dv-2.scss
@@ -12,10 +12,9 @@ $style-2: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 100%;
-        height: 100%;
         height: calc(100% - getCssVar(style-2,'offsetY'));
   
         & > polyline {
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 e0431990cf21225878769beca39e36fc3ada9e2e..cf0845a0ef9cfd64a3a501600978f1556f7c43e7 100644
--- a/src/custom-border/custom-dv-2/custom-dv-2.tsx
+++ b/src/custom-border/custom-dv-2/custom-dv-2.tsx
@@ -42,8 +42,7 @@ export const CustomDV2 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;
     /**
      * 绘制边框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 532899959ce8c8276d45560f3ecee9fddb189b5d..4ccf9c44bf3955530084c36b0529a492dbea55cb 100644
--- a/src/custom-border/custom-dv-3/custom-dv-3.scss
+++ b/src/custom-border/custom-dv-3/custom-dv-3.scss
@@ -13,7 +13,7 @@ $style-3: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 100%;
         height: calc(100% - getCssVar(style-3,'offsetY'));
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 a1f3be1755797e4e16e0fa2392b716dca24a3700..fa45ece342af15593a664db2c627f2030d9d48b2 100644
--- a/src/custom-border/custom-dv-3/custom-dv-3.tsx
+++ b/src/custom-border/custom-dv-3/custom-dv-3.tsx
@@ -42,8 +42,7 @@ export const CustomDV3 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`; /**
      * 绘制边框svg
      */
     const renderBorder = () => {
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 4c77d8bb9277d2f9f3f874eed101b6f533b6c2cd..19fa78c00c27dedac20e3693b98485ab9d2c3308 100644
--- a/src/custom-border/custom-dv-4/custom-dv-4.scss
+++ b/src/custom-border/custom-dv-4/custom-dv-4.scss
@@ -15,7 +15,7 @@ $style-4: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-4,'offsetY'));
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 dc483c975dd258286db11041cd6350857bff19d1..a324cf15dc8519953f789c45c43e67c13a9653f0 100644
--- a/src/custom-border/custom-dv-4/custom-dv-4.tsx
+++ b/src/custom-border/custom-dv-4/custom-dv-4.tsx
@@ -45,8 +45,7 @@ export const CustomDV4 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      *  初始化宽高
      * @param resize
      * @returns
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 4b9d332d49ffd256757c796571142c6cc7898976..d88c0962e4e61430777cc4d95c6311a931db18e3 100644
--- a/src/custom-border/custom-dv-5/custom-dv-5.scss
+++ b/src/custom-border/custom-dv-5/custom-dv-5.scss
@@ -13,7 +13,7 @@ $style-5: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-5,'offsetY'));
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 d93b9ea72fde35fb25cd1e0b73799e4da0287e80..56f5cd3654c06ecb0bd73a7558bb3759df7976b8 100644
--- a/src/custom-border/custom-dv-5/custom-dv-5.tsx
+++ b/src/custom-border/custom-dv-5/custom-dv-5.tsx
@@ -45,8 +45,7 @@ export const CustomDV5 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      *  初始化宽高
      * @param resize
      * @returns
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 784dd023f24f1e92fb543a166fa7939512a5ec14..c8be17027a0b332795ac6ff996c82abb439290bd 100644
--- a/src/custom-border/custom-dv-6/custom-dv-6.scss
+++ b/src/custom-border/custom-dv-6/custom-dv-6.scss
@@ -12,7 +12,7 @@ $style-6: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-6,'offsetY'));
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 4fc78856b3cc670f582509afde289202b92c1618..5c6b8780cbf6f4faf69fc8dd980cd8fc8420309d 100644
--- a/src/custom-border/custom-dv-6/custom-dv-6.tsx
+++ b/src/custom-border/custom-dv-6/custom-dv-6.tsx
@@ -45,8 +45,7 @@ export const CustomDV6 = defineComponent({
       | MutationCallback
       | EventListenerOrEventListenerObject;
     let domObserver: MutationObserver | null;
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      *  初始化宽高
      * @param resize
      * @returns
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 89c7f4f73429f0b739835ae6f08a082588392088..2f7c60523b4a0065ac433ef73c1be8fb9ee3334e 100644
--- a/src/custom-border/custom-dv-7/custom-dv-7.scss
+++ b/src/custom-border/custom-dv-7/custom-dv-7.scss
@@ -12,7 +12,7 @@ $style-7: (
     }
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: calc(100% - getCssVar(style-7,'offsetY'));
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 2e992f175385e4f47663fb08fd9459efe0a77ba5..869dc76b74e781328f203f14f8449a8ab24a53ce 100644
--- a/src/custom-border/custom-dv-8/custom-dv-8.scss
+++ b/src/custom-border/custom-dv-8/custom-dv-8.scss
@@ -10,7 +10,7 @@ $style-8: (
   
     @include e('svg-container') {
       position: absolute;
-      top: 0;
+      top: 8px;
       left: 0;
       width: 100%;
       height: 100%;
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 0c31b20783e72c376abccff82777a9805d41dbb8..7d91b4efde096ee8b44e02b2bf8701b74ae2bda7 100644
--- a/src/custom-border/custom-dv-8/custom-dv-8.tsx
+++ b/src/custom-border/custom-dv-8/custom-dv-8.tsx
@@ -57,8 +57,7 @@ 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(() => {
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    const length = computed(() => {
       return (width.value + height.value - props.offsetY - 5) * 2;
     });
 
@@ -179,7 +178,7 @@ export const CustomDV8 = defineComponent({
     const renderBorder = () => {
       const _width = width.value - props.offsetX;
       const _height = height.value - props.offsetY;
-      const padding = 2;
+      const padding = 8;
       return (
         <svg
           class={[ns.e('svg-container')]}
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 bbfdc87ba7ba77a56194a60000641fae5e2ed99a..47c0318d3e6346aced18da9df3496e0dbc0b4c73 100644
--- a/src/custom-border/custom-dv-9/custom-dv-9.scss
+++ b/src/custom-border/custom-dv-9/custom-dv-9.scss
@@ -13,7 +13,7 @@ $style-9: (
     @include e(border-svg) {
       @include m(container) {
         position: absolute;
-        top: 0;
+        top: 8px;
         left: 0;
         width: 100%;
         height: calc(100% - getCssVar(style-9,'offsetY'));
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 d59688a6f6e972485dac9f9c2b1b47962f1c4bfa..4c5ee819762fdf82cded298d45c2cd70eb7b803d 100644
--- a/src/custom-border/custom-dv-9/custom-dv-9.tsx
+++ b/src/custom-border/custom-dv-9/custom-dv-9.tsx
@@ -46,8 +46,7 @@ export const CustomDV9 = defineComponent({
     const mergedColor = computed(() => {
       return deepMerge(defaultColor, props.color || []) as string[];
     });
-    const backgroundColor = 'var(--ibiz-screen-dashboard-custom-dv-bg)';
-    /**
+    const backgroundColor = `var(${ns.cssVarName('screen-dashboard-custom-dv-bg')})`;    /**
      * 绘制边框svg
      */
     const renderBorder = () => {
diff --git a/src/custom-button/custom-button.scss b/src/custom-button/custom-button.scss
index aa3fde35d4ac25b847a684456175b931391d65c2..877f80da0a4b675a77c5190d5b0cd388d106ab2f 100644
--- a/src/custom-button/custom-button.scss
+++ b/src/custom-button/custom-button.scss
@@ -5,7 +5,7 @@
   }
   @include e('raw-item') {
     position: relative;
-    color: var(--svgColor, getCssVar(screen-dashboard, primary-color));
+    color: var(#{getCssVarName(panel-button-svg-color)}, getCssVar(screen-dashboard, primary-color));
   }
 }
 @include b('panel-button-custon-btn') {
@@ -13,7 +13,7 @@
   width: 100%;
   height: 100%;
   padding: getCssVar(spacing-tight);
-  color: var(--svgColor, getCssVar(screen-dashboard, text-color));
+  color: var(#{getCssVarName(panel-button-svg-color)}, getCssVar(screen-dashboard, text-color));
   text-align: center;
   cursor: pointer;
 
@@ -30,20 +30,20 @@
     width: 100%;
     height: 100%;
     filter: drop-shadow(
-      var(--svgBorderColor, getCssVar(screen-dashboard, primary-color)) 0 0 2px
+      var(#{getCssVarName(panel-button-svg-border-color)}, getCssVar(screen-dashboard, primary-color)) 0 0 2px
     );
   }
 
   .dv-button-svg-bg {
-    opacity: var(--svgBgOpacity);
-    fill: var(--svgBgColor, getCssVar(screen-dashboard, primary-color));
+    opacity: getCssVar(panel-button-svg-bg-opacity);
+    fill: var(#{getCssVarName(panel-button-svg-bg-color)}, getCssVar(screen-dashboard, primary-color));
     stroke: transparent;
     stroke-width: 0;
   }
 
   .dv-button-svg-line {
     fill: transparent;
-    stroke: var(--svgColor, getCssVar(screen-dashboard, primary-color));
+    stroke: var(#{getCssVarName(panel-button-svg-color)}, getCssVar(screen-dashboard, primary-color));
     stroke-width: 2;
     vector-effect: non-scaling-stroke;
   }
diff --git a/src/custom-button/custom-button.tsx b/src/custom-button/custom-button.tsx
index 3df4361f0fe141a502cdd4c510d239d035854c23..aeb5343ac2a04132f9c01e7e3f7d8ff1c20adbf1 100644
--- a/src/custom-button/custom-button.tsx
+++ b/src/custom-button/custom-button.tsx
@@ -86,11 +86,12 @@ export const CustomButton = defineComponent({
     });
 
     Object.assign(svgStyle.value, {
-      '--svgBorderColor': svgBorderColor.value,
-      '--svgColor': svgColor.value,
-      '--svgBgColor': svgBgColor.value,
-      '--svgBgOpacity': svgBgOpacity.value,
+      [ns.cssVarBlockName('svg-border-color')]: svgBorderColor.value,
+      [ns.cssVarBlockName('svg-color')]: svgColor.value,
+      [ns.cssVarBlockName('svg-bg-color')]: svgBgColor.value,
+      [ns.cssVarBlockName('svg-bg-opacity')]: svgBgOpacity.value,
     });
+    console.log('svgStyle', ns, svgStyle.value);
 
     watch(
       () => c.data,
diff --git a/src/percent-pond/percent-pond.scss b/src/percent-pond/percent-pond.scss
index 3e68f9e900b8287c0198253bf7de4549a3224128..d720ee508592ddd642e0394e7cb45d53a8eb1947 100644
--- a/src/percent-pond/percent-pond.scss
+++ b/src/percent-pond/percent-pond.scss
@@ -1,75 +1,95 @@
-@include b('percent-pond'){
-    display: flex;
-    gap: 10px;
-    align-items: end;
-    width: 100%;
-    @include e('slider'){
-        flex: 1;
-        @include m('line'){
-            position: relative;
-            width: 100%;
-            height: 1px;
-            overflow: visible;
-            background-color: getCssVar(color, border);
-            opacity: 0.6;
+$cover-slider: (
+  height: 8px,
+  color: #000,
+  bgColor: #fff,
+  use-cover-color: getCssVar(color, primary),
+);
+@include b('percent-pond') {
+  @include set-component-css-var('cover-slider', $cover-slider);
+
+  display: flex;
+  gap: 10px;
+  align-items: end;
+  width: 100%;
+  @include e('slider') {
+    flex: 1;
+    @include m('line') {
+      position: relative;
+      width: 100%;
+      height: 1px;
+      overflow: visible;
+      background-color: getCssVar(color, border);
+      opacity: 0.6;
 
-            &::before {
-                position: absolute;
-                top: -2px;
-                left: 0;
-                width: 4px;
-                height: 4px;
-                content: "";
-                background-color: getCssVar(color, primary);
-            }
+      &::before {
+        position: absolute;
+        top: -2px;
+        left: 0;
+        width: 4px;
+        height: 4px;
+        content: '';
+        background-color: getCssVar(color, primary);
+      }
 
-            &::after {
-                position: absolute;
-                top: -2px;
-                right: 0;
-                width: 4px;
-                height: 4px;
-                content: "";
-                background-color: getCssVar(color, primary);
-            }
-        }
-        @include m('cover-slider'){
-            position: relative;
-            width: 100%;
-            height: 5px;
-            margin-top: 16px;
-            background-color: getCssVar(color,fill,0);
-        }
-        @include m('use-cover'){
-            position: absolute;
-            left: 0;
-            width: 0;
-            height: 100%;
-            background-color: getCssVar(color, primary);
-            opacity: 0.5;
-        }
-        @include m('slider-arrow'){
-            position: absolute;
-            top: -28px;
-            left: 0;
-            color: getCssVar(color, primary);
-            opacity: 0.5;
-        }
+      &::after {
+        position: absolute;
+        top: -2px;
+        right: 0;
+        width: 4px;
+        height: 4px;
+        content: '';
+        background-color: getCssVar(color, primary);
+      }
+    }
+    @include m('cover-slider') {
+      position: relative;
+      width: 100%;
+      height: getCssVar(cover-slider, height);
+      margin-top: 16px;
+      color: getCssVar(cover-slider, color);
+      background-color: getCssVar(cover-slider, bgcolor);
+      background-image: linear-gradient(
+        315deg,
+        currentcolor 25%,
+        transparent 25%,
+        transparent 50%,
+        currentcolor 50%,
+        currentcolor 75%,
+        transparent 75%,
+        transparent
+      );
+      background-size: 20px 20px;
+    }
+    @include m('use-cover') {
+      position: absolute;
+      left: 0;
+      width: 0;
+      height: 100%;
+      background-color: getCssVar(cover-slider, use-cover-color);
+      opacity: 0.5;
+    }
+    @include m('slider-arrow') {
+      position: absolute;
+      top: -28px;
+      left: 0;
+      color: getCssVar(cover-slider, use-cover-color);
+      opacity: 0.5;
+    }
+  }
+  @include e('value') {
+    display: flex;
+    flex: 0;
+    align-items: end;
+    color: getCssVar(color, primary, light, active);
+    @include m('current') {
+      display: inline-block;
+      font-size: 32px;
+      line-height: 1;
     }
-    @include e('value'){
-        display: flex;
-        flex: 0;
-        align-items: end;
-        color: getCssVar(color,primary,light,active);
-        @include m('current'){
-            display: inline-block;
-            font-size: 32px;
-            line-height: 1;
-        }
-        @include m('total'){
-            display: inline-block;
-            font-size: 16px;
-            font-weight: 600;
-        }
+    @include m('total') {
+      display: inline-block;
+      font-size: 16px;
+      font-weight: 600;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/screen-portlet/screen-portlet.scss b/src/screen-portlet/screen-portlet.scss
index 224a7768ec3008bde14c8060f65fb7c2bde6a70c..8591633a423b56e48e23a942cce1fbde31b7e6d1 100644
--- a/src/screen-portlet/screen-portlet.scss
+++ b/src/screen-portlet/screen-portlet.scss
@@ -7,9 +7,6 @@
     .#{bem(portlet-layout-header)} {
       position: relative;
     }
-    .#{bem(portlet-layout-content)} {
-      padding-top: getCssVar(spacing, tight);
-    }
 
     .#{bem(portlet-layout-header, left)} {
       position: unset;
@@ -78,8 +75,8 @@
   }
 
   @include when(full-border) {
-    .#{bem(custom-border, wrapper)} {
-      bottom: 0;
+    > svg {
+      transform: translateY(50px);
     }
   }
 }
diff --git a/src/screen-radio-list/screen-radio-list.controller.ts b/src/screen-radio-list/screen-radio-list.controller.ts
index 7c42821494f3f867c801a8c830dfa6743d371092..d78a54264fc7d8577c687d5c5f76b78879408279 100644
--- a/src/screen-radio-list/screen-radio-list.controller.ts
+++ b/src/screen-radio-list/screen-radio-list.controller.ts
@@ -15,6 +15,14 @@ export class ScreenRadioListEditorController extends CodeListEditorController<IR
    */
   speed: number = 3000;
 
+  /**
+   * 按钮间隔
+   *
+   * @type {number}
+   * @memberof ScreenRadioListEditorController
+   */
+  btnSpace: number = 0;
+
   /**
    * @description 绘制模式(button: 按钮模式, radio: 单选框模式)
    * @type {('button' | 'radio')}
@@ -24,12 +32,15 @@ export class ScreenRadioListEditorController extends CodeListEditorController<IR
 
   protected async onInit(): Promise<void> {
     super.onInit();
-    const { speed, renderMode } = this.editorParams;
+    const { speed, renderMode, btnSpace } = this.editorParams;
     if (speed) {
       this.speed = Number(speed);
     }
     if (renderMode) {
       this.renderMode = renderMode;
     }
+    if (btnSpace) {
+      this.btnSpace = Number(btnSpace);
+    }
   }
 }
diff --git a/src/screen-radio-list/screen-radio-list.scss b/src/screen-radio-list/screen-radio-list.scss
index 1814e71c54aeec561ac1c29d3dbfe84542f2dc23..91e6cd20c9c7e8fa58d046bf4bc57699afd59db8 100644
--- a/src/screen-radio-list/screen-radio-list.scss
+++ b/src/screen-radio-list/screen-radio-list.scss
@@ -5,6 +5,7 @@ $screen-radio-list: (
   'radio-border': 1px solid getCssVar(screen-dashboard, border-color),
   'radio-checked-font-weight': 600,
   'radio-label-padding-left': 0,
+  'button-space': 16px,
 );
 /* stylelint-disable no-descending-specificity */
 @include b(screen-radio-list) {
@@ -47,6 +48,17 @@ $screen-radio-list: (
     line-height: getCssVar(editor, default, line-height);
     color: getCssVar(form-item, readonly-color);
   }
+
+  @include e('button') {
+    @include when('space') {
+      margin-right: getCssVar(screen-radio-list, button-space);
+      border-radius: 4px;
+
+      .el-radio-button__inner {
+        border-left: 1px;
+      }
+    }
+  }
 }
 
 @include b(form-item) {
diff --git a/src/screen-radio-list/screen-radio-list.tsx b/src/screen-radio-list/screen-radio-list.tsx
index fcfd0ef53d303fe74d6976316cee83612d25ed0a..7f8d8747874b108d231c34ee96e99cb8d0c96a37 100644
--- a/src/screen-radio-list/screen-radio-list.tsx
+++ b/src/screen-radio-list/screen-radio-list.tsx
@@ -62,6 +62,7 @@ export const ScreenRadioList = defineComponent({
       timer = setInterval(() => {
         loopSelect();
       }, c.speed);
+      loopSelect();
     });
 
     onBeforeMount(() => {
@@ -127,6 +128,7 @@ export const ScreenRadioList = defineComponent({
     return {
       timer,
       ns,
+      c,
       editorModel,
       items,
       valueText,
@@ -168,7 +170,14 @@ export const ScreenRadioList = defineComponent({
                 <el-radio-button
                   key={index}
                   border
-                  class={[this.ns.e('button')]}
+                  class={[
+                    this.ns.e('button'),
+                    this.ns.is('space', this.c.btnSpace !== 0),
+                  ]}
+                  style={{
+                    [this.ns.cssVarBlockName('button-space')]:
+                      `${this.c.btnSpace}px`,
+                  }}
                   label={notNilEmpty(item.value) ? String(item.value) : ''}
                   disabled={this.disabled || item.disableSelect === true}
                 >
diff --git a/src/screen-real-time/screen-real-time.scss b/src/screen-real-time/screen-real-time.scss
index 23b8cd049015bae834d3427ade579717bd357ef1..c089af83c684f4efbebbcdec4f9df6de21a8eb23 100644
--- a/src/screen-real-time/screen-real-time.scss
+++ b/src/screen-real-time/screen-real-time.scss
@@ -13,7 +13,6 @@ $screen-real-time: (
   display: flex;
   align-items: getCssVar('screen-real-time', 'align-items');
   height: getCssVar('screen-real-time', 'height');
-  padding-left: getCssVar('screen-real-time', 'padding-left');
   font-size: getCssVar('screen-real-time', 'font-size');
   color: getCssVar('screen-dashboard', 'primary-text-color');
   white-space: getCssVar('screen-real-time', 'white-space');