@import './common/variable.scss';
@import './common/color.scss';

.tab-echarts {
  .tabs {
    ul {
      display: flex;
      user-select: none;
      border-bottom: 1px solid $border-gray-1;
      li {
        color: $gray-2;
        font-size: 12px;
        width: 104px;
        height: 33px;
        line-height: 33px;
        text-align: center;
        background-color: $gray-deep;
        margin-right: 2px;
        border: 1px solid $gray-deep;
        border-radius: 4px 4px 0 0;
        cursor: pointer;
        user-select: none!important;
        &.active {
          position: relative;
          background-color: $white;
          color: $black;
          border-bottom-color: transparent;
          &::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: $white;
            z-index: 1;
          }
        }
      }
    }
  }
  .echart-box {
    width: 526px;
    height: 237px;
    border-left: 1px solid $gray-deep;
    border-right: 1px solid $gray-deep;
    border-bottom: 1px solid $gray-deep;
    .date {
      padding-top: 16px;
      padding-left: 24px;
      ul {
        display: flex;
        li {
          cursor: pointer;
          padding: 0 10px;
          height: 20px;
          line-height: 20px;
          color: $gray;
          font-size: 12px;
          text-align: center;
          margin-right: 6px;
          user-select: none!important;
          &.active {
            background-color: $red-1;
            color: $white;
          }
        }
      }
    }
    .echarts-tab {
      height: 200px;
      width: 470px;
      margin: 0 auto;
    }
  }
}