src/components/customFooter/size1920/index.vue

@@ -17,6 +17,9 @@
     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,6 +17,8 @@
     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,67 +22,72 @@
 </template>
 
 <script setup>
-import FiEELogo from '@/assets/image/header/logo.png'
+import FiEELogo from "@/assets/image/header/logo.png";
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from "vue";
-import { NMenu, NLayoutHeader, NImage } from 'naive-ui'
+import { NMenu, NLayoutHeader, NImage } from "naive-ui";
-import { useI18n } from 'vue-i18n'
+import { useI18n } from "vue-i18n";
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-import { useHeaderMenuConfig } from '@/config/headerMenuConfig'
+import { useHeaderMenuConfig } from "@/config/headerMenuConfig";
 
-const { t } = useI18n()
+const { t } = useI18n();
-const router = useRouter()
+const router = useRouter();
 
 // 使用统一的菜单配置
-const menuOptions = useHeaderMenuConfig()
+const menuOptions = useHeaderMenuConfig();
-const selectedKey = ref(null)
+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)
+      const found = findMenuOptionByKey(option.children, key);
-      if (found) return found
+      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')
+  router.push("/myhome");
-  selectedKey.value = null // 重置菜单选中状态
+  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);
@@ -138,7 +143,7 @@ const handleToHome = () => {
     text-align: center;
 
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       bottom: 0;
       left: 50%;
@@ -184,7 +189,7 @@ const handleToHome = () => {
         overflow: hidden;
 
         &::before {
-          content: '';
+          content: "";
           position: absolute;
           top: 0;
           left: 0;

src/components/customHeader/size375/index.vue

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

src/views/index/size375/index.vue

@@ -1,18 +1,38 @@
 <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
+    <div class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1 overflow-auto">
-      class="bg-[url('@/assets/image/bg-mobile.png')] bg-cover bg-center flex-1 overflow-auto"
+    <router-view />
-    >
-      <router-view />
-    </div>
-    <customFooter />
   </div>
+  <customFooter />
+</div>
+ 
 </template>
 
-<style scoped lang="scss"></style>
+<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>