小小修改页脚样式

KoriIku · Oct 10, 2024 · 4083f0f · 4083f0f
1 parent 9a7493d
commit 4083f0f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 11 deletions.
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -13,8 +13,8 @@
     <!-- 添加页脚 -->
     <footer>
       <p>
-        &copy; Create by <a href="https://luxirty.com/posts/luxirty-search/" target="_blank">Luxirty</a> with love |
-        <a href="https://github.com/KoriIku/luxiry-search" target="_blank">
+        &copy; Create by <a href="https://luxirty.com/posts/luxirty-search/" target="_blank">Luxirty</a> with Love |
+        Open Source on <a href="https://github.com/KoriIku/luxiry-search" target="_blank">
           GitHub
         </a>
       </p>
@@ -90,12 +90,46 @@ footer {
   color: var(--uv-styles-color-text-default); /* 使用与其他文本一致的颜色 */
 }
 
+/* 链接样式 */
 footer a {
-  text-decoration: none; /* 去掉下划线 */
-  color: var(--uv-styles-color-text-default); /* 使用与其他文本一致的颜色 */
+  color: #156bc8; /* 白天模式下的鲜明蓝色 */
+  font-weight: bold; /* 加粗字体 */
+  transition: color 0.3s ease, text-shadow 0.3s ease; /* 添加文本阴影过渡 */
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  footer {
+    background-color: #1a1a1a; /* 深色背景 */
+  }
+  
+  footer a {
+    color: #ffffff; /* 明亮的链接颜色 */
+  }
 }
 
+/* 鼠标悬停效果 */
 footer a:hover {
-  text-decoration: underline; /* 悬停时加下划线 */
+  color: #0056b3; /* 鼠标悬停时的深蓝色 */
+  text-decoration: underline; /* 添加下划线 */
+  text-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 鼠标悬停时添加阴影 */
+}
+
+/* 鼠标悬停效果 - 深色模式 */
+@media (prefers-color-scheme: dark) {
+  footer a {
+    color: #80a0c2;
+    /* 链接颜色改为浅色 */
+  }
+
+  footer a:hover {
+    color: #a0c3e0;
+    /* 悬停时的链接颜色略微加亮 */
+  }
+
+  footer img {
+    opacity: 0.9;
+    /* 提高图像的亮度，适应深色背景 */
+  }
 }
 </style>
diff --git a/src/components/Results.vue b/src/components/Results.vue
@@ -10,7 +10,7 @@
     <footer>
       <p>
         &copy; Create by <a href="https://luxirty.com/posts/luxirty-search/" target="_blank">Luxirty</a> with &hearts; |
-        <a href="https://github.com/KoriIku/luxiry-search" target="_blank">
+        Open Source on <a href="https://github.com/KoriIku/luxiry-search" target="_blank">
           GitHub
         </a>
       </p>
@@ -138,15 +138,29 @@ footer {
   margin-top: 36px;
 }
 
+/* 链接样式 */
 footer a {
-  color: #345a80;
-  text-decoration: none;
-  transition: color 0.3s ease;
+  color: #156bc8; /* 白天模式下的鲜明蓝色 */
+  font-weight: bold; /* 加粗字体 */
+  transition: color 0.3s ease, text-shadow 0.3s ease; /* 添加文本阴影过渡 */
 }
 
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  footer {
+    background-color: #1a1a1a; /* 深色背景 */
+  }
+  
+  footer a {
+    color: #ffffff; /* 明亮的链接颜色 */
+  }
+}
+
+/* 鼠标悬停效果 */
 footer a:hover {
-  color: #1c3d5a;
-  text-decoration: underline;
+  color: #0056b3; /* 鼠标悬停时的深蓝色 */
+  text-decoration: underline; /* 添加下划线 */
+  text-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 鼠标悬停时添加阴影 */
 }
 
 footer img {