xjs
/
payment-statistics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化页面dom

master
xjs 2025-05-27 15:40:08 +08:00
parent ebf464b881
commit 0c41b523aa
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/components/PaymentTotal.vue
View File

@ -3,13 +3,13 @@
<SvgComponent :content="groupSvg" class="w-[544px] h-[210px]" /> <SvgComponent :content="groupSvg" class="w-[544px] 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-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center">
<div class="w-[216px]"> <div class="w-[216px]">
<div class="relative w-[154px] h-[124px] flex items-center flex-col"> <div class="w-[154px] h-[124px] flex items-center flex-col">
<div class="text-[#44C1EF] italic text-[20px] font-700">总缴费</div> <div class="text-[#44C1EF] italic text-[20px] font-700">总缴费</div>
<div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline"> <div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline">
<span class="text-[40px] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{paymentData.chargeTotal ||0}}</span> <span class="text-[40px] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{paymentData.chargeTotal ||0}}</span>
<span class="text-[20px] text-color" data-text="人">人</span> <span class="text-[20px] text-color" data-text="人">人</span>
</div> </div>
<SvgComponent :content="lightningBoxSvg" class="box-light absolute" /> <SvgComponent :content="lightningBoxSvg" class="box-light translate-y-[-70%]" />
</div> </div>
<div> <div>
<div class="flex items-center justify-between text-[12px]"> <div class="flex items-center justify-between text-[12px]">
@ -23,13 +23,16 @@
</div> </div>
<YProgress :percentage="Math.round(paymentData.chargeTotal/paymentData.estimatedTotal * 100)" height="12px" class="mt-[7px]" /> <YProgress :percentage="Math.round(paymentData.chargeTotal/paymentData.estimatedTotal * 100)" height="12px" class="mt-[7px]" />
</div> </div>
<div class="ml-[4px] relative w-[143px] h-[143px]"> <div class="ml-[4px] relative w-[143px] h-[143px] flex flex-col">
<ProportionCharts :chart-data="chartData" class="" /> <ProportionCharts :chart-data="chartData" class="" />
<div <div
class="text-[18px] text-[#fff] font-700 text-shadow-[0_0_10px_rgba(12,32,72,0.42)] italic absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3"> class="w-max h-max text-[18px] text-[#fff] font-700 italic translate-x-[150%] translate-y-[-185%] flex flex-col">
缴费 <span>
<br /> 缴费
占比 </span>
<span>
占比
</span>
</div> </div>
</div> </div>
<ul class="ml-[10px] flex flex-col justify-evenly h-full flex-1"> <ul class="ml-[10px] flex flex-col justify-evenly h-full flex-1">