本文档的目的是明确说明报表设计用户如何通过CSS重载场景报表在网页上的个性化呈现效果。
本文档中罗列出来的都是V6.6.3版本所支持的系统css class(以下简称class),请遵循我们的命名规范。

  • 场景工作表父节点className是”lcz-scene-wrapper”

本文档的面向读者有:报表设计人员,二次开发人员。
本文档的读者要有一定的CSS基础,尚未掌握该技能的读者可参考以下网站:CSS3

由于场景下各个子报表现在不是iframe引入,自定义样式会有冲突,解决方法是后台在自定义css前面统一加上实例的cacheId

场景工作表全局样式

工作表容器

/**
* 用户可自定义背景颜色、背景图片等样式;不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-scene-wrapper {
    background-color: rgba(207,207,207,0.7);
}

.lcz-scene-wrapper .lcz-content-wrapper {
}

.lcz-scene-wrapper .lcz-content-wrapper .lcz-sheet-content {
}

.lcz-scene-wrapper .lcz-content-wrapper .lcz-sheet-content .lcz-table-content {
}

场景标题栏

标题栏容器样式

/**
* 整个标题栏容器
* 用户可自定义背景颜色、背景图片等样式;不建议在此样式定义宽度、高度等改变布局的样式
*/
.lcz-scene-wrapper .lcz-scene-toolbar {
    background-color: #fff;
}

标题

/**
* 工具栏页码区域
* 用户可自定义背景颜色、背景图片、间距、字体等样式
*/
.lcz-scene-wrapper .lcz-scene-toolbar li.lcz-scene-title {
}

### 单元格
/**
* 单元格容器
* 用户可个性化配置整个控件的字体、背景等相关样式
*/
.lcz-scene-wrapper .lcz-content-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell {

}

控件样式

/**
* 字体颜色、大小
* 节点高度设置上下padding
*/
.lcz-scene-wrapper .lcz-tree-ctrl li a {

}

/**
* 复选框选中className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.checkbox_true_full{
}

/**
* 复选框选中触摸后的className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.checkbox_true_full_focus{
}

/**
* 复选框未选中触摸后的className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.checkbox_false_full_focus{
}

/**
* 复选框半选className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.checkbox_true_part{
}

/**
* 复选框半选触摸后的className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.checkbox_true_part_focus{
}

--------------------------------------------------------------------------------------

/**
* 单选框选中className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.radio_true_full{
}

/**
* 单选框选中触摸后的className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.radio_true_full_focus{
}

/**
* 单选框未选中className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.radio_false_full{
}

/**
* 单选框未选中触摸后的className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.radio_false_full_focus{
}

/**
* 单选框半选className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.radio_false_part{
}

/**
* 单选框半选触摸后的className
*/
.lcz-scene-wrapper .lcz-tree-ctrl li span.radio_false_part_focus{
}
作者:柳杨  创建时间:2023-09-09 18:29
最后编辑:柳杨  更新时间:2025-04-22 15:31