diff --git a/src/assets/images/tabbar/phone-temp-bg.jpg b/src/assets/images/tabbar/phone-temp-bg.jpg
new file mode 100644
index 00000000..d8ce015b
Binary files /dev/null and b/src/assets/images/tabbar/phone-temp-bg.jpg differ
diff --git a/src/router/index.ts b/src/router/index.ts
index 84d39697..defae0b2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import Layout from '@/views/layout/index.vue';
+import Tabbar from '@/views/tabbar/index.vue';
 
 export const constantRoutes: RouteRecordRaw[] = [
     {
@@ -18,6 +19,11 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: Layout,
         meta: { hidden: true },
     },
+    {
+        path: '/tabbar',
+        component: Tabbar,
+        meta: { hidden: true },
+    },
     // {
     //     path: '/',
     //     component: Layout,
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index b76606b1..b08bb913 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import type { UploadFile } from 'element-plus';
 import { is_obj } from '@/utils';
-import { Navbar, Settings, AppMain } from './components/index';
+import { Settings, AppMain } from './components/index';
 import defaultSettings from './components/main/index';
 import { cloneDeep } from 'lodash';
 import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
@@ -183,6 +183,7 @@ const save_event = () => {
 const save_close_event = () => {
     save_formmat_form_data(form.value, true);
 };
+// 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);
     clone_form.header.show_tabs = '1';
diff --git a/src/views/tabbar/components/index.ts b/src/views/tabbar/components/index.ts
new file mode 100644
index 00000000..835b9fce
--- /dev/null
+++ b/src/views/tabbar/components/index.ts
@@ -0,0 +1,2 @@
+export { default as Settings } from './settings/index.vue';
+export { default as AppMain } from './main/index.vue';
diff --git a/src/views/tabbar/components/main/default/footer-nav.ts b/src/views/tabbar/components/main/default/footer-nav.ts
new file mode 100644
index 00000000..3f075157
--- /dev/null
+++ b/src/views/tabbar/components/main/default/footer-nav.ts
@@ -0,0 +1,34 @@
+import defaultCommon from './index';
+import { online_url } from '@/utils';
+const new_url = await online_url('/static/app/tabbar/').then((res) => res);
+interface DefaultFooterNav {
+    content: {
+        nav_style: number;
+        nav_type: number;
+        nav_content: { id: string; name: string; img: uploadList[]; img_checked: uploadList[]; link: object }[];
+    };
+    style: {
+        text_color_checked: string;
+        default_text_color: string;
+        common_style: object;
+    };
+}
+const defaultFooterNav = ref<DefaultFooterNav>({
+    content: {
+        nav_style: 0,
+        nav_type: 0,
+        nav_content: [
+            { id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 2, url: new_url + 'active/home.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
+            { id: '2', name: '分类', img: [{ id: 3, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 4, url: new_url + 'active/category.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
+            { id: '3', name: '购物车', img: [{ id: 5, url: new_url + 'cart.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 6, url: new_url + 'active/cart.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
+            { id: '4', name: '我的', img: [{ id: 7, url: new_url + 'user.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 8, url: new_url + 'active/user.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
+        ],
+    },
+    style: {
+        text_color_checked: 'rgba(255, 0, 0, 1)',
+        default_text_color: 'rgba(0, 0, 0, 1)',
+        common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: undefined }] },
+    },
+});
+
+export default defaultFooterNav;
diff --git a/src/views/tabbar/components/main/default/index.ts b/src/views/tabbar/components/main/default/index.ts
new file mode 100644
index 00000000..77abcbd5
--- /dev/null
+++ b/src/views/tabbar/components/main/default/index.ts
@@ -0,0 +1,29 @@
+const defaultCommon: componentsCommonCommonStyle = {
+    direction: '90deg',
+    color_list: [{ color: '', color_percentage: undefined }],
+    background_img_style: 2,
+    floating_up: 0,
+    padding: 0,
+    padding_top: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    padding_right: 0,
+    margin: 0,
+    margin_top: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    margin_right: 0,
+    radius: 0,
+    radius_top_left: 0,
+    radius_top_right: 0,
+    radius_bottom_left: 0,
+    radius_bottom_right: 0,
+    box_shadow_color: '',
+    box_shadow_x: 0,
+    box_shadow_y: 0,
+    box_shadow_blur: 0,
+    box_shadow_spread: 0,
+    background_img: [] as uploadList[],
+};
+
+export default defaultCommon;
diff --git a/src/views/tabbar/components/main/index.ts b/src/views/tabbar/components/main/index.ts
new file mode 100644
index 00000000..68ac974d
--- /dev/null
+++ b/src/views/tabbar/components/main/index.ts
@@ -0,0 +1,11 @@
+import defaultFooterNav from './default/footer-nav';
+// 系统设置
+interface DefaultSettings {
+    footer_nav: object;
+}
+
+const defaultSettings: DefaultSettings = {
+    footer_nav: defaultFooterNav,
+};
+
+export default defaultSettings;
diff --git a/src/views/tabbar/components/main/index.vue b/src/views/tabbar/components/main/index.vue
new file mode 100644
index 00000000..bd9ec2f4
--- /dev/null
+++ b/src/views/tabbar/components/main/index.vue
@@ -0,0 +1,78 @@
+<template>
+    <!-- 视图渲染 -->
+    <div class="main re">
+        <div class="model">
+            <div class="model-content box-shadow-sm">
+                <div class="bg-f re">
+                    <image-empty v-model="header_image" error-img-style="width:100%;"></image-empty>
+                </div>
+                <div class="re">
+                    <image-empty v-model="content_image" error-img-style="width:100%;height:100%;"></image-empty>
+                </div>
+                <!-- 底部区域 -->
+                <div class="model-bottom">
+                    <footer-nav :footer-data="footer_nav.com_data"></footer-nav>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    footer: {
+        type: Object,
+        default: () => {},
+    },
+});
+const footer_nav = ref(props.footer);
+const header_image = ref(new URL(`../../../../assets/images/components/page-settings/theme-1.png`, import.meta.url).href);
+const content_image = ref(new URL(`../../../../assets/images/tabbar/phone-temp-bg.jpg`, import.meta.url).href);
+watch(
+    () => props.footer,
+    (newValue) => {
+        footer_nav.value = newValue;
+        console.log(newValue);
+    },
+    { deep: true }
+);
+//#endregion
+</script>
+
+<style lang="scss" scoped>
+.main {
+    flex: 1;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    .model {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        height: 100%;
+        padding: 2rem 0;
+        .model-content {
+            position: relative;
+            max-height: 84.6rem;
+            height: 100%;
+            width: 39rem;
+            overflow: hidden;
+            .model-bottom {
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                z-index: 2;
+                .roll {
+                    border-top: 0.1rem solid #f5f5f5;
+                    height: 4rem;
+                    width: 39rem;
+                    background: #fff;
+                    margin: 0 auto;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/tabbar/components/settings/index.vue b/src/views/tabbar/components/settings/index.vue
new file mode 100644
index 00000000..72cbe932
--- /dev/null
+++ b/src/views/tabbar/components/settings/index.vue
@@ -0,0 +1,69 @@
+<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>
+            <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>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    value: {
+        type: Object,
+        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;
+        .title {
+            font-size: 16px;
+            font-weight: 500;
+            color: #333;
+        }
+        .radio-group {
+            background: #f4f4f4;
+            border-radius: 100rem;
+            .el-radio-button {
+                overflow: hidden;
+                border-radius: 100rem;
+                :deep(.el-radio-button__inner) {
+                    border: 0;
+                    background: #f4f4f4;
+                }
+                :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+                    background: $cr-primary;
+                }
+            }
+        }
+    }
+    .setting-content {
+        height: calc(100vh - 14.8rem);
+        overflow: auto;
+        background-color: #fff;
+    }
+}
+@media screen and (max-width: 1560px) {
+    .settings {
+        width: 40rem;
+    }
+}
+</style>
diff --git a/src/views/tabbar/index.vue b/src/views/tabbar/index.vue
index 811a80e7..b5f85e2b 100644
--- a/src/views/tabbar/index.vue
+++ b/src/views/tabbar/index.vue
@@ -1,7 +1,242 @@
 <template>
-    <div></div>
+    <div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
+        <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>
+                </div>
+                <div class="app-wrapper-footer flex-row align-c">
+                    <el-button type="primary" class="footer-save" @click="save_event">保存</el-button>
+                </div>
+            </template>
+            <template v-else>
+                <no-data height="100vh" img-width="260px" size="16px" text="编辑数据有误"></no-data>
+            </template>
+        </template>
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { UploadFile } from 'element-plus';
+import { is_obj } 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 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: {},
+    },
+});
 
-<style scoped lang="scss"></style>
+const key = ref('');
+//#region 页面初始化数据 ---------------------start
+// 页面加载
+onMounted(() => {
+    common_init();
+});
+const is_empty = ref(false);
+const init = () => {
+    if (get_id()) {
+        DiyAPI.getInit({ id: get_id() }).then((res: any) => {
+            if (res.data) {
+                form.value = form_data_transfor_diy_data(res.data);
+            } else {
+                is_empty.value = true;
+            }
+            loading_event();
+        });
+    } else {
+        temp_form.value.footer.com_data = defaultSettings.footer_nav;
+        form.value = cloneDeep(temp_form.value);
+        loading_event();
+    }
+};
+
+// 初始化公共数据
+const common_init = () => {
+    CommonAPI.getInit().then((res: any) => {
+        common_store.set_common(res.data);
+        init();
+    });
+};
+// 加载动画
+const loading = ref(true);
+const loading_content = ref(true);
+const loading_event = () => {
+    loading_content.value = false;
+    setTimeout(() => {
+        loading.value = false;
+    }, 1000);
+};
+//#endregion 页面初始化数据 ---------------------end
+
+//#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 new_data = diy_data_transfor_form_data(clone_form);
+    DiyAPI.save(new_data).then((res) => {
+        // 如果是导出或预览模式，则不显示保存成功的消息
+        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');
+        }
+    });
+};
+//#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);
+    }
+    .app-wrapper-footer {
+        height: 11.1rem;
+        padding: 3.5rem 2rem;
+        .footer-save {
+            height: 3.1rem;
+            line-height: 3.1rem;
+            padding-top: 0;
+            padding-bottom: 0;
+            font-size: 1.2rem;
+            min-width: 8rem;
+        }
+    }
+}
+.no-copy {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+:deep(.divider-line) {
+    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);
+    .settings-title {
+        box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
+    }
+}
+</style>