From ec7576feec225048fe48bf6d431071ecf1651c75 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 Aug 2024 17:09:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E6=8B=86=E6=88=90=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=BD=A2=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/magic-carousel.vue             | 36 +++++++++++++++++++
 src/components/model-data-magic/index.vue     | 33 ++++-------------
 .../model-data-magic-content.vue              |  4 +--
 3 files changed, 45 insertions(+), 28 deletions(-)
 create mode 100644 src/components/model-data-magic/components/magic-carousel.vue

diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/magic-carousel.vue
new file mode 100644
index 00000000..56316d09
--- /dev/null
+++ b/src/components/model-data-magic/components/magic-carousel.vue
@@ -0,0 +1,36 @@
+<template>
+    <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll" @change="carousel_change">
+        <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
+            <template v-if="props.type === 'img'">
+                <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
+            </template>
+            <template v-else>
+                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show>
+            </template>
+        </el-carousel-item>
+    </el-carousel>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    value: any;
+    contentImgRadius: string;
+    type: string;
+    actived: number;
+}
+
+const props = defineProps<Props>();
+
+const form = ref(props.value);
+const emits = defineEmits(['carousel_change']);
+const carousel_change = (index: number) => {
+    emits('carousel_change', index);
+};
+watchEffect(() => {
+    form.value = props.value;
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index dc3569e5..30f64d52 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -12,20 +12,12 @@
                                     <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                 </div>
                                 <div class="w h">
-                                    <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
-                                        <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                            <product-list-show :outerflex="item.outerflex" :flex="item.flex" :num="item.num" :actived="form.style_actived" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
-                                        </el-carousel-item>
-                                    </el-carousel>
+                                    <magic-carousel :value="item" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
                                 </div>
                             </div>
                         </template>
                         <template v-else>
-                            <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
-                                <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                    <image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
-                                </el-carousel-item>
-                            </el-carousel>
+                            <magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                         </template>
                         <div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
                             <template v-if="item.data_style.indicator_style == 'num'">
@@ -49,20 +41,12 @@
                                 <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                             </div>
                             <div class="w h">
-                                <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
-                                    <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                        <product-list-show :outerflex="item.outerflex" :flex="item.flex" :num="item.num" :actived="form.style_actived" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
-                                    </el-carousel-item>
-                                </el-carousel>
+                                <magic-carousel :value="item" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                             </div>
                         </div>
                     </template>
                     <template v-else>
-                        <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
-                            <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                <image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
-                            </el-carousel-item>
-                        </el-carousel>
+                        <magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
                     </template>
                     <div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
                         <template v-if="item.data_style.indicator_style == 'num'">
@@ -156,7 +140,7 @@ const getSelectedLeft = (item: data_magic) => {
 };
 // 根据当前页面大小计算成百分比
 const selected_style = (item: data_magic) => {
-    return `width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
+    return `overflow: hidden;width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
 };
 // 计算成百分比
 const percentage = (num: number) => {
@@ -304,20 +288,17 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
 .style-size {
     height: 100%;
     width: 100%;
-    .three {
-        width: 33%;
-        height: 100%;
-        position: relative;
-    }
     .style9-top {
         width: calc(50% - v-bind(outer_spacing));
         height: calc(50% - v-bind(outer_spacing));
         position: relative;
+        overflow: hidden;
     }
     .style9-bottom {
         width: calc(33% - v-bind(outer_spacing));
         height: calc(50% - v-bind(outer_spacing));
         position: relative;
+        overflow: hidden;
     }
 }
 .dot-center {
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index d53b4485..36cdac29 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -33,10 +33,10 @@
             </card-container>
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
-                    <tabs-content :value="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-content>
+                    <tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
                 </el-tab-pane>
                 <el-tab-pane label="样式设置" name="styles">
-                    <tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-styles>
+                    <tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-styles>
                 </el-tab-pane>
             </el-tabs>
         </el-form>