@@ -9,22 +9,48 @@ defineProps<{
99 </script >
1010
1111<template >
12- <section class =" grid grid-cols-4 gap-5 max-[960px]:grid-cols-2 max-[620px]:grid-cols-1 max-[620px]:gap-4" >
13- <article class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover" >
12+ <section
13+ class =" grid grid-cols-4 gap-5 max-[960px]:grid-cols-2 max-[620px]:grid-cols-1 max-[620px]:gap-4"
14+ >
15+ <article
16+ class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover"
17+ >
1418 <p class =" m-0 text-sm text-secondary font-medium" >Total Workers</p >
15- <p class =" mt-3 mb-0 text-[32px] font-bold leading-none text-primary font-mono tracking-[-0.02em]" >{{ totalWorkers }}</p >
19+ <p
20+ class =" mt-3 mb-0 text-[32px] font-bold leading-none text-primary font-mono tracking-[-0.02em]"
21+ >
22+ {{ totalWorkers }}
23+ </p >
1624 </article >
17- <article class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover" >
25+ <article
26+ class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover"
27+ >
1828 <p class =" m-0 text-sm text-secondary font-medium" >Online</p >
19- <p class =" mt-3 mb-0 text-[32px] font-bold leading-none text-online font-mono tracking-[-0.02em]" >{{ onlineWorkers }}</p >
29+ <p
30+ class =" mt-3 mb-0 text-[32px] font-bold leading-none text-online font-mono tracking-[-0.02em]"
31+ >
32+ {{ onlineWorkers }}
33+ </p >
2034 </article >
21- <article class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover" >
35+ <article
36+ class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover"
37+ >
2238 <p class =" m-0 text-sm text-secondary font-medium" >Offline</p >
23- <p class =" mt-3 mb-0 text-[32px] font-bold leading-none text-offline font-mono tracking-[-0.02em]" >{{ offlineWorkers }}</p >
39+ <p
40+ class =" mt-3 mb-0 text-[32px] font-bold leading-none text-offline font-mono tracking-[-0.02em]"
41+ >
42+ {{ offlineWorkers }}
43+ </p >
2444 </article >
25- <article class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover" >
45+ <article
46+ class =" bg-surface border border-stroke rounded-lg p-6 shadow-card flex flex-col justify-center transition-[transform,box-shadow] duration-200 animate-[rise-in_550ms_ease-out] hover:-translate-y-0.5 hover:shadow-card-hover hover:border-stroke-hover"
47+ >
2648 <p class =" m-0 text-sm text-secondary font-medium" >{{ staleWorkersLabel }}</p >
27- <p class =" mt-3 mb-0 text-[32px] font-bold leading-none text-stale font-mono tracking-[-0.02em]" >{{ staleWorkers }}</p >
49+ <p
50+ class =" mt-3 mb-0 text-[32px] font-bold leading-none text-stale font-mono tracking-[-0.02em]"
51+ >
52+ {{ staleWorkers }}
53+ </p >
2854 </article >
2955 </section >
3056</template >
0 commit comments