From 7de16a884eaf3478375e04cb3fe6284ae4d0598c 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 17:57:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=86=85=E8=BE=B9=E8=B7=9D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/padding/index.vue         | 18 ++++++++++++------
 src/components/common/common-styles/index.vue |  6 +++++-
 src/components/model-nav-group/index.vue      |  5 +++++
 src/components/page-settings/page-styles.vue  |  2 +-
 src/views/layout/components/main/index.vue    |  5 +----
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/base/padding/index.vue b/src/components/base/padding/index.vue
index 1457e349..e76e32b2 100644
--- a/src/components/base/padding/index.vue
+++ b/src/components/base/padding/index.vue
@@ -9,12 +9,14 @@
             </el-tooltip>
         </div>
         <div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
-            <div class="flex-width-half pr-10">
-                <input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
-            </div>
-            <div class="flex-width-half pl-10">
-                <input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
-            </div>
+            <template v-if="isUpDown">
+                <div class="flex-width-half pr-10">
+                    <input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
+                </div>
+                <div class="flex-width-half pl-10">
+                    <input-number v-model="form.padding_bottom" :max="200" icon-name="enter-b" @update:model-value="pb_event"></input-number>
+                </div>
+            </template>
             <div class="flex-width-half pr-10">
                 <input-number v-model="form.padding_left" :max="200" icon-name="enter-l" @update:model-value="pl_event"></input-number>
             </div>
@@ -31,6 +33,10 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    isUpDown: {
+        type: Boolean,
+        default: true,
+    },
 });
 // 用于页面判断显示
 const state = reactive({
diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 0e5fb830..7b5744c6 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -25,7 +25,7 @@
                     <slider v-model="form.module_z_index" :min="0" :max="10"></slider>
                 </el-form-item>
                 <el-form-item label="内边距">
-                    <padding :value="form" @update:value="padding_change"></padding>
+                    <padding :value="form" :is-up-down="isUpDown" @update:value="padding_change"></padding>
                 </el-form-item>
                 <el-form-item v-if="isMargin" label="外边距">
                     <margin :value="form" @update:value="margin_change"></margin>
@@ -110,6 +110,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    isUpDown: {
+        type: Boolean,
+        default: true,
+    }
 });
 // value 和初始化数据合并数据
 let form = ref(props.value);
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index cc9b79f4..2cd3f352 100644
--- a/src/components/model-nav-group/index.vue
+++ b/src/components/model-nav-group/index.vue
@@ -100,6 +100,11 @@ const interval_list = ref({
 
 //监听屏幕缩放事件
 onMounted(() => {
+    nextTick(() => {
+        if (!isEmpty(bannerImg.value)) {
+            newHeight.value = (bannerImg.value[0]?.clientHeight || 100) + 'px';
+        }
+    });
     window.onresize = () => {
         newHeight.value = bannerImg.value[0]?.clientHeight || 100 + 'px';
     };
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 544d73a1..c93b12e6 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -102,7 +102,7 @@
             <model-search-styles :value="form" :content="props.content" :is-show-common="false"></model-search-styles>
         </template>
         <div class="bg-f5 divider-line" />
-        <common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" :is-floating-up="false" @update:value="common_styles_update" />
+        <common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" :is-floating-up="false" :is-up-down="false" @update:value="common_styles_update" />
     </div>
 </template>
 <script setup lang="ts">
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index ccc05730..2cb364d0 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -68,7 +68,7 @@
                     </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;${main_content_up_and_down_style}` ">
+                    <div class="model-wall" :style="`margin-top: ${top_margin}px;`">
                         <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" :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>
@@ -152,7 +152,6 @@ 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);
 // 更新数据第一个的安全距离
@@ -186,8 +185,6 @@ watchEffect(() => {
         content_style.value = gradient_computer(new_style.common_style);
         content_img_style.value = background_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;`;
         // 外容器的左右间距总数