From b7c5d8769167bc5bf2bf12fdc035d1a103c896fb Mon Sep 17 00:00:00 2001 From: sws <1141121512@qq.com> Date: Mon, 12 Aug 2024 19:00:03 +0800 Subject: [PATCH] =?UTF-8?q?1.fix(model-hot-zone):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E6=AF=94=E4=BE=8B=E8=AE=A1=E7=AE=97=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E5=B9=B6=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81?= =?UTF-8?q?=E7=9A=84=E6=97=A5=E5=BF=97=E8=BE=93=E5=87=BA=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E4=BA=86model-hot-zone=E7=BB=84=E4=BB=B6=E4=B8=AD?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=92=8C=E7=83=AD=E7=82=B9=E5=8C=BA=E5=9F=9F?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E6=AF=94=E4=BE=8B=E8=AE=A1=E7=AE=97=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82=E4=B9=8B=E5=89=8D?= =?UTF-8?q?=EF=BC=8C=E7=BC=A9=E6=94=BE=E6=AF=94=E4=BE=8B=E8=AE=A1=E7=AE=97?= =?UTF-8?q?=E6=B2=A1=E6=9C=89=E5=87=86=E7=A1=AE=E5=8F=8D=E6=98=A0=E5=AE=B9?= =?UTF-8?q?=E5=99=A8=E5=92=8C=E7=83=AD=E7=82=B9=E5=8C=BA=E5=9F=9F=E7=9A=84?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E5=85=B3=E7=B3=BB=EF=BC=8C=E5=AF=BC=E8=87=B4?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E8=A1=8C=E4=B8=BA=E4=B8=8D=E6=AD=A3=E7=A1=AE?= =?UTF-8?q?=E3=80=82=E6=AD=A4=E6=9B=B4=E6=96=B0=E7=A1=AE=E4=BF=9D=E7=BC=A9?= =?UTF-8?q?=E6=94=BE=E6=AF=94=E4=BE=8B=E5=87=86=E7=A1=AE=E8=AE=A1=E7=AE=97?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E9=AB=98=E4=BA=86=E7=BB=84=E4=BB=B6=E7=9A=84?= =?UTF-8?q?=E5=87=86=E7=A1=AE=E6=80=A7=E5=92=8C=E6=80=A7=E8=83=BD=E3=80=82?= =?UTF-8?q?=E5=90=8C=E6=97=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=E4=BA=86=E4=B8=8D?= =?UTF-8?q?=E5=BF=85=E8=A6=81=E7=9A=84console.log=E8=B0=83=E7=94=A8?= =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E9=81=BF=E5=85=8D=E5=9C=A8=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E5=8F=B0=E7=94=9F=E6=88=90=E6=97=A0=E5=85=B3=E7=9A=84=E6=97=A5?= =?UTF-8?q?=E5=BF=97=E8=BE=93=E5=87=BA=E3=80=82=20fix(model-img-magic):=20?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=A0=B7=E5=BC=8F=E8=AE=A1=E7=AE=97=E5=B9=B6?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E9=97=B4=E8=B7=9D=E5=92=8C=E5=9C=86=E8=A7=92?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=20=E8=A7=A3=E5=86=B3=E4=BA=86model-img-magic?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=AD=E4=B8=8E=E5=9B=BE=E7=89=87=E9=97=B4?= =?UTF-8?q?=E8=B7=9D=E5=92=8C=E5=9C=86=E8=A7=92=E8=AE=BE=E7=BD=AE=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E7=9A=84=E8=AE=A1=E7=AE=97=E9=94=99=E8=AF=AF=E3=80=82?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=90=8E=EF=BC=8C=E7=BB=84=E4=BB=B6=E7=9A=84?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=97=B4=E8=B7=9D=E5=92=8C=E5=9C=86=E8=A7=92?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E7=8E=B0=E5=9C=A8=E6=AD=A3=E7=A1=AE=E5=BA=94?= =?UTF-8?q?=E7=94=A8=EF=BC=8C=E5=B9=B6=E4=B8=94=E4=B8=8E=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E8=A7=84=E8=8C=83=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4=E3=80=82?= =?UTF-8?q?=E5=90=8C=E6=97=B6=EF=BC=8C=E4=BF=AE=E6=AD=A3=E4=BA=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AE=BD=E5=BA=A6=E7=9A=84=E8=AE=A1=E7=AE=97=E6=96=B9?= =?UTF-8?q?=E6=B3=95=EF=BC=8C=E7=A1=AE=E4=BF=9D=E7=BB=84=E4=BB=B6=E8=83=BD?= =?UTF-8?q?=E5=A4=9F=E6=AD=A3=E7=A1=AE=E5=9C=B0=E6=A0=B9=E6=8D=AE=E5=AE=B9?= =?UTF-8?q?=E5=99=A8=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=95=B4=E3=80=82=20fix(vi?= =?UTF-8?q?te.config.ts):=20=E8=B0=83=E6=95=B4=E8=B5=84=E6=BA=90=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E5=A4=B9=E5=90=8D=E7=A7=B0=E4=BB=A5=E7=AC=A6=E5=90=88?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=A0=87=E5=87=86=20=E5=B0=86vite.config.ts?= =?UTF-8?q?=E4=B8=AD=E7=9A=84=E8=B5=84=E6=BA=90=E6=96=87=E4=BB=B6=E5=A4=B9?= =?UTF-8?q?=E5=90=8D=E7=A7=B0=E4=BB=8E'diy'=E8=B0=83=E6=95=B4=E4=B8=BA'ass?= =?UTF-8?q?ets'=EF=BC=8C=E4=BB=A5=E7=AC=A6=E5=90=88=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E7=9A=84=E5=91=BD=E5=90=8D=E6=A0=87=E5=87=86=E3=80=82=E6=AD=A4?= =?UTF-8?q?=E6=9B=B4=E6=94=B9=E7=A1=AE=E4=BF=9D=E6=89=80=E6=9C=89=E9=9D=99?= =?UTF-8?q?=E6=80=81=E8=B5=84=E6=BA=90=E9=83=BD=E5=AD=98=E6=94=BE=E5=9C=A8?= =?UTF-8?q?=E9=A2=84=E6=9C=9F=E7=9A=84=E7=9B=AE=E5=BD=95=E4=B8=AD=EF=BC=8C?= =?UTF-8?q?=E4=BE=BF=E4=BA=8E=E7=AE=A1=E7=90=86=E5=92=8C=E6=9F=A5=E6=89=BE?= =?UTF-8?q?=E3=80=82=20sws=202024-08-12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/model-hot-zone/index.vue | 1 - src/components/model-img-magic/index.vue | 18 +++++++++--------- vite.config.ts | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/model-hot-zone/index.vue b/src/components/model-hot-zone/index.vue index 608bb0a4..be21a435 100644 --- a/src/components/model-hot-zone/index.vue +++ b/src/components/model-hot-zone/index.vue @@ -48,7 +48,6 @@ watch( // 坐标缩小比例 containerRef的宽高除以hotRef的宽高 w_scale2.value = hotRef.value?.clientWidth / containerRef.value?.clientWidth; h_scale2.value = hotRef.value?.clientHeight / containerRef.value?.clientHeight; - console.log(containerRef.value?.clientHeight); } }, 50); }, diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue index abbe4ef9..00bba6c6 100644 --- a/src/components/model-img-magic/index.vue +++ b/src/components/model-img-magic/index.vue @@ -34,7 +34,7 @@ const props = defineProps({ default: () => { return {}; }, - } + }, }); // 用于页面判断显示 const state = reactive({ @@ -44,9 +44,9 @@ const state = reactive({ // 如果需要解构，确保使用toRefs const { form, new_style } = toRefs(state); const outer_spacing = computed(() => new_style.value.image_spacing + 'px'); -const outer_sx = computed(() => - (new_style.value.image_spacing / 2) + 'px'); +const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px'); // 图片间距设置 -const spacing = computed(() => (new_style.value.image_spacing / 2) + 'px'); +const spacing = computed(() => new_style.value.image_spacing / 2 + 'px'); // 图片圆角设置 const content_img_radius = computed(() => radius_computer(new_style.value)); //#region 容器大小计算 @@ -55,7 +55,7 @@ const container_size = computed(() => div_width.value + 'px'); const container = ref(null); onMounted(() => { if (container.value) { - div_width.value = container.value.offsetWidth; + div_width.value = container.value.clientWidth; } }); //#endregion @@ -94,13 +94,13 @@ const getSelectedLeft = (item: CubeItem) => { }; // 根据当前页面大小计算成百分比 const selected_style = (item: CubeItem) => { - return `width: ${ percentage(getSelectedWidth(item)) }; height: ${ percentage(getSelectedHeight(item)) }; top: ${ percentage(getSelectedTop(item)) }; left: ${ percentage(getSelectedLeft(item)) };`; + 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)+ '%'; -} + const marks = (num / div_width.value) * 100; + return marks.toFixed(4) + '%'; +}; //#endregion // 公共样式 const style_container = computed(() => common_styles_computer(new_style.value.common_style)); @@ -108,8 +108,8 @@ const style_container = computed(() => common_styles_computer(new_style.value.co