gas-injection/src/views/dashboard/Analysis/components/QuickNav.vue

<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>