Eternity模版分页条css样式

演示图片，随系统原来白夜切换颜色

/* ==================== */
/* Eternity分页组件全局样式设置 */
/* ==================== */

/* 分页容器 - 控制整体布局 */
.pagination {
  display: flex;          /* 启用Flex布局 */
  flex-wrap: wrap;        /* 允许内容超出容器宽度时自动换行 */
  gap: 4px;               /* 子元素之间的间隔（替代margin方案） */
  justify-content: center; /* 子元素水平居中排列 */
  margin: 20px 0;         /* 上下边距20px，左右无边距 */
}

/* ==================== */
/* 分页项样式 */
/* ==================== */

/* 单个页码项容器 */
.page-item {
  margin: 0 5px;          /* 左右边距5px（与gap配合形成叠加间距） */
}

/* ==================== */
/* 分页链接样式 */
/* ==================== */

/* 页码链接基础样式 */
.page-link {
  display: flex;          /* 启用Flex布局（便于内容居中） */
  align-items: center;    /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  min-width: 36px;        /* 最小宽度（确保圆形按钮效果） */
  height: 36px;           /* 固定高度（形成正方形按钮） */
  padding: 0 8px;         /* 内边距（左右8px，上下0） */
  border-radius: 6px;     /* 圆角半径 *//
}

/* ==================== */
/* 移动端适配（屏幕宽度小于576px时生效） */
/* ==================== */
@media (max-width: 576px) {
  /* 缩小页码项间距 */
  .page-item {
    margin: 0 3px;        /* 左右边距缩小为3px */
  }

  /* 调整链接尺寸适应小屏幕 */
  .page-link {
    min-width: 32px;      /* 最小宽度缩小 */
    height: 32px;         /* 高度缩小 */
    font-size: 14px;      /* 字体缩小 */
  }
}