.news-list { width: 100%; background: #fff; box-sizing: border-box; padding: 0 35rpx; margin-top: 10rpx; } .news-list .list-item { width: 100%; height: 205rpx; box-sizing: border-box; padding: 30rpx 0; display: flex; align-items: center; justify-content: space-between; } .news-list .list-item .left { width: calc(100% - 50rpx - 220rpx); height: 146rpx; } .news-list .list-item .left .title { color: #3f3f3f; font-size: 30rpx; line-height: 45rpx; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-list .list-item .left .bottom { display: flex; align-items: center; justify-content: space-between; } .news-list .list-item .left .bottom .category { color: #aaa; font-size: 22rpx; line-height: 48rpx; width: calc(100% - 150rpx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-list .list-item .left .bottom .time { color: #aaa; font-size: 22rpx; line-height: 48rpx; width: 150rpx; text-align: right; } .news-list .list-item .right { width: 220rpx; height: 146rpx; border-radius: 12rpx; overflow: hidden; } .news-list .list-item .right image { width: 100%; height:100%; } .news-list .list-item + .list-item { border-top: 1rpx solid #ece9ec; } .news-list .hover-sudoku { background: rgba(0,0,0,0.1); }