55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<div class="state-box">
|
|
<span v-if="this.injectData.status === 1">
|
|
<svg-icon icon-class="yellow_dot" class="tip"/>
|
|
在途
|
|
</span>
|
|
<span v-if="this.injectData.status === 2">
|
|
<svg-icon icon-class="blue_dot" class="tip"/>
|
|
已下发
|
|
</span>
|
|
<span v-if="this.injectData.status === 3">
|
|
<svg-icon icon-class="green_dot" class="tip" />
|
|
已完成
|
|
</span>
|
|
<span v-if="this.injectData.status === 4">
|
|
<svg-icon icon-class="orange_dot" class="tip" />
|
|
待下发
|
|
</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 lang="scss" scoped>
|
|
.state-box {
|
|
.tip {
|
|
font-size: calc(14px * var(--beilv));
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
</style>
|