🐞 fix: author和percentage的修正和部分优化

1. 添加链接悬停效果
2. Copyright 如果 左界>=右界 则只显示右界
3. 修正anthor->author
4. 修正TimeCapsule中el-progress的:percentage值的类型错误

.env.example

@@ -1,6 +1,6 @@
 # 站点信息
 VITE_SITE_NAME = "無名の主页" # 名称
-VITE_SITE_ANTHOR = "無名" # 作者
+VITE_SITE_AUTHOR = "無名" # 作者
 VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
 VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
 VITE_SITE_URL = "imsyy.top" # 站点地址

index.html

@@ -11,7 +11,7 @@
     <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
     <meta name="description" content="%VITE_SITE_DES%" />
     <meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
-    <meta name="author" content="%VITE_SITE_ANTHOR%" />
+    <meta name="author" content="%VITE_SITE_AUTHOR%" />
     <meta name="theme-color" content="#424242" />
     <title>%VITE_SITE_NAME%</title>
     <!-- HarmonyOS Sans -->

src/App.vue

@@ -32,6 +32,7 @@
     </main>
   </Transition>
 </template>
+
 <script setup>
 import { helloInit, checkDays } from "@/utils/getTime.js";
 import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
@@ -164,7 +165,7 @@ onBeforeUnmount(() => {
     }
   }
   .menu {
-    position: fixed;
+    position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;

src/components/Footer.vue

@@ -3,13 +3,15 @@
     <Transition name="fade" mode="out-in">
       <div v-if="!store.playerState || !store.playerLrcShow" class="power">
         <span>
-          Copyright&nbsp;&copy;
+          <span :class="startYear < fullYear ? 'c-hidden' : 'hidden'">Copyright&nbsp;</span>
-          <span v-if="siteStartDate?.length >= 4" class="site-start">
+          &copy;
-            {{ siteStartDate.substring(0, 4) }}
+          <span v-if="startYear < fullYear"
+            class="site-start">
+            {{ startYear }}
             -
           </span>
           {{ fullYear }}
-          <a :href="siteUrl">{{ siteAnthor }}</a>
+          <a :href="siteUrl">{{ siteAuthor }}</a>
         </span>
         <!-- 以下信息请不要修改哦 -->
         <span class="hidden">
@@ -19,10 +21,12 @@
           </a>
         </span>
         <!-- 站点备案 -->
-        <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
+        <span>
           &amp;
-          {{ siteIcp }}
+          <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
-        </a>
+            {{ siteIcp }}
+          </a>
+        </span>
       </div>
       <div v-else class="lrc">
         <Transition name="fade" mode="out-in">
@@ -46,9 +50,13 @@ const store = mainStore();
 const fullYear = new Date().getFullYear();
 
 // 加载配置数据
-const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+// const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+const startYear = ref(
+  import.meta.env.VITE_SITE_START?.length >= 4 ? 
+  import.meta.env.VITE_SITE_START.substring(0, 4) : null
+);
 const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
-const siteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR);
+const siteAuthor = ref(import.meta.env.VITE_SITE_AUTHOR);
 const siteUrl = computed(() => {
   const url = import.meta.env.VITE_SITE_URL;
   if (!url) return "https://www.imsyy.top";
@@ -71,6 +79,9 @@ const siteUrl = computed(() => {
   text-align: center;
   z-index: 0;
   font-size: 14px;
+  // 文字不换行
+  word-break: keep-all;
+  white-space: nowrap;
   .power {
     animation: fade 0.3s;
   }
@@ -106,9 +117,14 @@ const siteUrl = computed(() => {
     transition: opacity 0.15s ease-in-out;
   }
   @media (max-width: 720px) {
-    font-size: 0.85rem;
+    font-size: 0.9rem;
     &.blur {
-      font-size: 0.85rem;
+      font-size: 0.9rem;
+    }
+  }
+  @media (max-width: 560px) {
+    .c-hidden {
+      display: none;
     }
   }
   @media (max-width: 480px) {

src/components/TimeCapsule.vue

@@ -16,7 +16,7 @@
             剩余 {{ item.remaining }} {{ tag === "day" ? "小时" : "天" }}
           </span>
         </div>
-        <el-progress :text-inside="true" :stroke-width="20" :percentage="item.percentage" />
+        <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat(item.percentage)" />
       </div>
       <!-- 建站日期 -->
       <div v-if="store.siteStartShow" class="capsule-item start">

src/style/style.scss

@@ -37,6 +37,12 @@ p {
   }
 }
 
+// 链接悬停效果
+a:hover {
+  color: rgb(57, 159, 255);
+  text-decoration: underline;
+}
+
 // 字体文件
 @font-face {
   font-family: "Pacifico-Regular";