层叠样式设计-CSS

支持用户自定义全局CSS 或 指定窗体CSS

环境初始化与部署

全局CSS

​ 目录文件路径为 项目根目录/Project/Clinet/GongqiERP/customdev/custom.css

窗体CSS

​ 目录文件路径为 项目根目录/Project/Clinet/GongqiERP/layers/[层级目录]

​ 层级目录 如：/app/gongqi.df.sales/gongqi.df.sales.SalesTable.css

[!NOTE]

全局CSS 作用于整个项目所有窗体 ，件本身就存在，只需编辑其内容即可。如果需要在其内指定窗体生效，请携带上窗体div 的ID

窗体CSS 本身文件没有文件，需要自行创建且必须按照规则创建路径和文件名称 ，文件名称必须是对应窗体 form 的xml 的 name

窗体CSS建完之后，在开发环境打包 成lyr 或app 或 plg 或 ext时会自动打包进去，在生产环境安装时无需关心其物理文件是否存在 即可生效

开发环境每次修改CSS之后需重新刷新浏览器即可生效 不需重启项目

CSS样式设计时 请借助浏览器 F12 开发者工具 如果不会使用浏览器开发者工具的请自行搜索学习

实践与案例

按钮

默认按钮样式

​

简单设计CSS源码

#Form_gongqi_df_sales_SalesTable #Button1{//根据指定窗体 指定按钮ID
    color: white !important;//字体颜色 !important 代表强制执行
    font-size: 20px !important;//字体大小 
    font-family: Alibaba PuHuiTi !important;//字体类型 
    font-weight: 500 !important;//字体深度
    background-color: #1055bc;//背景颜色 也可以使用背景图片
}

简单设计按钮样式

​

特殊设计CSS源码

#Form_gongqi_df_sales_SalesTable #Button2{
    background-image: url(images/Handover.png);//使用背景图片
    background-repeat: no-repeat;//背景图片不重复，只显示一次
    width: 100px !important;//按钮宽度
    height: 120px !important;//按钮高度
    background-size: 100px 100px !important;//背景图大小
    font-size: 18px !important;//字体大小
    font-family: Alibaba PuHuiTi;//字体类型
    font-weight: 500;//字体深度
    color: #00176b;//字体颜色
    border: none;//无边框
    display: flex;//flex布局
    justify-content: center;//左右居中
    align-items: flex-end;//元素上下 居下
}

特殊设计按钮样式

​

输入框

默认输入框样式

简单设计CSS源码

#Form_gongqi_df_sales_SalesTable #StringEditor label{ //修改输入框的 label
    width: 60px !important;//宽度
    height: 21px !important;//高度
    font-size: 22px;/字体大小
    font-family: Alibaba PuHuiTi;//字体类型
    font-weight: 400;//字体深度
    color: #CCE0FF;//字体颜色
}

#Form_gongqi_df_sales_SalesTable #StringEditor  inpute{//修改输入框的 inpute
    width: 136px !important;//宽度
    height: 40px !important;//高度
    background: linear-gradient(-90deg, #063C6E, #125492);//背景
    color: #FFFFFF;//颜色
    font-size: 22px !important;//大小
    margin-top:10px !important;//上外边距
    border:none !important;//边框设置无
    padding:0px 0px 0px 0px !important;//内边距设置无
    text-align:center !important;//文本居中
    background-image: url(images/input.png);//背景图片
    background-size:135px 40px !important;//背景图片大小
}

简单设计输入框样式

表格

默认表格样式

简单设计CSS源码

//设置表格整体 高度和宽度  
//注意  如果 需要设置表格行高  建议 GOT设置displayHeight 不建议用CSS 设置 可能会导致异常情况
#Form_gongqi_df_sales_SalesTable #DataGrid{
    width:430px !important;
    height:330px !important;
}
//设置表格最小高度 和 外边框
#Form_gongqi_df_sales_SalesTable #DataGrid .react-grid-Grid{
    min-height:330px !important;
    border:none !important;
}
//设置表头行 样式 
#Form_gongqi_df_sales_SalesTable #DataGrid .react-grid-HeaderCell{
    background: #094290;
    border-radius: 4px 4px 0px 0px;
    color:white !important;
    height:40px !important;
    border:none;
    padding:0px 0px 0px 0px !important;
}
//设置表格整体 高度和宽度  
#Form_gongqi_df_sales_SalesTable #DataGrid .datagridcontainer .react-grid-Header{
    height: 40px !important;
}
//设置表格整体 高度和宽度  
#Form_gongqi_df_sales_SalesTable  #DataGrid.react-grid-HeaderRow{
    background: #092f69;
    height:40px !important;
}
//设置表格内整体背景
#Form_gongqi_df_sales_SalesTable  #DataGrid .react-grid-Canvas{
    background: #092f69;
}
//设置表格内单元格样式
#Form_gongqi_df_sales_SalesTable #DataGrid .react-grid-Cell{
    background: #092f69;
    color:white !important;
    border-right: 0.1px solid #00CCFF !important;
    border-bottom: 0.1px solid #00CCFF !important;
    border-top:none !important;
    padding:10px 0px 0px 0px !important;
}
//设置表格选中样式
#Form_gongqi_df_sales_SalesTable #DataGrid .gongqi_render_select{
    font-size:16px !important;
    color:white !important;
    text-align:center !important;
}

简单设计表格样式

\DevPlatform\Code\SecondaryDev\images\csjs9.png)