From a693dd53b27c3f3dfc4d6a01fcbb5d3a51676435 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Thu, 22 May 2025 20:46:09 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B0=81=E8=A3=85=E7=9A=84?=
 =?UTF-8?q?=E5=A4=B4=E9=83=A8=E7=BB=84=E4=BB=B6=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue          | 20 +++++++++++++++-----
 src/views/home/size1920/index.vue | 10 +++++++++-
 src/views/home/size375/index.vue  | 11 ++++++++++-
 3 files changed, 34 insertions(+), 7 deletions(-)

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">