This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
|
|
|
|
<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>
|
