| | |
| | | <div class="card-header"> |
| | | <h3>销售数据</h3> |
| | | </div> |
| | | <el-table |
| | | :data="salesData" |
| | | <el-table |
| | | :data="salesData" |
| | | style="width: 100%" |
| | | :header-cell-style="tableHeaderStyle" |
| | | > |
| | |
| | | <el-table-column prop="amount" label="金额" width="90"></el-table-column> |
| | | <el-table-column prop="status" label="状态" width="70"> |
| | | <template #default="scope"> |
| | | <el-tag |
| | | <el-tag |
| | | :type="scope.row.status === '已完成' ? 'success' : 'warning'" |
| | | size="small" |
| | | > |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | <style scoped lang="scss"> |
| | | .dashboard { |
| | | padding: 20px; |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | min-height: 91vh; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | /* 顶部统计卡片 */ |
| | |
| | | |
| | | /* 表格样式调整 */ |
| | | .bottom-card.table { |
| | | min-width: 320px; |
| | | width: 100%; |
| | | } |
| | | |
| | | .bottom-card.table .el-table { |
| | |
| | | .bottom-card.table .el-table th { |
| | | padding: 8px 0; |
| | | } |
| | | |
| | | :deep(.el-scrollbar__view){ |
| | | width: 100% !important; |
| | | |
| | | } |
| | | :deep(.el-table__header,){ |
| | | width: 100% !important; |
| | | } |
| | | :deep(.el-table__body,){ |
| | | width: 100% !important; |
| | | } |
| | | /* 响应式设计 */ |
| | | @media (max-width: 1200px) { |
| | | .bottom-section { |