118 lines
3.8 KiB
Vue
118 lines
3.8 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="w-[144px]">
|
|
<div class="relative w-[144px] h-[113px] flex items-center flex-col">
|
|
<div class="text-[#44C1EF] italic text-[20px] font-700">今日获客</div>
|
|
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent mb-[15px] z-10 font-700">
|
|
<span class="text-[34px] italic">{{ gainData.toDayAcq || 0 }}</span>
|
|
<span class="text-[18px]">人</span>
|
|
</div>
|
|
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
|
|
</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]">{{ gainData.yestertDayAcq || 0 }}人</p>
|
|
<div :class="`${gainDifferentTody > 0 ?'text-[#4AFFA2]':'text-[#FF4E4E]'} text-[12px] flex items-center`">
|
|
<span class="">今日较昨日</span>
|
|
<SvgIcon :name="gainDifferentTody > 0 ? 'arrow-up' : 'arrow-down'" class="text-[9px]" />
|
|
<span>{{ Math.abs(gainDifferentTody) }}人</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 gainData = inject("gainData",ref({toDayAcq:0,yestertDayAcq:0}))
|
|
|
|
const groupSvg = ref("");
|
|
const getGroupBackgroundSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/short-background.svg?raw");
|
|
groupSvg.value = svg;
|
|
};
|
|
|
|
const gainDifferentTody = computed(() => {
|
|
if((Object.prototype.toString.call(gainData.value.toDayAcq) !== "[object Undefined]") && (Object.prototype.toString.call(gainData.value.yestertDayAcq) !== "[object Undefined]")){
|
|
return gainData.value.toDayAcq - gainData.value.yestertDayAcq
|
|
}else{
|
|
return 0;
|
|
}
|
|
})
|
|
|
|
|
|
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;
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
getGroupBackgroundSvg();
|
|
getLightningBoxSvg();
|
|
getPaymentChartSvg();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/text-color.scss";
|
|
|
|
.border-image {
|
|
border: 1px solid;
|
|
border-image: linear-gradient(
|
|
90deg,
|
|
#217ac600,
|
|
#227cc8,
|
|
#217ac600
|
|
)
|
|
1 1;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.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>
|
|
|