diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index 934d9c83..240b2628 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -3,7 +3,7 @@
         <div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
             <el-icon :class="`iconfont ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="set_enable(index)" />
             <el-icon class="iconfont icon-del" @click.stop="del(index)" />
-            <el-icon :class="['iconfont icon-copy', {'disabled': props.isTabs }] " @click.stop="copy(index)" />
+            <el-icon :class="['iconfont icon-copy', { disabled: props.isTabs }]" @click.stop="copy(index)" />
             <el-icon :class="['iconfont', 'icon-arrow-top', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))" />
             <el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
         </div>
@@ -118,13 +118,17 @@ const props = withDefaults(defineProps<Props>(), {
     diyData: () => [],
     showModelBorder: false,
     isTabs: false,
-    mainContentStyle: ''
+    mainContentStyle: '',
 });
 const diy_data = ref(props.diyData);
 
-watch(() => props.diyData, (val) => {
-    diy_data.value = val;
-}, {immediate: true, deep: true});
+watch(
+    () => props.diyData,
+    (val) => {
+        diy_data.value = val;
+    },
+    { immediate: true, deep: true }
+);
 
 // 模块的class
 const model_class = computed(() => {
@@ -137,11 +141,11 @@ interface com_data {
     style: {
         common_style: {
             floating_up: number;
-        }
-    }
+        };
+    };
 }
 const model_style = computed(() => {
-    return (item: { id: string; key: string, com_data: com_data }) => {
+    return (item: { id: string; key: string; com_data: com_data }) => {
         // 40是容器的上下间距， 60是顶部的高度
         const container_height = window.innerHeight - 100;
         let bottom = 0;
@@ -167,7 +171,7 @@ const model_style = computed(() => {
         if (item.com_data.style.common_style?.floating_up != 0) {
             z_index = `z-index: 1`;
         }
-        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${ item.com_data.style.common_style?.floating_up || 0 }px;${ z_index };`;
+        return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${item.com_data.style.common_style?.floating_up || 0}px;${z_index};`;
     };
 });
 
@@ -278,11 +282,10 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 .plug-in-border::before {
     content: '';
     width: calc(100% + 0.4rem);
-    height: calc(100% + 0.4rem);
+    height: 100%;
     position: absolute;
-    top: -0.2rem;
+    top: 0;
     left: -0.2rem;
-    // z-index: 1;
     border: 0.2rem solid $cr-main;
 }
 .plug-in-animation {
@@ -387,4 +390,4 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
 .tabs-view {
     z-index: 2;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/footer-nav/footer-nav-content.vue b/src/components/footer-nav/footer-nav-content.vue
index 99120500..478b3eae 100644
--- a/src/components/footer-nav/footer-nav-content.vue
+++ b/src/components/footer-nav/footer-nav-content.vue
@@ -21,7 +21,10 @@
             <card-container>
                 <div class="mb-12 flex-row gap-10 jc-sb">
                     <div>导航内容</div>
-                    <div class="cr-primary c-pointer" @click="reset_event">恢复默认</div>
+                    <div class="flex-row gap-10 align-c">
+                        <div class="cr-primary c-pointer" @click="sync_sys_event">同步到系统</div>
+                        <div class="cr-primary c-pointer" @click="reset_event">恢复默认</div>
+                    </div>
                 </div>
                 <div class="size-12 cr-c mb-20">图片建议宽高80*80,鼠标拖拽左侧圆点可调整导航顺序</div>
                 <div class="nav-list">
@@ -56,12 +59,18 @@
 <script setup lang="ts">
 import { cloneDeep } from 'lodash';
 import { get_math } from '@/utils';
+import DiyAPI from '@/api/tabbar';
 import defaultFooterNav from '@/config/const/footer-nav';
+const app = getCurrentInstance();
 const props = defineProps({
     value: {
         type: Object,
         default: () => {},
     },
+    footerStyle: {
+        type: Object,
+        default: () => {},
+    },
     footerDialogPositionTop: {
         type: Number,
         default: 0,
@@ -94,13 +103,26 @@ const add = () => {
     });
     emit('update:value', form.value);
 };
-interface DefaultFooterNav {
-    content: {
-        nav_content: any; // 根据实际类型替换 any
+// 同步到系统
+const sync_sys_event = () => {
+    const new_form = {
+        content: form.value,
+        style: props.footerStyle,
     };
-}
+    const clone_form = cloneDeep(new_form);
+    const new_data = {
+        type: 'home',
+        config: clone_form,
+    };
+    app?.appContext.config.globalProperties.$common.message_box('将数据同步到系统底部菜单，确定继续吗？', 'warning').then(() => {
+        DiyAPI.saveTabbar(new_data).then((res: any) => {
+            ElMessage.success('同步成功');
+        });
+    });
+};
+// 恢复默认数据
 const reset_event = () => {
-    const clone_data = cloneDeep(defaultFooterNav.value);
+    const clone_data = cloneDeep(defaultFooterNav);
     form.value.nav_content = clone_data.content.nav_content;
     emit('update:value', form.value);
 };
diff --git a/src/components/footer-nav/footer-nav-setting.vue b/src/components/footer-nav/footer-nav-setting.vue
index 9bec9259..fac09833 100644
--- a/src/components/footer-nav/footer-nav-setting.vue
+++ b/src/components/footer-nav/footer-nav-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <template v-if="type == '1'">
-            <footer-nav-content :value="form.content" :footer-dialog-position-top="footerDialogPositionTop" @update:value="content_update"></footer-nav-content>
+            <footer-nav-content :value="form.content" :footer-style="form.style" :footer-dialog-position-top="footerDialogPositionTop" @update:value="content_update"></footer-nav-content>
         </template>
         <template v-else-if="type == '2'">
             <footer-nav-styles :value="form.style"></footer-nav-styles>
diff --git a/src/components/model-nav-group/model-nav-group-styles.vue b/src/components/model-nav-group/model-nav-group-styles.vue
index 5920de17..2f8c0a75 100644
--- a/src/components/model-nav-group/model-nav-group-styles.vue
+++ b/src/components/model-nav-group/model-nav-group-styles.vue
@@ -6,6 +6,9 @@
                 <el-form-item label="数据间距">
                     <slider v-model="form.space"></slider>
                 </el-form-item>
+                <el-form-item label="图文间距">
+                    <slider v-model="form.title_space" :max="100"></slider>
+                </el-form-item>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -42,9 +45,6 @@
                 <el-form-item label="标题字号">
                     <slider v-model="form.title_size" :max="100"></slider>
                 </el-form-item>
-                <el-form-item label="标题间距">
-                    <slider v-model="form.title_space" :max="100"></slider>
-                </el-form-item>
             </card-container>
         </el-form>
         <div class="divider-line"></div>
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index 5e76d7b5..321eb29b 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -6,10 +6,10 @@
                 <el-form-item label="选中装饰">
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
-                <el-form-item label="选中文字">
+                <el-form-item label="选中标题">
                     <color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)"></color-text-size-group>
                 </el-form-item>
-                <el-form-item label="未选文字">
+                <el-form-item label="未选标题">
                     <color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
                 </el-form-item>
                 <el-form-item label="选项卡间距">
@@ -44,12 +44,12 @@ const props = defineProps({
     },
     isCommon: {
         type: Boolean,
-        default: true
-    }
+        default: true,
+    },
 });
 
 const state = reactive({
-    form: props.value
+    form: props.value,
 });
 // 如果需要解构，确保使用toRefs
 const { form } = toRefs(state);
@@ -61,5 +61,4 @@ const tabs_checked_event = (arry: string[], type: number) => {
     form.value.tabs_direction = type.toString();
 };
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 4d39cd0f..2442b486 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -128,7 +128,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     transform: translateX(-50%);
     width: 39rem;
     .roll {
-        padding-bottom: 0.9rem;
+        padding-bottom: 1rem;
         margin: 0 auto;
         cursor: pointer;
         z-index: 1;
@@ -154,11 +154,19 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     }
 }
 .page-settings-border {
-    // border: 0.2rem solid $cr-main;
     position: relative;
-    box-shadow: 0px 0 0px 0.2rem $cr-main !important;
     z-index: 3;
     box-sizing: border-box;
+    &::before {
+        content: '';
+        height: 100%;
+        width: calc(100% + 0.4rem);
+        position: absolute;
+        left: -0.2rem;
+        right: -0.2rem;
+        border: 0.2rem solid $cr-main;
+        z-index: 2;
+    }
 }
 .logo-outer-style {
     height: 2.8rem;
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index 2bec8eeb..10ff24af 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -78,7 +78,7 @@ const defaultFooterNav: DefaultFooterNav = {
         is_icon_show: '1',
         icon_link: {},
         icon_img: [],
-        icon_class: '',
+        icon_class: 'search',
         search_botton_img: [],
         search_botton_icon: '',
         is_tips_show: '1',
diff --git a/src/views/layout/components/main/index.scss b/src/views/layout/components/main/index.scss
index 346d12d3..ee4c66cd 100644
--- a/src/views/layout/components/main/index.scss
+++ b/src/views/layout/components/main/index.scss
@@ -89,15 +89,24 @@
 
             .model-drag {
                 overflow-y: auto;
-                padding-top: 0.2rem;
+                // padding-top: 0.2rem;
                 max-height: 84.4rem;
                 height: 100%;
                 &::-webkit-scrollbar {
                     display: none;
                 }
+                .page-bg {
+                    position: absolute;
+                    left: 50;
+                    background: #f5f5f5;
+                    top: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    width: 39rem;
+                    min-height: 100%;
+                }
                 .model-wall {
                     width: 39rem;
-                    background: #f5f5f5;
                     margin: 0 auto;
                     min-height: 100%;
                     display: flex;
@@ -194,7 +203,8 @@
     transform: translateY(-50%);
     left: 0;
     z-index: 3;
-    .layout-toggle-bar-top, .layout-toggle-bar-bottom {
+    .layout-toggle-bar-top,
+    .layout-toggle-bar-bottom {
         position: absolute;
         width: 0.2rem;
         border-radius: 0.2rem;
@@ -208,7 +218,8 @@
     }
 }
 .layout-toggle-bar-close:hover {
-    .layout-toggle-bar-top, .layout-toggle-bar-bottom {
+    .layout-toggle-bar-top,
+    .layout-toggle-bar-bottom {
         background: $cr-main;
         transition: 1s ease;
     }
@@ -221,7 +232,8 @@
 }
 
 .layout-toggle-bar-open:hover {
-    .layout-toggle-bar-top, .layout-toggle-bar-bottom {
+    .layout-toggle-bar-top,
+    .layout-toggle-bar-bottom {
         background: $cr-main;
         transition: 1s ease;
     }
@@ -255,4 +267,4 @@
     .layout-toggle-bar {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 1ae50ce3..7611ee88 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -63,10 +63,13 @@
                 </div>
                 <!-- 拖拽区 -->
                 <div ref="scrollTop" class="model-drag" @scroll="on_scroll_event">
+                    <div class="page-bg" :style="content_style">
+                        <div class="page-bg-img" :style="content_img_style"></div>
+                    </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="content_style">
-                        <div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;${content_img_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" @on_choose="set_tabs_event(true)" @del="del"></div-content>
                             <div v-if="tabs_data.length > 0" class="seat"></div>
                             <VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
@@ -146,6 +149,7 @@ watch(
 );
 const top_padding = ref(90);
 const top_margin = ref(0);
+const model_wall_top = ref(0);
 const content_style = ref('');
 const content_img_style = ref('');
 const main_content_style = ref('');
@@ -166,7 +170,7 @@ watchEffect(() => {
         const { immersive_style, up_slide_display } = new_style;
         // 不开启沉浸式 和 上滑显示
         if (immersive_style == '1' || up_slide_display != '1') {
-            top_padding.value = 2;
+            top_padding.value = 0;
         } else {
             top_padding.value = 90;
         }
@@ -214,7 +218,7 @@ const show_model_border = ref(true);
 // 点击添加tabs组件
 const draggable_click = (item: componentsData) => {
     const type_data = ['tabs', 'tabs-carousel'];
-    
+
     if (common_store.is_immersion_model) {
         ElMessage.error('开启沉浸样式下不可以添加该组件');
         return;
@@ -432,7 +436,7 @@ const scroll = () => {
 const scoll_top = ref(0);
 const on_scroll_event = (e: any) => {
     scoll_top.value = e.target.scrollTop;
-}
+};
 //#endregion
 //#region 页面设置 导出 导入
 // 在组件挂载时默认执行