<!--  -->
<template>


 <div class="capability-cloud">

    <div class="header">
      <span class="title" @click="goHome">城市云脑通用能力服务平台</span>
    </div>
    <div class="header1">
      <div style=" color:#bed1df; font-size: 26px">累计节省财政资金</div>
            <div class="area-right">
              <!-- <div class="mianJi">累计节省财政资金</div> -->
              <template v-for="(item, index) in saveMonmy">
                <p v-if="item == '.'" :key="index">
                  {{ item }}
                </p>
                <span v-else >{{ item }}</span>
              </template>
              <div class="mianJi">万元</div>
            </div>
      <div style="  color: #bed1df; font-size: 16px">注：资源参考价格由部门提供或参考市场价格设定</div>

      </div>
    <!--左侧-->
    <div class="reservoir-left">
      <!-- 左侧内容 -->
    <reservoir-left />
    </div>
     <!--右侧-->
    <div class="reservoir-right">
      <reservoir-right />
    </div>
    <!--中间地图-->
    <div class="reservoir-map">
      <reservoir-thumbnail
                           @changeThumbnailMap="changeThumbnailMap"
                           @jumpIntoMap="jumpIntoMap"
      />
    </div>
 <!--下方-->
 <div class="bottom">
  <reservoir-bottom />

      </div>
  </div>

</template>

<script>
import {
  getApplyPriceCount
  } from '@/api/assertReport'
  import ReservoirThumbnail from "./components/ReservoirThumbnail.vue";
import ReservoirLeft from "./components/ReservoirLeft";
  import ReservoirRight from "./components/ReservoirRight";
  import ReservoirBottom from "./components/ReservoirBottom";
  import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    ReservoirThumbnail,
    ReservoirLeft,
    ReservoirRight,
    ReservoirBottom

  },
  data() {
    //这里存放数据
    return {
      saveMonmy:[],
      model: "common",
      dialogTitle: "周边视频",
      videoAnalysisDialogVisible: false, //视频分析弹窗显示标志位
      riverCourseHistoryDialogVisible: false, //河道历史弹窗
      riverDetailInfo: {}, //河道具体信息用于历史弹窗显示数据
      dialogType: "add",
      dialogData: {},
      dangerReportDialogVisible: false,
      positionInfo: null,
      reservoirDialogVisible: false, //新增修改积水点弹窗显示标志位
      districtOptions: [], //区划数组
      isThumbnail:true,    //是否为地图缩略图
      tabindex:0,      //3d地图选中的tab。
      listType:"",//水库列表的类型，普通列表 “”，预警列表 warnig
      basicInfo: {},  //水库详情信息
      type: '',
      callSource:"indexPage",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getSaveMoney(){
      getApplyPriceCount().then((res) => {
     
      this.saveMonmy=NumbersConvertedToArrays(res.data.data)
      })
    }
  },

  mounted() {
   this.getSaveMoney()
  },

};
</script>
<style lang="less">
  @font-face {
    font-family: 'SourceHanSansCN-Regular';
    src: url('~@/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf');
  }
  @font-face {
    font-family: 'DIN-Bold';
    src: url('~@/assets/capabilityCloud/font/DIN-Bold.otf');
  }
  @font-face {
    font-family: 'ZhiheiJ-W5.ttf';
    src: url('~@/assets/capabilityCloud/font/ZhiheiJ-W5.ttf');
  }
  .capability-cloud {
    font-family: SourceHanSansCN-Regular;
    .title {
      font-family: ZhiheiJ-W5;
      background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
      font-weight: 600;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .num {
      font-family: DIN-Bold;
    }
  }
</style>
<style lang='less' scoped>
// 此处去掉scoped为修改date-picker背景色，所以业务样式都应放在reservoir层级中，避免影响
//@import url(); 引入公共css类
.module-header-container {
  position: absolute;
  z-index: 1000;
  top: 0px;
  width: 100%;
  pointer-events: none;
}
.capability-cloud {
    height: 10.8rem;
    background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .area-right {
          display: flex;
          align-items: center;
          justify-items: flex-end;
          padding-right: 20px;
          color: #bed1df;
          margin-left: 100px;
          span {
            width: 28px;
            height: 40px;
            line-height: 40px;
            background: url("~@/assets/capabilityCloud/num_bg.png")
            100% 100%;
            background-size: 100%;
            text-align: center;
            font-size: 28px;
            margin-right: 3px;
            color: #fff;
            font-family: DinPro-Bold;
          }
          .mianJi {
            margin-top: 6px;;
              margin-right: 3px;
         font-size: 22px;
         float:right;
          }
          p {
            height: 34px;
            display: flex;
            align-items: flex-end;
            justify-items: center;
            font-size: 30px;
          }
        }
    & > .header {
      height: 1.04rem;
      text-align: center;
      background: url('~@/assets/capabilityCloud/header.png') no-repeat;
      font-size: 0.46rem;
    }
    .bottom{
      bottom: 12px;
    position: absolute;
    left: 545px;
    width: 732px;
    align-items: center;
    z-index: 1004;
    text-align: center;
  
    height: 1.8rem;

    }
    .header1 {
      top: 78px;
      position: absolute;
    left: 795px;
    align-items: center;
    z-index: 1004;
    text-align: center;
    }
 
  //position: relative;
  .reservoir-left {
    position: absolute;
    left: 0.1rem;
    z-index: 1000;
    top: 0.8rem;
    height: calc(100% - 0.8rem);
  }
  .reservoir-right {
    position: absolute;
    z-index: 1001;
    right: 0.1rem;
    top: 0.8rem;
    height: calc(100% - 0.8rem);
  }
  .reservoir-map {
    position: absolute;
    width: 100%;
  //  height: 100%;
   // bottom:2rem;
  }
}
// 日期时间组件
.phone-date-picker {
  color: #fff;
  //border: 1px solid #e4e7ed;
  border: 1px solid #008fbb;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  //background: #000;
  background: #123d68;
  //background:rgba(0, 0, 0, 0);
  line-height: 30px;
  margin: 5px 0;
  .el-date-table td.disabled div {
    background: #305156 !important;
  }
  .el-picker-panel__footer {
    //background-color: rgba(0, 0, 0, 0.8);
    background: #123d68;
    color: #fff;
    .el-picker-panel__link-btn:first-of-type {
      display: none;
    }
  }
  .el-date-table td.in-range div {
    background: #009ab3;
  }
  .el-input__inner {
    //background-color: rgba(0, 0, 0, 0.8);
    background: #123d68;
    color: #fff;
  }
  .el-date-picker__header > button,
  span {
    color: #fff;
  }
  .el-picker-panel__content > .el-date-table > tbody > tr > th {
    color: #fff;
  }
  .el-button.is-plain:hover,
  .el-button.is-plain:focus {
    background: #009ab3;
  }
  .el-button--default {
    border-radius: 0;
    background: #009ab3;
    //border: 1px solid #dcdfe6;
    border: 1px solid #008fbb;
    border-color: #009ab3;
  }
}


</style>
