index.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <!--
  2. 本资源来源于云码资源淘宝店铺
  3. 访问地址:https://shop188702750.taobao.com
  4. 更多超优质资源欢迎访问
  5. -->
  6. <!doctype html>
  7. <html>
  8. <head>
  9. <meta charset="utf-8">
  10. <script type="text/javascript" src="js/jquery.js"></script>
  11. <script type="text/javascript" src="js/echarts.min.js"></script>
  12. <script type="text/javascript" src="js/js.js"></script>
  13. <script type="text/javascript" src="js/jquery.limarquee.js"></script>
  14. <script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
  15. <link rel="stylesheet" href="css/comon0.css">
  16. </head>
  17. <body>
  18. <div style="background:#000d4a url(images/bg.jpg) center top;">
  19. <div class="loading">
  20. <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
  21. </div>
  22. <div class="back"></div>
  23. <div class="head">
  24. <h1>大数据可视化展示平台通用模板</h1>
  25. <div class="weather"><span id="showTime"></span></div>
  26. </div>
  27. <script>
  28. var t = null;
  29. t = setTimeout(time,1000);//開始运行
  30. function time()
  31. {
  32. clearTimeout(t);//清除定时器
  33. dt = new Date();
  34. var y=dt.getFullYear();
  35. var mt=dt.getMonth()+1;
  36. var day=dt.getDate();
  37. var h=dt.getHours();//获取时
  38. var m=dt.getMinutes();//获取分
  39. var s=dt.getSeconds();//获取秒
  40. document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+h+"时"+m+"分"+s+"秒";
  41. t = setTimeout(time,1000); //设定定时器,循环运行
  42. }
  43. </script>
  44. <div class="mainbox">
  45. <ul class="clearfix">
  46. <li>
  47. <div class="boxall" style="height:545px;">
  48. <div class="navboxall" >
  49. <div class="sycm">
  50. <ul class="clearfix">
  51. <li>
  52. <h2>22864</h2>
  53. <span>总金额</span></li>
  54. <li>
  55. <h2>1572</h2>
  56. <span>数量</span></li>
  57. </ul>
  58. </div>
  59. <ul class="jindu clearfix">
  60. <div>1000</div>
  61. <div>2000</div>
  62. <li id="zb1"></li>
  63. <li id="zb2"></li>
  64. <li id="zb3"></li>
  65. <li id="zb4"></li>
  66. </ul>
  67. </div>
  68. </div>
  69. </li>
  70. <li>
  71. <div class="boxall" style="height:545px">
  72. <div class="alltitle">标题样式</div>
  73. <div class="navboxall" id="echart4"></div>
  74. </div>
  75. </li>
  76. <li>
  77. <div class="boxall" style="height:260px">
  78. <div class="alltitle">标题样式</div>
  79. <div class="navboxall" id="echart1"> </div>
  80. </div>
  81. <div class="boxall" style="height:270px">
  82. <div class="alltitle">标题样式</div>
  83. <div class="navboxall" id="echart2"> </div>
  84. </div>
  85. </li>
  86. </ul>
  87. <ul class="clearfix">
  88. <li>
  89. <div class="boxall" style="height:390px;">
  90. <div class="alltitle">标题样式</div>
  91. <div class="navboxall" >
  92. <div class="wraptit"> <span>订单号</span><span>订单金额</span><span>计划时间</span><span>当前状态</span> </div>
  93. <div class="wrap">
  94. <ul>
  95. <li>
  96. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  97. </li>
  98. <li>
  99. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  100. </li>
  101. <li>
  102. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  103. </li>
  104. <li>
  105. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  106. </li>
  107. <li>
  108. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  109. </li>
  110. <li>
  111. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  112. </li>
  113. <li>
  114. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  115. </li>
  116. <li>
  117. <p><span>100021415</span><span>199</span><span>手机</span><span>18小时</span></p>
  118. </li>
  119. </ul>
  120. </div>
  121. </div>
  122. </div>
  123. </li>
  124. <li style="width:38%">
  125. <div class="boxall" style="height:390px">
  126. <div class="alltitle">标题样式</div>
  127. <div class="navboxall" id="echart3"></div>
  128. </div>
  129. </li>
  130. <li style="width:38%">
  131. <div class="boxall" style="height:390px">
  132. <div class="alltitle">标题样式</div>
  133. <div class="navboxall" id="echart5"></div>
  134. </div>
  135. </li>
  136. </ul>
  137. </div>
  138. </div>
  139. <!--青岛 研 锦 网 络 科技有限公司 版权所有-->
  140. <script>
  141. $(function(){
  142. $('.wrap').liMarquee({
  143. direction: 'up',//身上滚动
  144. //runshort: false,//内容不足时不滚动
  145. scrollamount: 20//速度
  146. });
  147. });
  148. </script>
  149. </body>
  150. </html>