page { width: 100%; background: #f4f4f4; } .evaluation-list{ padding:30rpx 24rpx; } .evaluation-item{ padding:30rpx 30rpx 36rpx 30rpx; background: #FFFFFF; border-radius: 24rpx; width:702rpx; margin-bottom:20rpx; } .evaluation-item .item-left{ width:510rpx; } .eval-top{ display: flex; height: 60rpx; align-items: center; } .eval-top .avatar{ width:60rpx; height:60rpx; border-radius: 60rpx; } .eval-top .name{ margin:0 10rpx; font-size: 28rpx; color:#000; } .eval-top .tag{ height: 38rpx; line-height: 38rpx; background: rgba(1,187,243,0.1); border-radius: 10rpx; color: #01BBF3; font-size: 24rpx; padding:0 12rpx; margin-right:10rpx; } .eval-top .hp{ height: 38rpx; line-height: 38rpx; background: rgba(255,71,71,0.1); border-radius: 10rpx; color: #FF5252; font-size: 24rpx; padding:0 12rpx; } .eval-top .date{ flex:1; text-align: right; } .eval-content{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; margin-bottom:24rpx; } .evaluation-item .item-bottom{ display: flex; flex-wrap: wrap; } .evaluation-item .item-bottom image{ width:144rpx; height:144rpx; border-radius:10rpx; margin-right:16rpx; margin-bottom:8rpx; }