|
|
@@ -53,36 +53,61 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 弹窗 -->
|
|
|
- <div v-if="showModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50" @click="closeModal">
|
|
|
+ <div v-if="showModal" class="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4" @click="closeModal">
|
|
|
<div
|
|
|
@click.stop
|
|
|
- class="bg-white rounded-3xl p-8 max-w-md mx-4 border-4 border-[#0A0910] shadow-2xl transform transition-all duration-500 relative overflow-hidden"
|
|
|
+ class="bg-white rounded-3xl p-6 md:p-12 w-full max-w-sm md:max-w-2xl mx-4 border-4 border-[#0A0910] shadow-2xl transform transition-all duration-500 relative overflow-hidden"
|
|
|
:class="showModal ? 'scale-100 opacity-100' : 'scale-95 opacity-0'"
|
|
|
>
|
|
|
<!-- 背景装饰 -->
|
|
|
- <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-orange-400 via-red-400 to-pink-500"></div>
|
|
|
+ <div class="absolute top-0 left-0 w-full h-3 md:h-4 bg-gradient-to-r from-orange-400 via-red-400 to-pink-500"></div>
|
|
|
|
|
|
- <div class="text-center relative">
|
|
|
+ <div class="text-center relative md:flex md:items-center md:gap-12 md:text-left">
|
|
|
<!-- 标题区域 -->
|
|
|
- <div class="mb-6">
|
|
|
- <div class="text-5xl mb-3 animate-bounce">☕</div>
|
|
|
- <h3 class="text-2xl font-bold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent mb-2">支持开发者</h3>
|
|
|
- <p class="text-gray-600 text-sm leading-relaxed">
|
|
|
+ <div class="mb-6 md:mb-0 md:flex-1">
|
|
|
+ <div class="text-5xl md:text-7xl mb-3 md:mb-6 animate-bounce">☕</div>
|
|
|
+ <h3 class="text-2xl md:text-4xl font-bold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent mb-2 md:mb-4">支持开发者</h3>
|
|
|
+ <p class="text-gray-600 text-sm md:text-lg leading-relaxed md:max-w-md">
|
|
|
🤖 AI需要成本，您的每一份支持<br />
|
|
|
都让项目走得更远 ❤️
|
|
|
</p>
|
|
|
+ <div class="hidden md:block mt-6 space-y-3 text-sm text-gray-500">
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <span class="w-2 h-2 bg-orange-400 rounded-full"></span>
|
|
|
+ <span>维护服务器运行成本</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <span class="w-2 h-2 bg-red-400 rounded-full"></span>
|
|
|
+ <span>支持AI模型调用费用</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <span class="w-2 h-2 bg-pink-400 rounded-full"></span>
|
|
|
+ <span>激励持续功能开发</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 二维码区域 -->
|
|
|
- <div class="bg-gradient-to-br from-orange-50 to-red-50 border-3 border-orange-200 rounded-2xl p-6 mb-6 relative">
|
|
|
- <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-xs px-3 py-1 rounded-full">微信支付</div>
|
|
|
- <img src="/wx.jpg" alt="微信收款码" class="w-48 h-48 mx-auto border-4 border-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300" />
|
|
|
- <p class="text-xs text-gray-500 mt-3 flex items-center justify-center gap-1">
|
|
|
+ <div class="bg-gradient-to-br from-orange-50 to-red-50 border-3 border-orange-200 rounded-2xl p-6 md:p-8 mb-6 md:mb-0 relative md:flex-shrink-0">
|
|
|
+ <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-xs md:text-sm px-3 py-1 rounded-full font-medium">
|
|
|
+ 微信支付
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ src="/wx.jpg"
|
|
|
+ alt="微信收款码"
|
|
|
+ class="w-48 h-48 md:w-64 md:h-64 mx-auto border-4 border-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300"
|
|
|
+ />
|
|
|
+ <p class="text-xs md:text-sm text-gray-500 mt-3 md:mt-4 flex items-center justify-center gap-1">
|
|
|
<span>扫码支持开发者</span>
|
|
|
<span class="animate-pulse">✨</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 底部感谢文字 -->
|
|
|
+ <div class="mt-6 md:mt-8 text-center">
|
|
|
+ <p class="text-xs md:text-sm text-gray-400 italic">"每一杯咖啡都是对开源精神的支持 🙏"</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
liuziting