300 lines
6.0 KiB
HTML
300 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>剑网三 战绩面板</title>
|
||
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 20px;
|
||
background: #f2f3f7;
|
||
color: #2b2b2b;
|
||
font-family: "Microsoft YaHei", Arial, sans-serif;
|
||
}
|
||
|
||
.panel {
|
||
width: 1100px;
|
||
margin: auto;
|
||
background: #ffffff;
|
||
border-radius: 12px;
|
||
padding: 22px;
|
||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
/* ===== 头部 ===== */
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ddd;
|
||
padding-bottom: 14px;
|
||
}
|
||
|
||
.role-name {
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
color: #1f1f1f;
|
||
}
|
||
|
||
.sub-info {
|
||
margin-top: 6px;
|
||
font-size: 22px;
|
||
color: #666;
|
||
}
|
||
|
||
/* ===== 头像 + 核心数据 ===== */
|
||
.stats-wrap {
|
||
display: flex;
|
||
gap: 24px;
|
||
margin: 26px 0;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* 头像区域 */
|
||
.avatar-box {
|
||
width: 280px;
|
||
height: 360px;
|
||
background: #e9ebf1;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.avatar-box img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
/* 右侧数据 */
|
||
.stats {
|
||
flex: 1;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
gap: 14px;
|
||
}
|
||
|
||
/* 单个数据块 */
|
||
.stat-box {
|
||
background: #f5f6fa;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-title {
|
||
font-size: 26px;
|
||
color: #777;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 36px;
|
||
margin-top: 8px;
|
||
font-weight: bold;
|
||
color: #222;
|
||
}
|
||
|
||
.winrate {
|
||
color: #2fbf71;
|
||
}
|
||
|
||
.mmr {
|
||
color: #f5a623;
|
||
}
|
||
|
||
/* ===== 表格 ===== */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
font-size: 18px;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
thead {
|
||
background: #f0f1f5;
|
||
}
|
||
|
||
th, td {
|
||
padding: 8px 6px;
|
||
text-align: center;
|
||
}
|
||
|
||
th {
|
||
color: #666;
|
||
font-weight: normal;
|
||
}
|
||
|
||
tbody tr:nth-child(even) {
|
||
background: #fafbfe;
|
||
}
|
||
|
||
tbody tr:nth-child(odd) {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.win {
|
||
color: #2fbf71;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.lose {
|
||
color: #e65050;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.mmr-up {
|
||
color: #2fbf71;
|
||
}
|
||
|
||
.mmr-down {
|
||
color: #e65050;
|
||
}
|
||
|
||
.mvp {
|
||
color: #f5a623;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.time-col {
|
||
width: 170px;
|
||
font-size: 16px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.duration-col {
|
||
width: 92px;
|
||
}
|
||
|
||
.kungfu-col {
|
||
width: 150px;
|
||
}
|
||
|
||
.result-col {
|
||
width: 64px;
|
||
}
|
||
|
||
.score-col {
|
||
width: 104px;
|
||
}
|
||
|
||
.grade-col {
|
||
width: 96px;
|
||
}
|
||
|
||
.mvp-col {
|
||
width: 58px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="panel">
|
||
|
||
<!-- 角色信息 -->
|
||
<div class="header">
|
||
<div>
|
||
<div class="role-name">{{ roleName }}</div>
|
||
<div class="sub-info">
|
||
{{ serverName }} ｜ {{ forceName }} ｜ {{ campName }} ｜ {{ tongName }}
|
||
</div>
|
||
</div>
|
||
<div class="sub-info">
|
||
角色ID：{{ roleId }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 头像 + 当前 3v3 表现 -->
|
||
<div class="stats-wrap">
|
||
|
||
<!-- 右侧数据 -->
|
||
<div class="stats">
|
||
<div class="stat-box">
|
||
<div class="stat-title">名剑积分</div>
|
||
<div class="stat-value mmr">{{ performance['3v3'].mmr }}</div>
|
||
</div>
|
||
|
||
<div class="stat-box">
|
||
<div class="stat-title">名剑段位</div>
|
||
<div class="stat-value">{{ performance['3v3'].grade }}</div>
|
||
</div>
|
||
|
||
<div class="stat-box">
|
||
<div class="stat-title">胜率</div>
|
||
<div class="stat-value winrate">{{ performance['3v3'].winRate }}%</div>
|
||
</div>
|
||
|
||
<div class="stat-box">
|
||
<div class="stat-title">总场数</div>
|
||
<div class="stat-value">{{ performance['3v3'].totalCount }}</div>
|
||
</div>
|
||
|
||
<div class="stat-box">
|
||
<div class="stat-title">MVP次数</div>
|
||
<div class="stat-value">{{ performance['3v3'].mvpCount }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 对战记录表 -->
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="time-col">开始时间</th>
|
||
<th class="duration-col">对战时长</th>
|
||
<th class="kungfu-col">心法</th>
|
||
<th class="result-col">胜负</th>
|
||
<th class="score-col">积分变化</th>
|
||
<th class="score-col">最终积分</th>
|
||
<th class="grade-col">平均段位</th>
|
||
<th class="mvp-col">MVP</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% for m in history %}
|
||
<tr>
|
||
<td class="time-col start-time" data-ts="{{ m.startTime }}">{{ m.startTime }}</td>
|
||
<td class="duration-col">{{ m.endTime - m.startTime }}</td>
|
||
<td class="kungfu-col">{{ m.kungfu }}</td>
|
||
<td class="result-col {{ 'win' if m.won else 'lose' }}">{{ '胜' if m.won else '负' }}</td>
|
||
<td class="score-col {{ 'mmr-up' if m.mmr > 0 else 'mmr-down' }}">
|
||
{{ m.mmr }}
|
||
</td>
|
||
<td class="score-col">{{ m.totalMmr }}</td>
|
||
<td class="grade-col">{{ m.avgGrade }}</td>
|
||
<td class="mvp-col {{ 'mvp' if m.mvp else '' }}">
|
||
{{ '是' if m.mvp else '-' }}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
<script>
|
||
document.querySelectorAll(".start-time").forEach(function (cell) {
|
||
var raw = cell.dataset.ts || cell.textContent.trim();
|
||
var ts = Number(raw);
|
||
if (!Number.isFinite(ts) || ts <= 0) {
|
||
cell.textContent = raw || "-";
|
||
return;
|
||
}
|
||
|
||
var date = new Date(ts * 1000);
|
||
var pad = function (n) { return String(n).padStart(2, "0"); };
|
||
cell.textContent = [
|
||
date.getFullYear(),
|
||
pad(date.getMonth() + 1),
|
||
pad(date.getDate())
|
||
].join("-") + " " + [
|
||
pad(date.getHours()),
|
||
pad(date.getMinutes()),
|
||
pad(date.getSeconds())
|
||
].join(":");
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|