From 9989e99da92ad29aae474c204ebdb0f1aee85a86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 29 Oct 2024 13:59:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-custom/index.vue | 31 +++++++++++++++------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 137da8c9..2b12bb97 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -1,8 +1,8 @@
 <template>
-    <div ref="container" :style="style_container">
+    <div :style="style_container">
         <div class="w h" :style="style_img_container">
             <div class="w h re custom-other">
-                <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x * scale, div_width) , 'top': percentage_count(item.location.y * scale, form.height), 'width': percentage_count(item.com_data.com_width * scale, div_width), 'height': percentage_count(item.com_data.com_height * scale, form.height), 'z-index': (form.custom_list.length - 1) - index}">
+                <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
                     <template v-if="item.key == 'text'">
                         <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
                     </template>
@@ -24,7 +24,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_img_computer, common_styles_computer, percentage_count } from '@/utils';
+import { common_img_computer, common_styles_computer } from '@/utils';
 
 const props = defineProps({
     value: {
@@ -42,26 +42,29 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
 
-const custom_height = computed(() => form.value.height + 'px');
-const container = ref<HTMLElement | null>(null);
+const custom_height = computed(() => form.value.height * scale.value + 'px');
 const div_width = ref(0);
 const scale = ref(1);
 // 获取当前宽度 和 缩放比例
 onMounted(() => {
-    if (container.value) {
-        div_width.value = container.value.offsetWidth;
-        scale.value = div_width.value / 390;
-    }
+    const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
+    // 根据容器宽度来计算内部大小
+    div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
+    // 获得对应宽度的比例
+    scale.value = div_width.value / 390;
 });
-
+const percentage_count = (val: number, container_size: number) => {
+    return val * scale.value + 'px';
+};
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
 watch(() => new_style.value.common_style, (val) => {
-    if (container.value) {
-        div_width.value = container.value.offsetWidth;
-        scale.value = div_width.value / 390;
-    }
+    const { margin_left, margin_right, padding_left, padding_right } = val;
+    // 根据容器宽度来计算内部大小
+    div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
+    // 获得对应宽度的比例
+    scale.value = div_width.value / 390;
 }, { deep: true });
 </script>
 <style lang="scss" scoped>