From 337905b62541b2165feabe40b27f10c3e8d565e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 20 Sep 2024 16:55:14 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A7=92=E6=9D=80?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-seckill/index.vue                | 3 +++
 src/components/model-seckill/model-seckill-styles.vue | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/model-seckill/index.vue b/src/components/model-seckill/index.vue
index 87aa4260..f352d9f3 100644
--- a/src/components/model-seckill/index.vue
+++ b/src/components/model-seckill/index.vue
@@ -339,6 +339,9 @@ onBeforeMount(() => {
         }
     });
 });
+onUnmounted(() => {
+    clearInterval(intervalId.value);
+})
 // 商品间距
 const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
 // 圆角设置
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index 72145088..7a35a71b 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -142,7 +142,7 @@
                 <card-container>
                     <div class="mb-12">轮播设置</div>
                     <el-form-item label="自动轮播">
-                        <el-switch v-model="form.is_roll" />
+                        <el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
                     </el-form-item>
                     <el-form-item label="间隔时间">
                         <slider v-model="form.interval_time" :min="1" :max="100"></slider>

From dae5212dbf3b4c48989aa4575ec82001c923298c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 20 Sep 2024 17:37:05 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/div-content/index.vue | 2 +-
 src/components/page-settings/index.vue      | 4 ++--
 src/views/layout/components/main/index.vue  | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index 24eefe15..172cbc18 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -382,6 +382,6 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
     overflow: hidden;
 }
 .tabs-view {
-    z-index: 4;
+    z-index: 2;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index abb341b2..fc7dffe2 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -80,7 +80,7 @@ const text_style = computed(() => `font-weight:${new_style.value.header_backgrou
     position: v-bind(position);
     top: 0;
     left: 50%;
-    z-index: 2;
+    z-index: 3;
     transform: translateX(-50%);
     .roll {
         width: 39rem;
@@ -109,7 +109,7 @@ const text_style = computed(() => `font-weight:${new_style.value.header_backgrou
     // border: 0.2rem solid $cr-main;
     position: relative;
     box-shadow: 0px 0 0px 0.2rem $cr-main !important;
-    z-index: 1;
+    z-index: 3;
     box-sizing: border-box;
 }
 .logo-outer-style {
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index dcbf1d4b..67938cb6 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -40,7 +40,7 @@
                     </TransitionGroup>
                 </VueDraggable>
             </div>
-        </div>34
+        </div>
     </div>
     <!-- 视图渲染 -->
     <div class="main re">
@@ -67,12 +67,13 @@
                     <div class="model-wall" :style="content_style">
                         <div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
                             <div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true);" @del="del"></div-content>
+                            <div v-if="tabs_data.length > 0" class="seat"></div>
                             <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
                                 <div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
                             </VueDraggable>
                         </div>
                     </div>
-                    <div class="seat"></div>
+                    <!-- <div class="seat"></div> -->
                 </div>
                 <!-- 底部区域 -->
                 <div v-if="bottom_navigation_show" class="model-bottom">

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 3/3] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E4=B8=A4=E4=B8=AA=E5=8D=8A=E6=88=96=E8=80=85=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=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,