CardAdvanceFinanceSummary.vue
2.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<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>