|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>网上展厅</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_4jilbt7s27s.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/wszt.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/dropload.css">
|
|
|
|
|
|
|
|
|
|
|
|
<script src="js/base.js"></script>
|
|
|
|
<script src="js/jquery.min.js"></script>
|
|
|
|
<style>
|
|
|
|
.icon-zuo{
|
|
|
|
color: #959595;
|
|
|
|
font-size: 0.38rem;
|
|
|
|
}
|
|
|
|
.icon-iconfont-edu12{
|
|
|
|
color: #959595;
|
|
|
|
font-size: 0.5rem;
|
|
|
|
}
|
|
|
|
table{
|
|
|
|
margin-top: 0.1rem;
|
|
|
|
border: 1px solid #ffffff;
|
|
|
|
}
|
|
|
|
th{
|
|
|
|
width: 2rem;
|
|
|
|
height: 1rem;
|
|
|
|
font-size: 0.2rem;
|
|
|
|
background-color: #4C79B2;
|
|
|
|
list-style: none;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
td{
|
|
|
|
width: 1.6rem;
|
|
|
|
height: 1rem;
|
|
|
|
font-size: 0.2rem;
|
|
|
|
background-color: #CED5D5;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.icon-fangdajing{
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
.addr{
|
|
|
|
font-size: 0.2rem;
|
|
|
|
}
|
|
|
|
.phone{
|
|
|
|
font-size: 0.2rem;
|
|
|
|
}
|
|
|
|
/*引入百度地图*/
|
|
|
|
#allmap,.BMap_mask {
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.icon-iconjia{
|
|
|
|
color: #ffffff;
|
|
|
|
font-size: 0.2rem;
|
|
|
|
}
|
|
|
|
.icon-dacha{
|
|
|
|
color: #ffffff;
|
|
|
|
font-size: 0.16rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<!--头部信息-->
|
|
|
|
<div class="head">
|
|
|
|
<!--左图标-->
|
|
|
|
<div class="iconfont icon-zuo">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!--内容详情-->
|
|
|
|
<div class="head_new">
|
|
|
|
网上展厅
|
|
|
|
</div>
|
|
|
|
<!--右菜单-->
|
|
|
|
<div class="iconfont icon-iconfont-edu12">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!--顶部菜单-->
|
|
|
|
<div class="top">
|
|
|
|
<div class="top_item top_color">
|
|
|
|
第四天
|
|
|
|
</div>
|
|
|
|
<div class="top_item ">
|
|
|
|
第三天
|
|
|
|
</div>
|
|
|
|
<div class="top_item ">
|
|
|
|
第二天
|
|
|
|
</div>
|
|
|
|
<div class="top_item ">
|
|
|
|
第一天
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--图片列表-->
|
|
|
|
<div class="box">
|
|
|
|
<!------------ 第四天 ------------->
|
|
|
|
<div class="traffic_box day_4" style="display: block;">
|
|
|
|
<div class="traffic day_4_traffic" >
|
|
|
|
<div class="day_item">
|
|
|
|
<img src="images/16.png">
|
|
|
|
<div class="day_item_circle">
|
|
|
|
<div class="iconfont icon-iconjia"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!------------ 第三天 ------------->
|
|
|
|
<div class="traffic_box day_3" style="display: none;">
|
|
|
|
<div class="traffic day_3_traffic" >
|
|
|
|
<div class="day_item">
|
|
|
|
<img src="images/16.png">
|
|
|
|
<div class="day_item_circle">
|
|
|
|
<div class="iconfont icon-iconjia"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="day_item">
|
|
|
|
<img src="images/16.png">
|
|
|
|
<div class="day_item_circle">
|
|
|
|
<div class="iconfont icon-iconjia"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="day_item">
|
|
|
|
<img src="images/16.png">
|
|
|
|
<div class="day_item_circle">
|
|
|
|
<div class="iconfont icon-iconjia"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!------------ 第二天 ------------->
|
|
|
|
<div class="traffic_box day_2" style="display: none;">
|
|
|
|
<div class="traffic day_2_traffic" >
|
|
|
|
<div class="day_item">
|
|
|
|
<img src="images/16.png">
|
|
|
|
<div class="day_item_circle">
|
|
|
|
<div class="iconfont icon-iconjia"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="day_item">
|
|
|
|
<img src="images/16.png">
|
|
|
|
<div class="day_item_circle">
|
|
|
|
<div class="iconfont icon-iconjia"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!------------ 第一天 ------------->
|
|
|
|
<div class="traffic_box day_1" style="display: none;">
|
|
|
|
<div class="traffic day_1_traffic" >
|
|
|
|
<div class="day_item">
|
|
|
|
<img src="images/16.png">
|
|
|
|
<div class="day_item_circle">
|
|
|
|
<div class="iconfont icon-iconjia"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!--图片蒙层-->
|
|
|
|
<div class="mask">
|
|
|
|
<div class="mask_pic">
|
|
|
|
<img src="images/17.png">
|
|
|
|
<div class="mask_pic_circle">
|
|
|
|
<div class="iconfont icon-dacha"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--底部菜单-->
|
|
|
|
<div class="bottom_menu">
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-zhuye2"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
首页
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-dianhua-copy"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
电话咨询
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-user-address"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
网上展厅
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bottom_menu_index">
|
|
|
|
<!--上图标-->
|
|
|
|
<div class="iconfont icon-gerenzhongxin"></div>
|
|
|
|
<!--下文字-->
|
|
|
|
<div class="bottom_menu_index_text">
|
|
|
|
个人中心
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script src="js/dropload.min.js"></script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//颜色切换
|
|
|
|
$('.top_item').click(function () {
|
|
|
|
var index = $(this).index()
|
|
|
|
$(this).addClass("top_color").siblings(".top_item").removeClass("top_color")
|
|
|
|
|
|
|
|
})
|
|
|
|
//内容切换
|
|
|
|
$(".top_item").click(function () {
|
|
|
|
$(".top_item").eq($(".box>.traffic_box").index()).addClass("on").siblings().removeClass("on");
|
|
|
|
$(".box>.traffic_box").hide().eq($(this).index()).show();
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 下拉菜单
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
|
|
|
|
|
|
|
//-------------第四天---------------
|
|
|
|
var page4 = 0;
|
|
|
|
// 每次循环展示10个
|
|
|
|
var size4 = 6 ;
|
|
|
|
$('.day_4').dropload({
|
|
|
|
scrollArea : window,
|
|
|
|
domUp : {
|
|
|
|
domClass : 'dropload-up',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
|
|
|
|
domUpdate : '<div class="dropload-update">↑释放更新</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
|
|
|
|
},
|
|
|
|
domDown : {
|
|
|
|
domClass : 'dropload-down',
|
|
|
|
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
|
|
|
|
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
|
|
|
|
domNoData : '<div class="dropload-noData">暂无数据</div>'
|
|
|
|
},
|
|
|
|
loadDownFn : function(me){
|
|
|
|
page4++;
|
|
|
|
// 拼接HTML
|
|
|
|
var result = '';
|
|
|
|
var s = "";
|
|
|
|
var show="";
|
|
|
|
var list_compressor="";
|
|
|
|
var list_answer="";
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: 'http://ons.me/tools/dropload/json.php?page='+page4+'&size='+size4,
|
|
|
|
dataType: 'json',
|
|
|
|
success: function(data){
|
|
|
|
console.log(data);
|
|
|
|
var arrLen = data.length;
|
|
|
|
if(arrLen > 0){
|
|
|
|
for(var i=0; i<arrLen; i++){
|
|
|
|
result +='<div class="day_item">\n' +
|
|
|
|
' <img src="images/16.png">\n' +
|
|
|
|
' <div class="day_item_circle">\n' +
|
|
|
|
' <div class="iconfont icon-iconjia"></div>\n' +
|
|
|
|
' </div>\n' +
|
|
|
|
' </div>'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果没有数据
|
|
|
|
}else{
|
|
|
|
// 锁定
|
|
|
|
me.lock();
|
|
|
|
// 无数据
|
|
|
|
me.noData();
|
|
|
|
}
|
|
|
|
// 为了测试，延迟1秒加载
|
|
|
|
setTimeout(function(){
|
|
|
|
// 插入数据到页面，放到最后面
|
|
|
|
$('.day_4_traffic').append(result);
|
|
|
|
// 每次数据插入，必须重置
|
|
|
|
me.resetload();
|
|
|
|
},500);
|
|
|
|
},
|
|
|
|
error: function(xhr, type){
|
|
|
|
alert('Ajax error!');
|
|
|
|
// 即使加载出错，也得重置
|
|
|
|
me.resetload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
threshold : 50
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |
...
|
...
|
|
