114 lines
4.3 KiB
Vue
114 lines
4.3 KiB
Vue
<template>
|
|
<div class="w-[296px] h-[320px] relative bg-[#082059]">
|
|
<div class="flex h-full custom-border absolute top-0 left-0">
|
|
<div class="relative h-[36px]">
|
|
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
|
|
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
|
|
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">线上详情</div>
|
|
</div>
|
|
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
|
|
</div>
|
|
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
|
|
</div>
|
|
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
|
|
<div class="ml-[22px] relative mt-[13px]">
|
|
<div class="flex items-center justify-center">
|
|
<ProportionCharts :chart-data="chartData" class="z-2 relative" />
|
|
<SvgComponent :content="paymentChartSvg" class="w-[143px] h-[143px] absolute top-0 left-[50%] z-1 transform-translate-x-[-50%]" />
|
|
</div>
|
|
<div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">
|
|
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent flex items-baseline">
|
|
<div class="text-[25px]">690</div>
|
|
<div class="text-[20px]">人</div>
|
|
</div>
|
|
<div class="text-[#FFFFFF] text-[16px] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[7px]">线上</div>
|
|
</div>
|
|
</div>
|
|
<ul class="px-[24px] grid grid-cols-2 gap-x-[20px] gap-y-[16px] mt-[20px] leading-[1]">
|
|
<li class="flex items-center flex-col" v-for="item in chartData" :key="item.name">
|
|
<div class="flex items-center justify-between w-full">
|
|
<div class="w-[6px] h-[6px] rounded-full" :style="{ backgroundColor: item.color }"></div>
|
|
<div class="flex-1 flex items-center text-[#C0EEFF] text-[12px] justify-between">
|
|
<span class="ml-[4px] mr-[9px]">{{ item.name }}</span>
|
|
<span>{{ item.value }}人</span>
|
|
</div>
|
|
</div>
|
|
<div class="border-image w-full mt-[6px]"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SvgComponent from "@/components/SvgComponent.vue";
|
|
import ProportionCharts from "@/views/components/chartsComponents/ProportionCharts.vue";
|
|
|
|
const headerLeftSvg = ref("");
|
|
const headerRightSvg = ref("");
|
|
|
|
const getHeaderLeftSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/header-bg-left-sort.svg?raw");
|
|
headerLeftSvg.value = svg;
|
|
};
|
|
|
|
const getHeaderRightSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/header-bg-right-sort.svg?raw");
|
|
headerRightSvg.value = svg;
|
|
};
|
|
|
|
const paymentChartSvg = ref("");
|
|
const getPaymentChartSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/payment-chart.svg?raw");
|
|
paymentChartSvg.value = svg;
|
|
};
|
|
|
|
const arrowLeftSvg = ref("");
|
|
const getArrowLeftSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/arrow-left.svg?raw");
|
|
arrowLeftSvg.value = svg;
|
|
};
|
|
|
|
const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]);
|
|
|
|
const askSectionData = inject("askSectionData", ref<{ online: any[] }>({ online: [] }));
|
|
|
|
const chartData = ref<any[]>([]);
|
|
|
|
watch(() => askSectionData.value, () => {
|
|
initData()
|
|
});
|
|
|
|
const initData = () => {
|
|
if (askSectionData.value.online && askSectionData.value.online.length > 0) {
|
|
chartData.value = askSectionData.value.online.map((item, index) => ({
|
|
name: item.tag,
|
|
value: item.total,
|
|
color: colorList.value[index % colorList.value.length],
|
|
}));
|
|
}
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
getHeaderLeftSvg();
|
|
getHeaderRightSvg();
|
|
getArrowLeftSvg();
|
|
getPaymentChartSvg();
|
|
|
|
initData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/custom-border.scss";
|
|
|
|
.custom-border {
|
|
border-image-slice: 27 27 27 27;
|
|
border-image-width: 1px 1px 2px 1px;
|
|
border-image-outset: 0px 0px 0px 0px;
|
|
border-image-repeat: stretch stretch;
|
|
border-image-source: url("src/assets/svg-img/border-image.png");
|
|
border-style: solid;
|
|
}
|
|
</style>
|