场景案例

针对表单组件场景的样式调整

调整PC端、移动端子表单、子表关联、多表关联表头行高

场景：PC端子表单、子表关联、多表关联的表头行高占比太大，想要将高度调低 代码：

/* 
5.1.1  调整PC端、移动端子表单、子表关联、多表关联表头行高
*/

/*
因为默认element ui的table的header为59px
如果执意要改就要破坏它原有的样式，覆盖它
*/
/* 
header高度改为40px(PC)
*/
.qiqiao-form__multiFormAssociation .el-table th .cell .table_header,.qiqiao-form__childFormAssociation[data-v-3283852e] .el-table th .cell .table_header,.qiqiao-form__relate-query[data-v-557c4e4b] .el-table th .cell .table_header{
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 29px;
  height: 29px;
}
.el-table .el-table__cell{
  padding: 0;
}
.el-table thead{
  height: 30px;
}
body .el-table th .cell{
  line-height: 30px;
}
/* 
如果执意要改就要破坏它原有的样式，覆盖它,因为ui库带有的样式有padding啥的会影响你修改高度，所以要覆盖掉但又要保留原有样式
还有移动端这个组件库内部用rem，如果强行用px覆盖可能会出事

*/
/* 
header高度改为30px(移动)
*/
.dyFormSubform .el-table th,.subformTable .el-table th{
  padding: 0;
}
.subformTable .el-table th .cell .table_head{
  white-space: normal;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 29px;
  height: 29px;
}
.dyFormRelatedQuery .el-table th{
  padding: 0;
  overflow: hidden;
}
.el-table thead{
  height: 30px;
}

代码编写位置：

实现效果：

修改单行文本组件的样式大小

场景：表单设计过程中，想要设计组件的样式调整页面美观，或者告知提交表单人员这个组件内填写信息的重要性，就可以使用更改组件的样式来实现。

代码：

/* 单行文本下有唯一的类名，所以可以取唯一的类名只修改单行文本,一次性修改所有的单行文本，或者说一个个修改也行 */
.qiqiao-form__textbox .el-input__inner{
  background-color: skyblue;
  color: #fff;
}
.qiqiao-form__textbox input.el-input__inner::placeholder{
  color: #fff;
}
/* 因为标题修改没有唯一类名，只能一个个修改，如果不一个个，全部标题都会影响到 */
.formItem:nth-child(2) .formItem_content .el-form-item__label,.formItem:nth-child(3) .formItem_content .el-form-item__label,.formItem:nth-child(4) .formItem_content .el-form-item__label{
  color: skyblue;
}

实现效果：

针对流程场景的样式调整

手机端填单/详情的顶部Tab栏隐藏

场景：针对某个流程，不想用户看到顶部tab栏时，可用CSS进行隐藏 代码：

.workflow_form .workflow_detail .workflow_detail_header {display: none !important;}
.workflow_info .workflow_detail_header{display: none !important;}
/* 填单页+详情页tab标题用 */

.workflow_form .workflow_detail .hasButtons .formRender {margin-top:10px !important;}
.workflow_info .workflow_detail{top:0px !important;}
/* 字段填写模块+详情模块-上间距用 */

.workflow_form .workflow_detail_header_userInfo{padding: 16px 14px 18px !important;}
/* 填单页标题上下左右边距用*/

实现效果：

PC端隐藏侧边框（评论框、流转明细、日志）

场景：针对某个流程，不想用户看到评论框、流转明细，可用CSS进行隐藏 代码：

div:root .container_right{
  display: none ;
}

实现效果：

修改前：

修改后：

PC端将驳回按钮改为红色

场景：流程驳回操作不够显眼，将按钮颜色调整为红色。

代码：

/* 
  5.2.3 PC端将驳回按钮改为红色
*/
.drawer_background .drawer .bottom_btn_group .el-button:nth-child(2){
  background-color: red;
  color: #fff;
}

实现效果：

修改前：

修改后：

针对单个应用页面样式调整

PC端的页面主标题样式调整

场景：针对当个应用修改页面主标题颜色、大小等；

代码：

:root .index_header .index-header-content {
    font-size: 24px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: #0000fff5 !important;
}

实现效果：

PC端的页面按钮颜色调整

场景：一些业务按钮通过自定义开发按钮实现，颜色不够显眼，将按钮颜色调整为蓝色。

代码（顶部按钮）：

.renderWrap .popoverTips .el-popover__reference-wrapper .el-button{
    background-color: skyblue !important;
    color: #fff;
}

代码（行操作按钮）：

.operation .normal .popoverTips .el-popover__reference-wrapper .el-button{
    color: skyblue !important;
}

实现效果：

PC端屏蔽应用切换器

场景：客户只有一个应用，不希望在页面上显示应用切换器

代码：

div#app_b67f364fb1e94ca9a3f10c63e1d039b6 .business_list .top_funcBtn_list span{
    display: none;
}

实现效果：

修改前：

修改后：

移动端添加表单按钮样式调整

场景：添加表单按钮在右下角，显示不够明显，希望可以调整得更大一点

代码：

.pageRender .add_btn{
    width: 4rem;
    background-color: #84adfc;
    left: 50%;
    transform: translateX(-50%);
}
.dyCardList .add_btn .config_emptyData{
    width: auto;
}

实现效果：

可以配合移动端调整操作的文案：

针对全局的样式调整

隐藏PC端左侧侧边栏应用入口

场景描述：客户只有一个应用，不希望在页面上显示应用入口

代码：

/* 
    5.4.1 隐藏PC端左侧侧边栏应用入口
*/
a.btn_more{
    display: none;
}

ul.layout_sider_menu.el-menu--collapse.el-menu li:nth-child(2){
    display: none;
}

实现效果：

修改前：

修改后：