No Description

consultlist.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  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. <style>
  10. /*跨webview需要手动指定位置*/
  11. /*.mui-plus header.mui-bar {
  12. display: none!important;
  13. }
  14. .mui-plus .mui-bar-nav~.mui-content {
  15. padding: 0!important;
  16. }*/
  17. .mui-plus .plus{
  18. display: inline;
  19. }
  20. .plus{
  21. display: none;
  22. }
  23. #topPopover {
  24. position: fixed;
  25. top: 16px;
  26. right: 6px;
  27. }
  28. #topPopover .mui-popover-arrow {
  29. left: auto;
  30. right: 6px;
  31. }
  32. span.mui-icon {
  33. font-size: 14px;
  34. color: #007aff;
  35. margin-left: -15px;
  36. padding-right: 10px;
  37. }
  38. .mui-popover {
  39. border-radius: 6px;
  40. width:0;
  41. height:0;
  42. min-width: 90px;
  43. min-height:110px;
  44. font-size: 13px;
  45. }
  46. .mui-popover .mui-popover-arrow{
  47. top: -22px;
  48. width: 22px;
  49. height: 22px;
  50. }
  51. .mui-popover .mui-table-view-cell{
  52. padding:8px 14px;
  53. }
  54. .mui-popover4{ width: 130px; }
  55. </style>
  56. </head>
  57. <body>
  58. <!-- 主页面标题 -->
  59. <header class="mui-bar mui-bar-nav toptitbox">
  60. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
  61. <h1 class="mui-title toptit">咨询</h1>
  62. </header>
  63. <!--主页面底部菜单-->
  64. <nav class="mui-bar mui-bar-tab footbox">
  65. <a class="mui-tab-item mui-active" href="index.html">
  66. <span class="mui-icon mui-icon-home"></span>
  67. </a>
  68. <a class="mui-tab-item">
  69. <span class="mui-icon mui-icon-chat"></span>
  70. </a>
  71. <a class="mui-tab-item">
  72. <span class="mui-icon mui-icon-email"></span>
  73. </a>
  74. <a class="mui-tab-item" href="html/myaccount.html">
  75. <span class="mui-icon mui-icon-person"></span>
  76. </a>
  77. </nav>
  78. <!-- 主页面内容容器 -->
  79. <div class="mui-content">
  80. <!-- 主界面具体展示内容 -->
  81. <div class="filterbox2">
  82. <ul class="filterblock2">
  83. <li style="width:22%;">
  84. <a href="#middlePopover1" class="mui-btn mui-btn-block mui-btn-outlined filterlist2">全部<em class="mui-icon mui-icon-arrowdown"></em></a>
  85. </li>
  86. <li style="width:22%;">
  87. <a href="#middlePopover2" class="mui-btn mui-btn-block mui-btn-outlined filterlist2">咨询方向<em class="mui-icon mui-icon-arrowdown"></em></a>
  88. </li>
  89. <li style="width:22%;">
  90. <a href="#middlePopover3" class="mui-btn mui-btn-block mui-btn-outlined filterlist2">咨询状态<em class="mui-icon mui-icon-arrowdown"></em></a>
  91. </li>
  92. <li style="width:34%;">
  93. <a href="#middlePopover4" class="mui-btn mui-btn-block mui-btn-outlined filterlist2" >按最后回复排序<em class="mui-icon mui-icon-arrowdown"></em></a>
  94. </li>
  95. </ul>
  96. </div>
  97. <!--图文列表-->
  98. <div class="mui-card-content conblock" style="margin-top:0 ;">
  99. <ul class="mui-table-view protable">
  100. <li class="mui-table-view-cell mui-media">
  101. <div class="coutopicbox">
  102. <span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
  103. <div class="coustatus mui-pull-right">
  104. <span class="aimlabel">技术</span>
  105. <span class="status-1">进行中</span>
  106. <!--进行中"status-1" 待评价"status-2" 已完成"status-3"-->
  107. </div>
  108. </div>
  109. <a class="proinfor" href="chats.html">
  110. <span class="mui-badge mui-badge-danger">45</span>
  111. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  112. <div class="mui-media-body">
  113. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>
  114. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  115. <p class="listtit3">专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名</p>
  116. </div>
  117. </a>
  118. </li>
  119. <li class="mui-table-view-cell mui-media">
  120. <div class="coutopicbox">
  121. <span class="coutheme mui-ellipsis mui-pull-left"><span>回复:</span>关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
  122. <div class="coustatus mui-pull-right">
  123. <span class="aimlabel">其它</span>
  124. <span class="status-2">待评价</span>
  125. <!--进行中"status-1" 待评价"status-2" 已完成"status-3"-->
  126. </div>
  127. </div>
  128. <a class="proinfor" href="chats.html">
  129. <span class="mui-badge mui-badge-danger">1</span>
  130. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  131. <div class="mui-media-body">
  132. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>
  133. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  134. <p class="listtit3">专家姓名专家姓名专家姓名专家</p>
  135. </div>
  136. </a>
  137. </li>
  138. <li class="mui-table-view-cell mui-media">
  139. <div class="coutopicbox">
  140. <span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
  141. <div class="coustatus mui-pull-right">
  142. <span class="aimlabel">资源</span>
  143. <span class="status-3">已完成</span>
  144. <!--进行中"status-1" 待评价"status-2" 已完成"status-3"-->
  145. </div>
  146. </div>
  147. <a class="proinfor" href="chats.html">
  148. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  149. <div class="mui-media-body">
  150. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>
  151. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  152. <p class="listtit3">专家姓名专姓名专家姓名专家姓名专姓名专家姓名专家姓名</p>
  153. </div>
  154. </a>
  155. </li>
  156. <li class="mui-table-view-cell mui-media">
  157. <div class="coutopicbox">
  158. <span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
  159. <div class="coustatus mui-pull-right">
  160. <span class="aimlabel">资源</span>
  161. <span class="status-3">已完成</span>
  162. <!--进行中"status-1" 待评价"status-2" 已完成"status-3"-->
  163. </div>
  164. </div>
  165. <a class="proinfor" href="chats.html">
  166. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  167. <div class="mui-media-body">
  168. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>
  169. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  170. <p class="listtit3">专家姓名专姓名专家姓名专家姓名专姓名专家姓名专家姓名</p>
  171. </div>
  172. </a>
  173. </li>
  174. <li class="mui-table-view-cell mui-media">
  175. <div class="coutopicbox">
  176. <span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
  177. <div class="coustatus mui-pull-right">
  178. <span class="aimlabel">资源</span>
  179. <span class="status-3">已完成</span>
  180. <!--进行中"status-1" 待评价"status-2" 已完成"status-3"-->
  181. </div>
  182. </div>
  183. <a class="proinfor" href="chats.html">
  184. <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
  185. <div class="mui-media-body">
  186. <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>
  187. <p class="listtit2"><span>职称</span><span>职务</span><span>所属机构</span> | <span>所在地</span></p>
  188. <p class="listtit3">专家姓名专姓名专家姓名专家姓名专姓名专家姓名专家姓名</p>
  189. </div>
  190. </a>
  191. </li>
  192. </ul>
  193. </div>
  194. <div id="middlePopover1" class="mui-popover mui-popover1">
  195. <div class="mui-popover-arrow"></div>
  196. <div class="mui-scroll-wrapper">
  197. <div class="mui-scroll">
  198. <ul class="mui-table-view mui-table-view-radio">
  199. <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">全部</a></li>
  200. <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">我的需求</a></li>
  201. <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">收到咨询</a></li>
  202. </ul>
  203. </div>
  204. </div>
  205. </div>
  206. <div id="middlePopover2" class="mui-popover mui-popover2">
  207. <div class="mui-popover-arrow"></div>
  208. <div class="mui-scroll-wrapper">
  209. <div class="mui-scroll">
  210. <ul class="mui-table-view">
  211. <li class="mui-table-view-cell"><a href="#">技术咨询</a></li>
  212. <li class="mui-table-view-cell"><a href="#">资源咨询</a></li>
  213. <li class="mui-table-view-cell"><a href="#">其它事务</a></li>
  214. </ul>
  215. </div>
  216. </div>
  217. </div>
  218. <div id="middlePopover3" class="mui-popover mui-popover3">
  219. <div class="mui-popover-arrow"></div>
  220. <div class="mui-scroll-wrapper">
  221. <div class="mui-scroll">
  222. <ul class="mui-table-view">
  223. <li class="mui-table-view-cell"><a href="#">进行中</a></li>
  224. <li class="mui-table-view-cell"><a href="#">待评价</a></li>
  225. <li class="mui-table-view-cell"><a href="#">已完成</a></li>
  226. </ul>
  227. </div>
  228. </div>
  229. </div>
  230. <div id="middlePopover4" class="mui-popover mui-popover4">
  231. <div class="mui-popover-arrow"></div>
  232. <div class="mui-scroll-wrapper">
  233. <div class="mui-scroll">
  234. <ul class="mui-table-view">
  235. <li class="mui-table-view-cell"><a href="#">按最后回复排序</a></li>
  236. <li class="mui-table-view-cell"><a href="#">按发起时间排序</a></li>
  237. <li class="mui-table-view-cell"><a href="#">按完成时间排序</a></li>
  238. </ul>
  239. </div>
  240. </div>
  241. </div>
  242. </div>
  243. <script src="../js/public/mui.min.js"></script>
  244. <script type="text/javascript" charset="utf-8">
  245. mui.init({
  246. swipeBack: true //启用右滑关闭功能
  247. });
  248. mui('.mui-scroll-wrapper').scroll();
  249. mui('body').on('shown', '.mui-popover', function(e) {
  250. //console.log('shown', e.detail.id);//detail为当前popover元素
  251. });
  252. mui('body').on('hidden', '.mui-popover', function(e) {
  253. //console.log('hidden', e.detail.id);//detail为当前popover元素
  254. });
  255. </script>
  256. </body>
  257. </html>