diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index b98d7fff..debe1e70 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -1,15 +1,19 @@
 <template>
     <view>
+        <componentDiyHeader></componentDiyHeader>
         <view v-if="value.diy_data.length > 0">
-            <componentDiySearch></componentDiySearch>
             <view v-for="(item, index) in value.diy_data" :key="index">
+                <componentDiySearch></componentDiySearch>
                 <componentDiyAuxiliaryLine v-if="item.key == 'row-line'" :value="item.com_data"></componentDiyAuxiliaryLine>
             </view>
         </view>
+        <componentDiyFooter></componentDiyFooter>
     </view>
 </template>
 
 <script>
+    import componentDiyHeader from '@/components/diy/header';
+    import componentDiyFooter from '@/components/diy/footer';
     import componentDiySearch from '@/components/diy/search';
     import componentDiyAuxiliaryLine from '@/components/diy/auxiliary-line';
     export default {
@@ -21,6 +25,8 @@
             },
         },
         components: {
+            componentDiyHeader,
+            componentDiyFooter,
             componentDiySearch,
             componentDiyAuxiliaryLine,
         },
diff --git a/components/diy/footer.vue b/components/diy/footer.vue
new file mode 100644
index 00000000..46dd3347
--- /dev/null
+++ b/components/diy/footer.vue
@@ -0,0 +1,14 @@
+<template>
+    <view> 这是底部导航 </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {};
+        },
+        methods: {},
+    };
+</script>
+
+<style></style>
diff --git a/components/diy/header.vue b/components/diy/header.vue
new file mode 100644
index 00000000..80e5168d
--- /dev/null
+++ b/components/diy/header.vue
@@ -0,0 +1,14 @@
+<template>
+    <view> 这是头部 </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {};
+        },
+        methods: {},
+    };
+</script>
+
+<style></style>