.df-base-content {
  height: 100%;
  display: flex;
  justify-content: start;
  gap: 16px;

  &-left {
    width: 400px;
    height: 616px;
  }
  &-right {
    width: calc(100% - 416px);
  }

  .base-top {
    &-desc {
      &-exec {
        color: var(--info-danger);
        height: 40px;
      }
    }

    &-img {
      img {
        width: 100%;
      }
    }

    &--base {
      max-height: 480px;
      background-color: var(--content-bg-color);
      overflow: auto;
      margin-top: 12px;
    }
    &--jcqsfx {
      margin-top: 14px;
    }
    &--chart {
      height: 298px;
      width: 100%;
    }
  }

  .base-bottom {
    margin-top: 10px;

    &--right {
      &-content {
        width: 100%;
        text-align: center;
        overflow-y: auto;
      }
    }
  }

  .df-qyjcl {
    height: 215px;
  }

  .df-overview-trend {
    width: 100%;
    margin-top: 16px;
    &-content {
      width: 100%;
      height: 191px;
    }
  }
}

.df-situation {
  overflow-y: auto;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  gap: 24px;

  .df-situation-item-compare {
    margin-left: 56px;
    font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
    font-size: 14px;
    display: flex;
    color: var(--img-text-color);
    line-height: 14px;
    margin-top: 10px;

    img {
      transform: translateY(2px);
    }
  }
}

.df-monitor {
  &-head {
    width: 100%;
    padding-left: 16px;

    &-item {
      display: flex;
      justify-content: start;
      align-items: start;
      cursor: pointer;

      img {
        width: 36px;
        height: 36px;
        margin-right: 12px;
        display: inline-block;
      }
      &-right {
        text-align: left;
        &-name {
          color: var(--modal-title-color);
          font-size: 14px;
        }
        &-valueNormal {
          color: #52c41a;
          line-height: 22px;
          padding-left: 2px;

          &::before {
            content: '';
            display: inline-block;
            margin: 0 10px 2px 0;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #0fb964;
            box-shadow: 0px 0px 3px 2px rgba(15, 185, 100, 0.5);
          }
        }

        &-valueAlarm {
          color: var(--info-danger);
          line-height: 22px;
          padding-left: 2px;

          &::before {
            content: '';
            display: inline-block;
            margin: 0 10px 2px 0;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #f5222d;
            box-shadow: 0px 0px 3px 2px rgba(245, 34, 45, 0.5);
          }
        }
      }
    }
  }
  &-table {
    height: 166px;
    overflow-y: hidden;
  }
}

.slick-track {
  width: 340px;
  overflow: hidden;
}
