diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 6e26d5e4ce..944849a75c 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -37,6 +37,9 @@ const commonFilterAttrsFilterBorder = [
 ]
 
 const props = defineProps({
+  curStyle: {
+    type: Object
+  },
   active: {
     type: Boolean,
     default: false
@@ -468,7 +471,7 @@ const updateFromMobile = (e, type) => {
           :dv-type="dvInfo.type"
           :canvas-view-info="canvasViewInfo"
           :style="getComponentStyleDefault(config?.style)"
-          :curStyle="slotStyle"
+          :curStyle="curStyle"
           :prop-value="config?.propValue"
           :element="config"
           :request="config?.request"
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index eae15b6da3..bafbc843c1 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -534,6 +534,7 @@ defineExpose({
         :canvas-id="canvasId"
         :canvas-style-data="canvasStyleData"
         :dv-info="dvInfo"
+        :cur-style="getShapeItemShowStyle(item)"
         :canvas-view-info="canvasViewInfo"
         :view-info="canvasViewInfo[item.id]"
         :key="index"
diff --git a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
index 9962d658f4..561b148fcb 100644
--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@@ -95,11 +95,11 @@ const groupActiveChange = category => {
             <img
               v-else-if="['dynamic_background'].includes(chartInfo.type)"
               class="item-top-icon"
-              :src="`/dynamic-background/${chartInfo.icon}`"
+              :src="`./dynamic-background/${chartInfo.icon}`"
               alt=""
             />
             <DeDecoration
-              :curStyle="{ width: '80px', height: '56px' }"
+              :curStyle="{ width: 530, height: 373 }"
               :element="{ innerType: chartInfo.value }"
               :scale="0.15"
               v-else-if="['de_decoration'].includes(chartInfo.type)"
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 2c2c300843..24a57d557e 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -502,9 +502,9 @@ const list = [
     style: {
       width: 400,
       height: 300,
-      color0: null,
-      color1: null,
-      color2: null,
+      color0: '#2862b7',
+      color1: '#2862b7',
+      color2: '#2862b7',
       dur: 6,
       reverse: false,
       borderActive: false,
diff --git a/core/core-frontend/src/custom-component/de-decoration/Attr.vue b/core/core-frontend/src/custom-component/de-decoration/Attr.vue
index 0ef8840ccc..5c88e97c87 100644
--- a/core/core-frontend/src/custom-component/de-decoration/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/Attr.vue
@@ -108,6 +108,6 @@ const init = () => {
     state.style.color0 = curComponent.value.style.color0
     state.style.color1 = curComponent.value.style.color1
     state.style.color2 = curComponent.value.style.color2
-  }, 1000)
+  })
 }
 </script>
diff --git a/core/core-frontend/src/custom-component/de-decoration/Component.vue b/core/core-frontend/src/custom-component/de-decoration/Component.vue
index 832e91ebcd..b0354e8e60 100644
--- a/core/core-frontend/src/custom-component/de-decoration/Component.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/Component.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dynamic-shape">
     <component
-      :curStyle="curStyle"
+      :curStyle="curStyleAdaptor"
       :scale="calScale"
       :is="findDecoration(element.innerType)"
       :color="curColor"
@@ -16,6 +16,20 @@ const calScale = computed(() => {
   return props.scale
 })
 
+const curStyleAdaptor = computed(() => {
+  if (props.showPosition.includes('edit')) {
+    return {
+      width: parseInt(props.curStyle.width) / props.scale,
+      height: parseInt(props.curStyle.height) / props.scale
+    }
+  } else {
+    return {
+      width: parseInt(props.curStyle.width),
+      height: parseInt(props.curStyle.height)
+    }
+  }
+})
+
 const curColor = computed(() => {
   return [props.element.style?.color0 || null, props.element.style?.color1 || null]
 })
@@ -26,6 +40,11 @@ const props = defineProps({
   scale: {
     type: Number
   },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  },
   element: {
     type: Object,
     default() {
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue
index becccfa6ed..869e57f4b2 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard1.vue
@@ -76,19 +76,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const refName = ref('border-box-1')
 const border = ref(['left-top', 'right-top', 'left-bottom', 'right-bottom'])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue
index 22da1044c7..be08ea7e5b 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard10.vue
@@ -39,19 +39,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
 
 const defaultColor = ref(['#2862b7', '#2862b7'])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue
index d80792b9a3..08a0028477 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard2.vue
@@ -41,19 +41,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const defaultColor = ref(['#4fd2dd', '#235fa7'])
 const mergedColor = ref<string[]>([])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue
index 0511bc201b..08430e114f 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard3.vue
@@ -49,19 +49,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue
index ca3291b583..c91ce0f48d 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard4.vue
@@ -71,19 +71,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const reverse = computed(() => false)
 
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue
index bdddeb6198..c2c9489092 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard5.vue
@@ -67,19 +67,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue
index 0d815a7fa6..2c21804f95 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard6.vue
@@ -57,19 +57,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue
index 1c856e16a6..e850de6b19 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard7.vue
@@ -55,19 +55,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue
index 34b58137ce..862eea4555 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard8.vue
@@ -57,19 +57,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 const defaultColor = ref(['#2862b7', '#2862b7'])
 const mergedColor = ref<string[]>([])
 import { cloneDeep } from 'lodash-es'
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue
index dea2eba4e2..4f8febf299 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeBoard9.vue
@@ -157,19 +157,14 @@ const props = withDefaults(defineProps<Props>(), {
   backgroundColor: 'transparent',
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const defaultColor = ref(['#11eefd', '#0078d2'])
 const mergedColor = ref<string[]>([])
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue
index 385e18e16d..cac31e132e 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration1.vue
@@ -94,19 +94,14 @@ const props = withDefaults(defineProps<Props>(), {
   color: () => [],
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const border_style = computed(() => {
   return {
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration2.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration2.vue
index 5c0875782f..b2b7afdf9e 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration2.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration2.vue
@@ -47,8 +47,8 @@ const props = withDefaults(defineProps<Props>(), {
   color: () => [],
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   },
   reverse: false,
@@ -63,13 +63,8 @@ const h = ref(0)
 const defaultColor = ref(['#3faacb', '#fff'])
 const mergedColor = ref<string[]>([])
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const border_style = computed(() => {
   return {
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration3.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration3.vue
index de73c5d1de..6b9814ac79 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration3.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration3.vue
@@ -42,19 +42,14 @@ const props = withDefaults(defineProps<Props>(), {
   color: () => [],
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   }
 })
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const border_style = computed(() => {
   return {
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration4.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration4.vue
index 6810f94b38..0fe610fed7 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration4.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration4.vue
@@ -36,8 +36,8 @@ const props = withDefaults(defineProps<Props>(), {
   color: () => [],
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   },
   reverse: false,
@@ -47,14 +47,8 @@ const props = withDefaults(defineProps<Props>(), {
 const refName = ref('decoration-4')
 const defaultColor = ref(['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'])
 const mergedColor = ref<string[]>([])
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
-
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 const border_style = computed(() => {
   return {
     width: `${width.value}px`,
diff --git a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration5.vue b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration5.vue
index 5f6b8bdf29..2dc02342bc 100644
--- a/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration5.vue
+++ b/core/core-frontend/src/custom-component/de-decoration/component_details/DeDecoration5.vue
@@ -52,8 +52,8 @@ const props = withDefaults(defineProps<Props>(), {
   color: () => [],
   curStyle: () => {
     return {
-      width: '320px',
-      height: '240px'
+      width: 320,
+      height: 240
     }
   },
   dur: 3
@@ -67,13 +67,8 @@ const line2Length = ref(0)
 const defaultColor = ref(['#3f96a5', '#3f96a5'])
 const mergedColor = ref<string[]>([])
 
-const width = computed(() => {
-  return parseInt(props.curStyle.width) / props.scale
-})
-
-const height = computed(() => {
-  return parseInt(props.curStyle.height) / props.scale
-})
+const width = computed(() => props.curStyle.width)
+const height = computed(() => props.curStyle.height)
 
 const border_style = computed(() => {
   return {
diff --git a/core/core-frontend/src/custom-component/dynamic_background/Component.vue b/core/core-frontend/src/custom-component/dynamic_background/Component.vue
index 7f9309cf22..00c18ededb 100644
--- a/core/core-frontend/src/custom-component/dynamic_background/Component.vue
+++ b/core/core-frontend/src/custom-component/dynamic_background/Component.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="circle-shape">
-    <img class="dynamic-shape" :src="`/dynamic-background/${element.innerType}`" alt="" />
+    <img class="dynamic-shape" :src="`./dynamic-background/${element.innerType}`" alt="" />
   </div>
 </template>