From a13ad552e04be8d7efa4015bbc721c307ada6c08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 23 Sep 2024 14:16:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=A4=E4=B8=AA=E5=8D=8A=E6=88=96=E8=80=85=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E5=8D=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue    |   4 +-
 src/components/model-carousel/index.vue       | 179 ++++++++++++------
 .../model-carousel/model-carousel-content.vue |   2 +
 .../model-carousel/model-carousel-styles.vue  |   3 +
 src/components/model-data-magic/index.vue     |   2 +
 .../model-img-magic-content.vue               |   2 +-
 src/components/model-nav-group/index.vue      |   2 +
 .../components/main/default/carousel.ts       |   2 +
 8 files changed, 131 insertions(+), 65 deletions(-)

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index 42116356..348b3a29 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/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>
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 4b8b2fab..cfa01c7f 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -1,68 +1,69 @@
 <template>
     <div :style="style_container">
-        <swiper
-            :key="carouselKey"
-            :class="{'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"
-            :pause-on-mouse-enter="true"
-            :modules="modules"
-            :coverflow-effect="interval_types ? {
-                rotate: 50,
-                stretch: 0,
-                depth: 100,
-                modifier: 1,
-                slideShadows: true
-            } : undefined"
-            @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" :style="img_style">
-                    <image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit" error-style="width:5rem;height:5rem"></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 video-class flex-row abs gap-10 align-c oh" :style="video_style">
-                        <template v-if="new_style.video_type == 'img'">
-                            <image-empty v-model="new_style.video_img[0]" class="video_img" error-img-style="width: 1.4rem;height: 1.4rem;" />
-                        </template>
-                        <template v-else>
-                            <el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
-                        </template>
-                        <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
+        <div ref="swiperSize" class="swiper-container w h">
+            <swiper
+                :key="carouselKey"
+                :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="swiper_style.slidesPerView"
+                :space-between="swiper_style.spaceBetween"
+                :centered-slides="swiper_style.centeredSlides"
+                :pause-on-mouse-enter="true"
+                :modules="modules"
+                :coverflow-effect="interval_types ? {
+                    rotate: 50,
+                    stretch: 0,
+                    depth: 100,
+                    modifier: 1,
+                    slideShadows: true
+                } : undefined"
+                @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" :style="img_style">
+                        <image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit" error-style="width:5rem;height:5rem"></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 video-class flex-row abs gap-10 align-c oh" :style="video_style">
+                            <template v-if="new_style.video_type == 'img'">
+                                <image-empty v-model="new_style.video_img[0]" class="video_img" error-img-style="width: 1.4rem;height: 1.4rem;" />
+                            </template>
+                            <template v-else>
+                                <el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
+                            </template>
+                            <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
+                        </div>
                     </div>
+                </swiper-slide>
+                <swiper-slide v-for="(item, index1) in seat_list" :key="index1">
+                    <div class="item-image flex align-c w h re" :style="img_style">
+                        <image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit" error-style="width:5rem;height:5rem"></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 video-class flex-row abs gap-10 align-c oh" :style="video_style">
+                            <template v-if="new_style.video_type == 'img'">
+                                <image-empty v-model="new_style.video_img[0]" class="video_img" error-img-style="width: 1.4rem;height: 1.4rem;" />
+                            </template>
+                            <template v-else>
+                                <el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
+                            </template>
+                            <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
+                        </div>
+                    </div>
+                </swiper-slide>
+                <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;`">
+                    <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>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div v-for="(item, index2) in form.carousel_list" :key="index2" :style="indicator_style" :class="{'dot-item': true, 'active': actived_index == index2 }" />
+                    </template>
                 </div>
-            </swiper-slide>
-            <swiper-slide v-for="(item, index1) in seat_list" :key="index1">
-                <div class="item-image flex align-c w h re" :style="img_style">
-                    <image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit" error-style="width:5rem;height:5rem"></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 video-class flex-row abs gap-10 align-c oh" :style="video_style">
-                        <template v-if="new_style.video_type == 'img'">
-                            <image-empty v-model="new_style.video_img[0]" class="video_img" error-img-style="width: 1.4rem;height: 1.4rem;" />
-                        </template>
-                        <template v-else>
-                            <el-icon :class="`iconfont ${ !isEmpty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang' } size-14`" :style="`color:${new_style.video_icon_color};`" />
-                        </template>
-                        <span v-if="!isEmpty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
-                    </div>
-                </div>
-            </swiper-slide>
-            <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;`">
-                <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>
-                    </div>
-                </template>
-                <template v-else>
-                    <div v-for="(item, index2) in form.carousel_list" :key="index2" :style="indicator_style" :class="{'dot-item': true, 'active': actived_index == index2 }" />
-                </template>
-            </div>
-        </swiper>
+            </swiper>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -153,7 +154,37 @@ const interval_list = ref({
     length: 0
 })
 
-const interval_types = computed(() => interval_type.value == 'card' );
+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;
diff --git a/src/components/model-carousel/model-carousel-content.vue b/src/components/model-carousel/model-carousel-content.vue
index a97d4487..24b78495 100644
--- a/src/components/model-carousel/model-carousel-content.vue
+++ b/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="图片设置">
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index 19f0849b..99fd760c 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/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>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 3329dae5..bf369a0b 100644
--- a/src/components/model-data-magic/index.vue
+++ b/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;
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index 7981a0c1..9f4681eb 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -23,7 +23,7 @@
                                     <image-empty v-model="item.img[0]"></image-empty>
                                 </template>
                                 <template v-else>
-                                    <div class="cube-selected-text">250 x 750 像素</div>
+                                    <div class="cube-selected-text"> 250 x 750 像素</div>
                                 </template>
                             </div>
                         </div>
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index 4652b6e3..3830e494 100644
--- a/src/components/model-nav-group/index.vue
+++ b/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 {
diff --git a/src/views/layout/components/main/default/carousel.ts b/src/views/layout/components/main/default/carousel.ts
index e6751668..5f6e3eeb 100644
--- a/src/views/layout/components/main/default/carousel.ts
+++ b/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,