district_mobile.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=0.5">
  7. <link href="img/favicon.ico" rel="shortcut icon">
  8. <link rel="stylesheet" href="./layui/css/layui.css">
  9. <link rel="stylesheet" href="./css/district_mobile.css">
  10. <title>重庆市南岸区人民政府--地图搜索页</title>
  11. </head>
  12. <body>
  13. <div class="head">
  14. <!-- 左边的logo和文字 -->
  15. <div class="left-logo">
  16. <img class="logo-img" src="img/map-logo.png" style="width: 446px">
  17. </div>
  18. <!-- 右边的搜索框 -->
  19. </div>
  20. <div class="main">
  21. <div class="right-search">
  22. <div class="layui-tab" style="width: 500px;">
  23. <ul class="layui-tab-title search-change">
  24. <li class="layui-this">搜索</li>
  25. <li>公交</li>
  26. <li>自驾</li>
  27. </ul>
  28. <div class="layui-tab-content content-input">
  29. <div class="layui-tab-item layui-show">
  30. <div class="input-icon">
  31. <input type="text" name="" id="" value="" class="inp" />
  32. <img src="img/ss2.png" class="inp-icon1">
  33. </div>
  34. </div>
  35. <!-- 点击公交出现的内容 -->
  36. <div class="layui-tab-item">
  37. <div class="input-icon">
  38. <input type="text" id="gj-one" value="" />
  39. <div id="change-word"></div>
  40. <input type="text" name="" id="gj-two" value="" />
  41. <img src="img/ss2.png" class="inp-icon2" id="inp-icon2">
  42. </div>
  43. </div>
  44. <!-- 点击自驾出现的内容 -->
  45. <div class="layui-tab-item">
  46. <div class="input-icon">
  47. <input type="text" name="" id="zj-one" value="" />
  48. <div id="word-change"></div>
  49. <input type="text" name="" id="zj-two" value="" />
  50. <img src="img/ss2.png" class="inp-icon3" id="inp-icon3">
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="left-map" style="background-color: white;">
  57. <!-- 受理场所和查阅场所 -->
  58. <div class="layui-tab layui-tab-brief show-first" lay-filter="docDemoTabBrief">
  59. <ul class="layui-tab-title top-title">
  60. <li class="layui-this">
  61. <img src="img/slcs1.png">
  62. <img src="img/slcs2.png" class="hideIcon">
  63. 受理场所
  64. </li>
  65. <li>
  66. <img src="img/sycs1.png" class="hideIcon">
  67. <img src="img/sycs2.png">
  68. 查阅场所
  69. </li>
  70. <div class="layui-icon layui-icon-up arrows"></div>
  71. </ul>
  72. <div class="layui-tab-content">
  73. <div class="layui-tab-item layui-show">
  74. <div class="layui-tab">
  75. <ul class="layui-tab-title second-title">
  76. <li>区级部门</li>
  77. <li class="layui-this">街镇</li>
  78. </ul>
  79. <div class="layui-tab-content hidePadding">
  80. <div class="layui-tab-item hidePadding">
  81. <div class="districtLevel"></div>
  82. <div class="textThird"></div>
  83. </div>
  84. <div class="layui-tab-item layui-show hidePadding">
  85. <div class="text-first">
  86. <p class="tab alltotal">全部</p>
  87. <p>南坪镇</p>
  88. <p>涂山镇</p>
  89. <p>鸡冠石镇</p>
  90. <p>峡口镇</p>
  91. <p>长生桥镇</p>
  92. <p>迎龙镇</p>
  93. <p>广阳镇</p>
  94. <p>南坪街道</p>
  95. <p>花园路街道</p>
  96. <p>海棠溪街道</p>
  97. <p>铜元局街道</p>
  98. <p>龙门浩街道</p>
  99. <p>弹子石街道</p>
  100. <p>南山街道</p>
  101. <p>天文街道</p>
  102. </div>
  103. <div class="text-second" id="text-second"></div>
  104. <div class="text-third"></div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="layui-tab-item">
  110. <div class="layui-tab">
  111. <ul class="layui-tab-title second-title2">
  112. <li class="layui-this">区级部门</li>
  113. <li>街镇</li>
  114. </ul>
  115. <div class="layui-tab-content hidePadding">
  116. <div class="layui-tab-item hidePadding layui-show">
  117. <div class=" districtLevel2"></div>
  118. <div class="textThird2"></div>
  119. </div>
  120. <div class="layui-tab-item">
  121. <div class="text-first">
  122. <p class="tab alltotal">暂无数据</p>
  123. <!-- <p>南坪镇</p>
  124. <p>涂山镇</p>
  125. <p>鸡冠石镇</p>
  126. <p>峡口镇</p>
  127. <p>长生桥镇</p>
  128. <p>迎龙镇</p>
  129. <p>广阳镇</p>
  130. <p>南坪街道</p>
  131. <p>花园路街道</p>
  132. <p>海棠溪街道</p>
  133. <p>铜元局街道</p>
  134. <p>龙门浩街道</p>
  135. <p>弹子石街道</p>
  136. <p>南山街道</p>
  137. <p>天文街道</p> -->
  138. </div>
  139. <div class="text2-second"></div>
  140. <div class="text2-third"></div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <!-- 点击公交搜索出现的路径选择 -->
  148. <div class="show-second">
  149. <div class="title-second">
  150. <div class="layui-icon layui-icon-down arrowss"></div>
  151. <h6>搜索</h6>
  152. <button type="button" class="btn-back">返回</button>
  153. </div>
  154. <div class="content-second">
  155. <div id="start"></div>
  156. <img src="img/right-grey.png">
  157. <div id="end"></div>
  158. </div>
  159. <div class="layui-tab content-third">
  160. <ul class="layui-tab-title content-title">
  161. <li class="layui-this">推荐路线</li>
  162. <li>少步行</li>
  163. <li>少换乘</li>
  164. <li>时间最短</li>
  165. </ul>
  166. <div class="layui-tab-content" id="result"></div>
  167. </div>
  168. </div>
  169. <!-- 点击自驾搜索出现的路径选择 -->
  170. <div class="show-third">
  171. <div class="title-second">
  172. <div class="layui-icon layui-icon-down arrowss"></div>
  173. <h6>搜索</h6>
  174. <button type="button" class="back-btn">返回</button>
  175. </div>
  176. <div class="content-second">
  177. <div id="start2"></div>
  178. <img src="img/right-grey.png">
  179. <div id="end2"></div>
  180. </div>
  181. <div class="layui-tab content-third">
  182. <ul class="layui-tab-title main-third" id="zjxz">
  183. <li class="layui-this">推荐路线</li>
  184. <li>最短路程</li>
  185. <li>不走高速</li>
  186. </ul>
  187. <div class="layui-tab-content" id="result1"></div>
  188. </div>
  189. </div>
  190. <!-- 点击搜索出现的页面 -->
  191. <div class="show-fourth">
  192. <div class="title-second">
  193. <div class="layui-icon layui-icon-down arrowss"></div>
  194. <h6>搜索</h6>
  195. <button type="button" class="backBtn">返回</button>
  196. </div>
  197. <div class="search-result" id="search-result">
  198. <div class="textSecond"></div>
  199. <div class="textFourth"></div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. <div class="right-map" id="right-map"></div>
  205. </div>
  206. <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=V3e4UjE6ydU2lKSEuHaxAYrqszcW3DyG"></script>
  207. <script type="text/javascript" src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js">
  208. </script>
  209. <script type="text/javascript" src="//api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js">
  210. </script>
  211. <script type="text/javascript" src="//api.map.baidu.com/library/MarkerManager/1.2/src/MarkerManager_min.js">
  212. </script>
  213. <script type="text/javascript" src="./layui/layui.js"></script>
  214. <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
  215. <script type="text/javascript" src="./js/district_mobile.js"></script>
  216. </body>
  217. </html>