<template>
  <div class="partTitleHM">城市规划</div>
  <div class="partContHM">
    <!-- 水安全规划 -->
    <div class="rightBox rightBox1">
      <div class="ListTitle">水安全规划</div>
      <div class="precedence">
        <div class="eachinfo">
          <div class="headText">年径流总量控制率</div>
          <div class="middleext">
            <div class="middleextA">
              <p class="NumberListMB">目标:</p>
              <p class="NumberList">&nbsp; 70%</p>
            </div>
            <div class="rightText">以上</div>
          </div>
        </div>
      </div>
      <div class="XqDetails">
        <div class="DetailsOne">排涝规则</div>
        <div class="DetailsTwo">
          <span class="DetailsTwoA">新建改造泵站</span>
          <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
        </div>
        <div class="DetailsTthree">
          <span>新建雨水管渠</span>
          <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
        </div>
      </div>
    </div>
    <!-- 水环境规划 -->
    <div class="rightBox rightBox2">
      <div class="ListTitle">水环境规划</div>
      <div class="precedence" v-for="item in policiesList" :key="item">
        <div class="eachinfo">
          <div class="headText">{{ item.name }}</div>
          <div class="middleext">
            <div class="middleextA">
              <span class="NumberListMB">目标:</span>
              <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
            </div>
            <div class="rightText">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 水生态规划 -->
    <div class="rightBox rightBox3">
      <div class="ListTitle">水生态规划</div>
      <div class="XqDetails" v-for="item in policiesListS">
        <div class="DetailsAquaticEcology">
          <div class="icon"></div>
          {{ item.name }}
        </div>
        <div class="DetailsAquaticEcologyTwo">
          <p class="DetailsTwoA">{{ item.NumberA }}</p>
          <p class="DetailsTwoB">{{ item.content }}</p>
        </div>
      </div>
    </div>

    <!-- 水资源规划 -->
    <div class="rightBox rightBox4">
      <div class="ListTitle">水资源规划</div>
      <div class="ListContent">
        <!-- 雨水资源利用 -->
        <div class="sewageResources">
          <div class="sewageTop">
            <div class="YStext">雨水资源利用</div>
          </div>
          <div>
            <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
          </div>
        </div>
        <!-- 污水资源利用 -->
        <div class="sewageResources">
          <div class="sewageTop">
            <div class="wstext">污水资源利用</div>
            <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
          </div>
          <div>
            <SewageEcharts></SewageEcharts>
          </div>
        </div>
      </div>
    </div>

    <!-- 供水规划 -->
    <div class="rightBox rightBox5">
      <div class="ListTitle">供水规划</div>
      <div class="ListContent">
        <div class="waterSupply">
          <div class="bottomBgc"></div>
          <div class="eachDescribe">
            <div class="icon bgcblue"></div>
            <div class="text">近期</div>
            <div class="sum colorBlue">68.7</div>
            <div class="unit">万立方米/日</div>
          </div>
          <div class="eachDescribe">
            <div class="icon bgcYellow"></div>
            <div class="text">远期</div>
            <div class="sum colorYellow">88.7</div>
            <div class="unit">万立方米/日</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import RainwaterTakeAdvantage from '@/views/sponeScreen/Echarts/RainwaterTakeAdvantage.vue'; //雨水资源利用图例
import SewageEcharts from '@/views/sponeScreen/Echarts/SewageEcharts.vue'; //污水资源利用图例
// 水环境规划
const policiesList = ref([
  {
    name: '径流污染控制 ',
    NumberA: '60%',
    content: '以上',
  },
  {
    name: '黑臭水体消除比例',
    NumberA: '100%',
    content: '',
  },
  {
    name: '城市生活污水收集率 ',
    NumberA: '82%',
    content: '以上',
  },
]);
// 水生态规划
const policiesListS = ref([
  {
    name: '河流生态基流满足程度 ',
    NumberA: '2025年≥80%',
    content: '2035年≥95%',
  },
  {
    name: '生态岸线比例',
    NumberA: '12025年≥60%',
    content: '2035年≥80%',
  },
]);
</script>

<style lang="scss" scoped>
.rightBox {
  .ListTitle {
    width: 100%;
    height: 32px;
    line-height: 32px;
    background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    // box-sizing: border-box;
    padding-left: 30px;
    font-family: SourceHanSansCN-Medium;
    font-weight: bold;
    font-size: 15px;
    color: #e4f5ff;
  }
  .precedence {
    margin-top: 5px;
    width: 100%;
    height: 32px;
    // line-height: 32px;
    background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
    background-size: 100% 100%;
    .eachinfo {
      display: flex;
      height: 32px;
      color: #b8ecff;
      //   background: red;
      .headText {
        width: 60%;
        padding-left: 20px;
        line-height: 32px;
        font-size: 16px;
        // background: yellow;
      }
      .middleext {
        display: flex;
        width: 40%;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        // background: blue;
        .middleextA {
          width: 65%;
          text-align: center;
          //   background: red;
          display: flex;
          .NumberListMB {
            // background: #f7c987;
            width: 40%;
          }
          .NumberList {
            // background: lawngreen;
            width: 60%;
            font-size: 18px;
            color: #3afff8;
          }
        }
      }
      .rightText {
        width: 35%;
        line-height: 32px;
        text-align: center;
        // background: lawngreen;
      }
    }
  }
  .XqDetails {
    margin-top: 8px;
    height: 32px;
    display: flex;
    color: #b8ecff;
    font-family: SourceHanSansCN-Medium;
    font-weight: bold;
    font-size: 15px;
    // background: red;
    .DetailsOne {
      width: 18%;
      line-height: 30px;
      text-align: center;
      //   background: yellow;
    }
    .DetailsTwo {
      width: 40%;
      line-height: 30px;
      text-align: center;
      //   background: blueviolet;
      .DetailsTwoB {
        color: #f7c987;
      }
    }
    .DetailsTthree {
      width: 45%;
      line-height: 30px;
      text-align: center;
      //   background: #3afff8;
      .DetailsTthreeA {
        color: #3afff8;
      }
    }

    // 水生态规划
    .DetailsAquaticEcology {
      width: 45%;
      line-height: 30px;
      .icon {
        display: inline-block;
        border-color: #3afff8;
        border-style: solid;
        border-width: 2px;
        width: 0;
        height: 0;
        margin-right: 7px;
        position: relative;
        top: -3px;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      //   background: red;
    }
    .DetailsAquaticEcologyTwo {
      width: 55%;
      display: flex;
      //   background: yellowgreen;
      line-height: 30px;
      text-align: center;
      .DetailsTwoA {
        width: 50%;
        color: #3afff8;
        // background: red;
      }
      .DetailsTwoB {
        width: 50%;
        color: #f7c987;
        // background: rgb(205, 50, 50);
      }
    }
  }
  .ListContent {
    width: 100%;
    height: calc(100% - 34px);
    overflow: auto;
    // background: yellow;
    .sewageResources {
      // 污水资源利用
      .sewageTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        padding: 10px 30px 0px 10px;
        .wsdescribe {
          color: #fff;
        }
        .wstext {
          color: #ffed52;
        }
        .YStext {
          color: #18ffff;
        }
      }
    }
  }

  // 供水规划
  .waterSupply {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .eachDescribe {
      display: flex;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      padding-top: 5px;
      .unit {
        padding-top: 5px;
        color: #ffffff;
      }
      .icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .colorYellow {
        color: #ffed52;
      }
      .colorBlue {
        color: #18ffff;
      }
      .bgcYellow {
        background: #ffed52;
      }
      .bgcblue {
        background: #18ffff;
      }
      .text {
        padding: 0 10px 0 6px;
        font-size: 16px;
      }
      .sum {
        font-size: 20px;
        padding-right: 10px;
      }
    }
    .bottomBgc {
      width: 100%;
      height: 16px;

      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
    }
  }
}
.rightBox1 {
  height: 110px;
}
.rightBox2 {
  margin-top: 5px;
}

.rightBox3 {
  margin-top: 5px;
}
.rightBox4 {
  margin-top: 5px;
  height: 200px;
  //   background: red;
}
.rightBox5 {
  margin-top: 5px;
}
</style>