waterfall-card.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /* module/article/components/waterfall-card/waterfall-card.wxss */
  2. .waterfall-card-item {
  3. display: flex;
  4. flex-direction: column;
  5. background: #fff;
  6. border-radius: 12px;
  7. overflow: hidden;
  8. margin-bottom: 0;
  9. box-sizing: border-box;
  10. width: 100%;
  11. .cover {
  12. width: 100%;
  13. height: auto;
  14. display: block;
  15. border-radius: 12px 12px 0 0;
  16. /* 图片等宽,高度自适应,实现不等高效果 */
  17. }
  18. .content {
  19. display: flex;
  20. flex-direction: column;
  21. padding: 12px;
  22. box-sizing: border-box;
  23. flex: 1;
  24. }
  25. .title {
  26. font-size: 16px;
  27. color: #191919;
  28. line-height: 1.5;
  29. margin-bottom: 5px;
  30. word-break: break-all;
  31. display: -webkit-box;
  32. -webkit-box-orient: vertical;
  33. -webkit-line-clamp: 3;
  34. overflow: hidden;
  35. text-overflow: ellipsis;
  36. }
  37. .meta-info {
  38. display: flex;
  39. flex-direction: column;
  40. gap: 4px;
  41. font-size: 12px;
  42. color: #8C8C8C;
  43. margin-top: auto;
  44. }
  45. .date {
  46. font-size: 12px;
  47. color: #8C8C8C;
  48. margin-bottom: 5px;
  49. }
  50. .read-count {
  51. font-size: 12px;
  52. color: #8C8C8C;
  53. }
  54. }