198 lines
5.6 KiB
HTML
198 lines
5.6 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>股票数据展示系统</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<h1 class="nav-logo">
|
|
<i class="fas fa-chart-line"></i>
|
|
股票数据系统
|
|
</h1>
|
|
<ul class="nav-menu">
|
|
<li><a href="#stock-info" class="nav-link active">股票信息</a></li>
|
|
<li><a href="#kline-chart" class="nav-link">K线图表</a></li>
|
|
<li><a href="#financial-data" class="nav-link">财务数据</a></li>
|
|
<li><a href="#system-logs" class="nav-link">系统日志</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="main-content">
|
|
<!-- 系统概览卡片 -->
|
|
<section class="overview-section">
|
|
<div class="container">
|
|
<h2 class="section-title">系统概览</h2>
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3 id="stock-count">12,595</h3>
|
|
<p>股票总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-chart-bar"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3 id="kline-count">440</h3>
|
|
<p>K线数据</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-file-invoice-dollar"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3 id="financial-count">50</h3>
|
|
<p>财务报告</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-history"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<h3 id="log-count">4</h3>
|
|
<p>系统日志</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 股票信息部分 -->
|
|
<section id="stock-info" class="content-section active">
|
|
<div class="container">
|
|
<h2 class="section-title">股票基础信息</h2>
|
|
<div class="search-bar">
|
|
<input type="text" id="stock-search" placeholder="搜索股票代码或名称...">
|
|
<button id="search-btn">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table" id="stock-table">
|
|
<thead>
|
|
<tr>
|
|
<th>股票代码</th>
|
|
<th>股票名称</th>
|
|
<th>交易所</th>
|
|
<th>上市日期</th>
|
|
<th>行业分类</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="stock-table-body">
|
|
<!-- 股票数据将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="pagination" id="stock-pagination">
|
|
<!-- 分页控件 -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- K线图表部分 -->
|
|
<section id="kline-chart" class="content-section">
|
|
<div class="container">
|
|
<h2 class="section-title">K线数据图表</h2>
|
|
<div class="chart-controls">
|
|
<select id="stock-selector">
|
|
<option value="">选择股票...</option>
|
|
</select>
|
|
<select id="period-selector">
|
|
<option value="daily">日线</option>
|
|
<option value="weekly">周线</option>
|
|
<option value="monthly">月线</option>
|
|
</select>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="kline-chart-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 财务数据部分 -->
|
|
<section id="financial-data" class="content-section">
|
|
<div class="container">
|
|
<h2 class="section-title">财务报告数据</h2>
|
|
<div class="financial-controls">
|
|
<select id="financial-stock-selector">
|
|
<option value="">选择股票...</option>
|
|
</select>
|
|
<select id="report-period">
|
|
<option value="Q4">第四季度</option>
|
|
<option value="Q3">第三季度</option>
|
|
<option value="Q2">第二季度</option>
|
|
<option value="Q1">第一季度</option>
|
|
</select>
|
|
<select id="report-year">
|
|
<option value="2023">2023年</option>
|
|
<option value="2022">2022年</option>
|
|
</select>
|
|
</div>
|
|
<div class="financial-table-container">
|
|
<table class="financial-table" id="financial-table">
|
|
<thead>
|
|
<tr>
|
|
<th>指标名称</th>
|
|
<th>数值</th>
|
|
<th>单位</th>
|
|
<th>同比变化</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="financial-table-body">
|
|
<!-- 财务数据将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 系统日志部分 -->
|
|
<section id="system-logs" class="content-section">
|
|
<div class="container">
|
|
<h2 class="section-title">系统日志</h2>
|
|
<div class="log-controls">
|
|
<select id="log-level-filter">
|
|
<option value="">所有级别</option>
|
|
<option value="INFO">信息</option>
|
|
<option value="WARNING">警告</option>
|
|
<option value="ERROR">错误</option>
|
|
</select>
|
|
<input type="date" id="log-date-filter">
|
|
<button id="refresh-logs">刷新日志</button>
|
|
</div>
|
|
<div class="log-container">
|
|
<div class="log-list" id="log-list">
|
|
<!-- 日志条目将通过JavaScript动态加载 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 加载遮罩 -->
|
|
<div id="loading-overlay" class="loading-overlay">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>加载中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |