diff --git a/src/assets/images/layout/main/main-top.png b/src/assets/images/layout/main/main-top.png
index fc26fe93..8443a8ca 100644
Binary files a/src/assets/images/layout/main/main-top.png and b/src/assets/images/layout/main/main-top.png differ
diff --git a/src/components/common/product-show-config/index.vue b/src/components/common/product-show-config/index.vue
index 901d0a39..5dae4deb 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>
@@ -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'">
@@ -49,41 +49,30 @@ 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' },
-        { name: 'icon', value: 'icon' },
+        { name: '图标', value: 'icon' },
     ],
     shopping_cart_list: [
         { name: '进入商品详情页', value: '0' },
         { 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;
-    }
-};
+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/index.vue b/src/components/model-shop-list/index.vue
index 44eb9f95..acb59259 100644
--- a/src/components/model-shop-list/index.vue
+++ b/src/components/model-shop-list/index.vue
@@ -5,8 +5,10 @@
                 <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}`">
-                            <span class="identifying">￥</span><span :style="trends_config('price')">{{ item.min_price }}</span>
+                        <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>
                         </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 0a668695..202a0067 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>
@@ -165,8 +165,12 @@ 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 (!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';
+        }
     }
     if (['0', '4'].includes(val)) {
         if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
@@ -186,6 +190,10 @@ const change_style = (val: any): void => {
         }
     }
 };
+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-list/model-shop-list-styles.vue b/src/components/model-shop-list/model-shop-list-styles.vue
index e97fe398..bb181957 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 167fb2f1..a1dd8f9c 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>
@@ -237,8 +237,12 @@ 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 (!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';
+        }
     }
     if (['0', '4'].includes(val)) {
         if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
@@ -258,6 +262,10 @@ const change_style = (val: any): void => {
         }
     }
 };
+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-styles.vue b/src/components/model-shop-tabs/model-shop-tabs-styles.vue
index 3444d1b2..00499169 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/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 500c3261..0237ed39 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -1,16 +1,18 @@
 <template>
     <div class="model-top">
-        <div class="roll">
+        <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', { 'page-settings-border': showPage }]" @click="page_settings">
+            <div class="model-head tc">
                 {{ props.pageData.com_data?.content?.title || '新建页面' }}
             </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
+import { background_computer, gradient_computer } from '@/utils';
+
 interface Props {
     pageData: any;
     showPage: boolean;
@@ -23,13 +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: 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;
         // border-bottom: 0.1rem solid #f5f5f5;
     }
     .img {
@@ -44,7 +69,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/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/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",
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index 28d3c95f..6b24a19b 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">
-                <!-- 页面设置 -->
-                <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
+                <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-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">
@@ -187,11 +186,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(
@@ -260,7 +271,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;
         }
@@ -585,7 +596,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;
@@ -605,7 +616,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;
@@ -623,7 +634,8 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 
             .model-drag {
                 overflow-y: auto;
-                max-height: 75.5rem;
+                padding-top: 0.2rem;
+                max-height: 84.4rem;
                 &::-webkit-scrollbar {
                     display: none;
                 }
diff --git a/src/layout/components/settings/index.vue b/src/layout/components/settings/index.vue
index f5cddeb9..02cb805a 100644
--- a/src/layout/components/settings/index.vue
+++ b/src/layout/components/settings/index.vue
@@ -3,18 +3,16 @@
     <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'">