waterfall-card.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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: 98%;
  11. .cover-wrapper {
  12. width: 100%;
  13. min-height: 120px;
  14. max-height: 260px;
  15. overflow: hidden;
  16. border-radius: 12px 12px 0 0;
  17. position: relative;
  18. }
  19. .cover {
  20. width: 100%;
  21. height: auto;
  22. min-height: 120px;
  23. max-height: 260px;
  24. display: block;
  25. /* 图片等宽,高度自适应,最小高度120px,最大高度260px,保持原始宽高比,实现不等高效果 */
  26. }
  27. .content {
  28. display: flex;
  29. flex-direction: column;
  30. padding: 12px;
  31. box-sizing: border-box;
  32. flex: 1;
  33. }
  34. .title {
  35. font-size: 15px;
  36. color: #191919;
  37. line-height: 1.5;
  38. margin-bottom: 5px;
  39. word-break: break-all;
  40. display: -webkit-box;
  41. -webkit-box-orient: vertical;
  42. -webkit-line-clamp: 3;
  43. overflow: hidden;
  44. text-overflow: ellipsis;
  45. }
  46. .meta-info {
  47. display: flex;
  48. flex-direction: column;
  49. gap: 4px;
  50. font-size: 12px;
  51. color: #8C8C8C;
  52. margin-top: auto;
  53. }
  54. .date {
  55. font-size: 12px;
  56. color: #8C8C8C;
  57. margin-bottom: 5px;
  58. }
  59. .read-count {
  60. font-size: 12px;
  61. color: #8C8C8C;
  62. }
  63. }