<!-- 吉林市政府网站可用性实时监测 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉林市政府网站可用性实时监测</title>
    <link rel="stylesheet" type="text/css" href="/style/html.css" />
    <link rel="stylesheet" type="text/css" href="/style/base.css" />
</head>
<body class="black-bg">
    <!-- 头部 Start -->
    <div class="header flex-row  flex-y-center">
        <h1>吉林市政府网站可用性实时监测</h1>
    </div>
    <!-- 头部 End -->
    <!-- 内容 Start -->
    <div class="container">
       <!-- 上方总数 Start -->
       <div class="row-top flex-row flex-y-center">
          <div class="row-top-list flex-row flex-x-center">
            <span>网站总数</span>
            <span>25</span>
          </div>
          <div class="row-top-list flex-row flex-x-center">
            <span>正常</span>
            <span>25</span>
          </div>
          <div class="row-top-list flex-row flex-x-center">
            <span>故障</span>
            <span>25</span>
          </div>
       </div>
       <!-- 上方总数 End -->

       <!-- 正文 Start -->
       <div class="content">
          <img class="x-line" src="img/bg-line.png" alt="">
          <div class="content-list flex-row">
            <div class="content-list-left flex-col">
              <h4>可用性实时监测情况</h4>
              <div class="content-list-body">
                <ul>
                  <li class="content-list-body-tit">
                    <div class="w50"><h5>站点名称</h5></div>
                    <div class="w25"><h5>监测时间</h5></div>
                    <div class="w25"><h5>网站状态</h5></div>
                  </li>
                  <li th:each="item : ${dataSource}">
                      <div class="w50"><span class="h-span" th:text="${item.siteName}"></span></div>
                    <div class="w25"><span class="h-span" th:text="${item.monitorTime}"></span></div>
                      <div class="w25"><span class="h-span" th:text="${item.status}"></span></div>

                      <img class="table-triangle-top" src="img/triangle.png">
                      <img class="table-triangle-btm" src="img/triangle.png">
                  </li>
                </ul>
              </div>
            </div>
            <div class="content-list-right flex-col">
              <h4>本日无法访问网站列表</h4>
              <div class="content-list-body">
                <ul>
                  <li class="content-list-body-tit">
                    <div class="w50"><h5>站点名称</h5></div>
                    <div class="w25"><h5>最近一次检测时间</h5></div>
                    <div class="w25"><h5>本日无法访问次数</h5></div>
                  </li>
                    <li th:each="item : ${dataSource}">
                        <div class="w50"><span class="h-span" th:text="${item.siteName}"></span></div>
                        <div class="w25"><span class="h-span" th:text="${item.monitorTime}"></span></div>
                        <div class="w25"><span class="h-span" th:text="${item.status}"></span></div>
                        <img class="table-triangle-top" src="img/triangle.png">
                        <img class="table-triangle-btm" src="img/triangle.png">
                    </li>

                </ul>
              </div>
            </div>
          </div>
       </div>
       <!-- 正文 End -->
    </div>
    <!-- 内容End -->
</body>
</html>