diff --git a/components/diy/custom.vue b/components/diy/custom.vue
index cb97fe99..55667878 100644
--- a/components/diy/custom.vue
+++ b/components/diy/custom.vue
@@ -2,19 +2,23 @@
     <view :style="style_container">
         <view class="w h re" :style="style_img_container">
             <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
-                <view v-for="(item, index) in data_source_content_list" :key="index">
-                    <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container">
-                        <view class="wh-auto ht-auto" :style="style_chunk_img_container">
-                            <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+                <view class="flex-row flex-wrap" :style="'row-gap:' + new_style.row_gap + 'px;column-gap:' + new_style.column_gap + 'px;'">
+                    <view v-for="(item, index) in data_source_content_list" :key="index" class="ht-auto" :style="gap_width">
+                        <view v-for="(item1, index1) in item.split_list" :key="index1">
+                            <view :style="style_chunk_container">
+                                <view class="wh-auto ht-auto" :style="style_chunk_img_container">
+                                    <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+                                </view>
+                            </view>
                         </view>
                     </view>
                 </view>
             </template>
             <div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
-                <swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'"  :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
+                <swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :next-margin="form.data_source_direction != 'horizontal' ? '0rpx' : '-' + content_outer_spacing_magin" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
                     <swiper-item v-for="(item, index) in data_source_content_list" :key="index">
-                        <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
-                            <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width">
+                        <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'margin-right:' + content_outer_spacing_magin : ''">
+                            <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width + (form.data_source_direction == 'horizontal' ? '' : 'margin-bottom:' + content_outer_spacing_magin)"">
                                 <div class="w h" :style="style_chunk_img_container">
                                     <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                                 </div>
@@ -130,7 +134,9 @@
                     margin_bottom: 0,
                     margin_left: 0,
                     margin_right: 0,
-                }
+                },
+                content_outer_spacing_magin: '0rpx',
+                gap_width: '',
             };
         },
         watch: {
@@ -173,9 +179,12 @@
                     }
                 } else {
                     list = new_form.data_source_content?.data_list || [];
-                }   
+                } 
+                // 数组处理
                 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 width = sys_width - margin_left - margin_right - padding_left - padding_right - this.propOuterContainerPadding;
                 const new_data_style = !isEmpty(new_style.data_style) ? new_style.data_style : this.old_data_style;
                 // 判断是平移还是整屏滚动
@@ -183,12 +192,18 @@
                 let swiper_height = 0;
                 // 商品数量大于列数的时候，高度是列数，否则是当前的数量
                 const col = new_list.length > Number(new_form.data_source_carousel_col) ? Number(new_form.data_source_carousel_col) : new_list.length;
+                // 间距
+                const space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
                 // 轮播图高度控制
                 if (new_form.data_source_direction == 'horizontal') {
                     swiper_height = new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top;
                 } else {
-                    swiper_height = (new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top) * col;
+                    swiper_height = (new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((Number(new_form.data_source_carousel_col) - 1) * space_between);
                 }
+                // 拿到对应的数量
+                const model_number = Number(new_form.data_source_carousel_col);
+                // 计算间隔的空间。(gap * gap数量) / 模块数量
+                let gap = (new_style.column_gap * (model_number - 1)) / model_number;
                 // 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
                 const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
                 this.setData({
@@ -209,6 +224,8 @@
                     indicator_location_style: get_indicator_location_style(new_style),
                     swiper_height: swiper_height,
                     swiper_width: swiper_width,
+                    content_outer_spacing_magin: space_between + 'px',
+                    gap_width: `width: calc(${100 / model_number}% - ${gap}px);`,
                     slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col ) : 1,
                     show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
                 });
@@ -216,7 +233,7 @@
             get_list(list, form, new_style) {
                 // 深拷贝一下，确保不会出现问题
                 const cloneList = JSON.parse(JSON.stringify(list));
-                if (new_style.rolling_fashion != 'translation') {
+                if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
                     // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
                     if (cloneList.length > 0) {
                         // 每页显示的数量
diff --git a/components/diy/header.vue b/components/diy/header.vue
index 2a719549..d27ce965 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -51,7 +51,7 @@
                                             <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c">
                                                 <view v-if="form.content.positioning_name_float !== '1'" class="flex-row align-c gap-2">
                                                     <view :style="location_margin">
-                                                        <component-choice-location :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIconLocationSize="location_left_size" :propIconArrowSize="location_right_size" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="['4'].includes(form.content.theme) ? '300rpx' : '150rpx'" @onBack="choice_location_back"></component-choice-location>
+                                                        <component-choice-location :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIconLocationSize="location_left_size" :propIconArrowSize="location_right_size" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="location_name_style" @onBack="choice_location_back"></component-choice-location>
                                                     </view>
                                                 </view>
                                                 <template v-if="['5'].includes(form.content.theme) && !is_search_alone_row">
@@ -73,7 +73,7 @@
                                         <view v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
                                             <template v-if="['3', '5'].includes(form.content.theme) && is_search_alone_row">
                                                 <view class="flex-1">
-                                                    <componentDiySearch :propValue="form" :propIsPageSettings="true"></componentDiySearch>
+                                                    <componentDiySearch :propValue="form" :propIsPageSettings="true" :propLocationMargin="location_margin" propSearchType="header" :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propIconLocationSize="location_left_size" :propIconArrowSize="location_right_size" @onBack="choice_location_back"></componentDiySearch>
                                                 </view>
                                             </template>
                                             <view v-if="!isEmpty(form.content.icon_setting) && is_icon_alone_row" class="flex-row align-c z-i" :class="['1'].includes(form.content.theme) ? 'right-0' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
@@ -193,6 +193,7 @@
                 location_right_size: '24rpx',
                 location_margin: '', // 悬浮之后有间距，所以要将margin设置成外padding
                 location_color: '', // 定位颜色
+                location_name_style: '', // 定位样式
                 // 默认数据
                 old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
                 old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
@@ -281,10 +282,26 @@
                     location_left_size: !isEmpty(new_style.location_left_icon_size) ? new_style.location_left_icon_size * 2 + 'rpx' : '24rpx',
                     location_right_size: !isEmpty(new_style.location_right_icon_size) ? new_style.location_right_icon_size * 2 + 'rpx' : '24rpx',
                     location_color: !isEmpty(new_style.location_color) ? new_style.location_color : new_style?.position_color || '',
+                    location_name_style: this.get_location_name_style(new_content),
                     location_margin: `padding: ${location_margin.margin_top * 2}rpx ${location_margin.margin_right * 2}rpx ${location_margin.margin_bottom * 2}rpx ${location_margin.margin_left * 2}rpx;`, // 悬浮之后有间距，所以要将margin设置成外padding
                 });
                 this.$emit('onImmersionModelCallBack', this.is_immersion_model);
             },
+            get_location_name_style (new_content) {
+                const is_search_alone_row = new_content.data_alone_row_value && new_content.data_alone_row_value.includes('search');
+                const is_icon_alone_row = new_content.data_alone_row_value && new_content.data_alone_row_value.includes('icon');
+                let width = 0;
+                if (is_search_alone_row && is_icon_alone_row) {
+                    width = 200;
+                } else if (is_search_alone_row || is_icon_alone_row) {
+                    width = 100;
+                }
+                if (new_content.theme == '4') {
+                    return `${ (150 + width) * 2 }rpx;`;
+                } else {
+                    return `${ (100 + width) * 2 }rpx;`;
+                }
+            },
             // 定位设置
             get_style_location_container(new_style) {
                 const  { location_margin = this.old_margin,  location_radius = this.old_radius} = new_style;
diff --git a/components/diy/modules/data-magic/custom/index.vue b/components/diy/modules/data-magic/custom/index.vue
index c67e1844..25b5e176 100644
--- a/components/diy/modules/data-magic/custom/index.vue
+++ b/components/diy/modules/data-magic/custom/index.vue
@@ -1,19 +1,22 @@
 <template>
     <view v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
-        <view v-for="(item, index) in data_source_content_list" :key="index">
-            <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container">
-                <view class="custom-container wh-auto ht-auto" :style="style_img_container">
-                    <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+        <view class="flex-row flex-wrap" :style="'row-gap:' + new_style.row_gap + 'px;column-gap:' + new_style.column_gap + 'px;'">
+            <view v-for="(item, index) in data_source_content_list" :key="index" class="ht-auto" :style="gap_width">
+                <view v-for="(item1, index1) in item.split_list" :key="index1">
+                    <view :style="style_container">
+                        <view class="custom-container wh-auto ht-auto" :style="style_img_container">
+                            <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
+                        </view>
+                    </view>
                 </view>
             </view>
-            
         </view>
     </view>
     <div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
-        <swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'"  :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
+        <swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :next-margin="form.data_source_direction != 'horizontal' ? '0rpx' : '-' + content_outer_spacing_magin"  :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
             <swiper-item v-for="(item, index) in data_source_content_list" :key="index">
-                <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
-                    <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width">
+                <view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'margin-right:' + content_outer_spacing_magin : ''">
+                    <view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width + (form.data_source_direction == 'horizontal' ? '' : 'margin-bottom:' + content_outer_spacing_magin)">
                         <div class="w h" :style="style_img_container">
                             <dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
                         </div>
@@ -82,6 +85,8 @@ export default {
             swiper_height: 0,
             swiper_width: 'width: 100%;',
             show_data: { data_key: 'id', data_name: 'name' },
+            gap_width: '',
+            content_outer_spacing_magin: '0rpx',
         };
     },
     watch: {
@@ -136,6 +141,8 @@ export default {
                 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 space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
                 // 判断是平移还是整屏滚动
                 let swiper_height = 0;
                 // 商品数量大于列数的时候，高度是列数，否则是当前的数量
@@ -144,8 +151,12 @@ export default {
                 if (new_form.data_source_direction == 'horizontal') {
                     swiper_height = new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top;
                 } else {
-                    swiper_height = (new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top) * col;
+                    swiper_height = (new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((Number(new_form.data_source_carousel_col) - 1) * space_between);
                 }
+                // 拿到对应的数量
+                const model_number = Number(new_form.data_source_carousel_col);
+                // 计算间隔的空间。(gap * gap数量) / 模块数量
+                let gap = (new_style.column_gap * (model_number - 1)) / model_number;
                 // 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
                 const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
                 this.setData({
@@ -161,14 +172,16 @@ export default {
                     slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col) : 1,
                     swiper_height: swiper_height,
                     swiper_width: swiper_width,
-                    show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
+                    show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' },
+                    content_outer_spacing_magin: space_between + 'px',
+                    gap_width: `width: calc(${100 / model_number}% - ${gap}px);`,
                 });
             }
         },
         get_list(list, form, new_style) {
             // 深拷贝一下，确保不会出现问题
             const cloneList = JSON.parse(JSON.stringify(list));
-            if (new_style.rolling_fashion != 'translation') {
+            if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
                 // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
                 if (cloneList.length > 0) {
                     // 每页显示的数量
diff --git a/components/diy/search.vue b/components/diy/search.vue
index 1bf127f8..58b69cca 100644
--- a/components/diy/search.vue
+++ b/components/diy/search.vue
@@ -4,7 +4,7 @@
             <view class="search wh-auto pr">
                 <view class="box oh flex-row align-c" :style="box_style">
                     <view v-if="form.positioning_name_float == '1' && propSearchType == 'header'" :style="propLocationMargin">
-                        <component-choice-location propType="search" :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '150rpx'" @onBack.stop="choice_location_back"></component-choice-location>
+                        <component-choice-location propType="search" :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '200rpx'" @onBack.stop="choice_location_back"></component-choice-location>
                     </view>
                     <view :class="'oh flex-1 ht-auto flex-row align-c gap-10' + (form.is_center == '1' ? ' tips-float' : '')" @tap.stop="search_tap">
                         <view v-if="form.is_icon_show == '1'" class="pr">