From c12fe71907dea5ce40cff9e63270d791a8fae440 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 15 May 2025 16:23:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BD=AE=E6=92=AD=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-carousel/index.vue       | 27 +++++++++++--------
 .../model-carousel/model-carousel-styles.vue  | 20 ++++++++++----
 src/config/const/carousel.ts                  | 12 +++++++++
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 2fde93e6..b3af0df5 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -13,7 +13,6 @@
                     :allow-touch-move="false"
                     :speed="500"
                     :slides-per-view="swiper_style.slidesPerView"
-                    :space-between="swiper_style.spaceBetween"
                     :centered-slides="swiper_style.centeredSlides"
                     :pause-on-mouse-enter="true"
                     :modules="modules"
@@ -27,7 +26,7 @@
                     @slide-change="slideChange"
                 >
                     <swiper-slide v-for="(item, index) in form.carousel_list" :key="index">
-                        <div class="item-image flex align-c w h re oh" :style="img_style">
+                        <div class="item-image flex align-c w h re oh" :style="`${ img_style }${ data_spacing }`">
                             <image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit"></image-empty>
                             <div v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="z-deep abs oh video-class" :style="`bottom: ${new_style.video_bottom}px;`">
                                 <div class="flex-row gap-5 align-c" :style="video_style">
@@ -43,7 +42,7 @@
                         </div>
                     </swiper-slide>
                     <swiper-slide v-for="(item, index1) in seat_list" :key="index1">
-                        <div class="item-image flex align-c w h re oh" :style="img_style">
+                        <div class="item-image flex align-c w h re oh" :style="`${ img_style }${ data_spacing }`">
                             <image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit"></image-empty>
                             <div v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="z-deep abs oh video-class" :style="`bottom: ${new_style.video_bottom}px;`">
                                 <div class="flex-row gap-5 align-c" :style="video_style">
@@ -78,6 +77,7 @@ import { common_styles_computer, radius_computer, get_math, gradient_computer, p
 import { isEmpty, cloneDeep, throttle } from 'lodash';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay, EffectCoverflow } from 'swiper/modules';
+import { old_padding } from '@/utils/common';
 const modules = [Autoplay, EffectCoverflow];
 
 const props = defineProps({
@@ -175,9 +175,19 @@ const swiper_Width = ref(390);
 
 // const swiper_right_2 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 2  + 'px');
 // const swiper_right_3 = computed(() => (swiper_Width.value / 2) - 55 - (new_style.value.image_spacing * 2) + 'px');
+const data_spacing = computed(() => {
+    const { data_padding = old_padding, data_left_spacing = 0, image_spacing = 0} = new_style.value;
+    if (form.value.carousel_type == 'inherit') {
+        return padding_computer(data_padding) + 'box-sizing: border-box;';
+    } else if (form.value.carousel_type !== 'card') {
+        return `padding-left: ${ data_left_spacing }px;padding-right:${image_spacing}px;box-sizing: border-box;`;
+    } else {
+        return '';
+    }
+});
 
-const swiper_right_2 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 2 + (55 * 1.5 + new_style.value.image_spacing) + 'px');
-const swiper_right_3 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 3 + 'px');
+const swiper_right_2 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 2 - new_style.value.data_left_spacing + 'px');
+const swiper_right_3 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 3 - new_style.value.data_left_spacing + 'px');
 
 const negative_swiper_right_2 = computed(() => '-' + swiper_right_2.value);
 const negative_swiper_right_3 = computed(() => '-' + swiper_right_3.value);
@@ -190,25 +200,20 @@ onMounted(() => {
 const swiper_style = computed(() => {
     let slidesPerView: number | "auto" | undefined = 'auto';
     let centeredSlides = true;
-    let spaceBetween = 0;
     // 轮播图类型 一拖一，二拖一不同状态下的不同风格
     if (form.value.carousel_type == 'oneDragOne') {
         slidesPerView = 2;
         centeredSlides = false;
-        spaceBetween = new_style.value.image_spacing;
     } else if (form.value.carousel_type == 'twoDragOne') {
         slidesPerView = 3;
         centeredSlides = false
-        spaceBetween = new_style.value.image_spacing;
     } else if (form.value.carousel_type == 'inherit') {
         slidesPerView = 1;
         centeredSlides = true;
-        spaceBetween = 0;
     }
     return {
         slidesPerView: slidesPerView,
-        centeredSlides: centeredSlides,
-        spaceBetween: spaceBetween
+        centeredSlides: centeredSlides
     }
 });
 // 视频播放按钮显示逻辑
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index aa5ef18b..45ee6a5a 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="common-style-height">
-        <el-form :model="form" label-width="70">
+        <el-form :model="form" label-width="75">
             <template v-if="!isCommon">
                 <card-container>
                     <div class="mb-12">内容设置</div>
@@ -29,13 +29,23 @@
                     <radius :value="form"></radius>
                 </el-form-item>
             </card-container>
-            <template v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)">
+            <template v-if="['oneDragOne', 'twoDragOne', 'inherit'].includes(new_content.carousel_type)">
                 <div class="divider-line"></div>
                 <card-container>
                     <div class="mb-12">轮播设置</div>
-                    <el-form-item label="图片间距">
-                        <slider v-model="form.image_spacing" :max="100"></slider>
-                    </el-form-item>
+                    <template v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)">
+                        <el-form-item label="图片间距">
+                            <slider v-model="form.image_spacing" :max="100"></slider>
+                        </el-form-item>
+                        <el-form-item label="数据左间距">
+                            <slider v-model="form.data_left_spacing" :max="100"></slider>
+                        </el-form-item>
+                    </template>
+                    <template v-else>
+                        <el-form-item label="数据内边距">
+                            <padding :value="form.data_padding"></padding>
+                        </el-form-item>
+                    </template>
                 </card-container>
             </template>
             <div class="divider-line"></div>
diff --git a/src/config/const/carousel.ts b/src/config/const/carousel.ts
index 26029806..9849e6a0 100644
--- a/src/config/const/carousel.ts
+++ b/src/config/const/carousel.ts
@@ -34,6 +34,8 @@ interface defaultSearch {
         radius_bottom_right: number;
         is_show: string;
         image_spacing: number,
+        data_left_spacing: number,
+        data_padding: paddingStyle,
         indicator_style: string;
         indicator_new_location: string;
         indicator_location: string;
@@ -140,6 +142,16 @@ const defaultSearch: defaultSearch = {
         radius_bottom_right: 0,
         // 图片间距
         image_spacing: 10,
+        // 数据左侧间距
+        data_left_spacing: 0,
+        // 数据内间距
+        data_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+            padding_right: 0,
+        },
         // 指示器是否显示
         is_show: '1',
         // 指示器样式