完善导航栏效果及首页页面

src/App.vue

@@ -13,7 +13,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative min-h-screen bg-gray-100">
+  <div class="relative min-h-screen bg-blue-50">
     <nav-bar/>
     <router-view/>
     <footer class="mt-8 flex w-full items-end py-4 min-h-48">

src/components/alert/UnderMaintenance.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="flex min-h-screen items-center justify-center bg-gray-100">
+  <div class="flex min-h-screen items-center justify-center bg-blue-50">
     <div class="w-full max-w-md rounded-lg bg-white p-6 text-center shadow-lg">
       <h1 class="mb-4 text-4xl font-bold text-gray-800">建设中 🚧</h1>
       <p class="text-lg text-gray-600">

src/components/card/FullScreenIntroCard.vue

@@ -1,34 +1,108 @@
 <script lang="ts" setup>
 // 使用 ref 跟踪鼠标的 x 和 y 坐标
-import {computed, ref} from "vue";
-import {getAssetURL} from "@/utils/function.ts";
+import {computed, reactive, ref} from "vue";
+import {debounce, getAssetURL} from "@/utils/function.ts";
+import SocialMediaWidget from "@/components/widget/SocialMediaWidget.vue";
 
 const mouseX = ref(0)
 const mouseY = ref(0)
+// const card = ref<HTMLDivElement | null>(null)
+const rotation = reactive({
+  rotateX: 0,
+  rotateY: 0,
+});
+
+const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']
+
+const littleWidget = [
+  {
+    icon: ['fab', 'qq'],
+    url: "tencent://message/?uin=1922471905&Site=&Menu=yes",
+    title: "QQ",
+  },
+  {
+    icon: ['fab', 'github-alt'],
+    url: "https://github.com/Aurora1949",
+    title: "Github",
+  },
+  {
+    icon: ['fab', 'weibo'],
+    url: "https://weibo.com/u/7923648952",
+    title: "微博"
+  },
+  {
+    icon: ['fab', 'steam-symbol'],
+    url: "https://steamcommunity.com/id/cantyonion/",
+    title: "Steam"
+  }
+]
 
 // 监听鼠标移动
 const handleMouseMove = (event: MouseEvent) => {
   // 根据窗口大小计算鼠标相对于中心位置的偏移比例
-  mouseX.value = (event.clientX / window.innerWidth - 0.5) * 10
-  mouseY.value = (event.clientY / window.innerHeight - 0.5) * 10
+  mouseX.value = (event.clientX / window.innerWidth - 0.5) * 100
+  mouseY.value = (event.clientY / window.innerHeight - 0.5) * 100
 }
 
+const debouncedMouseMove = debounce(handleMouseMove, 10)
+
 // 根据鼠标位置动态调整背景图像的位置
 const backgroundStyle = computed(() => ({
-  backgroundPosition: `${50 + mouseX.value}% ${50 + mouseY.value}%`,
+  backgroundPosition: `${mouseX.value}px ${mouseY.value}px`,
   backgroundImage: `url(${getAssetURL('bg.png')})`,
   backgroundSize: "150px",
-  transition: 'background-position 0.1s'
+  transition: 'background-position 0.1s',
+  backgroundAttachment: 'fixed'
 }))
 </script>
 
 <template>
-  <div :style="backgroundStyle" class="relative h-screen w-full bg-blue-400 flex items-center justify-center"
-       @mousemove="handleMouseMove"
+  <div :style="backgroundStyle"
+       class="relative flex h-screen w-full items-center justify-center bg-blue-400"
+       @mousemove="debouncedMouseMove"
   >
-    <div class="bg-white w-1/2 h-1/2 rounded-xl">
+    <div ref="card" :style="{transform: `rotateX(${rotation.rotateX}deg) rotateY(${rotation.rotateY}deg)`}"
+         class="mx-4 w-full rounded-xl bg-white p-8 transition-transform duration-300 min-h-96 md:mx-0 md:max-w-screen-md"
+         style="perspective: 1000px">
+      <p class="text-gray-500">你好！欢迎来到</p>
+      <div class="relative mt-4 h-72 text-5xl text-blue-400 transition-all md:text-6xl lg:text-7xl">
+        <h1 style="font-family: BaconyScript,sans-serif">CantyOn_ion's</h1>
+        <h1 class="font-bold">超级基地</h1>
+        <div class="absolute -z-10 text-blue-100 top-[3px] left-[3px]">
+          <h1 class="" style="font-family: BaconyScript,sans-serif">CantyOn_ion's</h1>
+          <h1 class="font-bold">超级基地</h1>
+        </div>
+      </div>
 
+      <!-- TypedJS -->
+      <div class="flex flex-row text-gray-500">
+        <vue-typed :auto-insert-css="true" :backSpeed="30"
+                   :loop="true"
+                   :showCursor="true"
+                   :strings="typedString"
+                   :typeSpeed="50"
+        />
+      </div>
+
+      <!-- 社交媒体组件 -->
+      <div class="flex flex-row text-gray-500">
+        <social-media-widget v-for="item in littleWidget"
+                             :key="item.url"
+                             :icon="item.icon"
+                             :title="item.title"
+                             :url="item.url"
+                             class="h-10 w-10"
+        />
+      </div>
+
+      <!-- 人物背景 -->
+      <div
+          class="invisible absolute top-0 -right-6 -bottom-6 opacity-0 transition-all sm:visible sm:opacity-100 lg:-top-28 lg:-right-28 lg:-bottom-10">
+        <img :src="getAssetURL('hoshino.png')" alt="" class="h-full" draggable="false"/>
+      </div>
     </div>
+    <!-- 下箭头 -->
+    <font-awesome-icon :icon="['fas', 'chevron-down']" beat class="absolute bottom-12 h-auto w-6 text-white"/>
   </div>
 </template>
 

src/components/nav/NavBar.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 
-import {getAssetURL} from "@/utils/function.ts";
+import {debounce, getAssetURL} from "@/utils/function.ts";
 import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
 import {computed, onMounted, onUnmounted, ref} from "vue";
+import {useRoute} from "vue-router";
 
 type Widget = {
   icon: string[]
@@ -33,6 +34,7 @@ const logoUrl = getAssetURL("logo-w.png")
 const logoType: string = "logo";
 const showLogo = computed(() => logoType === 'text')
 const isExpended = ref<boolean>(false)
+const route = useRoute()
 
 const entry = [
   {
@@ -94,19 +96,25 @@ const handleScroll = () => {
   scrolled.value = window.scrollY > 0
 }
 
+const debouncedScroll = debounce(handleScroll, 10)
+
+const alwaysBlueBackground = computed(() => route.name !== 'home')
+
 // 在组件挂载和卸载时添加和移除事件监听
 onMounted(() => {
-  window.addEventListener('scroll', handleScroll)
+  window.addEventListener('scroll', debouncedScroll)
 })
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('scroll', debouncedScroll)
 })
 </script>
 
 <template>
-  <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"
+  <nav :class="{'bg-transparent': !scrolled && !alwaysBlueBackground,
+                'bg-blue-400': scrolled || alwaysBlueBackground,
+                'shadow': scrolled}"
+       class="fixed top-0 z-20 h-16 w-full text-white transition-all duration-300"
   >
     <div class="container mx-auto flex h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
       <!-- 下拉菜单按钮 -->

src/components/widget/SocialMediaWidget.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+defineProps<{
+  icon: string[]
+  url: string
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="flex gap-4 text-xl">
+    <a :key="url" :href=url :title=title
+       class="flex items-center justify-center transition-all hover:scale-125">
+      <font-awesome-icon :icon="icon"/>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -1,7 +1,7 @@
 import {createApp} from 'vue'
 import './style.scss'
 import App from './App.vue'
-// import VueTypedJs from 'vue-typed-js'
+import VueTyped from 'vue3-typed-js'
 import router from "@/router";
 import {library} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
@@ -19,13 +19,18 @@ import {
   faPen,
   faBrush,
   faChessRook,
-  faBars
+  faBars,
+  faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
 import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
 
 library.add(
   faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
-  faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars
+  faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars, faChevronDown
 )
 
-createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
+createApp(App)
+  .use(router)
+  .use(VueTyped)
+  .component('font-awesome-icon', FontAwesomeIcon)
+  .mount('#app')

src/utils/function.ts

@@ -3,3 +3,13 @@ export const getAssetURL = (image: string) => {
   // 参数二: 当前路径的URL
   return new URL(`../assets/${image}`, import.meta.url).href
 }
+
+export const debounce = (fn: Function, delay: number) => {
+  let timeoutId: NodeJS.Timeout
+  return (...args: any[]) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}

src/views/home/HomeView.vue

@@ -78,7 +78,7 @@ onMounted(async () => {
 <template>
   <full-screen-intro-card/>
 
-  <div class="container mx-auto xl:max-w-screen-xl">
+  <div class="container mx-auto mt-8 xl:max-w-screen-xl">
     <!--  个人介绍  -->
     <!--    <intro-card/>-->