<template>
    <div class="order-item-base" :style="{'background':'url('+ workOderIcon +') no-repeat','background-size':'100% 100%'}">
      <div class="item-number" :style="{'color': color}">{{workOrder.number}}</div>
      <div class="item-name">{{workOrder.name}}</div>
    </div>
</template>

<script>
    export default {
      title: "WorkOrderItem",
      props:{
        workOrder:{
          type:Object,
          default:{
            name:'工单量',
            number:8740
          }
        },
        color:{
          type: String,
          default: '#fffb44'
        },
        workOderIcon:{
          default: require('src/assets/images/客服工单量.png')
        }
      }
    }
</script>

<style lang="less" scoped>
  .order-item-base{
    font-size: vw(14);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: end;
    align-items: center;
    .item-name{
      width: 40%;
      height: 60%;
      color: #fff;
    }
    .item-number{
      text-align: right;
      margin-right: 5%;
      width: 38%;
      height: 60%;
    }
  }
</style>
