.comment-item-box { margin: 10px 0 0 0; padding: 15px 5px 0 5px; border-top: 1px solid #eee; } .comment-item-left { display: inline-block; vertical-align: top; width: 40px; } .comment-item-right { display: inline-block; width: 90%; margin-left: 20px; margin-bottom: 20px; } .comment-item-avatar { width: 40px; height: 40px; border-radius: 20px; background-position: center; background-size: cover; cursor: pointer; } .comment-item-name { font-size: 16px; } .comment-item-content { margin: 10px 0; font-size: 16px; word-break: break-all; } .comment-item-speak { margin-top: 4px; } .comment-item-speak-message { font-size: 14px; color: #71c135; } .comment-item-speak-audio-wrapper { margin-top: 8px; width: 350px; height: 44px; } .comment-item-bottom { display: flex; justify-content: flex-end; margin: 20px auto; line-height: 18px; } .comment-item-bottom-left { float: left; user-select: none; } .comment-item-bottom-right { cursor: pointer; } .comment-item-divider { width: 2px; height: 24px; background: #c6c6c6; margin-top: -2px; } .comment-item-delete, .comment-item-edit, .comment-item-like, .comment-item-unlike { display: inline-block; background: url(../../assert/icon_delete.png); width: 18px; height: 18px; background-size: 100% 100%; cursor: pointer; } .comment-item-delete { margin-right: 18px; } .comment-item-edit { background: url(../../assert/icon_answer@2x.png); background-size: 100% 100%; margin-right: 18px; /* margin-left: 10px; */ } .comment-item-like { background: url(../../assert/icon_like_fill.png); background-size: 100% 100%; margin-left: 15px; margin-right: 2px; } .comment-item-unlike { background: url(../../assert/icon_like_line.png); background-size: 100% 100%; margin-left: 15px; margin-right: 2px; } .comment-item-reply { margin-left: 20px; cursor: pointer; color: #3c9cfe; } .comment-item-bottom-left { color: #71c135; margin-right: 20px; } .comment-favor { font-size: 20px; } .comment-favored { color: #c00; } .comment-item-image { margin-left: -5px; width: 400px; max-width: 100%; } .comment-item-image .comment-item-image-wrapper { float: left; width: 25%; box-sizing: border-box; padding: 5px; } .comment-item-image .comment-item-image-wrapper .comment-img-thumbnail { background-position: center; background-size: cover; display: inline-block; width: 100%; height: 0; padding-bottom: 100%; border-radius: 5px; cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined'), auto; } .comment-item-image .comment-item-image-wrapper .comment-img-divider { display: inline-block; width: 100%; height: 0; padding-bottom: 100%; border-radius: 5px; } .comment-item-image .comment-img { margin-right: 10px; } .avatar-hover-card-overlay { padding-top: 0; } .avatar-hover-card-overlay .ant-popover-inner-content { padding: 0; } .avatar-hover-card-overlay .ant-popover-arrow { display: none; } @media screen and (max-width: 616px) and (min-width: 449px) { .comment-item-right { display: inline-block; width: 85%; margin-left: 10px; } .comment-item-speak-audio-wrapper { width: 350px; } } @media screen and (max-width: 449px) and (min-width: 365px) { .comment-item-right { display: inline-block; width: 80%; margin-left: 10px; } .comment-item-speak-audio-wrapper { width: 266px; } } @media screen and (max-width: 365px) { .comment-item-right { display: inline-block; width: 75%; margin-left: 10px; } .comment-item-speak-audio-wrapper { width: 218px; } } @media (max-width: 575px) { .comment-item-avatar { width: 32px; height: 32px; border-radius: 16px; } .comment-item-name { font-size: 14px; } .comment-item-content { font-size: 14px; margin: 4px 0; } .comment-item-date { font-size: 12px; } }