TaskInfo.vue
1.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!-- 月度任务信息 -->
<template>
<view class="teskInfo">
<view class="title" v-if="title">
<text> - 本月任务 - </text>
</view>
<view class="info">
<view class="cl" >
<view class="num">{{data.taskAmounts}}</view>
<view class="title">任务总量</view>
</view>
<view class="cl">
<view class="num">{{data.completedAmounts}}</view>
<view class="title">完成任务量</view>
</view>
<view class="cl" >
<view class="num">{{data.transportMileage}}</view>
<view class="title">运输里程(km)</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 导航
import UniNav from '@/components/Nav/index.vue';
const props = defineProps({
title: { // 是否展示标题 两个地方用一个有一个没用
type: Boolean,
default: true
},
data: { // 任务数据
type: Object,
default:{}
}
});
</script>
<style lang="scss" scoped>
.teskInfo{
text-align: center;
position: relative;
z-index: 1;
top: -180rpx;
background: var(--neutral-color-white);
border-radius: 16rpx;
padding: 26rpx 48rpx;
.title{
padding-bottom: 20rpx;
}
.info{
display: flex;
text-align: center;
justify-content: space-between;
line-height: 48rpx;
color: var(--neutral-color-main);
.cl{
flex: 1;
.num{
line-height: 100rpx;
font-weight: 600;
font-size: var(--font-size-18);
}
.title{
font-size: var(--font-size-12);
}
}
}
}
</style>