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
| <template>
| <Card title="快捷导航" v-bind="$attrs">
| <template v-for="item in navItems" :key="item">
| <CardGrid @click="goPage">
| <span class="flex flex-col items-center">
| <Icon :icon="item.icon" :color="item.color" size="20" />
| <span class="text-md mt-2">{{ item.title }}</span>
| </span>
| </CardGrid>
| </template>
| </Card>
| </template>
| <script lang="ts" setup>
| import { Card } from 'ant-design-vue';
| import { useMessage } from '/@/hooks/web/useMessage';
| import { Icon } from '/@/components/Icon';
|
| const CardGrid = Card.Grid;
| const $message = useMessage();
| const navItems = [
| {
| title: '业务受理',
| icon: 'ion:home-outline',
| color: '#1fdaca',
| },
| {
| title: '业务管理',
| icon: 'ion:grid-outline',
| color: '#bf0c2c',
| },
| {
| title: '文件管理',
| icon: 'ion:layers-outline',
| color: '#e18525',
| },
| {
| title: '信息查询',
| icon: 'ion:settings-outline',
| color: '#3fb27f',
| },
| {
| title: '通知公告',
| icon: 'ion:notifications',
| color: '#13b0ff',
| },
| {
| title: '我的任务',
| icon: 'ion:person-stalker',
| color: '#b27315',
| }
| ];
|
| function goPage() {
| $message.createMessage.success('根据业务自行处理跳转页面!');
| }
| </script>
|
|
