From 2134860e13ff0a718592c0c4eaf7cec86791f38a 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, 27 Aug 2024 18:35:42 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/product-show-config/index.vue        | 2 +-
 src/components/model-shop-list/index.vue                   | 4 +++-
 src/components/model-shop-list/model-shop-list-content.vue | 6 ++++--
 src/components/model-shop-list/model-shop-list-styles.vue  | 2 +-
 src/components/model-shop-tabs/model-shop-tabs-content.vue | 6 ++++--
 src/components/model-shop-tabs/model-shop-tabs-styles.vue  | 2 +-
 src/layout/components/main/default/shop-list.ts            | 4 ++--
 src/layout/components/main/default/shop-tabs.ts            | 4 ++--
 8 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 901d0a39..0f083f91 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -63,7 +63,7 @@ const base_list = {
     ],
     shopping_button_list: [
         { name: '文字', value: 'text' },
-        { name: 'icon', value: 'icon' },
+        { name: '图标', value: 'icon' },
     ],
     shopping_cart_list: [
         { name: '进入商品详情页', value: '0' },
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 44eb9f95..19a54e4f 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -6,7 +6,9 @@
                     <div :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
                         <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
                         <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
-                            <span class="identifying">￥</span><span :style="trends_config('price')">{{ item.min_price }}</span>
+                            <span class="identifying">{{ item.show_price_symbol }}</span
+                            ><span :style="trends_config('price')">{{ item.min_price }}</span>
+                            <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
                         </div>
                     </div>
                 </template>
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index 0fcab93d..3646a4e5 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -152,8 +152,10 @@ const goods_list_sort = (new_list: any) => {
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
     form.value.theme = val;
-    if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
-        form.value.shop_type = '2';
+    if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
+        form.value.shop_type = 'icon';
+    } else {
+        form.value.shop_type = 'text';
     }
 };
 </script>
diff --git a/src/components/model-shop-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index c2704878..1d1a8967 100644
--- a/src/components/model-shop-list/model-shop-list-styles.vue
+++ b/src/components/model-shop-list/model-shop-list-styles.vue
@@ -57,7 +57,7 @@
                     </el-form-item>
                 </template>
                 <template v-else>
-                    <el-form-item label="icon设置">
+                    <el-form-item label="图标设置">
                         <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
                     </el-form-item>
                 </template>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index afd2f40c..17b53352 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -229,8 +229,10 @@ const tabs_theme_change = (val: string | number | boolean | undefined):void => {
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
     form.value.theme = val;
-    if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
-        form.value.shop_type = '2';
+    if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
+        form.value.shop_type = 'icon';
+    } else {
+        form.value.shop_type = 'text';
     }
 };
 </script>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index e3be4d5d..37f93194 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-styles.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
@@ -69,7 +69,7 @@
                     </el-form-item>
                 </template>
                 <template v-else>
-                    <el-form-item label="icon设置">
+                    <el-form-item label="图标设置">
                         <color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
                     </el-form-item>
                 </template>
diff --git a/src/layout/components/main/default/shop-list.ts b/src/layout/components/main/default/shop-list.ts
index a6c747fb..1f303703 100644
--- a/src/layout/components/main/default/shop-list.ts
+++ b/src/layout/components/main/default/shop-list.ts
@@ -92,8 +92,8 @@ const defaultProductList: DefaultProductList = {
         },
         content_outer_spacing: 10, // 商品间距
         content_spacing: 10,
-        content_outer_width: 104,
-        content_outer_height: 189,
+        content_outer_width: 140,
+        content_outer_height: 232,
         shop_title_typeface: '500',
         shop_title_size: 14,    
         shop_title_color: "#333333",
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index 4b3c19ea..572e4461 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -116,8 +116,8 @@ const defaultProductList: DefaultProductList = {
         },
         content_outer_spacing: 10,
         content_spacing: 10,
-        content_outer_width: 104,
-        content_outer_height: 189,
+        content_outer_width: 140,
+        content_outer_height: 232,
         shop_title_typeface: '500',
         shop_title_size: 14,    
         shop_title_color: "#333333",

From 703736258e519986e247ba167f0bf07ec639857d 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, 27 Aug 2024 18:42:27 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/product-show-config/index.vue      | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 0f083f91..09b33d68 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -3,10 +3,10 @@
         <div class="mb-12">显示内容</div>
         <el-form-item label="是否显示">
             <el-checkbox-group v-model="form.is_show">
-                <el-checkbox v-for="item in base_list.list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+                <el-checkbox v-for="item in base_list.list_show_list.filter(item => item.type.includes(form.theme))" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
             </el-checkbox-group>
         </el-form-item>
-        <el-form-item label="价格独行">
+        <el-form-item v-if="['0', '1', '2'].includes(form.theme)" label="价格独行">
             <el-switch v-model="form.is_price_solo"></el-switch>
         </el-form-item>
     </card-container>
@@ -49,17 +49,16 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form } = toRefs(state);
-
 const base_list = {
     list_show_list: [
-        { name: '商品名称', value: 'title' },
-        { name: '商品标签', value: 'plugins_view_icon' },
-        { name: '商品售价', value: 'price' },
-        { name: '商品销量', value: 'sales_count' },
+        { name: '商品名称', value: 'title', type:['0', '1', '2', '3', '4', '5', '6']},
+        { name: '商品标签', value: 'plugins_view_icon', type:['0', '1', '2'] },
+        { name: '商品售价', value: 'price', type:['0', '1', '2', '3', '4', '5', '6'] },
+        { name: '商品销量', value: 'sales_count', type:['0', '1', '2'] },
         // { name: '商品评分', value: '4' },
-        { name: '商品原价', value: 'original_price' },
-        { name: '售价单位', value: 'price_unit' },
-        { name: '原价单位', value: 'original_price_unit' },
+        { name: '商品原价', value: 'original_price', type:['0', '1', '2'] },
+        { name: '售价单位', value: 'price_unit', type:['0', '1', '2', '3', '4', '5', '6'] },
+        { name: '原价单位', value: 'original_price_unit', type:['0', '1', '2'] },
     ],
     shopping_button_list: [
         { name: '文字', value: 'text' },

From 450d88f391e4e63dd6ff303df6baec8154f8d0c9 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, 27 Aug 2024 18:51:00 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/product-show-config/index.vue           | 14 --------------
 src/components/model-shop-list/index.vue           |  2 +-
 .../model-shop-list/model-shop-list-content.vue    |  2 +-
 .../model-shop-tabs/model-shop-tabs-content.vue    |  3 ++-
 4 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 09b33d68..80f9d653 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -69,20 +69,6 @@ const base_list = {
         { name: '商品加购', value: '1' }
     ]
 };
-
-const shop_type = computed(() => {
-    return (item: { value: string; }) => {
-        return item.value == form.value.shop_type;
-    };
-});
-
-const shopping_button_click = (item: { value: string; }) => {
-    if (['3','4','5'].includes(form.value.theme) && ['0', '1'].includes(item.value)) {
-        return;
-    } else {
-        form.value.shop_type = item.value;
-    }
-};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue
index 19a54e4f..acb59259 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -5,7 +5,7 @@
                 <template v-if="theme == '6'">
                     <div :class="['flex-row align-c jc-sb ptb-15 mlr-10 gap-20', { 'br-b-e': index != list.length - 1 }]">
                         <div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
-                        <div v-if="is_show('price')" class="num" :style="`color: ${new_style.shop_price_color}`">
+                        <div v-if="is_show('price')" class="num nowrap" :style="`color: ${new_style.shop_price_color}`">
                             <span class="identifying">{{ item.show_price_symbol }}</span
                             ><span :style="trends_config('price')">{{ item.min_price }}</span>
                             <span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index 3646a4e5..7f11cab1 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -154,7 +154,7 @@ const change_style = (val: any): void => {
     form.value.theme = val;
     if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
         form.value.shop_type = 'icon';
-    } else {
+    } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
         form.value.shop_type = 'text';
     }
 };
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index 17b53352..cd9f49f9 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -228,10 +228,11 @@ const tabs_theme_change = (val: string | number | boolean | undefined):void => {
 };
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
+    form.value.theme = val;
     form.value.theme = val;
     if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
         form.value.shop_type = 'icon';
-    } else {
+    } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
         form.value.shop_type = 'text';
     }
 };

From bc8168fae062a70379e916617564861bd4905cd5 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, 27 Aug 2024 18:52:22 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-shop-tabs/model-shop-tabs-content.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index cd9f49f9..58d5e475 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -228,7 +228,6 @@ const tabs_theme_change = (val: string | number | boolean | undefined):void => {
 };
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
-    form.value.theme = val;
     form.value.theme = val;
     if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
         form.value.shop_type = 'icon';

From 87d94d67e19f093187ecb5f1ea94ba7109aea667 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, 27 Aug 2024 19:00:51 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/product-show-config/index.vue         |  6 +++++-
 .../model-shop-list/model-shop-list-content.vue  | 16 +++++++++++-----
 .../model-shop-tabs/model-shop-tabs-content.vue  | 16 +++++++++++-----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 80f9d653..5dae4deb 100644
--- a/src/components/common/product-show-config/index.vue
+++ b/src/components/common/product-show-config/index.vue
@@ -17,7 +17,7 @@
         </el-form-item>
         <el-form-item label="按钮样式">
             <div class="flex-col w gap-10">
-                <el-radio-group v-model="form.shop_type">
+                <el-radio-group v-model="form.shop_type" @change="change_shop_type">
                     <el-radio v-for="item in base_list.shopping_button_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                 </el-radio-group>
                 <template v-if="form.shop_type == 'text'">
@@ -69,6 +69,10 @@ const base_list = {
         { name: '商品加购', value: '1' }
     ]
 };
+const emit = defineEmits(['change_shop_type']);
+const change_shop_type = () => {
+    emit('change_shop_type');
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index 7f11cab1..389f78d5 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -50,7 +50,7 @@
                     </template>
                 </card-container>
                 <!-- 商品显示的配置信息 -->
-                <product-show-config :value="form"></product-show-config>
+                <product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
             </div>
             <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
         </el-form>
@@ -152,12 +152,18 @@ const goods_list_sort = (new_list: any) => {
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
     form.value.theme = val;
-    if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
-        form.value.shop_type = 'icon';
-    } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
-        form.value.shop_type = 'text';
+    if (!is_revise.value) {
+        if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
+            form.value.shop_type = 'icon';
+        } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
+            form.value.shop_type = 'text';
+        }
     }
 };
+const is_revise = ref(false);
+const change_shop_type = () => {
+    is_revise.value = true;
+}
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index 58d5e475..db674381 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -77,7 +77,7 @@
                 </div>
             </card-container>
             <!-- 商品显示的配置信息 -->
-            <product-show-config :value="form"></product-show-config>
+            <product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
             <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
         </el-form>
     </div>
@@ -229,12 +229,18 @@ const tabs_theme_change = (val: string | number | boolean | undefined):void => {
 // 选择某些风格时， 切换到对应的按钮
 const change_style = (val: any): void => {
     form.value.theme = val;
-    if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
-        form.value.shop_type = 'icon';
-    } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
-        form.value.shop_type = 'text';
+    if (!is_revise.value) {
+        if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
+            form.value.shop_type = 'icon';
+        } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
+            form.value.shop_type = 'text';
+        }
     }
 };
+const is_revise = ref(false);
+const change_shop_type = () => {
+    is_revise.value = true;
+}
 </script>
 <style lang="scss" scoped>
 .content {

From 207f69fdacbdd1ecbba814a3c6244ef9c4165f1c 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, 28 Aug 2024 11:22:28 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E6=96=B9=E5=BC=8F=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-settings/index.vue | 12 +++++++++---
 src/layout/components/main/index.vue   | 12 ++++++------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 500c3261..ae70fef2 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="model-top">
-        <div class="roll">
+        <div :class="['roll', { 'page-settings-border': showPage }]" @click="page_settings">
             <div class="pt-15 pb-10 pl-25 pr-25 w">
                 <img class="img" src="@/assets/images/layout/main/main-top.png" />
             </div>
-            <div :class="['model-head', ' tc', { 'page-settings-border': showPage }]" @click="page_settings">
+            <div class="model-head tc">
                 {{ props.pageData.com_data?.content?.title || '新建页面' }}
             </div>
         </div>
@@ -26,10 +26,16 @@ const page_settings = () => {
 </script>
 <style lang="scss" scoped>
 .model-top {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    z-index: 2;
+    transform: translateX(-50%);
     .roll {
         width: 39rem;
         background: #fff;
         margin: 0 auto;
+        box-shadow: 0px 0 0px 0.2rem #fff;
         // border-bottom: 0.1rem solid #f5f5f5;
     }
     .img {
@@ -44,7 +50,7 @@ const page_settings = () => {
 .page-settings-border {
     // border: 0.2rem solid $cr-main;
     position: relative;
-    box-shadow: 0px 0 0px 0.2rem $cr-main;
+    box-shadow: 0px 0 0px 0.2rem $cr-main !important;
     z-index: 1;
     box-sizing: border-box;
 }
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index b1cbbb79..c2bf16c8 100644
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@@ -25,13 +25,13 @@
         </div>
         <div class="model">
             <div class="model-content">
-                <!-- 页面设置 -->
-                <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
                 <!-- 拖拽区 -->
                 <div ref="scrollTop" class="model-drag">
                     <div class="seat" style="background: #fff"></div>
+                     <!-- 页面设置 -->
+                    <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
                     <div class="model-wall" :style="content_style">
-                        <div :style="'padding-bottom:' + footer_nav_counter_store.padding_footer + 'px;'">
+                        <div :style="'padding-top:92px;' + 'padding-bottom:' + footer_nav_counter_store.padding_footer + 'px;'">
                             <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 v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
                                     <div v-if="item.show_tabs" class="plug-in-right" chosenClass="close">
@@ -250,7 +250,7 @@ const model_style = computed(() => {
         // window.innerHeight(当前页面高度) - 80(顶部高度) - 844
         const height = (window.innerHeight - 924) / 2;
         let bottom = parseInt(float_bottom[item.id]) + height;
-        // 容器自身高度是60 755-60 =  695
+        // 容器自身高度是60 775-60 =  695
         if (parseInt(float_bottom[item.id]) > 695) {
             bottom = 695 + height;
         }
@@ -613,7 +613,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 
             .model-drag {
                 overflow-y: auto;
-                max-height: 75.5rem;
+                max-height: 84.4rem;
                 &::-webkit-scrollbar {
                     display: none;
                 }
@@ -622,7 +622,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
                     background: #f5f5f5;
                     margin: 0 auto;
                     .drag-area {
-                        min-height: 68.1rem;
+                        min-height: 75.5rem;
                     }
                     .drag-area .float-window {
                         position: fixed;

From 7f5df0e0d930435408f2d4b5486a585e86642a62 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, 28 Aug 2024 15:31:08 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/layout/main/main-top.png    | Bin 4001 -> 3389 bytes
 src/components/page-settings/index.vue        |  29 +++++--
 src/components/page-settings/page-content.vue |   6 +-
 src/components/page-settings/page-setting.vue |  22 +++++
 src/components/page-settings/page-styles.vue  |  75 ++++++++++++++++++
 .../components/main/default/header-nav.ts     |  32 ++++++--
 src/layout/components/main/index.vue          |  44 ++++++----
 src/layout/components/settings/index.vue      |  12 ++-
 8 files changed, 182 insertions(+), 38 deletions(-)
 create mode 100644 src/components/page-settings/page-setting.vue
 create mode 100644 src/components/page-settings/page-styles.vue

diff --git a/src/assets/images/layout/main/main-top.png b/src/assets/images/layout/main/main-top.png
index fc26fe9339db531796e34656933fb9d5a4081096..8443a8cae4b091baff4fb3e10f056a9e224f5935 100644
GIT binary patch
literal 3389
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

literal 4001
zcmZWsc{G%L*dDTm4B0|uO(A4Lh=xcAV`#A@M0VMCnv{LXWE&+*@5s`mFv&6|6|#<X
zVr-ENW5$%RWEu0#_r1LDd(L;xeV*qz&mZ^i-hS78T`3St6TZXZhXDWppXpU2C;-4(
z!Tgrv;$S|FuYbieUo62;6GOn8e#s>OfZxH?$iOz@Hl-;3iDY|d=gvBLabD_-dzVSF
za(9Z<9}~fkA-EIKqF-24BxjFu*sNw1m}yHtsby)NI~+Ern9qMx+j4fyRPyb)oD^3$
za7R(|h`ORuN}J%O+r6l}vq8sv6NIikd<U$MIi6`5J)ydzQg_#m;=Sp=xna55z!;=h
zY%Z@@;c{Ddns)S{r=<X_|JvJht^sv%o<!FF`~$EaW))Ut;d%f#u#dGe09e!Oyh8~r
zEI`14Jpi}s{>N7u`1@*)>LtoR>1FI+IXa)C<D-CVNhynVsP($1PoJtP8|JHmx_a-T
zoL-`D|G+py`(B|vsB{<NbG7d`f}Mxj-iu4VNciVWa06F*W+sU;(SWr&qw%E|1|=Dz
z*5AvSwoYZ}uWs!&1vTz^AV-AFDtmIF^ggoSpfz$t)~u2f5ouCbo)zxKdtKtO;Vc<i
z8PW<>B$rRAj43{L`4Aoyw3>2s{2`da>Q(ShD!2C7($8rrA@v=!h7hf-t=}xKUAu@L
zICje?DF=GeZJ{Rz8U+iB`zxo(Z=EzcaU$-|>^M82z{dmCr-bZ>7o+h>xzMDZpF!p|
z?h3K*y(QRSo|eDo-*l1mm!79RJN)Mc$8SkCFks&-*;(;~or0~R_25B!=cjUAH;K9?
z0uOt41Ccoq7R}IP&*HJk4}m{svNAGqi9Yp^(=AQ5ihe`(xI~u=`uh5Ny)k~u9`w@E
z(sd-%>uYo|&*%H!=I7_*HAws?M%o?O$2bm}bW4+&nX|Q-pPyPu!z(Wx{0cbZoU}k}
zA|k-Mp)Y1xAlq%hXXrfrcMRc*b;vnT%{Tj3fszaeLFDjbG}HM5#Ld3W8x17E!4R>;
zc2eU+jDCFP<}`2+)R%cvxe=_<(UO_me{UfejVDAia_~{na5<}Rp7gO};^OvtAP_Cz
ztWvnqapkFvjZGHXZN@$t2_<FNF9&=HBon+6bp9E|o-D8yTh+OR{1nf0gu4UQ&PB#7
zc~RP9&k8wWmAu%PTH$1)l8=L!rSSFi22}YjGd^*XB}eSBN~Z95pL`GfVk{vVtIqp*
zM?pb>p-_x-wpGc;zR8JlZ`Ks4oGz8(nilW;y<%AUE0sACx%h2Q$xdgVkr_Dmi0}Py
zH5zr4KRww45joM3ArT-cA)$-sgD_J<Y}vmPW@~c~l#H*=og!~c#34s~a-dZ6;WZkH
z@Ll`hih!xyw|tlrwBowJH>4|&qSn%;-SASU(30I-zqmmdH*=_0S%&t(&}il;&RZ;T
zrl6qU!a(Y$g}!GyM^0Rf;08G>Ohb=_9kP&{*o`MY->JT_G2e*Za9XViUTG!M!VBzF
z%+E$jmtp!FwKT<vfwbGHgQ*wv!pLJeP}1aUMuJ(To?IYjf&2HG?l^34Pu|&QCMG7a
z3O~}z7VW8Y%ykLMVOt-HE+Wz&CJoWGW2tBVdqiOE@^?_NO^TM)dMQ^!`-|-8la*k<
zpf0m7Z+($jnd#{<k)?(5sWRghdlx_fUQ*DLVf{`+N7|xb-su9c=7BT^N{Du`j=qIW
z%8UEYpWGH<9kt&P@Ys9Ao0z;;j>R(aj_Zc?ekEROiG!Y5XW4p<Zk0BLHxofSgeGet
zzq<>V-j*gOrZerd<mu9!?bD!|M_{MZvGs@c<C_Mmb)0WOz9?TZzujfYUe)_WO!h^u
zb_P7R+3FH~?OC->`4wKQnGfB=qxAtoUc~#7z;Ty_V!^?zhf-s9$|6{2t4=YRuGyJE
zy<i8%Tqy77U$tRB$~A!%=26kuxVX{vijzckQO92sv9Yl;d2Zanw3R*|8UrKd7MGno
z?~uvWku-E3Q$Hw{ey%wODmog!gTO^3B_#!$WJ+d>xg9b(-`1Nj)QaHLhz@j5D;bn_
z_5F?G)F(as8_U4_+-qhf-8rw(f>op_<cNhZKSk8%l@|*05W%oLBVYJ3mk3>%n!L?D
z$7non5r0G0KfbQEN7<S^PK2!u87O&aMy31dt&(ZTY~-(QrJ5G!mH|D{ig6bwfnph<
zhA)9F7=aKU3RRsp<G$XX_2bWA)8nUr4|6V4xpJmMUpf>Dwq%Xgj>~L6+1zuki^?ze
z+J+<qoE<V*A2Xo4agBsAbRhiuz|?dVtgepv^@-=%yhsziNixyJ{$xXaKI`@JQ~5QW
zot;^>%(&@%$Pv9>$+LGzob~vVmhig{XbK+XaPupUhDi&C^VlL*8#c(}G$R~)6?%hT
zDJhNGEApLu-lEvI{)x2^Ulg?yBoJi|my5SXi5d^CPwzC(*Kt`9Cts2Ln1GAeno03I
zmEVI1YMi8EYCKXsPeV94I5Z=u#M{Ze8<9VQ8pTEVSVLLj13eGcRuK>wxV=lmnF|$t
z8y!PrQ)mRBF-D{U9o+rgJ1BeGNNd%>RjMrdlUhq<Q{PmrLBe5$X0Uu2^_AE5RUEsw
zknzc1)3_-kCW7A+Ni%MA4|nWhTX>#t(_g7WoSu0D?wgC%Q%pjpT%Dwb8(G&^=7RmC
zg5&`K=XUhiNQQgR0gn9&>PSg7&=6Z~9H-tRy|$rpB}l=F4zck}#tL`&>3iUx>K`5<
z?2C*6o`rGsK`y&Dh?9$k*#;#lPoAH<@_qq}&<I%U%DIOpNEB@GAix-$wn9=O(M-rV
zdvnikwGJO;0+$Om;izgClf8|rPFXY{PCC>wN14YFbpGJNAZ6~PXMfxlyn}5`XU4Em
z$k>SvGOdaO3c}S>%XATT{SbWK8Pxi5rJHYd7gna4i>vj&8k#%JW8$?0oO*g23$J7`
zi)^0SK4&G`y>nNz!u)-^v)vbvoab2(r_q`_aWe2s=lo=QYwV8PrRB(4uu=U>c+Glh
zm`L>kR~yVxCEPzWd)B}&=>%z?Lx2Ogd5;`vEw@!XM#U^XTtfSNTOl+C6Vo(41>5o1
z9=mr6O3jNXpF4|k<iPf8Z>plMdSoZI${8?H7CDX1KbPyOLlKG=w@g(a`77`oFdA<b
z_4X26L%!@%wK5syRhTz#CuDptipsFRSTf4)dFt-6=;9|H)fhUN?AzU2Q-OWJ4kL6e
zXTIOxHv_S(@Vwz@)#j>L4g5*x2LB>d>d4O(15~E2`AYCqs<2Yn2r)nZUP3~`vX<}I
zFGo7^mGay`bggpX@s#0fZWv`qeBDd_Dd)ZoWt9mv8}*pRt+2I4Ywd}xZC@S1L+eSx
z?-WII`bDT!l82<qf)%y4;&YSz!~3UV$|}=(c0a-nxzaAmG!1KSP7}6)6%@>c3if>t
zhGF(^%K<qOP1=zyQ>r>vVkrV6Bs231a9zkU>ki?rLAZD4l<aMuX7ZKL{?Mmdtn1-d
zK|Eg>M8V6iH7&&iOgj=(QTAvOeRy~{Y2KGZAVY`fuV<Z)Cs=`KoVm~}bIB<}gzL}|
zR`h4~%fb7UZc!Z;#!4)H&5G7+kCOF;$13uEHebe|ie#=-4O?=1P?(r^)56LMD^1H=
zac&Ny+zwpk=jAOJAGhOHlD-G2shanvNAbYyUr(;~938awc+q1BaY#OWv+q={dr(0x
z(EwO*A#+o!)(_Qwc25Nb>OGhaJ(!JSNnAD}9y?xjbg)&8_hlH!2)(m0Pur@-Y$|<L
zYjOT`-TgPw_%f!}Ng~ab3IVbOWc-L|xNycCIdt8A`6Y8bqe>q*|78&3ix;DD!b#?n
zvj)J|N+M}V69N@9N<@3AFjiArdy9>Y6w_6zzrVIau6(x@sc>lU=i8vp#H)gEMck;f
zM)k$XDwgp1rGBmxGxq)K>a-|SsCef)NrflpSACcVK9JK{42!3XJ?#l_5fiC)y;zJZ
z{(;dlTD#__JduCSyYs%*^4)}{%f5nxop3pXr_2#~4KG-7M^P|#)SK5@h^_-F#=kxR
z>WTc;$jfKHEP;sZ*PWP|VR**wO;+(mKpd<)51Ml80*enNwl~J{{7KZhhAF&PzB{FC
z(QkSu-d}2UuS<Iq{s+|YRiJHqq>Q<O8^5XFBrFBY)@ir8pMo-Ah#70z+9k!xX;sVN
zwazJWwRiRZ=aQ~#b&zM5FJE3}ruJl0|EBib+v;(Fq!*kdoXS=DCS%E_sZV=zcH30k
zO(pxnt#Rs1QTfs(6(J+E6D6AkX*>L<8che6gqa<u82rs}OSD<s(j6b<wQQi>%WG<=
z=uz8p!9;Hlj|I+9ExNJMB>8zWhA<!|du~v*st&DdF>Ij`YQOP~vfk~#l$M!&-_Gi>
z%Y};?8uBusgQ<(6$Pv3C7~Vdtgg?LMXJVkMs2?yiF+mF0*Vqw_Jr%unSN>7OBO$+A
zQ7RC3Aw0pPw!qn>9v_fR;~E__1;%;odFQc{qGe@ei5Z!h+d8wS13MOmkm|JJzr41W
zZak2NI0$??DEQ)8*x;Zw{o^72$*V>Qc5KC>X#51JA-3+mZO{axo~*w9=j+$6MDKM2
zk$ZFz4}BXC>lEYd5FlH_C<i8>0qbuA%+}G<qqjM#Z05F$yc&HcdiZf2v$R`gmF0HT
zO?o&@O717M$q90V`)CK8YXk;^Y4!H^uXMHY9k(&dFfUY-f%`>mZOHx}IFjh{!OPp5
z^lqEm#5x4Cx%Y<5zWXG2#RgRZE_pBWi1-hCekBM~)?5}xp(9lCjcC^+y;0-Q@nhQI
zAA-KrA+^H0ICRz2?$46RuOkeIwZ@|&GKE|Zzhl~6-?{iZaE;h3;W&f;m3A<lvmbK6
z^S^#E0e)U4hi#rA{C^z0xnKKtMcKcy5Wux7DR@hrpM;b4xpr)S0sgPZDdA%UR``Jp
zh5r?c0NAv^12E;d&l=l*q~-tz3)hIIRO#UZ8qK6kU@8~5WFu1}iuFLlFlCx&0)Wk1
j;t7QPzo&$=?THF~d6DV--k6=KxdEoemPT(3?>zh;Rt$QM

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index ae70fef2..0237ed39 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="model-top">
-        <div :class="['roll', { 'page-settings-border': showPage }]" @click="page_settings">
+        <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
             <div class="pt-15 pb-10 pl-25 pr-25 w">
-                <img class="img" src="@/assets/images/layout/main/main-top.png" />
+                <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" :src="url_computer()" />
             </div>
             <div class="model-head tc">
                 {{ props.pageData.com_data?.content?.title || '新建页面' }}
@@ -11,6 +11,8 @@
     </div>
 </template>
 <script setup lang="ts">
+import { background_computer, gradient_computer } from '@/utils';
+
 interface Props {
     pageData: any;
     showPage: boolean;
@@ -23,19 +25,36 @@ const emits = defineEmits(['page_settings']);
 const page_settings = () => {
     emits('page_settings');
 };
+const form = computed(() => props.pageData.com_data.content);
+const new_style = computed(() => props.pageData.com_data.style);
+const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative');
+const roll_style = computed(() => {
+    let style = ``;
+    if (new_style.value.background_type === 'color') {
+        style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction });
+    } else if (new_style.value.background_type === 'image') {
+        style += background_computer(new_style.value);
+    } else {
+        style += `background: transparent;`;
+    }
+    return style
+});
+const url_computer = () => {
+    const new_url = ref(new URL(`../../assets/images/layout/main/main-top.png`, import.meta.url).href).value;
+    return new_url;
+};
 </script>
 <style lang="scss" scoped>
 .model-top {
-    position: absolute;
+    position: v-bind(position);
     top: 0;
     left: 50%;
     z-index: 2;
     transform: translateX(-50%);
     .roll {
         width: 39rem;
-        background: #fff;
         margin: 0 auto;
-        box-shadow: 0px 0 0px 0.2rem #fff;
+        // box-shadow: 0px 0 0px 0.2rem #fff;
         // border-bottom: 0.1rem solid #f5f5f5;
     }
     .img {
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index b91910c2..55aee0a2 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="auxiliary-line">
+    <div class="w h">
         <el-form :model="form" label-width="70">
             <card-container class="common-content-height">
                 <el-form-item label="页面标题">
@@ -43,8 +43,4 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
 };
 </script>
 <style lang="scss" scoped>
-.auxiliary-line {
-    width: 100%;
-    height: 100%;
-}
 </style>
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
new file mode 100644
index 00000000..4489b1e8
--- /dev/null
+++ b/src/components/page-settings/page-setting.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="setting-content">
+        <template v-if="type == '1'">
+            <page-content :value="value.content"></page-content>
+        </template>
+        <template v-else-if="type == '2'">
+            <page-styles :value="value.style"></page-styles>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    type: {
+        type: String,
+        default: '1',
+    },
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+</script>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
new file mode 100644
index 00000000..b461ce5d
--- /dev/null
+++ b/src/components/page-settings/page-styles.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="styles">
+        <el-form :model="form" label-width="70" class="m-h">
+            <card-container class="mb-8">
+                <div class="mb-12">头部样式</div>
+                <el-form-item label="顶部背景">
+                    <div class="flex-col gap-10">
+                        <el-radio-group v-model="form.background_type">
+                            <el-radio value="transparent">透明</el-radio>
+                            <el-radio value="color">颜色</el-radio>
+                            <el-radio value="image">图片</el-radio>
+                        </el-radio-group>
+                        <template v-if="form.background_type === 'color'">
+                            <mult-color-picker :value="form.background_color_list" :type="form.background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                        </template>
+                        <template v-else-if="form.background_type === 'image'">
+                            <upload v-model="form.background_img_url" :limit="1"></upload>
+                        </template>
+                    </div>
+                </el-form-item>
+                <el-form-item label="功能按钮">
+                    <el-radio-group v-model="form.function_buttons_type" class="ml-4">
+                        <el-radio value="black">黑色</el-radio>
+                        <el-radio value="white">白色</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="沉浸样式">
+                    <el-radio-group v-model="form.immersive_style" class="ml-4">
+                        <el-radio :value="true">开启</el-radio>
+                        <el-radio :value="false">关闭</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="上滑展示">
+                    <el-radio-group v-model="form.up_slide_display" class="ml-4">
+                        <el-radio :value="true">保留</el-radio>
+                        <el-radio :value="false">关闭</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="标题名称">
+                    <color-text-size-group v-model:color="form.background_title_color" v-model:typeface="form.background_title_typeface" v-model:size="form.background_title_size" default-color="#000000"></color-text-size-group>
+                </el-form-item>
+            </card-container>
+        </el-form>
+        <common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+    },
+});
+const emit = defineEmits(['update:value']);
+// 默认值
+let form = reactive(props.value);
+
+const common_styles_update = (val: Object) => {
+    form.common_style = val;
+};
+const mult_color_picker_event = (arry: string[], type: number) => {
+    form.background_color_list = arry;
+    form.background_direction = type.toString();
+};
+</script>
+<style lang="scss" scoped>
+.styles {
+    width: 100%;
+    .styles-height {
+        min-height: calc(100vh - 16.8rem);
+    }
+}
+</style>
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index ee7197e0..e443e1e8 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -1,19 +1,41 @@
+import defaultCommon from './index';
+
 interface DefaultFooterNav {
     content: {
         color_list: color_list[];
         title: string;
-        direction: string;
-        background_img_style: number;
-        background_img_url: uploadList[];
     };
+    style: {
+        background_type: string;
+        background_color_list: color_list[];
+        background_direction: string;
+        background_img_url: uploadList[];
+        background_title_color: string,
+        background_title_typeface: string,
+        background_title_size: number,
+        function_buttons_type: string,
+        immersive_style: boolean,
+        up_slide_display: boolean,
+        common_style: object;
+    }
 }
 const defaultFooterNav: DefaultFooterNav = {
     content: {
         color_list: [{ color: '#f5f5f5', color_percentage: '' }],
         title: '',
-        direction: '180deg',
-        background_img_style: 2,
+    },
+    style: {
+        background_type: 'color',
+        background_color_list: [{ color: '#fff', color_percentage: '' }],
+        background_direction: '180deg',
         background_img_url: [],
+        background_title_color: '#000',
+        background_title_typeface: '500',
+        background_title_size: 14,
+        function_buttons_type: 'black',
+        immersive_style: false,
+        up_slide_display: true,
+        common_style: defaultCommon,
     },
 };
 
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index c2bf16c8..08a2fb21 100644
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@@ -17,21 +17,20 @@
     </div>
     <!-- 视图渲染 -->
     <div class="main">
-        <div class="acticons">
-            <el-button size="large" class="" @click="page_settings">页面设置</el-button>
-            <el-button size="large" class="" @click="export_click">导出</el-button>
-            <el-button size="large" class="" @click="import_click">导入</el-button>
-            <el-button size="large" class="" @click="clear_click">清空</el-button>
-        </div>
         <div class="model">
             <div class="model-content">
+                <div class="acticons">
+                    <el-button size="large" class="" @click="page_settings">页面设置</el-button>
+                    <el-button size="large" class="" @click="export_click">导出</el-button>
+                    <el-button size="large" class="" @click="import_click">导入</el-button>
+                    <el-button size="large" class="" @click="clear_click">清空</el-button>
+                </div>
                 <!-- 拖拽区 -->
                 <div ref="scrollTop" class="model-drag">
-                    <div class="seat" style="background: #fff"></div>
-                     <!-- 页面设置 -->
+                    <!-- 页面设置 -->
                     <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
                     <div class="model-wall" :style="content_style">
-                        <div :style="'padding-top:92px;' + 'padding-bottom:' + footer_nav_counter_store.padding_footer + 'px;'">
+                        <div :style="`padding-top:${ top_padding }px; margin-top: ${ top_margin }px;padding-bottom:${ footer_nav_counter_store.padding_footer }px;`">
                             <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 v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
                                     <div v-if="item.show_tabs" class="plug-in-right" chosenClass="close">
@@ -182,11 +181,23 @@ watch(
         page_settings();
     }
 );
+const top_padding = ref(90);
+const top_margin = ref(0);
 watchEffect(() => {
-    if (props.header.com_data?.content) {
-        const content = props.header.com_data?.content;
-        const container_common_styles = gradient_computer(content) + background_computer(content);
-        content_style.value = container_common_styles;
+    if (page_data.value.com_data) {
+        const { immersive_style, up_slide_display } = page_data.value.com_data.style;
+        // 不开启沉浸式 和 上滑显示
+        if (immersive_style || !up_slide_display) {
+            top_padding.value = 2;
+        } else {
+            top_padding.value = 90;
+        }
+        // 开启沉浸式并且没有开通上滑显示
+        if (immersive_style && !up_slide_display) {
+            top_margin.value = -90;
+        } else {
+            top_margin.value = 0;
+        }
     }
 });
 watch(
@@ -575,7 +586,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
         position: absolute;
         left: 50%;
         margin-left: 26rem;
-        top: 4.7rem;
+        top: 0;
         display: flex;
         flex-direction: column;
         gap: 2rem;
@@ -595,7 +606,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
         height: 100%;
         .model-content {
             position: relative;
-            height: 84.4rem;
+            height: 84.6rem;
             .model-bottom {
                 position: absolute;
                 bottom: 0;
@@ -613,6 +624,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 
             .model-drag {
                 overflow-y: auto;
+                padding-top: 0.2rem;
                 max-height: 84.4rem;
                 &::-webkit-scrollbar {
                     display: none;
@@ -622,7 +634,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
                     background: #f5f5f5;
                     margin: 0 auto;
                     .drag-area {
-                        min-height: 75.5rem;
+                        min-height: 68.1rem;
                     }
                     .drag-area .float-window {
                         position: fixed;
diff --git a/src/layout/components/settings/index.vue b/src/layout/components/settings/index.vue
index 331f6519..6ad99be2 100644
--- a/src/layout/components/settings/index.vue
+++ b/src/layout/components/settings/index.vue
@@ -3,17 +3,15 @@
     <div class="settings">
         <card-container class="settings-title flex-row jc-sb align-c mb-8" padding="2.1rem 3.8rem">
             <div class="title">{{ value.name }}</div>
-            <template v-if="value.key != 'page-settings'">
-                <el-radio-group v-model="radio" class="radio-group" size="large" is-button>
-                    <el-radio-button class="radio-item" value="1">内容</el-radio-button>
-                    <el-radio-button class="radio-item" value="2">样式</el-radio-button>
-                </el-radio-group>
-            </template>
+            <el-radio-group v-model="radio" class="radio-group" size="large" is-button>
+                <el-radio-button class="radio-item" value="1">内容</el-radio-button>
+                <el-radio-button class="radio-item" value="2">样式</el-radio-button>
+            </el-radio-group>
         </card-container>
         <div class="setting-content">
             <!-- 页面设置 -->
             <template v-if="value.key == 'page-settings'">
-                <page-content :value="value.com_data.content"></page-content>
+                <page-setting :type="radio" :value="value.com_data"></page-setting>
             </template>
             <!-- 基础组件 -->
             <template v-else-if="value.key == 'video'">