bootstrap5独立的分页css .pagination

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

打开边栏(ESC) 关闭边栏(ESC)

css

/* 分页 */
.fy{padding: 1rem 0;}
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
	justify-content: center;
}

.page-link {
  position: relative;
  display: block;
  color: #0d6efd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: #0a58ca;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
.page-link:focus {
  z-index: 3;
  color: #0a58ca;
  background-color: #e9ecef;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}

.page-link {
  padding: 0.375rem 0.75rem;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
}
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

html

<div class="fy">
  <ul class="pagination justify-content-center mb-0">
    <li class="paginate_button page-item disabled"><span class="page-link">«</span></li>
    <li class="paginate_button page-item active"><span class="page-link">1</span></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=2" class="page-link">2</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=3" class="page-link">3</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=4" class="page-link">4</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=5" class="page-link">5</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=6" class="page-link">6</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=7" class="page-link">7</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=8" class="page-link">8</a></li>
    <li class="paginate_button page-item disabled"><span class="page-link">...</span></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=45" class="page-link">45</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=46" class="page-link">46</a></li>
    <li class="paginate_button page-item"><a href="/wap/article/lists.html?page=2" class="page-link">»</a></li>
  </ul>
</div>

样式

from clipboard