You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
13 KiB
375 lines
13 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<script src="../resource/js/jquery-3.7.0.min.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="../resource/css/cjy_style.css" />
|
|
<title>无标题文档</title>
|
|
</head>
|
|
|
|
<body style="height:1080px; width:1920px;">
|
|
<div class="xingk"></div>
|
|
<div class="header">
|
|
<h3 class="header_bt">客流量监测</h3>
|
|
<a class="nav" id="showLeft"><i class="nav_icon icon_caidan"></i>菜单</a>
|
|
<a href="#" class="nav_home"><i class="nav_icon icon_zhuye"></i>主页</a>
|
|
<div class="kll_link">
|
|
<a href="#" class="right_sec">
|
|
客源地分析
|
|
</a>
|
|
<a href="#">客流量分析</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="zuoce cbp-spmenu-left" id="cbp-spmenu-s1"> <a href="#"><i class="nav_icon icon_zhuye"></i>首页</a> <a href="#" class="on"><i class="nav_icon icon_zhuye"></i>首页</a> <a href="#"><i class="nav_icon icon_zhuye"></i>首页</a> <a href="#"><i class="nav_icon icon_zhuye"></i>首页</a> <a href="#"><i class="nav_icon icon_zhuye"></i>首页</a> </div>
|
|
<div class="index_left left">
|
|
<div style="margin-top:20px">
|
|
<div class="w450 left mr20">
|
|
<div class="kljc">
|
|
<div class="tjsl">
|
|
<div class="pos_rla">
|
|
<p class="tjbt">河北景区当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun4"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w450 left mr20">
|
|
<h3 class="box_bt">日人流量趋势</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:180px;">
|
|
<!--width:430-->
|
|
<div>图表</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div class="w450 left">
|
|
<h3 class="box_bt">年客流量趋势</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:180px;">
|
|
<!--width:430-->
|
|
<div>图表</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
|
|
<!-- <div>
|
|
<div class="" style="width:333px; float:left; margin-right:20px; background:#f00; height:400px;">2222</div>
|
|
<div class="" style="width:333px; float:left; margin-right:20px; background:#f00; height:400px;">222</div>
|
|
<div class="" style="width:333px; float:left; margin-right:20px; background:#f00; height:400px;">222</div>
|
|
<div class="" style="width:333px; float:left; background:#f00; height:400px;">222</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
-->
|
|
<div class="w1390">
|
|
<h3 class="box_bt">年客流量趋势</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:610px;">
|
|
<div class="kljc_nian">
|
|
<div class="w320 left mr20">
|
|
<div class="jq_top jq_1">
|
|
<h3>安新县白洋淀景区<span>5A</span></h3>
|
|
<div class="tq_cel">
|
|
<h6><img src="../resource/img2/sunny.png" / class="kljc_tq_pic">多云</h6>
|
|
<p>-2℃~-7℃</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>空气质量</h6>
|
|
<p>重度污染</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>PM2.5值</h6>
|
|
<p>154</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>空气湿度</h6>
|
|
<p>40</p>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div class="br_r">
|
|
<div class="tjsl">
|
|
<p class="kl_sub_t">当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun5"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="kl_sub_t">饱和度</p>
|
|
<div style=" height:120px;">图表</div>
|
|
<p class="kl_sub_t">人流趋势</p>
|
|
<div style="height:164px;">图表</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w320 left mr20">
|
|
<div class="jq_top jq_2">
|
|
<h3>安新县白洋淀景区<span>5A</span></h3>
|
|
<div class="tq_cel">
|
|
<h6><img src="../resource/img2/阴天.png" / class="kljc_tq_pic">多云</h6>
|
|
<p>-2℃~-7℃</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>空气质量</h6>
|
|
<p>重度污染</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>PM2.5值</h6>
|
|
<p>154</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>空气湿度</h6>
|
|
<p>40</p>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div class="br_r">
|
|
<div class="tjsl">
|
|
<p class="kl_sub_t">当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun6"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="kl_sub_t">饱和度</p>
|
|
<div style=" height:120px;">图表</div>
|
|
<p class="kl_sub_t">人流趋势</p>
|
|
<div style="height:164px;">图表</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w320 left mr20">
|
|
<div class="jq_top jq_3">
|
|
<h3>安新县白洋淀景区<span>5A</span></h3>
|
|
<div class="tq_cel">
|
|
<h6><img src="../resource/img2/snow2.png" / class="kljc_tq_pic">多云</h6>
|
|
<p>-2℃~-7℃</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>空气质量</h6>
|
|
<p>重度污染</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>PM2.5值</h6>
|
|
<p>154</p>
|
|
</div>
|
|
<div class="tq_cel">
|
|
<h6>空气湿度</h6>
|
|
<p>40</p>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div class="br_r">
|
|
<div class="tjsl">
|
|
<p class="kl_sub_t">当前人流量</p>
|
|
<div class="gdsz">
|
|
<div class="shuzi">
|
|
<div class="numberRun7"></div>
|
|
</div>
|
|
<p class="szdw">人次</p>
|
|
<div class="mb_left"></div>
|
|
<div class="mb_right"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="kl_sub_t">饱和度</p>
|
|
<div style=" height:120px;">图表</div>
|
|
<p class="kl_sub_t">人流趋势</p>
|
|
<div style="height:164px;">图表</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w320 left">
|
|
<h4 class="sub_tit2">重点景区游客量</h4>
|
|
<div class="zdjq_l mt10">
|
|
<ul class="com_mnjd">
|
|
<li class="col_fir_1">
|
|
<h3><span>01</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:30%"></span>
|
|
</p>
|
|
</li>
|
|
<li class="col_fir_2">
|
|
<h3><span>02</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:50%"></span>
|
|
</p>
|
|
</li>
|
|
<li class="col_fir_3">
|
|
<h3><span>03</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:62%"></span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<h3><span>04</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:50%"></span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<h3><span>05</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:50%"></span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<h3><span>06</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:50%"></span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<h3><span>07</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:50%"></span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<h3><span>08</span>景区名称</h3>
|
|
<span class="jd_degnum">265656</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:50%"></span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="index_right right">
|
|
<div class="w443">
|
|
<h3 class="box_bt">年龄分布</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:200px;">
|
|
<div class="age_fb">
|
|
<ul class="com_mnjd">
|
|
<li class="age_cd">
|
|
<h3><span>01</span>少年</h3>
|
|
<span class="jd_degnum">25%</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:25%"></span>
|
|
</p>
|
|
</li>
|
|
<li class="age_yg">
|
|
<h3><span>02</span>青年</h3>
|
|
<span class="jd_degnum">56%</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:56%"></span>
|
|
</p>
|
|
</li>
|
|
<li class="age_me">
|
|
<h3><span>03</span>中年</h3>
|
|
<span class="jd_degnum">45%</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:45%"></span>
|
|
</p>
|
|
</li>
|
|
<li class="age_ol">
|
|
<h3><span>04</span>老年</h3>
|
|
<span class="jd_degnum">9%</span>
|
|
<p class="mnjd_bg">
|
|
<span class="wd_num" style="width:9%"></span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div class="w443">
|
|
<h3 class="box_bt">消费比例</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:340px;">
|
|
<!--width:423-->
|
|
<div>图表</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
<div class="w443">
|
|
<h3 class="box_bt">出行方式</h3>
|
|
<div class="box_top_s2"></div>
|
|
<div class="box_center_s2" style=" height:180px;">
|
|
<div class="cxfs_lbx">
|
|
<ul>
|
|
<li><img src="../resource/img2/chux_hc.png" />
|
|
<div class="cx_inf">
|
|
<p>火车</p>
|
|
<h3 class="col_1">20%</h3>
|
|
</div>
|
|
</li>
|
|
<li><img src="../resource/img2/chux_qc.png" />
|
|
<div class="cx_inf">
|
|
<p>汽车</p>
|
|
<h3 class="col_2">20%</h3>
|
|
</div>
|
|
</li>
|
|
<li><img src="../resource/img2/chux_fj.png" />
|
|
<div class="cx_inf">
|
|
<p>飞机</p>
|
|
<h3 class="col_3">20%</h3>
|
|
</div>
|
|
</li>
|
|
<div style="clear:both"></div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s2"></div>
|
|
</div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
|
|
<!--数字滚动-->
|
|
<script src="../resource/js/jquery-3.7.0.min.js"></script>
|
|
<script type="text/javascript" src="../resource/js/numberRun.js"></script>
|
|
|
|
<!--左侧滑动菜单-->
|
|
<script src="../resource/js/classie.js"></script>
|
|
<script>
|
|
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
|
|
showLeft = document.getElementById( 'showLeft' ),
|
|
body = document.body;
|
|
|
|
showLeft.onclick = function() {
|
|
classie.toggle( this, 'active' );
|
|
classie.toggle( menuLeft, 'cbp-spmenu-open' );
|
|
disableOther( 'showLeft' );
|
|
};
|
|
function disableOther( button ) {
|
|
if( button !== 'showLeft' ) {
|
|
classie.toggle( showLeft, 'disabled' );
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|