You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.0 KiB
53 lines
1.0 KiB
<script lang="ts" setup> |
|
import { Card, CardGrid } from 'ant-design-vue' |
|
|
|
interface NavItem { |
|
title: string |
|
icon: string |
|
color: string |
|
} |
|
|
|
const navItems: NavItem[] = [ |
|
{ |
|
title: '首页', |
|
icon: 'i-ion:home-outline', |
|
color: '#1fdaca', |
|
}, |
|
{ |
|
title: '仪表盘', |
|
icon: 'i-ion:grid-outline', |
|
color: '#bf0c2c', |
|
}, |
|
{ |
|
title: '组件', |
|
icon: 'i-ion:layers-outline', |
|
color: '#e18525', |
|
}, |
|
{ |
|
title: '系统管理', |
|
icon: 'i-ion:settings-outline', |
|
color: '#3fb27f', |
|
}, |
|
{ |
|
title: '权限管理', |
|
icon: 'i-ion:key-outline', |
|
color: '#4daf1bc9', |
|
}, |
|
{ |
|
title: '图表', |
|
icon: 'i-ion:bar-chart-outline', |
|
color: '#00d8ff', |
|
}, |
|
] |
|
</script> |
|
|
|
<template> |
|
<Card title="快捷导航"> |
|
<CardGrid v-for="item in navItems" :key="item.title"> |
|
<span class="flex flex-col items-center"> |
|
<span :class="item.icon" :style="{ color: item.color }" class="text-[20px]" /> |
|
<span class="text-md mt-2 truncate">{{ item.title }}</span> |
|
</span> |
|
</CardGrid> |
|
</Card> |
|
</template>
|
|
|