feat(ui): 更新底部版权信息布局和样式

本次提交对底部版权信息的HTML结构和样式进行了重构,旨在提升用户界面的可读性和视觉效果。主要变更包括:

- **布局调整**:
  - 将版权信息分为两行,使用Flexbox布局,使内容更加整齐。

- **样式优化**:
  - 更新了链接和图标的样式,增强了悬停效果,提升了用户交互体验。

这些更改旨在改善用户体验,使底部信息更加清晰和美观。
This commit is contained in:
snaily
2025-05-09 15:17:50 +08:00
parent a47edf1661
commit c85fe979e5
+49 -36
View File
@@ -201,43 +201,56 @@
<!-- 底部版权 --> <!-- 底部版权 -->
<div <div
class="fixed bottom-0 left-0 w-full py-3 bg-white bg-opacity-80 backdrop-blur-md text-center text-sm text-gray-800 border-t border-gray-200" class="fixed bottom-0 left-0 w-full py-3 bg-white bg-opacity-80 backdrop-blur-md text-sm text-gray-800 border-t border-gray-200 flex flex-col items-center space-y-1"
> >
© <span id="copyright-year"></span> by <!-- 第一行 -->
<a <div class="flex items-center justify-center space-x-2">
href="https://linux.do/u/snaily" <span>© <span id="copyright-year"></span> by</span>
target="_blank" <a
class="text-primary-600 hover:text-primary-800 transition duration-300" href="https://linux.do/u/snaily"
> target="_blank"
<img class="text-primary-600 hover:text-primary-800 transition duration-300 flex items-center"
src="https://linux.do/user_avatar/linux.do/snaily/288/306510_2.gif" >
alt="snaily" <img
class="inline-block w-5 h-5 rounded-full align-middle mr-1" src="https://linux.do/user_avatar/linux.do/snaily/288/306510_2.gif"
/>snaily alt="snaily"
</a> class="inline-block w-5 h-5 rounded-full align-middle mr-1"
| />snaily
<a </a>
href="https://github.com/snailyp/gemini-balance" <span class="text-gray-400">|</span>
target="_blank" <a
class="text-primary-600 hover:text-primary-800 transition duration-300" href="https://github.com/snailyp/gemini-balance"
> target="_blank"
<i class="fab fa-github"></i> GitHub class="text-primary-600 hover:text-primary-800 transition duration-300 flex items-center"
</a> >
| <i class="fab fa-github mr-1"></i> GitHub
<a </a>
href="https://afdian.com/a/snaily" </div>
target="_blank" <!-- 第二行 -->
class="text-primary-600 hover:text-primary-800 transition duration-300" <div class="flex items-center justify-center space-x-2 text-xs">
> <a
<i class="fas fa-drumstick-bite text-yellow-600"></i> 给作者加鸡腿 href="https://gb-docs.snaily.top/guide/supportme.html"
</a> target="_blank"
<span class="mx-1">|</span> class="text-primary-600 hover:text-primary-800 transition duration-300 flex items-center"
<span class="text-xs text-yellow-600 font-semibold"> >
<i class="fas fa-exclamation-triangle mr-1"></i>免费项目,谨防诈骗 <i class="fas fa-drumstick-bite text-yellow-600 mr-1"></i> 给作者加鸡腿
</span> </a>
<span id="version-info-container" class="inline-block"> <span class="text-gray-400">|</span>
<!-- Version info will be loaded here by JavaScript --> <a
</span> href="https://gb-docs.snaily.top"
target="_blank"
class="text-primary-600 hover:text-primary-800 transition duration-300 flex items-center"
>
<i class="fas fa-book mr-1"></i> 在线文档
</a>
<span class="text-gray-400">|</span>
<span class="text-yellow-600 font-semibold flex items-center">
<i class="fas fa-exclamation-triangle mr-1"></i>免费项目,谨防诈骗
</span>
<span id="version-info-container" class="inline-flex items-center">
<!-- Version info will be loaded here by JavaScript -->
</span>
</div>
</div> </div>
<!-- 通用JS --> <!-- 通用JS -->