usability.html 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!-- 吉林市政府网站可用性实时监测 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>吉林市政府网站可用性实时监测</title>
  8. <link rel="stylesheet" type="text/css" href="/style/html.css" />
  9. <link rel="stylesheet" type="text/css" href="/style/base.css" />
  10. </head>
  11. <body class="black-bg">
  12. <!-- 头部 Start -->
  13. <div class="header flex-row flex-y-center">
  14. <h1>吉林市政府网站可用性实时监测</h1>
  15. </div>
  16. <!-- 头部 End -->
  17. <!-- 内容 Start -->
  18. <div class="container">
  19. <!-- 上方总数 Start -->
  20. <div class="row-top flex-row flex-y-center">
  21. <!-- <div class="row-top-list flex-row flex-x-center">-->
  22. <!-- <span>网站总数</span>-->
  23. <!-- <span>25</span>-->
  24. <!-- </div>-->
  25. <!-- <div class="row-top-list flex-row flex-x-center">-->
  26. <!-- <span>正常</span>-->
  27. <!-- <span>25</span>-->
  28. <!-- </div>-->
  29. <!-- <div class="row-top-list flex-row flex-x-center">-->
  30. <!-- <span>故障</span>-->
  31. <!-- <span>25</span>-->
  32. <!-- </div>-->
  33. </div>
  34. <!-- 上方总数 End -->
  35. <!-- 正文 Start -->
  36. <div class="content">
  37. <img class="x-line" src="img/bg-line.png" alt="">
  38. <div class="content-list flex-row">
  39. <div class="content-list-left flex-col">
  40. <h4>可用性实时监测情况</h4>
  41. <div class="content-list-body">
  42. <ul>
  43. <li class="content-list-body-tit">
  44. <div class="w50"><h5>站点名称</h5></div>
  45. <div class="w25"><h5>监测时间</h5></div>
  46. <div class="w25"><h5>网站状态</h5></div>
  47. </li>
  48. <li th:each="item : ${dataSource}">
  49. <div class="w50"><span class="h-span" th:text="${item.siteName}"></span></div>
  50. <div class="w25"><span class="h-span" th:text="${item.monitorTime}"></span></div>
  51. <div class="w25"><span class="h-span" th:text="${item.status}"></span></div>
  52. <img class="table-triangle-top" src="img/triangle.png">
  53. <img class="table-triangle-btm" src="img/triangle.png">
  54. </li>
  55. </ul>
  56. </div>
  57. </div>
  58. <div class="content-list-right flex-col">
  59. <h4>本日无法访问网站列表</h4>
  60. <div class="content-list-body">
  61. <ul>
  62. <li class="content-list-body-tit">
  63. <div class="w50"><h5>站点名称</h5></div>
  64. <div class="w25"><h5>最近一次检测时间</h5></div>
  65. <div class="w25"><h5>本日无法访问次数</h5></div>
  66. </li>
  67. <li th:each="item : ${dataAccess}">
  68. <div class="w50"><span class="h-span" th:text="${item.siteName}"></span></div>
  69. <div class="w25"><span class="h-span" th:text="${item.accessCountFail}"></span></div>
  70. <div class="w25"><span class="h-span" th:text="${item.lastMonitorTime}"></span></div>
  71. <img class="table-triangle-top" src="img/triangle.png">
  72. <img class="table-triangle-btm" src="img/triangle.png">
  73. </li>
  74. </ul>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <!-- 正文 End -->
  80. </div>
  81. <!-- 内容End -->
  82. </body>
  83. </html>