|
|
@@ -0,0 +1,281 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
|
+ <title>11月挑战赛 - 智能缩放版</title>
|
|
|
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --primary-purple: #593259;
|
|
|
+ --primary-orange: #ffeaa7;
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ html, body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: transparent !important;
|
|
|
+ background: rgba(0, 0, 0, 0) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 2. 外层容器 */
|
|
|
+ .card-container {
|
|
|
+ width: 96%;
|
|
|
+ height: 96%;
|
|
|
+ /* 圆角也需要自适应：最大24px，或者视口最小边的6% */
|
|
|
+ border-radius: min(24px, 6vmin);
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ background: linear-gradient(to bottom,
|
|
|
+ rgba(162, 155, 254, 0.2) 0%,
|
|
|
+ rgba(45, 52, 54, 0.95) 100%),
|
|
|
+ url('./bg.jpg?w=800') center/cover no-repeat;
|
|
|
+
|
|
|
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
|
|
|
+
|
|
|
+ transform: translateZ(0);
|
|
|
+ -webkit-mask-image: -webkit-radial-gradient(white, black);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 3. 内层毛玻璃 */
|
|
|
+ .glass-layer {
|
|
|
+ position: absolute;
|
|
|
+ top: 4%; left: 4%; right: 4%; bottom: 4%;
|
|
|
+
|
|
|
+ /* 圆角自适应 */
|
|
|
+ border-radius: min(20px, 5vmin);
|
|
|
+
|
|
|
+ border: 1.5px solid rgba(255, 255, 255, 0.3);
|
|
|
+ border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
|
|
|
+
|
|
|
+ background: linear-gradient(to bottom,
|
|
|
+ rgba(255, 255, 255, 0.15) 0%,
|
|
|
+ rgba(255, 255, 255, 0.02) 50%,
|
|
|
+ rgba(0, 0, 0, 0.1) 100%
|
|
|
+ );
|
|
|
+ /* backdrop-filter: blur(6px);
|
|
|
+ -webkit-backdrop-filter: blur(6px);
|
|
|
+ */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ box-shadow: inset 0 0 15px rgba(255,255,255,0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-container:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ transition: transform 0.1s;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部年份 */
|
|
|
+ .tag-year {
|
|
|
+ /* 字体大小：最大20px，缩小时占视口最小边的5.5% */
|
|
|
+ font-size: min(30px, 7.5vmin);
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ /* Padding 使用 em 单位，随字体大小缩放 */
|
|
|
+ padding: 0.2em 0.8em;
|
|
|
+
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid rgba(255,255,255,0.2);
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ /* 距离顶部的距离也自适应 */
|
|
|
+ top: min(10px, 2vh);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 核心数字：11 */
|
|
|
+ .title-month {
|
|
|
+ /* 字体大小：最大80px，缩小时占视口最小边的22% */
|
|
|
+ font-size: min(140px, 32vmin);
|
|
|
+ font-weight: 900;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ background: linear-gradient(to bottom, #ffffff 10%, #ffd700 50%, #ff9f43 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+
|
|
|
+ filter: drop-shadow(0 4px 0px rgba(0, 0, 0, 0.2));
|
|
|
+
|
|
|
+ /* 顶部间距：最大55px，缩小时占视口高度的12% */
|
|
|
+ margin-top: min(75px, 16vh);
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 月度挑战赛 */
|
|
|
+ .title-sub {
|
|
|
+ /* 字体大小：最大16px，缩小时占视口最小边的4.5% */
|
|
|
+ font-size: min(20px, 6.5vmin);
|
|
|
+ font-weight: 800;
|
|
|
+ color: rgba(255, 255, 255, 0.95);
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ text-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
|
|
+
|
|
|
+ margin-top: min(5px, 1vh);
|
|
|
+ margin-bottom: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 奖杯图标 */
|
|
|
+ .deco-icon {
|
|
|
+ /* 底部间距：最大22px，缩小时占视口高度的4% */
|
|
|
+ margin-bottom: min(22px, 8vh);
|
|
|
+
|
|
|
+ /* 宽高：最大40px，缩小时占视口最小边的11% */
|
|
|
+ width: min(40px, 11vmin);
|
|
|
+ height: min(40px, 11vmin);
|
|
|
+
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex; justify-content: center; align-items: center;
|
|
|
+ background: rgba(255,255,255,0.1);
|
|
|
+ border: 1px solid rgba(255,255,255,0.2);
|
|
|
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
|
|
+
|
|
|
+ animation: trophy-pulse 2s infinite ease-in-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deco-icon i {
|
|
|
+ /* 图标大小：最大20px，随容器缩小 */
|
|
|
+ font-size: min(20px, 5.5vmin);
|
|
|
+ color: #ffd700;
|
|
|
+ filter: drop-shadow(0 0 5px rgba(253, 203, 110, 0.8));
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 查看排行按钮 */
|
|
|
+ .action-btn {
|
|
|
+ /* 底部间距：最大20px，缩小时自适应 */
|
|
|
+ margin-bottom: min(30px, 6vh);
|
|
|
+
|
|
|
+ /* 宽度：最大110px，缩小时占视口宽度的30% */
|
|
|
+ width: min(180px, 50vmin);
|
|
|
+
|
|
|
+ padding: min(8px, 2vh) 0;
|
|
|
+ border-radius: 25px;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ background: linear-gradient(90deg, #ffeaa7 0%, #fab1a0 100%);
|
|
|
+ color: #593259;
|
|
|
+
|
|
|
+ /* 字体：最大12px */
|
|
|
+ font-size: min(18px, 5.5vmin);
|
|
|
+ font-weight: 900;
|
|
|
+
|
|
|
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn i { font-size: 0.8em; }
|
|
|
+
|
|
|
+ @keyframes trophy-pulse {
|
|
|
+ 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 203, 110, 0.2); }
|
|
|
+ 50% { transform: scale(1.15); box-shadow: 0 0 15px 5px rgba(253, 203, 110, 0.4); }
|
|
|
+ 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 203, 110, 0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部反光
|
|
|
+ .shine {
|
|
|
+ position: absolute;
|
|
|
+ top: -20px; left: -20px;
|
|
|
+ width: 150px; height: 100px;
|
|
|
+ background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
|
|
|
+ z-index: 3;
|
|
|
+ pointer-events: none;
|
|
|
+ filter: blur(20px);
|
|
|
+ }
|
|
|
+*/
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+ <!-- 外层容器 -->
|
|
|
+ <div class="card-container" onclick="redirectToDetail()">
|
|
|
+
|
|
|
+ <!-- 内层容器 -->
|
|
|
+ <div class="glass-layer">
|
|
|
+ <div class="shine"></div>
|
|
|
+
|
|
|
+ <div class="tag-year">2025 年</div>
|
|
|
+
|
|
|
+ <div class="title-month">11</div>
|
|
|
+ <div class="title-sub">月度挑战赛</div>
|
|
|
+
|
|
|
+ <div class="deco-icon">
|
|
|
+ <i class="fa-solid fa-trophy"></i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="action-btn" onclick="redirectToDetail()">
|
|
|
+ 查看排行 <i class="fa-solid fa-arrow-right"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="./bridge.js"></script>
|
|
|
+ <script>
|
|
|
+ function getQueryParam(name) {
|
|
|
+ const params = new URLSearchParams(window.location.search);
|
|
|
+ return params.get(name);
|
|
|
+ }
|
|
|
+
|
|
|
+ function redirectToDetail() {
|
|
|
+ const token = getQueryParam('token');
|
|
|
+ const id = getQueryParam('id');
|
|
|
+ let detailUrl = 'detail.html';
|
|
|
+
|
|
|
+ const queryParams = [];
|
|
|
+ if (token) {
|
|
|
+ queryParams.push(`token=${encodeURIComponent(token)}`);
|
|
|
+ }
|
|
|
+ if (id) {
|
|
|
+ queryParams.push(`id=${encodeURIComponent(id)}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (queryParams.length > 0) {
|
|
|
+ detailUrl += `?${queryParams.join('&')}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ detailUrl += (detailUrl.includes('?') ? '&' : '?') + 'full=true';
|
|
|
+
|
|
|
+ console.log("Navigating to:", detailUrl);
|
|
|
+
|
|
|
+ if (window.Bridge && window.Bridge.appAction) {
|
|
|
+ Bridge.appAction(detailUrl);
|
|
|
+ } else {
|
|
|
+ window.location.href = detailUrl;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
