style: 优化会员漏斗卡片组件的样式和布局
- 调整了会员漏斗卡片组件的样式,简化了宽度设置 - 更新了 trapezoid 类的样式,移除了多余的 margin 和 font-size 设置 - 改善了组件的可读性和视觉效果pull/175/head
parent
8c2f982ab6
commit
ff53153782
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue