|
|
@@ -3,603 +3,307 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>MHD皮肤商城 - 炫酷皮肤展示平台</title>
|
|
|
- <!-- 引入外部资源 -->
|
|
|
+ <title>MHD抽奖 - 福利多多</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
-
|
|
|
- <!-- Tailwind 配置 -->
|
|
|
<script>
|
|
|
tailwind.config = {
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
- primary: '#6C5CE7',
|
|
|
- secondary: '#00D2D3',
|
|
|
- dark: '#1A1A2E',
|
|
|
- darker: '#121224',
|
|
|
- light: '#E2E8F0',
|
|
|
- accent: '#FF3E77'
|
|
|
+ primary: '#FF9F1C', // 主色调：明亮橙色
|
|
|
+ secondary: '#FFBF69', // 辅助色：浅橙色
|
|
|
+ accent: '#FF7E00', // 强调色：深橙色
|
|
|
+ light: '#FFF9F0', // 浅色背景：暖白色
|
|
|
},
|
|
|
fontFamily: {
|
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
|
},
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
- <!-- 自定义样式 -->
|
|
|
<style type="text/tailwindcss">
|
|
|
@layer utilities {
|
|
|
.content-auto {
|
|
|
content-visibility: auto;
|
|
|
}
|
|
|
- .text-shadow {
|
|
|
- text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
- .card-glow {
|
|
|
- box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
|
|
|
+ .card-shadow {
|
|
|
+ box-shadow: 0 8px 24px rgba(255, 159, 28, 0.15);
|
|
|
}
|
|
|
- .card-glow-hover {
|
|
|
- transition: all 0.3s ease;
|
|
|
+ .card-hover {
|
|
|
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
}
|
|
|
- .card-glow-hover:hover {
|
|
|
- box-shadow: 0 0 25px rgba(108, 92, 231, 0.5);
|
|
|
+ .card-hover:hover {
|
|
|
transform: translateY(-5px);
|
|
|
+ box-shadow: 0 12px 28px rgba(255, 159, 28, 0.25);
|
|
|
+ }
|
|
|
+ .prize-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
|
+ gap: 1.5rem;
|
|
|
}
|
|
|
.gradient-bg {
|
|
|
- background: linear-gradient(135deg, #121224 0%, #1A1A2E 100%);
|
|
|
+ background: linear-gradient(135deg, #FF9F1C 0%, #FFBF69 100%);
|
|
|
+ }
|
|
|
+ .text-shadow {
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
- .category-active {
|
|
|
- background: rgba(108, 92, 231, 0.2);
|
|
|
- border-color: #6C5CE7;
|
|
|
- color: #6C5CE7;
|
|
|
+ .animate-float {
|
|
|
+ animation: float 3s ease-in-out infinite;
|
|
|
+ }
|
|
|
+ @keyframes float {
|
|
|
+ 0% { transform: translateY(0px); }
|
|
|
+ 50% { transform: translateY(-10px); }
|
|
|
+ 100% { transform: translateY(0px); }
|
|
|
+ }
|
|
|
+ .banner-pattern {
|
|
|
+ background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
|
|
|
+ background-size: 30px 30px;
|
|
|
+ }
|
|
|
+ .bg-banner {
|
|
|
+ background-image: url('https://picsum.photos/id/1048/1920/500');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
-
|
|
|
-<body class="gradient-bg text-light min-h-screen">
|
|
|
-<!-- 顶部导航 -->
|
|
|
-<header class="sticky top-0 z-50 backdrop-blur-md bg-darker/80 border-b border-primary/20">
|
|
|
+<body class="bg-gradient-to-br from-light to-orange-50 min-h-screen font-sans text-gray-800">
|
|
|
+<!-- 导航栏 -->
|
|
|
+<nav class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
|
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
- <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
|
|
|
- <i class="fa fa-paint-brush text-xl"></i>
|
|
|
- </div>
|
|
|
- <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">MHD皮肤商城</h1>
|
|
|
+ <i class="fa fa-gift text-primary text-2xl"></i>
|
|
|
+ <h1 class="text-xl md:text-2xl font-bold text-primary">MHD抽奖</h1>
|
|
|
</div>
|
|
|
-
|
|
|
<div class="hidden md:flex items-center space-x-6">
|
|
|
- <a href="#" class="hover:text-primary transition-colors">首页</a>
|
|
|
- <a href="#" class="hover:text-primary transition-colors">皮肤库</a>
|
|
|
- <a href="#" class="hover:text-primary transition-colors">排行榜</a>
|
|
|
- <a href="#" class="hover:text-primary transition-colors">关于</a>
|
|
|
+ <a href="#" class="font-medium hover:text-primary transition-colors">首页</a>
|
|
|
+ <a href="#" class="font-medium hover:text-primary transition-colors">卡池列表</a>
|
|
|
+ <a href="#" class="font-medium hover:text-primary transition-colors">中奖记录</a>
|
|
|
+ <a href="#" class="font-medium hover:text-primary transition-colors">帮助中心</a>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="flex items-center space-x-4">
|
|
|
- <button class="hidden md:block px-4 py-2 rounded-full border border-primary/50 hover:bg-primary/10 transition-colors">
|
|
|
- <i class="fa fa-search mr-2"></i>搜索皮肤
|
|
|
- </button>
|
|
|
- <button class="md:hidden text-xl">
|
|
|
- <i class="fa fa-bars"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</header>
|
|
|
-
|
|
|
-<!-- 英雄区域 -->
|
|
|
-<section class="relative overflow-hidden py-16 md:py-24">
|
|
|
- <div class="absolute inset-0 opacity-10">
|
|
|
- <div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_20%,rgba(108,92,231,0.5)_0%,transparent_40%)]"></div>
|
|
|
- <div class="absolute bottom-0 right-0 w-full h-full bg-[radial-gradient(circle_at_70%_80%,rgba(0,210,211,0.5)_0%,transparent_40%)]"></div>
|
|
|
+ <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full transition-all shadow-md hover:shadow-lg">
|
|
|
+ <i class="fa fa-user-plus mr-2"></i>立即注册
|
|
|
+ </button>
|
|
|
+ <button class="md:hidden text-primary text-xl">
|
|
|
+ <i class="fa fa-bars"></i>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="container mx-auto px-4 relative z-10">
|
|
|
- <div class="max-w-3xl mx-auto text-center">
|
|
|
- <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-6">
|
|
|
- 探索<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">高品质</span>皮肤资源
|
|
|
- </h2>
|
|
|
- <p class="text-lg md:text-xl text-light/70 mb-8">
|
|
|
- 超过100+精选皮肤，满足你的创作需求，从琉璃质感到底纹设计，应有尽有
|
|
|
- </p>
|
|
|
- <div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
|
- <button class="px-6 py-3 rounded-full bg-primary hover:bg-primary/90 transition-all font-medium flex items-center justify-center">
|
|
|
- <i class="fa fa-download mr-2"></i>浏览全部
|
|
|
- </button>
|
|
|
- <button class="px-6 py-3 rounded-full border border-primary/50 hover:bg-primary/10 transition-all font-medium flex items-center justify-center">
|
|
|
- <i class="fa fa-trophy mr-2"></i>查看热门
|
|
|
- </button>
|
|
|
+</nav>
|
|
|
+
|
|
|
+<!-- 首充福利横幅 -->
|
|
|
+<div class="relative overflow-hidden bg-banner banner-pattern text-white py-6 md:py-10">
|
|
|
+ <div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-accent/80"></div>
|
|
|
+ <div class="container mx-auto px-4 relative z-10 flex flex-col md:flex-row items-center justify-between">
|
|
|
+ <div class="text-center md:text-left mb-4 md:mb-0 max-w-md">
|
|
|
+ <div class="flex flex-col sm:flex-row sm:items-end gap-2 mb-2">
|
|
|
+ <h2 class="text-2xl md:text-3xl font-bold text-shadow">MHD抽奖</h2>
|
|
|
+ <h3 class="text-lg md:text-xl font-bold text-shadow">福利多多</h3>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</section>
|
|
|
-
|
|
|
-<!-- 分类筛选 -->
|
|
|
-<section class="py-8 border-y border-primary/10">
|
|
|
- <div class="container mx-auto px-4">
|
|
|
- <div class="flex items-center justify-between mb-6">
|
|
|
- <h3 class="text-xl font-semibold">皮肤分类</h3>
|
|
|
- <button class="text-primary text-sm flex items-center">
|
|
|
- 查看全部 <i class="fa fa-chevron-right ml-1 text-xs"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex overflow-x-auto pb-4 gap-3 scrollbar-hide">
|
|
|
- <button class="category-active whitespace-nowrap px-4 py-2 rounded-full border transition-all">
|
|
|
- 全部皮肤
|
|
|
- </button>
|
|
|
- <button class="whitespace-nowrap px-4 py-2 rounded-full border border-light/10 hover:border-primary/50 transition-all">
|
|
|
- 琉璃
|
|
|
- </button>
|
|
|
- <button class="whitespace-nowrap px-4 py-2 rounded-full border border-light/10 hover:border-primary/50 transition-all">
|
|
|
- 草皮
|
|
|
- </button>
|
|
|
- <button class="whitespace-nowrap px-4 py-2 rounded-full border border-light/10 hover:border-primary/50 transition-all">
|
|
|
- 岩石
|
|
|
- </button>
|
|
|
- <button class="whitespace-nowrap px-4 py-2 rounded-full border border-light/10 hover:border-primary/50 transition-all">
|
|
|
- 半透
|
|
|
- </button>
|
|
|
- <button class="whitespace-nowrap px-4 py-2 rounded-full border border-light/10 hover:border-primary/50 transition-all">
|
|
|
- 全黑
|
|
|
- </button>
|
|
|
- <button class="whitespace-nowrap px-4 py-2 rounded-full border border-light/10 hover:border-primary/50 transition-all">
|
|
|
- 镂空
|
|
|
- </button>
|
|
|
- <button class="whitespace-nowrap px-4 py-2 rounded-full border border-light/10 hover:border-primary/50 transition-all">
|
|
|
- 普通
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</section>
|
|
|
-
|
|
|
-<!-- 热门皮肤 -->
|
|
|
-<section class="py-16">
|
|
|
- <div class="container mx-auto px-4">
|
|
|
- <div class="flex justify-between items-center mb-10">
|
|
|
- <h2 class="text-2xl md:text-3xl font-bold">
|
|
|
- <i class="fa fa-fire text-accent mr-2"></i>热门推荐
|
|
|
- </h2>
|
|
|
- <div class="flex space-x-2">
|
|
|
- <button class="w-10 h-10 rounded-full border border-light/10 flex items-center justify-center hover:border-primary transition-colors">
|
|
|
- <i class="fa fa-chevron-left"></i>
|
|
|
- </button>
|
|
|
- <button class="w-10 h-10 rounded-full border border-light/10 flex items-center justify-center hover:border-primary transition-colors">
|
|
|
- <i class="fa fa-chevron-right"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
|
- <!-- 热门皮肤1 - 榜前三 -->
|
|
|
- <div class="bg-darker rounded-xl overflow-hidden border border-light/10 card-glow card-glow-hover">
|
|
|
- <div class="relative">
|
|
|
- <div class="aspect-[4/3] bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/skin1/400/300" alt="PF M_Eye_Occlusion_Inst" class="w-full h-full object-cover mix-blend-lighten">
|
|
|
- </div>
|
|
|
- <div class="absolute top-3 left-3 bg-accent text-white text-xs font-bold px-2 py-1 rounded-full flex items-center">
|
|
|
- <i class="fa fa-trophy mr-1"></i> 榜前三
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="p-5">
|
|
|
- <div class="flex justify-between items-start mb-3">
|
|
|
- <h3 class="font-semibold text-lg truncate">PF M_Eye_Occlusion_Inst</h3>
|
|
|
- <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">特殊</span>
|
|
|
- </div>
|
|
|
- <p class="text-light/60 text-sm mb-4">高品质眼部遮挡皮肤，适合各类角色建模</p>
|
|
|
- <div class="flex justify-between items-center">
|
|
|
- <span class="text-xs text-light/50">代码: /PF M_Eye_Occlusion_Inst</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-sm transition-colors">
|
|
|
- <i class="fa fa-download mr-1"></i>获取
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 热门皮肤2 - 榜前九 -->
|
|
|
- <div class="bg-darker rounded-xl overflow-hidden border border-light/10 card-glow card-glow-hover">
|
|
|
- <div class="relative">
|
|
|
- <div class="aspect-[4/3] bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/skin2/400/300" alt="pf M_Sparrow_Zechin_EyelashMaster" class="w-full h-full object-cover mix-blend-lighten">
|
|
|
- </div>
|
|
|
- <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full flex items-center">
|
|
|
- <i class="fa fa-star mr-1"></i> 榜前九
|
|
|
- </div>
|
|
|
+ <p class="text-sm md:text-base opacity-90 mb-3">首次充值额外赠送 <span class="bg-white/20 px-1.5 py-0.5 rounded text-sm font-bold">50%</span> 抽奖机会</p>
|
|
|
+ <div class="flex items-center justify-center md:justify-start gap-3">
|
|
|
+ <div class="text-center">
|
|
|
+ <p class="text-xs">微信</p>
|
|
|
+ <img src="https://picsum.photos/60/60" alt="微信二维码" class="w-12 h-12 object-cover rounded mx-auto">
|
|
|
</div>
|
|
|
- <div class="p-5">
|
|
|
- <div class="flex justify-between items-start mb-3">
|
|
|
- <h3 class="font-semibold text-lg truncate">M_Sparrow_Zechin_EyelashMaster</h3>
|
|
|
- <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">睫毛</span>
|
|
|
- </div>
|
|
|
- <p class="text-light/60 text-sm mb-4">精致睫毛大师级皮肤，细节丰富</p>
|
|
|
- <div class="flex justify-between items-center">
|
|
|
- <span class="text-xs text-light/50">代码: /pf M_Sparrow_Zechin_EyelashMaster</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-sm transition-colors">
|
|
|
- <i class="fa fa-download mr-1"></i>获取
|
|
|
- </button>
|
|
|
+ <div class="text-center">
|
|
|
+ <p class="text-xs">YY</p>
|
|
|
+ <div class="bg-white/20 p-2 rounded-lg inline-flex items-center justify-center w-12 h-12">
|
|
|
+ <span class="text-xs">13245454</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 热门皮肤3 - 琉璃质感 -->
|
|
|
- <div class="bg-darker rounded-xl overflow-hidden border border-light/10 card-glow card-glow-hover">
|
|
|
- <div class="relative">
|
|
|
- <div class="aspect-[4/3] bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/skin3/400/300" alt="MI_Acro_Eye_Default" class="w-full h-full object-cover mix-blend-lighten">
|
|
|
- </div>
|
|
|
- <div class="absolute top-3 left-3 bg-secondary text-darker text-xs font-bold px-2 py-1 rounded-full flex items-center">
|
|
|
- <i class="fa fa-diamond mr-1"></i> 琉璃
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="p-5">
|
|
|
- <div class="flex justify-between items-start mb-3">
|
|
|
- <h3 class="font-semibold text-lg truncate">MI_Acro_Eye_Default</h3>
|
|
|
- <span class="px-2 py-1 bg-secondary/10 text-secondary text-xs rounded">眼部</span>
|
|
|
- </div>
|
|
|
- <p class="text-light/60 text-sm mb-4">琉璃质感眼部皮肤，通透感极佳</p>
|
|
|
- <div class="flex justify-between items-center">
|
|
|
- <span class="text-xs text-light/50">代码: /pf MI_Acro_Eye_Default</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-sm transition-colors">
|
|
|
- <i class="fa fa-download mr-1"></i>获取
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 热门皮肤4 - 半透 -->
|
|
|
- <div class="bg-darker rounded-xl overflow-hidden border border-light/10 card-glow card-glow-hover">
|
|
|
- <div class="relative">
|
|
|
- <div class="aspect-[4/3] bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/skin4/400/300" alt="pf M_SparrowHair_Zechin" class="w-full h-full object-cover mix-blend-lighten">
|
|
|
- </div>
|
|
|
- <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full flex items-center">
|
|
|
- <i class="fa fa-feather mr-1"></i> 半透
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="p-5">
|
|
|
- <div class="flex justify-between items-start mb-3">
|
|
|
- <h3 class="font-semibold text-lg truncate">M_SparrowHair_Zechin</h3>
|
|
|
- <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded">毛发</span>
|
|
|
- </div>
|
|
|
- <p class="text-light/60 text-sm mb-4">半透明毛发皮肤，适合鸟类角色</p>
|
|
|
- <div class="flex justify-between items-center">
|
|
|
- <span class="text-xs text-light/50">代码: /pf M_SparrowHair_Zechin</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-sm transition-colors">
|
|
|
- <i class="fa fa-download mr-1"></i>获取
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="hidden md:flex items-center justify-center w-24 h-24">
|
|
|
+ <div class="relative w-20 h-20">
|
|
|
+ <div class="absolute inset-0 bg-white/20 rounded-full animate-ping"></div>
|
|
|
+ <div class="absolute inset-2 bg-white/30 rounded-full animate-pulse"></div>
|
|
|
+ <div class="absolute inset-4 bg-white/40 rounded-full flex items-center justify-center">
|
|
|
+ <i class="fa fa-star text-xl animate-float"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-</section>
|
|
|
-
|
|
|
-<!-- 分类皮肤展示 -->
|
|
|
-<section class="py-16 bg-darker/50">
|
|
|
- <div class="container mx-auto px-4">
|
|
|
- <h2 class="text-2xl md:text-3xl font-bold mb-10">
|
|
|
- <i class="fa fa-th-large text-primary mr-2"></i>分类浏览
|
|
|
- </h2>
|
|
|
-
|
|
|
- <!-- 琉璃分类 -->
|
|
|
- <div class="mb-16">
|
|
|
- <div class="flex items-center mb-6">
|
|
|
- <div class="w-1 h-6 bg-secondary rounded-full mr-3"></div>
|
|
|
- <h3 class="text-xl font-semibold flex items-center">
|
|
|
- <span class="w-3 h-3 rounded-full bg-secondary mr-2"></span>琉璃质感皮肤
|
|
|
- </h3>
|
|
|
- <span class="ml-3 text-sm text-light/50">(28款)</span>
|
|
|
- </div>
|
|
|
+ <div class="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-light to-transparent"></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 主内容区 -->
|
|
|
+<main class="container mx-auto px-4 py-6">
|
|
|
+ <div class="mb-6 text-center">
|
|
|
+ <h2 class="text-2xl md:text-3xl font-bold mb-2">卡池列表</h2>
|
|
|
+ <p class="text-gray-600 max-w-2xl mx-auto">选择您感兴趣的卡池，查看丰富奖品</p>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
|
|
- <!-- 琉璃皮肤1 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-secondary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-secondary/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/glass1/300/300" alt="MI_Acro_Eye_Default" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_Acro_Eye_Default</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">眼部 | 琉璃</p>
|
|
|
- </div>
|
|
|
+ <div class="flex flex-col lg:flex-row gap-6">
|
|
|
+ <!-- 左侧卡池列表 -->
|
|
|
+ <div class="lg:w-1/3">
|
|
|
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden sticky top-24">
|
|
|
+ <div class="gradient-bg text-white p-3">
|
|
|
+ <h3 class="text-lg font-bold flex items-center">
|
|
|
+ <i class="fa fa-th-list mr-2"></i>卡池列表
|
|
|
+ </h3>
|
|
|
</div>
|
|
|
+ <div class="p-3">
|
|
|
+ <div class="space-y-2">
|
|
|
+ <!-- 卡池项 -->
|
|
|
+ <div class="card-shadow card-hover bg-white rounded-lg p-3 border-l-4 border-primary cursor-pointer" onclick="showPoolDetails(1)">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h4 class="font-bold">钻石卡池</h4>
|
|
|
+ <span class="bg-primary/10 text-primary px-2 py-0.5 rounded-full text-xs font-medium">¥198</span>
|
|
|
+ </div>
|
|
|
+ <p class="text-gray-600 mt-1 text-xs">高品质奖品，稀有道具概率提升</p>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 琉璃皮肤2 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-secondary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-secondary/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/glass2/300/300" alt="MI_Camara_Base_Eye" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_Camara_Base_Eye</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">眼部 | 琉璃</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="card-shadow card-hover bg-white rounded-lg p-3 border-l-4 border-secondary cursor-pointer" onclick="showPoolDetails(2)">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h4 class="font-bold">黄金卡池</h4>
|
|
|
+ <span class="bg-secondary/10 text-secondary px-2 py-0.5 rounded-full text-xs font-medium">¥98</span>
|
|
|
+ </div>
|
|
|
+ <p class="text-gray-600 mt-1 text-xs">丰富奖励，实用道具应有尽有</p>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 琉璃皮肤3 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-secondary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-secondary/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/glass3/300/300" alt="MI_Sucho_Eye_New" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_Sucho_Eye_New</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">眼部 | 琉璃</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="card-shadow card-hover bg-white rounded-lg p-3 border-l-4 border-blue-500 cursor-pointer" onclick="showPoolDetails(3)">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h4 class="font-bold">白银卡池</h4>
|
|
|
+ <span class="bg-blue-500/10 text-blue-500 px-2 py-0.5 rounded-full text-xs font-medium">¥48</span>
|
|
|
+ </div>
|
|
|
+ <p class="text-gray-600 mt-1 text-xs">入门首选，基础道具与资源</p>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 琉璃皮肤4 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-secondary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-secondary/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/glass4/300/300" alt="MI_Pachy_Eye_Base" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_Pachy_Eye_Base</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">眼部 | 琉璃</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="card-shadow card-hover bg-white rounded-lg p-3 border-l-4 border-gray-500 cursor-pointer" onclick="showPoolDetails(4)">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h4 class="font-bold">青铜卡池</h4>
|
|
|
+ <span class="bg-gray-500/10 text-gray-500 px-2 py-0.5 rounded-full text-xs font-medium">¥18</span>
|
|
|
+ </div>
|
|
|
+ <p class="text-gray-600 mt-1 text-xs">经济实惠，适合新手尝试</p>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 更多按钮 -->
|
|
|
- <div class="bg-darker/50 rounded-lg border border-dashed border-light/20 hover:border-secondary/40 transition-all flex flex-col items-center justify-center aspect-square cursor-pointer group">
|
|
|
- <div class="w-10 h-10 rounded-full bg-light/10 flex items-center justify-center group-hover:bg-secondary/20 transition-colors">
|
|
|
- <i class="fa fa-plus text-secondary"></i>
|
|
|
+ <div class="card-shadow card-hover bg-white rounded-lg p-3 border-l-4 border-green-500 cursor-pointer" onclick="showPoolDetails(5)">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h4 class="font-bold">新手卡池</h4>
|
|
|
+ <span class="bg-green-500/10 text-green-500 px-2 py-0.5 rounded-full text-xs font-medium">¥0</span>
|
|
|
+ </div>
|
|
|
+ <p class="text-gray-600 mt-1 text-xs">新用户专享，免费抽取一次</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <p class="mt-2 text-sm font-medium">查看全部</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 草皮分类 -->
|
|
|
- <div class="mb-16">
|
|
|
- <div class="flex items-center mb-6">
|
|
|
- <div class="w-1 h-6 bg-green-500 rounded-full mr-3"></div>
|
|
|
- <h3 class="text-xl font-semibold flex items-center">
|
|
|
- <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>草皮岩石皮肤
|
|
|
- </h3>
|
|
|
- <span class="ml-3 text-sm text-light/50">(4款)</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
|
- <!-- 草皮皮肤1 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-green-500/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-green-500/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/grass1/300/300" alt="MI_MossyRockJagged" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_MossyRockJagged</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">地形 | 草皮</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 草皮皮肤2 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-green-500/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-green-500/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/grass2/300/300" alt="MI_Cliffs_01" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_Cliffs_01</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">地形 | 草皮</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 草皮皮肤3 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-green-500/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-green-500/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/grass3/300/300" alt="MI_Medium_Rock" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_Medium_Rock</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">地形 | 草皮</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 岩石皮肤 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-green-500/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-green-500/10 to-primary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/rock1/300/300" alt="MI_JaggedRock" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_JaggedRock</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">地形 | 岩石</p>
|
|
|
- </div>
|
|
|
+ <!-- 右侧卡池详情 -->
|
|
|
+ <div class="lg:w-2/3">
|
|
|
+ <div id="pool-details" class="bg-white rounded-xl shadow-lg p-5">
|
|
|
+ <!-- 卡池详情默认内容 -->
|
|
|
+ <div class="text-center py-8" id="default-content">
|
|
|
+ <i class="fa fa-gift text-5xl text-primary/50 mb-3"></i>
|
|
|
+ <h3 class="text-lg font-bold mb-1">请选择一个卡池查看详情</h3>
|
|
|
+ <p class="text-gray-500 text-sm max-w-xs mx-auto">点击左侧卡池列表中的任意卡池，查看该卡池的奖品内容</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 其他分类 -->
|
|
|
- <div>
|
|
|
- <div class="flex items-center mb-6">
|
|
|
- <div class="w-1 h-6 bg-primary rounded-full mr-3"></div>
|
|
|
- <h3 class="text-xl font-semibold flex items-center">
|
|
|
- <span class="w-3 h-3 rounded-full bg-primary mr-2"></span>其他特色皮肤
|
|
|
- </h3>
|
|
|
- <span class="ml-3 text-sm text-light/50">(32款)</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
|
- <!-- 半透皮肤1 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-primary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/trans1/300/300" alt="M_SparrowHair_Zechin" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">M_SparrowHair_Zechin</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">毛发 | 半透</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 卡池详情内容 - 默认隐藏 -->
|
|
|
+ <div id="pool-content" class="hidden">
|
|
|
+ <div class="mb-5">
|
|
|
+ <h3 id="pool-title" class="text-xl font-bold text-gray-800">钻石卡池</h3>
|
|
|
+ <div class="flex items-center mt-1">
|
|
|
+ <span id="pool-price" class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-bold">¥198</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 半透皮肤2 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-primary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/trans2/300/300" alt="M_Sparrow_Zechin_Fur" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">M_Sparrow_Zechin_Fur</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">毛发 | 半透</p>
|
|
|
+ <div class="mt-3 bg-orange-50 p-3 rounded-lg text-sm">
|
|
|
+ <p id="pool-description" class="text-gray-700">钻石卡池是我们的高品质卡池，包含多种稀有道具和珍贵资源。抽奖获得稀有及以上品质道具的概率比普通卡池提高50%，是追求顶级装备和特殊能力的玩家首选。</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 全黑皮肤 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-primary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/black1/300/300" alt="MI_BlackFade_Burrow" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_BlackFade_Burrow</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">基础 | 全黑</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="mb-5">
|
|
|
+ <h4 class="font-bold text-base mb-3 flex items-center">
|
|
|
+ <i class="fa fa-trophy text-primary mr-2"></i>奖品列表
|
|
|
+ <span id="prize-count" class="ml-2 text-xs bg-primary/10 px-2 py-0.5 rounded-full">25个奖品</span>
|
|
|
+ </h4>
|
|
|
+
|
|
|
+ <div class="prize-grid">
|
|
|
+ <!-- 奖品项 -->
|
|
|
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all border border-gray-100">
|
|
|
+ <div class="p-3">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h5 class="font-bold text-sm">超级武器</h5>
|
|
|
+ <span class="bg-red-500/10 text-red-500 px-1.5 py-0.5 rounded-full text-xs">稀有</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 镂空皮肤 -->
|
|
|
- <div class="bg-darker rounded-lg overflow-hidden border border-light/10 hover:border-primary/30 transition-all group">
|
|
|
- <div class="aspect-square bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
|
|
|
- <img src="https://picsum.photos/seed/hollow1/300/300" alt="MI_Therizino_Adult_Base" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <div class="p-3">
|
|
|
- <h4 class="text-sm font-medium truncate">MI_Therizino_Adult_Base</h4>
|
|
|
- <p class="text-xs text-light/50 mt-1">身体 | 镂空</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</section>
|
|
|
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all border border-gray-100">
|
|
|
+ <div class="p-3">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h5 class="font-bold text-sm">防御盾牌</h5>
|
|
|
+ <span class="bg-red-500/10 text-red-500 px-1.5 py-0.5 rounded-full text-xs">稀有</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
-<!-- 排行榜区域 -->
|
|
|
-<section class="py-16">
|
|
|
- <div class="container mx-auto px-4">
|
|
|
- <h2 class="text-2xl md:text-3xl font-bold mb-10">
|
|
|
- <i class="fa fa-trophy text-accent mr-2"></i>皮肤排行榜
|
|
|
- </h2>
|
|
|
-
|
|
|
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
- <!-- 左侧排行榜 -->
|
|
|
- <div class="lg:col-span-2 bg-darker rounded-xl border border-light/10 overflow-hidden">
|
|
|
- <div class="bg-gradient-to-r from-primary/20 to-secondary/20 px-6 py-4 border-b border-light/10">
|
|
|
- <h3 class="font-semibold text-lg">热门下载榜</h3>
|
|
|
- </div>
|
|
|
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all border border-gray-100">
|
|
|
+ <div class="p-3">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h5 class="font-bold text-sm">速度之靴</h5>
|
|
|
+ <span class="bg-purple-600/10 text-purple-600 px-1.5 py-0.5 rounded-full text-xs">史诗</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="divide-y divide-light/5">
|
|
|
- <!-- 排行1 -->
|
|
|
- <div class="px-6 py-4 flex items-center hover:bg-light/5 transition-colors">
|
|
|
- <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-white font-bold mr-4">1</div>
|
|
|
- <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
|
|
|
- <img src="https://picsum.photos/seed/rank1/100/100" alt="PF M_Eye_Occlusion_Inst" class="w-full h-full object-cover">
|
|
|
- </div>
|
|
|
- <div class="flex-grow">
|
|
|
- <h4 class="font-medium">PF M_Eye_Occlusion_Inst</h4>
|
|
|
- <p class="text-xs text-light/50">特殊 | 榜前三</p>
|
|
|
- </div>
|
|
|
- <div class="flex items-center">
|
|
|
- <span class="text-sm text-light/70 mr-2"><i class="fa fa-download mr-1"></i> 12.5k</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-xs transition-colors">
|
|
|
- 获取
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all border border-gray-100">
|
|
|
+ <div class="p-3">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h5 class="font-bold text-sm">生命药水</h5>
|
|
|
+ <span class="bg-blue-500/10 text-blue-500 px-1.5 py-0.5 rounded-full text-xs">精良</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 排行2 -->
|
|
|
- <div class="px-6 py-4 flex items-center hover:bg-light/5 transition-colors">
|
|
|
- <div class="w-8 h-8 rounded-full bg-slate-300 flex items-center justify-center text-darker font-bold mr-4">2</div>
|
|
|
- <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
|
|
|
- <img src="https://picsum.photos/seed/rank2/100/100" alt="pf M_Sparrow_Zechin_EyelashMaster" class="w-full h-full object-cover">
|
|
|
- </div>
|
|
|
- <div class="flex-grow">
|
|
|
- <h4 class="font-medium">pf M_Sparrow_Zechin_EyelashMaster</h4>
|
|
|
- <p class="text-xs text-light/50">睫毛 | 榜前九</p>
|
|
|
- </div>
|
|
|
- <div class="flex items-center">
|
|
|
- <span class="text-sm text-light/70 mr-2"><i class="fa fa-download mr-1"></i> 9.8k</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-xs transition-colors">
|
|
|
- 获取
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all border border-gray-100">
|
|
|
+ <div class="p-3">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h5 class="font-bold text-sm">魔法卷轴</h5>
|
|
|
+ <span class="bg-blue-500/10 text-blue-500 px-1.5 py-0.5 rounded-full text-xs">精良</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 排行3 -->
|
|
|
- <div class="px-6 py-4 flex items-center hover:bg-light/5 transition-colors">
|
|
|
- <div class="w-8 h-8 rounded-full bg-amber-700 flex items-center justify-center text-white font-bold mr-4">3</div>
|
|
|
- <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
|
|
|
- <img src="https://picsum.photos/seed/rank3/100/100" alt="MI_Acro_Eye_Default" class="w-full h-full object-cover">
|
|
|
- </div>
|
|
|
- <div class="flex-grow">
|
|
|
- <h4 class="font-medium">MI_Acro_Eye_Default</h4>
|
|
|
- <p class="text-xs text-light/50">眼部 | 琉璃</p>
|
|
|
- </div>
|
|
|
- <div class="flex items-center">
|
|
|
- <span class="text-sm text-light/70 mr-2"><i class="fa fa-download mr-1"></i> 8.2k</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-xs transition-colors">
|
|
|
- 获取
|
|
|
- </button>
|
|
|
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all border border-gray-100">
|
|
|
+ <div class="p-3">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <h5 class="font-bold text-sm">金币袋</h5>
|
|
|
+ <span class="bg-yellow-500/10 text-yellow-500 px-1.5 py-0.5 rounded-full text-xs">普通</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 排行4-5 -->
|
|
|
- <div class="px-6 py-4 flex items-center hover:bg-light/5 transition-colors">
|
|
|
- <div class="w-8 h-8 rounded-full bg-light/10 flex items-center justify-center text-light font-bold mr-4">4</div>
|
|
|
- <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
|
|
|
- <img src="https://picsum.photos/seed/rank4/100/100" alt="pf M_SparrowHair_Zechin" class="w-full h-full object-cover">
|
|
|
- </div>
|
|
|
- <div class="flex-grow">
|
|
|
- <h4 class="font-medium">pf M_SparrowHair_Zechin</h4>
|
|
|
- <p class="text-xs text-light/50">毛发 | 半透</p>
|
|
|
- </div>
|
|
|
- <div class="flex items-center">
|
|
|
- <span class="text-sm text-light/70 mr-2"><i class="fa fa-download mr-1"></i> 7.6k</span>
|
|
|
- <button class="px-3 py-1 rounded-full bg-primary/20 hover:bg-primary/30 text-primary text-xs transition-colors">
|
|
|
- 获取
|
|
|
+ <div class="mt-4 text-center">
|
|
|
+ <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center mx-auto">
|
|
|
+ 加载更多奖品 <i class="fa fa-angle-down ml-1"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="px-6 py-3 border-t border-light/10 text-center">
|
|
|
- <button class="text-primary hover:text-primary/80 text-sm transition-colors">
|
|
|
- 查看完整排行榜 <i class="fa fa-chevron-right ml-1 text-xs"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 右侧最新上传 -->
|
|
|
- <div class="bg-darker rounded-xl border border-light/10 overflow-hidden">
|
|
|
- <div class="bg-gradient-to-r from-primary/20 to-secondary/20 px-6 py-4 border-b border-light/10">
|
|
|
- <h3 class="font-semibold text-lg">最新上传</h3>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="p-5">
|
|
|
- <div class="space-y-5">
|
|
|
- <!-- 最新1 -->
|
|
|
- <div class="group">
|
|
|
- <div class="aspect-video rounded-lg overflow-hidden mb-2 bg-light/5">
|
|
|
- <img src="https://picsum.photos/seed/new1/400/225" alt="MI_Trike_Eye_Default" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <h4 class="font-medium">MI_Trike_Eye_Default</h4>
|
|
|
- <div class="flex justify-between items-center mt-1">
|
|
|
- <span class="text-xs text-light/50">眼部 | 琉璃</span>
|
|
|
- <span class="text-xs text-light/50">2小时前</span>
|
|
|
+ <div class="bg-orange-50 rounded-lg p-3 text-sm">
|
|
|
+ <h4 class="font-bold mb-2 flex items-center">
|
|
|
+ <i class="fa fa-percent text-primary mr-1.5"></i>概率公示
|
|
|
+ </h4>
|
|
|
+ <div class="space-y-1">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <span class="text-gray-700">普通品质</span>
|
|
|
+ <span class="font-medium">40%</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 最新2 -->
|
|
|
- <div class="group">
|
|
|
- <div class="aspect-video rounded-lg overflow-hidden mb-2 bg-light/5">
|
|
|
- <img src="https://picsum.photos/seed/new2/400/225" alt="MI_Para_Juv_Eye" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
- </div>
|
|
|
- <h4 class="font-medium">MI_Para_Juv_Eye</h4>
|
|
|
- <div class="flex justify-between items-center mt-1">
|
|
|
- <span class="text-xs text-light/50">眼部 | 琉璃</span>
|
|
|
- <span class="text-xs text-light/50">5小时前</span>
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <span class="text-gray-700">精良品质</span>
|
|
|
+ <span class="font-medium">35%</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 最新3 -->
|
|
|
- <div class="group">
|
|
|
- <div class="aspect-video rounded-lg overflow-hidden mb-2 bg-light/5">
|
|
|
- <img src="https://picsum.photos/seed/new3/400/225" alt="MI_Cerato_Eye_Juvie" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <span class="text-gray-700">稀有品质</span>
|
|
|
+ <span class="font-medium">20%</span>
|
|
|
</div>
|
|
|
- <h4 class="font-medium">MI_Cerato_Eye_Juvie</h4>
|
|
|
- <div class="flex justify-between items-center mt-1">
|
|
|
- <span class="text-xs text-light/50">眼部 | 琉璃</span>
|
|
|
- <span class="text-xs text-light/50">昨天</span>
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <span class="text-gray-700">史诗品质</span>
|
|
|
+ <span class="font-medium">5%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -607,125 +311,179 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-</section>
|
|
|
-
|
|
|
-<!-- 订阅区域 -->
|
|
|
-<section class="py-16 relative overflow-hidden">
|
|
|
- <div class="absolute inset-0">
|
|
|
- <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 opacity-20"></div>
|
|
|
- <div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,rgba(108,92,231,0.3)_0%,transparent_70%)]"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="container mx-auto px-4 relative z-10">
|
|
|
- <div class="max-w-2xl mx-auto text-center">
|
|
|
- <h2 class="text-2xl md:text-3xl font-bold mb-4">获取最新皮肤更新</h2>
|
|
|
- <p class="text-light/70 mb-8">订阅我们的更新通知，第一时间获取新皮肤上架和限时活动信息</p>
|
|
|
-
|
|
|
- <div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
|
|
|
- <input type="email" placeholder="输入你的邮箱地址" class="flex-grow px-4 py-3 rounded-full bg-darker border border-light/20 focus:border-primary focus:outline-none">
|
|
|
- <button class="px-6 py-3 rounded-full bg-primary hover:bg-primary/90 text-white font-medium transition-colors whitespace-nowrap">
|
|
|
- 立即订阅
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <p class="text-xs text-light/40 mt-4">我们尊重你的隐私，不会向第三方分享你的信息</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</section>
|
|
|
+</main>
|
|
|
|
|
|
-<!-- 页脚 -->
|
|
|
-<footer class="bg-darker py-12 border-t border-light/10">
|
|
|
+<!-- 页脚 - 包含重新设计的联系管理区域 -->
|
|
|
+<footer class="bg-gray-800 text-white mt-8 py-6">
|
|
|
<div class="container mx-auto px-4">
|
|
|
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
<div>
|
|
|
- <div class="flex items-center space-x-2 mb-4">
|
|
|
- <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
|
|
|
- <i class="fa fa-paint-brush"></i>
|
|
|
- </div>
|
|
|
- <h3 class="text-xl font-bold">MHD皮肤商城</h3>
|
|
|
- </div>
|
|
|
- <p class="text-light/60 text-sm mb-4">提供高品质皮肤资源，满足创作者的各种需求</p>
|
|
|
- <div class="flex space-x-4">
|
|
|
- <a href="#" class="w-8 h-8 rounded-full bg-light/5 flex items-center justify-center hover:bg-primary/20 hover:text-primary transition-colors">
|
|
|
- <i class="fa fa-twitter"></i>
|
|
|
+ <h3 class="text-lg font-bold mb-3 flex items-center">
|
|
|
+ <i class="fa fa-gift mr-2"></i>MHD抽奖
|
|
|
+ </h3>
|
|
|
+ <p class="text-gray-400 text-sm">
|
|
|
+ 提供公平、公正、公开的抽奖体验，丰富奖品等你来拿！
|
|
|
+ </p>
|
|
|
+ <div class="mt-3 flex space-x-3">
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
|
|
|
+ <i class="fa fa-weibo"></i>
|
|
|
</a>
|
|
|
- <a href="#" class="w-8 h-8 rounded-full bg-light/5 flex items-center justify-center hover:bg-primary/20 hover:text-primary transition-colors">
|
|
|
- <i class="fa fa-discord"></i>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
|
|
|
+ <i class="fa fa-wechat"></i>
|
|
|
</a>
|
|
|
- <a href="#" class="w-8 h-8 rounded-full bg-light/5 flex items-center justify-center hover:bg-primary/20 hover:text-primary transition-colors">
|
|
|
- <i class="fa fa-instagram"></i>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
|
|
|
+ <i class="fa fa-qq"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <h4 class="font-semibold mb-4">快速链接</h4>
|
|
|
- <ul class="space-y-2 text-sm text-light/60">
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">首页</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">皮肤库</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">排行榜</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">最新上传</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">热门下载</a></li>
|
|
|
+ <h3 class="text-sm font-bold mb-3">快速链接</h3>
|
|
|
+ <ul class="space-y-1.5 text-sm">
|
|
|
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
|
|
|
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">卡池列表</a></li>
|
|
|
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">中奖记录</a></li>
|
|
|
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
|
|
|
+ <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <div>
|
|
|
- <h4 class="font-semibold mb-4">支持</h4>
|
|
|
- <ul class="space-y-2 text-sm text-light/60">
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">帮助中心</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">使用教程</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">常见问题</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">联系我们</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">反馈建议</a></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <!-- 重新设计的联系管理区域 -->
|
|
|
+ <div class="bg-gray-700/50 rounded-xl p-4">
|
|
|
+ <h3 class="text-lg font-bold mb-4 flex items-center text-primary">
|
|
|
+ <i class="fa fa-headphones mr-2"></i>联系我们
|
|
|
+ </h3>
|
|
|
+ <div class="space-y-3">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="bg-primary/20 p-2 rounded-full mr-3">
|
|
|
+ <i class="fa fa-envelope-o text-primary"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h4 class="text-sm font-medium">邮箱</h4>
|
|
|
+ <p class="text-gray-400 text-sm">support@luckydraw.com</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div>
|
|
|
- <h4 class="font-semibold mb-4">法律</h4>
|
|
|
- <ul class="space-y-2 text-sm text-light/60">
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">服务条款</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">隐私政策</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">版权声明</a></li>
|
|
|
- <li><a href="#" class="hover:text-primary transition-colors">使用许可</a></li>
|
|
|
- </ul>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="bg-primary/20 p-2 rounded-full mr-3">
|
|
|
+ <i class="fa fa-phone text-primary"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h4 class="text-sm font-medium">客服热线</h4>
|
|
|
+ <p class="text-gray-400 text-sm">400-123-4567</p>
|
|
|
+ <p class="text-gray-500 text-xs mt-0.5">工作时间: 9:00-21:00</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="bg-primary/20 p-2 rounded-full mr-3">
|
|
|
+ <i class="fa fa-map-marker text-primary"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h4 class="text-sm font-medium">公司地址</h4>
|
|
|
+ <p class="text-gray-400 text-sm">北京市朝阳区科技园区</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="bg-primary/20 p-2 rounded-full mr-3">
|
|
|
+ <i class="fa fa-comments text-primary"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h4 class="text-sm font-medium">在线客服</h4>
|
|
|
+ <div class="flex space-x-2 mt-1">
|
|
|
+ <button class="bg-primary/80 hover:bg-primary text-white px-3 py-1 rounded text-xs flex items-center">
|
|
|
+ <i class="fa fa-wechat mr-1"></i> 微信客服
|
|
|
+ </button>
|
|
|
+ <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded text-xs flex items-center">
|
|
|
+ <i class="fa fa-qq mr-1"></i> QQ客服
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="pt-8 border-t border-light/10 flex flex-col md:flex-row justify-between items-center">
|
|
|
- <p class="text-light/50 text-sm mb-4 md:mb-0">© 2023 MHD皮肤商城. 保留所有权利</p>
|
|
|
- <div class="flex space-x-6">
|
|
|
- <a href="#" class="text-light/50 hover:text-primary text-sm transition-colors">服务条款</a>
|
|
|
- <a href="#" class="text-light/50 hover:text-primary text-sm transition-colors">隐私政策</a>
|
|
|
- <a href="#" class="text-light/50 hover:text-primary text-sm transition-colors">Cookie设置</a>
|
|
|
- </div>
|
|
|
+ <div class="border-t border-gray-700 mt-6 pt-4 text-center text-gray-500 text-xs">
|
|
|
+ <p>© 2025 MHD抽奖 版权所有 | 京ICP备12345678号</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<!-- JavaScript -->
|
|
|
<script>
|
|
|
- // 简单的交互效果
|
|
|
- document.addEventListener('DOMContentLoaded', () => {
|
|
|
- // 分类切换效果
|
|
|
- const categoryButtons = document.querySelectorAll('.category-active, .whitespace-nowrap.px-4');
|
|
|
- categoryButtons.forEach(button => {
|
|
|
- button.addEventListener('click', () => {
|
|
|
- // 移除所有活跃状态
|
|
|
- categoryButtons.forEach(btn => btn.classList.remove('category-active'));
|
|
|
- // 添加当前活跃状态
|
|
|
- button.classList.add('category-active');
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 平滑滚动
|
|
|
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
|
- anchor.addEventListener('click', function (e) {
|
|
|
- e.preventDefault();
|
|
|
- document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
|
- behavior: 'smooth'
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
+ // 卡池数据
|
|
|
+ const poolData = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: "钻石卡池",
|
|
|
+ price: "¥198",
|
|
|
+ description: "钻石卡池是我们的高品质卡池，包含多种稀有道具和珍贵资源。抽奖获得稀有及以上品质道具的概率比普通卡池提高50%，是追求顶级装备和特殊能力的玩家首选。",
|
|
|
+ prizes: 25
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: "黄金卡池",
|
|
|
+ price: "¥98",
|
|
|
+ description: "黄金卡池提供丰富多样的奖励，包含大量实用道具和资源。这个卡池平衡性好，适合各类玩家抽取，既有一定概率获得稀有物品，又能稳定获取实用资源。",
|
|
|
+ prizes: 22
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: "白银卡池",
|
|
|
+ price: "¥48",
|
|
|
+ description: "白银卡池是入门级卡池，适合新手玩家和资源积累阶段的玩家。虽然稀有物品产出概率较低，但能稳定获得基础道具和资源，帮助玩家快速提升实力。",
|
|
|
+ prizes: 18
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: "青铜卡池",
|
|
|
+ price: "¥18",
|
|
|
+ description: "青铜卡池是最经济实惠的卡池，适合预算有限的玩家。主要产出基础道具和少量资源，是新手起步的理想选择，每次抽奖消耗的资源较少。",
|
|
|
+ prizes: 15
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: "新手卡池",
|
|
|
+ price: "免费",
|
|
|
+ description: "新手卡池是专为新用户准备的福利，每位用户注册后可免费抽取一次。该卡池包含多种新手必备道具和资源，帮助新用户快速上手游戏。",
|
|
|
+ prizes: 10
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 显示卡池详情
|
|
|
+ function showPoolDetails(poolId) {
|
|
|
+ // 找到对应的卡池数据
|
|
|
+ const pool = poolData.find(p => p.id === poolId);
|
|
|
+ if (!pool) return;
|
|
|
+
|
|
|
+ // 更新卡池详情内容
|
|
|
+ document.getElementById('pool-title').textContent = pool.title;
|
|
|
+ document.getElementById('pool-price').textContent = pool.price;
|
|
|
+ document.getElementById('pool-description').textContent = pool.description;
|
|
|
+ document.getElementById('prize-count').textContent = `${pool.prizes}个奖品`;
|
|
|
+
|
|
|
+ // 切换显示状态
|
|
|
+ document.getElementById('default-content').classList.add('hidden');
|
|
|
+ document.getElementById('pool-content').classList.remove('hidden');
|
|
|
+
|
|
|
+ // 平滑滚动到详情区域（移动端体验优化）
|
|
|
+ if (window.innerWidth < 1024) {
|
|
|
+ document.getElementById('pool-details').scrollIntoView({ behavior: 'smooth' });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导航栏滚动效果
|
|
|
+ window.addEventListener('scroll', function() {
|
|
|
+ const nav = document.querySelector('nav');
|
|
|
+ if (window.scrollY > 50) {
|
|
|
+ nav.classList.add('py-2', 'shadow-lg');
|
|
|
+ nav.classList.remove('py-3', 'shadow-md');
|
|
|
+ } else {
|
|
|
+ nav.classList.add('py-3', 'shadow-md');
|
|
|
+ nav.classList.remove('py-2', 'shadow-lg');
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
lala2019