制作可视化报告 > 报告设计

1.概述

1.1 应用场景

用户在制作同类报告时，可以制作多个页签页进行展示，方便查看与管理。

1.2 功能介绍

报告布局为自由布局时，支持一个报告设置多页签页面，可以切换页签页进行查看。

2.多页签页的设置

1)在报告自由布局下，取消隐藏的页签可以进行页签相关设置。

db_labels_setting

2)设置PC端页签样式。

PC端页签样式包括页签位置、选中页签、未选中页签、页签栏背景、页签下划线。

页签	设置
页签位置	设备类型为PC端，页签位置位置支持顶部、底部，默认为顶部；设备类型为移动端，页签仅支持顶部。 ➢说明：当PC端的页签位置设置为底部时，移动端的页签会在顶部显示。
选中页签与未选中页签	在PC端页签的背景色，页签标题的字体、字号大小、加粗、斜体、下划线、删除线和颜色。
页签栏背景与页签下划线	PC端页签栏背景和页签下划线的颜色。

页签

设置

页签位置

设备类型为PC端，页签位置位置支持顶部、底部，默认为顶部；设备类型为移动端，页签仅支持顶部。

➢说明：

当PC端的页签位置设置为底部时，移动端的页签会在顶部显示。

选中页签与未选中页签

在PC端页签的背景色，页签标题的字体、字号大小、加粗、斜体、下划线、删除线和颜色。

页签栏背景与页签下划线

PC端页签栏背景和页签下划线的颜色。

PC端页签位置设置如下：

db_labels_style_setting

效果查看：

db_labels_style_result

3)设置移动端页签样式。

移动端页签样式包括顶部页签样式、联排按钮样式、滑动样式。在移动端页签样式的下拉列表中选中相应的样式后，点击“编辑”可以进入对应样式的自定义设置页面并实时预览。

移动端页签样式 ➢说明：请先选择页签位置为顶部，再设置移动端特有的页签样式。	顶部页签样式	页签标题：支持自适应和宽度固定两种方式。自适应宽度按页签文字内容自适应；固定宽度按设置的宽度显示页签，页签标题显示不全时显示省略号。
		选中页签和未选中页签：支持设置背景色、字体、字号、加粗、斜体、下划线、删除线、字体颜色。
		页签栏背景和页签下划线：支持设置颜色。
		支持滑动切换：可以使用左右手势切换到左右页签。
	联排按钮样式 ➢说明：联排按钮样式不支持滑动切换。	填充距离：可以设置距离页面上下左右的距离。
		选中页签和未选中页签：支持设置页签标题背景色、字体、字号、加粗、斜体、下划线、删除线、字体颜色。页签标题显示不全时显示省略号。页签过多超出移动端页面时不显示标题，页签也不会完全显示。
		边框：可以设置边框样式、线的样式和线的颜色。
	滑动样式 ➢说明：门户不支持滑动样式。	标签：支持设置背景色、字体、字号、加粗、斜体、下划线、删除线、字体颜色。
	滑动样式 ➢说明：门户不支持滑动样式。	选中原点和未选中原点：支持设置颜色。