.tab{ position: fixed; top: 0; left: 0; right: 0; width: 100%; padding: 0 30rpx; box-sizing: border-box; overflow-x: scroll; white-space: nowrap; } .tab-btn{ display: inline-block; width: 158rpx; text-align: center; line-height: 60rpx; margin-right: 20rpx; border-radius: 35rpx; background:rgba(203,203,203,.3); font-size: 28rpx; color: #5e5e5e; } .tab-btn.active{ color: #fff; background: #4B7AFE; } .news-list{ margin-top: 70rpx; padding: 0 30rpx 10rpx; } .news-box{ padding: 10rpx; border: 1px solid #ddd; display: flex; border-radius: 10rpx; justify-content: space-between; margin-top: 10rpx; } .news-image{ width: 35%; height: 180rpx; } .news-image image{ width: 100%; height: 100%; } .news-info{ width: 63%; } .news-title{ text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 5rpx 0; font-size: 34rpx; color: #000; } .news-text{ color: #BBB; font-size: 28rpx; margin-top: 10rpx; }