.review{ padding: 20rpx 24rpx; background: #F6F6F6; min-height: 100vh; } .review .item{ background: #FFFFFF; border-radius: 16rpx 16rpx 16rpx 16rpx; margin-bottom: 20rpx; padding: 24rpx; } .review .item .goods-box .shop-info{ display: flex; } .review .item .goods-box .shop-info .icon{ width: 36rpx; height: 36rpx; } .review .item .goods-box .shop-info .shop-name{ font-weight: bold; font-size: 28rpx; color: #222222; margin-left: 20rpx; margin-bottom: 20rpx; } .review .item .goods-box .relative{ position: relative; } .review .item .goods-box .goods-list{ white-space: nowrap; padding: 28rpx 20rpx; background: #F9F9F9; border-radius: 16rpx 16rpx 16rpx 16rpx; width: 654rpx; height: 176rpx; box-sizing: border-box; margin-bottom: 20rpx; } .review .item .goods-box .goods-list .img{ display: inline-block; width: 120rpx; height: 120rpx; border-radius: 16rpx 16rpx 16rpx 16rpx; background: #ccc; margin-right: 20rpx; } .review .item .goods-box .relative .total-box{ position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 148rpx; height: 176rpx; background: #F9F9F9; box-shadow: -6rpx 0rpx 6rpx 2rpx rgba(0,0,0,0.04); border-radius: 0rpx 16rpx 16rpx 0rpx; } .review .item .goods-box .goods-list .total-box .price{ font-weight: 800; font-size: 32rpx; color: #FF4D3A; margin-bottom: 12rpx; } .review .item .goods-box .goods-list .total-box .num{ font-size: 28rpx; color: #AAAAAA; } .review .item .comment .info{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .review .item .comment .user-info{ display: flex; align-items: center; } .review .item .comment .user-info .head{ width: 60rpx; height: 60rpx; border-radius: 50%; background-color: #AAAAAA; } .review .item .comment .user-info .name{ font-weight: bold; font-size: 24rpx; color: #222222; margin-left: 16rpx; } .review .item .comment .info .time{ font-size: 24rpx; color: #AAAAAA; } .review .item .comment .score-box{ display: flex; margin-bottom: 20rpx; } .review .item .comment .score-box .num{ font-size: 24rpx; color: #AAAAAA; margin-right: 20rpx; } .review .item .comment .score-box .star{ width: 32rpx; height: 32rpx; } .review .item .comment .content .desc{ font-size: 28rpx; color: #222222; margin-bottom: 20rpx; } .review .item .comment .content .img-box{ display: flex; width: 650rpx; overflow: auto; margin-bottom: 20rpx; } .review .item .comment .content .img-box .img{ width: 204rpx; height: 204rpx; border-radius: 32rpx 32rpx 32rpx 32rpx; background: #AAAAAA; } .review .item .comment .content .img-box .img+.img{ margin-left: 20rpx; } .review .item .comment .content .reply{ background: #F9F9F9; border-radius: 16rpx 16rpx 16rpx 16rpx; padding: 24rpx; display: flex; } .review .item .comment .content .reply .label{ font-size: 24rpx; color: #AAAAAA; white-space: nowrap; } .review .item .comment .content .reply .value{ font-size: 24rpx; color: #222222; margin-left: 20rpx; }