grid-item.wxss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. .tui-grid {
  2. position: relative;
  3. padding: 40rpx 20rpx;
  4. box-sizing: border-box;
  5. background: #fff;
  6. float: left;
  7. }
  8. .tui-grid-2 {
  9. width: 50%;
  10. }
  11. .tui-grid-3 {
  12. width: 33.333333333%;
  13. }
  14. .tui-grid-4 {
  15. width: 25%;
  16. }
  17. .tui-grid-5 {
  18. width: 20%;
  19. }
  20. .tui-grid-2:nth-of-type(2n)::before, .tui-grid-3:nth-of-type(3n)::before,
  21. .tui-grid-4:nth-of-type(4n)::before, .tui-grid-5:nth-of-type(5n)::before{
  22. width: 0;
  23. border-right: 0;
  24. }
  25. .tui-grid::before {
  26. content: " ";
  27. position: absolute;
  28. right: 0;
  29. top: 0;
  30. width: 1px;
  31. bottom: 0;
  32. border-right: 1px solid #eaeef1;
  33. -webkit-transform-origin: 100% 0;
  34. transform-origin: 100% 0;
  35. -webkit-transform: scaleX(0.5);
  36. transform: scaleX(0.5);
  37. }
  38. .tui-grid::after {
  39. content: " ";
  40. position: absolute;
  41. left: 0;
  42. bottom: 0;
  43. right: 0;
  44. height: 1px;
  45. border-bottom: 1px solid #eaeef1;
  46. -webkit-transform-origin: 0 100%;
  47. transform-origin: 0 100%;
  48. -webkit-transform: scaleY(0.5);
  49. transform: scaleY(0.5);
  50. }
  51. .tui-grid-bottom::after{
  52. height: 0 !important;
  53. border-bottom: 0 !important;
  54. }
  55. .tui-grid-bg {
  56. position: relative;
  57. padding: 0;
  58. width: 100%;
  59. box-sizing: border-box;
  60. }
  61. /* .tui-grid-icon {
  62. margin: 0 auto;
  63. }
  64. .tui-grid-icon + .tui-grid-label {
  65. margin-top: 10rpx;
  66. }
  67. .tui-grid-label {
  68. display: block;
  69. text-align: center;
  70. font-weight: 400;
  71. color: #333;
  72. font-size: 28rpx;
  73. white-space: nowrap;
  74. overflow: hidden;
  75. text-overflow: ellipsis;
  76. } */
  77. .tui-item-hover {
  78. background: #f7f7f9 !important;
  79. }