11-mes-new/src/views/orderManage/orderManagerCockpit/components/orderStatus.vue

<template>
  <div class="state-box">
    <span v-if="this.injectData.status === 1">
      <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
      在途
    </span>
    <span v-if="this.injectData.status === 2">
      <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
      已下发
    </span>
    <span v-if="this.injectData.status === 3">
      <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
      已完成
    </span>
    <span v-if="this.injectData.status === 4">
      <svg-icon icon-class="orange_dot" style="font-size: 14px; position: relative; top: .08em" />
      待下发
    </span>
  </div>
</template>
<script>
export default {
  name: 'OrderStatus',
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      beilv: 1
    }
  },
  mounted() {
    this.beilv = document.getElementById('container').offsetWidth / 1920
    window.addEventListener('resize', () => {
      if (this.isFullScreen) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    })
  }
}
</script>
<style scoped>
.state-box {
  height: calc(15px * var(--beilv))
}
</style>