style: 优化会员漏斗卡片组件的样式和布局

- 调整了会员漏斗卡片组件的样式,简化了宽度设置
- 更新了 trapezoid 类的样式,移除了多余的 margin 和 font-size 设置
- 改善了组件的可读性和视觉效果
pull/175/head
lrl 2025-07-16 11:49:27 +08:00
parent 8c2f982ab6
commit ff53153782
1 changed files with 17 additions and 22 deletions

View File

@ -39,10 +39,7 @@ const handleTimeRangeChange = async (
<template #default>
<div class="min-w-225 py-1.75" v-loading="loading">
<div class="relative flex h-24">
<div
class="w-75% <lg:w-35% <xl:w-55% h-full bg-blue-50"
style="width: 75%"
>
<div class="<lg:w-35% <xl:w-55% h-full w-3/4 bg-blue-50">
<div class="ml-15 flex h-full flex-col justify-center">
<div class="font-bold">
注册用户数量{{
@ -60,7 +57,7 @@ const handleTimeRangeChange = async (
</div>
</div>
<div
class="trapezoid1 ml--38.5 w-77 text-3.5 mt-1.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
class="trapezoid1 text-3.5 flex h-full flex-col items-center justify-center bg-blue-500 text-white"
>
<span class="text-6 font-bold">{{
analyseData?.visitUserCount || 0
@ -69,10 +66,7 @@ const handleTimeRangeChange = async (
</div>
</div>
<div class="relative flex h-24">
<div
class="w-75% <lg:w-35% <xl:w-55% flex h-full bg-cyan-50"
style="width: 75%"
>
<div class="<lg:w-35% <xl:w-55% flex h-full w-3/4 bg-cyan-50">
<div class="ml-15 flex h-full flex-col justify-center">
<div class="font-bold">
活跃用户数量{{
@ -90,7 +84,7 @@ const handleTimeRangeChange = async (
</div>
</div>
<div
class="trapezoid2 mt-1.7 h-25 text-3.5 ml--28 flex w-56 flex-col items-center justify-center bg-cyan-500 text-white"
class="trapezoid2 flex flex-col items-center justify-center bg-cyan-500 text-white"
>
<span class="text-6 font-bold">{{
analyseData?.orderUserCount || 0
@ -99,10 +93,7 @@ const handleTimeRangeChange = async (
</div>
</div>
<div class="relative flex h-24">
<div
class="w-75% <lg:w-35% <xl:w-55% flex bg-slate-50"
style="width: 75%"
>
<div class="<lg:w-35% <xl:w-55% flex w-3/4 bg-slate-50">
<div class="ml-15 flex h-full flex-row gap-x-16">
<div class="flex flex-col justify-center">
<div class="font-bold">
@ -127,7 +118,7 @@ const handleTimeRangeChange = async (
</div>
</div>
<div
class="trapezoid3 ml--18 mt-3.25 h-23 text-3.5 flex w-36 flex-col items-center justify-center bg-slate-500 text-white"
class="trapezoid3 flex flex-col items-center justify-center bg-slate-500 text-white"
>
<span class="text-6 font-bold">{{
analyseData?.payUserCount || 0
@ -141,27 +132,31 @@ const handleTimeRangeChange = async (
</template>
<style lang="scss" scoped>
.trapezoid1 {
transform: perspective(5em) rotateX(-11deg);
font-size: 0.875rem;
width: 19.25rem;
margin-left: -9.625rem;
margin-top: 0.381rem;
font-size: 0.875rem;
transform: perspective(5em) rotateX(-11deg);
z-index: 1;
}
.trapezoid2 {
transform: perspective(7em) rotateX(-20deg);
font-size: 0.875rem;
width: 14rem;
margin-left: -7rem;
height: 6.25rem;
margin-top: 0.425rem;
margin-left: -7rem;
font-size: 0.875rem;
transform: perspective(7em) rotateX(-20deg);
z-index: 1;
}
.trapezoid3 {
transform: perspective(3em) rotateX(-13deg);
font-size: 0.875rem;
width: 9rem;
height: 5.75rem;
margin-top: 0.8125rem;
margin-left: -4.5rem;
font-size: 0.875rem;
transform: perspective(3em) rotateX(-13deg);
z-index: 1;
}
</style>