.comment_container { position: fixed; z-index: 9999; bottom: 0; width: 100%; // height: auto; // min-height: 450rpx; // max-height: 900rpx; height: 850rpx; background: #ffffff; padding-bottom: 200rpx; box-sizing: border-box; .comment_number { width: 100%; height: 68rpx; display: flex; align-items: center; padding-left: 20rpx; color: #4a4a4a; font-size: 30rpx; } .comment_item { width: 100%; display: flex; flex-direction: column; padding-left: 20rpx; padding-right: 68rpx; box-sizing: border-box; margin-bottom: 14rpx; .comment_box { width: 100%; display: flex; flex-direction: row; box-sizing: border-box; padding-bottom: 24rpx; padding-left: 48rpx; border-bottom: 1rpx solid rgba(151,151,151,.34); .avatar_box { width: 111rpx; height: 100%; display: block; margin-right: 15rpx; image { width: 96rpx; height: 96rpx; background: chocolate; border-radius: 50%; } } .comment_info { display: flex; flex-direction: column; align-items: flex-start; width: 100%; .nickname { font-size: 30rpx; color: rgba(0, 0, 0, .6); } .comment_text { font-size: 30rpx; color: rgba(0, 0, 0, 0.8); margin-bottom: 23rpx; } .comment_reply_wrapper { background: rgba(0, 0, 0, .03); width: 100%; padding-left: 12rpx; padding-top: 10rpx; box-sizing: border-box; .comment_reply_item { font-size: 28rpx; color: rgba(0, 0, 0, .8); .reply_nickname { color: rgba(1, 67, 124, .8); } } .more_btn { display: flex; justify-content: flex-end; width: 100%; height: 37rpx; font-size: 26rpx; color: #698FAF; padding-right: 20rpx; box-sizing: border-box; padding-bottom: 20rpx; } } .time_info { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 30rpx; .time { color: rgba(0, 0, 0, .8); font-size: 28rpx; } .info { width: 200rpx; height: 100%; display: flex; position: relative; .like { width: 80rpx; height: 35rpx; display: flex; align-items: center; position: absolute; top: -14rpx; left: 0; image { width: 30rpx; height: 27rpx; margin-right: 12rpx; } text { font-size: 22.4rpx; color: rgba(0, 0, 0, .8); } } .comment { width: 80rpx; height: 35rpx; display: flex; align-items: center; position: absolute; top: -14rpx; left: 120rpx; image { width: 28.8rpx; height: 25rpx; margin-right: 16rpx; } text { font-size: 22.4rpx; color: rgba(0, 0, 0, .8); } } } } } } } .comment_input { width: 100%; height: 205rpx; background: #eee; position: fixed; bottom: 0; z-index: 9999; padding-left: 24rpx; box-sizing: border-box; display: flex; align-items: center; .send_input { width: 575rpx; height: 94rpx; background: #fff; border-radius: 10rpx; padding-left: 50rpx; ::placeholder{ text-indent: 10rpx; color: #000; } } .send_btn{ width: 120rpx; height: 48rpx; line-height: 48rpx; text-align: center; color: #42a8ff; font-size: 34rpx; } } }