Нет описания

index_home.html 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../css/mui.min.css" rel="stylesheet" />
  8. <link href="../css/app.css" rel="stylesheet" />
  9. <link href="../css/iconfont.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <!-- 主页面标题 -->
  13. <header class="mui-bar mui-bar-nav toptitbox">
  14. <div class="searchbox bgRadius" id="search">
  15. <em class="mui-icon mui-icon-search searchtxt" ><span>搜索专家、研发资源</span></em>
  16. <!--<input type="search" class="mui-input-clear searchtxt" placeholder="搜索专家、合作资源">-->
  17. </div>
  18. </header>
  19. <!-- 主页面内容容器 -->
  20. <div class="mui-content">
  21. <!-- 主界面具体展示内容 -->
  22. <!--图片轮播-->
  23. <div id="slider" class="mui-slider" >
  24. <div class="mui-slider-group mui-slider-loop">
  25. <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
  26. <div class="mui-slider-item mui-slider-item-duplicate">
  27. <a >
  28. <img src="../images/banner/4.jpg">
  29. </a>
  30. </div>
  31. <!-- 第一张 -->
  32. <div class="mui-slider-item">
  33. <a >
  34. <img src="../images/banner/1.jpg">
  35. </a>
  36. </div>
  37. <!-- 第二张 -->
  38. <div class="mui-slider-item">
  39. <a >
  40. <img src="../images/banner/2.jpg">
  41. </a>
  42. </div>
  43. <!-- 第三张 -->
  44. <div class="mui-slider-item">
  45. <a >
  46. <img src="../images/banner/3.jpg">
  47. </a>
  48. </div>
  49. <!-- 第四张 -->
  50. <div class="mui-slider-item">
  51. <a >
  52. <img src="../images/banner/4.jpg">
  53. </a>
  54. </div>
  55. <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
  56. <div class="mui-slider-item mui-slider-item-duplicate">
  57. <a >
  58. <img src="../images/banner/1.jpg">
  59. </a>
  60. </div>
  61. </div>
  62. <div class="mui-slider-indicator">
  63. <div class="mui-indicator mui-active"></div>
  64. <div class="mui-indicator"></div>
  65. <div class="mui-indicator"></div>
  66. <div class="mui-indicator"></div>
  67. </div>
  68. </div>
  69. <!-- 九宫格排版-->
  70. <div class="mui-card-content conblock">
  71. <div class="maintitbox">
  72. <div class="maintit">热门领域</div>
  73. </div>
  74. <ul class="mui-table-view mui-grid-view mui-grid-9 gridbg">
  75. <li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="材料失效与保护">
  76. <a >
  77. <div class="fieldicon">
  78. <img src="../images/field_icon/field05.png"/>
  79. </div>
  80. <div class="mui-media-body">材料失效与保护</div>
  81. </a>
  82. </li>
  83. <li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="材料表面与界面">
  84. <a >
  85. <div class="fieldicon">
  86. <img src="../images/field_icon/field02.png"/>
  87. </div>
  88. <div class="mui-media-body">材料表面与界面</div>
  89. </a>
  90. </li>
  91. <li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="黑色金属及其合金">
  92. <a >
  93. <div class="fieldicon">
  94. <img src="../images/field_icon/field07.png"/>
  95. </div>
  96. <div class="mui-media-body">黑色金属及其合金</div>
  97. </a>
  98. </li>
  99. <li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="金属材料">
  100. <a >
  101. <div class="fieldicon">
  102. <img src="../images/field_icon/field18.png"/>
  103. </div>
  104. <div class="mui-media-body">金属材料</div>
  105. </a>
  106. </li>
  107. <li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="有色金属及其合金">
  108. <a >
  109. <div class="fieldicon">
  110. <img src="../images/field_icon/field04.png"/>
  111. </div>
  112. <div class="mui-media-body">有色金属及其合金</div>
  113. </a>
  114. </li>
  115. <li class="mui-table-view-cell mui-media mui-col-xs-4" data-title="材料检测与分析技术">
  116. <a >
  117. <div class="fieldicon">
  118. <img src="../images/field_icon/field16.png"/>
  119. </div>
  120. <div class="mui-media-body">材料检测与分析技术</div>
  121. </a>
  122. </li>
  123. </ul>
  124. </div>
  125. <!--图文列表-->
  126. <div class="mui-card-content conblock">
  127. <div class="maintitbox">
  128. <div class="maintit">热门专家</div>
  129. </div>
  130. <div id="pullrefresh" class="mui-scroll-wrapper" >
  131. <div class="mui-scroll" >
  132. <!--数据列表-->
  133. <ul class="mui-table-view mui-table-view-chevron list">
  134. </ul>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. <script src="../js/public/mui.min.js"></script>
  140. <script src="../js/public/base.js"></script>
  141. <script src="../js/index.js"></script>
  142. </body>
  143. </html>