<template>
  <a-breadcrumb class="header">
    <a-breadcrumb-item href="">
      <home-outlined />
    </a-breadcrumb-item>
    <a-breadcrumb-item href="">
      <user-outlined />
      <span>{{ $route.path }}</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>{{ $route.name }}</a-breadcrumb-item>
  </a-breadcrumb>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="title" label="公告标题" width="400" />
    <el-table-column prop="name" label="管理员" width="180" />
    <el-table-column label="状态" >
          <el-tag type="success">正常</el-tag>
    </el-table-column>>
    <el-table-column prop="address" label="操作">
      <el-tag type="warning">封禁</el-tag>
      <el-tag type="info">查看</el-tag>
      <el-tag type="danger">删除</el-tag>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
const tableData = [
  {
    title: '重要通知：系统维护升级时间安排',
    name: '小明',
  },
  {
    title: '社区新规则：共同维护我们的网络环境',
    name: '小李',
  },
  {
    title: '公告：用户协议更新，请所有成员查阅',
    name: '小红',
  },
  {
    title: '活动预告：年度用户大会即将开启，精彩不容错过',
    name: '小张',
  },
  {
    title: '温馨提示：保护个人信息安全的小贴士',
    name: '小张',
  },
  {
    title: '新功能上线：优化您的用户体验',
    name: '小张',
  },
  {
    title: '积分奖励计划：参与社区活动获得更多福利',
    name: '小张',
  },
  {
    title: '用户反馈精选：我们正在倾听并持续改进',
    name: '小张',
  },
  {
    title: '公告：用户协议更新，请所有成员查阅',
    name: '小红',
  },
  {
    title: '活动预告：年度用户大会即将开启，精彩不容错过',
    name: '小张',
  },
  {
    title: '温馨提示：保护个人信息安全的小贴士',
    name: '小张',
  },
  {
    title: '新功能上线：优化您的用户体验',
    name: '小张',
  },
  {
    title: '积分奖励计划：参与社区活动获得更多福利',
    name: '小张',
  },
  {
    title: '用户反馈精选：我们正在倾听并持续改进',
    name: '小张',
  },
]
</script>

<style>
.header {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: white;
  margin-top: 0;
}
</style>



