<template>
  <ul class="post_list">
    <li class="list_one" v-for="item in listcont" :key="item">
      <img :src="item.img" alt="">
      <div class="list_number">
        <span style="display: block;"> {{ item.title }}:</span>
        <span class="sl">{{ item.num }}</span> 个
      </div>
    </li>

  </ul>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref } from "vue";
const listcont = ref([
  { title: '部门总数量', num: '36', img: getImgUrl('indexImages/icon12.png') },
  { title: '重点部位数', num: '36', img: getImgUrl('indexImages/icon13.png') },
  { title: '设备总数量', num: '36', img: getImgUrl('indexImages/icon14.png') },
  { title: '部位设备数', num: '36', img: getImgUrl('indexImages/icon15.png') },
])
</script>

<style lang="scss" scoped>
.post_list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  background: #fff;

  .list_one {
    display: flex;
    // justify-content: space-between;
    width: 95%;
    height: 54px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 2px rgba(15, 57, 22, 0.03);
    margin: 5px 0;

    img {
      margin: auto 20px;
    }

    .list_number {
      font-size: 16px;
      font-weight: 400;
      color: #191919;
      margin-left: 20px;
      padding: 5px 0;
      // margin: -30px 0px 0 0px;

      .sl {
        font-size: 24px;
        color: var(--el-color-primary);
        margin-left: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>