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.
184 lines
5.3 KiB
184 lines
5.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>朱熹学堂—博物馆之旅</title>
|
|
<meta name="keywords" content="keyword1,keyword2,keyword3">
|
|
<meta name="description" content="this is my page">
|
|
<meta name="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
|
|
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/base.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/share.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="maskBox"></div>
|
|
<div class="box_cont">
|
|
<p class="tip"><img src="img/share/titleIcon.png" /></p>
|
|
<div class="info">
|
|
<p class="avater"><img src="img/share/avatar.png" /></p>
|
|
<p class="name">不闻不问</p>
|
|
</div>
|
|
<div class="numInfo">
|
|
<p>
|
|
踏足中国<span>7</span>个省区，<span>7</span>个世界遗产
|
|
</p>
|
|
<p>超越了<span>80.88%</span>的用户</p>
|
|
|
|
</div>
|
|
<div class="tipText">(了解世界遗产详情，请点击图标)</div>
|
|
<div id="container"></div>
|
|
|
|
</div>
|
|
<div class="nameList">
|
|
<ul>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bulletBox">
|
|
<div class="leftBwg">
|
|
<ul>
|
|
<li>
|
|
<a href=""></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rightBwg">
|
|
<ul>
|
|
<li>
|
|
<a href=""></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="deepIcon">
|
|
<ul>
|
|
<li>
|
|
<p class="icon"><img src="img/share/weixin.png" /></p>
|
|
<p class="text">分享到微信</p>
|
|
</li>
|
|
<li onclick="saveImg()">
|
|
<p class="icon"><img src="img/share/saveImg.png" /></p>
|
|
<p class="text">保存图片</p>
|
|
</li>
|
|
<li>
|
|
<p class="icon"><img src="img/share/shuax.png" /></p>
|
|
<p class="text">重新选择</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mask">
|
|
<div class="maskImg">
|
|
<div class="topImg"><img src="img/share/imgs.png" /></div>
|
|
<div class="btn"><img src="img/share/btnIcon.png" /></div>
|
|
</div>
|
|
<div class="close"><img src="img/share/close.png" /></div>
|
|
</div>
|
|
<div class="tipBox">
|
|
暂无链接
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <canvas id="canvas"></canvas>
|
|
<img src="" class="svgImg" /> -->
|
|
</body>
|
|
<script src="js/jsMap-1.1.0.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
// if($('.wrap').height()<$(window).height()){
|
|
// $('.wrap').css('height', $(window).height())
|
|
// }else{
|
|
// $('.wrap').css('height', 'auto')
|
|
// }
|
|
|
|
// $('.wrap').css('height', $(window).height());
|
|
|
|
function saveImg() {
|
|
$('.mask').fadeIn(500)
|
|
$('.maskBox').fadeIn(500)
|
|
}
|
|
$('.mask .close').on('click', function() {
|
|
$('.mask').fadeOut(500)
|
|
$('.maskBox').fadeOut(500)
|
|
|
|
|
|
})
|
|
$('.bulletBox').on('click','.noHref',function(){
|
|
$('.tipBox').fadeIn(500)
|
|
setTimeout(function(){
|
|
$('.tipBox').fadeOut(500)
|
|
|
|
},2000)
|
|
})
|
|
var chooseArr = localStorage.getItem("chooseArr");
|
|
console.log(JSON.parse(chooseArr));
|
|
var list = JSON.parse(chooseArr)
|
|
|
|
var cont = '';
|
|
$.each(list, function(i, val) {
|
|
cont += '<li><p class="title">' + val.cityName + '</p><p class="itemList">'
|
|
$.each(val.bName, function(index, name) {
|
|
console.log(name)
|
|
if(index == val.bName.length - 1) {
|
|
cont += name
|
|
} else {
|
|
cont += name + '、'
|
|
}
|
|
|
|
})
|
|
cont += '</p></li>'
|
|
})
|
|
$('.nameList').html(cont)
|
|
|
|
var infoNum = '';
|
|
var dist = (list[0].bNum / 130) * 100
|
|
var bf = dist.toFixed(2);
|
|
if(list[0].bNum >= 1 && list[0].bNum <= 5) {
|
|
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区，<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span> 82.38%</span>的用户</p>'
|
|
|
|
}
|
|
if(list[0].bNum > 5 && list[0].bNum <= 10) {
|
|
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区，<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>85.68%</span>的用户</p>'
|
|
|
|
}
|
|
if(list[0].bNum > 10 && list[0].bNum <= 15) {
|
|
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区，<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>90.18%</span>的用户</p>'
|
|
|
|
}
|
|
if(list[0].bNum > 15 && list[0].bNum <= 20) {
|
|
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区，<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>96.58%</span>的用户</p>'
|
|
|
|
}
|
|
if(list[0].bNum > 20) {
|
|
infoNum = '<p>踏足中国<span>' + list.length + '</span>个省区，<span>' + list[0].bNum + '</span>个一级博物馆</p><p>超越了<span>99.99%</span>的用户</p>'
|
|
|
|
}
|
|
|
|
// nameList
|
|
$('.numInfo').html(infoNum)
|
|
jsMap.config("#container", {
|
|
name: "china",
|
|
width: 355,
|
|
height: 400,
|
|
datafill: "#4291DA",
|
|
areaName: false,
|
|
}, JSON.parse(chooseArr))
|
|
|
|
// $('.tip').on('click', function() {
|
|
$('.deepIcon ').slideToggle(1000)
|
|
// })
|
|
$('.jsmap-container').click(function(e) {
|
|
if(e.target.classList.length == 0 || e.target.classList[0] != 'imgClick') {
|
|
$('.leftBwg').slideUp(300)
|
|
$('.rightBwg').slideUp(300)
|
|
}
|
|
})
|
|
</script>
|
|
<!--<script src="js/share.js?vs=1.0.0." type="text/javascript" charset="utf-8"></script>-->
|
|
|
|
</html>
|