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
| <template>
| <ElRow :gutter="20" class="flex">
| <ElCol v-for="(item, index) in dataList" :key="index" :sm="12" :md="6" :lg="6">
| <div class="art-card relative flex flex-col justify-center h-35 px-5 mb-5 max-sm:mb-4">
| <span class="text-g-700 text-sm">{{ item.des }}</span>
| <ArtCountTo class="text-[26px] font-medium mt-2" :target="item.num" :duration="1300" />
| <div class="flex-c mt-1">
| <span class="text-xs text-g-600">较上周</span>
| <span
| class="ml-1 text-xs font-semibold"
| :class="[item.change.indexOf('+') === -1 ? 'text-danger' : 'text-success']"
| >
| {{ item.change }}
| </span>
| </div>
| <div
| class="absolute top-0 bottom-0 right-5 m-auto size-12.5 rounded-xl flex-cc bg-theme/10"
| >
| <ArtSvgIcon :icon="item.icon" class="text-xl text-theme" />
| </div>
| </div>
| </ElCol>
| </ElRow>
| </template>
|
| <script setup>
| const dataList = reactive([
| {
| des: '总访问次数',
| icon: 'ri:pie-chart-line',
| startVal: 0,
| duration: 1e3,
| num: 9120,
| change: '+20%'
| },
| {
| des: '在线访客数',
| icon: 'ri:group-line',
| startVal: 0,
| duration: 1e3,
| num: 182,
| change: '+10%'
| },
| {
| des: '点击量',
| icon: 'ri:fire-line',
| startVal: 0,
| duration: 1e3,
| num: 9520,
| change: '-12%'
| },
| {
| des: '新用户',
| icon: 'ri:progress-2-line',
| startVal: 0,
| duration: 1e3,
| num: 156,
| change: '+30%'
| }
| ])
| </script>
|
|
