Nenhuma Descrição

attentions.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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/app.css" rel="stylesheet"/>
  9. </head>
  10. <body>
  11. <!-- 主页面标题 -->
  12. <header class="mui-bar mui-bar-nav toptitbox">
  13. <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></span>
  14. <h1 class="mui-title toptit">我的关注</h1>
  15. </header>
  16. <!-- 主页面内容容器 -->
  17. <div class="mui-content">
  18. <!-- 主界面具体展示内容 -->
  19. <div class="fixbox">
  20. <ul class="fixbtn" id="fixbtn">
  21. <li index="0" class="liactive">专家</li><!--当前选中状态 'liactive'-->
  22. <li index="1">资源</li>
  23. </ul>
  24. </div>
  25. <div class="alllist">
  26. <!--专家列表-->
  27. <div class="mui-card-content conblock childlist" style="display: block;"><!--当前x显示列表 'childlist'的显示隐藏-->
  28. <ul class="mui-table-view protable">
  29. <li class="mui-table-view-cell mui-media">
  30. <a class="proinfor" href="../html/proinforbrow.html">
  31. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  32. <div class="mui-media-body">
  33. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  34. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  35. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  36. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  37. </div>
  38. </a>
  39. </li>
  40. <li class="mui-table-view-cell mui-media">
  41. <a href="javascript:;">
  42. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  43. <div class="mui-media-body">
  44. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  45. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  46. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  47. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  48. </div>
  49. </a>
  50. </li>
  51. <li class="mui-table-view-cell mui-media">
  52. <a href="javascript:;">
  53. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  54. <div class="mui-media-body">
  55. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  56. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  57. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  58. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  59. </div>
  60. </a>
  61. </li>
  62. <li class="mui-table-view-cell mui-media">
  63. <a href="javascript:;">
  64. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  65. <div class="mui-media-body">
  66. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  67. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  68. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  69. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  70. </div>
  71. </a>
  72. </li>
  73. <li class="mui-table-view-cell mui-media">
  74. <a href="javascript:;">
  75. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  76. <div class="mui-media-body">
  77. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  78. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  79. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  80. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  81. </div>
  82. </a>
  83. </li>
  84. <li class="mui-table-view-cell mui-media">
  85. <a href="javascript:;">
  86. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  87. <div class="mui-media-body">
  88. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  89. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  90. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  91. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  92. </div>
  93. </a>
  94. </li>
  95. <li class="mui-table-view-cell mui-media">
  96. <a href="javascript:;">
  97. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  98. <div class="mui-media-body">
  99. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  100. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  101. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  102. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  103. </div>
  104. </a>
  105. </li>
  106. <li class="mui-table-view-cell mui-media">
  107. <a href="javascript:;">
  108. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  109. <div class="mui-media-body">
  110. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  111. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  112. <p class="mui-ellipsis listtit3"><span>研究方向标题A</span><span>研究方向标题B</span></h5>
  113. <p class="mui-ellipsis listtit3"><span>设备资源名称A</span><span>设备资源名称B</span><span>设备资源名称B</span></p>
  114. </div>
  115. </a>
  116. </li>
  117. </ul>
  118. </div>
  119. <!--资源列表-->
  120. <div class="mui-card-content conblock childlist">
  121. <ul class="mui-table-view protable">
  122. <li class="mui-table-view-cell mui-media">
  123. <a class="proinfor" href="resinforbrow.html">
  124. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  125. <div class="mui-media-body">
  126. <span class="listtit">资源名称</span>
  127. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  128. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  129. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  130. </div>
  131. </a>
  132. </li>
  133. <li class="mui-table-view-cell mui-media">
  134. <a class="proinfor" href="resinforbrow.html">
  135. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  136. <div class="mui-media-body">
  137. <span class="listtit">资源名称</span>
  138. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  139. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  140. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  141. </div>
  142. </a>
  143. </li>
  144. <li class="mui-table-view-cell mui-media">
  145. <a class="proinfor" href="resinforbrow.html">
  146. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  147. <div class="mui-media-body">
  148. <span class="listtit">资源名称</span>
  149. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  150. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  151. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  152. </div>
  153. </a>
  154. </li>
  155. <li class="mui-table-view-cell mui-media">
  156. <a class="proinfor" href="resinforbrow.html">
  157. <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
  158. <div class="mui-media-body">
  159. <span class="listtit">资源名称</span>
  160. <p class="mui-ellipsis listtit2"><span>用途A</span><span>用途B</span></p>
  161. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/></span>
  162. <p class="listtit3"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  163. </div>
  164. </a>
  165. </li>
  166. </ul>
  167. </div>
  168. </div>
  169. <!--<a id="scrollToTop" class="backTop hide"> <span class="mui-icon mui-icon-arrowup"></span> </a>-->
  170. </div>
  171. <script src="../js/public/mui.min.js"></script>
  172. <script type="text/javascript" charset="utf-8">
  173. mui.init();
  174. //------------------------------
  175. //菜单tab切换
  176. mui("#fixbtn").on("tap","li",function(){
  177. var checkedindex=this.getAttribute("index");
  178. var checkedcontent_arr=document.getElementsByClassName("childlist");
  179. var libtn_arr = document.getElementById("fixbtn").getElementsByTagName("li");
  180. mui.toast(checkedindex);
  181. if(checkedindex==0){
  182. libtn_arr[0].classList.add("liactive");
  183. libtn_arr[1].classList.remove("liactive");
  184. checkedcontent_arr[1].style.display = 'none';
  185. checkedcontent_arr[0].style.display = 'block';
  186. }else{
  187. libtn_arr[1].classList.add("liactive");
  188. libtn_arr[0].classList.remove("liactive");
  189. checkedcontent_arr[0].style.display = 'none';
  190. checkedcontent_arr[1].style.display = 'block';
  191. }
  192. })
  193. //-----------------------------
  194. </script>
  195. </body>
  196. </html>