111 lines
2.7 KiB
Vue
111 lines
2.7 KiB
Vue
<script setup>
|
|
import avatar6 from '@images/avatars/avatar-6.png'
|
|
import avatar7 from '@images/avatars/avatar-7.png'
|
|
import avatar8 from '@images/avatars/avatar-8.png'
|
|
</script>
|
|
|
|
<template>
|
|
<VCard>
|
|
<VCardItem>
|
|
<VCardTitle>Finance Summary</VCardTitle>
|
|
<VCardSubtitle>Check out each Column for more details</VCardSubtitle>
|
|
|
|
<template #append>
|
|
<VAvatar
|
|
size="44"
|
|
color="primary"
|
|
variant="tonal"
|
|
>
|
|
<VIcon
|
|
size="28"
|
|
icon="ri-question-line"
|
|
/>
|
|
</VAvatar>
|
|
</template>
|
|
</VCardItem>
|
|
|
|
<VCardText>
|
|
<div class="d-flex flex-column gap-y-6">
|
|
<div class="d-flex flex-wrap gap-y-4">
|
|
<div style="min-inline-size: 210px;">
|
|
<div class="mb-1">
|
|
Annual Companies Taxes
|
|
</div>
|
|
<h5 class="text-h5">
|
|
$1450.35
|
|
</h5>
|
|
</div>
|
|
<div>
|
|
<div class="mb-1">
|
|
Next Tax Review Date
|
|
</div>
|
|
<h5 class="text-h5">
|
|
July 14, 2021
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap gap-y-4">
|
|
<div style="min-inline-size: 210px;">
|
|
<div class="mb-1">
|
|
Average Product Price
|
|
</div>
|
|
<h5 class="text-h5">
|
|
$85.50
|
|
</h5>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="mb-1">
|
|
Satisfaction Rate
|
|
</div>
|
|
<div
|
|
class="d-flex align-center gap-5"
|
|
style="inline-size: 130px;"
|
|
>
|
|
<div class="flex-grow-1">
|
|
<VProgressLinear
|
|
color="primary"
|
|
rounded
|
|
rounded-bar
|
|
:model-value="75"
|
|
:height="6"
|
|
/>
|
|
</div>
|
|
<span>75%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-space-between align-center">
|
|
<div class="v-avatar-group">
|
|
<VAvatar
|
|
:size="40"
|
|
:image="avatar7"
|
|
/>
|
|
<VAvatar
|
|
:size="40"
|
|
:image="avatar8"
|
|
/>
|
|
<VAvatar
|
|
:size="40"
|
|
:image="avatar6"
|
|
/>
|
|
<VAvatar
|
|
:color="$vuetify.theme.current.dark ? '#3A3B59' : '#F0EFF0'"
|
|
:size="40"
|
|
>
|
|
+3
|
|
</VAvatar>
|
|
</div>
|
|
<VChip
|
|
color="primary"
|
|
size="small"
|
|
>
|
|
5 days Ago
|
|
</VChip>
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|