From b7af8c6d8f4513e074acb99cba67bc4652c5bfb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 15 Aug 2024 18:48:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=86=85=E8=BE=B9=E8=B7=9D?=
 =?UTF-8?q?=E5=8F=AF=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/magic-carousel.vue             |  2 +-
 .../components/product-list-show.vue          |  4 +-
 .../components/tabs-styles.vue                | 39 +++++++++++++------
 src/components/model-data-magic/index.vue     |  7 ++--
 .../model-data-magic-content.vue              | 19 ++++++++-
 5 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/magic-carousel.vue
index 387d6f0b..4ba3e857 100644
--- a/src/components/model-data-magic/components/magic-carousel.vue
+++ b/src/components/model-data-magic/components/magic-carousel.vue
@@ -5,7 +5,7 @@
                 <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
             </template>
             <template v-else>
-                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :value="item1.split_list" :content-img-radius="contentImgRadius"></product-list-show>
+                <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" :content-img-radius="contentImgRadius"></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 2c753edf..88275020 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -22,7 +22,7 @@
             <template v-else>
                 <div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
                     <image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
-                    <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10 pa-10">
+                    <div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
                         <div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
                         <div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
                     </div>
@@ -47,6 +47,7 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
+import { padding_computer } from '@/utils';
 
 interface Props {
     value: Array<any>;
@@ -56,6 +57,7 @@ interface Props {
     num: number;
     actived: number;
     isShow: Array<string>;
+    chunkPadding: internalStyle;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 982e1dea..08c2f029 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -33,18 +33,23 @@
         <el-form-item label="间隔时间">
             <slider v-model="form.interval_time" :max="100"></slider>
         </el-form-item>
-        <template v-if="tabs_content.data_type === 'commodity' && isShowTitle">
-            <el-form-item label="主标题">
-                <div class="flex-col gap-10 w">
-                    <color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
-                    <text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
-                </div>
-            </el-form-item>
-            <el-form-item label="副标题">
-                <div class="flex-col gap-10 w">
-                    <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
-                    <text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
-                </div>
+        <template v-if="tabs_content.data_type === 'commodity'">
+            <template v-if="isShowTitle">
+                <el-form-item label="主标题">
+                    <div class="flex-col gap-10 w">
+                        <color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
+                        <text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
+                    </div>
+                </el-form-item>
+                <el-form-item label="副标题">
+                    <div class="flex-col gap-10 w">
+                        <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
+                        <text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
+                    </div>
+                </el-form-item>
+            </template>
+            <el-form-item label="内间距">
+                <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
             </el-form-item>
         </template>
     </card-container>
@@ -53,6 +58,7 @@
     </card-container>
 </template>
 <script setup lang="ts">
+import { pick } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -75,6 +81,15 @@ const mult_color_picker_event = (arry: string[], type: number) => {
     form.value.color_list = arry;
     form.value.direction = type.toString();
 };
+const chunk_padding_change = (padding: any) => {
+    form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, [
+        'padding', 
+        'padding_top', 
+        'padding_bottom', 
+        'padding_left', 
+        'padding_right'
+    ]));
+};
 
 watchEffect(() => {
     form.value = props.value;
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 534e6356..86a9e52c 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -6,7 +6,7 @@
                 <div class="flex-row align-c jc-c style-size flex-wrap">
                     <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) }]">
                         <template v-if="item.data_content.data_type == 'commodity'">
-                            <div :class="['w h flex-col gap-20', {'ptb-20 plr-15': [0, 1].includes(index) }]">
+                            <div class="w h flex-col gap-20" :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>
@@ -35,7 +35,7 @@
             <template v-else>
                 <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 }`">
                     <template v-if="item.data_content.data_type == 'commodity'">
-                        <div class="ptb-20 plr-15 w h flex-col gap-20">
+                        <div class="w h flex-col gap-20" :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>
@@ -64,7 +64,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils';
+import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer, padding_computer } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -81,7 +81,6 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
-// const data_list = computed(() => form.value.data_magic_list);
 const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
 const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
 // 图片间距设置
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 b9c03cb4..d915094a 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -68,6 +68,13 @@ const data_style = {
     subtitle_color: '#FF852A',
     subtitle_typeface: 'normal',
     subtitle_size: 14,
+    chunk_padding: {
+        padding: 0,
+        padding_top: 20, 
+        padding_bottom: 20, 
+        padding_left: 15,
+        padding_right: 15,
+    },
     is_show: true,
     indicator_style: 'dot',
     indicator_location: 'center',
@@ -156,12 +163,19 @@ const style_click = (index: number) => {
 }
 // 规整复制的数据
 const magic_list = (index: number) => {
-    return cloneDeep(style_show_list[index]).map((item) => ({
+    return cloneDeep(style_show_list[index]).map((item, map_index) => ({
         ...item,
         actived_index: 0,
         data_content: cloneDeep(data_content),
         data_style: {
             ...cloneDeep(data_style),
+            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,
+            },
             carouselKey: get_math(),
         }
     }));
@@ -172,6 +186,9 @@ const selected_click = (index: number) => {
     selected_active.value = index;
     tabs_name.value = 'content';
 }
+const show_padding = (index:number, map_index:number) => {
+    return index == 7 && ![0, 1].includes(map_index)
+}
 //#endregion
 const data_title = (item: any) => {
     let title = `共有`;