<template>
  <!-- 一张图 排水设施统计 -->
  <div class="partTitleHM">排水设施统计</div>
  <div class="ppssCount">
    <Vue3SeamlessScroll :hover="true" :list="tableData" :limitScrollNum="5" class="scrolla" direction="left">
      <div class="cenPart">
        <div class="part" v-for="item in tableData">
          <div class="top">
            <div class="upper"><img :src="item.Imgurl" class="upImg" /></div>
            <div class="Major">{{ item.name }}</div>
            <div class="lower">{{ item.num }}</div>
          </div>
          <div class="below">
            <div class="handIn">{{ item.gm }}</div>
            <div class="oflower">{{ item.gmsj }}</div>
          </div>
        </div>
      </div>
    </Vue3SeamlessScroll>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import gsc from '@/assets/newImgs/HMScreen/gsc.png'; //供水厂
import hjbz from '@/assets/newImgs/HMScreen/hjbz.png'; //合建泵站
import hlgw from '@/assets/newImgs/HMScreen/hlgw.png'; //合流管网
import wsbz from '@/assets/newImgs/HMScreen/wsbz.png'; //污水泵站
import wsclz from '@/assets/newImgs/HMScreen/wsclz.png'; //污水处理厂
import wsgw from '@/assets/newImgs/HMScreen/wsgw.png'; //污水管网
import ysbz from '@/assets/newImgs/HMScreen/ysbz.png'; //雨水泵站
import ysgw from '@/assets/newImgs/HMScreen/ysgw.png'; //雨水管网

const { proxy } = getCurrentInstance();
const tableData = ref([
  { name: '雨水泵站', num: '28座', gm: '总规模', gmsj: '167.32m³/s', Imgurl: ysbz },
  { name: '污水泵站', num: '8个', gm: '总规模', gmsj: '67.36m³/s', Imgurl: wsbz },
  { name: '雨污合建泵站', num: '2个', gm: '总规模', gmsj: '17.41m³/s', Imgurl: hjbz },
  { name: '雨水管网', num: '', gm: '总长度', gmsj: '357km', Imgurl: ysgw },
  { name: '污水管网', num: '', gm: '总长度', gmsj: '275km', Imgurl: wsgw },
  { name: '合流管网', num: '', gm: '总长度', gmsj: '150km', Imgurl: hlgw },
  { name: '污水处理厂', num: '5座', gm: '总规模', gmsj: '41.82万吨/日', Imgurl: wsclz },
  { name: '供水厂', num: '3座', gm: '总规模', gmsj: '68.7万吨/日', Imgurl: gsc },
]);
onMounted(() => {});
</script>

<style lang="scss" scoped>
.ppssCount {
  width: 460px;
  background: #004565;
  padding: 10px 15px 0px;
  .scrolla {
    width: 100%;
    height: 230px;
    overflow: hidden;
    display: inline-block;
  }
  .cenPart {
    width: 100%;
    // background: red;
    display: flex;
    .part {
      width: 100px;
      height: 220px;
      margin-bottom: 10px;
      margin-right: 10px;
      align-items: center;
      background: url('@/assets/newImgs/HMScreen/beijing.png') no-repeat;
      background-size: 100% 100%;
      .top {
        height: 140px;
        // background: red;
        .upper {
          height: 81px;
          // background: teal;
          .upImg {
            width: 30px;
            height: 30px;
            position: relative;
            top: 40px;
            left: 34px;
          }
        }
        .Major {
          height: 28px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .lower {
          height: 28px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 24px;
          color: #ffffff;
          line-height: 23px;
          text-shadow: 0px 3px 7px #002a46;
          background: linear-gradient(0deg, #1698f3 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .below {
        margin-top: 25px;
        height: 50px;
        // background: red;
        .handIn {
          height: 25px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #b8ecff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .oflower {
          height: 25px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #b8ecff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>