hlm_pl_mall_store/pages/seller/index/IndexOrderItem.vue

<template>
    <view class="div" @click="onclick()">
        <image mode="aspectFit" class="img order-item-icon" :src="src" />
        <label class="item-title order-item-title">{{title}}</label>
        <text class="span number" v-if="orderNumber == 0 ? '': orderNumber ">{{ orderNumber }}</text>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  props: {
      src: {
      type: String
    },
    title: {
      type: String
    },
    testAttr: {
      type: String
    },
    id: {
      default: ''
    },
    orderNumber: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isEmpty: false
    }
  },

  created () {

  },
  methods: {

    onclick () {
      this.$emit('onclick')
    },

  }
}
</script>

<style lang="scss" scoped>
    .order-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .item-title {
        font-size:$subFontSize;
        color: #333;
    }
    .order-item-icon {
        width: 1.4rem;
        height: 1.4rem;
        font-size:1.3rem;
        margin-top:0.8rem;
    }
    .order-item-title {
        margin-top:0.4rem;
    }
    .span.number {
        width:0.8rem;
        height:0.8rem;
        line-height:0.8rem;
        margin-top:-2.8rem;
        margin-left:0.8rem;
        background: $primaryColor;
        border-radius:50%;
        font-size:$h6;
        text-align: center;
        color: RGBA(255, 255, 255, 1);
        font-weight: normal;
        z-index: 2;
    }
</style>