index.module.less 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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. background: rgba(247,203,143,1);
  20. .cover {
  21. position: absolute;
  22. left: 0;
  23. right: 0;
  24. top: 0;
  25. bottom: 0;
  26. display: block;
  27. width: 100%;
  28. height: 100%;
  29. object-fit: cover;
  30. }
  31. .title {
  32. position: relative;
  33. text-align: center;
  34. padding: 14px;
  35. color:#742C00;
  36. font-size: 14px;
  37. }
  38. .num {
  39. position: absolute;
  40. left: 50%;
  41. bottom: 12px;
  42. transform: translateX(-50%);
  43. display: flex;
  44. align-items: center;
  45. justify-content: center;
  46. font-size: 12px;
  47. width: 50%;
  48. height: 20px;
  49. border-radius: 20px;
  50. background-color: #fff;
  51. color: #742c00;
  52. }
  53. .look {
  54. position: absolute;
  55. left: 0;
  56. right: 0;
  57. top: 0;
  58. bottom: 0;
  59. background-color: rgba(0, 0, 0, 0.6);
  60. z-index: 10;
  61. display: flex;
  62. align-items: center;
  63. justify-content: center;
  64. color: #fff;
  65. }
  66. }
  67. }