<template>
  <div class="CenterStarContainer">
    <div class="use-status-con d-flex flex-column">
      <p class="distribute-center-text" style="padding-bottom: 22px;">星级排行(个)</p>
      <div class="data-distribute d-flex h-100 w-100">
        <div class="distribute-left-content" style="width: 78%">
          <div class="distribute-img"></div>
          <div class="distribute-process-item line-0 distribute-center-text">
            65438
          </div>
          <div class="distribute-process-item line-1 distribute-center-text">
            53789
          </div>
          <div class="distribute-process-item line-2 distribute-center-text">
            48632
          </div>
          <div class="distribute-process-item line-3 distribute-center-text">
            39087
          </div>
          <div class="distribute-process-item line-4 distribute-center-text">
            27890
          </div>
        </div>
        <div class="distribute-right-content d-flex flex-column">
          <div class="distribute-data-item line-0">星级5</div>
          <div class="distribute-data-item line-1">星级4</div>
          <div class="distribute-data-item line-2">星级3</div>
          <div class="distribute-data-item line-3">星级2</div>
          <div class="distribute-data-item line-4">星级1</div>
        </div>
      </div>
    </div>
  </div>
</template>
                
                <script>
//   import ContentTop from "@/components/contentTop";
export default {
  components: {
    //   ContentTop,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
                
                <style lang="scss" scoped>
@import "../../../assets/scss/index.scss";
.CenterStarContainer {
  .distribute-center-text {
    width: 270px;
    text-align: center;
    font-size: 24px;
    font-family: DIN, DIN-Bold;
    font-weight: 700;
  }
  .data-distribute {
    .line-0 {
      top: 43px;
    }
    .line-1 {
      top: 136px;
    }
    .line-2 {
      top: 210px;
    }
    .line-3 {
      bottom: 88px;
    }
    .line-4 {
      bottom: 24px;
    }
    .distribute-left-content {
      position: relative;
      .distribute-img {
        display: inline-block;
        height: 382px;
        width: 298px;
        background: url("~@/assets/sportFacilities/distribute.png");
        background-size: cover;
      }
      .distribute-process-item {
        position: absolute;
        left: 0;
      }
    }
    .distribute-right-content {
      font-size: 16px;
      font-weight: 700;
      width: 60px;
      position: relative;
      .distribute-data-item {
        position: absolute;
      }
    }
  }
}
</style>
                