AzuTear
34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
defineProps<{
|
|
operationChecks: Array<{ label: string; value: number; to: string; state: string; note: string }>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<section class="grid gap-4 lg:grid-cols-3">
|
|
<RouterLink
|
|
v-for="check in operationChecks"
|
|
:key="check.label"
|
|
:to="check.to"
|
|
class="rounded-[24px] border bg-white/85 p-5 shadow-[0_16px_42px_rgba(168,145,214,0.08)] transition hover:-translate-y-0.5 hover:bg-violet-50/50"
|
|
:class="{
|
|
'border-emerald-100': check.state === 'ok',
|
|
'border-amber-100': check.state === 'warn',
|
|
'border-rose-100': check.state === 'danger',
|
|
}"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">{{ check.label }}</p>
|
|
<strong class="mt-3 block text-3xl" :class="check.state === 'danger' ? 'text-rose-700' : check.state === 'warn' ? 'text-amber-700' : 'text-emerald-700'">
|
|
{{ check.value }}
|
|
</strong>
|
|
<p class="mt-2 text-sm leading-5 text-slate-500">{{ check.note }}</p>
|
|
</div>
|
|
</div>
|
|
</RouterLink>
|
|
</section>
|
|
</template>
|