@page "/Monitor"
@using JiShe.CollectBusEPO
@model JiShe.CollectBusEPO.Pages.Monitor


@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
    <title>后端服务</title>
</head>

<body>
    <div class="container projects">
        <div class="projects-header page-header">
            <h2>后端服务列表</h2>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail" style="height: 180px">
                    <a href="@@CollectBusEPOHttpApiHostConst.SwaggerUiEndPoint" target="_blank">
                        <img class="lazy" src="/images/swagger.png" width="300" height="150" />
                    </a>
                    <div class="caption">
                        <h3>
                            <a href="@@CollectBusEPOHttpApiHostConst.SwaggerUiEndPoint" target="_blank">SwaggerUI</a>
                        </h3>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail" style="height: 180px">
                    <a href="@@CollectBusEPOHttpApiHostConst.CapDashboardEndPoint" target="_blank">
                        <img class="lazy" src="/images/cap.png" width="300" height="150" />
                    </a>
                    <div class="caption">
                        <h3>
                            <a href="@@CollectBusEPOHttpApiHostConst.CapDashboardEndPoint" target="_blank">CAP面板</a>
                        </h3>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail" style="height: 180px">
                    <a href="@@CollectBusEPOHttpApiHostConst.HangfireDashboardEndPoint" target="_blank">
                        <img class="lazy" src="/images/hangfire.png" width="300" height="150" />
                    </a>
                    <div class="caption">
                        <h3>
                            <a href="@@CollectBusEPOHttpApiHostConst.HangfireDashboardEndPoint" target="_blank">Hangfire面板</a>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail" style="height: 180px">
                    <a href="@@CollectBusEPOHttpApiHostConst.MiniprofilerEndPoint" target="_blank">
                        <img class="lazy" src="/images/miniprofiler.png" width="300" height="150" />
                    </a>
                    <div class="caption">
                        <h3>
                            <a href="@@CollectBusEPOHttpApiHostConst.MiniprofilerEndPoint" target="_blank">Miniprofiler</a>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail" style="height: 180px">
                    <a href="@@CollectBusEPOHttpApiHostConst.HealthCheckEndPoint" target="_blank">
                        <img class="lazy" src="/images/healthchecks.png" width="300" height="150" />
                    </a>
                    <div class="caption">
                        <h3>
                            <a href="@@CollectBusEPOHttpApiHostConst.HealthCheckEndPoint" target="_blank">HealthCheck</a>
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<style>
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .container {
        width: 1170px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .projects-header {
        width: 60%;
        text-align: center;
        font-weight: 200;
        display: block;
        margin: 60px auto 40px !important;
    }

    .page-header {
        padding-bottom: 9px;
        margin: 40px auto;
        border-bottom: px solid #eee;
    }

    .projects-header h2 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    h2 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 500;
        line-height: 1.1;
        color: inherit;
    }

    p {
        margin: 0 0 10px;
    }

    .row {
        margin-right: -15px;
        margin-left: -15px;
    }

    .col-lg-3 {
        width: 25%;
    }

    .projects .thumbnail {
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        margin-bottom: 30px;
        border-radius: 0;
    }

    .thumbnail {
        display: block;
        padding: 4px;
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #ddd;
        .transition(border 0.2s ease-in-out);
    }

    a {
        color: #337ab7;
        text-decoration: none;
        background-color: transparent;
    }

    .projects .thumbnail img {
        max-width: 100%;
        height: auto;
    }

    .thumbnail a > img,
    .thumbnail > img {
        margin-right: auto;
        margin-left: auto;
    }

    img {
        vertical-align: middle;
    }

    .caption {
        padding: 9px;
        overflow-y: hidden;
        color: #555;
    }
</style>