Add note cards and update work card layout

ui/src/components/home/NoticeCard.vue

@@ -0,0 +1,76 @@
+<template>
+    <el-card shadow="hover" class="homeCard">
+        <template #header>
+            <div class="card-header" style="height: 20px">
+                <h2>公告</h2>
+                <el-button class="button" text @click="pushTodo">查看更多</el-button>
+            </div>
+        </template>
+        <div v-for="item in tableData" :key="item" class="card-text card-item">
+            <el-row :gutter="10">
+                <el-col :xs="0" :sm="4" :md="4" :lg="3" :xl="2" style="justify-content: center">
+                    <el-avatar style="background-color: #f89898" :size="32">
+                        <el-icon color="white" :size="22" style="vertical-align: center">
+                            <icon-pinnacle-notice-item />
+                        </el-icon>
+                    </el-avatar>
+                </el-col>
+                <el-col :xs="5" :sm="5" :md="5" :lg="8" :xl="10"
+                    ><el-text size="large" style="color: black; line-height: 32px" truncated>{{
+                        item.title
+                    }}</el-text>
+                </el-col>
+                <el-col :xs="15" :sm="11" :md="12" :lg="10" :xl="10" style="text-align: right"
+                    ><el-text type="info" style="line-height: 32px">{{
+                        formatDate(item.sendTime)
+                    }}</el-text></el-col
+                >
+                <el-col :xs="4" :sm="4" :md="3" :lg="3" :xl="2" style="text-align: right"
+                    ><el-text type="info" style="line-height: 32px">{{
+                        item.sender.username
+                    }}</el-text></el-col
+                >
+            </el-row>
+        </div>
+    </el-card>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        tableData: {
+            type: Array
+        }
+    },
+    methods: {
+        formatDate(time) {
+            return new Date(time).toLocaleString()
+        },
+        pushTodo() {
+            this.$router.push('/notice/view/all')
+        }
+    }
+}
+</script>
+
+<style>
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-text {
+    font-size: 14px;
+}
+
+.card-item {
+    margin-bottom: 5px;
+    height: calc(((100vh - 56px - 40px - 20px) / 2 - 56px - 40px) / 5);
+    min-height: 32px;
+}
+.homeCard {
+    height: calc((100vh - 56px - 40px - 20px) / 2);
+    min-height: calc((500px - 56px - 40px - 20px) / 2);
+}
+</style>