数据概览静态

src/views/overview/index.vue

@@ -7,6 +7,20 @@ const titleList = ref([
     { icon: 'icon-yisheng', count: 3, title: "手术医生" },
     { icon: 'icon-shebeigailan', count: 93, title: "设备品牌" },
 ])
+const tableData = ref([{
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+}])
+
+for (let index = 0; index < 10; index++) {
+    tableData.value.push({
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },)
+
+}
 const pieDom = ref<HTMLDivElement | null>(null)
 const barDom = ref<HTMLDivElement | null>(null)
 
@@ -150,33 +164,51 @@ onMounted(() => {
             </li>
         </ul>
         <div class="chart">
-            <div>
+            <div class="box_shadow">
                 <h3>手术类型分布</h3>
                 <div ref="pieDom"></div>
             </div>
-            <div>
+            <div class="box_shadow">
                 <h3>医生手术统计</h3>
                 <div ref="barDom"></div>
             </div>
         </div>
-        <div class="table"></div>
+        <TableBox :total="100">
-        <div>
+            <template #header>
-
+                最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
-        </div>
+            </template>
+            <el-table stripe :data="tableData" height="480">
+                <el-table-column prop="date" label="日期" width="180" />
+                <el-table-column prop="name" label="姓名" width="180" />
+                <el-table-column prop="name" label="手术医生" width="180" />
+                <el-table-column prop="name" label="手术名称" />
+                <el-table-column prop="name" label="脑积水类型" width="180" />
+                <el-table-column prop="name" label="当前阀门压力" width="180" />
+                <el-table-column fixed="right" label="操作" align="center" width="180">
+                    <template #default>
+                        <el-button link type="primary" size="small">
+                            查看详情
+                        </el-button>
+                        <el-button link type="primary" size="small">手术记录</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </TableBox>
     </div>
 </template>
 <style scoped>
 .data {
+    h3 {
+        font-weight: 100;
+        padding: 20px 15px;
+        border-bottom: 1px solid #ddd;
+    }
+
     ul {
         display: flex;
         justify-content: space-between;
         gap: 20px;
 
-        h3 {
-            padding: 20px;
-            border-bottom: 1px solid #ddd;
-        }
-
         li {
             display: flex;
             flex: 1;
@@ -207,7 +239,6 @@ onMounted(() => {
 
         >div {
             flex: 1;
-            background-color: #fff;
             height: 400px;