移动新ui
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.
 
 
 
 
hb_cyjc_yd/WebRoot/hbcyjc/html/客流量监测.html

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>