<template>
|
<div class="data-overview-content">
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg1"
|
label="总入驻企业"
|
:value="detail?.totalCustomerCount"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg2"
|
label="总申报数量"
|
:value="detail?.totalBountyApplyCount"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg3"
|
label="奖励金发放总额"
|
:value="detail?.sumBountyReleaseAmount"
|
></DataBoardDataInfoItem>
|
<DataBoardDataInfoItem
|
:backgroundImage="DataBoardDataInfoBg4"
|
label="奖励金使用总额"
|
:value="detail?.sumBountyUseAmount"
|
></DataBoardDataInfoItem>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import DataBoardDataInfoBg1 from '@/assets/dataBoard/data-board-data-info-bg1.png';
|
import DataBoardDataInfoBg2 from '@/assets/dataBoard/data-board-data-info-bg2.png';
|
import DataBoardDataInfoBg3 from '@/assets/dataBoard/data-board-data-info-bg3.png';
|
import DataBoardDataInfoBg4 from '@/assets/dataBoard/data-board-data-info-bg4.png';
|
import DataBoardDataInfoItem from './DataBoardDataInfoItem.vue';
|
import { useGetDataBoardOverview } from '../hooks';
|
|
defineOptions({
|
name: 'DataOverviewContent',
|
});
|
|
const { detail } = useGetDataBoardOverview();
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.data-overview-content {
|
display: grid;
|
justify-content: center;
|
align-items: center;
|
padding: 50px 18px;
|
grid-template-columns: repeat(2, 1fr);
|
grid-column-gap: 18px;
|
grid-row-gap: 30px;
|
|
.data-board-data-info-item {
|
padding: 14px 0;
|
}
|
}
|
</style>
|
