轮播图支持两个半或者一个半

src/components/common/magic-cube/index.vue

@@ -17,9 +17,9 @@
                 </template>
                 <template v-else>
                     <div class="cube-selected-text">
-                        {{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
-                        x
                         {{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
+                        x
+                        {{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
                         像素
                         <template v-if="props.type == 'data'">
                             <div>{{ data_title(item) }}</div>

src/components/model-carousel/index.vue

@@ -1,18 +1,18 @@
 <template>
     <div :style="style_container">
+        <div ref="swiperSize" class="swiper-container w h">
             <swiper
                 :key="carouselKey"
-            :class="{'swiper-card': interval_types }"
+                :class="[`swiper-right-${swiper_style.slidesPerView}`, {'swiper-card': interval_types}]"
                 direction="horizontal"
                 :loop="true"
                 :effect="interval_types ? 'coverflow': 'slide'"
                 :autoplay="autoplay"
                 :allow-touch-move="false"
                 :speed="500"
-            slides-per-view="auto"
-            :space-between="0"
-            :initial-slide="4"
-            :centered-slides="true"
+                :slides-per-view="swiper_style.slidesPerView"
+                :space-between="swiper_style.spaceBetween"
+                :centered-slides="swiper_style.centeredSlides"
                 :pause-on-mouse-enter="true"
                 :modules="modules"
                 :coverflow-effect="interval_types ? {
@@ -64,6 +64,7 @@
                 </div>
             </swiper>
         </div>
+    </div>
 </template>
 <script setup lang="ts">
 import { common_styles_computer, radius_computer, get_math, gradient_computer, padding_computer } from '@/utils';
@@ -154,6 +155,36 @@ const interval_list = ref({
 })
 
 const interval_types = computed(() => interval_type.value == 'card');
+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 - (new_style.value.image_spacing * 2)) / 3) + 'px');
+const negative_swiper_right_2 = computed(() => '-' + swiper_right_2.value);
+const negative_swiper_right_3 = computed(() => '-' + swiper_right_3.value);
+const swiperSize = ref<any>(null);
+onMounted(() => {
+    if (swiperSize.value) {
+        swiper_Width.value = swiperSize.value.clientWidth;
+    }
+});
+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;
+    }
+    return {
+        slidesPerView: slidesPerView,
+        centeredSlides: centeredSlides,
+        spaceBetween: spaceBetween
+    }
+});
 // 视频播放按钮显示逻辑
 const video_style = computed(() => {
     let style = `bottom: ${new_style.value.video_bottom}px;`;
@@ -200,6 +231,14 @@ watchEffect(() => {
     //#endregion
 });
 
+watch(() => new_style.value.common_style, () => {
+    nextTick(() => {
+        if (swiperSize.value) {
+            swiper_Width.value = swiperSize.value.clientWidth;
+        }
+    })
+}, {deep: true});
+
 const slideChange = (swiper: { realIndex: number }) => {
     if (swiper.realIndex > form.value.carousel_list.length - 1) {
         const seat_length = seat_list.value.length;
@@ -218,6 +257,8 @@ const slideChange = (swiper: { realIndex: number }) => {
 <style lang="scss" scoped>
 .dot {
     z-index: 1;
+    padding-right: 10px;
+    padding-left: 10px;
     .dot-item {
         margin: 0 0.3rem;
         &.active {
@@ -242,6 +283,20 @@ const slideChange = (swiper: { realIndex: number }) => {
     }
 }
 
+/* 这里的样式是为了模拟next-margin的效果 */
+.swiper-container .swiper-right-2 {
+    margin-right: v-bind(negative_swiper_right_2);
+    .dot {
+        padding-right: v-bind(swiper_right_2);
+    }
+}
+.swiper-container .swiper-right-3 {
+    margin-right: v-bind(negative_swiper_right_3);
+    .dot {
+        padding-right: v-bind(swiper_right_3);
+    }
+}
+
 :deep(.swiper-slide) {
     .item-image {
         background: #F8FDFF;

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

@@ -7,6 +7,8 @@
                     <el-radio-group v-model="form.carousel_type">
                         <el-radio value="inherit">样式一</el-radio>
                         <el-radio value="card">样式二</el-radio>
+                        <el-radio value="oneDragOne">样式三</el-radio>
+                        <el-radio value="twoDragOne">样式四</el-radio>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item label="图片设置">

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

@@ -13,6 +13,9 @@
                 <el-form-item label="高度设置">
                     <slider v-model="form.height" :max="1000"></slider>
                 </el-form-item>
+                <el-form-item v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)" label="图片间距">
+                    <slider v-model="form.image_spacing" :max="100"></slider>
+                </el-form-item>
             </card-container>
             <div class="divider-line"></div>
             <card-container>

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

@@ -355,6 +355,8 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
     right: 0;
 }
 .dot {
+    padding-right: 10px;
+    padding-left: 10px;
     z-index: 3;
     .dot-item {
         margin: 0 0.3rem;

src/components/model-nav-group/index.vue

@@ -173,6 +173,8 @@ const carousel_change = (index: number) => {
     width: v-bind(group_width);
 }
 .dot {
+    padding-right: 10px;
+    padding-left: 10px;
     .dot-item {
         margin: 0 0.3rem;
         &.active {

src/views/layout/components/main/default/carousel.ts

@@ -23,6 +23,7 @@ interface defaultSearch {
         radius_bottom_right: number;
         is_show: string;
         height: number,
+        image_spacing: number,
         indicator_style: string;
         indicator_location: string;
         indicator_size: number;
@@ -81,6 +82,7 @@ const defaultSearch: defaultSearch = {
         radius_bottom_right: 0,
         is_show: '1',
         height: 300,
+        image_spacing: 10,
         indicator_style: 'dot',
         indicator_location: 'center',
         indicator_size: 5,