skytek_xinliang
34 lines
986 B
Vue
34 lines
986 B
Vue
<template>
|
|
<v-card class="rounded-lg h-100" elevation="2" v-bind="$attrs">
|
|
<v-card-text class="d-flex flex-column justify-space-between h-100">
|
|
<div class="d-flex justify-space-between align-start mb-4">
|
|
<div>
|
|
<div class="text-subtitle-1 font-weight-bold text-grey-darken-1 mb-1">
|
|
{{ title }}
|
|
</div>
|
|
<div class="text-h4 font-weight-bold">{{ value }}</div>
|
|
</div>
|
|
<v-icon class="opacity-80" :color="color" size="x-large" :icon="icon" />
|
|
</div>
|
|
|
|
<div class="d-flex justify-space-between align-center border-t pt-3">
|
|
<span class="text-body-2 text-grey">{{ label }}</span>
|
|
<span class="text-body-2 font-weight-medium">{{ total }}</span>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
value: string | number
|
|
label: string
|
|
total: string | number
|
|
icon: string
|
|
color: string
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|