You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.2 KiB
Vue
113 lines
2.2 KiB
Vue
<template>
|
|
<div class="top-left-cmp">
|
|
<div class="dc-left">
|
|
<dv-border-box-5>
|
|
<div class="main-value"><span>{{ data.sumplanquantity }}</span>件</div>
|
|
<!-- <div class="compare-value"><span>同比</span>81</div>-->
|
|
<!-- <div class="compare-value"><span>环比</span>15</div>-->
|
|
</dv-border-box-5>
|
|
<div class="dc-text">
|
|
当日产量
|
|
<dv-decoration-3 style="width:200px;height:20px;" />
|
|
</div>
|
|
</div>
|
|
<div class="dc-right">
|
|
<div class="dc-text">
|
|
当日计划
|
|
<dv-decoration-3 style="width:200px;height:20px;" />
|
|
</div>
|
|
<dv-border-box-5 :reverse="true">
|
|
<div class="main-value"><span>{{ data.sumFinshQuantity }}</span>件</div>
|
|
<!-- <div class="compare-value"><span>同比</span>66</div>-->
|
|
<!-- <div class="compare-value"><span>环比</span>9</div>-->
|
|
</dv-border-box-5>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TopLeftCmp',
|
|
props: {
|
|
data: []
|
|
},
|
|
data() {
|
|
return {
|
|
// Accessing the prop directly in the data function
|
|
receivedValue: this.data,
|
|
};
|
|
},
|
|
watch: {
|
|
data(newVal) {
|
|
// Watching the data prop for changes
|
|
this.receivedValue = newVal;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.top-left-cmp {
|
|
display: flex;
|
|
|
|
.dc-left, .dc-right {
|
|
width: 50%;
|
|
}
|
|
|
|
.dv-border-box-5 {
|
|
height: 60%;
|
|
}
|
|
|
|
.dc-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 40%;
|
|
font-size: 20px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dc-left .dc-text {
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dc-right .dc-text {
|
|
justify-content: flex-start;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.dc-left .dv-border-box-5 {
|
|
padding: 30px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dc-right .dv-border-box-5 {
|
|
padding: 40px;
|
|
padding-left: 75px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.main-value {
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
|
|
span {
|
|
font-size: 40px;
|
|
color: #00c0ff;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
.compare-value {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size: 18px;
|
|
|
|
span {
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|