@import '~amos-framework/lib/styles/mixins/scrollbar.scss';

%scrollbar {
  @include pretty-scrollbar(
    4px,
    4px,
    #2e7ab9,
    #0febff,
    2px
  );
}

.ccs-iot-monitoring,
.ccs-on-iot-monitoring {
  width: 100%;
  height: 100%;

  &-side {
    display: inline-block;
    width: 20%;
    height: 99%;
    vertical-align: top;
  }

  &-content {
    display: inline-block;
    width: 60%;
    height: 100%;
    padding-bottom: 10px;
  }

  &-table {
    color: white;
    background: linear-gradient(180deg, rgba(154, 203, 251, 0.24) 0%, rgba(225, 238, 255, 0.36) 54%, rgba(157, 183, 223, 0.1) 54%, rgba(63, 117, 209, 0) 100%);
    border: 1px solid #6fc2e2;

    &-title {
      margin-bottom: 4px;
      margin-left: 8px;
      font-family: 'SourceHanSansCN-Medium';
      font-size: 18px;
      font-weight: 500;
      line-height: 27px;
      color: blue;
      text-align: left;
      text-overflow: ellipsis;
    }
  }

  &-left {
    width: 100%;
    height: 100%;
    padding-left: 8px;

    .ccs-com-screencard {
      height: calc(33.33% - 10px);
      margin-bottom: 10px;
    }

    &-chart {
      width: 99%;
      height: 99%;
    }
  }

  &-right {
    width: 100%;
    height: 100%;
    padding-right: 8px;

    .ccs-com-screencard {
      height: calc(33% - 10px);
      margin-bottom: 10px;

      &:last-child {
        height: calc(67% - 10px);
      }
    }

    &-chart {
      width: 99%;
      height: 99%;
    }
  }

  &-statistics {
    &-content {
      @extend %scrollbar;

      display: grid;
      grid-template-columns: 23% 23% 23% 23%;
      grid-gap: 3vh;
      padding-right: 1.5%;
      padding-left: 1.5%;
      margin-top: 3%;
      overflow: auto;
    }

    &-head {
      width: 100%;
      font-size: 24px;
      font-weight: 600;
      line-height: 38px;
      color: white;
      text-align: center;
    }

    &-chart {
      width: 98%;
      height: calc(100% - 40px);
      padding-left: 10px;
    }

    &-item {
      width: 100%;
      color: white;
      text-align: center;
      cursor: pointer;
      background: url('../assets/frame/card-bg.png');
      background-size: 100% 100%;

      &-num {
        width: 100%;
        padding-top: 50px;
        font-size: 30px;
        font-weight: 600;
      }

      &-title {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 19px;
        font-weight: 600;
      }
    }
  }

  &-video-detail {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-gap: 2vh;
    width: 100%;
    height: 85%;
    padding: 20px;
  }

  &-video {
    position: relative;
    width: 100%;
    height: 65.7%;
    margin-top: 3px;
    background: none;
    border-image: url('../assets/frame/module-center-bg.png') 50 50 50 50 fill / 50 50 50 50 / 0 stretch stretch;
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
  }

  &-map {
    position: relative;
    width: 100%;
    height: 33%;
    background: none;
    border-image: url('../assets/frame/module-center-bg.png') 50 50 50 50 fill / 50 50 50 50 / 0 stretch stretch;
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
  }
}

// 一行展示溢出...
.ccs-comtablelist .amos-table-pro tr.amos-table-row td {
  height: 2.1vw;
  padding: 0;
  font-size: 0.9vw;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border-right: 1px solid rgba(41, 152, 225, 0.2);
}

.ccs-comtablelist-longtext {
  display: inline-block;
  width: 195px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccs-com-screencard-header {
  display: flex;
  align-items: center;
  // width: 60%;
  height: 60px;
  padding-left: 0.6vw;
  overflow: hidden;
  font-size: 1.02vw;
  font-weight: bold;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;

  > span {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .amos-search {
    flex: 1;
    position: relative;
    top: -8px;
    height: 20px;
    min-width: 0;
    margin-right: 3px;
    margin-left: 60px;

    input {
      width: 100%;
      height: 100%;
      color: white;
      background: rgba(15, 235, 255, 0.2);
      border-radius: 10px;
    }

    i {
      display: inline-block;
      align-items: center;
      height: 100%;
      font-size: 12px;
    }
  }
}

.ccs-disaster-access-summary {
  height: auto;
  margin-bottom: 8px;

  &-content {
    display: flex;
    width: 100%;
    height: calc(50% - 27px);
    margin: 18px 0;
    color: white;
  }

  &-item {
    display: flex;
    flex: 1;
    height: 100%;
    margin: 0 10px;
    align-items: center;
    justify-content: center;

    &-name {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 14px;
      color: white;

      img {
        width: 65px;
        height: 65px;
      }
    }

    &-value {
      display: flex;
      flex: 1;
      padding-right: 35px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: left;

      &-right {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        flex-direction: initial;
        text-align: left;

        &-p1 {
          font-size: 32px;
          font-weight: 600;
          line-height: 32px;
        }

        &-p2 {
          padding-top: 10px;
          padding-left: 10px;
          font-size: 18px;
          line-height: 18px;
        }

        &-p3 {
          padding-top: 10px;
          font-size: 18px;
          line-height: 18px;
        }
      }
    }
  }
}
