skytek_xinliang
57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<v-card class="rounded-lg h-100" elevation="2" v-bind="$attrs">
|
|
<v-card-title class="text-subtitle-1 font-weight-bold py-4">
|
|
{{ title }}
|
|
</v-card-title>
|
|
<v-divider></v-divider>
|
|
<v-card-text class="d-flex flex-column align-center justify-center pt-8">
|
|
<div
|
|
class="d-flex align-center justify-center"
|
|
style="position: relative; width: 200px; height: 200px"
|
|
>
|
|
<v-progress-circular
|
|
class="position-absolute"
|
|
color="grey-lighten-3"
|
|
:model-value="100"
|
|
:size="180"
|
|
:width="25"
|
|
></v-progress-circular>
|
|
|
|
<v-progress-circular
|
|
class="position-absolute"
|
|
:color="data.color"
|
|
:model-value="data.value"
|
|
rotate="270"
|
|
:size="180"
|
|
:width="25"
|
|
>
|
|
<div class="text-center">
|
|
<div class="text-h5 font-weight-bold">{{ data.value }}%</div>
|
|
<div class="text-caption text-grey">{{ data.label }}</div>
|
|
</div>
|
|
</v-progress-circular>
|
|
</div>
|
|
|
|
<div class="mt-8 d-flex flex-wrap justify-center gap-2">
|
|
<v-chip class="mr-2" :color="data.color" label size="small" variant="flat">
|
|
{{ data.label }}
|
|
</v-chip>
|
|
<v-chip color="grey-lighten-3" label size="small" variant="flat"> 其他 </v-chip>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
data: {
|
|
value: number
|
|
label: string
|
|
color: string
|
|
}
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|