skytek_xinliang
54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<template>
|
|
<v-card class="rounded-lg" elevation="2" v-bind="$attrs">
|
|
<v-card-title class="text-subtitle-1 font-weight-bold py-4 border-b">
|
|
{{ title }}
|
|
</v-card-title>
|
|
<v-card-text class="d-flex flex-column align-center justify-center pt-6 pb-6">
|
|
<div
|
|
class="d-flex align-center justify-center"
|
|
style="position: relative; width: 180px; height: 180px"
|
|
>
|
|
<v-progress-circular
|
|
bg-color="grey-lighten-3"
|
|
color="primary"
|
|
:model-value="value"
|
|
:size="160"
|
|
:width="20"
|
|
>
|
|
<div class="text-center">
|
|
<div class="text-h6 font-weight-bold">{{ value }}%</div>
|
|
<div class="text-caption text-grey">{{ subtitle }}</div>
|
|
</div>
|
|
</v-progress-circular>
|
|
</div>
|
|
<div class="mt-4 d-flex justify-center gap-4 w-100">
|
|
<div class="d-flex align-center mr-4">
|
|
<v-icon class="mr-1" color="primary" size="small" :icon="mdiCircle" />
|
|
<span class="text-caption">{{ primaryLabel }}</span>
|
|
</div>
|
|
<div class="d-flex align-center">
|
|
<v-icon class="mr-1" color="grey-lighten-3" size="small" :icon="mdiCircle" />
|
|
<span class="text-caption">{{ secondaryLabel }}</span>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mdiCircle } from '@mdi/js'
|
|
interface Props {
|
|
title: string
|
|
value: number
|
|
subtitle?: string
|
|
primaryLabel?: string
|
|
secondaryLabel?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
subtitle: '來源佔比',
|
|
primaryLabel: '校內',
|
|
secondaryLabel: '校外',
|
|
})
|
|
</script>
|