|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet"/>
<link href="../css/iconfont.css" rel="stylesheet" />
<link href="../css/app.css" rel="stylesheet"/>
<link href="../css/mui.picker.min.css" rel="stylesheet" />
</head>
<body>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav toptitbox">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
<div class="searchbox2 mui-pull-right">
<div class="mui-pull-left searchselect">
<div class="simuselect">
<div class="ulbox lookwho" id="div_select">专家</div>
<ul id="li_show" class="lishow">
<li>专家</li>
<li>资源</li>
</ul>
</div>
<em class="mui-icon mui-icon-arrowdown"></em>
</div>
<input type="text" class="mui-input-clear mui-pull-right searchtxt2" placeholder="搜索专家、设备资源">
</div>
</header>
<!-- 主页面内容容器 -->
<div class="mui-content">
<!-- 主界面具体展示内容 -->
<div class="filterbox">
<ul class="filterblock">
<li>
<button id='showCityPicker' class="mui-btn mui-btn-block filterlist" type='button'>
<span id='cityResult' class="ui-alert">河北省</span>
<em class="mui-icon mui-icon-arrowdown"></em>
</button>
</li>
<li style="width:25%;">
<a href="#middlePopoveracad" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>学术领域</span><em class="mui-icon mui-icon-arrowdown"></em></a>
</li>
<li style="width:25%;">
<a href="#middlePopoveruse" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>应用行业</span><em class="mui-icon mui-icon-arrowdown"></em></a>
</li>
</ul>
</div>
<!--图文列表-->
<div class="mui-card-content conblock">
<ul class="mui-table-view protable">
<li class="mui-table-view-cell mui-media">
<a class="proinfor" href="resinforbrow.html">
<img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
<div class="mui-media-body">
<span class="listtit">资源名称</span>
<p class="mui-ellipsis listtit2"><span>用途A</span>，<span>用途B</span></p>
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit3"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="proinfor" href="resinforbrow.html">
<img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
<div class="mui-media-body">
<span class="listtit">资源名称</span>
<p class="mui-ellipsis listtit2"><span>用途A</span>，<span>用途B</span></p>
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit3"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="proinfor" href="resinforbrow.html">
<img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
<div class="mui-media-body">
<span class="listtit">资源名称</span>
<p class="mui-ellipsis listtit2"><span>用途A</span>，<span>用途B</span></p>
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit3"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="proinfor" href="resinforbrow.html">
<img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
<div class="mui-media-body">
<span class="listtit">资源名称</span>
<p class="mui-ellipsis listtit2"><span>用途A</span>，<span>用途B</span></p>
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit3"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
</div>
</a>
</li>
</ul>
</div>
<div id="middlePopoveracad" class="mui-popover popoverbox2">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
<li class="mui-table-view-cell"><a href="#">全部</a></li>
<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
<li class="mui-table-view-cell"><a href="#">全部</a></li>
<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
<li class="mui-table-view-cell"><a href="#">全部</a></li>
<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
</ul>
</div>
</div>
</div>
<div id="middlePopoveruse" class="mui-popover popoverbox2">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../js/public/mui.min.js"></script>
<script src="../js/public/mui.picker.min.js"></script>
<script src="../js/public/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/public/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack: true //启用右滑关闭功能
});
//-------------------------------
//筛选添加弹出菜单
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
mui('body').on('hidden', '.mui-popover', function(e) {
//console.log('hidden', e.detail.id);//detail为当前popover元素
});
//-------------------------------------------
//搜专家搜资源的下拉选择框
var showblock = document.getElementById("li_show");
var selectblock = document.getElementById("div_select");
selectblock.addEventListener('tap',function(){
showmenu();
});
mui("#li_show").on('tap','li',function(){
//liindex = this.getAttribute("index");
selectThis(this.innerHTML);
});
function selectThis(value){
selectblock.innerHTML=value;
showblock.style.display = 'none';
}
function showmenu(){
showblock.style.display = 'block';
}
</script>
</body>
</html>
|
