fe_supplier_frontend/src/utils/componentStyle.less

// 通用容器样式
.common-container {
  background: #fff;
  padding: 15px;

  // 按钮组样式
  .action-buttons {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  // 内容区样式
  .content-area {
    min-height: 500px;
  }

  // 表格样式优化
  .ant-table-wrapper {
    .ant-table-thead > tr > th {
      background-color: #fafafa;
      font-weight: 500;
    }
  }

  // 分页样式
  .ant-pagination {
    margin-top: 16px;
    text-align: right;
  }

  // 按钮间距
  .action-space {
    button {
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

// 筛选条件和操作按钮区域样式
.filter-action-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;

  .filter-form {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;

    .filter-btns {
      button {
        margin-right: 8px;
      }
    }
  }

  .right-buttons {
    display: flex;
    align-items: center;

    button {
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }

    .selected-count {
      margin-left: 8px;
    }
  }
}

// 按钮行样式 - 用于搜索按钮和操作按钮的两端对齐
.button-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;

  .left-buttons {
    display: flex;
    gap: 8px;
  }

  .right-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

// 响应式调整
@media screen and (max-width: 768px) {
  .button-row {
    flex-direction: column;
    gap: 16px;

    .left-buttons, .right-buttons {
      width: 100%;
      justify-content: flex-start;
    }
  }
}