---
order: 3
navTitle: 复杂页面（45分钟）
---
# 企业全景画像

> 预计用时：45分钟

本课程以**企业全景画像页面**为例，介绍SuperPage页面布局逻辑和常用的布局方式以及交互的应用等内容。

![全景画像](./images/2024-05-15-15-05-57.png)

:::tip 学习小贴士\
点击链接跳转观看学习视频：[企业全景画像](https://www.bilibili.com/video/BV1L44y1x7Sp?p=4\&t=2.2)\
可以按照下方[课程讲解](#course)的分解步骤进行学习，学习完之后别忘了完成练习哦！
:::

## 学习目标{#target}

学习本课程可以掌握到如下知识点：

- 层层递进分析页面的布局逻辑
- SuperPage常用的布局方式
- 打开链接交互以及交互中参数的传递

学习完本课程后，即可掌握到一个基础网页的基本制作。本课程将以企业全景画像网页为例来展开学习，企业全景画像展示了如下信息：
![全景画像](./images/2021-12-06-10-12-33.gif)

- 企业全景画像一共分为了上下两部分
- 上部分主要展示的是企业名称信息以及注册信息等，上部分的布局能够很好的体现SuperPage布局中的各种嵌套
- 下部分主要利用标签页切换显示基本信息、许可信息、警示信息
- 可以通过点击上节课制作出的[企业信息分类表](./企业信息分类表.md)中的企业名称，跳转到对应企业的全景画像页面

## 课程讲解{#course}

下面一起学习制作**企业全景画像**页面，本课程从零开始一步步介绍如何制作企业全景画像页面，建议在学习过程中跟着步骤练习操作。

- **（02:19）引入企业基本信息表**：更多布局的设置说明，可查看文档[布局](../../../guide/app/superpage/design/layout.md)
- **（03:14）名称信息部分制作**
- **（08:20）注册信息部分制作**
- **（11:01）页面下半部分布局**
- **（11:28）标签页制作**：更多标签页的设置说明，可查看文档[标签页](../../../guide/app/superpage/components/navigation/tabbar.md)
- **（12:35）基本信息部分制作**：更多多页面板的设置说明，可查看文档[多页面板](../../../guide/app/superpage/components/layout/panelbook.md)
- **（15:57）切换多页面板**：更多切换多页面板交互的设置说明，可查看文档[切换多页面板](../../../guide/app/superpage/design/action/switch-panelbook.md)
- **（16:31）页面美化**
- **（19:29）过滤模型表数据以及打开链接交互**更多参数与打开链接交互的设置说明，可查看文档[参数](../../../guide/data-viz/dash/design/data/param.md)、[打开链接](../../../guide/app/superpage/design/action/linkto.md)

## 总结与练习{#practice}

到这里本节课程就结束了，通过上面的学习请完成练习：

1. 按照视频制作企业全景画像页面，如下步骤需更新做法：
   1. **名称信息部分制作**中的经营状态的样式调整，直接采用风格中`标签2`制作。见图1.1
   2. **注册信息部分制作**的整体布局采用**纵向布局**嵌套多个**横向布局**构成。见图1.2
   3. **页面美化**中的将标题与内容的样式存风格，应用风格完成其他文本的样式设置。见图1.3

| 图1.1 | 图1.2 | 图1.3 |
| ---| --- | --- |
| ![1](./images/2021-12-13-17-26-25.png) | ![2](./images/2021-12-13-17-27-58.png) | ![3](./images/2021-12-13-17-29-21.png) |

2. 扩展文档学习：
   1. [应用设计器](../../../guide/app/app-designer.md)：学完这篇文档后，请描述如何新建一个SuperPage页面
   2. [布局](../../../guide/app/superpage/design/layout.md)：学完这篇文档后，请练习[卡片式布局](../../../guide/app/superpage/design/layout.md#card)
   3. [数据集类型](../../../guide/data-viz/dash/design/datasource.md#dataset-type)：学完这篇文档后，请简述[引入企业基本信息表](#引入企业基本信息表)的步骤3中为何将数据集类型设置为单行
   4. [风格](../../../guide/app/superpage/design/style/README.md#style)：学习完这篇文档后，请简述练习1.2中为什么将样式存风格，以及什么情况下会更倾向于将样式存风格
   5. [标签页](../../../guide/app/superpage/components/navigation/tabbar.md)：学习完这篇文档后，请列举标签页的常见用法（至少两种）
   6. [多页面板](../../../guide/app/superpage/components/layout/panelbook.md)、 [切换多页面板](../../../guide/app/superpage/design/action/switch-panelbook.md)：学习完这两篇文档后，请实现通过`上一页`与`下一页`的**按钮**对应切换多页面板的上一页与下一页
   7. [参数](../../../guide/data-viz/dash/design/data/param.md)：学习完这篇文档后，请总结参数的用途（至少两种）
   8. [打开链接](../../../guide/app/superpage/design/action/linkto.md)：学习完这篇文档后，请简述该交互中如何传递参数