scroller.scss 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. @import "../../styles/animation/rotate";
  2. .nut-scroller{
  3. display: flex;
  4. height: 100%;
  5. }
  6. // 横向滚动
  7. .nut-hor-scroll{
  8. height: 100%;
  9. width: 100%;
  10. // overflow: hidden;
  11. .nut-hor-list{
  12. height: 100%;
  13. display: inline-flex;
  14. flex-direction: row;
  15. box-orient: horizontal;
  16. box-direction: normal;
  17. }
  18. .nut-hor-control{
  19. height: 100%;
  20. }
  21. }
  22. // 竖向滚动
  23. .nut-vert-scroll{
  24. flex: 1;
  25. overflow: hidden;
  26. .nut-vert-list{
  27. width: 100%;
  28. position: relative;
  29. }
  30. .nut-vert-pulldown{
  31. position: absolute;
  32. top: -50px;
  33. width: 100%;
  34. }
  35. .nut-vert-loadmore, .nut-vert-pulldown, .nut-vert-unloadmore{
  36. height: 50px;
  37. text-align: center;
  38. line-height: 50px;
  39. font-size: 12px;
  40. color: #999;
  41. .nut-vert-pulldown-status, .nut-vert-loadmore-status{
  42. height: 50px;
  43. }
  44. .nut-vert-loading{
  45. height: 20px;
  46. width: 20px;
  47. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAP1BMVEUAAAD0KA/xJhHxJA7yJA7xJA7xJA7xJA7xJA7wJA7xJA7xJA7xJA7xJA7xJA7xJA3xJA7xJA7xJA7xJA7xJA5JCyllAAAAFXRSTlMACxdEI3NalDdn3LyvLstPoveIgOl7Sm+EAAABiklEQVRIx9XS0W7kIAxAUWyDwckAIfD/37owUyndbbMJrtSq92UeoiMbGHMWRqKciSKamSw5v23b462d7T0HVIc76NrbGK8h+153vgozi9u39ZW7wOSfSYB3pyY3JqdV4ByiG86FTw6xrSmlx+mZ4757X8PJPo/Uo5OPe4/MaTwGy6dfOvz/VeAY7OGjrPvOcHH9PqXFf9i21krmMrcsi/vnhg55bfPfr1Irm1v5bqM5ElcF7lFYl2WF46DOOTA3w/TuuNBlMLeTvjIeQ8XcD9LS9mOoNRPl1t7GBufYTLW29jotP4dOjk2mhyJi5oKltfG2UYTMZL4VN6aL2FnKpTzGjwjMUiyl9b1F2Ey3lILjlvI8XUshY5lpnm6l8KBhnvpSxETmOE/3UpySjo6Fv5UiMykp5JyNsk5BSUPOqL2nnKP2sERklHWq3pgoaDf+nWPVfwsK6rcNIVilxW7xB6wNMVqtjXqLnVrQWbAj+IJFHcanRQAlxhH0xiJza7/owIrpMOBrsK4L9wckTA/GBoy0fQAAAABJRU5ErkJggg==) no-repeat 0 0;
  48. background-size: 100%;
  49. animation: rotation 2s linear infinite;
  50. }
  51. .nut-vert-loading-txt{
  52. height: 50px;
  53. padding-left: 5px;
  54. }
  55. .nut-vert-loading, .nut-vert-loading-txt{
  56. display: inline-block;
  57. vertical-align: middle;
  58. }
  59. }
  60. }