feat: Initial commit for contraband ranking system
This commit is contained in:
OpenClaw Agent
534
templates/index.html
Normal file
534
templates/index.html
Normal file
@@ -0,0 +1,534 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>安检团队违禁品数据实时榜</title>
|
||||
<style>
|
||||
:root {
|
||||
--main-red: #ff4d4f;
|
||||
--gold: #faad14;
|
||||
--silver: #76838b;
|
||||
--bronze: #d48806;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hot-list-card {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
padding: 25px 20px;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.header .subtitle {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* Tabs 样式 */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #262626;
|
||||
padding: 8px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
padding: 12px 10px;
|
||||
color: #8c8c8c;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: #bfbfbf;
|
||||
background: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: #fff;
|
||||
background: var(--main-red);
|
||||
box-shadow: 0 4px 15px rgba(255, 77, 79, 0.4);
|
||||
}
|
||||
|
||||
.tab-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.list-container {
|
||||
min-height: 400px;
|
||||
padding: 10px 0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state .icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 列表项样式 */
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeInUp 0.5s ease backwards;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: #f8f9fa;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 排名标签 */
|
||||
.rank-tag {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
font-family: Arial, sans-serif;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rank-1 {
|
||||
background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 15px rgba(250, 173, 20, 0.5);
|
||||
}
|
||||
|
||||
.rank-2 {
|
||||
background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 15px rgba(118, 131, 139, 0.5);
|
||||
}
|
||||
|
||||
.rank-3 {
|
||||
background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 15px rgba(212, 136, 6, 0.5);
|
||||
}
|
||||
|
||||
/* 信息区域 */
|
||||
.info {
|
||||
flex: 1;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 分数区域 */
|
||||
.score-area {
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.count-num {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: var(--main-red);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.count-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
max-height: 70vh;
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.3s ease;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--main-red) 0%, #ff7a45 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
animation: fadeInDetail 0.3s ease backwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInDetail {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.detail-time {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #fff;
|
||||
background: var(--main-red);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 数字滚动动画 */
|
||||
.count-animate {
|
||||
animation: countPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes countPop {
|
||||
0% { transform: scale(0.5); opacity: 0; }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 480px) {
|
||||
.hot-list-card {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.rank-tag {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.count-num {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="hot-list-card">
|
||||
<div class="header">
|
||||
<h1>🏆 违禁品查获排行榜</h1>
|
||||
<div class="subtitle">实时统计 · 动态展示</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" data-tab="month">本月</button>
|
||||
<button class="tab-btn" data-tab="all">总榜</button>
|
||||
</div>
|
||||
|
||||
<div class="list-container" id="listContainer">
|
||||
<!-- 列表将通过 JS 动态生成 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<div class="modal" id="detailModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="modalTitle">姓名</h2>
|
||||
<button class="close-btn" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modalBody">
|
||||
<!-- 详情将通过 JS 动态生成 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="data-json" type="application/json">{{ data_json|safe }}</script>
|
||||
|
||||
<script>
|
||||
// 全局数据
|
||||
let allData = {};
|
||||
let currentTab = 'month';
|
||||
|
||||
// DOM加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 加载数据
|
||||
const dataJsonElement = document.getElementById('data-json');
|
||||
if (dataJsonElement) {
|
||||
allData = JSON.parse(dataJsonElement.textContent);
|
||||
// 初始渲染
|
||||
renderList('month');
|
||||
}
|
||||
});
|
||||
|
||||
// Tab 切换
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const tab = this.dataset.tab;
|
||||
|
||||
// 更新按钮状态
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
// 切换数据
|
||||
currentTab = tab;
|
||||
renderList(tab);
|
||||
});
|
||||
});
|
||||
|
||||
// 渲染列表
|
||||
function renderList(tab) {
|
||||
const container = document.getElementById('listContainer');
|
||||
const data = allData[tab] || [];
|
||||
|
||||
if (data.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="icon">📭</div>
|
||||
<div>暂无数据</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
data.forEach((item, index) => {
|
||||
const rank = index + 1;
|
||||
const rankClass = rank <= 3 ? `rank-${rank}` : '';
|
||||
|
||||
html += `
|
||||
<div class="item" style="animation-delay: ${index * 0.05}s" onclick="showDetail('${item.name}')">
|
||||
<div class="rank-tag ${rankClass}">${rank}</div>
|
||||
<div class="info">
|
||||
<div class="name">${item.name}</div>
|
||||
<div class="meta">${item.shift}</div>
|
||||
</div>
|
||||
<div class="score-area">
|
||||
<div class="count-num${index === 0 ? ' count-animate' : ''}">${item.score}</div>
|
||||
<div class="count-label">票</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// 显示详情
|
||||
function showDetail(name) {
|
||||
const data = allData[currentTab] || [];
|
||||
const user = data.find(u => u.name === name);
|
||||
|
||||
if (!user) return;
|
||||
|
||||
document.getElementById('modalTitle').textContent = user.name;
|
||||
|
||||
const body = document.getElementById('modalBody');
|
||||
if (user.details && user.details.length > 0) {
|
||||
let html = '';
|
||||
user.details.forEach((detail, index) => {
|
||||
const time = new Date(detail.time).toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
// 高亮关键词
|
||||
let content = detail.content
|
||||
.replace(/(打火机|火苗|压力罐|仿真枪|管制刀具|不明药丸|不明液体|精神药品|流通货币)/g,
|
||||
'<span class="highlight">$1</span>');
|
||||
|
||||
html += `
|
||||
<div class="detail-item" style="animation-delay: ${index * 0.05}s">
|
||||
<div class="detail-time">${time}</div>
|
||||
<div class="detail-content">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
body.innerHTML = html;
|
||||
} else {
|
||||
body.innerHTML = '<div class="detail-item">暂无详情记录</div>';
|
||||
}
|
||||
|
||||
document.getElementById('detailModal').classList.add('active');
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function closeModal() {
|
||||
document.getElementById('detailModal').classList.remove('active');
|
||||
}
|
||||
|
||||
// 点击弹窗外部关闭
|
||||
document.getElementById('detailModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 定时刷新（每15秒）
|
||||
setInterval(() => {
|
||||
fetch('/api/rankings')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
allData = data;
|
||||
renderList(currentTab);
|
||||
})
|
||||
.catch(err => console.error('刷新失败:', err));
|
||||
}, 15000);
|
||||
</script>
|
||||
|
||||
<!-- 数据传递到 JS -->
|
||||
<script id="data-json" type="application/json">{{ data_json|safe }}</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user