<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
        ul,li,img,h4,a{
            padding: 0;
            margin: 0;
            font-weight: normal;
            list-style: none;
            text-decoration: none;
        }
        .jilinKsh{
            width: 80%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            justify-content:space-between;
        }
        .jilinKsh li{
            width: 25%;
            margin:30px 0 0 0;
        }
        .jilinKsh li a{
            display: block;
            width: 90%;
            background: #fff;
            border-radius: 20px;
            padding:30px 0 50px 0;
            text-align: center;
        }
        .jilinKsh li a img{
            display: block;
            width: 25%;
            margin: 0 auto 20px auto;
        }
        .jilinKsh li a h4{
            font-size: 18px;
            color: #333;
        }
    </style>
</head>

<body class="gray-bg" style="background:#f3f3f4">
<ul class="jilinKsh">
    <li id="clickOne">
        <a href="http://localhost:16006/usability">
            <img src="/img/zbjc.png">
            <h4>网站可用性实时监测</h4>
        </a>
    </li>
    <li id="clickTwo">
        <a href="http://localhost:16006/websiteAccess">
            <img src="/img/fwl.png">
            <h4>网站访问情况监测</h4>
        </a>
    </li>
    <li id="clickThree">
        <a href="http://localhost:16006/misunderstanding">
            <img src="/img/cbz.png">
            <h4>网站错别字监测</h4>
        </a>
    </li>
    <li id="clickFour">
        <a href="http://localhost:16006/staggeredChain">
            <img src="/img/cl.png">
            <h4>网站错误链接监测</h4>
        </a>
    </li>
    <li id="clickFive">
        <a href="http://localhost:16006/censusIndicators">
            <img src="/img/zbjc.png">
            <h4>网站普查指标监测</h4>
        </a>
    </li>
    <li id="clickSix">
        <a href="http://localhost:16006/dailyUpdateVolume">
            <img src="/img/gx.png">
            <h4>网站日更新量排行监测</h4>
        </a>
    </li>
    <li id="clickSeven">
        <a href="http://localhost:16006/dailyVisits">
            <img src="/img/fwl.png">
            <h4>网站日访问量排行监测</h4>
        </a>
    </li>
    <li id="clickEight">
        <a href="http://localhost:16006/InteractiveColumns">
            <img src="/img/lmgx.png">
            <h4>网站互动类栏目更新监测</h4>
        </a>
    </li>
</ul>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript">
    $('#pay-qrcode').click(function () {
        var html = $(this).html();
        parent.layer.open({
            title: false,
            type: 1,
            closeBtn: false,
            shadeClose: true,
            area: ['600px', '360px'],
            content: html
        });
    });
</script>
<script>
    var clickOne = document.getElementById("clickOne");
    clickOne.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickOne.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
    var clickTwo = document.getElementById("clickTwo");
    clickTwo.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickTwo.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
    var clickThree = document.getElementById("clickThree");
    clickThree.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickThree.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
    var clickFour = document.getElementById("clickFour");
    clickFour.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickFour.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
    var clickFive = document.getElementById("clickFive");
    clickFive.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickFive.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
    var clickSix = document.getElementById("clickSix");
    clickSix.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickSix.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
    var clickSeven = document.getElementById("clickSeven");
    clickSeven.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickSeven.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
    var clickEight = document.getElementById("clickEight");
    clickEight.addEventListener("click", function(event) {
        event.preventDefault(); // 阻止默认的链接跳转行为
        var link = clickEight.querySelector("a");
        var href = link.getAttribute("href");
        window.open(href, "_blank"); // 在新的标签页中打开链接
    });
</script>
</body>
</html>
