组装你的可部署仪表盘
中级~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
1
2
3
4
5
6
7
8
9
10
11
12
13
用 ViBot 来 Vibe0 / 12 条免费消息
描述你想为这一步构建的内容,我来编写代码——然后点击「应用」把它放进你的编辑器。 本步骤:添加页面页头,其中包含应用标题“销售分析”的 h1。
实时预览
实时预览