.sort-pager { height: 48px; background: #f5f7f6; line-height: 48px; margin: 10px 0; .sort-type, .checks { color: #999; font-size: 12px; padding: 0 10px; .iconfont { font-size: 12px; } &.active, &.checked { color: #000; font-weight: bold; .iconfont { font-weight: 100; } } } .checks .iconfont { background: #fff; } .sort-type:first-child .iconfont { display: none; } .page-nav { padding: 7px 0; float: right; font-size: 14px; .page-prev { width: 33px; height: 33px; line-height: 34px; background: #ccc; text-align: center; float: left; } a .page-prev, a .page-next { background: #000; color: #fff; } .page-next { min-width: 110px; height: 33px; background: #a9a9a9; float: left; margin-left: 1px; line-height: 33px; padding-left: 10px; box-sizing: border-box; padding-right: 10px; } .pages { margin-left: 10px; } } .pager-wrap { float: right; padding: 15px 0; } .page-count { position: relative; height: 18px; float: left; font-size: 12px; line-height: 18px; > span { float: left; display: block; width: 42px; height: 10px; line-height: 10px; padding: 3px; border: 1px solid #ccc; color: #222; cursor: pointer; margin-right: 10px; background: #fff; } .iconfont { font-size: 14px; color: #ccc; float: right; } > ul { position: absolute; display: none; width: 48px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background: #fff; z-index: 1; } li { padding: 0 3px; border-bottom: 1px solid #ccc; &:hover { background: #376cf7; color: #fff; } } a { display: block; width: 100%; } } .page-orient { float: left; font-size: 14px; line-height: 15px; margin: 0 20px; .dis-icon { color: #e6e6e6; } i { color: #f00; } } }