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/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'">