|
<!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 menublock">
<!-- 主界面具体展示内容 -->
<div class="filterbox">
<ul class="filterblock">
<li style="width:36%;">
<a href="#middlePopovercity" 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="#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="../html/proinforbrow.html">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
<div class="mui-media-body">
<span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
<p class="listtit2"><span>职称</span>，<span>职务</span>， <span>所属机构</span> | <span>所在地</span></p>
<p class="mui-ellipsis listtit3"><span>研究方向标题A</span>、<span>研究方向标题B</span></p>
<p class="mui-ellipsis listtit3"><span>设备资源名称A</span>、<span>设备资源名称B</span>、<span>设备资源名称B</span></p>
</div>
</a>
</li>
</ul>
</div>
<div class="mui-popover mui-fullscreen menuposition" id="middlePopovercity">
<div class="mui-scroll-wrapper" style="width:40%;left:0;">
<div class="mui-scroll">
<div class="mui-col-xs-12">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
</div>
</div>
</div>
</div>
<div class="mui-scroll-wrapper" style="width: 60%;left:40%;">
<div class="mui-scroll">
<div id="segmentedControlContents" class="mui-col-xs-12" style="border-left: 1px solid #d6d6d6; background-color: #FFFFFF;">
<div id="item1" class="mui-control-content mui-active">
</div>
<div id="item2" class="mui-control-content">
</div>
<div id="item3" class="mui-control-content">
</div>
</div>
</div>
</div>
</div>
<div id="middlePopoveracad" class="mui-popover popoverbox2">
<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>
<li class="mui-table-view-cell"><a href="#">材料检测与分析技术</a></li>
</ul>
</div>
</div>
</div>
<div id="middlePopoveruse" class="mui-popover popoverbox2">
<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 type="text/javascript" charset="utf-8">
mui.init({
swipeBack: true //启用右滑关闭功能
});
// mui.plusReady(function(){
//-------------------------------
//筛选添加弹出菜单
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';
}
//-----city--------------------------
var controls = document.getElementById("segmentedControls");
var contents = document.getElementById("segmentedControlContents");
var html = [];
var i = 1,
j = 1,
m = 16, //左侧选项卡数量+1
n = 21; //每个选项卡列表数量+1
for (; i < m; i++) {
html.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');
}
controls.innerHTML = html.join('');
html = [];
for (i = 1; i < m; i++) {
html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
for (j = 1; j < n; j++) {
html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
}
html.push('</ul></div>');
}
contents.innerHTML = html.join('');
//默认选中第一个
controls.querySelector('.mui-control-item').classList.add('mui-active');
contents.querySelector('.mui-control-content').classList.add('mui-active');
// });
</script>
</script>
</body>
</html>
|
