This commit is contained in:
qsc
2025-12-27 21:41:19 +08:00
parent 04ce36f017
commit 4bd6fc7c3e
5 changed files with 250 additions and 130 deletions
+93
View File
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>未来战场日程表</title>
<style>
body {
margin: 0; padding: 20px;
background: #f5f7fb; color: #1f2333;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
.calendar {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.calendar th {
background: #4f7cff;
color: white;
padding: 10px 0;
font-size: 18px;
}
.calendar td {
border: 1px solid #dce1eb;
vertical-align: top;
padding: 8px;
background: #ffffff;
}
.today {
background: #fff6d1;
border: 2px solid #ffb100;
}
.date-num {
font-weight: bold;
font-size: 16px;
margin-bottom: 4px;
display: block;
}
.item-block {
font-size: 12px;
margin-bottom: 6px;
padding: 4px;
border-radius: 4px;
background: #f0f3fa;
}
.item-block span {
font-weight: bold;
}
</style>
</head>
<body>
<h1 style="margin-bottom:20px;">未来战场日程表</h1>
<table class="calendar">
<thead>
<tr>
<th></th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr>
</thead>
<tbody>
{% for week in items %}
<tr>
{% for day in week %}
{% if day.date %}
<td class="{% if day.is_today %}today{% endif %}">
<span class="date-num">{{ day.date }}</span>
{% for obj in day.items %}
<div class="item-block">
<div><span>战场:</span>{{ obj.battle }}</div>
<div><span>战役:</span>{{ obj.war }}</div>
<div><span>运车:</span>{{ obj.orecar }}</div>
<div><span>门派:</span>{{ obj.school }}</div>
<div><span>救援:</span>{{ obj.rescue }}</div>
{% if obj.card %}
<div><span>卡牌:</span>{{ obj.card | join('、') }}</div>
{% endif %}
</div>
{% endfor %}
</td>
{% else %}
<td style="background:#f0f2f7;"></td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
+105 -123
View File
@@ -1,145 +1,127 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>角色奇遇一览</title>
<style>
body {
margin: 0;
padding: 24px;
background: #f5f7fb;
color: #2c2c33;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
<meta charset="UTF-8">
<title>未来战场日历</title>
.section {
margin-bottom: 32px;
}
<style>
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
background: #f1f2f6;
padding: 20px;
margin: 0;
}
.section-title {
font-size: 36px;
font-weight: bold;
margin-bottom: 16px;
border-left: 4px solid #4f7cff;
padding-left: 10px;
color: #1f2a44;
}
h1 {
text-align: center;
font-size: 32px;
font-weight: 800;
margin-bottom: 25px;
color: #222;
}
.card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.calendar {
width: 100%;
max-width: 1200px;
margin: 0 auto;
border-collapse: collapse;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.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;
.calendar th {
background: #d93939;
color: white;
padding: 12px;
font-size: 18px;
border: 1px solid #eee;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 90px;
}
.calendar td {
vertical-align: top;
padding: 6px;
width: 14.2%;
border: 1px solid #eee;
min-height: 120px;
background: #fff;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.date-label {
font-size: 14px;
color: #666;
font-weight: bold;
margin-bottom: 6px;
}
.event {
font-size: 28px;
font-weight: 600;
margin-bottom: 6px;
color: #2b3a67;
}
.event-card {
background: #fff7f7;
border: 1px solid #f0dada;
border-radius: 6px;
padding: 6px;
margin-top: 6px;
font-size: 14px;
line-height: 1.4em;
}
.time {
font-size: 22px;
color: #7a7f99;
}
.event-title {
font-weight: bold;
color: #222;
}
.empty {
color: #999;
font-size: 14px;
padding: 10px 0;
}
/* 鼠标悬停卡片高亮 */
.event-card:hover {
background: #ffeaea;
}
@media (max-width: 1000px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* 当日高亮,可选 */
.today {
background: #fef3c7;
}
@media (max-width: 600px) {
.card-container {
grid-template-columns: repeat(1, 1fr);
}
}
</style>
</style>
</head>
<body>
<!-- 普通奇遇 -->
<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>
{% else %}
<div class="empty">暂无普通奇遇</div>
{% endif %}
</div>
<h1>未来战场日历</h1>
<!-- 绝世奇遇 -->
<div class="section">
<div class="section-title">
绝世奇遇({{ jsqy|length if jsqy else 0 }}
</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 class="calendar">
<!-- 宠物奇遇 -->
<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>
<thead>
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
</thead>
<tbody>
{% for week in calendar_rows %}
<tr>
{% for cell in week %}
<td class="{% if cell.is_today %}today{% endif %}">
{% if cell.date %}
<div class="date-label">{{ cell.date }}</div>
{% for ev in cell.items %}
<div class="event-card">
<div class="event-title">{{ ev.war }}</div>
<div>{{ ev.battle }}</div>
</div>
{% endfor %}
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>