浅念
107 lines
4.3 KiB
HTML
107 lines
4.3 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>
|
|
<!-- 使用本地CSS文件，提升加载性能和缓存效率 -->
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<!-- 使用本地ECharts，加载更快，支持离线访问 -->
|
|
<script src="js/echarts.min.js" defer></script>
|
|
<!-- 使用本地JS文件，提升加载性能和缓存效率 -->
|
|
<script src="js/main.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<!-- 缩放包装器：负责固定高度和滚动 -->
|
|
<div id="scale-wrapper">
|
|
<div class="container">
|
|
<!-- 头部图片 -->
|
|
<div class="header-image">
|
|
<img src="img/heard.png" alt="头部装饰图片">
|
|
</div>
|
|
|
|
<div class="cont">
|
|
<!-- 顶部数据区域 -->
|
|
<div class="top-data">
|
|
<div class="sales-info">
|
|
<div class="sales-info-top">
|
|
<div class="target-info">
|
|
<h3>年度目标</h3>
|
|
<div class="target-amount">加载中...</div>
|
|
</div>
|
|
<div class="total-info">
|
|
<h3>年度总销售额</h3>
|
|
<div class="total-amount">加载中...</div>
|
|
</div>
|
|
</div>
|
|
<div class="sales-info-cont">
|
|
<div class="sales-info-bottom">
|
|
<div class="progress-container">
|
|
<div class="progress-bg">
|
|
<div class="progress-bar">
|
|
<div class="progress-info">
|
|
<div class="play-btn"></div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-text">0%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-label">完成率</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="countdown">
|
|
<h3>年度进度</h3>
|
|
<div class="quarters-container" id="quartersContainer">
|
|
<!-- Q1 -->
|
|
<div class="quarter-item">
|
|
<div class="quarter-label">Q1</div>
|
|
<div class="weeks-container" id="q1Weeks"></div>
|
|
</div>
|
|
<!-- Q2 -->
|
|
<div class="quarter-item">
|
|
<div class="quarter-label">Q2</div>
|
|
<div class="weeks-container" id="q2Weeks"></div>
|
|
</div>
|
|
<!-- Q3 -->
|
|
<div class="quarter-item">
|
|
<div class="quarter-label">Q3</div>
|
|
<div class="weeks-container" id="q3Weeks"></div>
|
|
</div>
|
|
<!-- Q4 -->
|
|
<div class="quarter-item last-quarter">
|
|
<div class="quarter-label">Q4</div>
|
|
<div class="weeks-container" id="q4Weeks"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 小组排名区域 -->
|
|
<h2 class="section-title">小组排名</h2>
|
|
<div class="group-ranking">
|
|
<div class="ranking-content">
|
|
<div class="ranking-list" id="groupRankList"></div>
|
|
<div class="chart-container" id="groupChart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个人排名区域 -->
|
|
<h2 class="section-title">个人排名</h2>
|
|
<div class="person-ranking">
|
|
<div class="ranking-content">
|
|
<div class="ranking-list" id="personRankList"></div>
|
|
<div class="chart-container" id="personChart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 尾部图片 -->
|
|
<div class="footer-image">
|
|
<img src="img/foot.png" alt="尾部装饰图片">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|