shen/perler-beads
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化打赏弹窗设计，调整样式和文本内容，提升用户体验和可读性，同时改善二维码展示效果。

Browse Source
This commit is contained in:
Zylan
2025-04-26 13:32:48 +08:00
parent 23f4e86aa3
commit c518c635d8
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/page.tsx
View File

@@ -1472,41 +1472,41 @@ export default function Home() {
{/* 打赏弹窗 - 优化设计 */}
{isDonationModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center p-4 z-50 transition-all duration-300">
<div className="bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto transform transition-all">
<div className="p-6">
<div className="flex justify-between items-center mb-5">
<h3 className="text-xl font-bold text-gray-800 bg-gradient-to-r from-pink-500 to-rose-500 bg-clip-text text-transparent">给我点杯奶茶</h3>
<div className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300">
<div className="bg-white rounded-2xl shadow-2xl w-[calc(100vw-2rem)] sm:w-full sm:max-w-md max-h-[90vh] overflow-y-auto transform transition-all">
<div className="p-3 sm:p-6">
<div className="flex justify-between items-center mb-3 sm:mb-5">
<h3 className="text-lg sm:text-xl font-bold text-gray-800 bg-gradient-to-r from-pink-500 to-rose-500 bg-clip-text text-transparent">给我点杯奶茶</h3>
<button
onClick={() => setIsDonationModalOpen(false)}
className="text-gray-500 hover:text-gray-700 transition-colors duration-200"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="text-center">
<p className="mb-4 text-gray-600">
<p className="mb-3 text-sm sm:text-base text-gray-600 break-words">
开源项目就是纯粹的为爱发电项目，作者会在工作之余尽力维护，如果您希望这个项目更好，可以给我点杯奶茶。
</p>
<p className="mb-6 text-gray-600">
<p className="mb-4 sm:mb-6 text-sm sm:text-base text-gray-600 break-words">
你的支持是这个项目继续维护的动力。
</p>
<div className="flex justify-center mb-5">
<div className="relative w-56 h-56 p-2 bg-gradient-to-r from-pink-100 to-rose-100 rounded-lg shadow-md">
<div className="flex justify-center mb-4 sm:mb-5">
<div className="relative w-40 h-40 sm:w-48 sm:h-48 md:w-56 md:h-56 p-1 sm:p-2 bg-gradient-to-r from-pink-100 to-rose-100 rounded-lg shadow-md">
<Image
src="/donation-qr.jpg"
alt="打赏二维码"
fill
className="object-contain p-2"
className="object-contain p-1 sm:p-2"
/>
</div>
</div>
<p className="text-sm text-gray-500 bg-gray-50 py-2 px-4 rounded-full inline-block shadow-sm">
<p className="text-xs sm:text-sm text-gray-500 bg-gray-50 py-1.5 px-3 sm:py-2 sm:px-4 rounded-full inline-block shadow-sm">
扫描上方二维码，给我点杯奶茶。
</p>
</div>