106 lines
3.6 KiB
Vue
106 lines
3.6 KiB
Vue
<template>
|
|
<div class="w-max h-max relative">
|
|
<SvgComponent :content="groupSvg" class="w-[312px] h-[210px]" />
|
|
<div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center">
|
|
<div class="relative w-[144px] h-[113px] flex items-center flex-col">
|
|
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
|
|
<div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
|
|
<div class="mb-[15px] font-700 leading-[1] flex items-baseline">
|
|
<span class="text-[34px] italic text-color" :data-text="paymentData.toDayTotal">{{paymentData.toDayTotal || 0}}</span>
|
|
<span class="text-[18px] text-color" data-text="人">人</span>
|
|
</div>
|
|
</div>
|
|
<div class="relative ml-[12px]">
|
|
<SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[104px] z-1" />
|
|
<div class="w-[127px] h-[104px] top-0 left-0 z-1 absolute pl-[14px] flex flex-col justify-center">
|
|
<p class="text-[#C0EEFF] text-[12px]">昨日缴费人数</p>
|
|
<p class="text-[#C0EEFF] text-[16px] font-500 mt-[18px] mb-[9px]">{{paymentData.yesterdayTotal || 0}}人</p>
|
|
<div :class="`${paymentDifferent > 0 ?'text-[#4AFFA2]': 'text-[#FF4E4E]'} text-[12px] flex items-center`">
|
|
<span class="">今日较昨日</span>
|
|
<SvgIcon :name="paymentDifferent > 0 ? 'arrow-up' : 'arrow-down'" class="text-[9px]" />
|
|
|
|
<span>{{Math.abs(paymentDifferent)}}人</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import SvgComponent from "@/components/SvgComponent.vue";
|
|
import SvgIcon from "@/components/svg-icon/SvgIcon.vue";
|
|
|
|
const paymentData = inject("paymentData",ref({toDayTotal:0,yesterdayTotal:0}))
|
|
|
|
|
|
const groupSvg = ref("");
|
|
const getGroupBackgroundSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/short-background.svg?raw");
|
|
groupSvg.value = svg;
|
|
};
|
|
|
|
|
|
|
|
const hexagonalBoxSvg = ref("");
|
|
const getLightningBoxSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/hexagonal-light.svg?raw");
|
|
hexagonalBoxSvg.value = svg;
|
|
};
|
|
|
|
const paymentBorderSvg = ref("");
|
|
const getPaymentChartSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/payment-border.svg?raw");
|
|
paymentBorderSvg.value = svg;
|
|
};
|
|
|
|
const paymentDifferent = computed(() => {
|
|
if(Object.prototype.toString.call(paymentData.value.toDayTotal) !== "[object Undefined]" && Object.prototype.toString.call(paymentData.value.yesterdayTotal)!== "[object Undefined]"){
|
|
return paymentData.value.toDayTotal - paymentData.value.yesterdayTotal
|
|
}else{
|
|
return 0
|
|
}
|
|
})
|
|
|
|
onBeforeMount(() => {
|
|
getGroupBackgroundSvg();
|
|
getLightningBoxSvg();
|
|
getPaymentChartSvg();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/text-color.scss";
|
|
@use "@/styles/custom-border.scss";
|
|
|
|
.rotate-animation {
|
|
animation: rotate-animation 1s infinite;
|
|
}
|
|
|
|
@keyframes rotate-animation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
:deep(.box-light) {
|
|
.lightning-flashing {
|
|
animation: lightning-flashing 1s infinite;
|
|
}
|
|
@keyframes lightning-flashing {
|
|
0% {
|
|
fill-opacity: 0;
|
|
}
|
|
50% {
|
|
fill-opacity: 1;
|
|
}
|
|
100% {
|
|
fill-opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|