From 462bd52038ab38fcb9d95a70e31b87721f53e69a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 2 Jan 2025 11:49:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BF=81=E7=A7=BB=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/carousel/magic-carousel.vue               | 4 ++--
 .../components/carousel/product-list-show.vue            | 8 +-------
 .../model-data-magic/components/custom/index.vue         | 9 ++++-----
 .../components/magic-cube-settings/tabs-styles.vue       | 6 +++---
 src/components/model-data-magic/index.vue                | 5 ++---
 5 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/components/model-data-magic/components/carousel/magic-carousel.vue b/src/components/model-data-magic/components/carousel/magic-carousel.vue
index 36b5cf8c..83139b25 100644
--- a/src/components/model-data-magic/components/carousel/magic-carousel.vue
+++ b/src/components/model-data-magic/components/carousel/magic-carousel.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { gradient_computer, radius_computer, padding_computer, background_computer, margin_computer, box_shadow_computer, border_computer, old_radius, old_margin, old_padding } from "@/utils";
+import { gradient_computer, radius_computer, padding_computer, background_computer, margin_computer, box_shadow_computer, border_computer, old_radius, old_margin, old_padding, old_border_and_box_shadow } from "@/utils";
 import { isEmpty } from "lodash";
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -36,7 +36,7 @@ const form = computed(() => props.value);
 // 用于样式显示
 const style_container = computed(() => {
     if (!isEmpty(form.value.data_style)) {
-        const { data_color_list = [], data_direction = '180deg', data_chunk_margin = old_margin, data_radius = old_radius, data_pattern = { border_is_show: '0', border_color: '#FF3F3F', border_style: 'solid', border_size: { padding: 1, padding_top: 1, padding_right: 1, padding_bottom: 1, padding_left: 1 }, box_shadow_color: '', box_shadow_x: 0, box_shadow_y: 0, box_shadow_blur: 0, box_shadow_spread: 0 } } = form.value.data_style;
+        const { data_color_list = [], data_direction = '180deg', data_chunk_margin = old_margin, data_radius = old_radius, data_pattern = old_border_and_box_shadow } = form.value.data_style;
         const data = {
             color_list: data_color_list,
             direction: data_direction,
diff --git a/src/components/model-data-magic/components/carousel/product-list-show.vue b/src/components/model-data-magic/components/carousel/product-list-show.vue
index 3b424573..0a451c8a 100644
--- a/src/components/model-data-magic/components/carousel/product-list-show.vue
+++ b/src/components/model-data-magic/components/carousel/product-list-show.vue
@@ -173,13 +173,7 @@ const style_container = computed(() => {
                 color_list: goods_color_list,
                 direction: goods_direction,
             }
-            const borderData = {
-                border_is_show: val.border_is_show,
-                border_color: val.border_color,
-                border_style: val.border_style,
-                border_size: val.border_size,
-            };
-            return gradient_computer(data) + radius_computer(goods_radius) + margin_computer(goods_chunk_margin) + border_computer(borderData) + box_shadow_computer(val);
+            return gradient_computer(data) + radius_computer(goods_radius) + margin_computer(goods_chunk_margin) + border_computer(val) + box_shadow_computer(val);
         } else {
             return '';
         }
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index 094383c9..98e943d1 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -34,7 +34,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, border_computer, border_width, box_shadow_computer, common_img_computer, common_styles_computer, get_math, gradient_computer, margin_computer, old_margin, old_padding, old_radius, padding_computer, radius_computer } from '@/utils';
+import { background_computer, border_computer, border_width, box_shadow_computer, common_img_computer, common_styles_computer, get_math, gradient_computer, margin_computer, old_border_and_box_shadow, old_margin, old_padding, old_radius, padding_computer, radius_computer } from '@/utils';
 import { isEmpty } from "lodash";
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -131,7 +131,7 @@ const style_content_img_container = computed(() => {
 // 用于样式显示
 const style_container = computed(() => {
     if (!isEmpty(new_style.value)) {
-        const { data_color_list = [], data_direction = '180deg', data_radius = old_radius, data_chunk_margin = old_margin, data_pattern = { border_is_show: '0', border_color: '#FF3F3F', border_style: 'solid', border_size: { padding: 1, padding_top: 1, padding_right: 1, padding_bottom: 1, padding_left: 1 }, box_shadow_color: '', box_shadow_x: 0, box_shadow_y: 0, box_shadow_blur: 0, box_shadow_spread: 0 }} = new_style.value;
+        const { data_color_list = [], data_direction = '180deg', data_radius = old_radius, data_chunk_margin = old_margin, data_pattern = old_border_and_box_shadow } = new_style.value;
         const data = {
             color_list: data_color_list,
             direction: data_direction,
@@ -162,7 +162,7 @@ watchEffect(() => {
     // 数据样式
     const { padding_left, padding_right } = new_style.value.data_chunk_padding;
     const { margin_left, margin_right } = new_style.value.data_chunk_margin;
-    const data_style = padding_left - padding_right - margin_left - margin_right- border_width(new_style.value.data_pattern);
+    const data_style = padding_left + padding_right + margin_left + margin_right + border_width(new_style.value.data_pattern);
     // 通用样式
     const common_border = new_style.value?.data_common_style || {};
     const chunk_padding = new_style.value?.chunk_padding || old_padding;
@@ -173,8 +173,7 @@ watchEffect(() => {
     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) + border_width(data_content_style);
     // 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
     const width = old_width - data_style - content_spacing - common_styles - (props.dataSpacing / 2);
-
-    scale.value = width / old_width;
+    scale.value = width / form.value.width;
 })
 
 // 计算纵向显示的宽度
diff --git a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
index 77cac5b6..3a8f0f86 100644
--- a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
@@ -71,13 +71,13 @@
                 <background-common :key="form.carouselKey" v-model:color_list="form.data_color_list" v-model:direction="form.data_direction" v-model:img_style="form.data_background_img_style" v-model:img="form.data_background_img" @mult_color_picker_event="data_mult_color_picker_event" />
             </el-form-item>
             <el-form-item label="外间距">
-                <margin :key="form.carouselKey" :value="form.data_chunk_margin" @update:value="data_chunk_margin_change"></margin>
+                <margin :key="form.carouselKey" :value="form.data_chunk_margin"></margin>
             </el-form-item>
             <el-form-item label="内间距">
-                <padding :key="form.carouselKey" :value="form.data_chunk_padding" @update:value="data_chunk_padding_change"></padding>
+                <padding :key="form.carouselKey" :value="form.data_chunk_padding"></padding>
             </el-form-item>
             <el-form-item label="圆角">
-                <radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
+                <radius :key="form.carouselKey" :value="form.data_radius"></radius>
             </el-form-item>
             <el-form-item v-if="tabs_content.data_type == 'custom'" label="数据间距">
                 <div class="flex-col w h gap-10">
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index b8c28244..dc76a732 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -455,13 +455,12 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
 // 图片魔方的缩放比例
 const magic_scale = ref(1);
-const typewidth = ref(0);
 watchEffect(() => {
     const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
     // 根据容器宽度来计算内部大小
-    typewidth.value = 390 - margin_left - margin_right - padding_left - padding_right - border_width(new_style.value.common_style) - props.outerContainerPadding;
+    const typewidth = 390 - margin_left - margin_right - padding_left - padding_right - border_width(new_style.value.common_style) - props.outerContainerPadding;
     // 获得对应宽度的比例
-    magic_scale.value = typewidth.value / 390;
+    magic_scale.value = typewidth / 390;
 });
 </script>
 <style lang="scss" scoped>