index.html

<!-- 
开源工作台：
源码地址：https://github.com/openspug/index
创建者: openspug组织@https://github.com/openspug
创建时间：2019-05-26
联系邮箱：yupozhang@gmail.com
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #F7F7F7;
    }

    .container {
      background-color: #fff;

    }

    .container-header {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      height: 40px;
      padding-left: 10px;

    }

    .container-body {
      display: flex;
      border-top: 1px solid #dfdfdf;
      padding: 20px 10px 0 10px;
      /*justify-content: space-between;*/
      flex-direction: row;
      flex-wrap: wrap;
    }

    .container div {
      display: flex;
    }

    .item-block {
      border: 1px solid #dfdfdf;
      flex-direction: column;
      height: 160px;
      width: 24%;
      margin-bottom: 20px;
      margin-right: 10px;

    }

    a:link {
      /* 超链接正常状态下的样式 */
      color: #000000;
      /* 黑色 */
      text-decoration: none;
      /* 无下划线 */
    }

    a:visited {
      /* 访问过的超链接 */
      color: #000000;
      /* 黑色 */
      text-decoration: none;
      /* 无下划线 */
    }


    .item-top {
      height: 80px;
      padding: 20px;
    }

    .item-logo {
      width: 21%;
      height: 60px;
      margin-right: 20px;

    }

    .item-logo img {
      width: 100%;
      height: 100%;

    }

    .item-body {
      flex-direction: column;
      width: 79%;
    }

    .item-bottom {
      height: 40px;
      justify-content: space-around;
      align-items: center;
      color: #888888;
      background-color: #F7F7F7;
      font-size: 13px;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      padding-bottom: 10px;
    }

    .notice {
      font-size: 12px;
      color: #888;
    }

    .divider {
      height: 20px;
      width: 1px;
      background-color: #dfdfdf;
    }
  </style>
</head>

<body style="padding: 10px">
  <div class="container">
    <div class="container-header">内部系统导航</div>
    <div class="container-body">
      <div class="item-block">
        <a href="https://about.gitlab.com/" target="_blank">
          <div class="item-top">
            <div class="item-logo"><img src="img/gitlab.png"></div>
            <div class="item-body">
              <span class="title">Gitlab系统</span>
              <span class="notice">Gitlab内部代码仓库</span>
            </div>
          </div>
        </a>
        <div class="item-bottom">
          <a href="https://about.gitlab.com/" target="_blank">
            <div>官网地址</div>
          </a>
          <div class="divider"></div>
          <a href="https://docs.gitlab.com/ee/README.html" target="_blank">
            <div>帮助文档</div>
          </a>
        </div>
      </div>
      <div class="item-block">
        <a href="https://www.atlassian.com/" target="_blank">
          <div class="item-top">
            <div class="item-logo"><img src="img/wiki.png"></div>
            <div class="item-body">
              <span class="title">WIKI系统</span>
              <span class="notice">文档系统</span>
            </div>
          </div>
        </a>
        <div class="item-bottom">
          <a href="https://www.atlassian.com/zh" target="_blank">
            <div>官网地址</div>
          </a>
          <div class="divider"></div>
          <a href="https://confluence.atlassian.com/kb" target="_blank">
            <div>帮助文档</div>
          </a>
        </div>
      </div>

      <div class="item-block">
        <a href="https://www.openldap.org/" target="_blank">
          <div class="item-top">
            <div class="item-logo"><img src="img/ldap.svg"></div>
            <div class="item-body">
              <span class="title">账户系统</span>
              <span class="notice">LDAP账号统一管理系统</span>
            </div>
          </div>
        </a>
        <div class="item-bottom">
          <a href="https://www.openldap.org/" target="_blank">
            <div>官网地址</div>
          </a>
        </div>
      </div>
    </div>
  </div>


  <div class="container">
    <div class="container-header">运维系统导航</div>
    <div class="container-body">
      <div class="item-block">
        <a href="https://demo.spug.dev" target="_blank">
          <div class="item-top">
            <div class="item-logo"><img src="img/spug.png"></div>
            <div class="item-body">
              <span class="title">开源运维平台</span>
              <span class="notice">Spug开源运维平台</span>
            </div>
          </div>
        </a>
        <div class="item-bottom">
          <a href="https://github.com/openspug/spug" target="_blank">
            <div>Github地址</div>
          </a>
          <div class="divider"></div>
          <a href="https://gitee.com/openspug/spug" target="_blank">
            <div>Gitee地址</div>
          </a>
          <div class="divider"></div>
          <a href="https://demo.spug.dev" target="_blank">
            <div>演示环境</div>
          </a>
        </div>
      </div>

      <div class="item-block">
        <a href="https://github.com/openspug" target="_blank">
          <div class="item-top">
            <div class="item-logo"><img src="img/github.png"></div>
            <div class="item-body">
              <span class="title">OpenSpug</span>
              <span class="notice">OpenSpug组织</span>
            </div>
          </div>
        </a>
        <div class="item-bottom">
          <a href="https://github.com/openspug" target="_blank">
            <div>组织地址</div>
          </a>
          <div class="divider"></div>
          <a href="https://www.spug.dev" target="_blank">
            <div>官网地址</div>
          </a>
        </div>
      </div>


      <div class="item-block">
        <a href="https://grafana.com/" target="_blank">
          <div class="item-top">
            <div class="item-logo"><img src="img/grafana.png"></div>
            <div class="item-body">
              <span class="title">监控系统</span>
              <span class="notice">Grafana 监控平台</span>
            </div>
          </div>
        </a>
        <div class="item-bottom">
          <a href="https://grafana.com/" target="_blank">
            <div>官网地址</div>
          </a>
        </div>
      </div>

      <div class="item-block">
        <a href="https://www.zabbix.com/" target="_blank">
          <div class="item-top">
            <div class="item-logo"><img src="img/zabbix.png"></div>
            <div class="item-body">
              <span class="title">监控报警</span>
              <span class="notice">Zabbix监控报警平台</span>
            </div>
          </div>
        </a>
        <div class="item-bottom">
          <a href="https://www.zabbix.com/" target="_blank">
            <div>官网地址</div>
          </a>
        </div>
      </div>

      <!--     <div class="item-block">
      <div class="item-top">
        <div class="item-logo"><img src="img/sky.png"></div>
        <div class="item-body">
          <span class="title">链路系统</span>
          <span class="notice">Skywalking链路追踪系统</span>
        </div>
      </div>

      <div class="item-bottom">
        <div onclick="window.open('http://xxx/')">测试环境</div>
        <div class="divider"></div>
        <div onclick="window.open('http://xxx/')">正式环境</div>
        <div class="divider"></div>
        <div>帮助文档</div>
      </div>
    </div> -->

    </div>
  </div>
</body>

</html>