697 lines
20 KiB
HTML
697 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<title>{{ name }} - 万宝楼行情</title>
|
||
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: "Microsoft YaHei", Arial, sans-serif;
|
||
background: #f1f2f6;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
color: #222;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.goods-image {
|
||
display: block;
|
||
width: 100%;
|
||
border-radius: 16px;
|
||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.goods-desc {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
color: #444;
|
||
margin: 0 0 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
.meta-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 20px 40px;
|
||
font-size: 18px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.meta-row .price {
|
||
color: #d93939;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.table-wrapper {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 20px;
|
||
align-items: start;
|
||
}
|
||
|
||
.table-card {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.table-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
text-align: center;
|
||
color: #d93939;
|
||
}
|
||
|
||
.table-scroll {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
min-width: 420px;
|
||
border-collapse: collapse;
|
||
background: #ffffff;
|
||
text-align: left;
|
||
}
|
||
|
||
thead {
|
||
background: #d93939;
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 12px 10px;
|
||
border-bottom: 1px solid #eeeeee;
|
||
font-size: 15px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
th {
|
||
font-weight: 700;
|
||
}
|
||
|
||
tbody tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background: #fff2f2;
|
||
}
|
||
|
||
.server-col {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.price-col {
|
||
color: #d93939;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.empty-row {
|
||
height: 80px;
|
||
padding: 28px 10px;
|
||
text-align: center;
|
||
color: #999999;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* ===== 万宝楼公示（蓝色） ===== */
|
||
|
||
.table-card.notice .table-title {
|
||
color: #1e6bd6;
|
||
}
|
||
|
||
.table-card.notice .price-col {
|
||
color: #1e6bd6;
|
||
}
|
||
|
||
.table-card.notice thead {
|
||
background: #1e6bd6;
|
||
}
|
||
|
||
/* ===== 万宝楼在售（绿色） ===== */
|
||
|
||
.table-card.sale .table-title {
|
||
color: #2e8b57;
|
||
}
|
||
|
||
.table-card.sale .price-col {
|
||
color: #2e8b57;
|
||
}
|
||
|
||
.table-card.sale thead {
|
||
background: #2e8b57;
|
||
}
|
||
|
||
/* ===== 查询区服（紫色） ===== */
|
||
|
||
.table-card.query .table-title {
|
||
color: #8a4fd3;
|
||
}
|
||
|
||
.table-card.query .price-col {
|
||
color: #8a4fd3;
|
||
}
|
||
|
||
.table-card.query thead {
|
||
background: #8a4fd3;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.table-wrapper {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
body {
|
||
padding: 12px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.goods-desc {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.meta-row {
|
||
gap: 12px 20px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.table-wrapper {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
{#
|
||
先根据分组名称识别对应数据。
|
||
|
||
查询区服不固定使用 list[3]：
|
||
除电信区、双线区、无界区、公示期、出售期外，
|
||
其他分组都视为查询区服。
|
||
|
||
即使某个分组不存在，对应表格区域仍然会显示。
|
||
#}
|
||
|
||
{% set ns = namespace(
|
||
notice=none,
|
||
sale=none,
|
||
query=none,
|
||
telecom=none,
|
||
dual=none,
|
||
boundless=none
|
||
) %}
|
||
|
||
{% for group in list %}
|
||
{% if group.name == "公示期" %}
|
||
{% set ns.notice = group %}
|
||
|
||
{% elif group.name == "出售期" %}
|
||
{% set ns.sale = group %}
|
||
|
||
{% elif group.name == "电信区" %}
|
||
{% set ns.telecom = group %}
|
||
|
||
{% elif group.name == "双线区" %}
|
||
{% set ns.dual = group %}
|
||
|
||
{% elif group.name == "无界区" %}
|
||
{% set ns.boundless = group %}
|
||
|
||
{% elif ns.query is none %}
|
||
{% set ns.query = group %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
|
||
<div class="container">
|
||
|
||
<h1>
|
||
{{ name }}
|
||
{% if alias %}
|
||
（{{ alias }}）
|
||
{% endif %}
|
||
</h1>
|
||
|
||
{% if view %}
|
||
<img
|
||
src="{{ view }}"
|
||
alt="{{ name }}"
|
||
class="goods-image"
|
||
>
|
||
{% endif %}
|
||
|
||
{% if desc %}
|
||
<p class="goods-desc">{{ desc }}</p>
|
||
{% endif %}
|
||
|
||
<div class="meta-row">
|
||
<span>分类：{{ category }}</span>
|
||
<span>发售时间：{{ date }}</span>
|
||
<span class="price">参考价格：{{ retail }} 元</span>
|
||
</div>
|
||
|
||
<div class="table-wrapper">
|
||
|
||
<!-- ==================================================
|
||
1. 万宝楼公示
|
||
区域始终保留
|
||
=================================================== -->
|
||
|
||
<div class="table-card notice">
|
||
<div class="table-title">万宝楼公示</div>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>区服</th>
|
||
<th>服务器</th>
|
||
<th>价格</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% if ns.notice and ns.notice.list %}
|
||
|
||
{% for item in ns.notice.list %}
|
||
<tr>
|
||
<td>{{ item.date }}</td>
|
||
|
||
<td>{{ item.zone }}</td>
|
||
|
||
<td class="server-col">
|
||
{{ item.server }}
|
||
</td>
|
||
|
||
<td class="price-col">
|
||
{{ item.value }} 元
|
||
</td>
|
||
|
||
<td class="server-col">
|
||
公示
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
|
||
{% else %}
|
||
|
||
<tr>
|
||
<td colspan="5" class="empty-row">
|
||
暂无公示数据
|
||
</td>
|
||
</tr>
|
||
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ==================================================
|
||
2. 万宝楼在售
|
||
区域始终保留
|
||
=================================================== -->
|
||
|
||
<div class="table-card sale">
|
||
<div class="table-title">万宝楼在售</div>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>区服</th>
|
||
<th>服务器</th>
|
||
<th>价格</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% if ns.sale and ns.sale.list %}
|
||
|
||
{% for item in ns.sale.list %}
|
||
<tr>
|
||
<td>{{ item.date }}</td>
|
||
|
||
<td>{{ item.zone }}</td>
|
||
|
||
<td class="server-col">
|
||
{{ item.server }}
|
||
</td>
|
||
|
||
<td class="price-col">
|
||
{{ item.value }} 元
|
||
</td>
|
||
|
||
<td class="server-col">
|
||
在售
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
|
||
{% else %}
|
||
|
||
<tr>
|
||
<td colspan="5" class="empty-row">
|
||
暂无在售数据
|
||
</td>
|
||
</tr>
|
||
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ==================================================
|
||
3. 查询区服
|
||
没有查询区服时，表格仍然保留
|
||
=================================================== -->
|
||
|
||
<div class="table-card query">
|
||
<div class="table-title">
|
||
查询区服
|
||
{% if ns.query %}
|
||
：{{ ns.query.name }}
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>服务器</th>
|
||
<th>价格</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% if ns.query and ns.query.list %}
|
||
|
||
{% for item in ns.query.list %}
|
||
<tr>
|
||
<td>{{ item.date }}</td>
|
||
|
||
<td class="server-col">
|
||
{{ item.server }}
|
||
</td>
|
||
|
||
<td class="price-col">
|
||
{{ item.value }} 元
|
||
</td>
|
||
|
||
<td class="server-col">
|
||
{% if item.sale == 1 %}
|
||
出售
|
||
{% elif item.sale == 2 %}
|
||
收购
|
||
{% elif item.sale == 3 %}
|
||
想出
|
||
{% elif item.sale == 4 %}
|
||
想收
|
||
{% elif item.sale == 5 %}
|
||
成交
|
||
{% elif item.sale == 6 %}
|
||
正出
|
||
{% elif item.sale == 7 %}
|
||
公示
|
||
{% else %}
|
||
未知
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
|
||
{% else %}
|
||
|
||
<tr>
|
||
<td colspan="4" class="empty-row">
|
||
暂无查询区服数据
|
||
</td>
|
||
</tr>
|
||
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ==================================================
|
||
4. 电信区
|
||
区域始终保留
|
||
=================================================== -->
|
||
|
||
<div class="table-card">
|
||
<div class="table-title">电信区</div>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>服务器</th>
|
||
<th>价格</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% if ns.telecom and ns.telecom.list %}
|
||
|
||
{% for item in ns.telecom.list %}
|
||
<tr>
|
||
<td>{{ item.date }}</td>
|
||
|
||
<td class="server-col">
|
||
{{ item.server }}
|
||
</td>
|
||
|
||
<td class="price-col">
|
||
{{ item.value }} 元
|
||
</td>
|
||
|
||
<td class="server-col">
|
||
{% if item.sale == 1 %}
|
||
出售
|
||
{% elif item.sale == 2 %}
|
||
收购
|
||
{% elif item.sale == 3 %}
|
||
想出
|
||
{% elif item.sale == 4 %}
|
||
想收
|
||
{% elif item.sale == 5 %}
|
||
成交
|
||
{% elif item.sale == 6 %}
|
||
正出
|
||
{% elif item.sale == 7 %}
|
||
公示
|
||
{% else %}
|
||
未知
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
|
||
{% else %}
|
||
|
||
<tr>
|
||
<td colspan="4" class="empty-row">
|
||
暂无电信区数据
|
||
</td>
|
||
</tr>
|
||
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ==================================================
|
||
5. 双线区
|
||
区域始终保留
|
||
=================================================== -->
|
||
|
||
<div class="table-card">
|
||
<div class="table-title">双线区</div>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>服务器</th>
|
||
<th>价格</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% if ns.dual and ns.dual.list %}
|
||
|
||
{% for item in ns.dual.list %}
|
||
<tr>
|
||
<td>{{ item.date }}</td>
|
||
|
||
<td class="server-col">
|
||
{{ item.server }}
|
||
</td>
|
||
|
||
<td class="price-col">
|
||
{{ item.value }} 元
|
||
</td>
|
||
|
||
<td class="server-col">
|
||
{% if item.sale == 1 %}
|
||
出售
|
||
{% elif item.sale == 2 %}
|
||
收购
|
||
{% elif item.sale == 3 %}
|
||
想出
|
||
{% elif item.sale == 4 %}
|
||
想收
|
||
{% elif item.sale == 5 %}
|
||
成交
|
||
{% elif item.sale == 6 %}
|
||
正出
|
||
{% elif item.sale == 7 %}
|
||
公示
|
||
{% else %}
|
||
未知
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
|
||
{% else %}
|
||
|
||
<tr>
|
||
<td colspan="4" class="empty-row">
|
||
暂无双线区数据
|
||
</td>
|
||
</tr>
|
||
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ==================================================
|
||
6. 无界区
|
||
区域始终保留
|
||
=================================================== -->
|
||
|
||
<div class="table-card">
|
||
<div class="table-title">无界区</div>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>服务器</th>
|
||
<th>价格</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
{% if ns.boundless and ns.boundless.list %}
|
||
|
||
{% for item in ns.boundless.list %}
|
||
<tr>
|
||
<td>{{ item.date }}</td>
|
||
|
||
<td class="server-col">
|
||
{{ item.server }}
|
||
</td>
|
||
|
||
<td class="price-col">
|
||
{{ item.value }} 元
|
||
</td>
|
||
|
||
<td class="server-col">
|
||
{% if item.sale == 1 %}
|
||
出售
|
||
{% elif item.sale == 2 %}
|
||
收购
|
||
{% elif item.sale == 3 %}
|
||
想出
|
||
{% elif item.sale == 4 %}
|
||
想收
|
||
{% elif item.sale == 5 %}
|
||
成交
|
||
{% elif item.sale == 6 %}
|
||
正出
|
||
{% elif item.sale == 7 %}
|
||
公示
|
||
{% else %}
|
||
未知
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
|
||
{% else %}
|
||
|
||
<tr>
|
||
<td colspan="4" class="empty-row">
|
||
暂无无界区数据
|
||
</td>
|
||
</tr>
|
||
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html> |