<template>
  <div class="partTitleHM">项目类型</div>
  <div class="ConstrucClass">
    <div class="ConstruList">
      <div class="ConstruListA" v-for="item in list">
        <div class="ConstruIcon">
          <img class="Icon_zp" :src="item.imgUrl" alt="" />
        </div>
        <div class="ConstruNr">
          <p class="ellipsis">{{ item.name }}</p>
          <p class="NumA">{{ item.val }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
import drainage from '@/assets/newImgs/HMScreen/drainage_icon.png';
import else_icon from '@/assets/newImgs/HMScreen/else_icon.png';
import GIS_icon from '@/assets/newImgs/HMScreen/GIS_icon.png';
import park from '@/assets/newImgs/HMScreen/park_icon.png';
import pipe from '@/assets/newImgs/HMScreen/pipe_icon.png';
import pipepumping from '@/assets/newImgs/HMScreen/pipepumping_icon.png';
import road from '@/assets/newImgs/HMScreen/road_icon.png';

const list = ref([
  {
    name: '建筑与社区',
    val: '25',
    imgUrl: Architectural,
    isCheck: false,
  },
  {
    name: '道路广场',
    val: '25',
    imgUrl: road,
    isCheck: false,
  },
  {
    name: '公园绿地',
    val: '25',
    imgUrl: park,
    isCheck: false,
  },
  {
    name: '海绵水系',
    val: '25',
    imgUrl: drainage,
    isCheck: false,
  },
  {
    name: '管网排查',
    val: '25',
    imgUrl: pipe,
    isCheck: false,
  },
  {
    name: '管网及泵站',
    val: '25',
    imgUrl: pipepumping,
    isCheck: false,
  },
  {
    name: 'GIS平台与监测设施类',
    val: '25',
    imgUrl: GIS_icon,
    isCheck: false,
  },
  {
    name: '其他',
    val: '25',
    imgUrl: else_icon,
    isCheck: false,
  },
]);
</script>

<style lang="scss" scoped>
.ConstrucClass {
  // width: 100%;
  width: 460px;
  height: 310px;
  background: #003b6d;
  opacity: 0.8;

  .ConstruList {
    width: 95%;
    // background: red;
    margin: auto;
    display: flex;
    flex-flow: row wrap;

    .ConstruListA {
      margin-left: 10px;
      flex-basis: 200px;
      width: 45%;
      height: 65px;
      background: url('@/assets/newImgs/HMScreen/1452.png') no-repeat;
      background-size: 100% 100%;

      margin-top: 10px;
      display: flex;
    }
  }
}
.ConstruIcon {
  width: 30%;
  height: 64px;
  // border: 1px solid #0096e7;
  .Icon_zp {
    width: 40px;
    height: 40px;
    // background: red;
    margin: 15px 10px;
  }
  // background-image: linear-gradient(#004891, #3f80e7);
}
.ConstruNr {
  width: 70%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .ellipsis {
    padding: 5px;
    width: 80%;
    // background: red;
  }
  .NumA {
    width: 20%;
    font-size: 20px;
    color: #48fff0;
    // background: lawngreen;
  }
  // background: goldenrod;
}
</style>