From bd090f9ac8512e4d74fe1635c293f92295029304 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 30 Oct 2024 18:58:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=AD=94=E6=96=B9=E5=A4=84?=
 =?UTF-8?q?=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-data-magic/index.vue | 10 +++++++---
 src/components/model-img-magic/index.vue  | 17 +++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 40224872..0889169e 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -84,7 +84,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number } from '@/utils';
+import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -146,7 +146,7 @@ const density = ref('4');
 //单元魔方宽度。
 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
 //单元魔方高度。
-const cubeCellHeight = computed(() => container_height.value / parseInt(density.value));
+const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
 const getSelectedWidth = (item: data_magic) => {
     return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
 };
@@ -164,7 +164,11 @@ const getSelectedLeft = (item: data_magic) => {
 };
 // 根据当前页面大小计算成百分比
 const selected_style = (item: data_magic) => {
-    return `overflow: hidden;width: calc(${getSelectedWidth(item)}px - ${ outer_spacing.value } ); height: calc(${getSelectedHeight(item)}px - ${ outer_spacing.value } ); top: ${getSelectedTop(item)}px;left: ${getSelectedLeft(item)}px;`;
+    return `overflow: hidden;width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
+};
+// 计算成百分比
+const percentage = (num: number) => {
+    return percentage_count(num, div_width.value);
 };
 //#endregion
 //#region 组装页面显示的数据
diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue
index b52b73a6..4e63b8a9 100644
--- a/src/components/model-img-magic/index.vue
+++ b/src/components/model-img-magic/index.vue
@@ -65,17 +65,17 @@ const outer_sx = computed(() => -(new_style_spacing.value / 2) + 'px');
 const spacing = computed(() => new_style_spacing.value / 2 + 'px');
 // 图片圆角设置
 const content_img_radius = computed(() => radius_computer(new_style.value));
+
 //#region 容器大小计算
 const div_width = ref(0);
+const container_size = computed(() => form.value.style_actived === 10 ? '100%' : container_height.value + 'px');
 // 如果容器高度为空，则取容器宽度
 const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
-
-const container_size = computed(() => form.value.style_actived === 10 ? '100%' : container_height.value + 'px');
-const container_size_10 = computed(() => div_width.value + 'px');
+const container_size_10 = computed(() => container_height.value + 'px');
 const container = ref<HTMLElement | null>(null);
 onMounted(() => {
     if (container.value) {
-        div_width.value = container.value.clientWidth;
+        div_width.value = container.value.clientWidth;   
     }
 });
 //#endregion
@@ -96,7 +96,7 @@ const density = ref('4');
 //单元魔方宽度。
 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
 //单元魔方高度。
-const cubeCellHeight = computed(() => container_height.value / parseInt(density.value));
+const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
 const getSelectedWidth = (item: CubeItem) => {
     return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
 };
@@ -114,7 +114,12 @@ const getSelectedLeft = (item: CubeItem) => {
 };
 // 根据当前页面大小计算成百分比
 const selected_style = (item: CubeItem) => {
-    return `width: ${getSelectedWidth(item)}px; height: ${getSelectedHeight(item)}px; top: ${getSelectedTop(item)}px; left: ${getSelectedLeft(item)}px;`;
+    return `width: ${percentage(getSelectedWidth(item))}; height: ${percentage(getSelectedHeight(item))}; top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
+};
+// 计算成百分比
+const percentage = (num: number) => {
+    const marks = (num / div_width.value) * 100;
+    return marks.toFixed(4) + '%';
 };
 //#endregion
 // 公共样式