@import "~@/assets/style/scrollbar.less";

.container {
  width: 100%;
  height: 100%;
  padding: ~`rem("20px")` 14px 40px 24px;
  box-sizing: border-box;
  color: #fff;
  text-align: left;
  overflow: hidden;
// 选择框样式调整
:global {
  .ant-tabs{
    height:100%;
    color: inherit !important;;
  }
  .ant-tabs-bar{
    border-color: #7B8197  !important;
  }
  .ant-tabs-top-content{
    height:100%;
    overflow-y:auto;
    overflow-x: hidden;
  }
  .ant-tabs-top-content::-webkit-scrollbar {display:none}
  .ant-tabs-nav-container {
    
    .ant-tabs-tab{
      font-size: ~`rem("18px")`;
    color:#fff;
      background-color: #7B8197 !important;
      border-radius: ~`rem("4px")` 4px 0 0 !important;
      border-color: #7B8197  !important;
    }
    
    .ant-tabs-tab-active{
      background: none !important;
      color:#7B8197 !important;
      border-bottom-color: #373951 !important;
    }
  }
}
  .title {
    color: #7b8197;
    font-size: ~`rem("18px")`;
  }

  .header {
    padding-right: ~`rem("10px")`;

    .companyName,
    .areaName {
      width: 100%;
      margin-bottom: ~`rem("10px")`;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .areaNameText{
        font-size: ~`rem("30px")`;color:#fff;
      }
      .download {
        cursor: pointer;
      }

      // 选择框样式调整
      :global {
        .ant-select {
          width: calc(100% - 60px);
          height: ~`rem("40px")`;
          font-size: ~`rem("32px")`;
          font-weight: 700;
          color: #fff;
          background: transparent;
          z-index: 0;

          .ant-select-selector {
            height: 100%;
            padding: 0;
            background: inherit;
            border: none;
            z-index: 0;

            .ant-select-selection-search {
              left: 0;
              width: 100%;
            }

            .ant-select-selection-item {
              width: 100%;
              line-height: ~`rem("40px")`;
              text-align: left;
            }
          }

          .ant-select-arrow {
            z-index: -1;

            & > span {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }

      img {
        width: ~`rem("40px")`;
        height: ~`rem("40px")`;
      }
    }
    .companyName {
      margin-top: ~`rem("10px")`;
      // 选择框样式调整
      :global {
        .ant-select {
          width:45%;
          font-size: ~`rem("20px")`;
          .ant-select-arrow {
            z-index: -1;
            top:40%;
           
          }
        }
        
      }
    }
    .timeRange {
      margin-top: ~`rem("16px")`;

      :global {
        .ant-calendar-picker {
          width: 100%;
          background: transparent;

          .ant-calendar-picker-input.ant-input {
            background: #4d5166;
            color: #fff;

            input {
              color: #fff;

              &::placeholder {
                color: #fff;
              }
            }
          }

          .ant-calendar-picker-clear {
            background: #4d5166;
          }

          .ant-calendar-picker-icon {
            color: #fff;
          }
        }
      }
    }
  }

  .body {
    padding-right: ~`rem("10px")`;

    :global {
      .ant-radio-group {
        width: 100%;
        margin-top: ~`rem("16px")`;

        .ant-radio-button-wrapper {
          width: 50%;
          background: #4c5166;
          color: #fef;

          &.ant-radio-button-wrapper-checked {
            background-color: #44a1f8;
          }

          & > span {
            width: 100%;
            display: inline-block;
            text-align: center;

            &.ant-radio-button {
              display: inline;
            }
          }
        }
      }
    }

    .content {
      width: 100%;
      margin-top: ~`rem("16px")`;
      height: calc(100% - 58px);

      .chartAndStatisticsContainer {
        height: 100%;
        overflow-y: scroll;
        .scrollbar();
      }

      .chart {
        width: 100%;
        height: ~`rem("360px")`;
      }

      .statistics {
        width: 100%;

        .part {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: ~`rem("16px")`;

          .value {
            .count {
              font-size: ~`rem("44px")`;
              font-weight: bold;
              color: #fff;
            }

            .unit {
              font-size: ~`rem("14px")`;
            }
          }

          .per {
            position: relative;

            span:first-child {
              margin-right: ~`rem("5px")`;
            }

            & .perCount {
              &:after {
                margin-left: ~`rem("4px")`;
                content: "";
                display: inline-block;
                width: ~`rem("8px")`;
                height: ~`rem("8px")`;
                border-left: ~`rem("4px")` solid transparent;
                border-right: ~`rem("4px")` solid transparent;
                box-sizing: border-box;
              }

              &.up {
                color: #f65252;

                &:after {
                  border-top: ~`rem("0px")` solid transparent;
                  border-bottom: ~`rem("8px")` solid #f65252;
                }
              }

              &.down {
                color: #aad827;

                &:after {
                  border-top: ~`rem("8px")` solid #aad827;
                  border-bottom: ~`rem("0px")` solid transparent;
                }
              }
            }
          }
        }

        .event {
          .value {
            .count {
              font-size: ~`rem("28px")`;
              
            }
            .unit {
              font-size: ~`rem("12px")`;
            }
          }
        }
      }

      .vehicleContainer {
        width: 100%;
        height: 100%;

        :global {
          .ant-input-affix-wrapper {
            background: #4d5166;

            .ant-input {
              background: #4d5166;
              color: #fff;
            }
          }
        }

        .listContainer {
          width: 100%;
          height: calc(100% - 42px);
          margin-top: ~`rem("10px")`;
          .scrollbar();

          :global {
            .ant-table {
              background: transparent;
              color: #fff;

              .ant-table-header {
                background: transparent;
                border: none;

                &::-webkit-scrollbar {
                  border: none;
                }

                th {
                  background: transparent;
                  border: none;
                  color: #fff;
                }
              }

              .ant-table-body {
                background: transparent;
                .scrollbar();

                td {
                  border: none;
                }
              }

              .ant-table-placeholder {
                background: transparent;
                border: none;

                p {
                  color: #fff;
                }
              }
            }
          }
        }

        :global {
          .ant-drawer {
            .ant-drawer-content-wrapper {
              height: calc(100vh - 64px);
              top: ~`rem("64px")`;
              background: #fff;

              .ant-drawer-content {
                background: rgba(20, 23, 49, 0.85);
                padding: ~`rem("40px")` 14px 40px 24px;

                .ant-drawer-body {
                  width: 100%;
                  height: 100%;
                  padding: 0;
                }
              }
            }
          }
        }
      }

      .back {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        &:hover {
          opacity: 0.9;
        }

        span {
          font-size: ~`rem("18px")`;
          line-height: ~`rem("18px")`;
          color: #6e7389;
          margin-left: ~`rem("10px")`;
        }
      }

      .vehicle {
        margin-top: ~`rem("16px")`;

        .id {
          color: #fff;
          font-size: ~`rem("32px")`;
          margin-left: ~`rem("10px")`;
        }
      }

      .drawerBody {
        height: calc(100% - 86px);
        padding-right: ~`rem("10px")`;
        overflow-y: scroll;
        .scrollbar();
      }
    }
  }
}


.rankTable {
  margin-top: ~`rem("40px")`;
  margin-left:-5px;
  .scrollbar();
  .hd {
    font-size: ~`rem("24px")`;
    color: #fff;
    line-height: ~`rem("40px")`;
    margin-left: ~`rem("5px")`;
    text-align: left;
  }
  .table {
  }
  :global {
    .ant-table {
      background: transparent;
      color: #fff;
      .ant-table-hide-scrollbar {
        overflow: hidden !important;
        margin-bottom: ~`rem("0px")` !important;
      }
      .ant-table-header,
      .ant-table-thead {
        background: transparent;
        border: none;

        &::-webkit-scrollbar {
          border: none;
        }

        th {
          background: transparent;
          border: none;
          color: #fff;
        }
      }

      .ant-table-body {
        background: transparent !important;
        .scrollbar();

        td {
          border: none;
        }
      }

      .ant-table-placeholder {
        background: transparent;
        border: none;

        p {
          color: #fff;
        }
      }
    }
  }
}