yifeng_integration/src/components/screen-map-legeng/index.vue

<template>
  <div class="map-legeng">
    <div class="flex">
      <div class="item" v-for="(item, index) in list" @click="setMapPoint" :key="index">
        <img :src="item.imgSrc" alt="" />
        <section>
          <div>
            <span :class="{ num: true, yellow: index === 4 }">{{
              item.num
            }}</span>
            <span :class="{ units: true, yellow: index === 4 }">{{
              item.units
            }}</span>
          </div>
          <div class="name">{{ item.name }}</div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          imgSrc: require('@/assets/images/map/legeng/qq.png'),
          units: '家',
          num: '10',
          name: '育种企业'
        },
        {
          imgSrc: require('@/assets/images/map/legeng/pz.png'),
          units: '家',
          num: '9',
          name: '育苗企业'
        },
        {
          imgSrc: require('@/assets/images/map/legeng/zz.png'),
          units: '家',
          num: '52',
          name: '种植企业'
        },
        {
          imgSrc: require('@/assets/images/map/legeng/sc.png'),
          units: '家',
          num: '30',
          name: '加工企业'
        }
      ]
    }
  },
  created () {},
  methods: {
    setMapPoint () {
      this.$EventBus.$emit('switcMapType', 'unit')
    }
  },
  components: {},
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.flex {
  @include flex(column);
  width: 100%;
  justify-content: space-around;

  .item {
    @include flex();
    margin-top: 20px;
    img {
      width: 48px;
      height: 40px;
      margin-right: 8px;
      align-items: center;
    }

    section {
      @include flex(column);

      .name {
        color: #acbbd4;
        font-size: 14px;
      }

      .num {
        font-family: pangmenzhengdao;
        color: #ffffff;
      }

      .units {
        font-size: 16px;
        color: #869db8;
        margin-left: 5px;
      }
    }
  }
}
</style>