.trafficFlowBox{
  display: flex;
  align-items: center;
  .leftPie{
    width: 50%;
    height: 100%;
  }
  .rightPie{
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    .item{
      margin-bottom: 10px;
      position: relative;
      .itemTop{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .itemText{

        }
      }
      .itemBottom{
        width: 100%;
        height: 8px;
        border-radius: 4px;
        background: rgba(140, 140, 140, 0.2);
        position: relative;
        overflow: hidden;
        .progress{
          height: 100%;
          position: absolute;
          left: 0;top: 0;
          background: rgb(107, 150, 248);
        }
      }
      .notice{
        position: absolute;
        top: 0;right: 20%;
        display: none;
        padding: 4px 8px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
      }
    }
    .item:hover{
      .notice{
        display: block!important;
      }
    }
  }
}
