| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- /* module/article/components/waterfall-card/waterfall-card.wxss */
- .waterfall-card-item {
- display: flex;
- flex-direction: column;
- background: #fff;
- border-radius: 12px;
- overflow: hidden;
- margin-bottom: 0;
- box-sizing: border-box;
- width: 98%;
- .cover-wrapper {
- width: 100%;
- min-height: 120px;
- max-height: 260px;
- overflow: hidden;
- border-radius: 12px 12px 0 0;
- position: relative;
- }
- .cover {
- width: 100%;
- height: auto;
- min-height: 120px;
- max-height: 260px;
- display: block;
- /* 图片等宽,高度自适应,最小高度120px,最大高度260px,保持原始宽高比,实现不等高效果 */
- }
- .content {
- display: flex;
- flex-direction: column;
- padding: 12px;
- box-sizing: border-box;
- flex: 1;
- }
- .title {
- font-size: 15px;
- color: #191919;
- line-height: 1.5;
- margin-bottom: 5px;
- word-break: break-all;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .meta-info {
- display: flex;
- flex-direction: column;
- gap: 4px;
- font-size: 12px;
- color: #8C8C8C;
- margin-top: auto;
- }
- .date {
- font-size: 12px;
- color: #8C8C8C;
- margin-bottom: 5px;
- }
- .read-count {
- font-size: 12px;
- color: #8C8C8C;
- }
- }
|