修改样式在移动端的表现

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">
+    <div class="container mx-auto flex h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
-      <!--  Logo  -->
+      <!-- 下拉菜单按钮 -->
-      <div v-if="showLogo" class="h-full text-4xl min-w-16 logo py-3.5">
+      <div class="flex h-8 w-10 rounded-md border-gray-600 md:hidden justify-center items-center">
-        <span>CantyOni_on's Index</span>
+        <font-awesome-icon :icon="['fas', 'bars']" class="h-6"/>
       </div>
-      <div v-else class="py-2">
+      <!--  Logo  -->
-        <img :src="logoUrl" alt="" class="h-12 w-12"/>
+      <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>

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
+                opacity-0 shadow-md transition-all duration-300 min-w-32 item
-                min-w-32 item group-hover:visible group-hover:-translate-x-1/2 group-hover:opacity-100">
+                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>

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')

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">
+      <!--      <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加速/云储存服务
+      <!--        本网站由<img :src="getAssetURL('upyun.png')" alt="又拍云" class="h-8 w-auto">提供CDN加速/云储存服务-->
-      </a>
+      <!--      </a>-->
       <div class="flex justify-center gap-4">
         <a href="https://beian.miit.gov.cn/" target="_blank">
           <img alt="苏ICP备2022016243号-1"