From 383df6a3b0c159525f4d61786d419a99f48fd564 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 6 Nov 2024 14:49:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=AD=94=E6=96=B9=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue    | 15 ++--
 .../model-custom/components/index.vue         |  6 +-
 .../model-custom/model-custom-content.vue     |  7 +-
 .../components/custom/index.vue               | 72 +++++++++++++++++++
 .../components/product-list-show.vue          |  6 +-
 .../components/tabs-content.vue               | 21 ++++--
 .../components/tabs-styles.vue                | 23 +++---
 src/components/model-data-magic/index.vue     | 26 +++++--
 .../model-data-magic-content.vue              | 46 ++++++++----
 9 files changed, 174 insertions(+), 48 deletions(-)
 create mode 100644 src/components/model-data-magic/components/custom/index.vue

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index 72e26a99..6848c961 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -188,11 +188,13 @@ const onClickCubeItem = (event: any) => {
     let selectedItem = {} as CubeItem;
     //加入选中的。
     if (props.type == 'data') {
-        console.log(props.defaultContent);
         selectedItem = {
             start: selectingItem.start,
             end: selectingItem.end,
-            data_content: cloneDeep(props.defaultContent),
+            data_content: {
+               ...cloneDeep(props.defaultContent),
+               width: Math.round((props.cubeWidth / densityNum.value) * (selectingItem.end.x - selectingItem.start.x + 1))
+            },
             data_style: cloneDeep(props.defaultStyle),
         };
     } else {
@@ -262,12 +264,12 @@ const selected_click = (index: number) => {
     emits('selected_click', index);
 };
 const data_title = (item: CubeItem) => {
-    let title = `共有`;
+    let title = '';
     if (item.data_content) {
         if (item.data_content.data_type == 'goods') {
-            title += `${ item.data_content.goods_list.length }个商品`;
-        } else {
-            title += `${ item.data_content.images_list.length }个图片`;
+            title = `共有${ item.data_content.goods_list.length }个商品`;
+        } else if (item.data_content.data_type == 'images') {
+            title = `共有${ item.data_content.images_list.length }个图片`;
         }
     }
     return title;
@@ -324,6 +326,7 @@ const data_title = (item: CubeItem) => {
     }
     .cube-selected-text {
         font-size: 12px;
+        line-height: 16px;
         width: 100%;
         position: absolute;
         top: 50%;
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 1d5128b5..e53b628d 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -389,7 +389,11 @@ const cancel = () => {
 //#endregion
 //#region 容器高度发生变化时的处理
 const center_height = defineModel('height', { type: Number, default: 0 });
+const center_width = defineModel('width', { type: Number, default: 390 });
+
 const drag_area_height = computed(() => center_height.value + 'px');
+const drag_area_width = computed(() => center_width.value + 'px');
+
 const draggable_container = ref(true);
 let data = reactive<diy_content[]>([]);
 watch(() => center_height.value, () => {
@@ -861,7 +865,7 @@ defineExpose({
 .model-drag {
     overflow-y: scroll;
     .model-wall {
-        width: 39rem;
+        width: v-bind(drag_area_width);
         background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(135deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(135deg, transparent 75%, #e5e5e5 75%);
         background-size: 32px 32px;
         background-position: 0 0, 16px 0, 16px -16px, 0 16px;
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 3b94834e..e6ed0060 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -22,7 +22,7 @@
         <Dialog ref="dialog" @accomplish="accomplish">
             <div class="flex-row h w">
                 <!-- 左侧和中间区域 -->
-                <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.data_source_content" :list="custom_list" @right-update="right_update"></DragIndex>
+                <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :source-list="form.data_source_content" :list="custom_list" @right-update="right_update"></DragIndex>
                 <!-- 右侧配置区域 -->
                 <div class="settings">
                     <template v-if="diy_data.key === 'img'">
@@ -64,11 +64,16 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    magicWidth: {
+        type: Number,
+        default: 390,
+    }
 });
 
 const dialog = ref<expose | null>(null);
 const draglist = ref<diy_data | null>(null);
 const form = reactive(props.value);
+const center_width = ref(props.magicWidth);
 // 弹出框里的内容
 let custom_list = reactive([]);
 const center_height = ref(0);
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
new file mode 100644
index 00000000..b0b90661
--- /dev/null
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="w h oh" :style="style_container">
+        <div class="w h re custom-other oh">
+            <div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
+                <template v-if="item.key == 'text'">
+                    <model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
+                </template>
+                <template v-else-if="item.key == 'img'">
+                    <model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-image>
+                </template>
+                <template v-else-if="item.key == 'auxiliary-line'">
+                    <model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
+                </template>
+                <template v-else-if="item.key == 'icon'">
+                    <model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
+                </template>
+                <template v-else-if="item.key == 'panel'">
+                    <model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-panel>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { padding_computer } from '@/utils';
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+    },
+    magicScale: {
+        type: Number,
+        default: 1,
+    },
+    dataSpacing: {
+        type: Number,
+        default: 0,
+    }
+});
+// 用于页面判断显示
+const state = reactive({
+    form: props.value.data_content,
+    new_style: props.value.data_style,
+});
+// 如果需要解构，确保使用toRefs
+const { form, new_style } = toRefs(state);
+const scale = ref(1);
+const percentage_count = (val: number) => {
+    return val * scale.value + 'px';
+};
+// 公共样式
+const style_container = computed(() => padding_computer(new_style.value.chunk_padding));
+watchEffect(() => {
+    // 重新赋值
+    form.value = props.value.data_content;
+    new_style.value = props.value.data_style;
+
+    const { padding_left, padding_right } = new_style.value.chunk_padding;
+    // 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
+    const width = form.value.width - padding_left - padding_right - (props.dataSpacing / 2);
+    scale.value = (width / form.value.width) * props.magicScale;
+})
+</script>
+<style lang="scss" scoped>
+.main-content {
+    position: absolute;
+    overflow: hidden;
+}
+</style>
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 25515249..71993205 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -23,7 +23,7 @@
                 </div>
             </div>
         </template>
-        <template v-else-if="props.flex == 'col'">
+        <template v-else-if="props.flex == 'col_price_float'">
             <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)">
@@ -49,7 +49,7 @@
         <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')">
+                    <div class="w h flex-col" :style="style_img_container(props.goodStyle, 'col')">
                         <template v-if="!isEmpty(item.new_cover)">
                             <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
                         </template>
@@ -130,7 +130,7 @@ const style_img_container = computed(() => {
                 background_img: goods_background_img,
                 background_img_style: goods_background_img_style,
             }
-            return type == 'fill' ? background_computer(data) : padding_computer(goods_chunk_padding) + background_computer(data);
+            return type == 'col' ? 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 a7e8aab0..305ac0f8 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -35,8 +35,8 @@
             <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 value="col">上图下文</el-radio>
+                    <el-radio value="col_price_float">上图下文<span class="size-8">(价格浮动)</span></el-radio>
                 </el-radio-group>
             </el-form-item>
             <el-form-item label="每屏数量">
@@ -73,7 +73,7 @@
             <el-button class="mt-20 mb-20 w" @click="img_add">+添加</el-button>
         </card-container>
     </template>
-    <template v-else>
+    <template v-else-if="form.data_type == 'goods'">
         <div class="bg-f5 divider-line" />
         <card-container>
             <div class="mb-12">商品设置</div>
@@ -87,6 +87,17 @@
             <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
         </card-container>
     </template>
+    <template v-else-if="form.data_type == 'custom'">
+        <div class="bg-f5 divider-line" />
+        <model-custom-content :value="form" :magic-width="form.width"></model-custom-content>
+    </template>
+    <template v-else>
+        <div class="bg-f5 divider-line" />
+        <card-container>
+            <div class="mb-12">视频设置</div>
+
+        </card-container>
+    </template>
 </template>
 <script setup lang="ts">
 import { get_math } from '@/utils';
@@ -96,10 +107,6 @@ const props = defineProps({
     value: {
         type: Object,
         default: () => {},
-    },
-    isShowTitle: {
-        type: Boolean,
-        default: true,
     }
 });
 
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index b3d0b444..9de91def 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -27,10 +27,10 @@
                 </el-form-item>
             </template>
         </template>
+        <el-form-item label="内间距">
+            <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
+        </el-form-item>
         <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>
@@ -42,7 +42,7 @@
             <radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
         </el-form-item>
     </card-container>
-    <template v-if="tabs_content.data_type === 'goods' && isShowTitle">
+    <template v-if="tabs_content.data_type === 'goods'">
         <div class="bg-f5 divider-line" />
         <card-container>
             <div class="mb-12">标题样式</div>
@@ -119,10 +119,13 @@
             </el-form-item>
         </card-container>
     </template>
-    <div class="bg-f5 divider-line" />
-    <card-container>
-        <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
-    </card-container>
+    <template v-if="['goods', 'images'].includes(tabs_content.data_type)">
+        <div class="bg-f5 divider-line" />
+        <card-container>
+            <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
+        </card-container>
+    </template>
+    
 </template>
 <script setup lang="ts">
 import { pick, isEmpty, cloneDeep } from 'lodash';
@@ -134,10 +137,6 @@ const props = defineProps({
     content: {
         type: Object,
         default: () => ({}),
-    },
-    isShowTitle: {
-        type: Boolean,
-        default: true,
     }
 });
 
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 147d1f33..97395127 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -25,8 +25,10 @@
                                         </div>
                                     </div>
                                 </template>
-                                <template v-else>
-                                    <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                <template v-else-if="item.data_content.data_type == 'images'">
+                                    <div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
+                                        <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                    </div>
                                 </template>
                                 <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
                                     <template v-if="item.data_style.indicator_style == 'num'">
@@ -63,8 +65,13 @@
                                     </div>
                                 </div>
                             </template>
-                            <template v-else>
-                                <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                            <template v-else-if="item.data_content.data_type == 'images'">
+                                <div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
+                                    <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                </div>
+                            </template>
+                            <template v-else-if="item.data_content.data_type == 'custom'">
+                                <customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
                             </template>
                             <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
                                 <template v-if="item.data_style.indicator_style == 'num'">
@@ -84,6 +91,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import customIndex from './components/custom/index.vue';
 import { background_computer, common_styles_computer, get_math, gradient_computer, radius_computer, padding_computer, common_img_computer, is_number, percentage_count } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
@@ -325,6 +333,16 @@ const carousel_change = (index: number, key: number) => {
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
+// 图片魔方的缩放比例
+const magic_scale = ref(1);
+const typewidth = ref(0);
+watch(() => new_style.value.common_style, (val) => {
+    const { margin_left, margin_right, padding_left, padding_right } = val;
+    // 根据容器宽度来计算内部大小
+    typewidth.value = 390 - margin_left - margin_right - padding_left - padding_right;
+    // 获得对应宽度的比例
+    magic_scale.value = typewidth.value / 390;
+}, { deep: true });
 </script>
 <style lang="scss" scoped>
 // 图片魔方是一个正方形，根据宽度计算高度
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 20e2ed37..20ec75d2 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -49,10 +49,10 @@
                 <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>
+                        <tabs-content :value="form.data_magic_list[selected_active].data_content"></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>
+                        <tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content"></tabs-styles>
                     </el-tab-pane>
                 </el-tabs>
             </template>
@@ -164,37 +164,56 @@ const data_style = {
 }
 // 每个小模块独立的内容
 const data_content = {
+    // 列表数据类型
     data_type: 'goods',
+    // 主标题副标题处理
     heading_title_type: 'text',
     heading_title: '主标题',
     heading_title_img: [],
     subtitle: '副标题',
+    // 商品数据处理
     goods_list:[],
     goods_ids: '',
     goods_outerflex: 'row',
     goods_flex: 'row',
     goods_num: 1,
     is_show: ['title', 'price'],
+    // 图片数据处理
     img_fit: 'cover',
     images_list:[
         {
             carousel_img: [],
             carousel_link: {},
         }
-    ]
+    ],
+    // 自定义数据处理
+    // 容器的基础高度
+    height: 150,
+    // 容器基础的宽度
+    width: 0,
+    // 图片key  
+    img_key: '',
+    // 存放数据内容的id
+    data_source_content_value: '',
+    // 数据源内容
+    data_source_content: {},
+    // 数据源
+    data_source:'',
+    // 自定义内容列表
+    custom_list: []
 }
 
 // 不同风格的数据
 const style_show_list = [
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }], // 风格1
-    [{ 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: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20 }], // 风格2
-    [{ 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: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }],// 风格3
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20 }, { 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 }],// 风格4
-    [{ 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: '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
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }], // 风格1
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }], // 风格2
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }],// 风格3
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row', title_text_gap: 20, width: 390 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格4
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 390 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格5
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 390 }],// 风格6
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格7
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }],// 风格8
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }],// 风格9
     [], //风格10
 ]
 const tabs_name = ref('content');
@@ -261,6 +280,7 @@ const magic_list = (index: number) => {
         actived_index: 0,
         data_content: {
             ...cloneDeep(data_content),
+            width: item.width,
             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,
@@ -331,8 +351,6 @@ const data_title = (item: any) => {
     }
     return title;
 };
-// 除了第8个风格下的后3个不显示标题，其他的都显示
-const is_show_title = computed(() => !(form.value.style_actived == 7 && ![0, 1].includes(selected_active.value)));
 </script>
 <style lang="scss" scoped>
 .flex-item {