diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 642d65e..ab5cf3e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,12 +1,22 @@
 <script setup>
-import customHeader from '@/components/customHeader/index.vue'
-import customFooter from '@/components/customFooter/index.vue'
+import size1920 from '@/views/home/size1920/index.vue'
+import size375 from '@/views/home/size375/index.vue'
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
 </script>
 
 <template>
-  <customHeader />
-  <router-view />
-  <customFooter />
+  <component :is="viewComponent" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/views/home/size1920/index.vue b/src/views/home/size1920/index.vue
index 15a1a09..82aedef 100644
--- a/src/views/home/size1920/index.vue
+++ b/src/views/home/size1920/index.vue
@@ -1,13 +1,21 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
 import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+
+import customHeader from '@/components/customHeader/index.vue'
+import customFooter from '@/components/customFooter/index.vue'
 </script>
 
 <template>
   <!-- <header className="header">
   1920
   </header> -->
-  <main ref="main"></main>
+  <!-- <main ref="main"></main> -->
+  <customHeader />
+  <div style="margin: 80px 0;">
+    <router-view />
+  </div>
+  <customFooter />
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/home/size375/index.vue b/src/views/home/size375/index.vue
index 9802b79..3505a54 100644
--- a/src/views/home/size375/index.vue
+++ b/src/views/home/size375/index.vue
@@ -1,13 +1,22 @@
 <script setup>
 import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
 import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+
+import customHeader from '@/components/customHeader/index.vue'
+import customFooter from '@/components/customFooter/index.vue'
 </script>
 
 <template>
   <!-- <header className="header">
   375
   </header> -->
-  <main ref="main"></main>
+  <!-- <main ref="main"></main> -->
+
+  <customHeader />
+  <div style="margin: 80px 0;">
+    <router-view />
+  </div>
+  <customFooter />
 </template>
 
 <style scoped lang="scss">