real3d-portalsite/src/views/cockpitNew1/gkzb.vue

<template>
  <div class="jsyd">
    <div class="title">
      <div class="icon"></div>
      <span>管控指标</span>
    </div>
    <div class="content">
      <div class="item">
        <div class="icon">
          <div class="icon_zxkg">

          </div>
        </div>
        <div class="text">
          <p>耕地保护目标</p>
          <span>153.17</span>平方干米

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_yrkkg">

          </div>
        </div>
        <div class="text">
          <p>永久基本农田保护</p>
          <span>126.01</span>平方干米

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_jsydzzb">

          </div>
        </div>
        <div class="text">
          <p>生态保护红线</p>
          <span>1518</span>平方干米

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_jsydzzb">

          </div>
        </div>
        <div class="text">
          <p>城市开发边界</p>
          <span>225.42</span>公顷

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_xzjsyd">

          </div>
        </div>
        <div class="text">
          <p>陆域生态保护红线</p>
          <span>777.37</span>公顷

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_yrk">

          </div>
        </div>
        <div class="text">
          <p>己入库控规范国

          </p>
          <span>66</span>平方干米

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_syzb">

          </div>
        </div>
        <div class="text">
          <p>近岸海域海洋生态保护红线

          </p>
          <span>740.63</span>公顷

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_fgczkfbj">

          </div>
        </div>
        <div class="text">
          <p>覆盖城镇开发边界

          </p>
          <span>66.32</span>%

        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { cockpitInfo } from '@/api/cockpit'

export default {
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() { }, //生命周期 - 创建之前
  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() { }, //生命周期 - 挂载之前
  async mounted() {
    const that = this;
    // console.log(store.state.cockpit_date, "store.cockpit_date");


    // let obj = {
    //   // beginTime: store.state.cockpit_date[0],
    //   // endTime: store.state.cockpit_date[1],
    //   jscType: 'jsc_gkzb_ztgu_stbh',
    //   id: '4602'
    // };
    // let data = await cockpitInfo(obj);
    // console.log(data, "data");

    // // 生态保护红线面积
    // data.data[0].mj
    // // 路与生态保护红线
    // data.data[0].ly_mj
    // // 近海岸面积
    // data.data[0].hy_mj

  }, //生命周期 - 挂在完成
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroy() { },//生命周期 - 销毁完成
  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style  lang="scss"  scoped>
.jsyd {
  border-width: 0px;
  position: relative;
  left: 9px;
  top: 9px;
  width: 416px;
  height: 310px;
  background: inherit;
  // background-color: rgba(3, 25, 67, 0.698039215686274);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.title {
  border-width: 0px;
  width: 100%;
  height: 40px;
  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  // font-weight: 700;
  // font-style: normal;
  // color: #fff;
  // padding: 2%;
  background: no-repeat;
  background-image: url("/static/images/overview/标题框.png");

  .icon {
    background: no-repeat;

    background-image: url("/static/images/overview/icon_标题框装饰.png");
    display: inline-block;
    width: 30px;
    height: 30px;
    background-position: 14px 7px;
  }

  span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    bottom: 0.5rem;
  }
}

.content {
  position: absolute;
  left: 1%;
  width: 500px;
  top: 18%;
}

.item {
  width: 45%;
  height: 30%;
  display: inline-block;
  // border: #00FFFF 1px solid;

}

.icon {
  width: 50px;
  padding: 1.5%;
  border-radius: 8px;
  display: inline-block;
  height: 50px
}

.icon_zxkg {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_zxkg.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_yrkkg {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_yrkkg.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_jsydzzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_jsydzzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_xzjsyd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_xzjsyd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_ysyzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_jsydzzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_syzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_jsydzzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_syzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gkzb_syzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_fgczkfbj {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gkzb_fgczkfbj.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_yrk {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icongdbh2.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.text {
  display: inline-block;
  // border: #00FFFF 1px solid;
  width: 170px;

  p {
    font-kerning: normal;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
  }

  span {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    color: #68F4FB;
  }
}

.value {
  display: inline-block;

  // border: #00FFFF 1px solid;
  width: 50px;

}
</style>