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.
312 lines
9.6 KiB
312 lines
9.6 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" />
|
|
<link type="text/css" rel="stylesheet" href="css/cjy_style2.css" />
|
|
<!--衡水旅游大数据-->
|
|
<link type="text/css" rel="stylesheet" href="css/hs_data.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>
|
|
<div class="zuoce cbp-spmenu-left" id="cbp-spmenu-s1"> <a href="#"><i class="nav_icon icon_zhuye"></i>首页</a> <a href="#"><i class="nav_icon kljc_icon"></i>客流量监测</a> <a href="#"><i class="nav_icon tous_icon"></i>旅游投诉分析</a> <a href="#"><i class="nav_icon eav_icon"></i>网络评价分析</a> <a href="#" class="on"><i class="nav_icon basic_icon"></i>旅游基础资源</a> <a href="#"><i class="nav_icon video_icon"></i>视频监控管理</a> <a href="#"><i class="nav_icon yjzh_icon"></i>视频监控管理</a> </div>
|
|
<!---上半部分---->
|
|
<div class="bot_layout lay_flex">
|
|
<!--左侧--->
|
|
<div style="width:452px;">
|
|
<!--购买力--->
|
|
<div class="w452_hs" >
|
|
<h3 class="box_bt">购买力</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev" style="height:218px;">33</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
<!--促销敏感度--->
|
|
<div class="w452_hs" >
|
|
<h3 class="box_bt">促销敏感度</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev" style="height:270px;">22</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--中间--->
|
|
<div style="flex:2">
|
|
<!--滚动数字--->
|
|
<div class="yk2_num_sol">
|
|
|
|
|
|
<div class="tjsl">
|
|
<p class="tjbt">当月客流量</p>
|
|
<div class="gdsz" style="width:250px;">
|
|
<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 class="tjsl">
|
|
<p class="tjbt">当月客流量</p>
|
|
<div class="gdsz" style="width:250px;">
|
|
<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 class="tjsl">
|
|
<p class="tjbt">当月客流量</p>
|
|
<div class="gdsz" style="width:250px;">
|
|
<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>
|
|
|
|
|
|
<!--游客属性--->
|
|
<div class="w924_hs">
|
|
<h3 class="box_bt">游客属性</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
|
|
<div class="lay_flex">
|
|
<!--年龄分布--->
|
|
<div class="yk2_atb_age">
|
|
<h3 class="hsyk_tit"> 年龄分布 </h3>
|
|
<div class="hs_agefb" style="height: 200px; "> <img src="img_hs/img_yknl.png"> </div>
|
|
</div>
|
|
|
|
<!--性别比例-->
|
|
<div class="yk2_sex">
|
|
<h3 class="hsyk_tit">性别比例</h3>
|
|
<div class="sex_box">
|
|
<!--男女图标展示-->
|
|
<div class="hs_sex" >
|
|
<div class="sex_half"> <img src="img_hs/sex_nan.png">
|
|
<h5>男性 <span>56.23%</span></h5>
|
|
</div>
|
|
<div class="sex_half"> <img src="img_hs/sex_nv.png">
|
|
<h5>女性 <span>26.09%</span></h5>
|
|
</div>
|
|
</div>
|
|
<!--男女比例进度条-->
|
|
<div class="scale_bar">
|
|
<!--取男性比例值-->
|
|
<div class="get_nan" style="width: 56.9%;"></div>
|
|
</div>
|
|
<!--总人数-->
|
|
<p class="scale_whole">总人数:32322万</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--右侧--->
|
|
<div class="yk2_rit">
|
|
<!--购物品类癖好--->
|
|
<div class="w452_hs" >
|
|
<h3 class="box_bt">购物品类癖好</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev" style="height:218px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
<!---购物搜索关键词-->
|
|
<div class="w452_hs" >
|
|
<h3 class="box_bt">购物搜索关键词</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev" style="height:270px;">热词图表</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div><!--上半部分 结束--->
|
|
|
|
|
|
<!--底部-消费统计-->
|
|
<div class="bot_layout">
|
|
<!--消费量-->
|
|
<div class="left w452_hs" >
|
|
<h3 class="box_bt">消费量</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev" style="height:218px;"><img src="img_hs/img_xfl.png"></div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
<!--消费水平-->
|
|
<div class="w452_hs left">
|
|
<h3 class="box_bt">省内消费城市TOP5</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev pay_1" style="height:218px;">
|
|
<!--TOP5-->
|
|
<img src="img_hs/pay_1.png" class="pay_1_img"/>
|
|
<div class="pay_1_lst">
|
|
<ul>
|
|
<li><h3>121245万元</h3><p>衡水市</p></li>
|
|
<li><h3>121245万元</h3><p>衡水市</p></li>
|
|
<li><h3>121245万元</h3><p>衡水市</p></li>
|
|
<li><h3>121245万元</h3><p>衡水市</p></li>
|
|
<li><h3>121245万元</h3><p>衡水市</p></li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
<!--省外消费-->
|
|
<div class="w452_hs left" >
|
|
<h3 class="box_bt">省外消费城市TOP5</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev pay_2" style="height:218px;">
|
|
<!--TOP5-->
|
|
<img src="img_hs/pay_2.png" class="pay_2_img"/>
|
|
<div class="pay_2_lst">
|
|
<ul>
|
|
<li>衡水市<span>121245万元</span></li>
|
|
<li>衡水衡水市市<span>121245万元</span></li>
|
|
<li>衡水衡市<span>121245万元</span></li>
|
|
<li>衡水市<span>121245万元</span></li>
|
|
<li>衡水市<span>121245万元</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
|
|
<!--消费省份-->
|
|
<div class="w452_hs left" >
|
|
<h3 class="box_bt">消费省份</h3>
|
|
<div class="box_top_s"></div>
|
|
<div class="box_center_s">
|
|
<div class="con" >
|
|
<div class="hs_xflev pay_province" style="height:218px;">
|
|
<!--TOP5-->
|
|
<div class="ykph_box ">
|
|
<!--每个条目-->
|
|
<div class="entry_one"> <span class="eny_num">1</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">2,235,2万元</h6>
|
|
</div>
|
|
<div class="entry_one"> <span class="eny_num">2</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
<div class="entry_one"> <span class="eny_num">3</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
|
|
<div class="entry_one"> <span class="eny_num">4</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
<div class="entry_one"> <span class="eny_num">5</span>
|
|
<div class="pay_adr">河北省</div>
|
|
<h6 class="eny_figure">212,235,2</h6>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box_bottom_s"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<!--数字滚动-->
|
|
<script src="js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="js/numberRun.js"></script>
|
|
|
|
<!--左侧滑动菜单-->
|
|
<script src="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>
|
|
|