From dbc76ff97d93a621bbeb95c0905b28f7653fc03d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 5 Nov 2024 17:46:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue    |  64 ++++---
 .../components/magic-carousel.vue             |   2 +-
 .../components/product-list-show.vue          | 160 ++++++++----------
 .../components/tabs-content.vue               |  24 ++-
 .../components/tabs-styles.vue                |  35 ++--
 src/components/model-data-magic/index.vue     |  12 +-
 .../model-data-magic-content.vue              |  97 ++++++++---
 src/components/model-img-magic/index.vue      |   4 +-
 .../model-img-magic-content.vue               |  21 ++-
 src/config/const/data-magic.ts                |   3 +
 src/config/const/img-magic.ts                 |   3 +
 11 files changed, 262 insertions(+), 163 deletions(-)

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index e8dcacf3..72e26a99 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -35,12 +35,12 @@
 </template>
 
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
-interface content {
-    data_type: string;
-    goods_list: Array<string>;
-    images_list: Array<string>;
-}
+import { isEmpty, cloneDeep } from 'lodash';
+// interface content {
+//     data_type: string;
+//     goods_list: Array<string>;
+//     images_list: Array<string>;
+// }
 interface CubeItem {
     start: {
         x: number;
@@ -51,7 +51,8 @@ interface CubeItem {
         y: number;
     };
     img?: uploadList[];
-    data_content?: content
+    data_content?: any,
+    data_style?: object,
 }
 
 interface Props {
@@ -62,6 +63,9 @@ interface Props {
     cubeHeight: number;
     styleActived?: number;
     imgFit?: "" | "cover" | "fill" | "contain" | "none" | "scale-down";
+    magicCubeDensity?: number;
+    defaultContent?: object;
+    defaultStyle?: object;
 }
 const props = withDefaults(defineProps<Props>(), {
     list: () => [],
@@ -70,12 +74,24 @@ const props = withDefaults(defineProps<Props>(), {
     cubeWidth: 390,
     cubeHeight: 390,
     styleActived: 0,
-    imgFit: 'cover'
+    imgFit: 'cover',
+    magicCubeDensity: 4,
+    defaultContent: () => ({
+        data_type: '',
+        goods_list: [],
+        images_list: []
+    }),
+    defaultStyle: () => ({}),
 });
 
 const selected_active = ref(0);
+// 选中的数据
+const selectedList = ref(props.list);
 //#region 容器大小变更
-const density = ref('4');
+const density = computed(() => props?.magicCubeDensity || 4);
+watchEffect(() => {
+    selectedList.value = props.list;
+});
 //#endregion
 
 const selectingItem = reactive<any>({
@@ -100,14 +116,12 @@ const outerClick = (e: any) => {
     }
 };
 
-const selectedList = ref(props.list);
-
 //单元魔方宽度。
-const cubeCellWidth = computed(() => props.cubeWidth / parseInt(density.value));
+const cubeCellWidth = computed(() => props.cubeWidth / density.value);
 //密度值。
-const densityNum = computed(() => parseInt(density.value));
+const densityNum = computed(() => density.value);
 //单元魔方高度。
-const cubeCellHeight = computed(() => props.cubeHeight / parseInt(density.value));
+const cubeCellHeight = computed(() => props.cubeHeight / density.value);
 const emits = defineEmits(['selected_click']);
 
 // 判断选择的内容的长度是否发生变化
@@ -171,13 +185,23 @@ const onClickCubeItem = (event: any) => {
 
     selectingItem.tempEnd = coord;
     updateSelecting();
-
+    let selectedItem = {} as CubeItem;
     //加入选中的。
-    let selectedItem = {
-        start: selectingItem.start,
-        end: selectingItem.end,
-        img: [],
-    };
+    if (props.type == 'data') {
+        console.log(props.defaultContent);
+        selectedItem = {
+            start: selectingItem.start,
+            end: selectingItem.end,
+            data_content: cloneDeep(props.defaultContent),
+            data_style: cloneDeep(props.defaultStyle),
+        };
+    } else {
+        selectedItem = {
+            start: selectingItem.start,
+            end: selectingItem.end,
+            img: [],
+        };
+    }
     selectedList.value.push(selectedItem);
     clearSelecting();
 };
diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/magic-carousel.vue
index 81e96968..5b4a4ac6 100644
--- a/src/components/model-data-magic/components/magic-carousel.vue
+++ b/src/components/model-data-magic/components/magic-carousel.vue
@@ -7,7 +7,7 @@
                         <image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
                     </template>
                     <template v-else>
-                        <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
+                        <product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="form.data_content.goods_num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
                     </template>
                 </el-carousel-item>
             </el-carousel>
diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/product-list-show.vue
index 46445ddc..25515249 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -1,104 +1,75 @@
 <template>
-    <template v-if="props.outerflex == 'row'">
-        <div class="flex-row gap-10 align-c w h">
-            <template v-if="props.flex === 'row'">
-                <div v-for="(item, index) in split_list" :key="index" class="half-width h">
-                    <div class="w h oh" :style="style_container(goodStyle)">
-                        <div class="w h flex-row gap-10" :style="style_img_container(goodStyle)">
-                            <template v-if="!isEmpty(item.new_cover)">
-                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                            </template>
-                            <template v-else>
-                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                            </template>
-                            <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
-                                <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
-                                <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
-                                    <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
-                                    <template v-if="isShow.includes('price_unit')">
-                                        <span class="num">{{ item.show_price_unit }}</span>
-                                    </template>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <template v-else-if="actived != 7 || props.num != 1">
-                <div v-for="(item, index) in split_list" :key="index" :class="['h', { 'half-width': props.num != 1, 'w': props.num == 1 }]">
-                    <div class="w h oh" :style="style_container(goodStyle)">
-                        <div class="w h flex-col gap-10" :style="style_img_container(goodStyle)">
-                            <div class="w h re flex-1">
-                                <template v-if="!isEmpty(item.new_cover)">
-                                    <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
+    <div :class="['align-c w h', ( props.outerflex == 'row' ? 'flex-row' : 'flex-col')]" :style="'gap:' + props.goodStyle.data_goods_gap + 'px;'">
+        <template v-if="props.flex === 'row'">
+            <div v-for="(item, index) in split_list" :key="index" :style="block_size">
+                <div class="w h oh" :style="style_container(props.goodStyle)">
+                    <div class="w h flex-row gap-10" :style="style_img_container(props.goodStyle)">
+                        <template v-if="!isEmpty(item.new_cover)">
+                            <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
+                        </template>
+                        <template v-else>
+                            <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                        </template>
+                        <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
+                            <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
+                            <div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
+                                <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                                <template v-if="isShow.includes('price_unit')">
+                                    <span class="num">{{ item.show_price_unit }}</span>
                                 </template>
-                                <template v-else>
-                                    <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-else-if="props.flex == 'col'">
+            <div v-for="(item, index) in split_list" :key="index" :style="block_size">
+                <div class="w h oh" :style="style_container(props.goodStyle)">
+                    <div class="w h flex-col gap-10" :style="style_img_container(props.goodStyle)">
+                        <div class="w h re flex-1">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
+                            </template>
+                            <template v-else>
+                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                            </template>
+                            <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style">
+                                {{ item.show_price_symbol }}{{ item.min_price }}
+                                <template v-if="isShow.includes('price_unit')">
+                                    {{ item.show_price_unit }}
                                 </template>
-                                <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
-                                    {{ item.show_price_symbol }}{{ item.min_price }}
-                                    <template v-if="isShow.includes('price_unit')">
-                                        {{ item.show_price_unit }}
-                                    </template>
-                                </div>
                             </div>
-                            <div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="goodStyle.goods_title_style">{{ item.title }}</div>
                         </div>
+                        <div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
                     </div>
                 </div>
-            </template>
-            <template v-else>
-                <div v-for="(item, index) in split_list" :key="index" class="w h">
-                    <div class="w h oh" :style="style_container(goodStyle)">
-                        <div class="w h flex-col" :style="style_img_container(goodStyle)">
-                            <template v-if="!isEmpty(item.new_cover)">
-                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                            </template>
-                            <template v-else>
-                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                            </template>
-                            <div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.chunkPadding) }`">
-                                <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
-                                <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
-                                    <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
-                                    <template v-if="isShow.includes('price_unit')">
-                                        <span class="num">{{ item.show_price_unit }}</span>
-                                    </template>
-                                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div v-for="(item, index) in split_list" :key="index" :style="block_size">
+                <div class="w h oh" :style="style_container(props.goodStyle)">
+                    <div class="w h flex-col" :style="style_img_container(props.goodStyle, 'fill')">
+                        <template v-if="!isEmpty(item.new_cover)">
+                            <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
+                        </template>
+                        <template v-else>
+                            <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                        </template>
+                        <div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.goodStyle.goods_chunk_padding) }`">
+                            <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
+                            <div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
+                                <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                                <template v-if="isShow.includes('price_unit')">
+                                    <span class="num">{{ item.show_price_unit }}</span>
+                                </template>
                             </div>
                         </div>
                     </div>
                 </div>
-            </template>
-        </div>
-    </template>
-    <template v-else>
-        <div class="flex-col gap-10 align-c w h">
-            <template v-if="props.flex === 'row'">
-                <div v-for="(item, index) in split_list" :key="index" class="w h shop-max-height">
-                    <div class="w h oh" :style="style_container(goodStyle)">
-                        <div class="w h flex-row gap-10 align-c" :style="style_img_container(goodStyle)">
-                            <template v-if="!isEmpty(item.new_cover)">
-                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                            </template>
-                            <template v-else>
-                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                            </template>
-                            <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
-                                <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
-                                <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
-                                    <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
-                                    <template v-if="isShow.includes('price_unit')">
-                                        <span class="num">{{ item.show_price_unit }}</span>
-                                    </template>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </div>
-    </template>
+            </div>
+        </template>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -131,6 +102,11 @@ interface new_style {
     goods_background_img_style: string;
 }
 
+const block_size = computed(() => {
+    const total_gap: number = props.goodStyle.data_goods_gap * (split_list.value.length - 1);
+    return props.outerflex == 'row' ? 'height:100%;width:calc((100% - ' + total_gap + 'px) / ' + props.num  + ');' : 'width: 100%;height:calc((100% - ' + total_gap + 'px) / ' + props.num  + ');';
+});
+
 // 用于样式显示
 const style_container = computed(() => {
     return (val: new_style) => {
@@ -147,14 +123,14 @@ const style_container = computed(() => {
     }
 });
 const style_img_container = computed(() => {
-    return (val: new_style) => {
+    return (val: new_style, type?: string) => {
         if (!isEmpty(val)) {
             const { goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
             const data = {
                 background_img: goods_background_img,
                 background_img_style: goods_background_img_style,
             }
-            return padding_computer(goods_chunk_padding) + background_computer(data);
+            return type == 'fill' ? background_computer(data) : padding_computer(goods_chunk_padding) + background_computer(data);
         } else {
             return '';
         }
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index b3ac49e8..a7e8aab0 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -4,9 +4,11 @@
             <el-radio-group v-model="form.data_type">
                 <el-radio value="goods">商品</el-radio>
                 <el-radio value="images">图片</el-radio>
+                <el-radio value="custom">自定义</el-radio>
+                <el-radio value="video">视频</el-radio>
             </el-radio-group>
         </el-form-item>
-        <template v-if="form.data_type === 'goods' && isShowTitle">
+        <template v-if="form.data_type === 'goods'">
             <el-form-item label="主标题">
                 <div class="flex-col gap-10 w">
                     <el-radio-group v-model="form.heading_title_type">
@@ -24,6 +26,22 @@
             <el-form-item label="副标题">
                 <el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
             </el-form-item>
+            <el-form-item label="商品排列">
+                <el-radio-group v-model="form.goods_outerflex">
+                    <el-radio value="row">横排</el-radio>
+                    <el-radio value="col">竖排</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="内容排列">
+                <el-radio-group v-model="form.goods_flex">
+                    <el-radio value="row">左图右文</el-radio>
+                    <el-radio value="fill">上图下文</el-radio>
+                    <el-radio value="col">上图下文<span class="size-8">(价格浮动)</span></el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="每屏数量">
+                <slider v-model="form.goods_num" :min="1" :max="6"></slider>
+            </el-form-item>
         </template>
         <template v-else-if="form.data_type === 'images'">
             <el-form-item label="图片设置">
@@ -163,4 +181,8 @@ const url_value_dialog_call_back = (item: any[]) => {
 :deep(.el-checkbox-group .el-checkbox) {
     margin-right: 2rem;
 }
+
+:deep(.el-radio-group .el-radio) {
+    margin-right: 2rem;
+}
 </style>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 9d46af5d..b3d0b444 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -11,24 +11,32 @@
                 <upload v-model="form.background_img" :limit="1"></upload>
             </div>
         </el-form-item>
-        <el-form-item label="自动轮播">
-            <el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
-        </el-form-item>
-        <template v-if="form.is_roll == '1'">
-            <el-form-item label="轮播方向">
-                <el-radio-group v-model="form.rotation_direction">
-                    <el-radio value="horizontal">横向</el-radio>
-                    <el-radio value="vertical">纵向</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="间隔时间">
-                <slider v-model="form.interval_time" :min="1" :max="100"></slider>
+        <template v-if="['goods', 'images'].includes(tabs_content.data_type)">
+            <el-form-item label="自动轮播">
+                <el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
             </el-form-item>
+            <template v-if="form.is_roll == '1'">
+                <el-form-item label="轮播方向">
+                    <el-radio-group v-model="form.rotation_direction">
+                        <el-radio value="horizontal">横向</el-radio>
+                        <el-radio value="vertical">纵向</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="间隔时间">
+                    <slider v-model="form.interval_time" :min="1" :max="100"></slider>
+                </el-form-item>
+            </template>
         </template>
         <template v-if="tabs_content.data_type === 'goods'">
             <el-form-item label="内间距">
                 <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
             </el-form-item>
+            <el-form-item label="标题间距">
+                <slider v-model="form.title_gap" :min="1" :max="100"></slider>
+            </el-form-item>
+            <el-form-item label="标题内容间距">
+                <slider v-model="form.title_data_gap" :min="1" :max="100"></slider>
+            </el-form-item>
         </template>
         <el-form-item label="图片圆角">
             <radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
@@ -77,6 +85,9 @@
             <el-form-item label="圆角">
                 <radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
             </el-form-item>
+            <el-form-item label="数据间距">
+                <slider v-model="form.data_goods_gap" :min="0" :max="50"></slider>
+            </el-form-item>
         </card-container>
     </template>
     <template v-if="tabs_content.data_type === 'goods'">
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 99dcf62e..147d1f33 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -8,8 +8,8 @@
                         <div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
                             <div class="w h" :style="`${ item.data_style.background_img_style }`">
                                 <template v-if="item.data_content.data_type == 'goods'">
-                                    <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
-                                        <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
+                                    <div :class="`w h flex-col ${ 'gap-' + item.data_style.title_data_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
+                                        <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle))" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
                                             <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
                                                 <div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
                                                     <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
@@ -46,8 +46,8 @@
                     <div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
                         <div class="w h" :style="`${ item.data_style.background_img_style }`">
                             <template v-if="item.data_content.data_type == 'goods'">
-                                <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
-                                    <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'gap-5 tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
+                                <div :class="`w h flex-col ${ 'gap-' + item.data_style.title_data_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
+                                    <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
                                         <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
                                             <div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
                                                 <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
@@ -136,7 +136,7 @@ interface data_magic {
     data_style: any;
 }
 // 屏幕分块
-const density = ref('4');
+const density = computed(() => form.value?.magic_cube_density || 4);
 //单元魔方宽度。
 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
 //单元魔方高度。
@@ -285,7 +285,7 @@ watch(props.value.content, (val) => {
         const { is_roll, rotation_direction, interval_time } = data_style;
         const { goods_list, images_list } = data_content;
         if (data_content.data_type == 'goods') {
-            data_content.list = commodity_list(data_content.goods_list, item.num);
+            data_content.list = commodity_list(data_content.goods_list, data_content.goods_num);
         } else {
             data_content.list = data_content.images_list;
         }
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 3358ebb8..20e2ed37 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -16,7 +16,16 @@
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
-                <div class="mb-12">展示设置</div>
+                <div class="mb-12 flex-row jc-sb align-c">
+                    展示设置
+                    <template v-if="form.style_actived === 9">
+                        <el-radio-group v-model="form.magic_cube_density" @change="density_change">
+                            <el-radio-button label="4X4" :value="4" />
+                            <el-radio-button label="6X6" :value="6" />
+                            <el-radio-button label="8X8" :value="8" />
+                        </el-radio-group>
+                    </template>
+                </div>
                 <el-form-item label-width="0" class="show-config">
                     <!-- 风格9 -->
                     <template v-if="form.style_actived == 7">
@@ -31,20 +40,22 @@
                         </div>
                     </template>
                     <template v-else>
-                        <magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="false" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
+                        <magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 9" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
                     </template>
                 </el-form-item>
             </card-container>
-            <div class="bg-f5 divider-line" />
             <!-- 内容和样式组件 -->
-            <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" :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" :is-show-title="is_show_title"></tabs-styles>
-                </el-tab-pane>
-            </el-tabs>
+            <template v-if="!isEmpty(form.data_magic_list[selected_active])">
+                <div class="bg-f5 divider-line" />
+                <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" :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" :is-show-title="is_show_title"></tabs-styles>
+                    </el-tab-pane>
+                </el-tabs>
+            </template>
         </el-form>
     </div>
 </template>
@@ -58,16 +69,19 @@ const props = defineProps({
     },
 });
 // 风格数组
-const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
+const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-4x4'];
 // 每个小模块独立的样式
 const data_style = {
     color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
     direction: '180deg',
     background_img_style: '2',
     background_img: [],
+    carouselKey: get_math(),
     is_roll: '0',
     rotation_direction: 'horizontal',
     interval_time: 3,
+    title_gap: 5,
+    title_data_gap: 10,
     heading_color: '#000',
     heading_typeface: '400',
     heading_size: 20,
@@ -115,6 +129,7 @@ const data_style = {
         radius_bottom_right: 4,
     },
     is_show: '1',
+    data_goods_gap: 10,
     data_color_list: [{ color: '', color_percentage: undefined }],
     data_direction: '180deg',
     data_background_img_style: '2',
@@ -156,6 +171,9 @@ const data_content = {
     subtitle: '副标题',
     goods_list:[],
     goods_ids: '',
+    goods_outerflex: 'row',
+    goods_flex: 'row',
+    goods_num: 1,
     is_show: ['title', 'price'],
     img_fit: 'cover',
     images_list:[
@@ -175,8 +193,9 @@ const style_show_list = [
     [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格5
     [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }],// 风格6
     [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格7
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 20 }],// 风格8
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row', title_text_gap: 10 }],// 风格9
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'fill', outerflex: 'col', title_text_gap: 20 }],// 风格8
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row', title_text_gap: 10 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 10 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 10 }],// 风格9
+    [], //风格10
 ]
 const tabs_name = ref('content');
 const state = reactive({
@@ -224,7 +243,12 @@ const handleResize = () => {
 const selected_active = ref(0);
 // 切换风格
 const style_click = (index: number) => {
-    form.value.data_magic_list = magic_list(index);
+    if (index !== 9) {
+        form.value.magic_cube_density = 4;
+        form.value.data_magic_list = magic_list(index);
+    } else {
+        form.value.data_magic_list = [];
+    }
     form.value.style_actived = index;
     selected_active.value = 0;
     tabs_name.value = 'content';
@@ -235,16 +259,31 @@ const magic_list = (index: number) => {
     return cloneDeep(style_show_list[index]).map((item, map_index) => ({
         ...item,
         actived_index: 0,
-        data_content: cloneDeep(data_content),
+        data_content: {
+            ...cloneDeep(data_content),
+            heading_title: module_7_handle(index, map_index) ? '' : data_content.heading_title,
+            subtitle: module_7_handle(index, map_index) ? '' : data_content.subtitle,
+            goods_outerflex: item.outerflex,
+            goods_flex: item.flex,
+            goods_num: item.num,
+        },
         data_style: {
             ...cloneDeep(data_style),
-            goods_price_size: show_padding(index, map_index) ? 12 : 18,
+            title_data_gap: item.title_text_gap,
+            goods_price_size: different_styles(index, map_index) ? 12 : 18,
             chunk_padding: {
-                padding: show_padding(index, map_index) ? 10 : 0,
-                padding_top: show_padding(index, map_index) ? 10 : 20,
-                padding_bottom: show_padding(index, map_index) ? 10 : 20,
-                padding_left: show_padding(index, map_index) ? 10 : 15,
-                padding_right: show_padding(index, map_index) ? 10 : 15,
+                padding: module_7_handle(index, map_index) ? 0 : 0,
+                padding_top: module_7_handle(index, map_index) ? 0 : 20,
+                padding_bottom: module_7_handle(index, map_index) ? 0 : 20,
+                padding_left: module_7_handle(index, map_index) ? 0 : 15,
+                padding_right: module_7_handle(index, map_index) ? 0 : 15,
+            },
+            goods_chunk_padding: {
+                padding: module_7_handle(index, map_index) ? 10 : 0,
+                padding_top: module_7_handle(index, map_index) ? 10 : 0,
+                padding_bottom: module_7_handle(index, map_index) ? 10 : 0,
+                padding_left: module_7_handle(index, map_index) ? 10 : 0,
+                padding_right: module_7_handle(index, map_index) ? 10 : 0,
             },
             carouselKey: get_math(),
         }
@@ -263,15 +302,23 @@ const padding_handle = [
     { index: 5, index_index: [0, 1] }, 
     { index: 6, index_index: [0, 1, 2, 3] },
     { index: 7, index_index: [0, 1] },
-    { index: 8, index_index: [1] },
+    { index: 8, index_index: [1, 2, 3] },
 ]
-const show_padding = (index:number, map_index:number) => {
+const different_styles = (index:number, map_index:number) => {
     const list = padding_handle.filter(item => item.index == index && item.index_index.includes(map_index))
-    if (list.length > 0 || (index == 7 && ![0, 1].includes(map_index))) {
+    if (list.length > 0) {
         return true;
     }
     return false;
 }
+
+const module_7_handle = (index:number, map_index:number) => {
+    return index == 7 && ![0, 1].includes(map_index);
+}
+// 密度切换时情况数据
+const density_change = () => {
+    form.value.data_magic_list = [];
+}
 //#endregion
 const data_title = (item: any) => {
     let title = `共有`;
diff --git a/src/components/model-img-magic/index.vue b/src/components/model-img-magic/index.vue
index 5dc19bb0..4f41cef2 100644
--- a/src/components/model-img-magic/index.vue
+++ b/src/components/model-img-magic/index.vue
@@ -86,7 +86,7 @@ interface CubeItem {
     };
     img: string;
 }
-const density = ref('4');
+const density = computed(() => form.value?.magic_cube_density || 4);
 //单元魔方宽度。
 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
 //单元魔方高度。
@@ -170,7 +170,7 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
         object-fit: cover;
     }
     .image-slot img {
-        width: 6rem;
+        width: 4rem;
     }
 }
 </style>
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 50287a5a..744dc152 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -42,7 +42,16 @@
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
-                <div class="mb-12">展示设置</div>
+                <div class="mb-12 flex-row jc-sb align-c">
+                    展示设置 
+                    <template v-if="form.style_actived === 11">
+                        <el-radio-group v-model="form.magic_cube_density" @change="density_change">
+                            <el-radio-button label="4X4" :value="4" />
+                            <el-radio-button label="6X6" :value="6" />
+                            <el-radio-button label="8X8" :value="8" />
+                        </el-radio-group>
+                    </template>
+                </div>
                 <el-form-item label-width="0" class="show-config">
                     <!-- 风格3 -->
                     <template v-if="form.style_actived == 2">
@@ -74,7 +83,7 @@
                         </div>
                     </template>
                     <template v-else>
-                        <magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" :img-fit="form.img_fit" @selected_click="selected_click"></magic-cube>
+                        <magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" :cube-height="cubeHeight" :img-fit="form.img_fit" @selected_click="selected_click"></magic-cube>
                     </template>
                 </el-form-item>
             </card-container>
@@ -102,7 +111,6 @@ const props = defineProps({
     },
 });
 const style_list = ['heng2', 'shu2', 'shu3', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-1ge', 'a-4x4'];
-const img_fit_10 = 'contain';
 // 风格
 const style_show_list = [
     [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, img: [], img_link: {} }, { start: {x: 1, y: 3},end: {x: 4, y: 4},img: [], img_link: {}}], // 风格1
@@ -123,7 +131,6 @@ const cubeWidth = ref(400);
 const cubeHeight = ref(400);
 const style_width = computed(() => cubeWidth.value + 'px');
 const style_height = computed(() => cubeHeight.value + 'px');
-
 onMounted(() => {
     handleResize();
     window.addEventListener('resize', handleResize);
@@ -154,6 +161,9 @@ const style_click = (index: number) => {
     form.value.img_magic_list = cloneDeep(style_show_list[index]);
     form.value.style_actived = index;
     selected_active.value = 0;
+    if (index != 11) {
+        form.value.magic_cube_density = 4;
+    }
     if (index === 10) {
         if (window.innerWidth <= 1560) {
             cubeWidth.value = 330;
@@ -166,6 +176,9 @@ const style_click = (index: number) => {
         handleResize();
     }
 }
+const density_change = () => {
+    form.value.img_magic_list = [];
+}
 // 选中的点击事件
 const selected_click = (index: number) => {
     selected_active.value = index;
diff --git a/src/config/const/data-magic.ts b/src/config/const/data-magic.ts
index 7745e6f9..c3b50ec5 100644
--- a/src/config/const/data-magic.ts
+++ b/src/config/const/data-magic.ts
@@ -8,6 +8,7 @@ interface data_magic {
 }
 interface defaultSearch {
     content: {
+        magic_cube_density: number;
         style_actived: number;
         container_height: number;
         data_magic_list: data_magic[];
@@ -21,6 +22,8 @@ interface defaultSearch {
 
 const defaultSearch: defaultSearch = {
     content: {
+        // 数据密度 4 x 4 | 6 x 6 | 8 x 8
+        magic_cube_density: 4,
         // 样式风格
         style_actived: 0,
         // 容器高度
diff --git a/src/config/const/img-magic.ts b/src/config/const/img-magic.ts
index 4d5173f3..2e475931 100644
--- a/src/config/const/img-magic.ts
+++ b/src/config/const/img-magic.ts
@@ -14,6 +14,7 @@ interface defaultSearch {
         img_fit: string;
         limit_size: string,
         image_height: number;
+        magic_cube_density: number;
     };
     style: {
         radius: number;
@@ -53,6 +54,8 @@ const defaultSearch: defaultSearch = {
         limit_size: '0',
         // 图片高度
         image_height: 100,
+        // 魔方密度
+        magic_cube_density: 4,
     },
     style: {
         // 图片圆角