修改选项卡轮播的显示处理

src/components/common/custom-module/model-custom-group/index.vue

@@ -198,11 +198,12 @@ watchEffect(() => {
     if (!isEmpty(data_source_content_list.value)) {
         num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col));
     }
+    const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
     // 轮播图高度控制
     if (form.value.data_source_direction == 'horizontal') {
-        swiper_height.value = props.dataHeight * custom_scale.value;
+        swiper_height.value = props.dataHeight * custom_scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
     } else {
-        swiper_height.value = (props.dataHeight * custom_scale.value) * col + ((data_source_carousel_col - 1) * space_between.value);
+        swiper_height.value = (props.dataHeight * custom_scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value);
     }
     dot_list.value = Array(num);
     // 更新轮播图的key，确保更换时能重新更新轮播图

src/components/model-carousel/model-carousel-styles.vue

@@ -16,6 +16,10 @@
                     <el-form-item label="内间距">
                         <padding :value="form.carousel_content_padding"></padding>
                     </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.carousel_content.border_is_show" v-model:color="form.carousel_content.border_color" v-model:style="form.carousel_content.border_style" v-model:size="form.carousel_content.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form.carousel_content"></shadow-config>
                 </card-container>
                 <div class="divider-line"></div>
             </template>

src/components/model-custom/index.vue

@@ -177,11 +177,12 @@ watchEffect(() => {
     if (!isEmpty(data_source_content_list.value)) {
         num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col));
     }
+    const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
     // 轮播图高度控制
     if (form.value.data_source_direction == 'horizontal') {
-        swiper_height.value = form.value.height * scale.value;
+        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) * col + ((data_source_carousel_col - 1) * space_between.value);
+        swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value);
     }
     dot_list.value = Array(num);
     // 更新轮播图的key，确保更换时能重新更新轮播图

src/components/model-data-magic/components/custom/index.vue

@@ -217,11 +217,13 @@ watchEffect(() => {
     const col = data_source_content_list.value.length > carousel_col ? carousel_col : data_source_content_list.value.length;
     // 一屏显示的数量
     slides_per_view.value = col;
+    const { margin_bottom, margin_top } = new_style.value.data_chunk_margin;
+    const { padding_top, padding_bottom } = new_style.value.data_chunk_padding;
     // 轮播图高度控制
     if (form.value.data_source_direction == '2') {
-        swiper_height.value = form.value.height * scale.value;
+        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) * col + ((carousel_col - 1) * space_between.value);
+        swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((carousel_col - 1) * space_between.value);
     }
     // 更新轮播图的key，确保更换时能重新更新轮播图
     carouselKey.value = get_math();

src/components/model-tabs-carousel/index.vue

@@ -16,7 +16,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer } from '@/utils';
+import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer, box_shadow_computer, border_computer } from '@/utils';
 import { cloneDeep, isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -48,7 +48,8 @@ watch(
             background_img_style: new_style.tabs_bg_background_img_style,
             background_img: new_style.tabs_bg_background_img,
         }
-        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius);
+        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content);
+        console.log(new_style.tabs_margin);
         tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
         // 轮播区域背景设置
         const carousel_content_data = {
@@ -57,7 +58,7 @@ watch(
             background_img_style: new_style.carousel_content_background_img_style,
             background_img: new_style.carousel_content_background_img,
         }
-        carousel_container.value = gradient_computer(carousel_content_data) + margin_computer(new_style.carousel_content_margin) + radius_computer(new_style.carousel_content_radius);
+        carousel_container.value = gradient_computer(carousel_content_data) + margin_computer(new_style.carousel_content_margin) + radius_computer(new_style.carousel_content_radius) + box_shadow_computer(new_style.carousel_content) + border_computer(new_style.carousel_content);
         carousel_img_container.value = background_computer(carousel_content_data) + padding_computer(new_style.carousel_content_padding);
         // 处理数据
         new_data.content.tabs_list = [home_data, ...new_data.content.tabs_list];

src/components/model-tabs/model-tabs-styles.vue

@@ -50,9 +50,16 @@
                     <el-form-item label="圆角">
                         <radius :value="form.tabs_radius"></radius>
                     </el-form-item>
+                    <el-form-item label="外边距">
+                        <margin :value="form.tabs_margin"></margin>
+                    </el-form-item>
                     <el-form-item label="内边距">
                         <padding :value="form.tabs_padding"></padding>
                     </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form.tabs_content"></shadow-config>
                 </template>
             </card-container>
             <div class="divider-line"></div>

src/config/const/tabs-carousel.ts

@@ -64,7 +64,9 @@ interface defaultTabs {
         tabs_bg_background_img_style: string,
         tabs_bg_background_img: string[],
         tabs_radius: radiusStyle;
+        tabs_margin: marginStyle;
         tabs_padding: paddingStyle;
+        tabs_content: object;
         carousel_content_direction: string;
         carousel_content_color_list: color_list[];
         carousel_content_background_img_style: string;
@@ -72,6 +74,7 @@ interface defaultTabs {
         carousel_content_radius: radiusStyle;
         carousel_content_margin: marginStyle;
         carousel_content_padding: paddingStyle;
+        carousel_content: object;
         more_icon_class: string;
         more_icon_color: string;
         more_icon_size: number;
@@ -230,6 +233,13 @@ const defaultTabs: defaultTabs = {
             radius_bottom_left: 0,
             radius_bottom_right: 0,
         },
+        tabs_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         tabs_padding: {
             padding: 10,
             padding_top: 10,
@@ -237,6 +247,25 @@ const defaultTabs: defaultTabs = {
             padding_left: 10,
             padding_right: 10,
         },
+        tabs_content: {
+            // 边框样式
+            border_is_show: '0',
+            border_color: '#FF3F3F',
+            border_style: 'solid',
+            border_size: {
+                padding: 1,
+                padding_top: 1,
+                padding_right: 1,
+                padding_bottom: 1,
+                padding_left: 1,
+            },
+            // 阴影
+            box_shadow_color: '',
+            box_shadow_x: 0,
+            box_shadow_y: 0,
+            box_shadow_blur: 0,
+            box_shadow_spread: 0,
+        },
         // 轮播内间距设置
         carousel_content_direction: '90deg',
         carousel_content_color_list: [{ color: '', color_percentage: undefined }],
@@ -263,6 +292,25 @@ const defaultTabs: defaultTabs = {
             padding_left: 10,
             padding_right: 10,
         },
+        carousel_content: {
+            // 边框样式
+            border_is_show: '0',
+            border_color: '#FF3F3F',
+            border_style: 'solid',
+            border_size: {
+                padding: 1,
+                padding_top: 1,
+                padding_right: 1,
+                padding_bottom: 1,
+                padding_left: 1,
+            },
+            // 阴影
+            box_shadow_color: '',
+            box_shadow_x: 0,
+            box_shadow_y: 0,
+            box_shadow_blur: 0,
+            box_shadow_spread: 0,
+        },
         // 更多设置
         more_icon_class: 'category-more',
         more_icon_color: '#000',