<template>
  <!-- 项目分区建议 -->
  <div class="areaProject">
    <!-- 古城片区 -->
    <div v-if="areaObj.value == '0'">
      <p>古城片区：以优质的"蓝绿"基底为基础，系统提升片区韧性。片区共谋划项目27个，以改造类项目为主，海绵总投资约13.38亿元</p>
      <div class="zlBefore">
        <div class="bg">治理前</div>
        <div class="flex flex-justcontent-spacearound mt-10 content">
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/hourSC.png" alt="" class="img" />
            <div>
              <div>泵站总开机时长</div>
              <div class="num">23小时40分钟</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
            <div>
              <div>泵站总抽排量</div>
              <div class="num">12.5万吨</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/pumpLL.png" alt="" class="img" />
            <div>
              <div>径流总量控制率</div>
              <div class="num">45%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="zdAfter">
        <div class="bg">治理后</div>
        <div class="flex flex-justcontent-spacearound mt-10 content">
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/hourSC.png" alt="" class="img" />
            <div>
              <div>泵站总开机时长</div>
              <div class="num">13小时21分</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
            <div>
              <div>泵站总抽排量</div>
              <div class="num">7.1万吨</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/pumpLL.png" alt="" class="img" />
            <div>
              <div>径流总量控制率</div>
              <div class="num">72%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 城东南片区 -->
    <div v-if="areaObj.value == '1'">
      <p>城东南片区：以解决内涝积水和溢流污染为导向，从源头到末端实现污涝协同治理。</p>
      <div class="zlBefore">
        <div class="bg">治理前</div>
        <div class="flex flex-justcontent-spacearound mt-10 content">
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
            <div>
              <div>易涝积水点</div>
              <div class="num">2处</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
            <div>
              <div>合流制溢流频次</div>
              <div class="num">>20次</div>
            </div>
          </div>
        </div>
      </div>
      <div class="zdAfter">
        <div class="bg">治理后</div>
        <div class="flex flex-justcontent-spacearound mt-10 content">
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
            <div>
              <div>易涝积水点</div>
              <div class="num">0处</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
            <div>
              <div>合流制溢流频次</div>
              <div class="num">10次</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 保税区片区 -->
    <div v-if="areaObj.value == '2'">
      <p>
        保税区片区：以连片打造为目标，降低高硬化面积区域雨水径流对市政管网的冲击，实现雨水资源化利用。片区内谋划实施项目12个项目包，共包含35个子项（产业园区内主要为新建项目，产业园区外项目以改造为主），海绵总投资：2.93亿元
      </p>
      <div class="zlBefore">
        <div class="bg">治理前</div>
        <div class="flex flex-justcontent-spacearound mt-10 content">
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
            <div>
              <div>易涝积水点</div>
              <div class="num">5处</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/rainSJ.png" alt="" class="img" />
            <div>
              <div>雨水收集量</div>
              <div class="num">0.3万吨</div>
            </div>
          </div>
        </div>
      </div>
      <div class="zdAfter">
        <div class="bg">治理后</div>
        <div class="flex flex-justcontent-spacearound mt-10 content">
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
            <div>
              <div>易涝积水点</div>
              <div class="num">0处</div>
            </div>
          </div>
          <div class="flex">
            <img src="@/assets/newImgs/HMScreen/rainSJ.png" alt="" class="img" />
            <div>
              <div>雨水收集量</div>
              <div class="num">5.3万吨</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
  areaObj: { type: Object },
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
.areaProject {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  .zdAfter {
    margin: 30px auto;
  }
  .content {
    .flex {
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #b8ecff;
      width: 33%;

      .img {
        width: 80px;
        height: 78px;
        margin-right: 20px;
      }
      .num {
        font-family: YouSheBiaoTiHei;
        color: #13b4ff;
        font-size: 24px;
        margin-top: 8px;
      }
    }
  }

  .bg {
    width: 748px;
    height: 34px;
    line-height: 30px;
    background: url('@/assets/newImgs/HMScreen/areaBg.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 30px;
  }
}
</style>