<template>
  <!-- 自然地理 -->
  <div class="partTitleHM">自然地理</div>
  <div class="partContHM">
    <div class="ListBox ListBox1">
      <div class="physicalGeography">
        <div class="waterSupply">
          <div class="bottomBgc"></div>
          <div class="eachDescribe">
            <div class="text">总面积</div>
            <div class="sum bgcYellow">6118</div>
            <div class="unit">km²</div>
            <div class="icon colorBlue"></div>
            <div class="text">中心城区</div>
            <div class="sum colorBlue">647.55</div>
            <div class="unit">km²</div>
            <div class="iconTwo bgcblue"></div>
            <div class="text">建成区</div>
            <div class="sum bgcblue">117</div>
            <div class="unit">km²</div>
          </div>
        </div>
      </div>
      <tslyqk_constituent_3d></tslyqk_constituent_3d>
    </div>
    <div class="ListBox ListBox3">
      <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
      <div class="ListContent">
        <div class="SpatialPattern" v-for="item in policiesList">
          <div class="eachinfo cyan">
            <div class="number">{{ item.NumberA }}</div>
            <div class="headText">{{ item.name }}</div>
            <div class="rightText">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 降雨特征 -->
  <div class="Lowerleft">
    <rainfall />
  </div>
</template>

<script setup>
import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
const policiesList = ref([
  {
    name: '一心',
    NumberA: '01',
    content: '中心城区',
  },
  {
    name: '一核',
    NumberA: '02',
    content: '开封新区',
  },
  {
    name: '一带',
    NumberA: '03',
    content: '沿黄河南岸形成的沿黄生态涵养带',
  },
  {
    name: '三片',
    NumberA: '04',
    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
  },
  {
    name: '三廊',
    NumberA: '05',
    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
  },
]);

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

<style lang="scss" scoped>
.ListBox {
  .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;
  }
  .ListContent {
    width: 100%;
    height: calc(100% - 32px);
    overflow: auto;
    // background: red;
  }
  .SpatialPattern {
    padding-top: 5px;
    overflow: auto;
    // background: red;
    .eachinfo {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      // background: yellow;
      margin-bottom: 3px;
      cursor: pointer;
    }
    .headText {
      font-weight: 500;
      font-size: 16px;
      min-width: 50px;
      color: #18ffff;
      margin-left: 15px;
      text-align: center;
      // background: red;
    }
    .rightText {
      overflow: hidden;
      text-overflow: ellipsis; /* 超出部分省略号 */
      word-break: break-all; /* break-all(允许在单词内换行。) */
      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-line-clamp: 1; /* 显示的行数 */
      padding-left: 10px;
      color: #b8ecff;
      // background: yellow;
    }
    .cyan {
      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
      background-size: 100% 100%;
      .number {
        color: #d1dff7;
        font-weight: 400;
        font-size: 16px;
        position: relative;
        left: 8px;
        // background: blueviolet;
      }
    }
  }

  width: 100%;
  margin-top: 2px;
  height: 150px;
  position: relative;
  // background: red;
  .physicalGeography {
    position: absolute;
    top: 0;
    width: 100%;
    // background: yellowgreen;
    .waterSupply {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .eachDescribe {
        display: flex;
        align-items: center;
        font-family: SourceHanSansCN-Regular;
        font-weight: 300;
        // background: red;
        .unit {
          padding-top: 2px;
          color: #ffffff;
        }
        .icon {
          display: inline-block;
          border-color: #3afff8;
          border-style: solid;
          border-width: 2px;
          width: 0;
          height: 0;
          margin-right: 7px;
          position: relative;
          top: -2px;
          -moz-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          margin-left: 7px;
        }
        .iconTwo {
          display: inline-block;
          border-color: #18e87a;
          border-style: solid;
          border-width: 2px;
          width: 0;
          height: 0;
          margin-right: 7px;
          position: relative;
          top: -2px;
          -moz-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          margin-left: 7px;
        }
        .colorYellow {
          color: #ffed52;
        }
        .colorBlue {
          color: #18ffff;
        }
        .bgcYellow {
          color: #ffed52;
        }
        .bgcblue {
          color: #18e87a;
        }
        .text {
          padding: 0 5px 0 5px;
          font-size: 16px;
          color: #b8ecff;
        }
        .sum {
          font-size: 16px;
          padding-right: 10px;
        }
      }
      .bottomBgc {
        width: 100%;
        height: 16px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.ListBox3 {
  margin-top: 20px;
  height: 235px;
  // background: red;
}
.Lowerleft {
  margin-top: 15px;
}
</style>