专业紧凑协调的样式设计

专业紧凑的间距设计应遵循一致性、层次感和视觉平衡的原则。以下是优化建议：

.detail-container {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 从16px减小到12px，让整体更紧凑 */
}

/* 组件内部填充调整 */
.header-info {
  margin-bottom: 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  
  :deep(.el-descriptions__label) {
    padding: 10px 12px; /* 减小label内边距 */
  }
  
  :deep(.el-descriptions__content) {
    padding: 10px 12px; /* 减小content内边距 */
  }
}

.toolbar-container {
  background-color: #fff;
  padding: 12px 16px; /* 上下减小到12px */
  margin-bottom: 0;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* 减小到10px */
}

.search-container {
  background-color: #fff;
  padding: 14px 16px; /* 从18px减小到14px */
  margin-bottom: 0;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  
  .search-form {
    gap: 12px; /* 从默认或其他值减小到12px */
  }
}

/* 修正表格内部间距 */
:deep(.el-table) {
  .el-table__header {
    th {
      height: 40px; /* 从44px减小到40px */
      padding: 6px 0; /* 添加明确的内边距 */
    }
  }
  
  .el-table__row {
    td {
      padding: 6px 0; /* 从8px减小到6px */
    }
  }
}

/* 调整分页组件 */
:deep(.el-pagination) {
  margin-top: 12px; /* 从16px减小到12px */
  padding: 12px 0; /* 从16px减小到12px */
}

/* 表单项调整 */
.detail-form .el-form-item {
  margin-bottom: 16px; /* 如果原来更大，减小到16px */
}

/* 表单卡片间距 */
.mb-4 {
  margin-bottom: 12px; /* 从16px减小到12px */
}

/* 表单内部区域 */
.form-section {
  padding: 10px 0; /* 减小内部填充 */
  
  &.grid-2 {
    gap: 12px; /* 网格间隙减小 */
  }
}

 

专业紧凑设计的关键点：
1. 采用系统的间距比例（例如4px、8px、12px、16px）保持整体一致性
2. 内容密集区域使用较小间距（如表格内部），功能分区使用较大间距以建立层次
3. 同类元素保持相同间距，不同类元素间距可略有差异以增强识别度
4. 表单和数据密集区域采用更紧凑设计，交互元素（如按钮）保留足够空间确保可用性
5. 避免过度拥挤，确保组件间有明确的视觉分隔

这种设计在保持界面整洁的同时增强专业感，使信息层次更清晰，用户体验更佳。

 

 

以下是更加专业协调的字体设计方案，通过统一颜色、大小和粗细来创建视觉层次和一致性：

/* 基础文本变量 - 在样式顶部添加 */
:root {
  /* 字体大小系统 */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  
  /* 颜色系统 */
  --text-primary: #303133;    /* 主要文本 */
  --text-regular: #606266;    /* 常规文本 */
  --text-secondary: #909399;  /* 次要文本 */
  --text-placeholder: #a8abb2; /* 占位文本 */
}

/* 标题与表头 */
.el-dialog__title, 
.card-header span,
:deep(.el-table__header th) {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary);
}

/* 描述列表标签 */
:deep(.el-descriptions__label) {
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-regular);
}

/* 描述列表内容 */
:deep(.el-descriptions__content) {
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* 表单标签 */
:deep(.el-form-item__label) {
  font-size: var(--font-size-sm);
  font-weight: normal;
  color: var(--text-regular);
}

/* 表单内容 */
:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select-dropdown__item) {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* 表格内容 */
:deep(.el-table__row td) {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* 数据单元格特殊样式 */
.date-cell {
  font-family: var(--el-font-family-monospace, monospace);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--el-color-primary);
}

.employee-code, .employee-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

/* 班次标签 */
.shift-header {
  .el-tag {
    font-size: var(--font-size-xs);
  }
  
  .shift-name {
    font-size: var(--font-size-sm);
    color: var(--text-regular);
  }
}

/* 时间显示 */
.shift-time {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  
  .time-value {
    font-family: var(--el-font-family-monospace, monospace);
  }
}

/* 按钮文本 */
.el-button {
  font-size: var(--font-size-sm);
  
  &.is-link {
    font-size: var(--font-size-xs);
  }
}

/* 空状态文本 */
:deep(.el-empty__description) {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* 分页组件 */
:deep(.el-pagination) {
  font-size: var(--font-size-sm);
  
  .btn-prev, .btn-next, .el-pager li {
    font-size: var(--font-size-sm);
  }
}

/* 卡片头部 */
.card-header {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 500;
}

/* 标签特殊设计 */
.el-tag {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

 

这套字体设计方案基于以下专业原则：

1. **有限的字体大小种类**：只使用4种大小（12px, 13px, 14px, 15px），保持界面一致性
2. **有限的颜色种类**：采用4级文本颜色系统，创建清晰的层次结构
3. **明确的字重应用**：按照层次使用不同粗细，标题和重要信息使用500，一般文本使用normal
4. **统一的字体**：保持整个界面字体一致，特殊数据使用等宽字体以提高可读性
5. **符合标准的尺寸**：所有文本满足最小12px可读性标准，表格和表单采用13px提高内容密度

这种设计会让界面在保持专业性的同时更加紧凑协调，各元素通过大小、颜色和粗细形成明确的视觉层次，使用户能更有效地浏览和理解界面。