pagination.css 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. @charset "UTF-8";
  2. @font-face {
  3. font-family: '_iconfont';
  4. /* project id 2057696 */
  5. src: url("https://at.alicdn.com/t/font_2057696_sp8nrnh8lyl.eot");
  6. src: url("https://at.alicdn.com/t/font_2057696_sp8nrnh8lyl.eot?#iefix") format("embedded-opentype"), url("https://at.alicdn.com/t/font_2057696_sp8nrnh8lyl.woff2") format("woff2"), url("https://at.alicdn.com/t/font_2057696_sp8nrnh8lyl.woff") format("woff"), url("https://at.alicdn.com/t/font_2057696_sp8nrnh8lyl.ttf") format("truetype"), url("https://at.alicdn.com/t/font_2057696_sp8nrnh8lyl.svg#_iconfont") format("svg");
  7. }
  8. @font-face {
  9. font-family: "_iconfont";
  10. src: url("https://at.alicdn.com/t/font_2057696_0b25hgmzbycp.eot?t=1600330143803");
  11. /* IE9 */
  12. src: url("https://at.alicdn.com/t/font_2057696_0b25hgmzbycp.eot?t=1600330143803#iefix") format("embedded-opentype"), url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL0AAsAAAAABxQAAAKoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqBVIE8ATYCJAMQCwoABCAFhHkHQBsqBsieg3GzdkSV/1mlZyYDTY8rHr7f739rn7ufavrzkyji1SSRTBJJpeIJWmC6l0T3EvjfucyYZTOQPZRDVmgPf1JOl6YHbsCaWe/NOCA/Nze7N9nmiCs2pyeLD8U99GAaY/g819RLOxvwB6FlamRYpPBoOpCophHtHdGEeCawK2KLvsDnaQJti2Q5R4cnZ1CxRJMCcVOlMVRcc0qpRZpCvWdlig+oplne5T7jfcp//LM7mhS1Cs08c2MoiXp/xi/zFrwFl2MCuQji+hoqbEGSuN4bvChPaII87cH5tkPqUihb2T2PlHohdOV1/sujUgRRR+ldsFcKVfzMCYWlalnUK6JqRRS/+dQETSTVLshBxC1QBN81rKmmdO8pLbm95WT36Jv67uEPYWeh3ef2QpTtHGwNmBYF9faqsPQ6fP0s9RxyGO2QbQrZ++j0m03Uze/1SA88CF/sWVf0rq3Ix3SP/Xk8+auY7qIe1bHcQYQon/gnoHwrCQQvWciIVHX+NTsJfmy2n6X6hKXSVIBF/6UIbEhXQqZMWxoKPXMaQf6CNnv4j6xj31toZ281GlpmC8wNiyUqLctksttR03EAdS2H0bZpYn3HREqeyBY2bAoIY48o+r6jMvZFJvuDmrl/1I2jh7azIe3YsRKPSgc4xAQkcTyL1QSzSGARpZE8ewqoa8R4XZpNmwPuqMzCIX+wHRkBC/g2c5wUDQtBMOHMxMPKeWAYDNucaZAQfkUIuz0QIH0f8ieYiUodwYEYASRhcVmYKoGxkLizUOpam78pgHIZYvhYGad4DuAcqtYdFuIXRMgRpYWVvNI7jhQqTBAIjOAYEzasDQMGA4PZ/cM0IEHwUxb4be0C3IqgSv/xavN3boM2OiWjRBUZNY0TnLm2L1SYJuQ9dxlC") format("woff2"), url("https://at.alicdn.com/t/font_2057696_0b25hgmzbycp.woff?t=1600330143803") format("woff"), url("https://at.alicdn.com/t/font_2057696_0b25hgmzbycp.ttf?t=1600330143803") format("truetype"), url("https://at.alicdn.com/t/font_2057696_0b25hgmzbycp.svg?t=1600330143803#_iconfont") format("svg");
  13. /* iOS 4.1- */
  14. }
  15. ._iconfont {
  16. font-family: "_iconfont" !important;
  17. font-size: 16px;
  18. font-style: normal;
  19. -webkit-font-smoothing: antialiased;
  20. -moz-osx-font-smoothing: grayscale;
  21. }
  22. .iconGroup-1:before {
  23. content: "\e684";
  24. }
  25. .iconGroup-:before {
  26. content: "\e683";
  27. }
  28. .iconzuo:before {
  29. content: "\e601";
  30. }
  31. * {
  32. margin: 0;
  33. padding: 0;
  34. }
  35. ._page_container {
  36. margin-top: 40px;
  37. font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
  38. font-size: 13px;
  39. height: 28px;
  40. line-height: 28px;
  41. user-select: none;
  42. display: flex;
  43. justify-content: center;
  44. align-items: center;
  45. }
  46. ._page_container input[type=number] {
  47. -moz-appearance: textfield;
  48. }
  49. ._page_container input[type=number]::-webkit-inner-spin-button,
  50. ._page_container input[type=number]::-webkit-outer-spin-button {
  51. -webkit-appearance: none;
  52. margin: 0;
  53. }
  54. ._page_container li {
  55. list-style: none;
  56. vertical-align: top;
  57. }
  58. ._page_container ._pages, ._page_container ._prev, ._page_container ._next, ._page_container ._home, ._page_container ._last, ._page_container ._jumper, ._page_container ._count, ._page_container ._jumper_input, ._page_container ._sizes, ._page_container ._sizes_text {
  59. display: inline-block;
  60. color: #666;
  61. }
  62. ._page_container ._pages li {
  63. display: inline-block;
  64. color: #333;
  65. /* font-weight: bold; */
  66. min-width: 25px;
  67. text-align: center;
  68. margin: 0 5px;
  69. padding: 0 5px;
  70. border-radius: 2px;
  71. cursor: pointer;
  72. }
  73. ._page_container ._pages li:hover {
  74. color: #46A836;
  75. }
  76. ._page_container ._pages ._pager_prev {
  77. font-family: "_iconfont" !important;
  78. font-size: 16px;
  79. }
  80. ._page_container ._pages ._pager_prev::before {
  81. content: "\e708";
  82. }
  83. ._page_container ._pages ._pager_prev:hover {
  84. font-weight: normal;
  85. }
  86. ._page_container ._pages ._pager_prev:hover::before {
  87. content: "\e610";
  88. }
  89. ._page_container ._pages ._pager_next {
  90. font-family: "_iconfont" !important;
  91. font-size: 16px;
  92. }
  93. ._page_container ._pages ._pager_next::before {
  94. content: "\e708";
  95. }
  96. ._page_container ._pages ._pager_next:hover {
  97. font-weight: normal;
  98. }
  99. ._page_container ._pages ._pager_next:hover::before {
  100. content: "\e60f";
  101. }
  102. ._page_container ._prev, ._page_container ._next, ._page_container ._home, ._page_container ._last {
  103. min-width: 30px;
  104. font-size: 13px;
  105. margin: 0 5px;
  106. border-radius: 2px;
  107. cursor: pointer;
  108. }
  109. ._page_container ._prev:hover, ._page_container ._next:hover, ._page_container ._home:hover, ._page_container ._last:hover {
  110. color: #46A836;
  111. }
  112. ._page_container ._prev, ._page_container ._next {
  113. font-weight: bold;
  114. }
  115. ._page_container ._home, ._page_container ._last, ._page_container ._prev_text, ._page_container ._next_text {
  116. font-weight: normal;
  117. padding: 0 5px;
  118. }
  119. ._page_container ._count {
  120. margin: 0 5px;
  121. }
  122. ._page_container ._jumper {
  123. color: #666;
  124. margin: 0 10px;
  125. }
  126. ._page_container ._jumper ._jumper_input {
  127. font-size: 14px;
  128. color: #666;
  129. width: 50px;
  130. height: 26px;
  131. text-align: center;
  132. margin: 0 5px;
  133. padding: 3px;
  134. border: 1px solid #dcdfe6;
  135. border-radius: 4px;
  136. background: none;
  137. outline: none;
  138. box-sizing: border-box;
  139. }
  140. ._page_container ._jumper ._jumper_input:focus {
  141. border-color: #46A836;
  142. }
  143. ._page_container ._sizes {
  144. position: relative;
  145. margin: 0 5px;
  146. }
  147. ._page_container ._sizes .icon_down {
  148. position: absolute;
  149. right: 8px;
  150. top: 1px;
  151. font-size: 13px;
  152. color: #c0c4cc;
  153. cursor: pointer;
  154. transition: .3s;
  155. }
  156. ._page_container ._sizes ._sizes_text {
  157. width: 100px;
  158. padding-left: 8px;
  159. padding-right: 25px;
  160. border-radius: 4px;
  161. border: 1px solid #dcdfe6;
  162. cursor: pointer;
  163. box-sizing: border-box;
  164. z-index: 10;
  165. }
  166. ._page_container ._sizes ._sizes_text:hover {
  167. border-color: #46A836;
  168. }
  169. ._page_container ._sizes ._sizes_select_container {
  170. position: absolute;
  171. left: 0;
  172. top: 50px;
  173. background-color: #fff;
  174. border-radius: 5px;
  175. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  176. transform: translateY(-100px) scale(0);
  177. transition: .3s;
  178. }
  179. ._page_container ._sizes ._sizes_select_container::before {
  180. position: absolute;
  181. top: -6px;
  182. left: 40px;
  183. display: block;
  184. content: '';
  185. clear: both;
  186. width: 0;
  187. height: 0;
  188. border-left: 7px solid transparent;
  189. border-right: 7px solid transparent;
  190. border-bottom: 7px solid #eee;
  191. }
  192. ._page_container ._sizes ._sizes_select_container::after {
  193. position: absolute;
  194. top: -5px;
  195. left: 41px;
  196. display: block;
  197. content: '';
  198. clear: both;
  199. width: 0;
  200. height: 0;
  201. border-left: 6px solid transparent;
  202. border-right: 6px solid transparent;
  203. border-bottom: 6px solid #fff;
  204. }
  205. ._page_container ._sizes ._sizes_select_container ._sizes_select {
  206. min-width: 110px;
  207. max-height: 274px;
  208. padding: 5px 0;
  209. overflow: auto;
  210. overflow-x: hidden;
  211. /*滚动条整体样式*/
  212. /*滚动条里面小方块*/
  213. /*滚动条里面轨道*/
  214. }
  215. ._page_container ._sizes ._sizes_select_container ._sizes_select::-webkit-scrollbar {
  216. width: 4px;
  217. height: 1px;
  218. }
  219. ._page_container ._sizes ._sizes_select_container ._sizes_select::-webkit-scrollbar-thumb {
  220. border-radius: 10px;
  221. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  222. background: #999999;
  223. }
  224. ._page_container ._sizes ._sizes_select_container ._sizes_select::-webkit-scrollbar-track {
  225. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  226. border-radius: 10px;
  227. background: #f7f8fa;
  228. }
  229. ._page_container ._sizes ._sizes_select_container ._sizes_select ._sizes_select_li {
  230. height: 34px;
  231. line-height: 34px;
  232. cursor: pointer;
  233. }
  234. ._page_container ._sizes ._sizes_select_container ._sizes_select ._sizes_select_li:hover {
  235. background-color: #f5f7fa;
  236. }
  237. ._page_container ._sizes ._sizes_select_container ._sizes_select ._sizes_select_active {
  238. font-weight: bold;
  239. color: #46A836;
  240. background-color: #f5f7fa;
  241. }
  242. ._page_container ._sizes ._sizes_select_container_show {
  243. transform: translateY(0) scale(1);
  244. }
  245. ._page_container ._sizes_active {
  246. border-color: #46A836;
  247. }
  248. ._page_container ._sizes_icon_rotate {
  249. transform: rotate(180deg);
  250. }
  251. ._pages_1 li {
  252. background-color: #f4f4f5;
  253. }
  254. ._prev_1, ._next_1, ._home_1, ._last_1 {
  255. background-color: #f4f4f5;
  256. }
  257. ._active_1 {
  258. color: #fff !important;
  259. background-color: #46A836 !important;
  260. }
  261. ._active_2 {
  262. color: #46A836 !important;
  263. }
  264. ._disabled {
  265. cursor: not-allowed !important;
  266. }
  267. ._disabled_c {
  268. color: #c0c4cc !important;
  269. }