CSS 扩展操作

本章节介绍如何使用 CSS 对界面进行样式定制。

基础用法

在界面的 CSS 扩展属性中或自定义 HTML 页面中，可以编写自定义 CSS 样式。

/* 修改标签字体颜色 */
.label-custom {
  color: #ff0000;
  font-weight: bold;
}

/* 修改输入框样式 */
.input-custom {
  border: 2px solid #1890ff;
  border-radius: 4px;
  padding: 8px 12px;
}

/* 修改按钮样式 */
.btn-primary {
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 24px;
  cursor: pointer;
}

.btn-primary:hover {
  background: #40a9ff;
}

控件样式定制

表格样式

/* 表格表头样式 */
.sg-table th {
  background: #fafafa;
  color: #333;
  font-weight: bold;
  padding: 12px 8px;
  border-bottom: 2px solid #e8e8e8;
}

/* 表格行 hover 效果 */
.sg-table tr:hover td {
  background: #e6f7ff;
}

/* 斑马纹 */
.sg-table tr:nth-child(even) td {
  background: #fafafa;
}

/* 选中行高亮 */
.sg-table tr.selected td {
  background: #bae7ff;
}

/* 列宽调整手柄 */
.sg-table .col-resize {
  cursor: col-resize;
}

弹窗样式

/* 弹窗标题栏 */
.sg-dialog .dialog-header {
  background: #1890ff;
  color: #fff;
  padding: 12px 16px;
}

/* 弹窗内容区 */
.sg-dialog .dialog-body {
  padding: 20px;
}

/* 弹窗底部按钮区 */
.sg-dialog .dialog-footer {
  padding: 12px 16px;
  border-top: 1px solid #e8e8e8;
  text-align: right;
}

表单样式

/* 表单标签 */
.sg-form .form-label {
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-right: 12px;
  color: #666;
}

/* 必填标记 */
.sg-form .required::before {
  content: '*';
  color: #ff4d4f;
  margin-right: 4px;
}

/* 输入框获取焦点 */
.sg-form input:focus,
.sg-form select:focus,
.sg-form textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

主题变量

平台内置 CSS 变量，可直接引用：

/* 使用主题色 */
.custom-element {
  background: var(--primary-color, #1890ff);
  color: var(--text-color, #333);
  border-color: var(--border-color, #e8e8e8);
}

变量名	说明	默认值
--primary-color	主题主色	#1890ff
--success-color	成功色	#52c41a
--warning-color	警告色	#faad14
--error-color	错误色	#ff4d4f
--text-color	文字颜色	#333333
--border-color	边框颜色	#e8e8e8
--bg-color	背景颜色	#ffffff

响应式适配

/* PC 端（默认） */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* 平板 */
@media (max-width: 1024px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }
}

/* 手机 */
@media (max-width: 768px) {
  .sg-form .form-label {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
  }
  
  .sg-dialog {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
  }
}

打印样式

@media print {
  /* 隐藏不需要打印的元素 */
  .no-print,
  .sg-dialog,
  .sg-sidebar,
  .sg-header {
    display: none !important;
  }
  
  /* 打印内容样式 */
  .print-content {
    font-size: 12px;
    line-height: 1.5;
  }
  
  /* 表格打印样式 */
  .sg-table th,
  .sg-table td {
    border: 1px solid #333;
    padding: 4px 8px;
  }
}