From eb968029aa59d01e3dce07395482c0130eae581e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 30 Dec 2024 10:19:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E8=87=AA=E5=AE=9A=E4=B9=89=E5=A4=84=E7=90=86=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-data-magic/components/custom/index.vue       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index cedd4b1e..441665ae 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -159,12 +159,16 @@ watchEffect(() => {
     // 重新赋值
     form.value = props.value.data_content;
     new_style.value = props.value.data_style;
-
+    const old_width = form.value.width * props.magicScale;
     const { padding_left, padding_right } = new_style.value.data_chunk_padding;
     const { margin_left, margin_right } = new_style.value.data_chunk_margin;
+    const data_content_style = new_style.value?.data_content_style || {};
+    // 内容左右间距
+    const content_spacing = (data_content_style?.margin_left || 0) + (data_content_style?.margin_right || 0) + (data_content_style?.padding_left || 0) + (data_content_style?.padding_right || 0);
     // 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
-    const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2);
-    scale.value = (width / form.value.width) * props.magicScale;
+    const width = old_width - padding_left - padding_right - margin_left - margin_right - content_spacing - (props.dataSpacing / 2);
+
+    scale.value = width / old_width;
 })
 // 计算纵向显示的宽度
 const gap_width = computed(() => {