添加一些简易效果

src/App.vue

@@ -13,15 +13,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-100 relative">
+  <div class="relative min-h-screen bg-gray-100">
     <nav-bar/>
     <router-view/>
     <footer class="mt-8 flex w-full items-end py-4 min-h-48">
       <div class="container mx-auto">
         <p class="text-center leading-8">&copy;2024 All rights reserved.</p>
-        <!--      <a class="flex items-center justify-center" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral">-->
-        <!--        本网站由<img :src="getAssetURL('upyun.png')" alt="又拍云" class="h-8 w-auto">提供CDN加速/云储存服务-->
-        <!--      </a>-->
         <div class="flex justify-center gap-4">
           <a href="https://beian.miit.gov.cn/" target="_blank">
             <img alt="苏ICP备2022016243号-1"

src/components/alert/UnderMaintenance.vue

@@ -3,10 +3,10 @@
 </script>
 
 <template>
-  <div class="flex items-center justify-center min-h-screen bg-gray-100">
+  <div class="flex min-h-screen items-center justify-center bg-gray-100">
-    <div class="text-center p-6 max-w-md w-full bg-white shadow-lg rounded-lg">
+    <div class="w-full max-w-md rounded-lg bg-white p-6 text-center shadow-lg">
-      <h1 class="text-4xl font-bold text-gray-800 mb-4">建设中 🚧</h1>
+      <h1 class="mb-4 text-4xl font-bold text-gray-800">建设中 🚧</h1>
-      <p class="text-gray-600 text-lg">
+      <p class="text-lg text-gray-600">
         此页面正在建设中，请稍后再来查看更新。
       </p>
     </div>

src/components/card/FullScreenIntroCard.vue

@@ -1,14 +1,37 @@
 <script lang="ts" setup>
+// 使用 ref 跟踪鼠标的 x 和 y 坐标
+import {computed, ref} from "vue";
+import {getAssetURL} from "@/utils/function.ts";
 
-import UnderMaintenance from "@/components/alert/UnderMaintenance.vue";
+const mouseX = ref(0)
+const mouseY = ref(0)
+
+// 监听鼠标移动
+const handleMouseMove = (event: MouseEvent) => {
+  // 根据窗口大小计算鼠标相对于中心位置的偏移比例
+  mouseX.value = (event.clientX / window.innerWidth - 0.5) * 10
+  mouseY.value = (event.clientY / window.innerHeight - 0.5) * 10
+}
+
+// 根据鼠标位置动态调整背景图像的位置
+const backgroundStyle = computed(() => ({
+  backgroundPosition: `${50 + mouseX.value}% ${50 + mouseY.value}%`,
+  backgroundImage: `url(${getAssetURL('bg.png')})`,
+  backgroundSize: "150px",
+  transition: 'background-position 0.1s'
+}))
 </script>
 
 <template>
-  <div class="h-screen w-full bg-blue-400">
+  <div :style="backgroundStyle" class="relative h-screen w-full bg-blue-400 flex items-center justify-center"
-    <under-maintenance/>
+       @mousemove="handleMouseMove"
+  >
+    <div class="bg-white w-1/2 h-1/2 rounded-xl">
+
+    </div>
   </div>
 </template>
 
 <style scoped>
 
-</style>
+</style>

src/components/nav/NavBar.vue

@@ -2,7 +2,7 @@
 
 import {getAssetURL} from "@/utils/function.ts";
 import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
-import {computed, ref} from "vue";
+import {computed, onMounted, onUnmounted, ref} from "vue";
 
 type Widget = {
   icon: string[]
@@ -10,6 +10,8 @@ type Widget = {
   title: string
 }
 
+// 使用 ref 跟踪是否滚动
+const scrolled = ref(false)
 const littleWidget: Widget[] = [
   {
     icon: ['fas', 'gauge'],
@@ -27,7 +29,7 @@ const littleWidget: Widget[] = [
     title: "Git Repository"
   }
 ]
-const logoUrl = getAssetURL("logo-c.png")
+const logoUrl = getAssetURL("logo-w.png")
 const logoType: string = "logo";
 const showLogo = computed(() => logoType === 'text')
 const isExpended = ref<boolean>(false)
@@ -87,10 +89,25 @@ const menuClose = () => {
   isExpended.value = false
 }
 
+// 监听 scroll 事件
+const handleScroll = () => {
+  scrolled.value = window.scrollY > 0
+}
+
+// 在组件挂载和卸载时添加和移除事件监听
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
 </script>
 
 <template>
-  <nav class="sticky top-0 z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md">
+  <nav :class="scrolled ? 'bg-blue-400 backdrop-blur bg-opacity-90 shadow' : 'bg-transparent'"
+       class="fixed top-0 z-20 h-16 w-full text-white transition-all"
+  >
     <div class="container mx-auto flex h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
       <!-- 下拉菜单按钮 -->
       <div class="flex h-8 w-10 items-center justify-center rounded-md border-gray-600 md:hidden"

src/components/nav/NavBarEntryItem.vue

@@ -33,7 +33,9 @@ const onClick = (to: string | undefined, url: boolean) => {
   <div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full"
        @click="onClick(to, false)"
   >
-    <div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 md:w-auto md:group-hover:bg-gray-200">
+    <div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 text-gray-500
+                md:w-auto md:text-white md:group-hover:bg-gray-100 md:group-hover:bg-opacity-30"
+    >
       <font-awesome-icon :icon="icon" class="mx-2 h-5 w-5 md:h-8 md:w-8"/>
       <span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap font-bold
                    md:font-normal md:w-0 md:text-xl md:group-hover:w-full"

src/components/sponer/upyun.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+
+import {getAssetURL} from "@/utils/function.ts";
+</script>
+
+<template>
+  <a class="flex items-center justify-center" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral">
+    本网站由<img :src="getAssetURL('upyun.png')" alt="又拍云" class="h-8 w-auto">提供CDN加速/云储存服务
+  </a>
+</template>
+
+<style scoped>
+
+</style>

src/views/home/HomeView.vue

@@ -2,14 +2,13 @@
 import {computed, onMounted, ref} from "vue";
 import ArticleCard from "@/components/card/ArticleCard.vue";
 import {getBlogRecentPost} from "@/api/blog.ts";
-// import NavBar from "@/components/nav/NavBar.vue";
+// import IntroCard from "@/components/card/IntroCard.vue";
-import IntroCard from "@/components/card/IntroCard.vue";
 import CardTitle from "@/components/card/CardTitle.vue";
 import SectionCard from "@/components/card/SectionCard.vue";
 import {getActivity} from "@/api/git.ts";
 import GitCard from "@/components/card/GitCard.vue";
 import emitter from "@/utils/mitt.ts";
-// import FullScreenIntroCard from "@/components/card/FullScreenIntroCard.vue";
+import FullScreenIntroCard from "@/components/card/FullScreenIntroCard.vue";
 // import {getAssetURL} from "@/utils/function.ts";
 
 const recentPosts = ref<IPost[] | null>(null);
@@ -77,13 +76,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <!--  <nav-bar/>-->
+  <full-screen-intro-card/>
-
-  <!--  <full-screen-intro-card/>-->
 
   <div class="container mx-auto xl:max-w-screen-xl">
     <!--  个人介绍  -->
-    <intro-card/>
+    <!--    <intro-card/>-->
 
     <!-- 博客部分 -->
     <section class="w-full px-4 sm:px-0">