index.module.less 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .grid {
  2. :global {
  3. .van-grid-item {
  4. .van-grid-item__content {
  5. padding: 0;
  6. background: transparent;
  7. &::after {
  8. display: none;
  9. }
  10. }
  11. }
  12. }
  13. .gridItem {
  14. position: relative;
  15. width: 100%;
  16. height: 130px;
  17. border-radius: 8px;
  18. overflow: hidden;
  19. .cover {
  20. position: absolute;
  21. left: 0;
  22. right: 0;
  23. top: 0;
  24. bottom: 0;
  25. z-index: -1;
  26. display: block;
  27. width: 100%;
  28. height: 100%;
  29. object-fit: cover;
  30. }
  31. .title {
  32. text-align: center;
  33. padding: 10px;
  34. color:#742C00;
  35. }
  36. .num {
  37. position: absolute;
  38. left: 50%;
  39. bottom: 12px;
  40. transform: translateX(-50%);
  41. display: flex;
  42. align-items: center;
  43. justify-content: center;
  44. font-size: 12px;
  45. width: 50%;
  46. height: 20px;
  47. border-radius: 20px;
  48. background-color: #fff;
  49. color: #742c00;
  50. }
  51. .look {
  52. position: absolute;
  53. left: 0;
  54. right: 0;
  55. top: 0;
  56. bottom: 0;
  57. background-color: rgba(0, 0, 0, 0.6);
  58. z-index: 10;
  59. display: flex;
  60. align-items: center;
  61. justify-content: center;
  62. color: #fff;
  63. }
  64. }
  65. }