This commit is contained in:
qsc
2025-12-21 19:04:06 +08:00
parent 204f2ff8a6
commit 155ba3c973
5 changed files with 342 additions and 225 deletions
+116 -220
View File
@@ -1,249 +1,145 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>剑网三 3v3 战绩面板</title>
<meta charset="UTF-8">
<title>角色奇遇一览</title>
<style>
body {
margin: 0;
padding: 24px;
background: #f5f7fb;
color: #2c2c33;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
<style>
body {
margin: 0;
padding: 20px;
background: #f2f3f7;
color: #2b2b2b;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
.section {
margin-bottom: 32px;
}
.panel {
width: 1100px;
margin: auto;
background: #ffffff;
border-radius: 12px;
padding: 22px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.section-title {
font-size: 36px;
font-weight: bold;
margin-bottom: 16px;
border-left: 4px solid #4f7cff;
padding-left: 10px;
color: #1f2a44;
}
/* ===== 头部 ===== */
.header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
padding-bottom: 14px;
}
.card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.role-name {
font-size: 36px;
font-weight: bold;
color: #1f1f1f;
}
.card {
background: #ffffff;
border-radius: 8px;
padding: 16px 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
.sub-info {
margin-top: 6px;
font-size: 18px;
color: #666;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 90px;
}
/* ===== 头像 + 核心数据 ===== */
.stats-wrap {
display: flex;
gap: 24px;
margin: 26px 0;
align-items: stretch;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* 头像区域 */
.avatar-box {
width: 280px;
height: 360px;
background: #e9ebf1;
border-radius: 16px;
overflow: hidden;
flex-shrink: 0;
}
.event {
font-size: 28px;
font-weight: 600;
margin-bottom: 6px;
color: #2b3a67;
}
.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;
}
.time {
font-size: 22px;
color: #7a7f99;
}
/* 单个数据块 */
.stat-box {
background: #f5f6fa;
border-radius: 12px;
padding: 20px;
text-align: center;
}
.empty {
color: #999;
font-size: 14px;
padding: 10px 0;
}
.stat-title {
font-size: 26px;
color: #777;
}
@media (max-width: 1000px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
}
.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>
@media (max-width: 600px) {
.card-container {
grid-template-columns: repeat(1, 1fr);
}
}
</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 class="section">
<div class="section-title">
普通奇遇({{ ptqy|length if ptqy else 0 }}
</div>
{% if ptqy %}
<div class="card-container">
{% for item in ptqy %}
<div class="card">
<div class="event">{{ item.event }}</div>
<div class="time">{{ item.time }}</div>
</div>
{% endfor %}
</div>
<div class="sub-info">
角色ID{{ roleId }}
</div>
{% else %}
<div class="empty">暂无普通奇遇</div>
{% endif %}
</div>
<!-- 头像 + 当前 3v3 表现 -->
<div class="stats-wrap">
<!-- 左侧头像 -->
<div class="avatar-box">
<img src="{{ showAvatar }}" alt="avatar">
<!-- 绝世奇遇 -->
<div class="section">
<div class="section-title">
绝世奇遇({{ jsqy|length if jsqy else 0 }}
</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>
{% if jsqy %}
<div class="card-container">
{% for item in jsqy %}
<div class="card">
<div class="event">{{ item.event }}</div>
<div class="time">{{ item.time }}</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty">暂无绝世奇遇</div>
{% endif %}
</div>
<!-- 对战记录表 -->
<table>
<thead>
<tr>
<th>对战时长</th>
<th>心法</th>
<th>胜负</th>
<th>积分变化</th>
<th>最终积分</th>
<th>平均段位</th>
<th>MVP</th>
</tr>
</thead>
<!-- 宠物奇遇 -->
<div class="section">
<div class="section-title">
宠物奇遇({{ cwqy|length if cwqy else 0 }}
</div>
{% if cwqy %}
<div class="card-container">
{% for item in cwqy %}
<div class="card">
<div class="event">{{ item.event }}</div>
<div class="time">{{ item.time }}</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty">暂无宠物奇遇</div>
{% endif %}
</div>
<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>