| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script src="https://cdn.tailwindcss.com"></script>
- <style>
- @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap');
- body, html {
- font-family: 'Fredoka', sans-serif;
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- background-color: transparent; /* 确保倒角外部透明 */
- }
- </style>
- </head>
- <body class="flex items-center justify-center overflow-hidden">
- <!-- 卡片容器
- 1. h-full w-full: 占满屏幕
- 2. rounded-[30px]: 强制圆角
- 3. overflow-hidden: 裁剪图片确保圆角生效
- 4. 无背景色设置(或设为white)，确保外部是透的
- -->
- <div class="relative w-full h-full bg-white overflow-hidden rounded-[30px] shadow-2xl">
-
- <!-- 1. 背景层 -->
- <img src="https://orienteering.beswell.com/card/nanning/nncardrg.jpg"
- alt="活动背景"
- class="absolute inset-0 w-full h-full object-cover">
-
- <!-- 遮罩层 -->
- <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/20"></div>
- <!-- 2. 倒计时区域
- 使用 vw 单位实现等比例缩放
- -->
- <div class="absolute top-[5%] right-[5%] bg-black/40 backdrop-blur-md rounded-full border border-white/20 shadow-lg z-10"
- style="padding: 1.5vw 3vw;">
- <div class="flex items-center gap-[1vw] text-white leading-none font-medium" id="timer-container">
- <span class="opacity-90" style="font-size: 3.5vw;">距开始</span>
- <span class="font-bold text-yellow-300 tabular-nums" style="font-size: 4.5vw;">
- <span id="days">02</span>天<span id="hours">14</span>时
- </span>
- </div>
- </div>
- <!-- 3. 进入按钮
- 使用 vw 单位控制宽度、字体、圆角和边距，实现完全响应式
- -->
- <div class="absolute bottom-[8%] left-0 w-full flex justify-center z-10 px-[6vw]">
- <button id="action-btn"
- class="w-full bg-gradient-to-r from-orange-500 to-red-600 text-white font-bold shadow-xl border border-white/20 active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]"
- style="font-size: 5vw; padding: 3.5vw 0; border-radius: 9999px;">
- 开始报名 <i class="fas fa-chevron-right opacity-80" style="font-size: 4vw;"></i>
- </button>
- </div>
- </div>
- <!-- FontAwesome for the arrow icon -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
- <script>
- // 模拟状态 logic (0:未开始, 1:进行中, 2:已结束)
- let status = 0;
- const btn = document.getElementById('action-btn');
- const timerContainer = document.getElementById('timer-container');
- if(status === 0) {
- btn.innerHTML = '开始报名 <i class="fas fa-chevron-right opacity-80" style="font-size: 4vw;"></i>';
- } else if (status === 1) {
- btn.innerHTML = '进入比赛 <i class="fas fa-flag-checkered opacity-80" style="font-size: 4vw;"></i>';
- // 保持 proportional styling
- btn.className = "w-full bg-gradient-to-r from-green-400 to-emerald-600 text-white font-bold shadow-xl border border-white/20 active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]";
- timerContainer.innerHTML = '<span class="opacity-90" style="font-size: 3.5vw;">距结束</span><span class="font-bold text-yellow-300 tabular-nums" style="font-size: 4.5vw;">01天 05时</span>';
- } else {
- btn.innerHTML = '查看数据';
- btn.className = "w-full bg-slate-600 text-white font-bold shadow-xl active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]";
- timerContainer.parentElement.className = "absolute top-[5%] right-[5%] bg-gray-800/80 backdrop-blur-md rounded-full";
- timerContainer.parentElement.style.padding = "1.5vw 3vw";
- timerContainer.innerHTML = '<span class="text-gray-200 font-bold" style="font-size: 4vw;">已结束</span>';
- }
- </script>
- </body>
- </html>
|
