From 1f693eb64b5151805c69ddd1ea0c9ffaa604f992 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, 12 Nov 2024 16:28:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE=E5=A4=96?=
 =?UTF-8?q?=E8=BE=B9=E8=B7=9D=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/div-content/index.vue   |  6 ++++--
 src/components/model-custom/index.vue         | 20 ++++++++-----------
 src/components/model-data-magic/index.vue     | 12 +++++++----
 .../model-search/model-search-styles.vue      |  2 +-
 src/views/layout/components/main/index.vue    | 19 ++++++++++++------
 5 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index 4cf66ee7..6dc8f90a 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -74,7 +74,7 @@
             </template>
             <!-- 数据魔方 -->
             <template v-else-if="item.key == 'data-magic'">
-                <model-data-magic :key="item.com_data" :value="item.com_data" :show-tabs="item.show_tabs == '1'"></model-data-magic>
+                <model-data-magic :key="item.com_data" :value="item.com_data" :outer-container-padding="outerContainerPadding" :show-tabs="item.show_tabs == '1'"></model-data-magic>
             </template>
             <!-- 热区 -->
             <template v-else-if="item.key == 'hot-zone'">
@@ -82,7 +82,7 @@
             </template>
             <!-- 自定义 -->
             <template v-else-if="item.key == 'custom'">
-                <model-custom :key="item.com_data" :value="item.com_data" :show-tabs="item.show_tabs == '1'"></model-custom>
+                <model-custom :key="item.com_data" :value="item.com_data" :outer-container-padding="outerContainerPadding" :show-tabs="item.show_tabs == '1'"></model-custom>
             </template>
             <!-- 营销组件 -->
             <!-- 优惠券 -->
@@ -122,6 +122,7 @@ interface Props {
     showModelBorder: boolean;
     isTabs?: boolean;
     mainContentStyle: string;
+    outerContainerPadding: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -129,6 +130,7 @@ const props = withDefaults(defineProps<Props>(), {
     showModelBorder: false,
     isTabs: false,
     mainContentStyle: '',
+    outerContainerPadding: 0,
 });
 const diy_data = ref(props.diyData);
 
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 2b12bb97..508f1fbb 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -32,6 +32,10 @@ const props = defineProps({
         default: () => {
             return {};
         },
+    },
+    outerContainerPadding: {
+        type: Number,
+        default: 0,
     }
 });
 // 用于页面判断显示
@@ -45,27 +49,19 @@ const { form, new_style } = toRefs(state);
 const custom_height = computed(() => form.value.height * scale.value + 'px');
 const div_width = ref(0);
 const scale = ref(1);
-// 获取当前宽度 和 缩放比例
-onMounted(() => {
-    const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
-    // 根据容器宽度来计算内部大小
-    div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
-    // 获得对应宽度的比例
-    scale.value = div_width.value / 390;
-});
 const percentage_count = (val: number, container_size: number) => {
     return val * scale.value + 'px';
 };
 // 公共样式
 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));
-watch(() => new_style.value.common_style, (val) => {
-    const { margin_left, margin_right, padding_left, padding_right } = val;
+watchEffect(() => {
+    const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
     // 根据容器宽度来计算内部大小
-    div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
+    div_width.value = 390 - margin_left - margin_right - padding_left - padding_right - props.outerContainerPadding;
     // 获得对应宽度的比例
     scale.value = div_width.value / 390;
-}, { deep: true });
+});
 </script>
 <style lang="scss" scoped>
 .custom-other {
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 09293e3b..3290739a 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -111,6 +111,10 @@ const props = defineProps({
             return {};
         },
     },
+    outerContainerPadding: {
+        type: Number,
+        default: 0,
+    }
 });
 // 用于页面判断显示
 const state = reactive({
@@ -346,13 +350,13 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
 // 图片魔方的缩放比例
 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;
+watchEffect(() => {
+    const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
     // 根据容器宽度来计算内部大小
-    typewidth.value = 390 - margin_left - margin_right - padding_left - padding_right;
+    typewidth.value = 390 - margin_left - margin_right - padding_left - padding_right - props.outerContainerPadding;
     // 获得对应宽度的比例
     magic_scale.value = typewidth.value / 390;
-}, { immediate:true, deep: true });
+});
 </script>
 <style lang="scss" scoped>
 // 图片魔方是一个正方形，根据宽度计算高度
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index 8258f918..07ceb761 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -13,7 +13,7 @@
             <template v-if="search_content.is_search_show == '1'">
                 <card-container>
                     <div class="mb-12">搜索按钮</div>
-                    <el-form-item label="搜索按钮">
+                    <el-form-item label="按钮文字">
                         <color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
                     </el-form-item>
                     <el-form-item v-if="content.search_type != 'img'" label="背景设置">
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 7859448f..ccc05730 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -68,12 +68,12 @@
                     </div>
                     <!-- 页面设置 -->
                     <page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" :scoll-top="scoll_top" @page_settings="page_settings"></page-settings>
-                    <div class="model-wall" :style="`margin-top: ${top_margin}px;`">
+                    <div class="model-wall" :style="`margin-top: ${top_margin}px;${main_content_up_and_down_style}` ">
                         <div class="model-wall-content" :style="`padding-top:${top_padding}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
-                            <div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true)" @del="del"></div-content>
+                            <div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" :outer-container-padding="outer_container_padding" @on_choose="set_tabs_event(true)" @del="del"></div-content>
                             <div v-if="tabs_data.length > 0" class="seat"></div>
                             <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
-                                <div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
+                                <div-content :diy-data="diy_data" :show-model-border="show_model_border" :main-content-style="main_content_style" :outer-container-padding="outer_container_padding" @on_choose="on_choose" @del="del" @copy="copy" @move-up="moveUp" @move-down="moveDown"></div-content>
                             </VueDraggable>
                         </div>
                     </div>
@@ -88,7 +88,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, get_math, gradient_computer, padding_computer, online_url } from '@/utils';
+import { background_computer, get_math, gradient_computer } from '@/utils';
 import { cloneDeep, isEmpty } from 'lodash';
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import defaultSettings from './index';
@@ -152,6 +152,8 @@ const top_margin = ref(0);
 const content_style = ref('');
 const content_img_style = ref('');
 const main_content_style = ref('');
+const main_content_up_and_down_style = ref('');
+const outer_container_padding = ref(0);
 const bottom_navigation_show = ref(true);
 // 更新数据第一个的安全距离
 const set_padding_top_value = () => {
@@ -183,8 +185,13 @@ watchEffect(() => {
         const new_style = data.style;
         content_style.value = gradient_computer(new_style.common_style);
         content_img_style.value = background_computer(new_style.common_style);
-
-        main_content_style.value = padding_computer(new_style.common_style);
+        const { padding_top = 0, padding_left = 0, padding_right = 0, padding_bottom = 0 } = new_style.common_style;
+        // 外容器的上下间距
+        main_content_up_and_down_style.value = `padding: ${padding_top}px 0px ${padding_bottom}px 0px;`;
+        // 外容器的左右间距
+        main_content_style.value = `padding: 0px ${ padding_right }px 0px ${ padding_left }px;`;
+        // 外容器的左右间距总数
+        outer_container_padding.value = padding_right + padding_right;
 
         const { immersive_style, up_slide_display, data_alone_row_space, general_safe_distance_value } = new_style;
         // 不开启沉浸式 和 上滑显示