Web/src/pages/home/list.vue

@@ -0,0 +1,99 @@
+<template>
+  <a-card
+    :active-tab-key="key"
+    :bodyStyle="{ padding: 0 }"
+    :bordered="false"
+    :tab-list="tabList"
+    @tabChange="key => onTabChange(key, 'key')"
+  >
+    <a-table :columns="columns" :data-source="data" :pagination="false" />
+  </a-card>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      key: '1',
+      tabList: [
+        {
+          key: '1',
+          tab: '新建项目',
+        },
+        {
+          key: '2',
+          tab: '正在签约项目',
+        },
+        {
+          key: '3',
+          tab: '完成签约项目',
+        },
+        {
+          key: '4',
+          tab: '项目进度',
+        },
+      ],
+
+      columns: [
+        {
+          title: '区域',
+          dataIndex: 'area',
+        },
+        {
+          title: '项目名称',
+          dataIndex: 'title',
+        },
+        {
+          title: '户数',
+          dataIndex: 'count',
+        },
+        {
+          title: '时间',
+          dataIndex: 'date',
+        },
+      ],
+      data: [
+        {
+          key: '1',
+          area: '海曙区',
+          title: '曙光电影院地块',
+          count: 13,
+          date: '2021-01-01',
+        },
+        {
+          key: '2',
+          area: '江北区',
+          title: '大庆新村地块旧城区改建项目',
+          count: 322,
+          date: '2021-01-01',
+        },
+        {
+          key: '3',
+          area: '宁海县',
+          title: '桥头胡街道旧城区改造华驰文教地块',
+          count: 1,
+          date: '2021-01-01',
+        },
+        {
+          key: '4',
+          area: '慈溪市',
+          title: '七二三南延道路工程',
+          count: 1,
+          date: '2021-01-01',
+        },
+        {
+          key: '5',
+          area: '北仑区',
+          title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
+          count: 32,
+          date: '2021-01-01',
+        },
+      ],
+    };
+  },
+  methods: {
+    onTabChange(key, type) {
+      this[type] = key;
+    },
+  },
+};
+</script>