his/openhis-ui-vue3/src/assets/styles/ui-standard.scss

// OpenHIS UI 统一风格规范
// 统一组件样式，确保整个系统 UI 风格一致性

/* ============================================
   1. 容器样式
   ============================================ */
.app-container {
  padding: 20px;
  min-height: calc(100vh - 84px);
  background-color: #f0f2f5;
}

.components-container {
  margin: 20px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* ============================================
   2. 表格样式
   ============================================ */
.el-table {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

  th {
    background-color: #f8f9fb !important;
    color: #606266;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 0;
  }

  td {
    padding: 12px 0;
  }

  // 表格行选中颜色
  .current-row > td.el-table__cell {
    background-color: #e8f4ff !important;
  }

  // 表格行hover颜色
  .el-table__body tr:hover > td {
    background-color: #f5f7fa !important;
  }
}

/* ============================================
   3. 表单样式
   ============================================ */
.el-form {
  .el-form-item {
    margin-bottom: 18px;

    .el-form-item__label {
      font-weight: 500;
      color: #606266;
      font-size: 14px;
      line-height: 32px;
    }

    .el-input,
    .el-select,
    .el-date-picker {
      width: 100%;
    }
  }
}

// 查询表单容器
.query-form {
  padding: 18px;
  background-color: #ffffff;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .el-form-item {
    margin-bottom: 0;

    .el-input,
    .el-select {
      width: 200px;
    }
  }
}

/* ============================================
   4. 按钮样式
   ============================================ */
// 主要按钮组
.button-group {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;

  .el-button {
    height: 32px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
}

// 操作按钮
.action-button {
  font-size: 13px;
  padding: 4px 8px;
}

// 搜索区域按钮
.search-buttons {
  margin-left: 8px;

  .el-button {
    height: 32px;
    min-width: 72px;
  }
}

/* ============================================
   5. 对话框样式
   ============================================ */
.el-dialog {
  border-radius: 8px;
  overflow: hidden;

  &__header {
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
    margin: 0;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  &__body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
  }

  &__footer {
    padding: 16px 20px;
    border-top: 1px solid #e4e7ed;
    text-align: right;
  }
}

/* ============================================
   6. 抽屉样式
   ============================================ */
.el-drawer {
  &__header {
    margin-bottom: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;

    .el-drawer__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  &__body {
    padding: 0 20px 20px;
  }
}

/* ============================================
   7. 标签页样式
   ============================================ */
.el-tabs {
  &__header {
    margin: 0 20px;
    border-bottom: 1px solid #e4e7ed;

    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
  }

  &__content {
    padding: 16px 0;
  }
}

/* ============================================
   8. 分页样式
   ============================================ */
.pagination-container {
  margin-top: 16px;
  padding: 0 8px;
  text-align: right;

  .el-pagination {
    .el-pager li {
      border-radius: 4px;
    }
  }
}

/* ============================================
   9. 标签样式
   ============================================ */
.el-tag {
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
}

// 字典标签
.dict-tag {
  margin: 0;
}

/* ============================================
   10. 描述列表样式
   ============================================ */
.el-descriptions {
  &__label {
    font-weight: 500;
    color: #606266;
  }

  &__body {
    background-color: #fafafa;
  }
}

/* ============================================
   11. 空状态样式
   ============================================ */
.el-empty {
  padding: 60px 0;

  &__description {
    color: #909399;
    font-size: 14px;
    margin-top: 16px;
  }
}

/* ============================================
   12. 卡片样式
   ============================================ */
.el-card {
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  &__header {
    border-bottom: 1px solid #e4e7ed;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
  }

  &__body {
    padding: 20px;
  }
}

/* ============================================
   13. 徽标样式
   ============================================ */
.el-badge {
  &__content {
    border: 1px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  }
}

/* ============================================
   14. 工具类
   ============================================ */
.text-primary {
  color: #409eff;
}

.text-success {
  color: #67c23a;
}

.text-warning {
  color: #e6a23c;
}

.text-danger {
  color: #f56c6c;
}

.text-info {
  color: #909399;
}

.text-regular {
  color: #606266;
}

.text-secondary {
  color: #909399;
}

/* ============================================
   15. 动画
   ============================================ */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ============================================
   16. 响应式
   ============================================ */
@media screen and (max-width: 768px) {
  .app-container {
    padding: 10px;
  }

  .query-form {
    padding: 12px;

    .el-form-item {
      margin-bottom: 12px;

      .el-input,
      .el-select {
        width: 100%;
      }
    }
  }

  .button-group {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }
}