|
|
@@ -225,6 +225,10 @@
|
|
|
.modal-body { width: 80%; max-width: 320px; background: white; border-radius: 24px; padding: 25px; text-align: center; transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 4px solid var(--primary-purple); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
|
|
|
.modal-mask.show .modal-body { transform: scale(1); }
|
|
|
.m-close { background: var(--primary-purple); color: white; padding: 10px 25px; border-radius: 20px; border: none; font-weight: bold; cursor: pointer; margin-top: 15px; }
|
|
|
+ .rule-box { text-align: left; background: #f9f4ff; border: 1px solid #e3d7ff; border-radius: 12px; padding: 12px; color: #4b3a67; font-size: 13px; line-height: 1.6; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
|
|
|
+ .rule-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
|
|
|
+ .rule-item:last-child { margin-bottom: 0; }
|
|
|
+ .rule-item i { color: var(--primary-orange); margin-top: 2px; }
|
|
|
|
|
|
/* 加载遮罩 */
|
|
|
.loading-mask {
|
|
|
@@ -308,8 +312,12 @@
|
|
|
<!-- 模态框 -->
|
|
|
<div class="modal-mask" id="infoModal">
|
|
|
<div class="modal-body">
|
|
|
- <h3 style="color:#593259; margin-bottom:15px;">📜 规则说明</h3>
|
|
|
- <p id="ruleContent" style="text-align:left; color:#636e72; font-size:14px; line-height:1.6;">数据加载中...</p>
|
|
|
+ <h3 style="color:#593259; margin-bottom:15px;">?? 规则说明</h3>
|
|
|
+ <div id="ruleContent" class="rule-box">
|
|
|
+ <div class="rule-item"><i class="fa-solid fa-bullseye"></i><div><strong>积分规则：</strong> 在指定公园找到打卡点，耗时越短积分越高。</div></div>
|
|
|
+ <div class="rule-item"><i class="fa-solid fa-map-location-dot"></i><div><strong>场地排行：</strong> 按解锁的公园场地数量排名。</div></div>
|
|
|
+ <div class="rule-item"><i class="fa-solid fa-trophy"></i><div><strong>奖杯获取：</strong> 完成4次有效挑战点亮全部奖杯。</div></div>
|
|
|
+ </div>
|
|
|
|
|
|
<!-- 演示功能区 -->
|
|
|
<div class="demo-section">
|
|
|
@@ -693,3 +701,5 @@
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
+
|
|
|
+
|
