<template>
  <div class="a">
    <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>
  </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>
.a {
  height: 500px;
  // background: red;
  overflow-x: hidden;
  overflow-y: auto;
  .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>