11
This commit is contained in:
@@ -0,0 +1,240 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
/* 胜负标签 */
|
||||
.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">
|
||||
|
||||
<!-- 右上角标签（evaluate + MVP PNG） -->
|
||||
<div class="tag-area">
|
||||
|
||||
{% if m.evaluateUrlV3 %}
|
||||
<img src="{{ m.evaluateUrlV3 }}"
|
||||
style="height: 32px; border-radius: 6px;">
|
||||
{% endif %}
|
||||
|
||||
{% if m.mvpUrlV3 %}
|
||||
<img src="{{ m.mvpUrlV3 }}"
|
||||
style="height: 32px; border-radius: 6px;">
|
||||
{% 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>
|
||||
Reference in New Issue
Block a user