修改底部文字，增加4个超链接

src/components/customFooter/index.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 
 import size375 from '@/components/customFooter/size375/index.vue'
-import size768 from '@/components/customFooter/size1920/index.vue'
+import size768 from '@/components/customFooter/size768/index.vue'
 import size1440 from '@/components/customFooter/size1920/index.vue'
 import size1920 from '@/components/customFooter/size1920/index.vue'
 import { useRouter } from 'vue-router'
@@ -15,7 +15,7 @@ const { t } = useI18n()
 
 const viewComponent = computed(() => {
   const viewWidth = width.value
-  if (viewWidth <= 450) {
+  if (viewWidth <= 500) {
     return size375
   } else if (viewWidth <= 1100) {
     return size768

src/components/customFooter/size1920/index.vue

@@ -1,23 +1,61 @@
 <template>
   <!-- 通用页脚 -->
   <div class="custom-footer">
-    <span>Copyright &copy; 2024-2027 FiEE</span>
+    <div class="custom-footer-box">
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  console.log(link)
+  router.push(link)
+}
+</script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
-  text-align: center;
+  background: #f7f8fa;
-  padding: 24px 0;
+  border-top: 1px solid #ececec;
+  z-index: 100;
+
+  .custom-footer-box {
+    max-width: 1700px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    letter-spacing: 1px;
     color: #888;
     // font-size: 15px;
     font-size: 1.05rem;
-  background: #f7f8fa;
+    padding: 1rem 40px;
-  letter-spacing: 1px;
+    text-align: center;
-  border-top: 1px solid #ececec;
+  }
-  z-index: 100;
+
+  .footer-links {
+    margin: 0.4rem 0 0;
+    span {
+      border-right: 1px solid #d2d2d7;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+    span:nth-last-child(1) {
+      border: 0;
+    }
+  }
 }
 </style>

src/components/customFooter/size375/index.vue

@@ -1,23 +1,63 @@
 <template>
   <!-- 通用页脚 -->
   <div class="custom-footer">
-      <span>Copyright &copy; 2024-2027 FiEE</span>
+    <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+    <div class="footer-links-box">
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+      </div>
+      <div class="footer-links">
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
   </div>
 </template>
 
-  <script setup></script>
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+//点击跳转到对应的链接页面
+const handleLink = (link) => {
+  router.push(link)
+}
+</script>
 
 <style scoped lang="scss">
 .custom-footer {
   width: 100%;
   text-align: center;
-    padding: 120px 0;
+  padding: 1rem 0;
   color: #888;
-    font-size: 75px;
+  font-size: 0.9rem;
   background: #f7f8fa;
   letter-spacing: 5px;
   border-top: 5px solid #ececec;
   z-index: 100;
+
+  .footer-links-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0.6rem 0 0;
+
+    .footer-links {
+      span {
+        border-right: 1px solid #d2d2d7;
+        padding: 0 0.8rem;
+        cursor: pointer;
+        font-size: 0.75rem;
+        min-width: 8.5rem;
+        display: inline-block;
+        text-align: left;
+      }
+      span:nth-last-child(1) {
+        border: 0;
+      }
+    }
+  }
 }
 </style>
-  

src/components/customFooter/size768/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <!-- 通用页脚 -->
+    <div class="custom-footer">
+      <span>&copy; 2025 FiEE, Inc. All Rights Reserved.</span>
+      <div class="footer-links">
+        <span @click="handleLink('privacyPolicy')">Privacy Policy</span>
+        <span @click="handleLink('termsOfUse')">Terms of use</span>
+        <span @click="handleLink('cookiesSettings')">Cookies Settings</span>
+        <span @click="handleLink('siteMap')">Site Map</span>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  
+  //点击跳转到对应的链接页面
+  const handleLink = (link) => {
+    console.log(link)
+    router.push(link)
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  .custom-footer {
+    width: 100%;
+    text-align: center;
+    padding: 24px 0;
+    color: #888;
+    // font-size: 15px;
+    font-size: 1.05rem;
+    background: #f7f8fa;
+    letter-spacing: 1px;
+    border-top: 1px solid #ececec;
+    z-index: 100;
+    padding: 1rem 0;
+  
+    .footer-links {
+      margin: 0.4rem 0 0;
+      span {
+        border-right: 1px solid #d2d2d7;
+        padding: 0 10px;
+        cursor: pointer;
+      }
+      span:nth-last-child(1) {
+        border: 0;
+      }
+    }
+  }
+  </style>
+  

src/router/index.js

@@ -104,6 +104,26 @@ const routes = [
         name: "govern",
         component: () => import("@/views/govern/index.vue"),
       },
+      {
+        path: "/privacyPolicy",
+        name: "privacyPolicy",
+        component: () => import("@/views/footerLinks/privacyPolicy/index.vue"),
+      },
+      {
+        path: "/termsOfUse",
+        name: "termsOfUse",
+        component: () => import("@/views/footerLinks/termsOfUse/index.vue"),
+      },
+      {
+        path: "/cookiesSettings",
+        name: "cookiesSettings",
+        component: () => import("@/views/footerLinks/cookiesSettings/index.vue"),
+      },
+      {
+        path: "/siteMap",
+        name: "siteMap",
+        component: () => import("@/views/footerLinks/siteMap/index.vue"),
+      },
     ],
   },
   

src/views/footerLinks/cookiesSettings/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
+import size768 from '@/views/footerLinks/cookiesSettings/size375/index.vue'
+import size1440 from '@/views/footerLinks/cookiesSettings/size1920/index.vue'
+import size1920 from '@/views/footerLinks/cookiesSettings/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/footerLinks/cookiesSettings/size1920/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 cookiesSettings
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

src/views/footerLinks/cookiesSettings/size375/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 cookiesSettings
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

src/views/footerLinks/privacyPolicy/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/privacyPolicy/size375/index.vue'
+import size768 from '@/views/footerLinks/privacyPolicy/size375/index.vue'
+import size1440 from '@/views/footerLinks/privacyPolicy/size1920/index.vue'
+import size1920 from '@/views/footerLinks/privacyPolicy/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/footerLinks/privacyPolicy/size1920/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 privacyPolicy
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

src/views/footerLinks/privacyPolicy/size375/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 privacyPolicy
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

src/views/footerLinks/siteMap/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/siteMap/size375/index.vue'
+import size768 from '@/views/footerLinks/siteMap/size375/index.vue'
+import size1440 from '@/views/footerLinks/siteMap/size1920/index.vue'
+import size1920 from '@/views/footerLinks/siteMap/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/footerLinks/siteMap/size1920/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 siteMap
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

src/views/footerLinks/siteMap/size375/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 siteMap
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

src/views/footerLinks/termsOfUse/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+import size375 from '@/views/footerLinks/termsOfUse/size375/index.vue'
+import size768 from '@/views/footerLinks/termsOfUse/size375/index.vue'
+import size1440 from '@/views/footerLinks/termsOfUse/size1920/index.vue'
+import size1920 from '@/views/footerLinks/termsOfUse/size1920/index.vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { width } = useWindowSize()
+const { t } = useI18n()
+
+const viewComponent = computed(() => {
+  const viewWidth = width.value
+  if (viewWidth <= 450) {
+    return size375
+  } else if (viewWidth <= 1100) {
+    return size768
+  } else if (viewWidth <= 1500) {
+    return size1440
+  } else if (viewWidth <= 1920 || viewWidth > 1920) {
+    return size1920
+  }
+})
+</script>
+
+<template>
+  <component :is="viewComponent" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/footerLinks/termsOfUse/size1920/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    1920 termsOfUse
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>

src/views/footerLinks/termsOfUse/size375/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
+import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
+</script>
+
+<template>
+  <header className="header">
+    375 termsOfUse
+  </header>
+  <main ref="main"></main>
+</template>
+
+<style scoped lang="scss">
+</style>