index.html 4.7 KB

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