poem_front/web1/web1.html
ZHANG ZENGXUAN d0dd647fac feat: INIT
2025-05-19 21:59:43 +08:00

474 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <meta http-equiv="refresh"> -->
<meta http-equiv="refresh" content="20;url=/web2/web2.html">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 头部模块 -->
<div class="header">
<ul class="left">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="title">
<span>网 站 现 有 诗 词 </span>
</div>
<ul class="right">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 主体模块 -->
<div class="main">
<!-- 左侧模块 -->
<div class="main-left">
<!-- 完成率 -->
<div class="completion">
<div class="completion-content">
<div class="rate">
<h5><span>统计率</span></h5>
<p>2.7%</p>
</div>
</div>
</div>
<!-- 闪电 -->
<div class="lightning">
<div class="lightning1">
<div class="sd1"></div>
<div class="jd1">
<ul class="cd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
<div class="lightning2">
<div class="sd2"></div>
<div class="jd2">
<ul class="cd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
</div>
<!-- top3 -->
<div class="top3">
<ul>
<li>
<div class="title">NO.1</div>
<div class="content">
<p>31%</p>
<span>杜甫</span>
</div>
</li>
<li>
<div class="title">NO.2</div>
<div class="content">
<p>5%</p>
<span>杜牧</span>
</div>
</li>
<li>
<div class="title">NO.3</div>
<div class="content">
<p>16%</p>
<span>白居易</span>
</div>
</li>
</ul>
</div>
</div>
<!-- 中间模块 -->
<div class="main-middle">
<div class="external1"></div>
<div class="external2"></div>
<div class="external3"></div>
<div class="external4"></div>
<!-- 加载 -->
<div class="jz1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="jz2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 内边框 -->
<div class="inner1"></div>
<div class="inner2"></div>
<!-- 内加载箭头模块 -->
<div class="arrow-l">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="arrow-r">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 中间仪表图 -->
<div class="meter"></div>
<!-- 中间背景canvas -->
<div class="animate"></div>
<!-- 销售额 -->
<div class="sale">
<p><span>诗词数量</span></p>
<p><span>164</span></p>
</div>
</div>
<!-- 右侧模块 -->
<div class="main-right">
<!-- 同比 -->
<div class="compare">
<div class="compare-content">
<div class="rate2">
<h5><span>预期</span></h5>
<p>25%</p>
</div>
</div>
</div>
<!-- 闪电 -->
<div class="lightning">
<div class="lightning3">
<div class="jd3">
<ul class="cd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="sd3"></div>
</div>
<div class="lightning4">
<div class="jd4">
<ul class="cd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="sd4"></div>
</div>
</div>
<!-- top6 -->
<div class="top6">
<ul>
<li>
<div class="title">NO.4</div>
<div class="content">
<p>9%</p>
<span>李清照</span>
</div>
</li>
<li>
<div class="title">NO.5</div>
<div class="content">
<p>13%</p>
<span>辛弃疾</span>
</div>
</li>
<li>
<div class="title">NO.6</div>
<div class="content">
<p>28%</p>
<span>苏轼</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部模块 -->
<div class="bottom">
<div class="ul-box">
<ul>
<li>
<div class="li-content">
<p><span>杜甫</span></p>
<p><span>50</span></p>
<div class="li-box">
<div class="box1">
<h5><span>完成率</span></h5>
<div class="pic">
<img src="./images/wc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>1.4%</span>
</div>
</div>
<div class="box2">
<h5><span>创作量</span></h5>
<div class="pic">
<img src="./images/zc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>1400</span>
</div>
</div>
<div class="box3">
<h5><span>影响力</span></h5>
<div class="pic">
<img src="./images/sq.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>诗圣传承</span>
</div>
</div>
<div class="box4">
<h5><span>预期</span></h5>
<div class="pic">
<img src="./images/tb.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>25%</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="li-content">
<p><span>杜牧</span></p>
<p><span>9</span></p>
<div class="li-box">
<div class="box1">
<h5><span>完成率</span></h5>
<div class="pic">
<img src="./images/wc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>1.6%</span>
</div>
</div>
<div class="box2">
<h5><span>创作量</span></h5>
<div class="pic">
<img src="./images/zc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>270</span>
</div>
</div>
<div class="box3">
<h5><span>影响力</span></h5>
<div class="pic">
<img src="./images/sq.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>洒脱优雅</span>
</div>
</div>
<div class="box4">
<h5><span>预期</span></h5>
<div class="pic">
<img src="./images/tb.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>25%</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="li-content">
<p><span>白居易</span></p>
<p><span>25</span></p>
<div class="li-box">
<div class="box1">
<h5><span>完成率</span></h5>
<div class="pic">
<img src="./images/wc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>1.6%</span>
</div>
</div>
<div class="box2">
<h5><span>创作量</span></h5>
<div class="pic">
<img src="./images/zc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>2800</span>
</div>
</div>
<div class="box3">
<h5><span>影响力</span></h5>
<div class="pic">
<img src="./images/sq.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>大众情怀</span>
</div>
</div>
<div class="box4">
<h5><span>预期</span></h5>
<div class="pic">
<img src="./images/tb.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>25%</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div class="li-content">
<p><span>李清照</span></p>
<p><span>15</span></p>
<div class="li-box">
<div class="box1">
<h5><span>完成率</span></h5>
<div class="pic">
<img src="./images/wc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>1.3%</span>
</div>
</div>
<div class="box2">
<h5><span>创作量</span></h5>
<div class="pic">
<img src="./images/zc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>50</span>
</div>
</div>
<div class="box3">
<h5><span>影响力</span></h5>
<div class="pic">
<img src="./images/sq.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>婉约典范</span>
</div>
</div>
<div class="box4">
<h5><span>预期</span></h5>
<div class="pic">
<img src="./images/tb.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>50%</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="li-content">
<p><span>辛弃疾</span></p>
<p><span>20</span></p>
<div class="li-box">
<div class="box1">
<h5><span>完成率</span></h5>
<div class="pic">
<img src="./images/wc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>1.5%</span>
</div>
</div>
<div class="box2">
<h5><span>创作量</span></h5>
<div class="pic">
<img src="./images/zc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>600</span>
</div>
</div>
<div class="box3">
<h5><span>影响力</span></h5>
<div class="pic">
<img src="./images/sq.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>豪放词宗</span>
</div>
</div>
<div class="box4">
<h5><span>预期</span></h5>
<div class="pic">
<img src="./images/tb.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>25%</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="li-content">
<p><span>苏轼</span></p>
<p><span>45</span></p>
<div class="li-box">
<div class="box1">
<h5><span>完成率</span></h5>
<div class="pic">
<img src="./images/wc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>1.2%</span>
</div>
</div>
<div class="box2">
<h5><span>创作量</span></h5>
<div class="pic">
<img src="./images/zc.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>3050</span>
</div>
</div>
<div class="box3">
<h5><span>印象力</span></h5>
<div class="pic">
<img src="./images/sq.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>文豪全才</span>
</div>
</div>
<div class="box4">
<h5><span>预期</span></h5>
<div class="pic">
<img src="./images/tb.png" alt="更多资源https://gitee.com/iGaoWei/big-data-view">
<span>15%</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<script src="./js/main.js"></script>
</html>