213 lines
9.0 KiB
HTML
213 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>剑网3交易行价格查询</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.container {
|
|
width: 1280px;
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
overflow: hidden;
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, #4a90e2 0%, #2a5298 100%);
|
|
color: white;
|
|
padding: 25px 30px;
|
|
text-align: center;
|
|
}
|
|
.header h1 {
|
|
font-size: 32px;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
}
|
|
.server-info { font-size: 18px; opacity: 0.9; }
|
|
.summary {
|
|
background-color: #f8f9fa;
|
|
padding: 15px 30px;
|
|
font-size: 16px;
|
|
color: #495057;
|
|
border-bottom: 1px solid #e9ecef;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.items-count { font-weight: 600; color: #4a90e2; }
|
|
.update-time { color: #6c757d; font-size: 14px; }
|
|
.table-container {
|
|
padding: 0 30px 30px 30px;
|
|
overflow-x: auto;
|
|
text-align: center;
|
|
}
|
|
table {
|
|
width: 100%; border-collapse: collapse; margin-top: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
border-radius: 8px; overflow: hidden;
|
|
}
|
|
th {
|
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
|
color: white; padding: 16px 20px; text-align: left;
|
|
font-weight: 500; font-size: 16px; position: sticky; top: 0;
|
|
}
|
|
td {
|
|
padding: 14px 20px; border-bottom: 1px solid #e9ecef;
|
|
font-size: 18px; color: #495057;
|
|
}
|
|
tr:nth-child(even) { background-color: #f8f9fa; }
|
|
tr:hover { background-color: #e9f7fe; transition: background-color 0.2s; }
|
|
.item-name { font-weight: 500; color: #2c3e50; max-width: 500px; }
|
|
.price { text-align: right; color: #e74c3c; font-weight: 600; font-size: 16px; }
|
|
.footer {
|
|
background-color: #343a40; color: #f8f9fa;
|
|
padding: 15px 30px; text-align: center; font-size: 14px;
|
|
}
|
|
.item-icon {
|
|
width: 20px; height: 20px; margin-right: 8px;
|
|
vertical-align: middle; border-radius: 4px;
|
|
}
|
|
.chart-container {
|
|
width: 100%; max-width: 1200px; margin: 30px auto;
|
|
padding: 18px; background:#fff; border-radius:10px;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
|
|
}
|
|
.chart-container h2 { font-size:18px; color:#243b55; margin-bottom: 15px; text-align:center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h1>剑网3交易行价格查询</h1>
|
|
<div class="server-info">服务器: {{ server }}</div>
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
<div class="summary">
|
|
<div class="items-count">共找到 <strong>{{ items|length }}</strong> 件物品</div>
|
|
<div class="update-time">数据更新时间: {{ update_time }}</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 40%; text-align: center">物品名称</th>
|
|
<th style="width: 25%; text-align: center;">低价</th>
|
|
<th style="width: 15%; text-align: center;">数量</th>
|
|
<th style="width: 20%; text-align: center;">数据更新时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in items %}
|
|
<tr>
|
|
<td class="item-name">
|
|
<img src="{{ item.IconID }}" alt="icon" class="item-icon">
|
|
{{ item.Name }}
|
|
</td>
|
|
<td class="AvgPrice">{{ item.AvgPrice }}</td>
|
|
<td class="SampleSize">{{ item.SampleSize }}</td>
|
|
<td class="Date">{{ item.Date }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- ====== SVG 趋势图（只显示 wbl 数据） ====== -->
|
|
<div class="chart-container">
|
|
<h2>金价走势（wbl 数据）</h2>
|
|
|
|
{% set width = 1100 %}
|
|
{% set height = 360 %}
|
|
{% set margin = 40 %}
|
|
{% set inner_w = width - margin*2 %}
|
|
{% set inner_h = height - margin*2 %}
|
|
|
|
{% if not wbl_dates or not wbl_prices %}
|
|
<div style="padding:30px; text-align:center; color:#6c757d;">无 wbl 数据可显示</div>
|
|
{% else %}
|
|
{% set n = wbl_prices | length %}
|
|
{% set min_price = wbl_min if wbl_min is defined else (wbl_prices | min) %}
|
|
{% set max_price = wbl_max if wbl_max is defined else (wbl_prices | max) %}
|
|
{% if min_price == max_price %}
|
|
{% set min_price = min_price - 1 %}
|
|
{% set max_price = max_price + 1 %}
|
|
{% endif %}
|
|
|
|
{% set points = [] %}
|
|
{% for i in range(n) %}
|
|
{% set x = margin + (inner_w * i) / (n - 1 if n>1 else 1) %}
|
|
{% set norm = (wbl_prices[i] - min_price) / (max_price - min_price) %}
|
|
{% set y = margin + (inner_h * (1 - norm)) %}
|
|
{% set _ = points.append("%0.2f,%0.2f" % (x, y)) %}
|
|
{% endfor %}
|
|
|
|
<svg width="{{ width }}" height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}">
|
|
<!-- 背景 -->
|
|
<rect x="0" y="0" width="{{ width }}" height="{{ height }}" rx="10" fill="#ffffff" stroke="rgba(0,0,0,0.04)"></rect>
|
|
|
|
<!-- 网格线 + y 轴标签 -->
|
|
{% set grid_lines = 5 %}
|
|
{% for gi in range(grid_lines) %}
|
|
{% set gy = margin + (inner_h * gi) / (grid_lines - 1 if grid_lines>1 else 1) %}
|
|
<line x1="{{ margin }}" y1="{{ gy }}" x2="{{ width - margin }}" y2="{{ gy }}" stroke="#eef4fb" stroke-width="1"></line>
|
|
{% set price_label = max_price - ( (max_price - min_price) * gi / (grid_lines - 1 if grid_lines>1 else 1) ) %}
|
|
<text x="8" y="{{ gy + 4 }}" font-size="12" fill="#6c757d">{{ "%0.0f"|format(price_label) }}</text>
|
|
{% endfor %}
|
|
|
|
<!-- x 轴标签 -->
|
|
{% set label_step = (n // 8) if n > 8 else 1 %}
|
|
{% for i in range(n) %}
|
|
{% set x = margin + (inner_w * i) / (n - 1 if n>1 else 1) %}
|
|
{% if i % label_step == 0 or i == n-1 %}
|
|
<text x="{{ x }}" y="{{ height - 10 }}" font-size="11" fill="#6c757d" text-anchor="middle">
|
|
{{ wbl_dates[i] }}
|
|
</text>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<!-- 渐变填充 -->
|
|
<defs>
|
|
<linearGradient id="gFill" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#dcefff" stop-opacity="0.7" />
|
|
<stop offset="100%" stop-color="#dcefff" stop-opacity="0.05" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- 填充区域 -->
|
|
<polygon points="{{ points | join(' ') }} {{ width - margin }},{{ height - margin }} {{ margin }},{{ height - margin }}" fill="url(#gFill)" stroke="none"></polygon>
|
|
|
|
<!-- 折线 -->
|
|
<polyline fill="none" stroke="#4a90e2" stroke-width="2" points="{{ points | join(' ') }}" stroke-linejoin="round" stroke-linecap="round"></polyline>
|
|
|
|
<!-- 数据点 -->
|
|
{% for p in points %}
|
|
{% set coords = p.split(',') %}
|
|
<circle cx="{{ coords[0] }}" cy="{{ coords[1] }}" r="3.2" fill="#2a5298"></circle>
|
|
{% endfor %}
|
|
</svg>
|
|
{% endif %}
|
|
</div>
|
|
<!-- ====== End 趋势图 ====== -->
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
© 2025 剑网3交易行查询系统 | 数据仅供参考，以游戏内实际价格为准
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|