<template>
  <ul class="post_list">
    <li class="list_one">
      <sapn class="item">参加达标人数</sapn> <br/>
      <sapn>1,556</sapn>
    </li>
    <li class="list_two">
      <sapn>不可达标人数</sapn> <br/>
      <sapn>1,556</sapn>
    </li>
    <li class="list_thr">
      <sapn>已达标人数</sapn> <br/>
      <sapn>1,556</sapn>
    </li>
    <li class="list_four">
      <sapn>可达标人数</sapn> <br/>
      <sapn>1,556</sapn>
    </li>
  
</ul>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
</script>
    
<style lang="scss" scoped>

.post_list{
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
    li{
        width: 49%;
        height: 76px;
        margin-top: 10px;
        padding-left: 70px;
        padding-top: 10px;
        box-sizing: border-box;
        >sapn:first-child{
          margin-bottom: 5px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba($color: #FFFFFF, $alpha: 0.6);
          line-height: 28px;
        }
    }
    li:nth-child(2n+1){
      margin-right: 2%;
    }
  .list_one{
    background:url('~@/assets/images/icon2.png') no-repeat left center;
  }
  .list_two{
    background:url('~@/assets/images/icon3.png') no-repeat left center;
  }
  .list_thr{
    background:url('~@/assets/images/icon4.png') no-repeat left center;
  }
  .list_four{
    background:url('~@/assets/images/icon5.png') no-repeat left center;
  }
}
</style>