-
-
yangm 数据达人Lv4
发表于2022-4-26 10:32
楼主
在分析表中，tab页是应用比较广泛的，但是由于不同报表风格的问题，导致tab页样式不能满足所有场景的使用。
系统中提供了一些样式模板，可以一键切换，入口如下图：
可以在系统内置的样式中选择合适的样式。
如果系统提供的样式也不能满足日常需要改怎么处理呢？
在报表属性》报表自定义样式中添加脚本：
复制代码根据不同属性设置不同样式，位置，大小，配色。
脚本效果如下：
系统中提供了一些样式模板，可以一键切换，入口如下图：
可以在系统内置的样式中选择合适的样式。
如果系统提供的样式也不能满足日常需要改怎么处理呢？
在报表属性》报表自定义样式中添加脚本：
- /* 设置标签页样式，
- 其中类选择器xtab-header-blue3不是固定的，会随着标签页风格而改变，格式为：xtab-header-标签页风格名称，
- 各个标签页风格如下：
- 默认：default
- 七彩文鸟：sevenbird
- 蓝色琉璃：blueglaze
- 灰色匣子：gray
- 蓝色妖姬：blue
- 绿叶精灵：green
- 黄金甲：yellow
- 魔法盒：green2
- 新绿叶精灵：green3
- 新绿叶精灵2：green4
- 新绿叶精灵3：green5
- 蓝色妖姬2：blue2
- 蓝色妖姬3：blue3
- 蓝色按钮组：bluebtngroup
- 新黄金甲：yellow2
- 热点黄：yellow3
- 热点黄2：yellow4
- */
- /*设置活动页签的下边框*/
- .xtabctrl .xtab-header-blue3 .xtab-header-active {
- border-bottom: 0px;
- }
- /* 设置标签页选中页签渐变 */
- .xtabctrl .xtab-header-blue3 .xtab-header-active .xtab-header-left {
- background-image: linear-gradient(-270deg, #577EFF 0%, #2A30EC 100%);
- border-radius: 0px;
- border-width:0px;
- }
- /* 设置活动页面字体颜色*/
- .xtabctrl .xtab-header-blue3 .xtab-header-active .xtab-header-center {
- color: #ffffff;
- height: 39px;
- }
- /*设置选中字体不加粗*/
- .xtabctrl .xtab-header-blue3 .xtab-header-active .xtab-header-text {
- font-weight: normal;
- }
- /* 设置非活动页签字体颜色*/
- .xtabctrl .xtab-header-blue3 .xtab-header-center {
- color: #49B3F8;
- }
- /* 设置非活动页签背景颜色*/
- .xtabctrl .xtab-header-blue3 .xtab-header-left {
- background-color: transparent;
- border-width: 0px;
- }
- .xtabctrl .xtab-header-blue3 .xtab-header-text {
- font-weight: normal;
- }
- /*设置标签页头部分的下边框*/
- .xtabctrl .xtab-header-blue3 {
- border-bottom: 3px solid #4763ed;
- }
脚本效果如下：
