189 lines
9.6 KiB
HTML
189 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||
<title>世界数据 · 宇森 Yusen</title>
|
||
<link rel="stylesheet" href="assets/fonts/yusen-fonts.css" />
|
||
<link rel="icon" type="image/png" sizes="48x48" href="assets/ui/logo_planet_48.png?v=20260723">
|
||
<link rel="stylesheet" href="assets/common.css" />
|
||
<style>
|
||
.wd-wrap{max-width:1140px;width:100%;margin:0 auto;padding:28px 0;}
|
||
|
||
.wd-tag{display:inline-block;font-size:12px;letter-spacing:2px;color:var(--gold);background:rgba(231,184,92,.12);border:1px solid rgba(231,184,92,.38);border-radius:6px;padding:3px 11px;margin-bottom:22px;}
|
||
.wd-h{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:22px;letter-spacing:3px;color:#fff;margin:38px 0 18px;text-shadow:0 0 14px rgba(139,92,246,.45);display:flex;align-items:center;gap:10px;}
|
||
.wd-h::before{content:"";width:4px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--violet),var(--cyan));box-shadow:0 0 10px rgba(139,92,246,.6);}
|
||
.wd-h small{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--magenta);letter-spacing:1px;}
|
||
|
||
/* KPI 卡片 */
|
||
.wd-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
|
||
.wd-kpi-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(76,201,240,.05));border:1px solid var(--card-bd);border-radius:16px;padding:22px 26px;transition:.26s;}
|
||
.wd-kpi-card:hover{transform:translateY(-4px);border-color:var(--violet);box-shadow:var(--glow);}
|
||
.wd-kpi-card::after{content:"";position:absolute;right:-26px;top:-26px;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(199,125,255,.22),transparent 70%);}
|
||
.wd-kpi-ic{font-size:22px;filter:drop-shadow(0 0 7px rgba(139,92,246,.55));}
|
||
.wd-kpi-num{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:40px;line-height:1.1;color:#fff;margin:10px 0 4px;}
|
||
.wd-kpi-num .u{font-size:14px;color:var(--text-dim);margin-left:4px;letter-spacing:1px;}
|
||
.wd-kpi-label{font-size:13px;color:var(--text-dim);letter-spacing:1px;}
|
||
.wd-kpi-delta{position:absolute;right:14px;top:16px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:5px;}
|
||
.wd-up{color:#7CFC9B;background:rgba(124,252,155,.12);}
|
||
.wd-down{color:#ff8585;background:rgba(255,133,133,.12);}
|
||
|
||
/* 进度条 */
|
||
.wd-bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px 26px;}
|
||
.wd-bar-row{margin-bottom:4px;}
|
||
.wd-bar-top{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px;}
|
||
.wd-bar-top .k{color:var(--text);}
|
||
.wd-bar-top .v{color:var(--gold);font-weight:700;}
|
||
.wd-track{height:9px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;}
|
||
.wd-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 9px rgba(139,92,246,.55);}
|
||
|
||
/* 表格 */
|
||
.wd-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:rgba(255,255,255,.02);border:1px solid var(--card-bd);border-radius:14px;overflow:hidden;}
|
||
.wd-table th{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:14px;letter-spacing:2px;color:#fff;background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(76,201,240,.12));text-align:left;padding:13px 16px;border-bottom:1px solid var(--card-bd);}
|
||
.wd-table td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--text-dim);line-height:1.5;}
|
||
.wd-table tr:last-child td{border-bottom:none;}
|
||
.wd-table tr:hover td{background:rgba(139,92,246,.08);color:#eaf0ff;}
|
||
.wd-table .lead{color:#fff;font-weight:600;}
|
||
.wd-table .pill{display:inline-block;font-size:12px;padding:2px 9px;border-radius:20px;background:rgba(76,201,240,.14);color:var(--cyan);border:1px solid rgba(76,201,240,.34);}
|
||
|
||
/* 排行 */
|
||
.wd-rank{display:flex;flex-direction:column;gap:12px;}
|
||
.wd-rank-row{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(255,255,255,.02));border:1px solid var(--card-bd);border-radius:13px;padding:12px 16px;transition:.22s;}
|
||
.wd-rank-row:hover{border-color:var(--violet);transform:translateX(4px);}
|
||
.wd-rank-no{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:22px;width:34px;text-align:center;color:var(--gold);flex:0 0 auto;}
|
||
.wd-rank-row:nth-child(1) .wd-rank-no{color:#ffd56b;}
|
||
.wd-rank-row:nth-child(2) .wd-rank-no{color:#cfd8e8;}
|
||
.wd-rank-row:nth-child(3) .wd-rank-no{color:#e0a86b;}
|
||
.wd-rank-main{flex:1;min-width:0;}
|
||
.wd-rank-name{font-size:15px;color:#fff;margin-bottom:5px;display:flex;justify-content:space-between;}
|
||
.wd-rank-name .s{color:var(--gold);font-weight:700;font-size:13px;}
|
||
.wd-rank-track{height:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden;}
|
||
.wd-rank-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--magenta),var(--violet));box-shadow:0 0 8px rgba(199,125,255,.5);}
|
||
|
||
@media (max-width:768px){
|
||
.wd-wrap{padding:28px 16px 80px;}
|
||
.wd-kpi{grid-template-columns:repeat(2,1fr);}
|
||
.wd-bars{grid-template-columns:1fr;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<header class="topbar">
|
||
<a href="index.html" class="logo"><span class="cn">宇森</span></a>
|
||
<nav class="nav">
|
||
<a href="announce.html">公告</a>
|
||
<a href="background.html">背景</a>
|
||
<a href="rules.html">规则</a>
|
||
<a href="codex.html">图鉴</a>
|
||
<a href="story.html">剧情</a>
|
||
<a href="forum.html" class="auth-only">论坛</a>
|
||
<a href="worlddata.html" class="auth-only">世界数据</a>
|
||
</nav>
|
||
<div class="spacer"></div>
|
||
<div class="user-box" id="userBox"></div>
|
||
</header>
|
||
|
||
<main class="page-content hide-scroll">
|
||
<div class="wd-wrap" id="worldDataContent">
|
||
<!-- JS 渲染 -->
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="assets/game-api.js"></script>
|
||
<script src="assets/common.js"></script>
|
||
<script>
|
||
async function renderWorldData(){
|
||
const box = document.getElementById('worldDataContent');
|
||
if(!box) return;
|
||
|
||
// TODO: 后端接入后改为 await API.worldData() 取真实数据
|
||
const data = worldDataMock();
|
||
const kpis = data.kpi.map(k=>`
|
||
<div class="wd-kpi-card">
|
||
<span class="wd-kpi-delta ${k.delta>=0?'wd-up':'wd-down'}">${k.delta>=0?'▲':'▼'} ${Math.abs(k.delta)}%</span>
|
||
<div class="wd-kpi-ic">${k.icon}</div>
|
||
<div class="wd-kpi-num">${k.num}<span class="u">${k.unit||''}</span></div>
|
||
<div class="wd-kpi-label">${k.label}</div>
|
||
</div>`).join('');
|
||
const bars = data.bars.map(b=>`
|
||
<div class="wd-bar-row">
|
||
<div class="wd-bar-top"><span class="k">${b.k}</span><span class="v">${b.v}%</span></div>
|
||
<div class="wd-track"><div class="wd-fill" style="width:${b.v}%"></div></div>
|
||
</div>`).join('');
|
||
const rows = data.layers.map(l=>`
|
||
<tr>
|
||
<td class="lead">${l.lv}</td>
|
||
<td>${l.band}</td>
|
||
<td>${l.eco}</td>
|
||
<td>${l.pop}</td>
|
||
<td><span class="pill">${l.terr}</span></td>
|
||
</tr>`).join('');
|
||
const ranks = data.factions.map((f,i)=>`
|
||
<div class="wd-rank-row">
|
||
<div class="wd-rank-no">${i+1}</div>
|
||
<div class="wd-rank-main">
|
||
<div class="wd-rank-name"><span>${f.name}</span><span class="s">${f.score} 影响力</span></div>
|
||
<div class="wd-rank-track"><div class="wd-rank-fill" style="width:${f.pct}%"></div></div>
|
||
</div>
|
||
</div>`).join('');
|
||
box.innerHTML = `
|
||
<span class="wd-tag">演示数据 · 后端接口待接入</span>
|
||
<div class="wd-kpi">${kpis}</div>
|
||
|
||
<div class="wd-h">核心指标进度 <small>CORE METRICS</small></div>
|
||
<div class="wd-bars">${bars}</div>
|
||
|
||
<div class="wd-h">世界五层结构 <small>WORLD LAYERS</small></div>
|
||
<table class="wd-table">
|
||
<thead><tr><th>层级</th><th>高度带</th><th>地表生态</th><th>人口占比</th><th>代表地形</th></tr></thead>
|
||
<tbody>${rows}</tbody>
|
||
</table>
|
||
|
||
<div class="wd-h">势力影响力排行 <small>FACTION RANKING</small></div>
|
||
<div class="wd-rank">${ranks}</div>
|
||
`;
|
||
}
|
||
|
||
function worldDataMock(){
|
||
return {
|
||
kpi:[
|
||
{icon:'👥',num:'12,840',unit:'人',label:'世界总人口',delta:3},
|
||
{icon:'🌍',num:'Lv.7',unit:'',label:'当前世界等级',delta:1},
|
||
{icon:'🏛️',num:'38',unit:'个',label:'活跃势力',delta:5},
|
||
{icon:'⛪',num:'9.6M',unit:'',label:'信仰值总量',delta:8},
|
||
{icon:'⚔️',num:'214',unit:'',label:'在线角色',delta:-2},
|
||
{icon:'💎',num:'1.3M',unit:'',label:'流通晶币',delta:4}
|
||
],
|
||
bars:[
|
||
{k:'世界安定度',v:78},
|
||
{k:'生态健康度',v:64},
|
||
{k:'信仰传播度',v:88},
|
||
{k:'文明探索度',v:52},
|
||
{k:'势力平衡度',v:71},
|
||
{k:'资源充裕度',v:60}
|
||
],
|
||
layers:[
|
||
{lv:'第一层 · 地表',band:'0–80m',eco:'平原 / 森林 / 河流',pop:'58%',terr:'草原城邦'},
|
||
{lv:'第二层 · 丘陵',band:'80–260m',eco:'梯田 / 矿脉 / 林地',pop:'22%',terr:'山道驿站'},
|
||
{lv:'第三层 · 高地',band:'260–600m',eco:'苔原 / 雪线 / 圣峰',pop:'12%',terr:'云端神殿'},
|
||
{lv:'第四层 · 地下',band:'-30–-200m',eco:'溶洞 / 晶矿 / 暗河',pop:'6%',terr:'地心工坊'},
|
||
{lv:'第五层 · 秘境',band:'位面裂隙',eco:'虚空 / 混沌 / 星界',pop:'2%',terr:'裂隙哨站'}
|
||
],
|
||
factions:[
|
||
{name:'曦光同盟',score:9420,pct:100},
|
||
{name:'玄铁工盟',score:8730,pct:93},
|
||
{name:'碧波联邦',score:7610,pct:81},
|
||
{name:'夜枭议会',score:6880,pct:73},
|
||
{name:'荒原游商',score:5240,pct:56},
|
||
{name:'星语祭司团',score:4310,pct:46}
|
||
]
|
||
};
|
||
}
|
||
|
||
renderWorldData();
|
||
</script>
|
||
</body>
|
||
</html>
|