250 lines
4.8 KiB
HTML
250 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>剑网三 3v3 战绩面板</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: 22px;
|
||
}
|
||
|
||
thead {
|
||
background: #f0f1f5;
|
||
}
|
||
|
||
th, td {
|
||
padding: 10px;
|
||
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;
|
||
}
|
||
</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="avatar-box">
|
||
<img src="{{ showAvatar }}" alt="avatar">
|
||
</div>
|
||
|
||
<!-- 右侧数据 -->
|
||
<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>对战时长</th>
|
||
<th>心法</th>
|
||
<th>胜负</th>
|
||
<th>积分变化</th>
|
||
<th>最终积分</th>
|
||
<th>平均段位</th>
|
||
<th>MVP</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% for m in history %}
|
||
<tr>
|
||
<td>{{ m.endTime - m.startTime }}</td>
|
||
<td>{{ m.kungfu }}</td>
|
||
<td class="{{ 'win' if m.won else 'lose' }}">{{ '胜' if m.won else '负' }}</td>
|
||
<td class="{{ 'mmr-up' if m.mmr > 0 else 'mmr-down' }}">
|
||
{{ m.mmr }}
|
||
</td>
|
||
<td>{{ m.totalMmr }}</td>
|
||
<td>{{ m.avgGrade }}</td>
|
||
<td class="{{ 'mvp' if m.mvp else '' }}">
|
||
{{ '是' if m.mvp else '-' }}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|