From 91dad75bf259f30e766215ab1140e796fbf66ae9 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:18:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                            |  4 ++--
 components/diy/custom.vue                          | 11 +++++++++--
 components/diy/diy.vue                             |  4 ++--
 components/diy/modules/data-magic/custom/index.vue | 10 +++++++---
 pages/diy/diy.vue                                  |  8 +++++++-
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/App.vue b/App.vue
index 48913d0e..ec49277d 100644
--- a/App.vue
+++ b/App.vue
@@ -7,10 +7,10 @@
             data: {
                 // 基础配置
                 // 数据接口请求地址
-                request_url:'https://new.shopxo.vip/',
+                request_url:'http://shopxo.com/',
 
                 // 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
-                static_url:'https://new.shopxo.vip/',
+                static_url:'http://shopxo.com/',
 
                 // 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
                 system_type: 'default',
diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index 2fd25ca7..fc81dc56 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -190,9 +190,16 @@
                 // 数组处理
                 const new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
                 // 初始化数据
-                const { margin_left = 0, margin_right = 0, padding_left = 0, padding_right = 0 } = new_style.common_style;
+                const { common_style, data_content_style, data_style } = new_style;
+                // 外层左右间距
+                const outer_spacing = (common_style?.margin_left || 0) + (common_style?.margin_right || 0) + (common_style?.padding_left || 0) + (common_style?.padding_right || 0);
+                // 内容左右间距
+                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);
+                // 数据左右间距
+                const internal_spacing = (data_style?.margin_left || 0) + (data_style?.margin_right || 0) + (data_style?.padding_left || 0) + (data_style?.padding_right || 0);
                 // 自定义组件宽度
-                const width = sys_width - margin_left - margin_right - padding_left - padding_right - this.propOuterContainerPadding;
+                const width = sys_width - outer_spacing - content_spacing - internal_spacing - this.propOuterContainerPadding;
+
                 const new_data_style = !isEmpty(new_style.data_style) ? new_style.data_style : this.old_data_style;
                 const new_data_content_style = !isEmpty(new_style.data_content_style)? new_style.data_content_style : this.old_data_style;
                 // 判断是平移还是整屏滚动
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index f7581d6a..b0a571ae 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -1,7 +1,7 @@
 <template>
     <view :style="page_style">
         <view :style="page_img_style">
-            <scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event" @scrolltolower="on_scroll_lower_event" lower-threshold="60" scroll-with-animation>
+            <scroll-view :scroll-y="true" class="ht scroll-view" @scroll="on_scroll_event" @scrolltolower="on_scroll_lower_event" lower-threshold="60" scroll-with-animation>
                 <!-- 头部小程序兼容 -->
                 <view class="pr header">
                     <componentDiyHeader :propKey="header_data.id" :propValue="header_data.com_data" :propScrollTop="head_scroll_top" @onImmersionModelCallBack="immersion_model_call_back" @onLocationBack="choice_location_back"></componentDiyHeader>
@@ -661,4 +661,4 @@
     };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/components/diy/modules/data-magic/custom/index.vue b/components/diy/modules/data-magic/custom/index.vue
index e5024d61..f70e7ca3 100644
--- a/components/diy/modules/data-magic/custom/index.vue
+++ b/components/diy/modules/data-magic/custom/index.vue
@@ -137,7 +137,7 @@ export default {
             if (!isEmpty(this.propValue)) {
                 const new_form = this.propValue.data_content;
                 const new_style = this.propValue.data_style;
-                const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }, data_chunk_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 } } = new_style;
+                const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }, data_chunk_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 }, data_content_style = {} } = new_style;
                 const style_data = {
                     color_list: data_color_list,
                     direction: data_direction,
@@ -166,8 +166,12 @@ export default {
                 // 计算宽度
                 const { padding_left, padding_right, padding_top, padding_bottom } = data_chunk_padding;
                 const { margin_left, margin_right, margin_bottom, margin_top } = data_chunk_margin;
-                const width = new_form.width - padding_left - padding_right - margin_left - margin_right - (this.propDataSpacing / 2);
-                const new_scale = (width / new_form.width) * this.propMagicScale;
+                const old_width = new_form.width * this.propMagicScale;
+                // 内容左右间距
+                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);
+                const width = old_width - padding_left - padding_right - margin_left - margin_right - content_spacing - (this.propDataSpacing / 2);
+                // 计算缩放比例
+                const new_scale = width / old_width;
                 // 间距
                 const space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
                 // 判断是平移还是整屏滚动
diff --git a/pages/diy/diy.vue b/pages/diy/diy.vue
index 8412ea6c..9d6ae35f 100644
--- a/pages/diy/diy.vue
+++ b/pages/diy/diy.vue
@@ -187,4 +187,10 @@
         },
     };
 </script>
-<style></style>
+<style scoped lang="scss">
+::v-deep ::-webkit-scrollbar {
+    /* 滚动条整体样式 */  
+    display: block !important;  
+    width: 0rpx;
+}
+</style>