<style>
        * {
            margin: 0;
            padding: 0;
        }
.barItem_container_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
        .piece_container {
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
padding-top:41px;
        }

        .piece_header {
            display: flex;
            align-items: center;
            font-style: 16px;
            color: #222222;
            gap: 6px;
        }

        .piece_i {
            display: flex;
            width: 14px;
            height: 14px;
            border-radius: 2px;
            background-color: #237FFA;
        }

        .piece_list {
            display: flex;
            flex-wrap: wrap;
            gap: 28px;
        }

        .piece_list_item {
            width: 31%;
            height: 328px;
            background-color: #FFFFFF;
            border-radius: 10px;
            border: 1px solid #DFE7F1;
            overflow: hidden;
            display: flex;
            position: relative;
            box-sizing: border-box;
        }

        .piece_list_itemEcharts {
            flex: 1;
        }

        .piece_list_item_left {
            position: absolute;
            top: 14px;
            left: 14px;
            font-size: 14px;
            line-height: 1;
            display: flex;
            flex-direction: column;
            color: #7B7B7B;
            font-size: 12px;
            gap: 12px;
        }

        .piece_list_item_left_title {
            font-size: 14px;
            color: #333333;
        }

       .barItem_container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 50px 14px 50px;
  justify-content: space-between;
  font-size: 14px;
  color: #333333;
}
.barItem_container2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  font-size: 14px;
  gap: 40px;
  color: #333333;
}

.barItem {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.barItem2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.barItem2 dt{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden
}
.barItem2  dd{display:flex; align-item:center; justify-content:center; margin-top:10px}
.bar_num2 {
  color: #237ffa;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
font-weight:700
}
.bar_num2 p {
  font-size: 14px;
  color: #333333;
font-weight:500
}


        .barItem dd {
            display: flex;
            flex-direction: column;
            gap: 6px;
            color: #7B7B7B;
        }

        .barBox {
            height: 20px;
            background-color: #EFF6FF;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
        }

        .bar_plan {
            display: flex;
            background-color: #237FFA;
            border-radius: 10px;
        }

        .bar_num {
            color: #7B7B7B;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

@media screen and (max-width:1280px) {
.piece_list_item{
width:46%
}
}
@media screen and (max-width:890px) {
.piece_list_item{
width:100%
}
}


@media screen and (min-width:1510px) {
.piece_list_item{
width:31%
}
}
@media screen and (min-width:1281px ) and ( max-width:1510px) {
.piece_list_item{
width:28%
}
}

    </style>