89 lines
2.0 KiB
Plaintext
89 lines
2.0 KiB
Plaintext
<template>
|
|
<view class="hr-wc">
|
|
<view v-for="(it, i) in items" :key="i" class="hr-row">
|
|
<view v-if="i > 0" class="hr-wc-sep"></view>
|
|
<view class="hr-wc-cell">
|
|
<view class="hr-wc-dot" :style="{ backgroundColor: it.color }"></view>
|
|
<text class="hr-wc-num" :style="{ color: it.color }">{{ it.value }}</text>
|
|
<text class="hr-wc-lb">{{ it.label }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="hr-flex1"></view>
|
|
<text class="hr-wc-note">{{ note }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
/** 4 色分级计数条（常驻事件详情顶部） */
|
|
const props = defineProps({
|
|
red : { type: Number, default: 0 },
|
|
amber : { type: Number, default: 0 },
|
|
green : { type: Number, default: 0 },
|
|
black : { type: Number, default: 0 },
|
|
note : { type: String, default: '实时更新' }
|
|
})
|
|
|
|
type WcItem = { color : string, label : string, value : number }
|
|
|
|
const items = computed(() : WcItem[] => {
|
|
const list : WcItem[] = [
|
|
{ color: '#DC2626', label: '红', value: props.red } as WcItem,
|
|
{ color: '#F59E0B', label: '黄', value: props.amber } as WcItem,
|
|
{ color: '#10B981', label: '绿', value: props.green } as WcItem,
|
|
{ color: '#1F2937', label: '黑', value: props.black } as WcItem
|
|
]
|
|
return list
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.hr-wc {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
border: 2rpx solid #E5E7EB;
|
|
border-radius: 24rpx;
|
|
padding: 22rpx 26rpx 22rpx 26rpx;
|
|
}
|
|
|
|
.hr-wc-sep {
|
|
width: 2rpx;
|
|
height: 36rpx;
|
|
background-color: #F3F4F6;
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.hr-wc-cell {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.hr-wc-dot {
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.hr-wc-num {
|
|
font-size: 29.2rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hr-wc-lb {
|
|
font-size: 21.2rpx;
|
|
color: #9CA3AF;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.hr-wc-note {
|
|
font-size: 23.6rpx;
|
|
color: #9CA3AF;
|
|
}
|
|
</style>
|