192 lines
9.0 KiB
PHP
192 lines
9.0 KiB
PHP
<?php
|
||
include 'header.php';
|
||
?>
|
||
<div class="container py-5">
|
||
<!-- Market Trends Cards -->
|
||
<div class="row mb-5 g-4">
|
||
<div class="col-md-4">
|
||
<div class="glass-card p-4 h-100" style="background: linear-gradient(135deg, rgba(14, 203, 129, 0.1) 0%, rgba(24, 26, 32, 1) 100%);">
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h6 class="text-secondary mb-0">今日涨幅榜</h6>
|
||
<i class="bi bi-graph-up-arrow text-success"></i>
|
||
</div>
|
||
<div id="top-gainers">
|
||
<div class="text-center py-3 text-secondary small">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="glass-card p-4 h-100">
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h6 class="text-secondary mb-0">新币上架</h6>
|
||
<i class="bi bi-fire text-warning"></i>
|
||
</div>
|
||
<div id="new-listings">
|
||
<div class="text-center py-3 text-secondary small">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="glass-card p-4 h-100">
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<h6 class="text-secondary mb-0">成交热度榜</h6>
|
||
<i class="bi bi-lightning-fill text-info"></i>
|
||
</div>
|
||
<div id="top-volume">
|
||
<div class="text-center py-3 text-secondary small">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<h2 class="text-white fw-bold">行情中心</h2>
|
||
<p class="text-secondary mb-0">实时监测全球主流数字货币市场价格波动</p>
|
||
</div>
|
||
<div class="input-group" style="width: 320px;">
|
||
<span class="input-group-text bg-dark border-secondary text-secondary"><i class="bi bi-search"></i></span>
|
||
<input type="text" id="market-search" class="form-control bg-dark text-white border-secondary" placeholder="搜索币种名称 / 简称" onkeyup="filterMarket()">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card shadow-lg border-secondary-subtle">
|
||
<div class="table-responsive">
|
||
<table class="table table-dark table-hover align-middle mb-0">
|
||
<thead>
|
||
<tr class="text-secondary border-bottom border-secondary" style="background: #1e2329;">
|
||
<th class="ps-4 py-3">币种名称</th>
|
||
<th>最新价格</th>
|
||
<th>24h 涨跌</th>
|
||
<th>24h 最高/最低</th>
|
||
<th>24h 成交额(USDT)</th>
|
||
<th class="text-end pe-4">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="full-market-tbody">
|
||
<tr><td colspan="6" class="text-center py-5"><div class="spinner-border text-warning"></div></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Crypto News Section (Rich Content Enhancement) -->
|
||
<div class="mt-5">
|
||
<h4 class="text-white mb-4"><i class="bi bi-newspaper text-warning me-2"></i> 行业资讯</h4>
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="glass-card p-4 h-100 d-flex gap-3 align-items-center">
|
||
<img src="https://public.bnbstatic.com/image/cms/article/body/202303/34e0e5e0-9e9b-4377-98e6-7b244c767e6c.png" style="width: 120px; border-radius: 8px;" class="d-none d-sm-block">
|
||
<div>
|
||
<span class="badge bg-primary mb-2">快讯</span>
|
||
<h6 class="text-white mb-2">以太坊坎昆升级顺利完成，Layer 2 费用大幅下降</h6>
|
||
<p class="text-secondary smaller mb-0">此次升级引入了 Proto-Danksharding，为以太坊扩容迈出关键一步...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="glass-card p-4 h-100 d-flex gap-3 align-items-center">
|
||
<img src="https://public.bnbstatic.com/image/cms/article/body/202206/a27e7f6d0f8645089f2a2438883907e1.png" style="width: 120px; border-radius: 8px;" class="d-none d-sm-block">
|
||
<div>
|
||
<span class="badge bg-warning text-dark mb-2">深度</span>
|
||
<h6 class="text-white mb-2">比特币减半后市场走势分析：机遇还是挑战？</h6>
|
||
<p class="text-secondary smaller mb-0">历史数据显示，减半通常伴随着周期的转折，本次减半有何不同...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let allMarketData = [];
|
||
|
||
function formatPrice(p) {
|
||
p = parseFloat(p);
|
||
if (p < 0.0001) return p.toFixed(8);
|
||
if (p < 0.01) return p.toFixed(6);
|
||
if (p < 1) return p.toFixed(4);
|
||
return p.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
|
||
}
|
||
|
||
async function refreshMarket() {
|
||
try {
|
||
const res = await fetch('api.php?action=market_data');
|
||
const data = await res.json();
|
||
allMarketData = data;
|
||
renderMarket();
|
||
renderTrends();
|
||
} catch (e) {
|
||
console.error('Market refresh failed', e);
|
||
}
|
||
}
|
||
|
||
function renderTrends() {
|
||
const gainers = [...allMarketData].sort((a, b) => b.change - a.change).slice(0, 3);
|
||
const volumes = [...allMarketData].sort((a, b) => b.volume - a.volume).slice(0, 3);
|
||
const news = allMarketData.slice(2, 5);
|
||
|
||
document.getElementById('top-gainers').innerHTML = gainers.map(c => `
|
||
<div class="d-flex justify-content-between mb-2 align-items-center">
|
||
<span class="text-white small fw-bold">${c.symbol.replace('USDT','')}</span>
|
||
<span class="text-success small fw-bold">+${c.change}%</span>
|
||
</div>
|
||
`).join('');
|
||
|
||
document.getElementById('new-listings').innerHTML = news.map(c => `
|
||
<div class="d-flex justify-content-between mb-2 align-items-center">
|
||
<span class="text-white small fw-bold">${c.symbol.replace('USDT','')}</span>
|
||
<span class="text-warning small" style="font-size: 10px;">HOT</span>
|
||
</div>
|
||
`).join('');
|
||
|
||
document.getElementById('top-volume').innerHTML = volumes.map(c => `
|
||
<div class="d-flex justify-content-between mb-2 align-items-center">
|
||
<span class="text-white small fw-bold">${c.symbol.replace('USDT','')}</span>
|
||
<span class="text-secondary smaller">${(c.volume/1000000).toFixed(1)}M</span>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function renderMarket() {
|
||
const search = document.getElementById('market-search').value.toLowerCase();
|
||
let html = '';
|
||
allMarketData.forEach(coin => {
|
||
if (search && !coin.symbol.toLowerCase().includes(search) && !coin.name.toLowerCase().includes(search)) return;
|
||
|
||
const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
|
||
const pFormatted = formatPrice(coin.price);
|
||
|
||
html += `
|
||
<tr onclick="location.href='trade.php?symbol=${coin.symbol}'" style="cursor:pointer" class="border-bottom border-secondary">
|
||
<td class="ps-4 py-3">
|
||
<div class="d-flex align-items-center">
|
||
<img src="${coin.icon_url}" class="me-3 rounded-circle" width="28" height="28" onerror="this.src='https://cryptologos.cc/logos/generic-coin-logo.png'">
|
||
<div>
|
||
<span class="fw-bold text-white d-block">${coin.symbol.replace('USDT', '')}</span>
|
||
<span class="text-secondary smaller" style="font-size: 10px;">${coin.name}</span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="fw-bold fs-6">$ ${pFormatted}</td>
|
||
<td class="${changeClass} fw-bold">${coin.change >= 0 ? '+' : ''}${coin.change}%</td>
|
||
<td>
|
||
<div class="text-success" style="font-size: 11px;">H: ${formatPrice(coin.high || coin.price * 1.01)}</div>
|
||
<div class="text-danger" style="font-size: 11px;">L: ${formatPrice(coin.low || coin.price * 0.99)}</div>
|
||
</td>
|
||
<td class="text-secondary smaller">${parseFloat(coin.volume || 0).toLocaleString()}</td>
|
||
<td class="text-end pe-4">
|
||
<a href="trade.php?symbol=${coin.symbol}" class="btn btn-sm btn-outline-warning fw-bold px-3 py-1" style="font-size: 12px;">交易</a>
|
||
</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
document.getElementById('full-market-tbody').innerHTML = html;
|
||
}
|
||
|
||
function filterMarket() { renderMarket(); }
|
||
|
||
refreshMarket();
|
||
setInterval(refreshMarket, 3000);
|
||
</script>
|
||
<?php include 'footer.php'; ?>
|