普通报表CSS自定义

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

• 普通报表父节点className是”lcz-report-wrapper”

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

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

报表全局样式

报表容器

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

纸张模式

/**
* 页区容器（按纸张模式显示时）
* 用户可自定义背景颜色、背景图片等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-paper-wrapper {
    background-color: #fff;
}

工具栏样式

工具栏容器样式

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

/**
* 工具栏左边区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-toolbar-wrapper .lcz-toolbar-left-container {
    background-color: #fff;
}

/**
* 工具栏右边区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-toolbar-wrapper .lcz-toolbar-right-container {
    background-color: #fff;
}

如果有报表要使用纸张模式，需增加lcz-paper-wrapper为根class的定义，如：

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

页码相关

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

/**
* 当前页样式（工具栏页码）
* 用户可自定义背景颜色、背景图片、间距、字体等样式
*/
.lcz-report-wrapper .lcz-toolbar-wrapper .lcz-page-content .lcz-page-num {
    color: #eee;
}

/**
* 总页数样式（工具栏页码）
* 用户可自定义背景颜色、背景图片、间距、字体等样式
*/
.lcz-report-wrapper .lcz-toolbar-wrapper .lcz-page-content .lcz-page-count {
    color: #eee;
    font-weight: bold;
    padding : 0 5px;
}

参数区域

/**
* 参数区域
* 用户可自定义背景颜色、背景图片等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-param-wrapper {
}

/**
* 参数标题
* 用户可自定义边框、字体等样式；
*/
.lcz-report-wrapper .lcz-param-wrapper .lcz-param-content .lcz-param-item .lcz-param-item-label {
    width: auto;
}

/**
* 查询按钮
* 用户可自定义背景颜色、背景图片、边框、字体等样式；
*/
.lcz-report-wrapper .lcz-param-wrapper button.lcz-btn-primary {
}

/**
* 重置按钮
* 用户可自定义背景颜色、背景图片、边框、字体等样式；
*/
.lcz-report-wrapper .lcz-param-wrapper button.lcz-btn-restore {
}

参数控件

/**
* 输入框
* 用户可自定义边框、字体等样式；
*/
.lcz-report-wrapper .lcz-param-wrapper .lcz-param-content .lcz-param-item .ant-input-affix-wrapper {

}

/**
* 下拉框
* 用户可自定义边框、字体等样式；
*/
.lcz-report-wrapper .lcz-param-wrapper .lcz-param-content .lcz-param-item .ant-select {

}

报表内容区域

单工作表

/**
* 报表内容区
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper {
}

/**
* 工作表集区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheets-container {
}

/**
* 工作表内容区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-wrapper {
}
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-wrapper .lcz-sheet-content {
}

/**
* 工作表表格区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-wrapper .lcz-table-content {
}

多工作表

常规布局

/**
* 报表内容区
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper {
}

/**
* tab Header区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-tabs-container  {
}

/**
* tab item区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-tabs-container .lcz-tab-item{
}

/**
* 工作表集区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheets-container {
}

/**
* 工作表内容区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content {
}

/**
* 工作表表格区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content .lcz-table-content {
}

主从布局

/**
* 报表内容区
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper {

}

/**
* 主工作表内容区
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-main-sheet-container {

}

/**
* tab Header区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-tabs-container {

}

/**
* tab item区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-tabs-container .lcz-tab-item {

}

/**
* 其他工作表集区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-other-sheets-container {

}

/**
* 工作表内容区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content {

}

/**
* 工作表表格区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content .lcz-table-content {

}

纵向布局

/**
* 报表内容区
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper {

}

/**
* 工作表集区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheets-container {

}

/**
* 工作表内容区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content {

}

/**
* 工作表表格区域
* 用户可自定义背景颜色、背景图片、间距等样式；不建议在此样式定义高度、宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content .lcz-table-content {

}

底部翻页工具栏

/**
* 翻页工具栏
* 用户可自定义背景颜色、背景图片、间距、高度等样式；不建议在此样式定义宽度等改变布局的样式
*/
.lcz-report-wrapper .lcz-page-container  {

}

/**
* 翻页区按钮
* 用户可自定义背景颜色、背景图片、间距、高度、宽度等样式；
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-page-container .layui-laypage a {
    padding: 6px 20px;
}

.lcz-report-wrapper .lcz-content-wrapper .lcz-page-container .layui-laypage span {
    padding: 6px 20px;
}

/**
* 上一页
* 用户可自定义背景颜色、背景图片、间距、高度、宽度等样式；
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-page-container .layui-laypage a.layui-laypage-prev {
}

/**
* 下一页
* 用户可自定义背景颜色、背景图片、间距、高度、宽度等样式；
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-page-container .layui-laypage a.layui-laypage-next {
}

/**
* 选中页码
* 用户可自定义背景颜色、背景图片、间距、高度、宽度等样式
*/
.lcz-report-wrapper .lcz-content-wrapper .lcz-page-container .layui-laypage span.layui-laypage-curr {
    background-color: #f00;
}

单元格样式

/**
* 变脏样式
* 用户可个性化配置整个控件的字体、背景等相关样式
*/
.lcz-report-wrapper .lcz-sheet-content .lcz-cell-modified {

}

/**
* 单元格值错误样式
* 用户可个性化配置整个控件的字体、背景等相关样式
*/
.lcz-report-wrapper .lcz-sheet-content .lcz-cell-error {

}

控件样式

单选组

/**
 *未选择按钮的样式（单选组控件）
 */
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item .lcz-select-ctrl li {
    height: 30px !important;
    line-height: 30px !important;
    margin: 3px !important;
    font-size:14px !important;
    color:#479b58 !important;
    border-radius: 10px !important;
    background-color: rgb(158,222,162) !important;
}
/**
 * 选择按钮的样式（单选组控件）
 */
.lcz-report-wrapper .lcz-content-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item .lcz-select-ctrl li.selected {
    border-radius: 10px !important;
    background-color: #63c968 !important;
    color: #fff !important;
    font-size:14px !important;
}

短信验证码

/**
* 可个性化配置输入框的字体、边距等相关样式
*/
.lcz-report-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item .lcz-msg-ctrl input {

}

/**
* 可个性化配置发送按钮的字体、背景色等相关样式
*/
.lcz-report-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item .lcz-msg-ctrl button {
    background-color: #f2a304;
}
.lcz-report-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item .lcz-msg-ctrl button:hover {
    background-color: #f6a504;
}

按钮

/**
* 可个性化配置发送按钮的字体、背景色等相关样式
*/
.lcz-report-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item button.lcz-btn-ctrl {
    background-color: #1890ff;
}
.lcz-report-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item button.lcz-btn-ctrl:hover {
    background-color: #50a3f0;
}
.lcz-report-wrapper .lcz-sheet-content .lcz-table-content .lcz-table-cell .lcz-control-item button.lcz-btn-ctrl span {
    color: #fff;
}