PbootCMS分页条效果之数字条效果

01<!-- 分页 -->

02{pboot:if({page:rows}>0)}

03<div class="pagebar">

04<div class="pagination">

05<a class="page-item page-link hidden-sm"href="{page:index}"title="首页">首页</a>

06<a class="page-item page-link"href="{page:pre}"title="上一页">上一页</a>

07{page:numbar}

08<a class="page-item page-link"href="{page:next}"title="下一页">下一页</a>

09<a class="page-item page-link hidden-sm"href="{page:last}"title="尾页">尾页</a>

10</div>

11</div>

12{else}

13<div class="tac text-secondary">本分类下无任何数据！</div>

14{/pboot:if}

01/* ----- PB分页数字条效果 结束 ----- */

02.pagebar .pagination {

03display: flex;

04justify-content: center;

05margin-top: 10px;

06}

07.pagination a {

08background: #fff;

09border: 1px solid #ccc;

10color: #333;

11font-size: 14px;

12padding: 8px 12px;

13margin: 0 5px;

14border-radius: 3px;

15}

16.pagination span {

17color: #333;

18font-size: 14px;

19padding: 8px 2px;

20margin: 0 5px;

21border-radius: 3px;

22}

23.pagination a:hover {

24color: #4fc08d;

25border: 1px solid #4fc08d;

26}

27.pagination a.page-num-current {

28color: #fff;

29background: #4fc08d;

30border: 1px solid #4fc08d;

31}

32/* ----- PB分页数字条效果 结束 ----- */