暂无描述

search-res.html 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title></title>
  7. <link href="../css/mui.min.css" rel="stylesheet"/>
  8. <link href="../css/iconfont.css" rel="stylesheet" />
  9. <link href="../css/app.css" rel="stylesheet"/>
  10. <link href="../css/mui.picker.min.css" rel="stylesheet" />
  11. </head>
  12. <body>
  13. <!-- 主页面标题 -->
  14. <header class="mui-bar mui-bar-nav toptitbox">
  15. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
  16. <div class="searchbox2 mui-pull-right">
  17. <div class="mui-pull-left searchselect">
  18. <div class="simuselect">
  19. <div class="ulbox lookwho" id="div_select">专家</div>
  20. <ul id="li_show" class="lishow">
  21. <li>专家</li>
  22. <li>资源</li>
  23. </ul>
  24. </div>
  25. <em class="mui-icon mui-icon-arrowdown"></em>
  26. </div>
  27. <input type="text" class="mui-input-clear mui-pull-right searchtxt2" placeholder="搜索专家、设备资源">
  28. </div>
  29. </header>
  30. <!-- 主页面内容容器 -->
  31. <div class="mui-content">
  32. <!-- 主界面具体展示内容 -->
  33. <div class="filterbox">
  34. <ul class="filterblock">
  35. <li>
  36. <button id='showCityPicker' class="mui-btn mui-btn-block filterlist" type='button'>
  37. <span id='cityResult' class="ui-alert">河北省</span>
  38. <em class="mui-icon mui-icon-arrowdown"></em>
  39. </button>
  40. </li>
  41. <li style="width:25%;">
  42. <a href="#middlePopoveracad" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>学术领域</span><em class="mui-icon mui-icon-arrowdown"></em></a>
  43. </li>
  44. <li style="width:25%;">
  45. <a href="#middlePopoveruse" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>应用行业</span><em class="mui-icon mui-icon-arrowdown"></em></a>
  46. </li>
  47. </ul>
  48. </div>
  49. <!--图文列表-->
  50. <div class="mui-card-content conblock">
  51. <ul class="mui-table-view protable">
  52. <li class="mui-table-view-cell mui-media">
  53. <a class="proinfor" href="resinforbrow.html">
  54. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  55. <div class="mui-media-body">
  56. <span class="listtit">资源名称</span>
  57. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  58. <span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
  59. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  60. </div>
  61. </a>
  62. </li>
  63. <li class="mui-table-view-cell mui-media">
  64. <a class="proinfor" href="resinforbrow.html">
  65. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  66. <div class="mui-media-body">
  67. <span class="listtit">资源名称</span>
  68. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  69. <span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
  70. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  71. </div>
  72. </a>
  73. </li>
  74. <li class="mui-table-view-cell mui-media">
  75. <a class="proinfor" href="resinforbrow.html">
  76. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  77. <div class="mui-media-body">
  78. <span class="listtit">资源名称</span>
  79. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  80. <span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
  81. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  82. </div>
  83. </a>
  84. </li>
  85. <li class="mui-table-view-cell mui-media">
  86. <a class="proinfor" href="resinforbrow.html">
  87. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  88. <div class="mui-media-body">
  89. <span class="listtit">资源名称</span>
  90. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  91. <span class="listtit">专家姓名<em class="mui-icon iconfont icon-vip authicon"></em></span>
  92. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  93. </div>
  94. </a>
  95. </li>
  96. </ul>
  97. </div>
  98. <div id="middlePopoveracad" class="mui-popover popoverbox2">
  99. <div class="mui-popover-arrow"></div>
  100. <div class="mui-scroll-wrapper">
  101. <div class="mui-scroll">
  102. <ul class="mui-table-view">
  103. <li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
  104. <li class="mui-table-view-cell"><a href="#">我的需求</a></li>
  105. <li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
  106. <li class="mui-table-view-cell"><a href="#">全部</a></li>
  107. <li class="mui-table-view-cell"><a href="#">我的需求</a></li>
  108. <li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
  109. <li class="mui-table-view-cell"><a href="#">全部</a></li>
  110. <li class="mui-table-view-cell"><a href="#">我的需求</a></li>
  111. <li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
  112. <li class="mui-table-view-cell"><a href="#">全部</a></li>
  113. <li class="mui-table-view-cell"><a href="#">我的需求</a></li>
  114. <li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
  115. </ul>
  116. </div>
  117. </div>
  118. </div>
  119. <div id="middlePopoveruse" class="mui-popover popoverbox2">
  120. <div class="mui-popover-arrow"></div>
  121. <div class="mui-scroll-wrapper">
  122. <div class="mui-scroll">
  123. <ul class="mui-table-view">
  124. <li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
  125. <li class="mui-table-view-cell"><a href="#">我的需求</a></li>
  126. <li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
  127. </ul>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <script src="../js/public/mui.min.js"></script>
  133. <script src="../js/public/mui.picker.min.js"></script>
  134. <script src="../js/public/city.data.js" type="text/javascript" charset="utf-8"></script>
  135. <script src="../js/public/city.data-3.js" type="text/javascript" charset="utf-8"></script>
  136. <script type="text/javascript" charset="utf-8">
  137. mui.init({
  138. swipeBack: true //启用右滑关闭功能
  139. });
  140. //-------------------------------
  141. //筛选添加弹出菜单
  142. mui('.mui-scroll-wrapper').scroll();
  143. mui('body').on('shown', '.mui-popover', function(e) {
  144. //console.log('shown', e.detail.id);//detail为当前popover元素
  145. });
  146. mui('body').on('hidden', '.mui-popover', function(e) {
  147. //console.log('hidden', e.detail.id);//detail为当前popover元素
  148. });
  149. //-------------------------------------------
  150. //搜专家搜资源的下拉选择框
  151. var showblock = document.getElementById("li_show");
  152. var selectblock = document.getElementById("div_select");
  153. selectblock.addEventListener('tap',function(){
  154. showmenu();
  155. });
  156. mui("#li_show").on('tap','li',function(){
  157. //liindex = this.getAttribute("index");
  158. selectThis(this.innerHTML);
  159. });
  160. function selectThis(value){
  161. selectblock.innerHTML=value;
  162. showblock.style.display = 'none';
  163. }
  164. function showmenu(){
  165. showblock.style.display = 'block';
  166. }
  167. </script>
  168. </body>
  169. </html>