跳转到正文

组装你的可部署仪表盘

中级~15 分钟0/4 步骤

组装你的可部署仪表盘

这是毕业项目。你已经做过 KPI 卡片、图表和报告布局——现在要把这些部分组合成一个完整的、可部署的仪表盘页面,一个可以真正发布到线上 URL 的页面。

你将组装一个完整页面:带品牌的页头、一排 KPI 卡片、一个图表区块和一张数据表——全部呈现在一个连贯的屏幕上。这就是你交给利益相关者并说“这是实时仪表盘”的那个成品。

端到端地思考。一个可部署的应用不只是好看;它有条理、易读、不言自明。完成本课后,你将拥有一个可以放进作品集的数据应用。让我们发布它吧。

操作说明

1

添加页面页头,其中包含应用标题“销售分析”的 h1。

提示: 使用:`<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">销售分析</h1></header>`。

这段代码写在哪里?

<!-- 在这里组装你的完整仪表盘 -->

写在第 11 行——在那条注释下方,接在你已经写好的代码后面。

2

使用响应式网格容器添加一排 KPI 卡片。

3

用带样式、颜色为 bg-purple-500 的柱状 div 添加一个图表区块。

4

添加一张近期订单数据表,完成整个仪表盘。

你的代码

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

实时预览

实时预览