@mainBlue: #33439b;
@tinyBlue: #5582cd;
@grayBlue: #78c2ff;
@activeBlue: #12bcf3;
@mainGreen: #7bfff8;
@pink: #ff6c60;
@gray: #999;

// vue-echarts
.echarts {
  width: 100% !important;
  height: 100% !important;
}

.moni-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  min-width: 1366px;
  overflow: auto;
  background-color: @mainBlue;
  color: @grayBlue;

  .moni-close {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    top: 10px;
    right: 10px;
    z-index: 99;
    color: #fff;
    cursor: pointer;
    &:hover {
      color: @pink;
    }
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: @mainBlue;
  }
  ::-webkit-scrollbar-button {
    display: none;
  }
  ::-webkit-scrollbar-track {
    background: @mainBlue;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(116, 186, 248, 1);
  }
  ::-webkit-scrollbar-corner {
    background: @mainBlue;
  }
  ::-webkit-scrollbar-resizer {
    background: @mainBlue;
  }
}
// home
.home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: auto;
  min-height: 768px;
  min-width: 1366px;
  overflow: hidden;
  background-color: @mainBlue;

  &-header {
    position: absolute;
    width: 100%;
    height: 70px;
    line-height: 70px;
    top: 0;
    left: 0;
    z-index: 9;
    font-size: 28px;
    text-align: center;
    background-image: url(./images/header-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    > h1 {
      display: inline;
      font-size: 28px;
      font-weight: 300;
      color: @mainGreen;
    }
  }

  &-footer {
    position: absolute;
    width: 100%;
    height: 50px;
    line-height: 50px;
    bottom: 0;
    left: 0;
    z-index: 7;
    font-size: 12px;
    text-align: center;
    color: @tinyBlue;
  }

  &-left {
    position: absolute;
    width: 300px;
    top: 80px;
    bottom: 50px;
    left: 30px;
    z-index: 9;
  }
  &-right {
    position: absolute;
    width: 300px;
    top: 80px;
    bottom: 50px;
    right: 30px;
    z-index: 9;

    > .box {
      height: 670px;
    }
    .box-title {
      float: left;
      width: 100%;
    }
    .right-chart {
      padding-top: 50px;
      height: 100%;
      .echarts {
        height: 100%;
      }
    }
  }

  // left
  &-all {
    margin-bottom: 30px;
    text-align: center;
    .box-body {
      padding: 30px 10px;
    }
    .all-item {
      display: inline-block;
      vertical-align: top;
      height: 100px;
      width: 100px;
      padding: 30px 15px 0;
      background-image: url(./images/circle-green.png);
      background-size: 100% 100%;

      &:last-child {
        margin-left: 30px;
        background-image: url(./images/circle-orange.png);
      }

      span {
        display: block;
        line-height: 1.2;
      }
      span:first-child {
        font-size: 20px;
        margin-bottom: 3px;
        color: #fff;
      }
      span:last-child {
        font-size: 12px;
      }
    }
  }
  &-category {
    height: 480px;
    .category-chart {
      height: 200px;
    }
    .category-bar {
      padding: 20px;
      li {
        height: 30px;
        line-height: 30px;
        margin: 5px 0;
        position: relative;
        padding-left: 20px;

        &::before {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          left: 0;
          top: 11px;
        }

        &:nth-of-type(1)::before {
          background: linear-gradient(
            360deg,
            rgba(85, 107, 236, 1) 0%,
            rgba(97, 167, 255, 1) 100%
          );
          box-shadow: 0px 2px 4px 0px rgba(14, 19, 143, 0.2);
          border-radius: 6px;
          border: 2px solid rgba(97, 167, 255, 0.15);
        }
        &:nth-of-type(2)::before {
          background: linear-gradient(
            180deg,
            rgba(123, 255, 248, 1) 0%,
            rgba(68, 194, 255, 1) 100%
          );
          box-shadow: 0px 2px 4px 0px rgba(14, 19, 143, 0.2);
          border-radius: 6px;
          border: 2px solid rgba(97, 167, 255, 0.15);
        }
        &:nth-of-type(3)::before {
          background: linear-gradient(
            180deg,
            rgba(215, 255, 178, 1) 0%,
            rgba(139, 255, 237, 1) 100%
          );
          box-shadow: 0px 2px 4px 0px rgba(14, 19, 143, 0.2);
          border-radius: 6px;
          border: 2px solid rgba(97, 167, 255, 0.15);
        }
        &:nth-of-type(4)::before {
          background: linear-gradient(
            360deg,
            rgba(255, 172, 172, 1) 0%,
            rgba(255, 230, 152, 1) 100%
          );
          box-shadow: 0px 2px 4px 0px rgba(14, 19, 143, 0.2);
          border-radius: 4px;
          border: 2px solid rgba(97, 167, 255, 0.15);
        }
        &:nth-of-type(5)::before {
          background: linear-gradient(
            180deg,
            rgba(246, 149, 150, 1) 0%,
            rgba(246, 102, 104, 1) 100%
          );
          box-shadow: 0px 2px 4px 0px rgba(14, 19, 143, 0.2);
          border-radius: 6px;
          border: 2px solid rgba(97, 167, 255, 0.15);
        }

        &::after {
          content: "";
          position: absolute;
          left: 30px;
          right: 0;
          top: 50%;
          border-bottom: 1px dashed #375ab7;
          z-index: 8;
        }

        span {
          display: block;
          position: absolute;
          top: 0;
          left: 20px;
          z-index: 9;
          line-height: 30px;
          padding: 0 15px 0 0;
          background-color: #394aa4;

          &:hover {
            color: #fff;
          }
        }
        span:last-child {
          left: auto;
          right: 0;
          font-size: 16px;
          color: #fff;
          padding: 0 0 0 15px;
        }
      }
    }
  }
}

.box {
  position: relative;
  width: 300px;
  min-height: 160px;
  background-image: url(./images/box-bg.png);
  background-size: 100% auto;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0;
    top: 0;
    background-image: url(./images/box-top.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 8;
  }
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 30px;
    left: 0;
    bottom: 0;
    background-image: url(./images/box-bottom.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 8;
  }

  &-title {
    height: 40px;
    background-image: url(./images/box-title.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    > h2 {
      line-height: 40px;
      text-align: center;
      font-size: 16px;
    }
  }
  &-body {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    padding: 10px;
  }
}
.long-box {
  width: 100%;
  min-height: 300px;
  background-image: url(./images/box-big-bg.png);

  &::before {
    background-image: url(./images/box-big-top.png);
  }
  &::after {
    background-image: url(./images/box-big-bottom.png);
  }
}

// center
.center-list {
  background-color: @mainBlue;
  position: relative;
  min-width: 1366px;
  .home-header,
  .home-footer {
    position: relative;
  }

  .center-left {
    height: 670px;
  }
  .center-body {
    margin-left: 360px;
    padding-right: 30px;
    min-height: 700px;
  }

  .center-place {
    margin-top: 10px;
    padding: 0 30px;
  }
  .place-legend {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 99;
    li {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      color: @grayBlue;
      cursor: pointer;
      &:hover {
        color: @activeBlue;
      }

      &::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        height: 5px;
        width: 10px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
        border-radius: 3px;
      }

      &:nth-of-type(1) {
        &::before {
          background: linear-gradient(
            90deg,
            rgba(85, 107, 236, 1) 0%,
            rgba(97, 167, 255, 1) 100%
          );
        }
      }
      &:nth-of-type(2) {
        &::before {
          background: linear-gradient(
            270deg,
            rgba(123, 255, 248, 1) 0%,
            rgba(68, 194, 255, 1) 100%
          );
        }
      }
      &:nth-of-type(3) {
        &::before {
          background: linear-gradient(
            90deg,
            rgba(255, 172, 172, 1) 0%,
            rgba(255, 230, 152, 1) 100%
          );
        }
      }
    }
  }
}
// center-infos
.center-infos {
  padding: 26px 0 20px;

  .infos-left {
    margin-right: 480px;
    overflow: auto;
    ul {
      font-size: 0;
      height: 38px;
      white-space: nowrap;
    }
    li {
      font-size: 14px;
      display: inline-block;
      vertical-align: top;
      color: @grayBlue;
      height: 38px;
      width: 120px;
      padding: 9px 10px;
      margin-right: 10px;
      line-height: 20px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

      background-image: url(./images/btn-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;

      &:hover,
      &.info-active {
        color: @activeBlue;
        background-size: 112% 132%;
        background-position: -7px -6px;
        background-image: url(./images/btn-active-bg.png);
      }
    }
  }

  .infos-right {
    float: right;
    width: 480px;
    ul {
      font-size: 0;
      line-height: 38px;
      text-align: right;
    }
    li {
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      color: @grayBlue;
      text-align: center;
      padding: 0 12px;
      height: 14px;

      > span {
        display: inline-block;
        vertical-align: top;
        line-height: 1.2;
      }

      &:not(:last-child) {
        border-right: 1px solid #3952ae;
      }

      &:before {
        content: "";
        display: inline-block;
        vertical-align: top;
        width: 20px;
        height: 14px;
        background-size: auto 100%;
        background-repeat: no-repeat;
      }
      &:hover {
        color: #fff;
      }

      &.li-link {
        &:before {
          background-image: url(./images/icon-link.png);
        }
        &:hover {
          color: #fff;
          &:before {
            background-image: url(./images/icon-link-active.png);
          }
        }
      }

      &.li-login {
        &:before {
          background-image: url(./images/icon-login.png);
        }
        &:hover {
          color: #fff;
          &:before {
            background-image: url(./images/icon-login-active.png);
          }
        }
      }

      &.li-error {
        &:before {
          background-image: url(./images/icon-error.png);
        }
        &:hover {
          color: #fff;
          &:before {
            background-image: url(./images/icon-error-active.png);
          }
        }
      }

      &.li-wait {
        &:before {
          background-image: url(./images/icon-wait.png);
        }
        &:hover {
          color: #fff;
          &:before {
            background-image: url(./images/icon-wait-active.png);
          }
        }
      }
    }
  }
}
// center-query
.center-query {
  color: @grayBlue;

  .btn-search {
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    background-size: 120% 120%;
    background-position: -6px -3px;
    background-image: url(./images/btn-ghost.png);
    cursor: pointer;

    &:hover {
      color: @activeBlue;
    }
  }

  .ivu-form-item-label,
  .ivu-select-placeholder,
  .ivu-icon {
    color: @grayBlue!important;
  }
  .ivu-select-selection,
  .ivu-input {
    color: @grayBlue!important;
    background-color: @mainBlue!important;
    border: 1px solid rgba(57, 82, 174, 1);
  }
  .ivu-input-wrapper {
    background-color: @mainBlue!important;
  }
  .ivu-select-dropdown {
    background: @mainBlue;
    box-shadow: 0 0 3px @tinyBlue;
  }
  .ivu-select-item {
    color: @grayBlue;
    &:hover {
      background: rgba(14, 204, 255, 0.1);
    }
  }
  .ivu-select-item-focus {
    background: rgba(14, 204, 255, 0.1);
  }
  .ivu-select-not-found {
    color: @gray;
  }
  .ivu-select-item-selected {
    color: @activeBlue;
    &:hover {
      background: rgba(14, 204, 255, 0.1);
    }
  }

  input {
    box-shadow: none !important;
  }

  input::-webkit-input-placeholder {
    color: @grayBlue!important;
    background-color: @mainBlue!important;
  }
}

// center-table
.center-table {
  .table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
    border: 0;

    th {
      padding: 6px;
      height: 44px;
      line-height: 20px;
      letter-spacing: 1px;
      border: 0;
      color: #e0e0e0;
      font-size: 13px;
      background: #394aa4;
    }
    td {
      padding: 6px;
      height: 44px;
      line-height: 20px;
      border: 0;
      background: transparent;
    }
  }
  .ivu-table {
    background: @mainBlue;
  }
  tr.ivu-table-row:nth-of-type(even) {
    background: #394aa4;
  }
  .ivu-table td {
    font-size: 12px;
    color: @grayBlue;
  }
  .ivu-table:after,
  .ivu-table:before {
    background: transparent;
  }
  .ivu-table .ivu-table-cell {
    padding: 5px 10px;
  }
  .ivu-table-body {
    min-height: 200px;
  }
  .ivu-table-tip td {
    font-size: 20px;
    height: 200px;
  }
}
.center-page {
  margin-top: 20px;
  text-align: right;

  li {
    border-radius: 6px;
    border: 2px solid rgba(57, 82, 174, 1);
    background-color: @mainBlue;
  }
  li.ivu-page-disabled:hover {
    border: 2px solid rgba(57, 82, 174, 1);
  }
  li.ivu-page-item-active {
    background: rgba(14, 204, 255, 0.15);
    border: 2px solid rgba(14, 204, 255, 0.8);
  }
  .ivu-page-next a,
  .ivu-page-prev a,
  .ivu-page-item a {
    color: @grayBlue;
  }
}
