@import '@/styles/common.less';

.overview {
  .overview_card {
    background-color: #f7f7f7ff;
    padding: 20px 32px 20px 32px;
    min-height: calc(100vh - 64px - 48px - 54px);

    .overview_flex {
      display: flex;
      margin-bottom: 20px;

      .overviewBorderRight {
        border-right: 1px solid #dcdcdc80;
        margin-right: 55px;
      }

      .overview_flex_infomation {
        padding: 20px 32px;
        width: 100%;
        height: 210px;

        .infomation_title {
          font-size: 16px;
          font-weight: 700;
          line-height: 21px;
          margin-bottom: 18px;
        }

        .infomation_box {
          display: flex;

          .infomation_single {
            width: 24%;
            display: flex;
            margin-right: 30px;
            flex-direction: column;

            .infomation_single_top {
              display: flex;
              align-items: center;
              margin-bottom: 12px;

              .infomation_single_top_number {
                height: 32px;
                width: 32px;
                border-radius: 999px;
                border: 1px solid rgb(52, 106, 196);
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .infomation_single_top_text {
                margin-left: 16px;
                color: #333;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                width: 96px;
              }

              .infomation_single_top_bord {
                height: 1px;
                width: calc(100% - 32px - 16px - 96px - 8px);
                margin-left: 8px;
                display: flex;
                align-items: center;
                background-color: rgb(220, 220, 220);
              }
            }

            .infomation_single_bottom {
              height: 78px;
              padding: 16px;
              background: linear-gradient(180.00deg, rgb(224, 240, 255), rgb(255, 255, 255) 52.699%);
              border-radius: 6px;

              .infomation_single_bottom_text {
                font-size: 14px;
                font-weight: 400;
                line-height: 18px;
                color: rgb(102, 102, 102);
              }
            }
          }
        }

      }

      .overview_flex_node {
        display: flex;
        width: calc(60% - 40px);
        padding: 20px 32px 0px 32px;
        height: 327px;

        .overview_flex_node_chart {
          width: 100%;

          .node_title {
            font-size: 16px;
            font-weight: 700;
            line-height: 21px;
            margin-bottom: 18px;
          }

          .node_box {
            display: flex;
            padding: 40px 0;
            margin-top: 12px;

            .node_box_single {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 33%;

              .title {
                font-size: 16px;
                font-weight: 700;
                color: #333;
                line-height: 21px;
              }

              .image {
                margin-top: 32px;
                margin-bottom: 16px;
                width: 80px;
                height: 80px;
              }

              .count {
                font-size: 24px;
                font-weight: 700;
                color: rgb(75, 140, 234);
                line-height: 32px;
              }
            }
          }
        }
      }

      .overview_flex_workload {
        display: flex;
        width: calc(60% - 40px);
        padding: 20px 32px 0px 32px;
        height: 327px;
        margin-left: 20px;

        .statckedBarchart {
          position: relative;
          top: -20px;
        }

        .overview_flex_workload_chart {
          width: 100%;
          display: flex;
          flex-direction: column;

          .workload_title {
            font-size: 16px;
            font-weight: 700;
            line-height: 21px;
            margin-bottom: 18px;
          }

          canvas {
            top: -11% !important;
          }
        }
      }

      .overview_flex_resource {
        display: flex;
        width: 100%;
        padding: 20px 32px 0px 32px;
        height: 376px;
        flex-direction: column;

        .statckedBarchart {
          position: relative;
          top: -20px;
        }

        .resource_big_title {
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          margin-bottom: 18px;
        }

        .overview_flex_resource_row {
          display: flex;
          justify-content: space-between;
        }

        .overview_flex_resource_col {
          display: flex;
          justify-content: space-between;

          .overview_flex_resource_half {
            width: 49%;

            .overview_flex_resource_chart {
              width: 100%;
              display: flex;
              flex-direction: column;

              .overview_flex_resource_chart_legend {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 18px;

                .overview_flex_resource_right_top {
                  display: flex;
                  justify-content: space-between;
                  position: relative;

                  .overview_flex_resource_right_legendList {
                    position: absolute;
                    top: 32px;
                    right: 0px;
                    border-radius: 4px;
                    background: #fff;
                    z-index: 1000;
                    box-shadow: 0px 0px 16px rgba(51, 51, 51, 0.20);
                    max-height: 260px;
                    overflow-y: scroll;

                    .overview_flex_resource_right_legendList_single {
                      // margin-bottom: 4px;
                      display: flex;
                      align-items: center;
                      margin: 8px 16px;

                      .legend_color {
                        width: 16px;
                        height: 4px;
                        border-radius: 5px;
                        margin-right: 8px;
                      }

                      .legend_text {
                        color: #333;
                        font-size: 14px;
                        width: max-content;
                      }
                    }
                  }

                  // 滚动条
                  .overview_flex_resource_right_legendList::-webkit-scrollbar {
                    width: 6px;
                  }

                  // 滚动条轨道
                  .overview_flex_resource_right_legendList::-webkit-scrollbar-track {
                    background-color: rgba(145, 145, 145, 0.1);
                    width: 6px;
                  }

                  // 滚动条滑块
                  .overview_flex_resource_right_legendList::-webkit-scrollbar-thumb {
                    background-color: rgba(145, 145, 145, 0.2);
                    width: 6px;
                  }

                  .legend-point {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    padding: 10px;
                  }

                  .overview_flex_resource_right_title {
                    font-size: 14px;
                    color: #333;
                    margin-bottom: 10px;
                  }

                  .overview_flex_resource_right_legend {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                  }
                }
              }

              .resource_title {
                font-size: 14px;
                font-weight: 700;
                line-height: 21px;
              }

              canvas {
                top: -11% !important;
              }
            }
          }
        }
      }
    }

    .top5_show_loading_box{
      height: 260px; 
      display: flex;
      justify-content: center;
      align-items: center;
      .top5_show_loading_box_little{
        display: flex;
        flex-direction: column;
        align-items: center;
        .top5_show_loading_box_little_title{
          font-size: 14px;
          margin-top: 12px;
          color: #666666;
        }
      }
    }
  }
}