72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<div class="_container">
|
|
<div v-for="(item, i) in valData" :key="`item_${i}`" class="_item">
|
|
<img :src="item.bg" />
|
|
<div class="_center">
|
|
<div class="_value">
|
|
<span>{{ item.value }}</span>
|
|
{{ item.unit }}
|
|
</div>
|
|
<div class="_name">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import person from '@/assets/images/trace/person.png';
|
|
import all from '@/assets/images/trace/all.png';
|
|
import online from '@/assets/images/trace/online.png';
|
|
import producer from '@/assets/images/trace/producer.png';
|
|
import batch from '@/assets/images/trace/batch.png';
|
|
import publicize from '@/assets/images/trace/publicize.png';
|
|
let valData = reactive([
|
|
{ value: 356, name: '扫码统计', unit: '次', bg: all },
|
|
{ value: 86, name: '溯源产品', unit: '种', bg: producer },
|
|
{ value: 90, name: '溯源产品', unit: '个', bg: batch },
|
|
{ value: 136, name: '宣传门店', unit: '家', bg: publicize },
|
|
{ value: 6, name: '线上门店', unit: '家', bg: online },
|
|
{ value: 63, name: '业务人员', unit: '人', bg: person },
|
|
]);
|
|
|
|
onMounted(() => {});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
._container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
height: 100%;
|
|
._item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 45%;
|
|
height: calc((100% / 3) - 16px);
|
|
color: #fff;
|
|
&:nth-child(2n + 2) {
|
|
justify-content: flex-end;
|
|
}
|
|
._value {
|
|
> span {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
img {
|
|
margin-right: 24px;
|
|
height: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
._center {
|
|
._name {
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|