修正头脚高度布局计算

src/components/customFooter/size1920/index.vue

@@ -17,9 +17,6 @@
     background: #f7f8fa;
     letter-spacing: 1px;
     border-top: 1px solid #ececec;
-    position: fixed;
-    left: 0;
-    bottom: 0;
     z-index: 100;
   }
   </style>

src/components/customFooter/size375/index.vue

@@ -17,8 +17,6 @@
     background: #f7f8fa;
     letter-spacing: 5px;
     border-top: 5px solid #ececec;
-    left: 0;
-    bottom: 0;
     z-index: 100;
   }
   </style>

src/components/customHeader/size1920/index.vue

@@ -22,72 +22,67 @@
 </template>
 
 <script setup>
-import FiEELogo from "@/assets/image/header/logo.png";
-import { ref, onMounted, onUnmounted } from "vue";
-import { NMenu, NLayoutHeader, NImage } from "naive-ui";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
-import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
+import FiEELogo from '@/assets/image/header/logo.png'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
 
-const { t } = useI18n();
-const router = useRouter();
+const { t } = useI18n()
+const router = useRouter()
 
 // 使用统一的菜单配置
-const menuOptions = useHeaderMenuConfig();
-const selectedKey = ref(null);
+const menuOptions = useHeaderMenuConfig()
+const selectedKey = ref(null)
 
-const isScrolled = ref(false);
+const isScrolled = ref(false)
 
 // 递归查找菜单项
 function findMenuOptionByKey(options, key) {
   for (const option of options) {
-    if (option.key === key) return option;
+    if (option.key === key) return option
     if (option.children) {
-      const found = findMenuOptionByKey(option.children, key);
-      if (found) return found;
+      const found = findMenuOptionByKey(option.children, key)
+      if (found) return found
     }
   }
-  return null;
+  return null
 }
 
 // 菜单点击跳转
 const handleMenuSelect = (key) => {
-  const option = findMenuOptionByKey(menuOptions, key);
+  const option = findMenuOptionByKey(menuOptions, key)
   if (option && option.href) {
-    router.push(option.href);
+    router.push(option.href)
   }
-};
+}
 
 // 监听滚动事件
 const handleScroll = () => {
   //滚动距离大于100px时，处理对应的header样式
-  isScrolled.value = window.scrollY >= 100;
-};
+  isScrolled.value = window.scrollY >= 100
+}
 
 onMounted(() => {
-  window.addEventListener("scroll", handleScroll);
-});
+  window.addEventListener('scroll', handleScroll)
+})
 
 onUnmounted(() => {
-  window.removeEventListener("scroll", handleScroll);
-});
+  window.removeEventListener('scroll', handleScroll)
+})
 
 //点击回到首页
 const handleToHome = () => {
-  router.push("/myhome");
-  selectedKey.value = null; // 重置菜单选中状态
-};
+  router.push('/myhome')
+  selectedKey.value = null // 重置菜单选中状态
+}
 </script>
 
 <style scoped lang="scss">
 .custom-header {
   --header-height: 80px;
   --primary-color: #8b59f7;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
   transition: all 0.3s ease;
   background: transparent;
   height: var(--header-height);
@@ -143,7 +138,7 @@ const handleToHome = () => {
     text-align: center;
 
     &::after {
-      content: "";
+      content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
@@ -189,7 +184,7 @@ const handleToHome = () => {
         overflow: hidden;
 
         &::before {
-          content: "";
+          content: '';
           position: absolute;
           top: 0;
           left: 0;

src/components/customHeader/size375/index.vue

@@ -108,11 +108,6 @@ const handleToHome = () => {
 
 <style scoped lang="scss">
 .custom-header {
-
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
   transition: all 0.3s ease;
   background: transparent;
   height: 320px;

src/views/index/size1920/index.vue

@@ -1,7 +1,4 @@
 <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>
@@ -9,15 +6,13 @@ import customFooter from '@/components/customFooter/index.vue'
 <template>
   <div class="flex flex-col h-screen">
     <customHeader></customHeader>
-  <div class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1" style="margin: 80px 0;">
-    <router-view />
-  </div>
-  <customFooter></customFooter>
+    <div
+      class="bg-[url('@/assets/image/bg-pc.png')] bg-cover bg-center flex-1 overflow-auto"
+    >
+      <router-view />
+    </div>
+    <customFooter></customFooter>
   </div>
 </template>
 
-<style scoped lang="scss">
-main {
-  padding: var(--header-height, 80px) 0 0;
-}
-</style>
+<style scoped lang="scss"></style>

src/views/index/size375/index.vue

@@ -1,38 +1,18 @@
 <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> -->
   <div class="flex flex-col h-screen">
     <customHeader />
-    <div class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1 overflow-auto">
-    <router-view />
+    <div
+      class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1 overflow-auto"
+    >
+      <router-view />
+    </div>
+    <customFooter />
   </div>
-  <customFooter />
-</div>
- 
 </template>
 
-<style scoped lang="scss">
-.background-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url('@/assets/image/bg-375.png');
-  background-size: 100% 100%;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  z-index: -1;
-}
-</style>
+<style scoped lang="scss"></style>