diff --git a/src/api/tabbar.ts b/src/api/tabbar.ts
new file mode 100644
index 00000000..d92e1c86
--- /dev/null
+++ b/src/api/tabbar.ts
@@ -0,0 +1,22 @@
+import request from '@/utils/request';
+
+class ShopAPI {
+    /**  获取tabbar列表 */
+    static getTabbar(data: any) {
+        return request({
+            url: `diyapi/apptabbardata`,
+            method: 'post',
+            data,
+        });
+    }
+    /** 保存tabbar */
+    static saveTabbar(data: any) {
+        return request({
+            url: `diyapi/apptabbarsave`,
+            method: 'post',
+            data,
+        });
+    }
+}
+
+export default ShopAPI;
diff --git a/src/components/footer-nav/footer-nav-content.vue b/src/components/footer-nav/footer-nav-content.vue
index 230ce46b..c04c42e7 100644
--- a/src/components/footer-nav/footer-nav-content.vue
+++ b/src/components/footer-nav/footer-nav-content.vue
@@ -5,15 +5,15 @@
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="导航样式">
                     <el-radio-group v-model="form.nav_style" is-button @change="nav_style_change">
-                        <el-radio :value="0">图片加文字</el-radio>
-                        <el-radio :value="1">图片</el-radio>
-                        <el-radio :value="2">文字</el-radio>
+                        <el-radio value="0">图片加文字</el-radio>
+                        <el-radio value="1">图片</el-radio>
+                        <el-radio value="2">文字</el-radio>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item label="导航类型">
                     <el-radio-group v-model="form.nav_type" is-button @change="nav_type_change">
-                        <el-radio :value="0">底部固定</el-radio>
-                        <el-radio :value="1">底部悬浮</el-radio>
+                        <el-radio value="0">底部固定</el-radio>
+                        <el-radio value="1">底部悬浮</el-radio>
                     </el-radio-group>
                 </el-form-item>
             </card-container>
diff --git a/src/views/tabbar/components/main/default/footer-nav.ts b/src/views/tabbar/components/main/default/footer-nav.ts
index 3f075157..54841f10 100644
--- a/src/views/tabbar/components/main/default/footer-nav.ts
+++ b/src/views/tabbar/components/main/default/footer-nav.ts
@@ -1,7 +1,7 @@
 import defaultCommon from './index';
 import { online_url } from '@/utils';
 const new_url = await online_url('/static/app/tabbar/').then((res) => res);
-interface DefaultFooterNav {
+export interface DefaultFooterNav {
     content: {
         nav_style: number;
         nav_type: number;
diff --git a/src/views/tabbar/components/main/index.ts b/src/views/tabbar/components/main/index.ts
index 68ac974d..aff3e467 100644
--- a/src/views/tabbar/components/main/index.ts
+++ b/src/views/tabbar/components/main/index.ts
@@ -1,9 +1,8 @@
 import defaultFooterNav from './default/footer-nav';
-// 系统设置
-interface DefaultSettings {
-    footer_nav: object;
-}
 
+interface DefaultSettings {
+    footer_nav: any;
+}
 const defaultSettings: DefaultSettings = {
     footer_nav: defaultFooterNav,
 };
diff --git a/src/views/tabbar/components/main/index.vue b/src/views/tabbar/components/main/index.vue
index bd9ec2f4..77b6f903 100644
--- a/src/views/tabbar/components/main/index.vue
+++ b/src/views/tabbar/components/main/index.vue
@@ -11,7 +11,7 @@
                 </div>
                 <!-- 底部区域 -->
                 <div class="model-bottom">
-                    <footer-nav :footer-data="footer_nav.com_data"></footer-nav>
+                    <footer-nav :footer-data="footer_nav"></footer-nav>
                 </div>
             </div>
         </div>
@@ -31,7 +31,6 @@ watch(
     () => props.footer,
     (newValue) => {
         footer_nav.value = newValue;
-        console.log(newValue);
     },
     { deep: true }
 );
diff --git a/src/views/tabbar/components/settings/index.vue b/src/views/tabbar/components/settings/index.vue
index 72cbe932..ba7dcdb4 100644
--- a/src/views/tabbar/components/settings/index.vue
+++ b/src/views/tabbar/components/settings/index.vue
@@ -1,18 +1,17 @@
 <template>
     <!-- 顶部导航栏 -->
     <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>
+        <div class="settings-title flex-row jc-c align-c mb-8 w">
             <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 == 'footer-nav'">
-                <footer-nav-setting :type="radio" :value="value.com_data"></footer-nav-setting>
-            </template>
+        </div>
+        <div class="box-shadow-sm">
+            <div class="setting-content">
+                <!-- 底部导航 -->
+                <footer-nav-setting :type="radio" :value="value"></footer-nav-setting>
+            </div>
         </div>
     </div>
 </template>
@@ -23,17 +22,16 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-console.log(props.value);
 const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
 </script>
 <style lang="scss" scoped>
 .settings {
     width: 46rem;
-    overflow: auto;
     display: flex;
     flex-direction: column;
     .settings-title {
         height: 7.8rem;
+        padding: 2.1rem 3.8rem;
         .title {
             font-size: 16px;
             font-weight: 500;
@@ -42,11 +40,14 @@ const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
         .radio-group {
             background: #f4f4f4;
             border-radius: 100rem;
+            width: 100%;
             .el-radio-button {
                 overflow: hidden;
+                width: 50%;
                 border-radius: 100rem;
                 :deep(.el-radio-button__inner) {
                     border: 0;
+                    width: 100%;
                     background: #f4f4f4;
                 }
                 :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
diff --git a/src/views/tabbar/index.vue b/src/views/tabbar/index.vue
index b5f85e2b..f123dae9 100644
--- a/src/views/tabbar/index.vue
+++ b/src/views/tabbar/index.vue
@@ -3,8 +3,8 @@
         <template v-if="!loading_content">
             <template v-if="!is_empty">
                 <div class="app-wrapper-content flex-row">
-                    <app-main :footer="form.footer"></app-main>
-                    <settings :key="key" :value="form.footer"></settings>
+                    <app-main :footer="form"></app-main>
+                    <settings :key="key" :value="form"></settings>
                 </div>
                 <div class="app-wrapper-footer flex-row align-c">
                     <el-button type="primary" class="footer-save" @click="save_event">保存</el-button>
@@ -18,55 +18,16 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadFile } from 'element-plus';
-import { is_obj } from '@/utils';
+import { get_math } from '@/utils';
 import { Settings, AppMain } from './components/index';
 import defaultSettings from './components/main/index';
 import { cloneDeep } from 'lodash';
-import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
+import DiyAPI from '@/api/tabbar';
 import CommonAPI from '@/api/common';
 import { commonStore } from '@/store';
 const common_store = commonStore();
-interface diy_data_item {
-    id: string;
-    model: {
-        logo: string;
-        name: string;
-        is_enable: string;
-        describe: string;
-    };
-    footer: headerAndFooter;
-}
-const temp_form = ref<diy_data_item>({
-    id: '',
-    model: {
-        logo: '',
-        name: '',
-        is_enable: '1',
-        describe: '',
-    },
-    footer: {
-        name: '底部导航',
-        show_tabs: '0',
-        key: 'footer-nav',
-        com_data: defaultSettings.footer_nav,
-    },
-});
-const form = ref<diy_data_item>({
-    id: '',
-    model: {
-        logo: '',
-        name: '',
-        is_enable: '1',
-        describe: '',
-    },
-    footer: {
-        name: '底部导航',
-        show_tabs: '0',
-        key: 'footer-nav',
-        com_data: {},
-    },
-});
+const temp_form = ref(defaultSettings.footer_nav);
+const form = ref<any>({});
 
 const key = ref('');
 //#region 页面初始化数据 ---------------------start
@@ -76,20 +37,19 @@ onMounted(() => {
 });
 const is_empty = ref(false);
 const init = () => {
-    if (get_id()) {
-        DiyAPI.getInit({ id: get_id() }).then((res: any) => {
+    DiyAPI.getTabbar({ type: 'home' })
+        .then((res: any) => {
             if (res.data) {
-                form.value = form_data_transfor_diy_data(res.data);
+                form.value = res.data;
             } else {
-                is_empty.value = true;
+                form.value = cloneDeep(temp_form.value);
             }
+            key.value = get_math();
             loading_event();
+        })
+        .catch(() => {
+            is_empty.value = true;
         });
-    } else {
-        temp_form.value.footer.com_data = defaultSettings.footer_nav;
-        form.value = cloneDeep(temp_form.value);
-        loading_event();
-    }
 };
 
 // 初始化公共数据
@@ -112,106 +72,32 @@ const loading_event = () => {
 
 //#region 顶部导航回调方法 ---------------------start
 const save_event = () => {
-    save_formmat_form_data(form.value);
-};
-// save_formmat_form_data: 保存数据， data： 数据， close： 是否关闭， is_export： 是否导出， is_preview： 是否预览
-const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_export: boolean = false, is_preview: boolean = false) => {
-    const clone_form = cloneDeep(data);
+    const clone_form = cloneDeep(form.value);
+    const new_data = {
+        type: 'home',
+        config: clone_form,
+    };
     // 数据改造
-    const new_data = diy_data_transfor_form_data(clone_form);
-    DiyAPI.save(new_data).then((res) => {
+    DiyAPI.saveTabbar(new_data).then((res: any) => {
         // 如果是导出或预览模式，则不显示保存成功的消息
-        if (!(is_export || is_preview)) {
-            ElMessage.success('保存成功');
-        }
-        if (close) {
-            ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
-                .then(() => {
-                    // 关闭页面
-                    window.close();
-                })
-                .catch(() => {});
-        } else {
-            // 判断是否需要导出
-            if (is_export) {
-                const index = window.location.href.lastIndexOf('?s=');
-                const pro_url = window.location.href.substring(0, index);
-                const new_url = import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url;
-                window.open(new_url + '?s=diyapi/diydownload/id/' + res.data + '.html', '_blank');
-            }
-            form.value.id = String(res.data);
-            history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
-        }
+        ElMessage.success('保存成功');
     });
 };
 //#endregion 顶部导航回调方法 ---------------------end
-// 数据改造
-const diy_data_transfor_form_data = (clone_form: diy_data_item) => {
-    return {
-        id: clone_form.id,
-        logo: clone_form.model.logo,
-        name: clone_form.model.name,
-        is_enable: clone_form.model.is_enable,
-        describe: clone_form.model.describe,
-        config: JSON.stringify({
-            footer: clone_form.footer,
-        }),
-    };
-};
-const form_data_transfor_diy_data = (clone_form: diyData) => {
-    let temp_config = clone_form.config;
-    let new_tem_form = cloneDeep(temp_form.value);
-    try {
-        return {
-            id: clone_form.id,
-            model: {
-                logo: clone_form.logo,
-                name: clone_form.name,
-                is_enable: clone_form.is_enable,
-                describe: clone_form.describe,
-            },
-            footer: is_obj(temp_config) ? (temp_config as diyConfig).footer : JSON.parse(temp_config as string).footer,
-        };
-    } catch (error) {
-        return {
-            id: clone_form.id,
-            model: {
-                logo: clone_form.logo,
-                name: clone_form.name,
-                is_enable: clone_form.is_enable,
-                describe: clone_form.describe,
-            },
-            footer: new_tem_form.footer,
-        };
-    }
-};
-
-// 截取document.location.search字符串内id/后面的所有字段
-const get_id = () => {
-    let new_id = '';
-    if (document.location.search.indexOf('id/') !== -1) {
-        new_id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
-        // 去除字符串的.html
-        let html_index = new_id.indexOf('.html');
-        if (html_index !== -1) {
-            new_id = new_id.substring(0, html_index);
-        }
-        return new_id;
-    } else {
-        return new_id;
-    }
-};
 </script>
 
 <style scoped lang="scss">
 .app-wrapper {
     background-color: #fff;
     .app-wrapper-content {
-        height: calc(100vh - 11.1rem);
+        height: calc(100vh - 6.2rem);
     }
     .app-wrapper-footer {
-        height: 11.1rem;
-        padding: 3.5rem 2rem;
+        height: 6.2rem;
+        padding: 1.5rem;
+        border-top: 0.1rem solid #f5f5f5;
+        position: relative;
+        background: #fff;
         .footer-save {
             height: 3.1rem;
             line-height: 3.1rem;
@@ -234,9 +120,9 @@ const get_id = () => {
     box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
 }
 :deep(.settings) {
-    box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
+    // box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
     .settings-title {
-        box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
+        // box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
     }
 }
 </style>