diff --git a/src/components/common/carousel-indicator/index.vue b/src/components/common/carousel-indicator/index.vue
index e1ad9a01..8abd7812 100644
--- a/src/components/common/carousel-indicator/index.vue
+++ b/src/components/common/carousel-indicator/index.vue
@@ -4,6 +4,21 @@
         <el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
     </el-form-item>
     <template v-if="form.is_show == '1'">
+        <el-form-item label="位置">
+            <el-radio-group v-model="form.indicator_new_location">
+                <el-radio value="top">上</el-radio>
+                <el-radio value="bottom">下</el-radio>
+                <el-radio value="left">左</el-radio>
+                <el-radio value="right">右</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="对齐方式">
+            <el-radio-group v-model="form.indicator_location">
+                <el-radio value="flex-start">{{ ['left', 'right'].includes(form.indicator_new_location) ? '上' : '左' }}对齐</el-radio>
+                <el-radio value="center">居中</el-radio>
+                <el-radio value="flex-end">{{ ['left', 'right'].includes(form.indicator_new_location) ? '下' : '右' }}对齐</el-radio>
+            </el-radio-group>
+        </el-form-item>
         <el-form-item label="样式">
             <el-radio-group v-model="form.indicator_style" is-button>
                 <el-tooltip content="点" placement="top" effect="light">
@@ -17,19 +32,6 @@
                 </el-tooltip>
             </el-radio-group>
         </el-form-item>
-        <el-form-item label="位置">
-            <el-radio-group v-model="form.indicator_location" is-button>
-                <el-tooltip content="左对齐" placement="top" effect="light">
-                    <el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
-                </el-tooltip>
-                <el-tooltip content="居中" placement="top" effect="light">
-                    <el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
-                </el-tooltip>
-                <el-tooltip content="右对齐" placement="top" effect="light">
-                    <el-radio-button value="flex-end"><icon name="iconfont icon-right"></icon></el-radio-button>
-                </el-tooltip>
-            </el-radio-group>
-        </el-form-item>
         <el-form-item label="色值">
             <div class="flex-col gap-20">
                 <div class="flex-row gap-20"><span class="size-12 cr-9">选中样式</span><color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker></div>
@@ -39,7 +41,7 @@
         <el-form-item label="大小">
             <slider v-model="form.indicator_size" :max="100"></slider>
         </el-form-item>
-        <el-form-item v-if="isIndicatorBottom" label="下边距">
+        <el-form-item v-if="isIndicatorBottom" label="边距">
             <slider v-model="form.indicator_bottom" :min="0" :max="100"></slider>
         </el-form-item>
         <el-form-item v-if="form.indicator_style != 'num'" label="圆角">
diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 7b5744c6..cb8e7164 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -19,7 +19,7 @@
                     </div>
                 </el-form-item>
                 <el-form-item v-if="isFloatingUp" label="组件上浮">
-                    <slider v-model="form.floating_up" :min="0" :max="200"></slider>
+                    <slider v-model="form.floating_up" :min="0" :max="500"></slider>
                 </el-form-item>
                 <el-form-item v-if="isFloatingUp" label="组件层级">
                     <slider v-model="form.module_z_index" :min="0" :max="10"></slider>
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 51366188..a11c7b7c 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -58,7 +58,7 @@
                         </div>
                     </swiper-slide>
                 </swiper>
-                <div v-if="new_style.is_show == '1'" :class="{'x-middle': new_style.indicator_location == 'center', 'right-0': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
+                <div v-if="new_style.is_show == '1'" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
                     <template v-if="new_style.indicator_style == 'num'">
                         <div :style="indicator_style" class="dot-item">
                             <span class="num-active">{{ actived_index + 1 }}</span><span>/{{ form.carousel_list.length }}</span>
@@ -101,6 +101,9 @@ const style_img_container = computed(() => props.isCommon ? common_img_computer(
 const autoplay = ref<boolean | object>(false)
 // 图片的设置
 const img_style = computed(() => radius_computer(new_style.value) );
+//#region 指示器处理
+// 指示器选中样式
+const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF' );
 // 指示器的样式
 const indicator_style = computed(() => {
     let indicator_styles = '';
@@ -113,13 +116,43 @@ const indicator_style = computed(() => {
         indicator_styles += `font-size: ${size}px;`;
     } else if (new_style.value.indicator_style == 'elliptic') {
         indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
-        indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
+        if (['left', 'right'].includes(new_style.value.indicator_new_location)) {
+            indicator_styles += `width: ${ size }px; height: ${size * 3}px;`;
+        } else {
+            indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
+        }
     } else {
         indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
         indicator_styles += `width: ${size}px; height: ${size}px;`;
     }
     return indicator_styles;
 });
+// 根据指示器的位置来处理 对齐方式的处理
+const indicator_location_style = computed(() => {
+    const { indicator_new_location,  indicator_location, indicator_bottom } = new_style.value;
+    let styles = '';
+    if (['left', 'right'].includes(indicator_new_location)) {
+        if (indicator_location == 'flex-start') {
+            styles += `top: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `top: 50%; transform: translateY(-50%);`;
+        } else {
+            styles += `bottom: 0px;`;
+        }
+    } else {
+        if (indicator_location == 'flex-start') {
+            styles += `left: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `left: 50%; transform: translateX(-50%);`;
+        } else {
+            styles += `right: 0px;`;
+        }
+    }
+    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
+    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
+    return styles;
+});
+//#endregion
 const seat_list = computed(() => {
     if (form.value.carousel_list.length > 3) {
         return [];
@@ -150,8 +183,6 @@ const interval_type = ref('');
 const carouselKey = ref('0');
 // 轮播图滚动位置
 const actived_index = ref(0);
-// 轮播图显示样式
-const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF' );
 const img_fit = computed(() => form.value.img_fit );
 // 记录当前显示的轮播图的数据
 const interval_list = ref({
@@ -268,18 +299,12 @@ const slideChange = (swiper: { realIndex: number }) => {
 }
 </script>
 <style lang="scss" scoped>
-.dot {
-    z-index: 1;
-    padding-right: 10px;
-    padding-left: 10px;
-    .dot-item {
-        margin: 0 0.3rem;
-        &.active {
-            background: v-bind(actived_color) !important;
-        }
-        .num-active {
-            color: v-bind(actived_color) !important;
-        }
+.dot-item {
+    &.active {
+        background: v-bind(actived_color) !important;
+    }
+    .num-active {
+        color: v-bind(actived_color) !important;
     }
 }
 
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 80409b86..d5662ab3 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -1,94 +1,44 @@
 <template>
-    <template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
-        <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
-            <div class="w h" :style="style_img_container">
-                <div class="w h re custom-other">
-                    <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
-                        <template v-if="item.key == 'text'">
-                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
-                        </template>
-                        <template v-else-if="item.key == 'img'">
-                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
-                        </template>
-                        <template v-else-if="item.key == 'auxiliary-line'">
-                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
-                        </template>
-                        <template v-else-if="item.key == 'icon'">
-                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
-                        </template>
-                        <template v-else-if="item.key == 'panel'">
-                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
-                        </template>
+    <div :style="style_container">
+        <div class="w h re" :style="style_img_container">
+            <template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
+                <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_chunk_container">
+                    <div class="w h" :style="style_chunk_img_container">
+                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
                     </div>
                 </div>
-            </div>
-        </div>
-    </template>
-    <div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="re oh" :style="form.data_source_direction == '1' ? `height:100%;` : `height: ${ swiper_height }px;`">
-        <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '1' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
-            <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
-                <div :style="style_container">
-                    <div class="w h" :style="style_img_container">
-                        <div class="w re custom-other">
-                            <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
-                                <template v-if="item.key == 'text'">
-                                    <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
-                                </template>
-                                <template v-else-if="item.key == 'img'">
-                                    <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
-                                </template>
-                                <template v-else-if="item.key == 'auxiliary-line'">
-                                    <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
-                                </template>
-                                <template v-else-if="item.key == 'icon'">
-                                    <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
-                                </template>
-                                <template v-else-if="item.key == 'panel'">
-                                    <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
-                                </template>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </swiper-slide>
-        </swiper>
-        <div v-if="new_style.is_show == '1' && dot_list.length > 0" :class="{'x-middle': new_style.indicator_location == 'center', 'right-0': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
-            <template v-if="new_style.indicator_style == 'num'">
-                <div :style="indicator_style" class="dot-item">
-                    <span class="num-active">{{ actived_index + 1 }}</span
-                    ><span>/{{ dot_list.length }}</span>
-                </div>
             </template>
+            <div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == '2' ? `height:100%;` : `height: ${ swiper_height }px;`">
+                <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '2' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
+                    <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
+                        <div :style="style_chunk_container">
+                            <div class="w h" :style="style_chunk_img_container">
+                                <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
+                            </div>
+                        </div>
+                    </swiper-slide>
+                </swiper>
+                <div v-if="new_style.is_show == '1' && dot_list.length > 0" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
+                    <template v-if="new_style.indicator_style == 'num'">
+                        <div :style="indicator_style" class="dot-item">
+                            <span class="num-active">{{ actived_index + 1 }}</span><span>/{{ dot_list.length }}</span>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
+                    </template>
+                </div>
+            </div>
             <template v-else>
-                <div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
+                <div :style="style_chunk_container">
+                    <div class="w h" :style="style_chunk_img_container">
+                        <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
+                    </div>
+                </div>
             </template>
         </div>
     </div>
-    <template v-else>
-        <div :style="style_container">
-            <div class="w h" :style="style_img_container">
-                <div class="w h re custom-other">
-                    <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
-                        <template v-if="item.key == 'text'">
-                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
-                        </template>
-                        <template v-else-if="item.key == 'img'">
-                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
-                        </template>
-                        <template v-else-if="item.key == 'auxiliary-line'">
-                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
-                        </template>
-                        <template v-else-if="item.key == 'icon'">
-                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
-                        </template>
-                        <template v-else-if="item.key == 'panel'">
-                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
-                        </template>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
+    
 </template>
 <script setup lang="ts">
 import { isEmpty, cloneDeep } from 'lodash';
@@ -135,16 +85,14 @@ onBeforeMount(() => {
     }
 });
 //#region 计算比例大小，和每块当前的大小
-const custom_height = computed(() => form.value.height * scale.value + 'px');
 const scale = ref(1);
-const percentage_count = (val: number) => {
-    return val * scale.value + 'px';
-};
 // 计算整体宽度和比例
 watchEffect(() => {
-    const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
+    const { common_style, data_style } = new_style.value;
+    const outer_spacing = common_style.margin_left + common_style.margin_right + common_style.padding_left + common_style.padding_right;
+    const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right;
     // 根据容器宽度来计算内部大小
-    const width = 390 - margin_left - margin_right - padding_left - padding_right - props.outerContainerPadding;
+    const width = 390 - outer_spacing - internal_spacing - props.outerContainerPadding;
     // 获得对应宽度的比例
     scale.value = width / 390;
 });
@@ -153,6 +101,9 @@ watchEffect(() => {
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
 
+const style_chunk_container = computed(() => common_styles_computer(new_style.value.data_style));
+const style_chunk_img_container = computed(() => common_img_computer(new_style.value.data_style));
+
 // 数据来源的内容
 let data_source_content_list = computed(() => {
     if (['goods', 'article', 'brand'].includes(form.value.data_source)) {
@@ -191,9 +142,9 @@ watchEffect(() => {
     // 判断是平移还是整屏滚动
     slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.data_source_carousel_col;
     const num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / form.value.data_source_carousel_col);
-    const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.common_style;
+    const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
     // 轮播图高度控制
-    if (form.value.data_source_direction == '1') {
+    if (form.value.data_source_direction == '2') {
         swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
     } else {
         swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * form.value.data_source_carousel_col;
@@ -215,7 +166,11 @@ const indicator_style = computed(() => {
         indicator_styles += `font-size: ${size}px;`;
     } else if (new_style.value.indicator_style == 'elliptic') {
         indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
-        indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
+        if (['left', 'right'].includes(new_style.value.indicator_new_location)) {
+            indicator_styles += `width: ${ size }px; height: ${size * 3}px;`;
+        } else {
+            indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
+        }
     } else {
         indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
         indicator_styles += `width: ${size}px; height: ${size}px;`;
@@ -228,27 +183,41 @@ const slideChange = (swiper: { realIndex: number }) => {
     actived_index.value = new_style.value.rolling_fashion == 'translation' ? swiper.realIndex : (swiper.realIndex / form.value.data_source_carousel_col) > 0 ? (swiper.realIndex / form.value.data_source_carousel_col) : 0;
 };
 //#endregion
-</script>
-<style lang="scss" scoped>
-.custom-other {
-    height: v-bind(custom_height);
-}
-.dot {
-    z-index: 1;
-    padding-right: 10px;
-    padding-left: 10px;
-    .dot-item {
-        margin: 0 0.3rem;
-        &.active {
-            background: v-bind(actived_color) !important;
+//#region 指示器位置
+// 根据指示器的位置来处理 对齐方式的处理
+const indicator_location_style = computed(() => {
+    const { indicator_new_location,  indicator_location, indicator_bottom } = new_style.value;
+    let styles = '';
+    if (['left', 'right'].includes(indicator_new_location)) {
+        if (indicator_location == 'flex-start') {
+            styles += `top: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `top: 50%; transform: translateY(-50%);`;
+        } else {
+            styles += `bottom: 0px;`;
         }
-        .num-active {
-            color: v-bind(actived_color) !important;
+    } else {
+        if (indicator_location == 'flex-start') {
+            styles += `left: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `left: 50%; transform: translateX(-50%);`;
+        } else {
+            styles += `right: 0px;`;
         }
     }
-}
-.main-content {
-    position: absolute;
-    overflow: hidden;
+    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
+    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
+    return styles;
+});
+//#endregion
+</script>
+<style lang="scss" scoped>
+.dot-item {
+    &.active {
+        background: v-bind(actived_color) !important;
+    }
+    .num-active {
+        color: v-bind(actived_color) !important;
+    }
 }
 </style>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 9eb63c1d..45e0cea5 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -17,16 +17,24 @@
                     <el-form-item label="铺满方式">
                         <el-radio-group v-model="form.data_source_direction">
                             <el-radio value="0">纵向展示</el-radio>
-                            <el-radio value="2">纵向滑动</el-radio>
-                            <el-radio value="1">横向滑动</el-radio>
+                            <el-radio value="1">纵向滑动</el-radio>
+                            <el-radio value="2">横向滑动</el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item v-if="['1', '2'].includes(form.data_source_direction)" label="每屏显示">
                         <el-radio-group v-model="form.data_source_carousel_col">
-                            <el-radio :value="1">单列展示</el-radio>
-                            <el-radio :value="2">两列展示</el-radio>
-                            <el-radio :value="3">三列展示</el-radio>
-                            <el-radio :value="4">四列展示</el-radio>
+                            <template v-if="form.data_source_direction == '2'">
+                                <el-radio :value="1">单列展示</el-radio>
+                                <el-radio :value="2">两列展示</el-radio>
+                                <el-radio :value="3">三列展示</el-radio>
+                                <el-radio :value="4">四列展示</el-radio>
+                            </template>
+                            <template v-else>
+                                <el-radio :value="1">单行展示</el-radio>
+                                <el-radio :value="2">两行展示</el-radio>
+                                <el-radio :value="3">三行展示</el-radio>
+                                <el-radio :value="4">四行展示</el-radio>
+                            </template>
                         </el-radio-group>
                     </el-form-item>
                 </card-container>
diff --git a/src/components/model-custom/model-custom-styles.vue b/src/components/model-custom/model-custom-styles.vue
index e639826b..e7fd4da3 100644
--- a/src/components/model-custom/model-custom-styles.vue
+++ b/src/components/model-custom/model-custom-styles.vue
@@ -23,9 +23,33 @@
                 <card-container>
                     <carousel-indicator :value="form"></carousel-indicator>
                 </card-container>
+                <div class="bg-f5 divider-line" />
+                <card-container>
+                    <div class="mb-12">数据样式</div>
+                    <el-form-item label="背景">
+                        <div class="flex-col gap-10 w">
+                            <div class="size-12">背景色</div>
+                            <mult-color-picker :value="form.data_style.color_list" :type="form.data_style.direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                            <div class="flex-row jc-sb align-c">
+                                <div class="size-12">背景图</div>
+                                <bg-btn-style v-model="form.data_style.background_img_style"></bg-btn-style>
+                            </div>
+                            <upload v-model="form.data_style.background_img" :limit="1"></upload>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="外间距">
+                        <margin :value="form.data_style"></margin>
+                    </el-form-item>
+                    <el-form-item label="内间距">
+                        <padding :value="form.data_style"></padding>
+                    </el-form-item>
+                    <el-form-item label="圆角">
+                        <radius :value="form.data_style"></radius>
+                    </el-form-item>
+                </card-container>
             </el-form>
-            <div class="bg-f5 divider-line" />
         </template>
+        <div class="bg-f5 divider-line" />
         <common-styles :value="form.common_style" />
     </div>
 </template>
@@ -47,6 +71,10 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
 
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.data_style.color_list = arry;
+    form.value.data_style.direction = type.toString();
+}
 </script>
 <style lang="scss" scoped>
 .topic {
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 ca7dd745..5a883b59 100644
--- a/src/components/model-data-magic/components/carousel/magic-carousel.vue
+++ b/src/components/model-data-magic/components/carousel/magic-carousel.vue
@@ -1,16 +1,16 @@
 <template>
-    <div class="w h oh" :style="props.type === 'img' ? '' : style_container">
-        <div class="w h" :style="props.type === 'img' ? '' : style_img_container">
-            <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
-                <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
+    <div ref="card_container" class="w h oh" :style="props.type === 'img' ? '' : style_container">
+        <div class="w re oh" :style="props.type === 'img' ? `height: ${ outer_height }px;` : `height: ${ outer_height }px;${ style_img_container }`">
+            <swiper :key="form.data_style.carouselKey" class="w flex" :direction="form.data_style.rotation_direction" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="props.type === 'img' ? 0 : form.data_style.data_goods_gap" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
+                <swiper-slide v-for="(item1, index1) in form.data_content.list" :key="index1">
                     <template v-if="props.type === 'img'">
                         <image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
                     </template>
                     <template v-else>
-                        <product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="form.data_content.goods_num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
+                        <product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="show_num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
                     </template>
-                </el-carousel-item>
-            </el-carousel>
+                </swiper-slide>
+            </swiper>
         </div>
     </div>
 </template>
@@ -18,6 +18,11 @@
 <script setup lang="ts">
 import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
 import { isEmpty } from "lodash";
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay } from 'swiper/modules';
+import 'swiper/css';
+const modules = [Autoplay];
+
 interface Props {
     value: any;
     type: string;
@@ -30,15 +35,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const form = computed(() => props.value);
-interface new_style {
-    data_color_list: color_list[];
-    data_direction: string; 
-    data_radius: radiusStyle;
-    data_chunk_padding: paddingStyle;
-    data_background_img: uploadList[];
-    data_background_img_style: string;
-}
-
 // 用于样式显示
 const style_container = computed(() => {
     if (!isEmpty(form.value.data_style)) {
@@ -66,11 +62,68 @@ const style_img_container = computed(() => {
 });
 
 const emits = defineEmits(['carousel_change']);
-const carousel_change = (index: number) => {
-    emits('carousel_change', index);
+const slideChange = (swiper: { realIndex: number }) => {
+    emits('carousel_change', swiper.realIndex);
 };
+
+const autoplay = ref<boolean | object>(false);
+const slides_per_group = ref(1);
+const slides_per_view = ref(1);
+const card_container = ref<HTMLElement | null>(null);
+const outer_height = ref(0);
+const show_num = ref(0);
+// 内容参数的集合
+watchEffect(() => {
+    // 是否滚动
+    if (form.value.data_style.is_roll == '1') {
+        autoplay.value = {
+            delay: (form.value.data_style.interval_time || 2) * 1000,
+            pauseOnMouseEnter: true,
+        };
+    } else {
+        autoplay.value = false;
+    }
+    // 图片时的处理
+    if (props.type === 'img') {
+        slides_per_group.value = 1;
+        slides_per_view.value = 1; // 能够同时显示的slides数量
+    } else {
+        // 商品时的处理逻辑
+        const { goods_outerflex, goods_num } = form.value.data_content;
+        const { rotation_direction, rolling_fashion } = form.value.data_style;
+        // 判断是平移还是整屏滚动, 平移的时候是一个为1组
+        if (rolling_fashion == 'translation') {
+            slides_per_group.value = 1;
+            // 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
+            if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {
+                slides_per_view.value = goods_num; // 能够同时显示的slides数量
+                show_num.value = 1; // 一屏显示的数量 用于商品内部处理显示
+            } else {
+                slides_per_view.value = 1; // 能够同时显示的slides数量
+                show_num.value = goods_num; // 一屏显示的数量 用于商品内部处理显示
+            }
+        } else {
+            // 切屏的时候为多个为一组 
+            show_num.value = goods_num; // 一屏显示的数量 用于商品内部处理显示
+            slides_per_group.value = 1;
+            slides_per_view.value = 1; // 能够同时显示的slides数量
+        }
+    }
+    
+    nextTick(() => {
+        // 外层高度
+        if (card_container.value) {
+            outer_height.value = card_container.value?.clientHeight;
+        }
+    });
+});
 </script>
 
 <style lang="scss" scoped>
-
+:deep(.swiper) {
+    height: 100%;
+    .swiper-slide {
+       height: 100%;
+    }
+}
 </style>
\ No newline at end of file
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 9f80e746..16bf54b3 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
@@ -11,7 +11,7 @@
                             <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                         </template>
                         <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
-                            <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
+                            <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
                             <div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
                                 <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                                 <template v-if="isShow.includes('price_unit')">
@@ -34,7 +34,7 @@
                             <template v-else>
                                 <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                             </template>
-                            <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style">
+                            <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style + `height: ${ props.goodStyle.goods_title_size + 3 }px;`">
                                 {{ item.show_price_symbol }}{{ item.min_price }}
                                 <template v-if="isShow.includes('price_unit')">
                                     {{ item.show_price_unit }}
@@ -57,7 +57,7 @@
                             <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
                         </template>
                         <div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.goodStyle.goods_chunk_padding) }`">
-                            <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
+                            <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
                             <div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
                                 <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
                                 <template v-if="isShow.includes('price_unit')">
@@ -137,7 +137,6 @@ const style_img_container = computed(() => {
     }
 });
 const split_list = computed(() => props.value || {});
-const gap_height = computed(() => 20 / 3 + 'px');
 </script>
 
 <style lang="scss" scoped>
@@ -168,9 +167,6 @@ const gap_height = computed(() => 20 / 3 + 'px');
     bottom: 0.4rem;
     border-radius: 0.8rem;
 }
-.shop-max-height{
-    max-height: calc((100% / 3) - v-bind(gap_height));
-}
 .half-width {
     width: 50%;
 }
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index dd922108..19493f47 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -2,50 +2,14 @@
     <template v-if="data_source_content_list.length > 0">
         <div v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
             <div class="w h oh" :style="style_img_container">
-                <div class="w h re custom-other oh">
-                    <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
-                        <template v-if="item.key == 'text'">
-                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
-                        </template>
-                        <template v-else-if="item.key == 'img'">
-                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
-                        </template>
-                        <template v-else-if="item.key == 'auxiliary-line'">
-                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
-                        </template>
-                        <template v-else-if="item.key == 'icon'">
-                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
-                        </template>
-                        <template v-else-if="item.key == 'panel'">
-                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
-                        </template>
-                    </div>
-                </div>
+                <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
             </div>
         </div>
     </template>
     <template v-else>
         <div class="oh" :style="style_container">
             <div class="w h oh" :style="style_img_container">
-                <div class="w h re custom-other oh">
-                    <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
-                        <template v-if="item.key == 'text'">
-                            <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
-                        </template>
-                        <template v-else-if="item.key == 'img'">
-                            <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
-                        </template>
-                        <template v-else-if="item.key == 'auxiliary-line'">
-                            <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
-                        </template>
-                        <template v-else-if="item.key == 'icon'">
-                            <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
-                        </template>
-                        <template v-else-if="item.key == 'panel'">
-                            <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
-                        </template>
-                    </div>
-                </div>
+                <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
             </div>
         </div>
     </template>
@@ -132,7 +96,6 @@ const style_img_container = computed(() => {
         return '';
     }
 });
-const custom_height = computed(() => form.value.height * scale.value + 'px');
 watchEffect(() => {
     // 重新赋值
     form.value = props.value.data_content;
@@ -146,11 +109,4 @@ watchEffect(() => {
 })
 </script>
 <style lang="scss" scoped>
-.custom-other {
-    height: v-bind(custom_height);
-}
-.main-content {
-    position: absolute;
-    overflow: hidden;
-}
 </style>
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 df461dc0..ae83ab0e 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
@@ -13,6 +13,12 @@
                             <el-radio value="vertical">纵向</el-radio>
                         </el-radio-group>
                     </el-form-item>
+                    <el-form-item v-if="['goods', 'custom'].includes(tabs_content.data_type)" label="滚动方式">
+                        <el-radio-group v-model="form.rolling_fashion">
+                            <el-radio value="translation">平移</el-radio>
+                            <el-radio value="cut-screen">切屏</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
                     <el-form-item label="间隔时间">
                         <slider v-model="form.interval_time" :min="1" :max="100"></slider>
                     </el-form-item>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 3290739a..3be304f5 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -6,7 +6,7 @@
                 <template v-if="form.style_actived == 7">
                     <div class="flex-row align-c jc-c style-size flex-wrap">
                         <div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
-                            <div class="w h" :style="`${ item.data_style.background_img_style }`">
+                            <div class="w h re" :style="`${ item.data_style.background_img_style }`">
                                 <template v-if="item.data_content.data_type == 'goods'">
                                     <div class="w h flex-col" :style="`${ padding_computer(item.data_style.chunk_padding) };gap: ${ item.data_style.title_data_gap }px;`">
                                         <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle))" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
@@ -36,7 +36,7 @@
                                 <template v-else>
                                     <videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
                                 </template>
-                                <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
+                                <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
                                     <template v-if="item.data_style.indicator_style == 'num'">
                                         <div :style="item.data_style.indicator_styles" class="dot-item">
                                             <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
@@ -52,7 +52,7 @@
                 </template>
                 <template v-else>
                     <div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
-                        <div class="w h" :style="`${ item.data_style.background_img_style }`">
+                        <div class="w h re" :style="`${ item.data_style.background_img_style }`">
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <div class="w h flex-col" :style="`${ padding_computer(item.data_style.chunk_padding) };gap: ${ item.data_style.title_data_gap }px;`">
                                     <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
@@ -66,7 +66,7 @@
                                         </template>
                                         <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
-                                    <div class="w h">
+                                    <div class="w h flex-1">
                                         <magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                                     </div>
                                 </div>
@@ -82,7 +82,7 @@
                             <template v-else>
                                 <videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
                             </template>
-                            <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
+                            <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_styles">
                                 <template v-if="item.data_style.indicator_style == 'num'">
                                     <div :style="item.data_style.indicator_styles" class="dot-item">
                                         <span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
@@ -200,13 +200,44 @@ const indicator_style = (item: any) => {
         styles += `font-size: ${size}px;`;
     } else if (item.indicator_style == 'elliptic') {
         styles += `background: ${item?.color || '#DDDDDD'};`;
-        styles += `width: ${size * 3}px; height: ${size}px;`;
+        if (['left', 'right'].includes(item.indicator_new_location)) {
+            styles += `width: ${ size }px; height: ${size * 3}px;`;
+        } else {
+            styles += `width: ${size * 3}px; height: ${size}px;`;
+        }
     } else {
         styles += `background: ${item?.color || '#DDDDDD'};`;
         styles += `width: ${size}px; height: ${size}px;`;
     }
     return styles;
 };
+//#region 指示器位置
+// 根据指示器的位置来处理 对齐方式的处理
+const indicator_location_style = (item: any) => {
+    const { indicator_new_location,  indicator_location, indicator_bottom } = item;
+    let styles = '';
+    if (['left', 'right'].includes(indicator_new_location)) {
+        if (indicator_location == 'flex-start') {
+            styles += `top: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `top: 50%; transform: translateY(-50%);`;
+        } else {
+            styles += `bottom: 0px;`;
+        }
+    } else {
+        if (indicator_location == 'flex-start') {
+            styles += `left: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `left: 50%; transform: translateX(-50%);`;
+        } else {
+            styles += `right: 0px;`;
+        }
+    }
+    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
+    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
+    return styles;
+};
+//#endregion
 const style_actived_color = (item: any, index: number) => {
    return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
 }
@@ -262,25 +293,58 @@ const default_list = {
 ** @param {Number} num 显示数量
 ** @return {Array}
 */
-const commodity_list = (list: any[], num: number) => {
-    if (list.length > 0) {
-        // 深拷贝一下，确保不会出现问题
-        const goods_list = cloneDeep(list).map((item: any) => ({
-            ...item.data,
-            title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
-            new_cover: item.new_cover,
-        }));
-        // 存储数据显示
-        let nav_list = [];
+const commodity_list = (list: any[], num: number, data_content: any, data_style: any) => {
+        if (list.length > 0) {
+            // 深拷贝一下，确保不会出现问题
+            const goods_list = cloneDeep(list).map((item: any) => ({
+                ...item.data,
+                title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
+                new_cover: item.new_cover,
+            }));
+            // 存储数据显示
+            let nav_list: { split_list: any[] }[] = [];
+            // 如果是滑动，需要根据每行显示的个数来区分来拆分数据  translation 表示的是平移
+            if (data_style.rolling_fashion != 'translation') {
+                // 拆分的数量
+                const split_num = Math.ceil(goods_list.length / num);
+                for (let i = 0; i < split_num; i++) {
+                    nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
+                }
+                return nav_list;
+            } else {
+                return rotation_calculation(goods_list, num, data_content, data_style)
+            }
+        } else {
+            const list = Array(num).fill(default_list);
+            if (data_style.rolling_fashion != 'translation') {
+                return [{ split_list: list }];
+            } else {
+                return rotation_calculation(list, num, data_content, data_style)
+            }
+        }
+}
+
+const rotation_calculation = (list: Array<any>, num: number, data_content: any, data_style: any) => {
+    // 存储数据显示
+    let nav_list: { split_list: any[] }[] = [];
+    const goods_outerflex = data_content.goods_outerflex;
+    const rotation_direction = data_style.rotation_direction;
+    // 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
+    if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {
+        list.forEach((item) => {
+            nav_list.push({
+                split_list: [item],
+            });
+        });
+    } else {
         // 拆分的数量
-        const split_num = Math.ceil(goods_list.length / num);
+        const split_num = Math.ceil(list.length / num);
         for (let i = 0; i < split_num; i++) {
-            nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
+            nav_list.push({ split_list: list.slice(i * num, (i + 1) * num) });
         }
         return nav_list;
-    } else {
-        return [{ split_list: Array(num).fill(default_list)}];
     }
+    return nav_list;
 }
 
 const old_list = ref<any>({});
@@ -295,19 +359,20 @@ watch(props.value.content, (val) => {
         item.actived_index = 0;
         // 指示器样式
         data_style.indicator_styles = indicator_style(data_style);
+        data_style.indicator_location_styles = indicator_location_style(data_style);
         data_style.background_style = gradient_computer(data_style);
         data_style.background_img_style = background_computer(data_style);
         const radius = !isEmpty(data_style.img_radius) ? data_style.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
         data_style.get_img_radius = radius_computer(radius);
         
         // 商品名称和价格样式
-        data_style.goods_title_style = goods_trends_config(item.data_style, 'title') + `line-height: ${ item.data_style.goods_title_size + 3 }px;height: ${ (item.data_style.goods_title_size + 3) * 2 }px;`;
+        data_style.goods_title_style = goods_trends_config(item.data_style, 'title') + `line-height: ${ item.data_style.goods_title_size + 3 }px;`;
         data_style.goods_price_style = goods_trends_config(item.data_style, 'price') + `line-height: ${ item.data_style.goods_price_size }px;`;
 
-        const { is_roll, rotation_direction, interval_time } = data_style;
+        const { is_roll, rotation_direction, interval_time, rolling_fashion } = data_style;
         const { goods_list, images_list } = data_content;
         if (data_content.data_type == 'goods') {
-            data_content.list = commodity_list(data_content.goods_list, data_content.goods_num);
+            data_content.list = commodity_list(data_content.goods_list, data_content.goods_num, data_content, data_style);
         } else {
             data_content.list = data_content.images_list;
         }
@@ -316,6 +381,7 @@ watch(props.value.content, (val) => {
             interval_time: interval_time,
             is_roll: is_roll,
             rotation_direction: rotation_direction,
+            rolling_fashion: rolling_fashion,
             goods_list: [...goods_list], // 确保深拷贝
             images_list: [...images_list] // 确保深拷贝
         };
@@ -395,21 +461,6 @@ watchEffect(() => {
         overflow: hidden;
     }
 }
-.dot-center {
-    left: 50%;
-    transform: translateX(-50%);
-}
-.dot-right {
-    right: 0;
-}
-.dot {
-    padding-right: 10px;
-    padding-left: 10px;
-    z-index: 3;
-    .dot-item {
-        margin: 0 0.3rem;
-    }
-}
 // 轮播高度自适应
 :deep(.el-carousel) {
     height: 100%;
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 5236fb6d..bc079ae8 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -78,6 +78,7 @@ const data_style = {
     background_img: [],
     carouselKey: get_math(),
     is_roll: '0',
+    rolling_fashion: 'cut-screen',
     rotation_direction: 'horizontal',
     interval_time: 3,
     title_gap: 5,
@@ -156,6 +157,7 @@ const data_style = {
         radius_bottom_right: 4,
     },
     indicator_style: 'dot',
+    indicator_new_location: 'bottom',
     indicator_location: 'center',
     indicator_size: 5,
     indicator_bottom: 6,
@@ -198,6 +200,10 @@ const data_content = {
     height: 150,
     // 容器基础的宽度
     width: 0,
+    // 铺满方式 0 纵向展示 1 纵向滑动 2 横向滑动
+    data_source_direction: '0',
+    // 滑动时的显示 轮播数量
+    data_source_carousel_col: 1,
     // 数据源内容
     data_source_content: {
         // 存放手动输入的id
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index 2cd3f352..162a66df 100644
--- a/src/components/model-nav-group/index.vue
+++ b/src/components/model-nav-group/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div :style="style_container">
-        <div :style="style_img_container">
+        <div class="re" :style="style_img_container">
             <el-carousel :key="carouselKey" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll" @change="carousel_change">
                 <el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
                     <div ref="bannerImg" class="flex flex-wrap" :style="nav_space">
@@ -13,7 +13,7 @@
                     </div>
                 </el-carousel-item>
             </el-carousel>
-            <div v-if="form.display_style == 'slide' && new_style.is_show == '1'" :style="{ 'justify-content': new_style?.indicator_location || 'center' }" class="dot flex mt-10 mb-4">
+            <div v-if="form.display_style == 'slide' && new_style.is_show == '1'" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
                 <template v-if="new_style.indicator_style == 'num'">
                     <div :style="indicator_style" class="dot-item">
                         <span class="num-active">{{ actived_index + 1 }}</span
@@ -55,6 +55,11 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
 const img_style = computed(() => radius_computer(new_style.value));
 // 标题的样式
 const text_style = computed(() => `font-size: ${new_style.value.title_size || 12}px; color: ${new_style.value.title_color || '#000'};`);
+//#region 指示器处理
+// 轮播图滚动位置
+const actived_index = ref(0);
+// 轮播图显示样式
+const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF');
 // 指示器的样式
 const indicator_style = computed(() => {
     let indicator_styles = '';
@@ -67,13 +72,43 @@ const indicator_style = computed(() => {
         indicator_styles += `font-size: ${size}px;`;
     } else if (new_style.value.indicator_style == 'elliptic') {
         indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
-        indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
+        if (['left', 'right'].includes(new_style.value.indicator_new_location)) {
+            indicator_styles += `width: ${ size }px; height: ${size * 3}px;`;
+        } else {
+            indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
+        }
     } else {
         indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
         indicator_styles += `width: ${size}px; height: ${size}px;`;
     }
     return indicator_styles;
 });
+// 根据指示器的位置来处理 对齐方式的处理
+const indicator_location_style = computed(() => {
+    const { indicator_new_location,  indicator_location, indicator_bottom } = new_style.value;
+    let styles = '';
+    if (['left', 'right'].includes(indicator_new_location)) {
+        if (indicator_location == 'flex-start') {
+            styles += `top: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `top: 50%; transform: translateY(-50%);`;
+        } else {
+            styles += `bottom: 0px;`;
+        }
+    } else {
+        if (indicator_location == 'flex-start') {
+            styles += `left: 0px;`;
+        } else if (indicator_location == 'center') {
+            styles += `left: 50%; transform: translateX(-50%);`;
+        } else {
+            styles += `right: 0px;`;
+        }
+    }
+    // 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
+    styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
+    return styles;
+});
+//#endregion
 // 导航间距
 const nav_space = computed(() => 'row-gap:' + (new_style.value?.space || '0') + 'px');
 // 导航标题间距
@@ -88,10 +123,6 @@ const interval_time = ref(2000);
 const is_roll = ref(false);
 // 轮播图key值
 const carouselKey = ref('0');
-// 轮播图滚动位置
-const actived_index = ref(0);
-// 轮播图显示样式
-const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF');
 // 记录当前显示的轮播图的数据
 const interval_list = ref({
     time: 2000,
@@ -191,17 +222,12 @@ const carousel_change = (index: number) => {
 .flex-wrap .item {
     width: v-bind(group_width);
 }
-.dot {
-    padding-right: 10px;
-    padding-left: 10px;
-    .dot-item {
-        margin: 0 0.3rem;
-        &.active {
-            background: v-bind(actived_color) !important;
-        }
-        .num-active {
-            color: v-bind(actived_color) !important;
-        }
+.dot-item {
+    &.active {
+        background: v-bind(actived_color) !important;
+    }
+    .num-active {
+        color: v-bind(actived_color) !important;
     }
 }
 
@@ -210,4 +236,4 @@ const carousel_change = (index: number) => {
         height: v-bind(newHeight);
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/model-nav-group/model-nav-group-styles.vue b/src/components/model-nav-group/model-nav-group-styles.vue
index 17cc63bd..437e6e7b 100644
--- a/src/components/model-nav-group/model-nav-group-styles.vue
+++ b/src/components/model-nav-group/model-nav-group-styles.vue
@@ -33,7 +33,7 @@
                 </card-container>
                 <div class="divider-line"></div>
                 <card-container>
-                    <carousel-indicator :value="form" :is-indicator-bottom="false"></carousel-indicator>
+                    <carousel-indicator :value="form"></carousel-indicator>
                 </card-container>
                 <div class="divider-line"></div>
             </template>
diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue
index 5e4dae01..0924d788 100644
--- a/src/components/model-seckill/index.vue
+++ b/src/components/model-seckill/index.vue
@@ -212,10 +212,10 @@ const slide_active_color = computed(() => {
 
 const seckill_head_style = computed(() => {
     let style = ``;
-    const { header_background_color_list, header_background_direction } = new_style.value;
+    const { header_background_color_list, header_background_direction, seckill_head_radius } = new_style.value;
     // 渐变
     const gradient = { color_list: header_background_color_list, direction: header_background_direction };
-    style += gradient_computer(gradient);
+    style += gradient_computer(gradient) + radius_computer(seckill_head_radius);
     return style;
 });
 
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index b8560077..0819cdd5 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -30,6 +30,9 @@
                             <upload v-model="form.header_background_img" :limit="1"></upload>
                         </div>
                     </el-form-item>
+                    <el-form-item label="圆角">
+                        <radius :value="form.seckill_head_radius"></radius>
+                    </el-form-item>
                     <el-form-item label="内间距">
                         <padding :value="form.seckill_head_padding"></padding>
                     </el-form-item>
diff --git a/src/config/const/carousel.ts b/src/config/const/carousel.ts
index d26b103f..2dfae500 100644
--- a/src/config/const/carousel.ts
+++ b/src/config/const/carousel.ts
@@ -25,6 +25,7 @@ interface defaultSearch {
         is_show: string;
         image_spacing: number,
         indicator_style: string;
+        indicator_new_location: string;
         indicator_location: string;
         indicator_size: number;
         indicator_bottom: number;
@@ -93,6 +94,7 @@ const defaultSearch: defaultSearch = {
         actived_color: '#2A94FF',
         // 常规颜色
         color: '#DDDDDD',
+        indicator_new_location: 'bottom',
         // 指示器位置
         indicator_location: 'center',
         // 指示器大小
diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts
index 5cebd7d3..f9dfac25 100644
--- a/src/config/const/custom.ts
+++ b/src/config/const/custom.ts
@@ -92,9 +92,12 @@ interface defaultSearch {
         color: string;
         indicator_style: string;
         indicator_bottom: number;
+        indicator_new_location: string;
         indicator_location: string;
         indicator_size: number;
         indicator_radius: radiusStyle;
+        data_style: object;
+        // 通用样式
         common_style: object;
     };
 }
@@ -113,15 +116,15 @@ const defaultSearch: defaultSearch = {
         },
         // 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
         data_source:'',
-        // 铺满方式 0 纵向展示 1 横向滑动 2 纵向滑动
+        // 铺满方式 0 纵向展示 1 纵向滑动 2 横向滑动
         data_source_direction: '0',
-        // 横向滑动时的显示 轮播数量
+        // 滑动时的显示 轮播数量
         data_source_carousel_col: 1,
         // 自定义内容列表
         custom_list: []
     },
     style: {
-        is_roll: '0',
+        is_roll: '1',
         interval_time: 3,
         rolling_fashion: 'translation',
         is_show: false,
@@ -130,6 +133,7 @@ const defaultSearch: defaultSearch = {
         // 常规颜色
         color: '#DDDDDD',
         indicator_style: 'dot',
+        indicator_new_location: 'bottom',
         indicator_location: 'center',
         indicator_size: 5,
         indicator_bottom: 6,
@@ -140,6 +144,27 @@ const defaultSearch: defaultSearch = {
             radius_bottom_left: 4,
             radius_bottom_right: 4,
         },
+        data_style: {
+            color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
+            direction: '180deg',
+            background_img_style: '2',
+            background_img: [],
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+            padding_right: 0,
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         common_style: {
             ...defaultCommon,
             color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
diff --git a/src/config/const/nav-group.ts b/src/config/const/nav-group.ts
index 6b1a28b8..5bef7994 100644
--- a/src/config/const/nav-group.ts
+++ b/src/config/const/nav-group.ts
@@ -26,6 +26,8 @@ interface defaultSearch {
         is_roll: string;
         interval_time: number;
         indicator_style: string;
+        indicator_bottom: number;
+        indicator_new_location: string;
         indicator_location: string;
         indicator_size: number;
         indicator_radius: radiusStyle;
@@ -93,8 +95,10 @@ const defaultSearch: defaultSearch = {
         // 指示器处理逻辑
         is_show: '1',
         indicator_style: 'dot',
+        indicator_new_location: 'bottom',
         indicator_location: 'center',
         indicator_size: 5,
+        indicator_bottom: 6,
         indicator_radius: {
             radius: 4,
             radius_top_left: 4,
@@ -111,7 +115,7 @@ const defaultSearch: defaultSearch = {
         common_style: {
             ...defaultCommon,
             padding_top: 9,
-            padding_bottom: 5,
+            padding_bottom: 15,
             padding_left: 15,
             padding_right: 15,
         },
diff --git a/src/config/const/seckill.ts b/src/config/const/seckill.ts
index dc3fe864..2b5aeb1d 100644
--- a/src/config/const/seckill.ts
+++ b/src/config/const/seckill.ts
@@ -35,6 +35,7 @@ interface DefaultSeckill {
         header_background_direction: string;
         header_background_img_style: string;
         header_background_img: uploadList[];
+        seckill_head_radius: radiusStyle;
         seckill_head_padding: paddingStyle;
         shop_direction: string,
         shop_color_list: color_list[],
@@ -125,6 +126,13 @@ const defaultSeckill: DefaultSeckill = {
         header_background_direction: '180deg',
         header_background_img_style: '2',
         header_background_img: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
+        seckill_head_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
         // 头部内边距
         seckill_head_padding: {
             padding: 0,
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index f6920e2b..b519b851 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -54,6 +54,7 @@ interface defaultTabs {
         is_show: string;
         image_spacing: number;
         indicator_style: string;
+        indicator_new_location: string;
         indicator_location: string;
         indicator_size: number;
         indicator_bottom: number;
@@ -160,6 +161,7 @@ const defaultTabs: defaultTabs = {
         // 指示器设置
         is_show: '1',
         indicator_style: 'dot',
+        indicator_new_location: 'bottom',
         indicator_location: 'center',
         indicator_size: 5,
         indicator_bottom: 6,
diff --git a/src/styles/common.scss b/src/styles/common.scss
index c93433e5..0bcb69af 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -291,3 +291,25 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
 }
+
+.indicator_up_down_location {
+    position: absolute;
+    z-index: 1;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    .dot-item {
+        margin: 0.3rem 0;
+    }
+}
+.indicator_about_location {
+    position: absolute;
+    z-index: 1;
+    padding-right: 10px;
+    padding-left: 10px;
+    display: flex;
+    .dot-item {
+        margin: 0 0.3rem;
+    }
+}
\ No newline at end of file