#chart1 {
  width: 100%;
  height: 100%;
}

#chart1 canvas {
  top: -10px !important;
}

#chart2 {
  width: 100%;
  height: 100%;
}

#chart2 canvas {
  top: -10px !important;
}

#chart3 {
  width: 100%;
  height: 100%;
}

#chart3 canvas {
  top: -10px !important;
}

#chart4 {
  width: 100%;
  height: 100%;
}

#chart4 canvas {
  top: -10px !important;
}

#chart5 {
  width: 100%;
  height: 100%;
}

#chart5 canvas {
  top: -10px !important;
}

#chart6 {
  width: 100%;
  height: 100%;
}

#chart6 canvas {
  top: -10px !important;
}

#chart7 {
  width: 100%;
  height: 100%;
}

#chart7 canvas {
  top: -10px !important;
}

#radarChart {
  display: block;
  margin: 0 auto;
}

.container-screen {
  display: flex;
}

.active1 {
  background: linear-gradient(to right, #f35d4d, #f28557) !important;
}

.active2 {
  background: linear-gradient(to right, #41cd80, #69cda1) !important;
}

.active3 {
  background: linear-gradient(to right, #24cddc, #99d5ff) !important;
}

.slick-list {
  height: 100%;
}

.slick-track {
  height: 100%;
}

.slick-dots {
  display: none !important;
}

table {
  text-align: center;
  border-collapse: collapse;
}

th {
  text-align: center !important;
  /* 水平居中 */
  vertical-align: middle;
  /* 垂直居中 */
}

table,
td {
  border-bottom: 1px solid #fff !important;
}

*::-webkit-scrollbar {
	display: none;
}

* {
	scrollbar-width: none;
}
* {
	-ms-overflow-style: none;
}


* {
  list-style: none;
  margin: 0;
  padding: 0;
}

.font-i-m-i {
  margin-left: 2rem;
  font-size: 1.3rem;
  color: white;
}

.font-i-m-v-i {
  font-size: 1.3rem;
  color: white;
  margin-left: 3rem;

}

.all-i {
  height: 1080px;
  width: 3540px;
  display: flex;
  flex-direction: row;

}

.map {
  width: 1280px;
  height: 1080px;
  position: relative;
  z-index: 77;
}

.map-img {
  width: 100%;
  height: 100%;
}

/* //左侧地图 */
.l-i {
  width: 1280px;
  height: 1080px;
  display: flex;
  flex-direction: row;

  .l-c-i {
    display: flex;
    flex-direction: column;

    .l-c-item-i {
      margin-top: 12%;
      margin-left: 22%;
      width: 7rem;
    }
  }
}

.tcq-i {
  display: none;
  z-index: 999;
  position: fixed;
  height: 2.5rem;
  width: 10rem;
  margin-top: -4rem;
  background-color: #1e1e1e;
  opacity: 0.7;
  border: 1px solid #00FFFF;
  color: white;
  font-size: 1.5rem;
  text-align: center
}

.tcq-1-i:hover div {
  display: block;
}

/* 右侧大屏 */
.r-i {
  width: 1920px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: #2a2c42;
  /*background-image: url("../../assets/images/iot/iotBG.png");
          background-repeat: no-repeat;
          background-size: cover;*/
}

.item-i {
  width: 33%;
  height: 33%;
}

.item1-i {}

/* //大标题 */
.item-t-i {
  height: 14%;
  width: 100%;

  .title-t-i {
    color: #55d6fe;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-top: 2%;
  }
}

/* 隐藏滚动条，但仍然可以滚动 */
.el-table__body-wrapper::-webkit-scrollbar {
  display: none;
  /* 针对Webkit浏览器 */
}

.el-table__body-wrapper {
  -ms-overflow-style: none;
  /* 针对IE、Edge浏览器 */
  scrollbar-width: none;
  /* 针对Firefox浏览器 */
}

.el-table th.gutter {
  display: none;
  width: 0
}

.el-table colgroup col[name='gutter'] {
  display: none;
  width: 0;
}

.el-table__body {
  width: 100% !important;
}

/* //右侧整个大屏 */
.item-all-i {
  width: 100%;
  height: 100%;
  display: flex;
}

.item-l-i,
.item-z-i,
.item-r-i {
  width: 33.3%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.item-title-i {
  color: white;
  font-size: 2rem;
}

.el-carousel {
  height: calc(100% - 3rem);
}

.el-carousel__container {
  height: 100%;
}

/* //右侧大屏的左侧部分 */
.item-l-t-i,
.item-l-d-i,
.item-l-dd-i {
  display: flex;
  flex-direction: column;
}

.bg-shape {
  width: 95%;
  height: 90%;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 5%, 35% 5%, 33% 0);
  background-color: #273d58;
  border-top: 3px solid #24cddc;
}

.bg-shape-father {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-status {
  width: 60px;
  height: 30px;
  font-size: 1rem;
  color: white;
  text-align: center;
  line-height: 34px;
  overflow: hidden;
  background: linear-gradient(to right, #24cddc, #99d5ff);
}

.item-soilStatus {
  position: absolute;
  left: 28px;
  top: 110px;
  width: 42px;
  height: 25px;
  font-size: 0.8rem;
  color: white;
  text-align: center;
  line-height: 24px;
  overflow: hidden;
  background: linear-gradient(to right, #24cddc, #99d5ff);
}

.item-size {
  font-size: 1.1rem;
  color: white;
}

/* //上 */
.item-l-t-i {
  position: relative;
  width: 100%;
  height: 30%;

  .item-l-t-shape {
    &::after {
      content: '';
      position: absolute;
      top: 31px;
      left: 228px;
      width: 396px;
      height: 3px;
      background-color: #24cddc;
    }

    &::before {
      content: '';
      position: absolute;
      top: 23px;
      left: 209px;
      width: 25px;
      height: 3px;
      background-color: #24cddc;
      transform: rotate(53deg);
    }

    .item-l-t-body-i {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin: 0 1.5rem;

      .item-z-d-body-item-i {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 47%;
        height: 20%;
        margin-top: 1.3rem
      }
    }
  }

}

/* //中 */
.item-l-d-i {
  position: relative;
  height: 41%;

  .item-l-d-shape {
    &::after {
      content: '';
      position: absolute;
      top: 41px;
      left: 226px;
      width: 397px;
      height: 3px;
      background-color: #24cddc;
    }

    &::before {
      content: '';
      position: absolute;
      top: 28px;
      left: 206px;
      width: 28px;
      height: 3px;
      background-color: #24cddc;
      transform: rotate(62deg);
    }

    .item-l-d-body-i {
      width: 100%;
      height: calc(95% - 30px) !important;

      .item-l-d-body-all-i {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        font-size: 1.1rem;
        color: white;
        padding-left: 1.5rem;

        .item-l-b-body {
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;

          .item-l-d-body-item-i {
            position: relative;
            display: flex;
            width: 18%;
            height: 46%;
            margin: 0 1rem;
          }
        }

      }
    }
  }

}

/* //下 */
.item-l-dd-i {
  height: 32%;
  position: relative;

  .item-l-dd-shape {
    &::after {
      content: '';
      position: absolute;
      top: 33px;
      left: 226px;
      width: 397px;
      height: 3px;
      background-color: #24cddc;
    }

    &::before {
      content: '';
      position: absolute;
      top: 25px;
      left: 211px;
      width: 21px;
      height: 3px;
      background-color: #24cddc;
      transform: rotate(54deg);
    }

    .item-l-d-body-i {
      height: calc(95% - 3rem);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .item-l-t-body-all-i {
        width: 27%;
        height: 60%;

        .circle {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          --border-size: 3px;
          --border-angle: 0turn;

          --grid-bg: radial-gradient(transparent 69%,
              #55d6fe 69%,
              #55d6fe 70%,
              transparent 70%);
          --line-bg: transparent 50%, #55d6fe 50%, transparent 50.5%;

          background-image: conic-gradient(from var(--border-angle),
              transparent 10%,
              #55d6fe 99%,
              #55d6fe 99.5%),
            linear-gradient(0deg, var(--line-bg)),
            linear-gradient(45deg, var(--line-bg)),
            linear-gradient(90deg, var(--line-bg)),
            linear-gradient(135deg, var(--line-bg)), var(--grid-bg), var(--grid-bg),
            var(--grid-bg);
          background-size: cover, cover, cover, cover, cover, 25% 25%, 50% 50%, 75% 75%;
          background-position: center center;
          background-repeat: no-repeat;
          border-radius: 50%;
          border: solid 0.3vmin #55d6fe;

          animation: bg-spin 3s linear infinite;

          @keyframes bg-spin {
            to {
              --border-angle: 1turn;
            }
          }

          position: relative;

          /* // Radial */
          &::before {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: solid 1vmin #55d6fe;
            animation: scale 3s linear infinite;

            @keyframes scale {
              from {
                transform: scale(0);
              }

              50% {
                transform: scale(1.2);
              }

              51%,
              100% {
                opacity: 0;
              }
            }
          }

          filter: drop-shadow(0px 0px 10vmin black) blur(0.5px) contrast(200%);
        }

      }

      .item-l-dd-body-all-i {
        width: 60%;
        height: 100%;

        .item-ws {
          width: 100%;
          height: 100%;

          .row-item {
            border-bottom: 1px solid #204b7a;

            .ceil:last-child[data-value="正常"] {
              color: #00FFFF;
            }
          }
        }

      }

    }
  }
}

.item-z-t-i,
.item-z-d-i,
.item-r-i {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* //中间部分 */
.item-z-i {
  width: 33.3%;
  height: 100%;
  display: flex;
  flex-direction: column;

  /* //上 */
  .item-z-t-i {
    height: 30%;
    width: 100%;
    position: relative;

    .item-z-t-shape {
      &::after {
        content: '';
        position: absolute;
        top: 31px;
        left: 228px;
        width: 396px;
        height: 3px;
        background-color: #24cddc;
      }

      &::before {
        content: '';
        position: absolute;
        top: 23px;
        left: 210px;
        width: 23px;
        height: 3px;
        background-color: #24cddc;
        transform: rotate(50deg);
      }

      .item-z-t-swiper {
        padding: 0 1.5rem;
        color: #fff;

        .item-z-t-body-i {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;

          .item-z-d-body-item-i {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 47%;
            height: 20%;
            margin-top: 1.3rem
          }
        }
      }

    }
  }

  /* //下 */
  .item-z-d-i {
    width: 100%;
    height: 70%;
    position: relative;

    .item-z-d-shape {
      position: relative;
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 65% 0, 63% 5%, 35% 5%, 33% 0) !important;

      &::after {
        content: '';
        position: absolute;
        top: 14px;
        right: 198px;

        width: 39px;
        height: 3px;
        background-color: #24cddc;
        transform: rotate(110deg);

      }

      &::before {
        content: '';
        position: absolute;
        top: 14px;
        left: 189px;
        width: 34px;
        height: 3px;
        background-color: #24cddc;
        transform: rotate(71deg);
      }

      .titel-d-all-i {
        justify-content: space-between;
        margin: 0 1rem;

        &::after {
          position: absolute;
          content: '';
          position: absolute;
          top: 31px;
          right: 224px;
          width: 173px;
          height: 3px;
          background-color: #24cddc;
        }

        .title-icon {
          display: flex;
          justify-content: center;
        }
      }

      .item-z-d-swiper {
        padding: 0 1.5rem;
        color: #fff;
        height: calc(100% - 3rem);

        .item-z-d-body-i {
          height: 100%;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;

          .item-z-d-body-item-i {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 47%;
            height: 11%;
            margin-top: 2.3rem
          }
        }
      }

    }
  }
}

/* //右侧部分 */
.item-r-i {
  width: 33.3%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .item-z-t-shape {
    height: 95% !important;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 2%, 35% 2%, 33% 0);

    &::after {
      content: '';
      position: absolute;
      top: 48px;
      left: 228px;
      width: 396px;
      height: 3px;
      background-color: #24cddc;
    }

    &::before {
      content: '';
      position: absolute;
      top: 38px;
      left: 210px;
      width: 25px;
      height: 3px;
      background-color: #24cddc;
      transform: rotate(61deg);
    }

    .item-z-t-swiper {
      padding: 0 1.5rem;
      color: #fff;
      height: calc(100% - 3rem);

      .item-r-d-body-item-t-i {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 93%;
        margin-top: 1rem;

        .item-r-t-list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 90%;
          height: 5%;
          background: linear-gradient(to right, #16385f 10%, #1f6fa8 50%, #16385f 90%);
          border-radius: 10px;
          border: 2px solid #2a6a8c;
          padding: 0 1rem;
          color: #d2dee8;
          font-size: 18px;
        }
      }
    }
  }

}

/* //小标题 */
.titel-s-all-i {
  display: flex;
  flex-direction: row;
  height: 3rem;
  align-items: center;
  margin-left: 2rem;

  .titel-s-t-i {
    width: 23px;
    height: 12px;
    background-image: url("../images/title-t.png");
  }

  .titel-s-i {
    color: white;
    margin-left: 1rem;
    font-weight: 700;
  }

}



.childLight1 {
  top: 50px;
  left: 40px;
  width: 10px;
  height: 10px;
  background: #00ccff;
  border-radius: 50%;
  position: absolute;
}

.childLight2 {
  top: 100px;
  left: 60px;
  width: 10px;
  height: 10px;
  background: #00ccff;
  border-radius: 50%;
  position: absolute;
}

.childLight3 {
  top: 17px;
  left: 60px;
  width: 10px;
  height: 10px;
  background: #00ccff;
  border-radius: 50%;
  position: absolute;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.gradient-row {
  background: linear-gradient(to right, #fff, #55d6fe);
}