From 49016bf21e2585706d98ec14cc6548a971d90256 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, 15 Oct 2024 16:34:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-panel/model-panel-style.vue         |  3 ++
 src/components/common/div-content/index.vue   |  2 +-
 .../model-custom/components/index-default.ts  |  1 +
 .../model-custom/components/index.vue         | 19 ++++++-----
 .../components/right-side-operation/index.vue |  4 +--
 .../components/product-list-show.vue          |  2 +-
 src/components/model-data-magic/index.vue     |  5 +--
 .../model-data-magic-content.vue              | 34 +++++++++++++------
 src/components/page-settings/page-setting.vue |  2 +-
 src/config/const/header-nav.ts                |  2 +-
 10 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/components/common/custom-module/model-panel/model-panel-style.vue b/src/components/common/custom-module/model-panel/model-panel-style.vue
index 359fc89b..46b0d18d 100644
--- a/src/components/common/custom-module/model-panel/model-panel-style.vue
+++ b/src/components/common/custom-module/model-panel/model-panel-style.vue
@@ -3,6 +3,9 @@
         <el-form :model="form" label-width="70">
             <card-container>
                 <div class="mb-12">容器设置</div>
+                <el-form-item label="链接">
+                    <url-value v-model="form.link"></url-value>
+                </el-form-item>
                 <el-form-item label="背景颜色">
                     <div class="flex-col gap-10 w">
                         <div class="size-12">背景色</div>
diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index 28fada9f..ad10df87 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -287,7 +287,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
     top: 0;
     left: -0.2rem;
     border: 0.2rem solid $cr-main;
-    z-index: 1;
+    z-index: 99999;
 }
 .plug-in-animation {
     transition: all 0.3s ease-in-out;
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 483d60ed..719181cf 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -128,6 +128,7 @@ export const panel_com_data = {
     com_width: 100,
     com_height: 100,
     staging_height: 100,
+    link: {},
     icon_rotate: 0,
     background_img_style: '2',
     background_img: [],
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index e005bc55..b9320d10 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -288,10 +288,9 @@ const previous_layer = (index: number) => {
         const old_data = get_diy_index_data(index);
         // 删除当前位置信息
         diy_data.value.splice(index, 1);
-        // 将数据插入上一层数据中
-        diy_data.value.splice(index + 1, 0, old_data);
-        // 设置对应的位置为显示
-        set_show_tabs(index + 1);
+        // 将数据插入下一层数据中
+        diy_data.value.splice(index - 1, 0, old_data);
+        set_show_tabs(index - 1);
     }
 }
 
@@ -301,9 +300,10 @@ const underlying_layer = (index: number) => {
         const old_data = get_diy_index_data(index);
         // 删除当前位置信息
         diy_data.value.splice(index, 1);
-        // 将数据插入下一层数据中
-        diy_data.value.splice(index - 1, 0, old_data);
-        set_show_tabs(index - 1);
+        // 将数据插入上一层数据中
+        diy_data.value.splice(index + 1, 0, old_data);
+        // 设置对应的位置为显示
+        set_show_tabs(index + 1);
     }
 }
 //组件置顶
@@ -337,7 +337,7 @@ const get_diy_index_data = (index: number) => {
 };
 // 设置当前选中的是那个
 const set_show_tabs = (index: number) => {
-    is_show_component_line.value = false;
+    // is_show_component_line.value = false;
     diy_data.value.forEach((item, for_index) => {
         // 先将全部的设置为false,再将当前选中的设置为true
         item.show_tabs = '0';
@@ -447,8 +447,11 @@ const drop = (event: any) => {
         let location_y = event.offsetY;
         // 使用新函数调整位置
         const { x: adjustedX, y: adjustedY } = adjustPosition(location_x, location_y, com_width, com_height, 390, center_height.value);
+        // 计算存在多少个相同的key
+        const list = diy_data.value.filter(item => item.key == draggedItem.value.key);
         const newItem = {
             ...draggedItem.value,
+            new_name: list.length > 0 ? draggedItem.value.name + list.length : draggedItem.value.name, // 默认添加别名
             location: {
                 x: adjustedX,
                 y: adjustedY,
diff --git a/src/components/model-custom/components/right-side-operation/index.vue b/src/components/model-custom/components/right-side-operation/index.vue
index 92bc5f3d..79f48104 100644
--- a/src/components/model-custom/components/right-side-operation/index.vue
+++ b/src/components/model-custom/components/right-side-operation/index.vue
@@ -8,10 +8,10 @@
                 <el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
             </el-tooltip>
             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="前置一层" placement="right">
-                <el-icon :class="['iconfont icon-arrow-top', { 'disabled': index === dataLength - 1 }]" @click.stop="previous_layer(index, index === dataLength - 1)" />
+                <el-icon :class="['iconfont icon-arrow-top', { 'disabled': index === 0 }]" @click.stop="previous_layer(index, index === 0)" />
             </el-tooltip>
             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="后置一层" placement="right">
-                <el-icon :class="['iconfont icon-arrow-bottom', { 'disabled': index === 0 }]" @click.stop="underlying_layer(index, index === 0)" />
+                <el-icon :class="['iconfont icon-arrow-bottom', { 'disabled': index === dataLength - 1 }]" @click.stop="underlying_layer(index, index === dataLength - 1)" />
             </el-tooltip>
             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置顶" placement="right">
                 <el-icon :class="['iconfont icon-top-up', { 'disabled': index === 0 }]" @click.stop="top_up(index, index === 0)" />
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 8b8d5b3b..427ec308 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -70,7 +70,7 @@
                     <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 gap-20">
+                    <div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
                         <div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :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 }}
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index f23ffaef..fed9ee01 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -8,7 +8,7 @@
                         <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-20" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
+                                    <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="flex-col gap-5 tl">
                                             <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                             <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
@@ -39,7 +39,7 @@
                     <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="[spacing_processing(index) ? 'gap-20 w h flex-col' : 'gap-10 w h flex-col']" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
+                                <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="flex-col gap-5 tl">
                                         <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                         <p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
@@ -118,6 +118,7 @@ interface data_magic {
     };
     num: number;
     flex: string;
+    title_text_gap: number;
     outerflex: string;
     heading_title?: string;
     subtitle?: string;
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 83283cd8..f9fecf79 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -117,15 +117,15 @@ const data_content = {
 
 // 不同风格的数据
 const style_show_list = [
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row'}], // 风格1
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }], // 风格2
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row' }],// 风格3
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格4
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格5
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }],// 风格6
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格7
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格8
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格9
+    [{ 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: '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
 ]
 const tabs_name = ref('content');
 const state = reactive({
@@ -180,6 +180,7 @@ const magic_list = (index: number) => {
         data_content: cloneDeep(data_content),
         data_style: {
             ...cloneDeep(data_style),
+            goods_price_size: show_padding(index, map_index) ? 12 : 18,
             chunk_padding: {
                 padding: show_padding(index, map_index) ? 10 : 0,
                 padding_top: show_padding(index, map_index) ? 10 : 20,
@@ -197,8 +198,21 @@ const selected_click = (index: number) => {
     selected_active.value = index;
     tabs_name.value = 'content';
 }
+const padding_handle = [
+    { index: 2, index_index: [0 , 1] },
+    { index: 3, index_index: [1 , 2] },
+    { index: 4, index_index: [1 , 2] },
+    { 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] },
+]
 const show_padding = (index:number, map_index:number) => {
-    return index == 7 && ![0, 1].includes(map_index)
+    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))) {
+        return true;
+    }
+    return false;
 }
 //#endregion
 const data_title = (item: any) => {
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index fa5c4cd0..93c487eb 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -37,7 +37,7 @@ const default_data = {
         header_background_img: [],
         header_background_title_color: '#333',
         header_background_title_typeface: '500',
-        header_background_title_size: 16,
+        header_background_title_size: 14,
         function_buttons_type: 'black',
         immersive_style: '0',
         up_slide_display: '1',
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index 10ff24af..4f98becb 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -97,7 +97,7 @@ const defaultFooterNav: DefaultFooterNav = {
         header_background_img: [],
         header_background_title_color: '#333',
         header_background_title_typeface: '500',
-        header_background_title_size: 16,
+        header_background_title_size: 14,
         function_buttons_type: '0',
         immersive_style: '0',
         up_slide_display: '1',