cokingCoalE.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <!DOCTYPE html>
  2. <html lang="en">
  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=1" />
  7. <!-- 引入样式 -->
  8. <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
  9. <link rel="stylesheet" href="./styles/cokingCoalE.css" />
  10. <!-- 引入js -->
  11. <script src="./libs/vue@2.7.10.js"></script>
  12. <script src="./libs/datav.min.js"></script>
  13. <script src="./libs/echarts.min.js"></script>
  14. <script src="./libs/element-ui@2.15.9.js"></script>
  15. <script src="./libs/axios.min.js"></script>
  16. <script src="./js/request.js"></script>
  17. <script src="./libs/echarts-tooltip-carousel.js"></script>
  18. </head>
  19. <body>
  20. <div id="app">
  21. <dv-full-screen-container>
  22. <header class="my-header"><span>焦煤集团驾驶舱数字看板</span></header>
  23. <div class="main">
  24. <div class="top flex">
  25. <dv-border-box-8 class="top-left">
  26. <div class="center-title mx-auto flex flex-col justify-center">
  27. <div class="flex items-center items-center">
  28. <img src="./images/arrow.png" alt="" class="arrow">
  29. <span>技能大师工作室</span>
  30. </div>
  31. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  32. </div>
  33. <div class="flex item-tl mx-auto items-center justify-around">
  34. <div class="item-tl-item">
  35. <div>国家级</div>
  36. <div>
  37. <img src="./images/blue.png" alt="">
  38. <span style="color: #69C0FF;">1690</span>个
  39. <img src="./images/green.png" style="margin-left: 20px;" alt="">
  40. <span style="color: #43EDE3;">2046</span>个
  41. </div>
  42. </div>
  43. <div class="item-tl-item">
  44. <div>行业级</div>
  45. <div>
  46. <img src="./images/blue.png" alt="">
  47. <span style="color: #69C0FF;">2013</span>个
  48. <img src="./images/green.png" style="margin-left: 20px;" alt="">
  49. <span style="color: #43EDE3;">3400</span>个
  50. </div>
  51. </div>
  52. <div class="item-tl-item">
  53. <div>省级</div>
  54. <div>
  55. <img src="./images/blue.png" alt="">
  56. <span style="color: #69C0FF;">1380</span>个
  57. <img src="./images/green.png" style="margin-left: 20px;" alt="">
  58. <span style="color: #43EDE3;">2460</span>个
  59. </div>
  60. </div>
  61. <div class="item-tl-item">
  62. <div>集团级</div>
  63. <div>
  64. <img src="./images/blue.png" alt="">
  65. <span style="color: #69C0FF;">1012</span>个
  66. <img src="./images/green.png" style="margin-left: 20px;" alt="">
  67. <span style="color: #43EDE3;">3421</span>个
  68. </div>
  69. </div>
  70. </div>
  71. </dv-border-box-8>
  72. <dv-border-box-8 class="top-right">
  73. <div class="center-title mx-auto flex flex-col justify-center">
  74. <div class="flex items-center items-center">
  75. <img src="./images/arrow.png" alt="" class="arrow">
  76. <span>培训计划</span>
  77. </div>
  78. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  79. </div>
  80. <div class="flex item-tr mx-auto items-center justify-around" style="height: 80%;width: 100%;">
  81. <div class="item-tr-item">
  82. <div class="flex items-center " style="margin-bottom: 30px;">
  83. <img src="./images/rt1.png" alt="">
  84. <div>计划参训人数<span class="text-style" style="color: #69C0FF;">169</span>人</div>
  85. </div>
  86. <div class="flex items-center ">
  87. <img src="./images/rt2.png" alt="">
  88. <div>实际参训人数<span class="text-style" style="color: #43EDE3;">128</span>人</div>
  89. </div>
  90. </div>
  91. <dv-water-level-pond :config="config" style="width:150px;height:200px" />
  92. </div>
  93. </dv-border-box-8>
  94. </div>
  95. <div class="bottom flex">
  96. <dv-border-box-8 class="bottom-left">
  97. <div class="center-title mx-auto flex flex-col justify-center">
  98. <div class="flex items-center items-center">
  99. <img src="./images/arrow.png" alt="" class="arrow">
  100. <span>课程体系</span>
  101. </div>
  102. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  103. </div>
  104. <div class="aiQuality dis-flex flex-dir-column ">
  105. <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
  106. </div>
  107. </dv-border-box-8>
  108. <dv-border-box-8 class="bottom-right">
  109. <div class="center-title mx-auto flex flex-col justify-center">
  110. <div class="flex items-center items-center">
  111. <img src="./images/arrow.png" alt="" class="arrow">
  112. <span>讲师团队</span>
  113. </div>
  114. <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
  115. </div>
  116. <div class="rb-item">
  117. <div ref="echartR1" style="height:100%;width: 100%;"></div>
  118. </div>
  119. </dv-border-box-8>
  120. </div>
  121. </div>
  122. <div class="footer justify-center">
  123. <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
  124. </div>
  125. </dv-full-screen-container>
  126. </div>
  127. <script src="./js/cokingCoalE.js"></script>
  128. </body>
  129. </html>