page { background: #f6f6f6; } .box { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 30rpx; border-radius: 18rpx; // background: #ffffff; .recommended-box { width: 336rpx; background: #ffffff; border-radius: 18rpx; padding-bottom: 20rpx; margin-top: 30rpx; .price { color: red; font-size: 30rpx; margin: 20rpx 0 0 20rpx; } .recommended-image { width: 336rpx; height: 240rpx; border-radius: 18rpx; } .recommended-name { font-size: 30rpx; font-weight: 500; color: #222222; line-height: 36rpx; margin: 10rpx 0 0 20rpx; height: 80rpx; overflow: hidden; //一定要写 text-overflow: ellipsis; //超出省略号 display: -webkit-box; //一定要写 -webkit-line-clamp: 2; //控制行数 -webkit-box-orient: vertical; //一定要写 } .recommended-score { display: flex; margin: 0 20rpx; .price { color: red; font-size: 30rpx; margin: 0rpx 0 0 20rpx; } .score { font-size: 30rpx; font-weight: bold; color: #F01740; line-height: 36rpx; margin-right: 20rpx; } .sale { font-size: 30rpx; font-weight: 400; color: #666666; line-height: 36rpx; } .recommended-address { font-size: 24rpx; font-family: Source Han Sans CN; font-weight: 300; color: #666666; line-height: 36rpx; margin: 20rpx 0 0 0rpx; } } .recommended-distance { font-size: 24rpx; color: #666666; margin: 20rpx 0 0 20rpx; } } }