index.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!--
  2. 访问地址:https://paycloud.vip
  3. -->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>互联网+惠民服务平台</title>
  9. <link rel="stylesheet" href="css/public.css" />
  10. <link rel="stylesheet" href="css/fq.css" />
  11. </head>
  12. <body>
  13. <div class="background-img" id="mainbody">
  14. <div class="todayTimeBox">
  15. <div class="todayTime">
  16. <span>2018年6月28日</span>
  17. <span>晴</span>
  18. <span>12:30</span>
  19. </div>
  20. </div>
  21. <div class="mainbody" id="">
  22. <div class="leftContent">
  23. <div class="serviceItem"></div>
  24. <div class="serviceForm">
  25. <div class="seHeader">
  26. <span>
  27. <p class="p-1">服务订单情况</p>
  28. <p class="p-2">Service order status</p>
  29. </span>
  30. <span>\02</span>
  31. </div>
  32. <div class="statusList">
  33. <ul class="seTable">
  34. <li>时间</li>
  35. <li>服务对象</li>
  36. <li>服务类型</li>
  37. <li>服务组织</li>
  38. <li>状态</li>
  39. </ul>
  40. <div id="orderItems" class="outlineBorder">
  41. <!--<ul class="rolling rolStyle">
  42. <li>2018/12/11 12:01</li>
  43. <li>杨久量</li>
  44. <li>上门理发</li>
  45. <li>义工联合会</li>
  46. <li>已上线</li>
  47. </ul>-->
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="centerContent">
  53. <div class="sumDot">
  54. <span id="东三新村" style="top: 173px;left: 424px;"></span>
  55. <span id="屠家坞村" style="top: 181px;left: 454px;"></span>
  56. <span id="马岭村" style="top: 216px;left: 418px;"></span>
  57. <span id="西联村" style="top: 223px;left: 454px;"></span>
  58. <span id="大干溪村" style="top: 324px;left: 380px;"></span>
  59. <span id="新东坞村" style="top: 324px;left: 420px;"></span>
  60. <span id="大溪村" style="top: 314px;left: 532px;"></span>
  61. <span id="梅苑村" style="top: 376px;left: 323px;"></span>
  62. <span id="先进村" style="top: 367px;left: 250px;"></span>
  63. <span id="乐山村" style="top: 367px;left: 450px;"></span>
  64. <span id="杜黄新村" style="top: 351px;left: 178px;"></span>
  65. <span id="三江村" style="top: 402px;left: 200px;"></span>
  66. <span id="霞朗桥村" style="top: 428px;left: 156px;"></span>
  67. <span id="陈家村" style="top: 462px;left: 226px;"></span>
  68. <span id="天竺社区" style="top: 433px;left: 263px;"></span>
  69. <span id="百树社区" style="top: 464px;left: 301px;"></span>
  70. <span id="齐东村" style="top: 472px;left: 344px;"></span>
  71. <span id="全堂村" style="top: 455px;left: 430px;"></span>
  72. <span id="魏廉村" style="top: 428px;left: 95px;"></span>
  73. <span id="楼家村" style="top: 461px;left: 168px;"></span>
  74. <span id="枫一村" style="top: 478px;left: 207px;"></span>
  75. <span id="海角村" style="top: 515px;left: 268px;"></span>
  76. <span id="洄村" style="top: 544px;left: 166px;"></span>
  77. <span id="西奕村" style="top: 537px;left: 86px;"></span>
  78. <span id="新择湖村" style="top: 569px;left: 86px;"></span>
  79. <span id="乐桥村" style="top: 566px;left: 134px;"></span>
  80. <span id="永安新村" style="top: 596px;left: 251px;"></span>
  81. <span id="阳春村" style="top: 660px;left: 97px;"></span>
  82. <span id="永宁村" style="top: 730px;left: 121px;"></span>
  83. <span id="枫源村" style="top: 649px;left: 194px;"></span>
  84. <span id="钟山村" style="top: 541px;left: 303px;"></span>
  85. </div>
  86. <iframe class="implantation" id="implantation" src="fqMap.svg" frameborder="0"></iframe>
  87. </div>
  88. <div class="rightContent">
  89. <div class="breathe">
  90. <div class="seHeader">
  91. <span>
  92. <p class="p-1">呼吸及服务情况</p>
  93. <p class="p-2">Service order status</p>
  94. </span>
  95. <span>\03</span>
  96. </div>
  97. <div class="serData">
  98. <div class="serDataLeft">
  99. <div><span class="serNum">80</span>单</div>
  100. <p>惠民服务订单数</p>
  101. </div>
  102. <div class="serDataLeft">
  103. <div><span class="serNum">3450</span>单</div>
  104. <p>当前呼入总量</p>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="phoneCall">
  109. <div class="seHeader">
  110. <span>
  111. <p class="p-1">电话呼入情况分析</p>
  112. <p class="p-2">Telephone call analysis</p>
  113. </span>
  114. <span>\04</span>
  115. </div>
  116. <div class="phoneNum" id="phoneNum"></div>
  117. <div class="brokenLine" id="brokenLine"></div>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <script src="js/jquery.min.js"></script>
  123. <script src="js/echarts.min.js"></script>
  124. <script src="js/fq.js"></script>
  125. <script>
  126. var lazyFun;
  127. function init(el, width, height) {
  128. var _el = document.getElementById(el);
  129. var hScale = window.innerHeight / height;
  130. var wScale = window.innerWidth / width;
  131. _el.style.transform = 'scale(' + wScale + ',' + hScale + ')'
  132. }
  133. init('mainbody', 1920, 1080);
  134. window.onresize = function() {
  135. clearTimeout(lazyFun);
  136. lazyFun = setTimeout(function() {
  137. init('mainbody', 1920, 1080)
  138. }, 600);
  139. };
  140. </script>
  141. </body>
  142. </html>