total_num.vue

<script>
export default {
  name: "total_num",
  props:{
    totalData:{
      type:Object,
      default:()=>({})
    }
  }
}
</script>

<template>
  <div>
    <div class="total_num">
      <span>{{ $t('新客户：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.newTotalNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.newTotalVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.newTotalWeight}}KG </span>
      <span>{{ $t('旧客户：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.oldTotalNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.oldTotalVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.oldTotalWeight}}KG </span>
    </div>
    <div class="total_num">
      <span>{{ $t('开发客户：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.developNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.developVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.developWeight}}KG </span>
      <span>{{ $t('公司客户：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.companyNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.companyVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.companyWeight}}KG </span>
      <span>{{ $t('汇总：') }}</span>
      <span>{{$t('总箱数')}} {{totalData.sumNum}}{{$t('箱')}} </span>
      <span>{{$t('总方数')}} {{totalData.sumVolume}}m³ </span>
      <span>{{$t('总重量')}} {{totalData.sumWeight}}KG </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.total_num{
  display:flex;
  align-items: center;
  justify-content: left;
  margin:20px 0;
  font-size:15px;
}
.total_num span{
  margin: 0 8px;
}
</style>