# 变更记录
| 产品版本 | 更新内容 | 更新日期 |
| --- | --- | --- |
| V7.0.1 | 增加了全局样式个性化扩展功能，开放各类Class以满足UI定制化需求 | 2024-10-24 |
## 一、功能概述
1、通过前端全局样式个性化扩展功能，支持定制个性化页面，满足不同客户对独特页面风格的追求，打造与众不同的视觉效果，提升产品使用体验。
2、该功能基于平台多个控件开放了大量Class（即页面Class埋点），基于这些Class可以编写web页面标准CSS样式脚本，从而达成修改或覆盖标准控件外观样式等内容的目的（包括字体样式、颜色、背景、边框等内容，理论上CSS支持的都可以修改）。
**名词说明**：
1、"Class"即HTML元素的class属性，是一个字符串，可以给HTML元素指定一个或多个类名，这些类名是由开发者定义的，用于标识元素的外观样式、布局、动画等内容
2、"CSS"（层叠样式表，Cascading Style Sheets）是一种用于控制网页样式和布局的语言，CSS内容放到Class中即可生效并作用于对应HTML页面元素
## 二、适用范围
该功能适用于现场二开做全局样式个性化扩展，即想做UI定制。
本次主要开放了**17**个常用控件Class，控件列表如下（具体"开放Class列表"见'**章节四**'）：
| **类型** | **开放控件** |
| --- | --- |
| 控件 | 老版首页页签 |
| | 按钮 |
| | 工具栏 |
| | 标签 |
| | 字体图标 |
| | 锚点 |
| | 搜索 |
| 字段 | 文本/数字/...等 |
| 容器 | 高级面板 |
| | 高级面板工具栏 |
| | flex容器 |
| | 字段布局容器 |
| | 卡片布局容器 |
| | 附件面板 |
| | 新门户平铺菜单 |
| | 对话框 |
| | 顶部提示语 |
**备注：后续按需要会规划并开放更多Class**
## 三、前置条件
了解常用web页面CSS样式编写方法（比如修改前景色等），有助于使用该功能。学习传送门 [CSS教程](/tolink?target=https%3A%2F%2Fwww.w3school.com.cn%2Fcss%2Findex.asp)
不同的CSS样式属性可能存在浏览器兼容性问题（特别是IE浏览器），**如要在不同浏览器上同时生效，请保证编写样式的兼容性**。
## 四、获取和使用 Class 信息
### 1、开放Class命名规范
开放Class命名都以"**kd-cq-**"打头，其组织层级结构为：根节点 - 表单 - 容器/控件/字段
如下截图：
### 2、查找已开放的Class方式
#### （1）开放Class列表
在Class列表中可以直接查看当前已对外开放的所有控件及对应Class名称
如果要确认具体修改哪一个Class还需要结合自身的需求，明确要修改的具体控件及控件区域（此时可以利用浏览器查看控件对应DOM结构信息，查找Class名称）
【**开放Class列表**】 **去除Class左右注释符号"/* */"即可直接拿来使用**
```
/* 控件 start */
/* 标签 */
/* .kd-cq-root .kd-cq-control.kd-cq-label {} */
/* .kd-cq-root .kd-cq-control.kd-cq-label.kd-cq-label-type-border {} */
/* 标签 */
/* 侧导航 */
/* .kd-cq-root .kd-cq-control.kd-cq-treemenu .kd-cq-treemenu-first-level {} */
/* .kd-cq-root .kd-cq-control.kd-cq-treemenu .kd-cq-treemenu-first-level .kd-cq-treemenu-first-level-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-treemenu-popper {} */
/* .kd-cq-root .kd-cq-control.kd-cq-treemenu-popper .kd-cq-treemenu-second-level {} */
/* .kd-cq-root .kd-cq-control.kd-cq-treemenu-popper .kd-cq-treemenu-third-level {} */
/* .kd-cq-root .kd-cq-control.kd-cq-treemenu-popper .kd-cq-treemenu-third-level .kd-cq-treemenu-third-level-title {} */
/* .kd-cq-root .kd-cq-control.kd-cq-treemenu-popper .kd-cq-treemenu-third-level .kd-cq-treemenu-third-level-item {} */
/* 侧导航 */
/* 穿梭框 */
/* .kd-cq-root .kd-cq-control.kd-cq-transfer {} */
/* .kd-cq-root .kd-cq-control.kd-cq-transfer .kd-cq-transfer-list {} */
/* .kd-cq-root .kd-cq-control.kd-cq-transfer .kd-cq-transfer-list .kd-cq-transfer-list-header {} */
/* .kd-cq-root .kd-cq-control.kd-cq-transfer .kd-cq-transfer-list .kd-cq-transfer-list-filter-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-transfer .kd-cq-transfer-list .kd-cq-transfer-list-content {} */
/* .kd-cq-root .kd-cq-control.kd-cq-transfer .kd-cq-transfer-list .kd-cq-transfer-list-content .kd-cq-transfer-list-content-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-transfer .kd-cq-transfer-list .kd-cq-transfer-list-content .kd-cq-transfer-list-content-item .kd-cq-transfer-list-content-item-text {} */
/* 穿梭框 */
/* 页签 */
/* .kd-cq-root .kd-cq-control.kd-cq-tabs {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tabs .kd-cq-tabs-tab {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tabs.kd-cq-tabs-virtual-tab {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tabs.kd-cq-tabs-type-1 {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tabs.kd-cq-tabs-type-1 .kd-cq-tabs-tab {} */
/* .kd-cq-root .kd-cq-tabs-virtual-tab-drop-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tabs .kd-cq-container-toolbar {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tabs .kd-cq-container-toolbar .kd-cq-container-toolbar-item {} */
/* 页签 */
/* 树 */
/* .kd-cq-root .kd-cq-control.kd-cq-tree {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tree .kd-cq-tree-treenode {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tree .kd-cq-tree-treenode.kd-cq-tree-treenode-selected {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tree .kd-cq-tree-treenode.kd-cq-tree-treenode-selected .kd-cq-tree-treenode-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tree .kd-cq-tree-treenode .kd-cq-tree-treenode-content {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tree .kd-cq-tree-treenode .kd-cq-tree-treenode-empty-placeholder {} */
/* 树 */
/* F7已选列表 */
/* .kd-cq-root .kd-cq-control.kd-cq-f7-selected {} */
/* .kd-cq-root .kd-cq-control.kd-cq-f7-selected .kd-cq-f7-selected-header {} */
/* .kd-cq-root .kd-cq-control.kd-cq-f7-selected .kd-cq-f7-selected-item-text {} */
/* F7已选列表 */
/* 按钮 */
/* .kd-cq-root .kd-cq-control.kd-cq-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn .kd-cq-btn-image {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn .kd-cq-toolbar-group .kd-cq-toolbar-group-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn .kd-cq-toolbar-group.kd-cq-toolbar-group-lock .kd-cq-toolbar-group-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn.kd-cq-tabs-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn.kd-cq-advcon-btn {} */
/* 按钮 */
/* 消息弹窗 */
/* .kd-cq-root .kd-cq-control.kd-cq-message {} */
/* .kd-cq-root .kd-cq-control.kd-cq-message .kd-cq-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-message.kd-cq-message_type_1 .kd-cq-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-message .kd-cq-message-confirm-tip {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-message_type_0 .kd-cq-message-dot {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-message_type_0 .kd-cq-message-title {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-message_type_0 .kd-cq-message-img {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-message_type_0 .kd-cq-message-text {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-confirm-error .kd-cq-message-dot {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-confirm-error .kd-cq-message-title {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-confirm-error .kd-cq-message-img {} */
/* .kd-cq-root .kd-cq-confirm.kd-cq-confirm-error .kd-cq-message-text {} */
/* 消息弹窗 */
/* 表格 */
/* .kd-cq-root .kd-cq-control.kd-cq-table {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-filtered-valid-tip {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-toolbar {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-toolbar .kd-cq-pagination {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-toolbar .kd-cq-pagination .kd-pagination-current-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-toolbar .kd-pagination-options-dropdown {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .kd-table-cell {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .kd-table-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content, */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .ag-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .kd-table-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content .kd-city-picker-content-search, */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .ag-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content .kd-city-picker-content-search {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .kd-table-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content .kd-city-picker-content-search .kd-city-picker-content-search-input, */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .ag-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content .kd-city-picker-content-search .kd-city-picker-content-search-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .kd-table-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-placeholder, */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .ag-cell .kd-cq-city .kd-city-picker-wrapper .kd-city-picker-placeholder {} */
/* .kd-cq-root .kd-cq-control.kd-cq-table .kd-cq-table-content .kd-table-cell .kd-cq-base-data-text {} */
/* 表格 */
/* 列表 */
/* .kd-cq-root .kd-cq-control.kd-cq-bill-list .kd-cq-card-toolbar.kd-cq-toolbar {} */
/* .kd-cq-root .kd-cq-control.kd-cq-bill-list .kd-cq-card-toolbar.kd-cq-toolbar .kd-cq-pagination {} */
/* 列表 */
/* 列表过滤 */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-header {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-header .kd-cq-querypanel-header-title {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-header .kd-cq-querypanel-header-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content .kd-cq-querypanel-title {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content .kd-cq-querypanel-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content .kd-cq-date-range {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content .kd-cq-querypanel-item .kd-cq-querypanel-item-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content .kd-cq-querypanel-item .kd-cq-querypanel-item-icon {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content .kd-cq-querypanel-compact-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-querypanel .kd-cq-querypanel-content .kd-cq-querypanel-compact-item .kd-cq-querypanel-compact-item-text {} */
/* 列表过滤 */
/* 报表过滤 */
/* .kd-cq-root .kd-cq-control.kd-cq-reportpanel {} */
/* .kd-cq-root .kd-cq-control.kd-cq-reportpanel .kd-cq-reportpanel-header {} */
/* .kd-cq-root .kd-cq-control.kd-cq-reportpanel .kd-cq-reportpanel-header .kd-cq-reportpanel-header-title {} */
/* .kd-cq-root .kd-cq-control.kd-cq-reportpanel .kd-cq-reportpanel-header .kd-cq-reportpanel-header-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-reportpanel .kd-cq-reportpanel-bottom {} */
/* .kd-cq-root .kd-cq-control.kd-cq-reportpanel .kd-cq-reportpanel-bottom .kd-cq-reportpanel-title {} */
/* .kd-cq-root .kd-cq-control.kd-cq-reportpanel .kd-cq-reportpanel-bottom .kd-cq-reportpanel-item {} */
/* 报表过滤 */
/* 搜索控件 */
/* .kd-cq-root .kd-cq-control.kd-cq-search-box {} */
/* .kd-cq-root .kd-cq-control.kd-cq-search-box .kd-cq-search-box-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-search-box .kd-cq-search-box-label {} */
/* .kd-cq-root .kd-cq-control.kd-cq-search-box.kd-cq-search-box-autocomplete {} */
/* .kd-cq-root .kd-cq-control.kd-cq-search-box.kd-cq-search-box-autocomplete .kd-cq-search-box-input {} */
/* 搜索控件 */
/* 附件控件 */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-header {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-header .kd-cq-attachment-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-title {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-extension-name {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-header .kd-cq-attachment-upload-icon */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-header .kd-cq-attachment-download-icon */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-icon {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-name {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-size {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attchment-uploadProperty {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-uploader {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-upload-time {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-btn-area {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-btn-area .kd-cq-attachment-item-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-preview-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-download-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-rename-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-delete-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-custom-btn {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list.kd-cq-attachment-img-type {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list.kd-cq-attachment-img-type .kd-cq-attachment-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list.kd-cq-attachment-img-type .kd-cq-attachment-item .kd-cq-attachment-item-img-name {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-header-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-upload-tip {} */
/* 附件控件 */
/* 通用过滤 */
/* .kd-cq-root .kd-cq-control.kd-cq-commonfilter {} */
/* .kd-cq-root .kd-cq-control.kd-cq-commonfilter .kd-cq-commonfilter-header {} */
/* .kd-cq-root .kd-cq-control.kd-cq-commonfilter .kd-cq-commonfilter-body {} */
/* .kd-cq-root .kd-cq-control.kd-cq-commonfilter .kd-cq-commonfilter-body .kd-cq-commonfilter-row {} */
/* .kd-cq-root .kd-cq-control.kd-cq-commonfilter .kd-cq-commonfilter-body .kd-cq-commonfilter-row .kd-cq-commonfilter-cell {} */
/* .kd-cq-root .kd-cq-control.kd-cq-commonfilter .kd-cq-commonfilter-body .kd-cq-commonfilter-row.kd-cq-commonfilter-row-operation {} */
/* 通用过滤 */
/* 图片列表 */
/* .kd-cq-root .kd-cq-control.kd-cq-image-list {} */
/* 图片列表 */
/* 步骤条 */
/* .kd-cq-root .kd-cq-control.kd-cq-steps {} */
/* .kd-cq-root .kd-cq-control.kd-cq-steps-end {} */
/* .kd-cq-root .kd-cq-control.kd-cq-steps 。kd-cq-steps-arrow-top {} */
/* .kd-cq-root .kd-cq-control.kd-cq-steps 。kd-cq-steps-arrow-bottom {} */
/* 步骤条 */
/* ListBox */
/* .kd-cq-root .kd-cq-control.kd-cq-listbox {} */
/* .kd-cq-root .kd-cq-control.kd-cq-listbox .kd-cq-listbox-list {} */
/* .kd-cq-root .kd-cq-control.kd-cq-listbox .kd-cq-listbox-list .kd-cq-listbox-item {} */
/* ListBox */
/* 首页方案 */
/* .kd-cq-root .kd-cq-control.kd-cq-home-page-scheme {} */
/* .kd-cq-root .kd-cq-control.kd-cq-home-page-scheme .kd-cq-home-page-scheme-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-home-page-scheme .kd-cq-home-page-scheme-add-card {} */
/* 首页方案 */
/* 富文本 */
/* .kd-cq-root .kd-cq-control.kd-cq-rich-text {} */
/* 富文本 */
/* 旧版首页导航 */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-static {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-static .kd-ca-homepage-tab-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-static .kd-ca-homepage-tab-item-active {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-static .kd-ca-homepage-tab-item-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-divider {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic kd-ca-homepage-tab-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic .kd-ca-homepage-tab-item-active {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic .kd-ca-homepage-tab-item-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic .kd-ca-homepage-tab-item-icon {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic .kd-ca-homepage-tab-item-icon .kd-ca-homepage-tab-item-icon-close {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic .kd-ca-homepage-tab-item-icon .kd-ca-homepage-tab-item-icon-lock {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic .kd-ca-homepage-tab-item-icon .kd-ca-homepage-tab-item-icon-unlock {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic kd-ca-homepage-tab-pre {} */
/* .kd-cq-root .kd-cq-control.kd-cq-homepage-tab .kd-ca-homepage-tab-unstatic .kd-ca-homepage-tab-next {} */
/* 旧版首页导航 end */
/* 工具栏 */
/* .kd-cq-root .kd-cq-control {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn.kd-cq-toolbar-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn.kd-cq-toolbar-item .kd-cq-toolbar-group-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn.kd-cq-toolbar-item .kd-cq-toolbar-group-down {} */
/* .kd-cq-root .kd-cq-control.kd-cq-btn.kd-cq-toolbar-item .kd-cq-btn-arrow {} */
/* 工具栏 */
/* 控件 end */
/* 容器 start */
/* .kd-cq-root .kd-cq-container {} */
/* .kd-cq-root .kd-cq-container {} .kd-cq-collapse-summary */
/* .kd-cq-root .kd-cq-container {} .kd-cq-collapse-summary .kd-cq-control.kd-cq-label */
/* .kd-cq-root .kd-cq-container.kd-cq-flexpanel {} */
/* .kd-cq-root .kd-cq-container.kd-cq-fieldsetpanel {} */
/* .kd-cq-root .kd-cq-container.kd-cq-attachmentpanel {} */
/* .kd-cq-root .kd-cq-container.kd-cq-advcon {} */
/* .kd-cq-root .kd-cq-container .kd-cq-container-title {} */
/* .kd-cq-root .kd-cq-container.kd-cq-advcon .kd-cq-container-title {} */
/* .kd-cq-root .kd-cq-container.kd-cq-advcon .kd-cq-collapse-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-advcon .kd-cq-full-screen-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-advcon .kd-cq-exit-full-screen-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-advcon .kd-cq-btn {} */
/* .kd-cq-root .kd-cq-container.kd-cq-flexpanel .kd-cq-container-title {} */
/* .kd-cq-root .kd-cq-container.kd-cq-flexpanel .kd-cq-collapse-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-flexpanel .kd-cq-full-screen-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-flexpanel .kd-cq-exit-full-screen-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-fieldsetpanel .kd-cq-container-title {} */
/* .kd-cq-root .kd-cq-container.kd-cq-fieldsetpanel .kd-cq-collapse-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-fieldsetpanel .kd-cq-full-screen-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-fieldsetpanel .kd-cq-exit-full-screen-icon {} */
/* .kd-cq-root .kd-cq-container.kd-cq-cardflexpanel .kd-cq-collapse-icon {} */
/* 容器 end */
/* 超链接 */
/* .kd-cq-root .kd-cq-hyperlink {} */
/* 超链接 end*/
/* 字段 start */
/* .kd-cq-root .kd-cq-field {} */
/* .kd-cq-root .kd-cq-field.kd-cq-field-layout-v {} */
/* .kd-cq-root .kd-cq-field.kd-cq-field-layout-h {} */
/* .kd-cq-root .kd-cq-field.kd-cq-field-with-title {} */
/* .kd-cq-root .kd-cq-field .kd-cq-field-title-wrap {} */
/* .kd-cq-root .kd-cq-field .kd-cq-field-value-wrap {} */
/* .kd-cq-root .kd-cq-field .kd-cq-field-value-wrap .kd-cq-label {} */
/* .kd-cq-root .kd-cq-field .kd-cq-field-value-wrap .kd-cq-input {} */
/* .kd-cq-root .kd-cq-field .kd-cq-field-value-wrap .kd-cq-select {} */
/* .kd-cq-root .kd-cq-field .kd-cq-field-value-wrap .kd-cq-select .kd-cq-select-arrow-icon {} */
/* .kd-cq-root .kd-cq-field .kd-cq-field-value-wrap .kd-cq-select .kd-cq-select-close-icon {} */
/* .kd-cq-root .kd-cq-field {} .kd-cq-field-valid-tip */
/* .kd-cq-root .kd-cq-field.kd-cq-label {} */
/* .kd-cq-root .kd-cq-field.kd-cq-checkbox {} */
/* .kd-cq-root .kd-cq-field.kd-cq-mulcombo {} */
/* .kd-cq-root .kd-cq-field.kd-cq-mulcombo {} .kd-cq-select-label */
/* .kd-cq-root .kd-cq-field.kd-cq-cascademenu {} */
/* .kd-cq-root .kd-cq-field.kd-cq-geographic {} */
/* .kd-cq-root .kd-cq-field.kd-cq-address {} */
/* .kd-cq-root .kd-cq-field.kd-cq-city {} */
/* .kd-cq-root .kd-cq-field.kd-cq-city .kd-cq-field-value-wrap {} */
/* .kd-cq-root .kd-cq-field.kd-cq-city .kd-cq-field-value-wrap .kd-cq-city-addition-info {} */
/* .kd-cq-root .kd-cq-field.kd-cq-radio {} */
/* .kd-cq-root .kd-cq-field.kd-cq-picture {} */
/* .kd-cq-root .kd-cq-field.kd-cq-picture .kd-cq-upload-tip {} */
/* .kd-cq-root .kd-cq-field.kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content {} */
/* .kd-cq-root .kd-cq-field.kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content .kd-city-picker-content-search {} */
/* .kd-cq-root .kd-cq-field.kd-cq-city .kd-city-picker-wrapper .kd-city-picker-content .kd-city-picker-content-search .kd-city-picker-content-search-input {} */
/* .kd-cq-root .kd-cq-field.kd-cq-city .kd-city-picker-wrapper .kd-city-picker-placeholder {} */
/* .kd-cq-root .kd-cq-field.kd-cq-combo .kd-cq-combo-selected {} */
/* 字段 end */
/* 弹出的下拉面板 */
/* .kd-cq-root .kd-cq-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-hide {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type .kd-cq-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type .kd-cq-dropdown-menu-item-input {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-advcon-toolbar-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-advcon-toolbar-dropdown .kd-cq-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-toolbar-more-dropdown .kd-cq-dropdown-menu-item .kd-cq-dropdown-menu-item-more {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-toolbar-more-dropdown .kd-cq-dropdown-menu-item .kd-cq-dropdown-menu-item-custom {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-select-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-select-dropdown .kd-cq-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-select-dropdown .kd-cq-dropdown-menu-item.kd-cq-dropdown-bottom-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-search-result-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-search-result-dropdown .kd-cq-dropdown-header {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-tabs-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-tabs-dropdown .kd-cq-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-time-range-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-time-range-dropdown .kd-cq-btn {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-basedata-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-basedata-dropdown.kd-cq-basedata-enum-type-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-basedata-dropdown .kd-cq-dropdown-menu-title {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-basedata-dropdown .kd-cq-dropdown-menu-interaction {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-mullangtext-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-mullangtext-dropdown .kd-cq-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-mullangtext-dropdown .kd-cq-dropdown-menu-item .kd-cq-dropdown-menu-item-title {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-mullangtext-dropdown .kd-cq-dropdown-menu-item .kd-cq-dropdown-menu-item-input {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-pagination-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-pagination-dropdown .kd-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-table-header-filter-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-table-header-filter-dropdown .kd-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-table-header-filter-dropdown .kd-cq-dropdown-menu-title {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-table-header-filter-dropdown .kd-dropdown-menu-input {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-transfer-list-filter-input {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-empty-select-popup {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-listfilter-setting-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-date-picker-calendar-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-date-picker-time {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-date-picker-time-header {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-date-picker-month {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-date-picker-year {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-date-picker-header {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-date-picker-footer {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-date-type .kd-cq-calendar-date-range {} */
/* .kd-cq-root .kd-cq-dropdown .kd-cq-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-tree-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-theme-editor-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-theme-editor-dropdown .kd-dropdown-menu-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-admindivision-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-tile-search-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-homepagescheme-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-search-result-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-dropdown-select-type.kd-cq-telephone-dropdown {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-city-dropdown .kd-city-picker-dropdown-common {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-city-dropdown .kd-tabs .kd-tabs-navs .kd-tabs-tab-wrap .kd-tabs-tab-list .kd-tab-pane {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-city-dropdown .kd-city-picker-list .kd-city-picker-list-item {} */
/* .kd-cq-root .kd-cq-dropdown.kd-cq-city-dropdown .kd-city-picker-dropdown-empty {} */
/* 弹出的下拉面板 */
/* 帮助文本浮窗 */
/* .kd-cq-root .kd-cq-tooltip {} */
/* 帮助文本浮窗 */
/* 消息提示 */
/* .kd-cq-root .kd-cq-notification {} */
/* .kd-cq-root .kd-cq-notification.kd-cq-validate-notification {} */
/* .kd-cq-root .kd-cq-notification .kd-cq-notification-content {} */
/* .kd-cq-root .kd-cq-notification .kd-cq-notification-content .kd-cq-notification-content-text {} */
/* 消息提示 */
/* 右键菜单 */
/* .kd-cq-root .kd-cq-context-menu {} */
/* .kd-cq-root .kd-cq-context-menu .kd-cq-context-menu-item {} */
/* 右键菜单 */
/* 弹出面板 */
/* .kd-cq-root .kd-cq-popup.kd-cq-attachment-tips-popup */
/* .kd-cq-root .kd-cq-popup.kd-cq-field-valid-tip-popup */
/* .kd-cq-root .kd-cq-popup.kd-cq-attachment-tips-popup .kd-cq-attachment-item-tips-input */
/* .kd-cq-root .kd-cq-popup.kd-cq-querypanel-tips-popup .kd-cq-querypanel-tips-popup-title */
/* .kd-cq-root .kd-cq-popup.kd-cq-table-valid-popup */
/* .kd-cq-root .kd-cq-popup.kd-cq-attachment-previewer-popup */
/* .kd-cq-root .kd-cq-popup.kd-cq-attachment-previewer-popup .kd-cq-attachment-previewer-header */
/* .kd-cq-root .kd-cq-popup.kd-cq-attachment-previewer-popup .kd-cq-attachment-previewer-toolbar */
/* .kd-cq-root .kd-cq-popup.kd-cq-attachment-previewer-popup .kd-cq-attachment-previewer-toolbar .kd-cq-input */
/* .kd-cq-root .kd-cq-popup.kd-cq-tile-menu-context-menu-popup */
/* .kd-cq-root .kd-cq-popup.kd-cq-tile-menu-context-menu-popup.kd-cq-context-menu */
/* 弹出面板 */
/* 弹窗 */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-modal-body,
.kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-modal-body {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-modal-footer,
.kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-modal-footer {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-input {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-input .kd-input {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-radio {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-radio .kd-radio-text {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-select {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-select .kd-cq-select-arrow-icon {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-select .kd-cq-select-close-icon {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-select .kd-select-selection-item {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-checkbox {} */
/* .kd-cq-root .kd-cq-modal.kd-cq-spread-modal .kd-cq-checkbox .kd-checkbox-children {} */
/* 弹窗 */
/* 应用菜单 */
/* .kd-cq-root .kd-cq-app-nav-menu {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-collection {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-recently-use {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-item-header {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-item-content {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list .kd-cq-app-nav-menu-cloud-item-header {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list .kd-cq-app-nav-menu-cloud-item-content {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list .kd-cq-app-nav-menu-app-list {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list .kd-cq-app-nav-menu-app-list.kd-cq-app-nav-menu-app-card-type {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list .kd-cq-app-nav-menu-app-list .kd-cq-app-nav-menu-app-item {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list .kd-cq-app-nav-menu-app-list .kd-cq-app-nav-menu-app-item .kd-cq-app-nav-menu-app-item-title {} */
/* .kd-cq-root .kd-cq-app-nav-menu .kd-cq-app-nav-menu-cloud-list .kd-cq-app-nav-menu-app-list .kd-cq-app-nav-menu-app-item .kd-cq-app-nav-menu-app-item-description {} */
/* .kd-cq-root .kd-cq-app-nav-menu-footer {} */
/* 应用菜单 */
/* 平铺菜单 */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container .kd-cq-tile-cloud-list {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container .kd-cq-tile-cloud-list .kd-cq-tile-app-list {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container .kd-cq-tile-cloud-list .kd-cq-tile-app-list .kd-cq-tile-app-list-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container .kd-cq-tile-cloud-list .kd-cq-tile-app-list .kd-cq-tile-app-list-item .kd-cq-tile-app-list-item-workbench {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container .kd-cq-tile-cloud-list .kd-cq-tile-app-list .kd-cq-tile-app-list-item-active {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container .kd-cq-tile-cloud-list .kd-cq-tile-cloud-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-menu-container .kd-cq-tile-cloud-list .kd-cq-tile-cloud-item .kd-cq-tile-colud-item-arrow-icon {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-top-search-area {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-left-nav .kd-cq-tile-top-search-area .kd-cq-tile-search-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-right-menu {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-right-menu .kd-cq-tile-menu-group-menu-list-wrap {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-right-menu .kd-cq-tile-menu-group-menu-list-wrap .kd-cq-tile-menu-group-menu-item-wrap {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-right-menu .kd-cq-tile-menu-group-menu-list-wrap .kd-cq-tile-menu-group-menu-item-wrap .kd-cq-tile-menu-group-menu-list {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-right-menu .kd-cq-tile-menu-group-menu-list-wrap .kd-cq-tile-menu-group-menu-item-wrap .kd-cq-tile-menu-group-menu-list .kd-cq-tile-menu-group-menu-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-right-menu .kd-cq-tile-menu-group-menu-list-wrap .kd-cq-tile-menu-group-menu-item-wrap .kd-cq-tile-menu-group-menu-list .kd-cq-tile-menu-group-menu-item .kd-cq-tile-menu-group-menu-favorite-icon {} */
/* .kd-cq-root .kd-cq-control.kd-cq-tile-menu .kd-cq-tile-right-menu .kd-cq-tile-menu-group-menu-list-wrap .kd-cq-tile-menu-group-menu-item-wrap .kd-cq-tile-menu-group-menu-item-text {} */
/* 平铺菜单 */
/* 侧滑面板 - 帮助中心、快捷键面板 */
/* .kd-cq-root .kd-cq-slide-panel {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-help-panel {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-help-panel .kd-cq-help-panel-list {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-help-panel .kd-cq-help-panel-list .kd-cq-help-panel-item {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-help-panel .kd-cq-help-panel-check-now {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-shortcut-panel {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-shortcut-panel {} .kd-cq-shortcut-panel-group-list {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-shortcut-panel {} .kd-cq-shortcut-panel-group-list .kd-cq-shortcut-panel-group-item {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-shortcut-panel {} .kd-cq-shortcut-panel-group-list .kd-cq-shortcut-panel-group-item .kd-cq-shortcut-panel-group-item-title {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-shortcut-panel {} .kd-cq-shortcut-panel-group-list .kd-cq-shortcut-panel-group-item .kd-cq-shortcut-panel-list {} */
/* .kd-cq-root .kd-cq-slide-panel .kd-cq-shortcut-panel {} .kd-cq-shortcut-panel-group-list .kd-cq-shortcut-panel-group-item .kd-cq-shortcut-panel-list .kd-cq-shortcut-panel-item {}*/
/* 侧滑面板 - 帮助中心、快捷键面板 */
/* 系统消息 */
/* .kd-cq-root .kd-cq-sysnotification {} */
/* .kd-cq-root .kd-cq-sysnotification .kd-cq-sysnotification-header {} */
/* .kd-cq-root .kd-cq-sysnotification .kd-cq-sysnotification-header {} .kd-cq-sysnotification-header-title */
/* .kd-cq-root .kd-cq-sysnotification .kd-cq-sysnotification-content {} */
/* .kd-cq-root .kd-cq-sysnotification .kd-cq-sysnotification-footer {} */
/* .kd-cq-root .kd-cq-sysnotification .kd-cq-sysnotification-footer .kd-cq-btn {} */
/* 系统消息 */
/* spread */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-toolbar-container .kd-cq-spread-toolbar-top {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-toolbar-container .kd-cq-spread-toolbar-top .kd-cq-spread-toolbar-group, */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-toolbar-container .kd-cq-spread-toolbar-top .kd-cq-spread-toolbar-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-toolbar-container .kd-cq-spread-toolbar-top .kd-cq-spread-dropdown-container .kd-cq-spread-dropdown {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-toolbar-container .kd-cq-spread-toolbar-bottom .kd-cq-spread-spread-cell-info, */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-toolbar-container .kd-cq-spread-toolbar-bottom .kd-cq-spread-spread-cell-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-bottom-display {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-input .kd-input {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-radio {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-radio .kd-radio-text {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-select {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-select .kd-cq-select-arrow-icon {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-select .kd-cq-select-close-icon {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-select .kd-select-selection-item {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-checkbox {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-checkbox .kd-checkbox-children {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-suffix {} */
/* .kd-cq-root .kd-cq-control.kd-cq-spread .kd-cq-spread-color-picker {} */
/* spread */
/* loading样式 */
/* .kd-cq-loading {} */
/* .kd-cq-loading .kd-cq-loading-wrapper {} */
/* loading样式end */
/* 搜索 */
/* .kd-cq-search-box.kd-cq-control {} */
/* .kd-cq-search-box.kd-cq-control .kd-cq-search-box-icon {} */
/* 搜索 end*/
/* 锚点 */
/* .kd-cq-control.kd-cq-anchor {} */
/* .kd-cq-control.kd-cq-anchor .kd-cq-anchor-line {} */
/* .kd-cq-control.kd-cq-anchor .kd-cq-anchor-sign {} */
/* .kd-cq-control.kd-cq-anchor .kd-cq-anchor-list {} */
/* .kd-cq-control.kd-cq-anchor .kd-cq-anchor-list .kd-cq-anchor-item-title-active {} */
/* .kd-cq-control.kd-cq-anchor .kd-cq-anchor-list .kd-cq-anchor-level1-item {} */
/* .kd-cq-control.kd-cq-anchor .kd-cq-anchor-list .kd-cq-anchor-level2-item {} */
/* .kd-cq-control.kd-cq-anchor .kd-cq-anchor-list-l {} */
/* 锚点 end */
```
#### （2）通过浏览器嗅探查看对应控件对象开放Class
控件对应DOM结构上会展示其所有开放Class名称（开放Class有统一命名规范，都以"kd-cq-"打头）
如下截图示例(标签控件)：
**注意：在页面DOM结构上查找到的Class名称如果不符合"开放Class命名规范"或不在"开放Class"列表中，则不保证后续该Class是否会变动，请谨慎使用**。
## 五、样式个性化扩展使用方法
### 1、使用方法（步骤）
（1）确认需要修改的样式Class名称（获取Class名称方法见**'章节四'**）
（2）依据UI样式需要编写对应Class内容，即CSS样式脚本
（3）将CSS脚本通过"[全局扩展JS](https://developer.kingdee.com/article/235427929415677696?productLineId=29&isKnowledge=2&lang=zh-CN)"上传，之后刷新页面即可（**后续会为个性化定制样式内容提供独立上传入口**）
全局扩展JS中编写CSS的示例如下：
```
(function () {
window.afterLoad = function () {
//动态加载CSS样式内容(适用于修改样式较少的情况)
var style = document.createElement("style");
style.type = "text/css";
style.id = "customstyle";
//CSS样式内容
style.innerHTML = ".kd-cq-root .kd-cq-control.kd-cq-tree { padding-left: 0 }";
document.head.appendChild(style);
style = null;
}
})()
```
### 2、样式不同作用范围写法
目前要使用全局样式CSS，则需要使用扩展JS写脚本将CSS样式作用于web页面。
备注：后续会为CSS文件上传提供独立上传入口
#### （1）全局生效写法
写法一、动态加载样式CSS文件(**适用于修改样式内容较多的情况**)
```
(function () {
window.afterLoad = function () {
//动态加载样式CSS文件(适用于修改样式内容较多的情况)
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
//CSS样式文件
link.href = "./**/index.css?v=" + new Date().getTime();
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
link = head = null;
}
})()
```
CSS样式文件，内容示例：
```
.kd-cq-root .kd-cq-control.kd-cq-label {
color: red;
}
.kd-cq-root .kd-cq-control.kd-cq-label.kd-cq-label-type-border {
border: 1px solid red;
}
```
写法二、动态加载CSS样式内容(**适用于修改样式较少的情况**)
```
(function () {
window.afterLoad = function () {
//动态加载CSS样式内容(适用于修改样式较少的情况)
var style = document.createElement("style");
style.type = "text/css";
style.id = "customstyle";
//CSS样式内容
style.innerHTML = ".kd-cq-root .kd-cq-control.kd-cq-tree { padding-left: 0 }";
document.head.appendChild(style);
style = null;
}
})()
```
#### （2）单个控件生效写法
基于控件自定义样式属性实现
CSS内容示例（修改按钮背景色）：
```
//在自定义样式中使用开放Class，修改按钮背景色
$ .kd-cq-control.kd-cq-btn {
background: 'themeColor';
}
```
自定义样式编辑界面
### 3、编写CSS
1、推荐阅读[CSS教程](/tolink?target=https%3A%2F%2Fwww.w3school.com.cn%2Fcss%2Findex.asp)，学习CSS样式基础使用方法
2、使用任意ChatGPT软件通过问答方式获取样式设置具体内容
示例如下（框选部分内容即可拿来使用）：
## 六、注意事项
1、注意使用的Class层级不同，其生效范围也不一样（不限制层级则可能全局生效）
2、各控件开放Class即可用于全局，也可以作用于单个控件
3、目前开放Class只支持PC端页面
4、CSS样式属性在不同浏览器可能存在兼容性问题，需要开发者自己保证具体样式内容的兼容性
5、上传的CSS样式内容会直接作用于HTML页面，所以不支持像Less等第三方库的语法，要使用原生CSS
6、**伴随产品的迭代升级，平台组件等可能发生较多功能变化（同时对应DOM结构也可能变化），则相应开放Class可能会调整，请以最新的发布的产品说明为准**
7、使用开放Class扩展了UI样式，但不生效或部分样式未达预期，原因可能是扩展的样式优先级或权重不够被覆盖了，此时可以通过查看页面DOM结构上对应Class确认具体未生效内容，必要时可使用CSS中的"!important"等提高权重，保证扩展样式生效
## 七、样式扩展案例
### 1、附件面板 - 控件样式扩展（全局生效）
#### 1.1 标准视觉（扩展前）
#### 1.2 基于Class定制后视觉（扩展后）
#### 1.3 样式扩展具体内容
（1）隐藏上传/下载按钮
（2）调整操作按钮布局位置至最右边
（3）去除背景色，增加虚线边框
（4）隐藏不需要内容（上传日期、备注等）
#### 1.4 样式扩展对应脚本内容
通过全局扩展JS来编写全局样式扩展Class内容
**后续：正在规划样式扩展内容独立上传入口（扩展Class统一写到CSS文件中）**
```
//全局扩展附件面板UI样式
(function () {
window.afterLoad = function () {
var style = document.createElement('style');
style.type = 'text/css';
style.id = 'addExtGlobalCss_attachment';
style.innerHTML = " .kd-cq-root .kd-cq-control.kd-cq-attachment {}"
+
" .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-header {display: none}"
+
" .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list {padding-top: 4px;border: 1px dashed rgba(88, 140, 233, .3);}" //边框虚线
+
" .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item {background: transparent !important;}" //去除背景色
+
" .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-icon {display: none}" //隐藏图标
+
" .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-name {border: 1px solid #e9e4e4; border-radius: 3px;height: 24px;font-size: 12px;color: royalblue;display: flex; align-items: center;padding-right:5px}" //名称字体大小、颜色等
+
" .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-size {display: none}" //隐藏附件大小
+
" .kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attchment-uploadProperty {display: none}" //隐藏上传
+
".kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-btn-area {position: absolute; right: 0px;}" //操作按钮居右
+
".kd-cq-root .kd-cq-control.kd-cq-attachment .kd-cq-attachment-list .kd-cq-attachment-item .kd-cq-attachment-item-btn-area .kd-cq-attachment-item-btn {font-size: 12px; color: royalblue;}" //按钮字体大小等
document.head.appendChild(style);
style = null;
}
})()
```
## 八、技术支持与资源
### 学习资源
CSS学习网站 [CSS教程](/tolink?target=https%3A%2F%2Fwww.w3school.com.cn%2Fcss%2Findex.asp)
### 技术支持
建议方式如下：
1、[苍穹开发者论坛](https://developer.kingdee.com/developer?productLineId=29)发帖、
2、KSM系统提单、
3、需求反馈: qiao_wen@kingdee.com
