diff --git a/components/diy/auxiliary-line.vue b/components/diy/auxiliary-line.vue
index bbaa4481..aaf33163 100644
--- a/components/diy/auxiliary-line.vue
+++ b/components/diy/auxiliary-line.vue
@@ -22,14 +22,18 @@
             };
         },
         mounted() {
-            const new_content = this.value.content || {};
-            const new_style = this.value.style || {};
-            let border_content = `border-bottom-style: ${new_content?.styles || 'solid'};`;
-            let border_style = `border-bottom-width: ${new_style.line_width || 1}px; border-bottom-color: ${new_style.line_color || 'rgba(204, 204, 204, 1)'};`;
-            this.style = border_content + border_style;
-            this.style_container = common_styles_computer(new_style.common_style);
+            init();
+        },
+        methods: {
+            init() {
+                const new_content = this.value.content || {};
+                const new_style = this.value.style || {};
+                let border_content = `border-bottom-style: ${new_content?.styles || 'solid'};`;
+                let border_style = `border-bottom-width: ${new_style.line_width || 1}px; border-bottom-color: ${new_style.line_color || 'rgba(204, 204, 204, 1)'};`;
+                this.style = border_content + border_style;
+                this.style_container = common_styles_computer(new_style.common_style);
+            },
         },
-        methods: {},
     };
 </script>
 
diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index dceeaaec..cd117e4e 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -7,7 +7,7 @@
                 <componentDiyAuxiliaryLine v-if="item.key == 'row-line'" :value="item.com_data"></componentDiyAuxiliaryLine>
             </view>
         </view>
-        <componentDiyFooter></componentDiyFooter>
+        <componentDiyFooter :value="value.footer.com_data"></componentDiyFooter>
     </view>
 </template>
 
diff --git a/components/diy/footer.vue b/components/diy/footer.vue
index 549d6fef..63c04744 100644
--- a/components/diy/footer.vue
+++ b/components/diy/footer.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="footer-nav flex-row jc-c align-c" :class="showFooter ? 'br-2 br-primary' : ''" @click="footer_nav_event">
+    <view class="footer-nav flex-row jc-c align-c">
         <view class="footer-nav-content flex-row jc-c align-c w" :style="style_container">
             <ul class="flex-row jc-sa align-c w">
                 <li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index" @mouseleave="is_hover = 0">
@@ -19,11 +19,46 @@
 </template>
 
 <script>
+    import { common_styles_computer } from '@/common/js/common/common.js';
     export default {
-        data() {
-            return {};
+        props: {
+            value: {
+                type: Object,
+                default: () => ({}),
+            },
+        },
+        data() {
+            return {
+                style_container: '',
+                style: '',
+                nav_content: [],
+                nav_style: 0,
+                default_text_color: '',
+                text_color_checked: '',
+            };
+        },
+        mounted() {
+            init();
+        },
+        methods: {
+            init() {
+                const new_content = value.content || {};
+                const new_style = value.style || {};
+                this.nav_content = new_content.nav_content || [];
+                this.nav_style = new_content.nav_style || 0;
+                this.default_text_color = 'color:' + new_style.default_text_color || 'rgba(0, 0, 0, 1)';
+                this.text_color_checked = 'color:' + new_style.text_color_checked || 'rgba(204, 204, 204, 1)';
+
+                this.style_container = common_styles_computer(new_style.common_style);
+                let footer_height = new_style.common_style.padding_top + new_style.common_style.padding_bottom + new_style.common_style.margin_top + new_style.common_style.margin_bottom + 50;
+                if (footer_height >= 70) {
+                    footer_height = footer_height;
+                } else {
+                    footer_height = 70;
+                }
+                footer_nav_counter_store.padding_footer_computer(footer_height);
+            },
         },
-        methods: {},
     };
 </script>