From ec19a3dde65b7b976634c3e259fd940856be95cb Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Tue, 5 Nov 2024 08:37:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E5=9C=A8?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=9A=84=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/nav/NavBar.vue          | 26 ++++++++++++++++++--------
 src/components/nav/NavBarEntryItem.vue |  4 ++--
 src/main.ts                            |  5 +++--
 src/views/home/HomeView.vue            |  8 ++++----
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 4c70637..d401849 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -81,24 +81,30 @@ const entry = [
   <nav
       class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md"
   >
-    <div class="container mx-auto flex w-full max-w-screen-xl items-center justify-center sm:justify-between">
-      <!--  Logo  -->
-      <div v-if="showLogo" class="h-full text-4xl min-w-16 logo py-3.5">
-        <span>CantyOni_on's Index</span>
+    <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 rounded-md border-gray-600 md:hidden justify-center items-center">
+        <font-awesome-icon :icon="['fas', 'bars']" class="h-6"/>
       </div>
-      <div v-else class="py-2">
-        <img :src="logoUrl" alt="" class="h-12 w-12"/>
+      <!--  Logo  -->
+      <div class="absolute left-1/2 -translate-x-1/2 md:relative md:translate-x-0 md:left-0">
+        <div v-if="showLogo" class="h-full text-4xl min-w-16 logo py-3.5">
+          <span>CantyOni_on's Index</span>
+        </div>
+        <div v-else class="py-2">
+          <img :src="logoUrl" alt="" class="h-12 w-12"/>
+        </div>
       </div>
 
       <!--  Entry  -->
-      <div class="flex">
+      <div class="hidden md:flex">
         <nav-bar-entry-item v-for="item in entry" :key="item.title"
                             :entry="item.entry" :icon="item.icon"
                             :title="item.title"/>
       </div>
 
       <!--  快速跳转小组件  -->
-      <div class="hidden items-center justify-between gap-4 text-xl sm:flex">
+      <div class="flex items-center justify-between gap-4 text-xl">
         <a v-for="item in littleWidget"
            :key="item.url" :href=item.url :title=item.title
            class="transition-all hover:scale-125">
@@ -115,4 +121,8 @@ const entry = [
 .logo {
   font-family: BaconyScript, serif;
 }
+
+.active {
+  
+}
 </style>
\ No newline at end of file
diff --git a/src/components/nav/NavBarEntryItem.vue b/src/components/nav/NavBarEntryItem.vue
index e73dfbc..3c5d1f5 100644
--- a/src/components/nav/NavBarEntryItem.vue
+++ b/src/components/nav/NavBarEntryItem.vue
@@ -25,8 +25,8 @@ defineProps<{
     <!-- 下拉菜单 -->
     <div v-if="entry"
          class="invisible absolute top-full left-1/2 overflow-hidden rounded-xl bg-white
-                bg-opacity-70 opacity-0 shadow-md backdrop-blur-md transition-all duration-300
-                min-w-32 item group-hover:visible group-hover:-translate-x-1/2 group-hover:opacity-100">
+                opacity-0 shadow-md transition-all duration-300 min-w-32 item
+                group-hover:visible group-hover:-translate-x-1/2 group-hover:opacity-100">
       <div v-for="item in entry" :key="item.title" class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">
         {{ item.title }}
       </div>
diff --git a/src/main.ts b/src/main.ts
index 69f6f20..6b1d458 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,13 +18,14 @@ import {
   faHouse,
   faPen,
   faBrush,
-  faChessRook
+  faChessRook,
+  faBars
 } 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
+  faCodeCommit, faCode, faHouse, faPen, faBrush, faChessRook, faBars
 )
 
 createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index d8dc683..2664d7e 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -79,7 +79,7 @@ onMounted(async () => {
 <template>
   <nav-bar/>
 
-  <div class="container mx-auto">
+  <div class="container mx-auto xl:max-w-screen-xl">
     <!--  个人介绍  -->
     <intro-card/>
 
@@ -117,9 +117,9 @@ onMounted(async () => {
   <footer class="mt-8 flex w-full items-end bg-gradient-to-t from-white 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>
+      <!--      <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"