以下是bootstrap样式的下载弹窗样式，可以用在你们的网站上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下载APP卡片示例</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 配置Tailwind自定义颜色 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5', // 定义primary颜色（此处使用靛蓝色示例）
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 min-h-screen p-6">
<!-- 页面容器 -->
<div class="max-w-md mx-auto">
<!-- 下载APP卡片 -->
<div class="bg-gradient-to-r from-primary to-indigo-600 dark:from-primary dark:to-indigo-600 rounded-xl shadow-sm p-5 text-white mb-6 fade-in">
<h3 class="text-lg font-semibold mb-2">下载移动应用</h3>
<p class="text-sm text-white/80 mb-4">随时随地获取最新资源，享受更便捷的服务</p>
<div class="flex gap-3">
<a href="#" class="flex items-center justify-center gap-2 bg-white/20 hover:bg-white/30 rounded-lg p-2 flex-1 transition-colors">
<i class="fab fa-apple text-xl"></i>
<span class="text-sm">App Store</span>
</a>
<a href="#" class="flex items-center justify-center gap-2 bg-white/20 hover:bg-white/30 rounded-lg p-2 flex-1 transition-colors">
<i class="fab fa-android text-xl"></i>
<span class="text-sm">Google Play</span>
</a>
</div>
</div>
</div>
</body>
</html>