jiahe_device/src/views/energySourcesProvince/component/maps.vue

<template>
  <div class="box">
    <div class="num">
      <div v-for="(item, index) in numArr" :key="index">
        <div class="num-top">
          {{ item.name }}
          <img src="../../../../public/img/energySourcesProvince/maps1.png" v-if="item.status">
          <img src="../../../../public/img/energySourcesProvince/maps2.png" v-else>
        </div>
        <div class="num-bottom">
          <span :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">14.34</span>
          <span :style="{ color: item.status ? '#1BE9BB' : '#EB3939' }">kg/万元</span>
          <span>15.54</span>
          <span>上年度</span>
        </div>
      </div>
    </div>
    <!-- <div id="mainMaps"></div> -->
  </div>
</template>

<script>

export default {
  data() {
    return {
      numArr: [
        {
          name: '碳排放计划量',
          status: 1
        },
        {
          name: '碳排放总量',
          status: 1
        },
        {
          name: '碳减排总量',
          status: 0
        }
      ],
    };
  },
  created() {
    this.$nextTick(() => {
      this.echartsInit()
    })

  },
  mounted() {

  },
  methods: {
    echartsInit() {


    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 9.94rem;
  height: 7.88rem;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: -1;

  .num {
    width: 9rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    &>div {
      width: 2.92rem;
      height: 1.12rem;
      background: url("../../../../public/img/energySourcesProvince/maps.png");
      background-size: 100% 100%;
      padding: 0.24rem 0 0 0.24rem;
      box-sizing: border-box;

      &>.num-top {
        font-size: 0.16rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba($color: #fff, $alpha: 0.8);

        img {
          width: 0.2rem;
          height: 0.2rem;
          margin-left: 2px;
          vertical-align: bottom;
        }
      }

      &>.num-bottom {
        width: 96%;
        height: 0.4rem;
        line-height: 0.4rem;
        overflow: hidden;
        margin-top: 0.1rem;

        &>span:nth-child(1) {
          font-size: 0.3rem;
          font-family: Acumin Variable Concept;
          font-weight: bold;
          vertical-align: top;
        }

        &>span:nth-child(2) {
          font-size: 0.16rem;
          font-family: Acumin Variable Concept;
          font-weight: bold;
          margin-left: 0.04rem;
        }

        &>span:nth-child(3) {
          font-size: 0.16rem;
          font-family: Acumin Variable Concept;
          font-weight: bold;
          color: #149EEE;
          margin-left: 0.1rem;
        }

        &>span:nth-child(4) {
          font-size: 0.14rem;
          font-family: Acumin Variable Concept;
          font-weight: bold;
          color: #149EEE;
          margin-left: 0.04rem;
        }
      }
    }
  }

  #mainMaps {
    width: 100px;
    height: 400px;
    // width: 9.94rem;
    // height: 6rem;
  }
}
</style>