<template>
  <div id="gwpm">
    <div class="pipePou flex">
      <div class="leftP">
        <!-- 井深 -->
        <div class="part partJ">井深：5.8米</div>

        <!-- 水高度 -->
        <img src="@/assets/images/fhpl/pipeW.png" alt="" class="water" style="height: 80px" />
        <div class="part partW">水深：3.5米</div>

        <!-- 瞬时流量 -->
        <div class="part partL" style="width: 180px">瞬时流量：0.06m³/s</div>

        <!-- 设备 -->
        <img src="@/assets/images/fhpl/equip.png" alt="" class="equipA" />
      </div>
      <div class="rightP">
        <div class="title">基本信息</div>
        <div class="part flex">
          <div class="biaoti">所在位置：</div>
          <div class="cont">东关大街与长青路交叉口</div>
        </div>
        <div class="part flex">
          <div class="biaoti">管网流向：</div>
          <div class="cont">由南到北</div>
        </div>
        <div class="part flex">
          <div class="biaoti">井盖材质：</div>
          <div class="cont">铸铁</div>
        </div>
        <div class="part flex">
          <div class="biaoti">管径：</div>
          <div class="cont">800mm</div>
        </div>
        <div class="part flex">
          <div class="biaoti">安装高度：</div>
          <div class="cont">4.80米</div>
        </div>
        <div class="part flex">
          <div class="biaoti">井深：</div>
          <div class="cont">5.80米</div>
        </div>

        <div class="title" style="margin-top: 50px">实时数据</div>
        <div class="part flex">
          <div class="biaoti">水深：</div>
          <div class="cont">5.50米</div>
        </div>
        <div class="part flex">
          <div class="biaoti">温度：</div>
          <div class="cont">30.8℃</div>
        </div>
        <div class="part flex">
          <div class="biaoti">瞬时流量：</div>
          <div class="cont">0.06m³/s</div>
        </div>
        <div class="part flex">
          <div class="biaoti">SS：</div>
          <div class="cont">38.6mg/L</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="gwpm">
import { ref, reactive, toRefs, onMounted } from 'vue';

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

<style lang="scss" scoped>
#gwpm {
  width: 100%;
  height: 100%;

  .pipePou {
    .leftP {
      width: 1000px;
      height: 570px;
      background: url('@/assets/images/fhpl/pipe.gif') no-repeat;
      background-size: 100% 100%;
      position: relative;
      .water {
        position: absolute;
        bottom: 50px;
        left: 0px;
        z-index: 10;
        width: 1000px;
        height: 128px;
      }
      .part {
        border-radius: 12px;
        width: 110px;
        height: 26px;
        line-height: 26px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
      }
      .partW {
        position: absolute;
        bottom: 190px;
        left: 60px;
        z-index: 10;
      }
      .partJ {
        position: absolute;
        top: 175px;
        right: 105px;
        z-index: 10;
      }
      .partL {
        position: absolute;
        bottom: 190px;
        right: 20px;
        z-index: 10;
      }
      .equipA {
        position: absolute;
        bottom: 60px;
        left: 30px;
        z-index: 15;
        width: 470px;
        height: 339px;
      }
    }
    .rightP {
      margin-left: 30px;
      color: #fff;
      .title {
        border-left: 5px solid #67bcfa;
        padding-left: 8px;
        font-size: 16px;
        font-weight: 600;
        margin-top: 20px;
      }
      .part {
        margin: 15px 0px 10px 10px;
        color: #c8dbe0;
        font-size: 15px;
        .biaoti {
          width: 100px;
        }
      }
    }
  }
}
</style>