index.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>index</title>
  6. <script type="text/javascript" src="js/jquery.js"></script>
  7. <script type="text/javascript" src="js/echarts.min.js"></script>
  8. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script><script type="text/javascript" src="js/js.js"></script>
  9. <link rel="stylesheet" href="css/style.css">
  10. </head>
  11. <body>
  12. <div class="head clearfix">
  13. <h1 class="pulll_left">某公司大数据展示模版标题</h1>
  14. <div class="menu menu2 pulll_left">
  15. <ul>
  16. <li><a href="#">导航标题</a></li>
  17. <li><a href="#">导航标题样式</a></li>
  18. <li><a href="#">导航标题</a></li>
  19. <li><a href="#">导航标题</a></li>
  20. <li><a href="#">导航标题</a></li>
  21. <li><a href="#">导航标题</a></li>
  22. </ul>
  23. </div>
  24. <div class="time" id="showTime">2018/6/12 17:00:12</div>
  25. </div>
  26. <div class="mainbox">
  27. <ul class="clearfix nav1">
  28. <li style="width: 25%">
  29. <div class="box">
  30. <div class="tit">模块标题</div>
  31. <div class="boxnav" id="echart1">
  32. </div>
  33. </div>
  34. <div class="box">
  35. <div class="tit">模块标题</div>
  36. <div class="boxnav">
  37. <ul class="zjia">
  38. <li>
  39. <img src="images/head.jpg">
  40. <h3>习近平</h3>
  41. <span>解决问题:9102</span>
  42. <p>现任中国共产党中央委员会总书记,中共中央军事委员会主席,中华人民共和国主席,中华人民共和国中央军事委员会主席。</p>
  43. </li>
  44. <li>
  45. <img src="images/head.jpg">
  46. <h3>习近平</h3>
  47. <span>解决问题:9102</span>
  48. <p>现任中国共产党中央委员会总书记,中共中央军事委员会主席,中华人民共和国主席,中华人民共和国中央军事委员会主席。</p>
  49. </li>
  50. <li>
  51. <img src="images/head.jpg">
  52. <h3>习近平</h3>
  53. <span>解决问题:9102</span>
  54. <p>现任中国共产党中央委员会总书记,中共中央军事委员会主席,中华人民共和国主席,中华人民共和国中央军事委员会主席。</p>
  55. </li>
  56. <li>
  57. <img src="images/head.jpg">
  58. <h3>习近平</h3>
  59. <span>解决问题:9102</span>
  60. <p>现任中国共产党中央委员会总书记,中共中央军事委员会主席,中华人民共和国主席,中华人民共和国中央军事委员会主席。</p>
  61. </li>
  62. <li>
  63. <img src="images/head.jpg">
  64. <h3>习近平</h3>
  65. <span>解决问题:9102</span>
  66. <p>现任中国共产党中央委员会总书记,中共中央军事委员会主席,中华人民共和国主席,中华人民共和国中央军事委员会主席。</p>
  67. </li>
  68. <li>
  69. <img src="images/head.jpg">
  70. <h3>习近平</h3>
  71. <span>解决问题:9102</span>
  72. <p>现任中国共产党中央委员会总书记,中共中央军事委员会主席,中华人民共和国主席,中华人民共和国中央军事委员会主席。</p>
  73. </li>
  74. </ul>
  75. </div>
  76. </div>
  77. </li>
  78. <li style="width: 25%">
  79. <div class="box">
  80. <div class="boxnav" id="map" style="height:433px;">
  81. </div>
  82. </div>
  83. <div class="box">
  84. <div class="tit">模块标题</div>
  85. <div class="boxnav" id="echart5"></div>
  86. </div>
  87. </li>
  88. <li style="width: 25%">
  89. <div class="box">
  90. <div class="tit">模块标题</div>
  91. <div class="boxnav" id="">
  92. <div style="float: left; width: 50%; height: 100%; padding: 0 15px; " id="echart2"></div>
  93. <div style="float: left; width: 50%; height: 100%; padding: 0 15px;" id="echart3"></div>
  94. </div>
  95. </div>
  96. <div class="box">
  97. <div class="tit">模块标题</div>
  98. <div class="boxnav" id="echart6">
  99. </div>
  100. </div>
  101. </li>
  102. <li style="width: 25%">
  103. <div class="box">
  104. <div class="tit">模块标题</div>
  105. <div class="boxnav" id="echart4" >
  106. </div>
  107. </div>
  108. <div class="box">
  109. <div class="tit">模块标题</div>
  110. <div class="boxnav" id="echart7">
  111. </div>
  112. </div>
  113. </li>
  114. </ul>
  115. </div>
  116. <script>
  117. $(function(){
  118. var map = new BMap.Map("map"); // 创建Map实例
  119. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
  120. var size1 = new BMap.Size(10, 50);
  121. map.setCurrentCity("北京");
  122. map.enableScrollWheelZoom(true);
  123. //设备地图颜色
  124. var mapStyle={
  125. style:"midnight"
  126. };
  127. map.setMapStyle(mapStyle);
  128. var pt1 = new BMap.Point(116.304, 39.915);
  129. var pt2 = new BMap.Point(116.404, 39.985);
  130. var myIcon = new BMap.Icon("images/head.jpg", new BMap.Size(32,32));
  131. var marker1 = new BMap.Marker(pt1,{icon:myIcon});
  132. var marker2 = new BMap.Marker(pt2,{icon:myIcon});
  133. map.addOverlay(marker1);
  134. map.addOverlay(marker2);
  135. })
  136. </script>
  137. <script>
  138. var t = null;
  139. t = setTimeout(time,1000);//開始运行
  140. function time()
  141. {
  142. clearTimeout(t);//清除定时器
  143. dt = new Date();
  144. var y=dt.getFullYear();
  145. var mt=dt.getMonth()+1;
  146. var day=dt.getDate();
  147. var h=dt.getHours();//获取时
  148. var m=dt.getMinutes();//获取分
  149. var s=dt.getSeconds();//获取秒
  150. document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+"";
  151. t = setTimeout(time,1000); //设定定时器,循环运行
  152. }
  153. </script>
  154. </body>
  155. </html>