<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网上展厅</title> <!--<meta name="viewport" content="width=device-width, initial-scale=1" />--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <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_hcei2fa3b4q.css"> <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/wszt.css"> <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/dropload.css"> <script src="__TMPL__/public/assets/js/base.js"></script> <script src="__TMPL__/public/assets/js/jquery.min.js"></script> <style> .iconfont{ font-size: 0.38rem; } .icon-zuo{ color: #959595; font-size: 0.38rem; } .icon-iconfont-edu12{ color: #959595; font-size: 0.5rem; position: relative; } 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; } .icon-shangsanjiao{ height: 0.5rem; font-size: 0.6rem; margin-left: 1.2rem; position: absolute; top: -0.28rem; color: #F4F5F9; } .margin_lef{ margin-left: 0.2rem; } .menu{ /*display: flex;*/ position: absolute; top: 0.69rem; left: -1.4rem; } .menu_color{ color: #EA474B; } .top_item_line { font-size: 0.24rem; font-family: SourceHanSansCN-Regular; font-weight: 400; line-height: 0.6rem; position: relative; display: flex; justify-content: center; } </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 class="menu" style="display: none;"> <!--菜单列表--> <div class="head_menu"> <!--箭头--> <div class="iconfont icon-shangsanjiao"></div> <!--菜单--> <div class="head_menu_item menu_index"> <!--图标--> <div class="iconfont icon-zhuye2 margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 首页 </div> </div> <div class="head_menu_item menu_gyzh"> <!--图标--> <div class="iconfont icon-fangzi margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 关于展品 </div> </div> <div class="head_menu_item menu_zpfw"> <!--图标--> <div class="iconfont icon-fangkuai margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 展品范围 </div> </div> <div class="head_menu_item menu_zsml"> <!--图标--> <div class="iconfont icon-diqiu1 margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 展商名录 </div> </div> <div class="head_menu_item menu_czsq"> <!--图标--> <div class="iconfont icon-zuanshi margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 参展申请 </div> </div> <div class="head_menu_item menu_gzml"> <!--图标--> <div class="iconfont icon-lanzi margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 观众名录 </div> </div> <div class="head_menu_item menu_cgdj"> <!--图标--> <div class="iconfont icon-gouwuche1 margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 参观登记 </div> </div> <div class="head_menu_item menu_lthd"> <!--图标--> <div class="iconfont icon-luyin margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 论坛活动 </div> </div> <div class="head_menu_item menu_xwbd"> <!--图标--> <div class="iconfont icon-ic_language_px margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 新闻报道 </div> </div> <div class="head_menu_item menu_slfw"> <!--图标--> <div class="iconfont icon-shuben margin_lef"></div> <!--文字--> <div class="head_menu_item_text"> 商旅服务 </div> </div> </div> </div> </div> </div> <!--顶部菜单--> <div class="top"> <div class="top_item_line top_color" id="4"> 第四天 </div> <div class="top_item_line" id="3"> 第三天 </div> <div class="top_item_line" id="2"> 第二天 </div> <div class="top_item_line" id="1"> 第一天 </div> </div> <!--图片列表--> <div class="box"> <!------------ 第四天 -------------> <div class="traffic_box day_4" style="display: block;"> <div class="traffic day_4_traffic" > </div> </div> </div> <div class="mask_div"> </div> <!--底部菜单--> <include file="public@footer"/> </div> <script src="__TMPL__/public/assets/js/dropload.min.js"></script> <script src="__TMPL__/public/assets/js/footer.js"></script> <script> //右边菜单功能 $(".icon-iconfont-edu12").click(function () { $(".menu").slideToggle(); }) $('.top_item_line').click(function(){ var id = $(this).attr('id'); window.location.href = "/portal/exhibition/onlineShow"+id; }); //返回功能 $('.icon-zuo').click(function () { window.history.back(); }) // 下拉菜单 $(document).ready(function () { //-------------第四天--------------- // 每次循环展示10个 var page4 = 0; var cate_id = 4; $('.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 mask = ''; $.ajax({ type: 'GET', url:"{:url('exhibition/get_line')}", dataType: 'json', data:{cate_id:cate_id,page:page4}, success: function(data){ console.log(data); var arrLen = data.length; if(arrLen > 0){ $.each(data,function(i,val){ result += '<div class="day_item" id="'+val['id']+'">'; result += '<img src="'+val['thumb']+'">'; result += '<div class="day_item_circle">'; result += '<div class="iconfont icon-iconjia"></div>'; result += '</div></div>'; <!--图片蒙层--> mask += '<div class="mask" style="display: none;" id="mask'+val['id']+'">'; mask += '<div class="mask_pic">'; mask += '<img src="'+val['thumb']+'">'; mask += '<div class="mask_pic_circle">'; mask += '<div class="iconfont icon-dacha"></div>'; mask += '</div></div></div>'; }); // 如果没有数据 }else{ // 锁定 me.lock(); // 无数据 me.noData(); } //为了测试,延迟1秒加载 setTimeout(function(){ // 插入数据到页面,放到最后面 $('.day_4_traffic').append(result); $('.mask_div').append(mask); // 每次数据插入,必须重置 me.resetload(); },500); }, error: function(xhr, type){ alert('Ajax error!'); // 即使加载出错,也得重置 me.resetload(); } }); }, threshold : 50 }); //关闭图片 $(document).on('click','.mask_pic_circle',function () { $('.mask').css("display","none"); }); //打开图片 $(document).on('click','.day_item',function () { var id = $(this).attr('id'); $('#mask'+id).css("display","flex"); }); }); </script> </body> </html>