254 lines
6.3 KiB
HTML
254 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>王者荣耀 — 对局列表</title>
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||
background: #f1f2f6;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
font-size: 32px;
|
||
margin-bottom: 25px;
|
||
color: #222;
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* 卡片基础样式 */
|
||
.match-card {
|
||
display: flex;
|
||
border-radius: 18px;
|
||
padding: 16px;
|
||
margin-bottom: 18px;
|
||
position: relative;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
/* 背景色 */
|
||
.win { background: #e5f4ff; }
|
||
.lose { background: #ffe9e9; }
|
||
.draw { background: #f1f2f3; }
|
||
|
||
.hero-box img {
|
||
width: 76px;
|
||
height: 76px;
|
||
border-radius: 10px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.hero-desc {
|
||
text-align: center;
|
||
margin-top: 8px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
padding-left: 15px;
|
||
font-size: 16px;
|
||
color: #333;
|
||
position: relative;
|
||
}
|
||
|
||
/* 右上角标签区域 */
|
||
.tag-area {
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 16px;
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* MVP 标签 */
|
||
.mvp-tag-win {
|
||
background: #b69f1c;
|
||
color: white;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.mvp-tag-lose {
|
||
background: #888;
|
||
color: white;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 胜负标签 */
|
||
.result-tag {
|
||
padding: 6px 12px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
.win-tag { background: #4a90e2; }
|
||
.lose-tag { background: #d93939; }
|
||
.draw-tag { background: #777; }
|
||
|
||
/* 对局时间 + 对局类型 */
|
||
.info-line-time {
|
||
font-size: 18px;
|
||
color: #000;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* 段位 + 星星 */
|
||
.rank-stars {
|
||
font-size: 16px;
|
||
color: #2ecc71;
|
||
font-weight: bold;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* KDA 信息 */
|
||
.kda-info {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #555;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* 巅峰赛积分 */
|
||
.master-score {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #056a3a;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* 评分显示 */
|
||
.score-badge {
|
||
position: absolute;
|
||
right: 16px;
|
||
bottom: 16px;
|
||
background: #ffd700;
|
||
color: #222;
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
padding: 6px 14px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* 新增成就标签 - 优化显示 */
|
||
.achievement-tags {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.achievement-tags span {
|
||
background: rgba(0, 0, 0, 0.6); /* 背景更深 */
|
||
color: #fff; /* 白色文字 */
|
||
font-weight: bold; /* 加粗文字 */
|
||
padding: 6px 10px; /* 内边距更大 */
|
||
border-radius: 14px; /* 圆角更明显 */
|
||
font-size: 14px; /* 略大字体 */
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 文字阴影增强可读性 */
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
<h1>王者荣耀 — 对局列表</h1>
|
||
|
||
{% for m in data %}
|
||
|
||
<div class="match-card
|
||
{% if m.gameresult == 1 %}win
|
||
{% elif m.gameresult == 2 %}lose
|
||
{% else %}draw
|
||
{% endif %}">
|
||
|
||
<div class="hero-box">
|
||
<img src="{{ m.heroIcon }}">
|
||
<div class="hero-desc">{{ m.desc }}</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- 右上角标签（MVP + 胜负） -->
|
||
<div class="tag-area">
|
||
{% if m.mvpcnt == 1 %}
|
||
<div class="mvp-tag-win">胜方 MVP</div>
|
||
{% elif m.losemvp == 1 %}
|
||
<div class="mvp-tag-lose">败方 MVP</div>
|
||
{% endif %}
|
||
|
||
<div class="result-tag
|
||
{% if m.gameresult == 1 %}win-tag
|
||
{% elif m.gameresult == 2 %}lose-tag
|
||
{% else %}draw-tag
|
||
{% endif %}">
|
||
{% if m.gameresult == 1 %}胜利
|
||
{% elif m.gameresult == 2 %}失败
|
||
{% else %}平局
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 对局时间 + 对局类型 -->
|
||
<div class="info-line-time">
|
||
{{ m.gametime }} · {{ m.mapName }}
|
||
</div>
|
||
|
||
<!-- 段位 + 星星 -->
|
||
<div class="rank-stars">
|
||
{{ m.roleJobName }} · ⭐{{ m.stars }}
|
||
</div>
|
||
|
||
<!-- 巅峰赛积分（原 KDA 位置） -->
|
||
<div class="master-score">
|
||
巅峰赛积分 {{ m.oldMasterMatchScore }} → {{ m.newMasterMatchScore }}
|
||
</div>
|
||
|
||
<!-- KDA 信息（原巅峰赛位置） -->
|
||
<div class="kda-info">
|
||
击杀 {{ m.killcnt }} 死亡 {{ m.deadcnt }} 助攻 {{ m.assistcnt }} 时长 {{ m.time_str }}
|
||
</div>
|
||
|
||
<!-- 新增成就显示 -->
|
||
<div class="achievement-tags">
|
||
{% if m.godLikeCnt > 0 %}<span>超神 × {{ m.godLikeCnt }}</span>{% endif %}
|
||
{% if m.firstBlood > 0 %}<span>一血</span>{% endif %}
|
||
{% if m.hero1TripleKillCnt > 0 %}<span>三杀 × {{ m.hero1TripleKillCnt }}</span>{% endif %}
|
||
{% if m.hero1UltraKillCnt > 0 %}<span>四杀 × {{ m.hero1UltraKillCnt }}</span>{% endif %}
|
||
{% if m.hero1RampageCnt > 0 %}<span>五杀 × {{ m.hero1RampageCnt }}</span>{% endif %}
|
||
</div>
|
||
|
||
<!-- 评分放右下角 -->
|
||
<div class="score-badge">
|
||
评分 {{ m.gradeGame }}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{% endfor %}
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|