<template>
  <div class="flex-row flex-1 self-stretch  ml-3">
    <div class="flex-col justify-start flex-1 self-center relative group_3" v-if="eqInfoShow">
      
      <div class="flex-row relative group_4">
        <div class="flex-row pos_tanks">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>
        <img class="image_10 pos_15" :src="airTankImg" />
        <div class="flex-row pos_tanks_2">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>
        <div class="flex-row pos_tanks_3">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>
        <div class="flex-row pos_tanks_4">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>

        <div class="flex-row pos_tanks_5">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>

        <div class="flex-row pos_tanks_6">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>

        <div class="flex-row pos_tanks_7">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>

        <div class="flex-row pos_tanks_8">
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
          <img class="image_tanks" :src="tankImg" />
        </div>

        
        <div class="flex-col justify-start section_15 pos_24">
          <div class="flex-col section_16">
            <div class="flex-row">
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
            </div>
            <div class="flex-row mt-119">
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
              <img class="image_floweters" :src="flowmeterImg" />
            </div>
          </div>
        </div>
        <div class="flex-col justify-start section_10 pos_9">
          <div class="flex-col justify-start items-center relative section_11">
            <img class="image_4" :src="downInletWaterImg" />
            <img class="image_4 pos_34" :src="downInletWaterImg" />
          </div>
          <div class="flex-col justify-start items-start image-wrapper pos_10">
            <img class="image_4 image_13" :src="downInletWaterImg" />
          </div>
          <img class="image_4 pos_23" :src="downInletWaterImg" />
          <img class="image_4 pos_11" :src="downInletWaterImg" />
        </div>
        <div class="flex-col justify-start items-start section_8 pos_6">
          <img class="image_14" :src="pImg1" />
          <div class="flex-col section_7 pos_5">
            <img class="shrink-0 self-center image_4 image_11" :src="upInletWaterImg" />
            <img class="shrink-0 self-end image_4 image_7" :src="upInletWaterImg" />
          </div>
        </div>
        <div class="flex-col justify-start section_19 pos_35">
          <div class="flex-row section_20">
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
          </div>
          <div class="flex-row image_floweters_4">
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
            <img class="image_floweters" :src="flowmeterImg" />
          </div>
        </div>
        <div class="flex-col justify-start section_10 pos_38">
          <div class="flex-col justify-start items-center image-wrapper_3">
            <img class="image_29"
              :src="downInletWatersImg" />
          </div>
          <div class="flex-col justify-start items-start image-wrapper_2 pos_39">
            <img class="image_4 image_13" :src="downInletWaterImg" />
          </div>
          <img class="image_4 pos_49" :src="downInletWaterImg" />
          <img class="image_4 pos_42" :src="downInletWaterImg" />
        </div>
        <div class="flex-col justify-start items-start section_12 pos_19">
          <div class="flex-col items-end section_21">
            <img class="image_4 image_28" :src="upInletWaterImg" />
            <img class="image_4 mt-21" :src="upInletWaterImg" />
          </div>
          <div class="flex-col section_13 pos_20">
            <div class="flex-col">
              <img class="self-end image_4" :src="upInletWaterImg" />
              <div class="flex-col items-end self-stretch group_8 mt-33">
                <img class="image_4 image_19" :src="upInletWaterImg" />
                <img class="image_4 mt-17" :src="upInletWaterImg" />
              </div>
            </div>
            <div class="flex-col items-end mt-121">
              <img class="image_4 image_22" :src="upInletWaterImg" />
              <img class="image_4 upInletWater_pos1" :src="upInletWaterImg" />
              <img class="image_4 upInletWater_pos2" :src="upInletWaterImg" />
            </div>
          </div>
          <img class="image_4 pos_50" :src="upInletWaterImg" />
        </div>
        <div class="flex-col section_14 pos_21">
          <div class="flex-row justify-between group_10">
            <img class="self-start image_4 image_26" :src="upInletWaterImg" />
            <div class="flex-col group_6">
              <img class="self-start image_4" :src="downInletWaterImg" />
              <img class="self-end image_4" :src="downInletWaterImg" />
              <img class="self-start image_4 image_12" :src="downInletWaterImg" />
            </div>
          </div>
          <div class="flex-row justify-between group_11">
            <img class="image_4" :src="upInletWaterImg" />
            <img class="image_4" :src="downInletWaterImg" />
          </div>
          <div class="flex-row justify-between group_12">
            <img class="self-start image_27"
              :src="downInletWatersImg" />
            <div class="flex-col items-center self-center group_13">
              <img class="image_4" :src="downInletWaterImg" />
              <img class="image_4 mt-21" :src="downInletWaterImg" />
            </div>
          </div>
        </div>
        <div class="flex-col section_9 pos_7">
          <div class="flex-col">
            <div class="flex-row justify-between items-center self-stretch">
              <div class="flex-col group_7">
                <img class="shrink-0 self-start image_4" :src="upInletWaterImg" />
                <img class="shrink-0 self-end image_4" :src="upInletWaterImg" />
              </div>
              <div class="flex-col group_6">
                <img class="self-start image_4" :src="downInletWaterImg" />
                <img class="self-end image_4" :src="downInletWaterImg" />
                <img class="self-start image_4 image_12" :src="downInletWaterImg" />
              </div>
            </div>
            <img class="self-end image_4 mt-10" :src="downInletWaterImg" />
          </div>
          <div class="flex-col items-end group_9 mt-42">
            <img class="image_4 image_20" :src="downInletWaterImg" />
            <img class="image_4 mt-26" :src="downInletWaterImg" />
          </div>
        </div>
        <div class="flex-col section_17 pos_25">
          <img class="self-start image_4 image_15" :src="upInletWaterImg" />
          <img class="self-start image_4 image_21" :src="upInletWaterImg" />
          <img class="self-center image_4 image_23" :src="upInletWaterImg" />
        </div>
        <img class="image_5 pos_4" :src="inletValveLImg" />
        <img class="image_5 pos_36" :src="inletValveLImg" />
        <img class="image_24 pos_40" :src="collectingWellImg" />
        <img class="image_4 pos_8" :src="downInletWaterImg" />
        <img class="image_4 pos_41" :src="upInletWaterImg" />
        <img class="image_4 pos_22" :src="upInletWaterImg" />
        <span class="font_2 pos_51">积水罐</span>
        <img class="image_4 pos_37" :src="downInletWaterImg" />
      </div>


      <img class="image_4 pos_3" :src="upInletWaterImg" />
      <img class="image_4 pos_2" :src="upInletWaterImg" />
      <span class="font_2 text_3 pos">储气罐</span>
    </div>
    <div class="flex-col items-center self-start group_5" v-if="eqInfoShow">
        <img class="image_6" :src="inletValveRImg" />
        <img class="image_6 mt-208" :src="inletValveRImg" />
      </div>

    <!-- 信息弹出框 -->
    <div class="info_box flex-col" v-if="infoShow">
      <div class="info_title">
        <div class="info_title_left">设备信息</div>
        <div class="info_title_right" @click="closeInfoBox">
          <img :src="closeImg" />
        </div>
      </div>
      <div class="info_content">
        <div class="info_item flex-row">
          <div class="info_item_left">内温：</div>
          <div class="info_item_center">24.5</div>
          <div class="info_item_right">°C</div>
        </div>
      </div>
      <div class="info_content">
        <div class="info_item flex-row">
          <div class="info_item_left">瞬间流量：</div>
          <div class="info_item_center">50</div>
          <div class="info_item_right">m³/s</div>
        </div>
      </div>
      <div class="info_content">
        <div class="info_item flex-row">
          <div class="info_item_left">瞬时流速：</div>
          <div class="info_item_center">50</div>
          <div class="info_item_right">m³/s</div>
        </div>
      </div>
      <div class="info_content">
        <div class="info_item flex-row">
          <div class="info_item_left">累计流量：</div>
          <div class="info_item_center">100</div>
          <div class="info_item_right">m³</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import '@/css/dcs/style.css'
export default {
  name: 'EqInfoComponent',
  components: {},
  props: {},
  data() {
    return {
      downInletWaterImg: require('@/assets/dcs/eqName/downInletWater.svg'), //下游入水口
      downInletWatersImg: require('@/assets/dcs/eqName/downInletWaters.svg'), //2个下游入水口
      upInletWaterImg: require('@/assets/dcs/eqName/upInletWater.svg'), //上游入水口
      flowmeterImg: require('@/assets/dcs/eqInfo/flowmeter.svg'), //流量计
      flowmetersImg: require('@/assets/dcs/eqInfo/flowmeters.svg'), //2个流量计
      tankImg: require('@/assets/dcs/eqInfo/tank.svg'), //储气罐
      tanksImg: require('@/assets/dcs/eqInfo/tanks.svg'), //2个储气罐
      airTankImg: require('@/assets/dcs/eqInfo/airTank.svg'), //空气储罐
      inletValveLImg: require('@/assets/dcs/eqInfo/inletValveL.svg'), //左进水阀门
      inletValveRImg: require('@/assets/dcs/eqInfo/inletValveR.svg'), //右进水阀门
      collectingWellImg: require('@/assets/dcs/eqInfo/collectingWell.svg'), //收集井
      pImg1: require('@/assets/dcs/eqInfo/p1.svg'), //P1管道
      closeImg: require('@/assets/dcs/eqInfo/close.svg'), //关闭按钮
      eqInfoShow: true, //设备信息是否显示
      infoShow: false, //信息弹出框是否显示
    };
  },

  methods: {
    showInfoBox(){
      this.infoShow = true;
      this.eqInfoShow = false;
    },
    closeInfoBox(){
      this.infoShow = false;
      this.eqInfoShow = true;
    }
  },
};
</script>

<style scoped lang="css">
.ml-3 {
  margin-left: 3.04px;
}

.ml-21 {
  margin-left: 20.96px;
}

.mt-119 {
  margin-top: 119.04px;
}

.mt-21 {
  margin-top: 20.96px;
}

.mt-33 {
  margin-top: 33.00px;
}

.mt-17 {
  margin-top: 16.96px;
}

.mt-121 {
  margin-top: 121.00px;
}

.mt-9 {
  margin-top: 9.00px;
}

.mt-208 {
  margin-top: 208.00px;
}

.group_3 {
  padding-top: 10.24px;
}

.group_4 {
  padding: 26.08px 95.52px 42.56px 120.96px;
  height: 536.48px;
}

.image_10 {
  width: 62.08px;
  height: 64.00px;
}

.pos_15 {
  position: absolute;
  right: 372.48px;
  top: 26.08px;
}

.image_8 {
  width: 51.04px;
  height: 53.00px;
}

.pos_12 {
  position: absolute;
  left: 122.96px;
  top: 26.08px;
}

.pos_tanks {
  position: absolute;
  left: 113.96px;
  top: 26.08px;
}

.image_9 {
  width: 20.00px;
  height: 53.00px;
}

.image_tanks {
  margin-left: 11px;
  width: 20.00px;
  height: 53.00px;
}

.pos_13 {
  position: absolute;
  left: 183.04px;
  top: 26.08px;
}

.pos_14 {
  position: absolute;
  left: 214.08px;
  top: 26.08px;
}

.pos_tanks_2 {
  position: absolute;
  right: 95.48px;
  top: 26.08px;
}

.pos_17 {
  position: absolute;
  right: 157.44px;
  top: 26.08px;
}

.pos_18 {
  position: absolute;
  right: 95.52px;
  top: 26.08px;
}

.pos_tanks_3 {
  position: absolute;
  left: 112.96px;
  bottom: 163.52px;
}

.pos_44 {
  position: absolute;
  left: 183.04px;
  bottom: 163.52px;
}

.pos_45 {
  position: absolute;
  left: 214.08px;
  bottom: 163.52px;
}

.pos_tanks_4 {
  position: absolute;
  right: 98.44px;
  bottom: 163.52px;
}

.pos_47 {
  position: absolute;
  right: 158.56px;
  bottom: 163.52px;
}

.pos_48 {
  position: absolute;
  right: 96.48px;
  bottom: 163.52px;
}

.pos_tanks_5 {
  position: absolute;
  left: 111.96px;
  top: 147.04px;
}

.pos_27 {
  position: absolute;
  left: 183.04px;
  top: 147.04px;
}

.pos_28 {
  position: absolute;
  left: 214.08px;
  top: 147.04px;
}

.pos_29 {
  position: absolute;
  left: 245.76px;
  top: 147.04px;
}

.pos_30 {
  position: absolute;
  right: 219.52px;
  top: 147.04px;
}

.pos_31 {
  position: absolute;
  right: 188.48px;
  top: 147.04px;
}

.pos_32 {
  position: absolute;
  right: 157.44px;
  top: 147.04px;
}

.pos_tanks_6 {
  position: absolute;
  right: 95.52px;
  top: 147.04px;
}

.pos_52 {
  position: absolute;
  left: 120.96px;
  bottom: 42.56px;
}

.pos_53 {
  position: absolute;
  left: 183.04px;
  bottom: 42.56px;
}

.pos_tanks_7 {
  position: absolute;
  left: 112.08px;
  bottom: 42.56px;
}

.pos_55 {
  position: absolute;
  right: 189.44px;
  bottom: 42.56px;
}

.pos_56 {
  position: absolute;
  right: 158.56px;
  bottom: 42.56px;
}

.pos_tanks_8 {
  position: absolute;
  right: 95.48px;
  bottom: 46.56px;
}

.section_15 {
  background-image: url('../../assets/dcs/eqInfo/p2.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 300px;
}

.pos_24 {
  position: absolute;
  left: 128.96px;
  top: 67.04px;
}

.section_16 {
  padding: 36.48px 6.88px 73.44px 6.88px;
  background-image: url('../../assets/dcs/eqInfo/p3.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 300px;
}

.image_16 {
  width: 40.00px;
  height: 10.08px;
}

.image_floweters {
  margin-right: 21px;
  width: 10.08px;
  height: 10.08px;
}

.image_18 {
  width: 40.96px;
  height: 10.08px;
}

.section_10 {
  padding: 41.44px 0 2.56px;
  background-image: url('../../assets/dcs/eqInfo/p4.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 224px;
}

.pos_9 {
  position: absolute;
  left: 28.48px;
  top: 10.08px;
}

.section_11 {
  padding: 71.52px 0 69.44px;
  background-image: url('../../assets/dcs/eqInfo/p5.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 227.04px;
}

.image_4 {
  width: 16px;
  height: 16px;
}

.pos_34 {
  position: absolute;
  left: 73.44px;
  bottom: 35.52px;
}

.image-wrapper {
  padding: 28.96px 0;
  border-radius: 1.008px;
  background-image: url('../../assets/dcs/eqInfo/p6.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 176px;
}

.pos_10 {
  position: absolute;
  right: 0;
  top: 3.04px;
}

.image_13 {
  margin-left: 24px;
}

.pos_23 {
  position: absolute;
  left: 38.56px;
  top: 58.08px;
}

.pos_11 {
  position: absolute;
  left: 38.56px;
  top: 12.96px;
}

.section_8 {
  padding-top: 50.72px;
  background-image: url('../../assets/dcs/eqInfo/p7.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 280px;
  height: 215.04px;
}

.pos_6 {
  position: absolute;
  left: 138.08px;
  top: 0;
}

.image_14 {
  border-radius: 1.008px;
  width: 179.04px;
  height: 164.96px;
}

.section_7 {
  padding: 17.44px 0 35.52px;
  border-radius: 1.008px;
  background-image: url('../../assets/dcs/eqInfo/p8.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 282.08px;
  height: 80px;
}

.pos_5 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.image_11 {
  margin-top: 11.04px;
}

.image_7 {
  margin-right: 97.6px;
  margin-top: -27.04px;
}

.section_19 {
  padding: 2.56px 0;
  background-image: url('../../assets/dcs/eqInfo/p9.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 290.08px;
}

.pos_35 {
  position: absolute;
  left: 128.96px;
  top: 280px;
}

.section_20 {
  padding: 115.52px 6.88px 124.48px;
  background-image: url('../../assets/dcs/eqInfo/p10.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.image-wrapper_4 {
  width: 40.96px;
}

.view {
  margin-right: 142.24px;
}

.pos_38 {
  position: absolute;
  left: 28.48px;
  top: 304px;
}

.image-wrapper_3 {
  padding: 72.48px 0 39.52px;
  background-image: url('../../assets/dcs/eqInfo/p11.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 227.04px;
}

.image_29 {
  width: 26.08px;
  height: 44.96px;
}

.image-wrapper_2 {
  padding: 28px 0 30.08px;
  border-radius: 1.008px;
  background-image: url('../../assets/dcs/eqInfo/p12.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 176px;
}

.pos_39 {
  position: absolute;
  right: 0;
  top: 3.04px;
}

.pos_49 {
  position: absolute;
  left: 38.56px;
  top: 56.96px;
}

.pos_42 {
  position: absolute;
  left: 38.56px;
  top: 12px;
}

.section_12 {
  padding-top: 294.24px;
  background-image: url('../../assets/dcs/eqInfo/p13.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 204px;
  height: 459.04px;
}

.pos_19 {
  position: absolute;
  left: 138.08px;
  top: 51.52px;
}

.section_21 {
  padding: 65.28px 27.36px 46.72px;
  border-radius: 1.008px;
  background-image: url('../../assets/dcs/eqInfo/p14.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 179.04px;
}

.image_28 {
  margin-right: 9px;
}

.section_13 {
  padding: 15.2px 22.24px 36.8px;
  border-radius: 1.008px;
  background-image: url('../../assets/dcs/eqInfo/p15.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 206.08px;
}

.pos_20 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.group_8 {
  padding: 0 30.08px;
}

.image_19 {
  margin-right: 10.08px;
}

.image_22 {
  margin-right: 40.96px;
}

.image_25 {
  width: 48px;
  height: 27.04px;
}

.pos_50 {
  position: absolute;
  right: 20.96px;
  bottom: 134.56px;
}

.section_14 {
  padding: 246.56px 38.08px 67.52px 95.04px;
  background-image: url('../../assets/dcs/eqInfo/p16.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 389.76px;
}

.pos_21 {
  position: absolute;
  right: 0;
  top: 56px;
}

.group_10 {
  padding-left: 32px;
}

.image_26 {
  margin-top: 24px;
}

.group_6 {
  width: 58.08px;
}

.image_12 {
  margin-left: 10.08px;
  margin-top: 3.04px;
}

.group_11 {
  margin-top: 9.04px;
}

.group_12 {
  margin-top: 32px;
  padding: 0 32.96px;
}

.image_27 {
  width: 24.96px;
  height: 44.96px;
}

.group_13 {
  width: 24px;
}

.section_9 {
  padding: 0 38.56px 35.04px 92.48px;
  background-image: url('../../assets/dcs/eqInfo/p17.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 388px;
}

.pos_7 {
  position: absolute;
  right: 0;
  top: 4px;
}

.group_7 {
  width: 51.04px;
}

.group_9 {
  padding: 0 34.08px;
}

.image_20 {
  margin-right: 10.08px;
}

.section_17 {
  padding: 18.08px 52px 16px;
  background-image: url('../../assets/dcs/eqInfo/p18.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 293.44px;
}

.pos_25 {
  position: absolute;
  right: 105.44px;
  top: 67.04px;
}

.image_15 {
  margin-left: 31.04px;
}

.image_21 {
  margin-top: 51.04px;
}

.image_23 {
  margin-top: 118.08px;
}

.image_5 {
  width: 45.76px;
  height: 85.92px;
}

.pos_4 {
  position: absolute;
  left: 0;
  top: 0;
}

.pos_36 {
  position: absolute;
  left: 3.04px;
  bottom: 157.6px;
}

.image_24 {
  width: 85.76px;
  height: 76px;
}

.pos_40 {
  position: absolute;
  right: 361.44px;
  bottom: 151.52px;
}

.pos_8 {
  position: absolute;
  left: 109.12px;
  top: 4.96px;
}

.pos_41 {
  position: absolute;
  right: 278.56px;
  bottom: 209.44px;
}

.pos_22 {
  position: absolute;
  right: 276.48px;
  top: 64px;
}

.font_2 {
  font-size: 16px;
  /* font-family: Heiti SC; */
  line-height: 14.72px;
  font-weight: 300;
  color: #00f0f8;
}

.pos_51 {
  position: absolute;
  right: 378.88px;
  bottom: 119.04px;
}

.pos_37 {
  position: absolute;
  left: 109.12px;
  bottom: 222.56px;
}

.pos_58 {
  position: absolute;
  left: 136px;
  bottom: 0;
}

.pos_59 {
  position: absolute;
  left: 196.96px;
  bottom: 0;
}

.pos_60 {
  position: absolute;
  left: 229.76px;
  bottom: 0;
}

.pos_3 {
  position: absolute;
  left: 264px;
  top: 3.2px;
}

.pos_2 {
  position: absolute;
  right: 235.52px;
  top: 0;
}

.text_3 {
  line-height: 14.72px;
}

.pos {
  position: absolute;
  right: 382.88px;
  top: 0;
}

.group_5 {
  margin-right: 4.96px;
  margin-top: 10px;
}

.image_6 {
  width: 45.76px;
  height: 86.08px;

}

.image_floweters_4 {
  margin-left: 6.96px;
  margin-top: -6px;
}

.upInletWater_pos1 {
  position: absolute;
  left: 109.12px;
  top: 10.08px;
}

.upInletWater_pos2 {
  position: absolute;
  left: 109.12px;
  top: 20.16px;
}

.info_box {
  width: 302.482px;
  height: 181px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #107FD1;
  background: rgba(3, 18, 44, 0.90);
}

.info_title {
  width: 292px;
  height: 31px;
  flex-shrink: 0;
  background: #0C508C;
  margin: 5px auto;
}

.info_title_left {
  margin: 4px auto;
  width: 65.145px;
  height: 21.241px;
  flex-shrink: 0;
  color: #FFF;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.info_title_right img {
  position: relative;
  left: 269px;
  top: -23px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.info_item {
 padding: 2px 30px;
}
.info_item_left {
  display: flex;
  width: 108px;
  height: 27px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #90D0FF;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.info_item_center {
  display: flex;
  width: 75px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #14FFFF;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.info_item_right {
  display: flex;
  width: 50px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #72A5CA;
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
</style>
