11
This commit is contained in:
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user