.container{ display: flex; flex-direction: column; } .topic_info{ display: flex; flex-direction: column; padding: 10px 20px 10px 20px; } .topic_title{ font-size: 18px; } .topic_time{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 0 10px 0; } .topic_time_left{ font-size: 13px; color: #B3B3B3; } .topic_time_right{ padding: 0 10px; width: 20px; height: 20px; line-height: -10px; } image{ width: 100%; height: 100%; } .topic_userInfo{ border-radius: 5px; padding: 10px; background-color: #FEFAF6; display: flex; flex-direction: row; align-items: center; } .user_icon{ width: 30px; height: 30px; border-radius: 50%; background-color: #EFECE8; } .user_text{ display: flex; flex-direction: column; color: #808B8C; padding: 0 10px; font-weight: 0; } .user_text :first-child{ font-size: 14px; } .user_text :last-child{ font-size: 12px; } .topic_detail{ display: flex; flex-direction: column; padding: 20px 20px; /* border-bottom: 7px solid #FAFAFA; */ } .topic_detail_text{ color: #373737; font-size: 15px; } .section_line { padding: 0; height: 7px; width: 100%; background-color: #FAFAFA; } .topic_detail_imgs{ width: 100%; padding: 10px 0; display: flex; justify-content: flex-start; flex-wrap: wrap; } .imgList-li { width: 100px; height: 100px; margin: 5px 5px; } .img{ width: 100%; height: 100%; } .topic_comment{ padding: 10px 20px; display: flex; flex-direction: column; } .topic_comment_top{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 40px; /* border-bottom: 1px solid #E7E7E7; */ } .commnetBtn{ margin: 0; } .comment_info{ padding: 10px 0; display: flex; flex-direction: row; border-top: 1px solid #E7E7E7; } .comment_info_left{ width: 30px; height: 30px; border-radius: 50%; background-color: red; } .comment_icon{ width: 30px; height: 30px; } .comment_info_right{ width: 100%; display: flex; flex-direction: column; padding: 0 10px; } .comment_info_userName{ font-size: 14px; color: #66708B; } .comment_info_detail{ font-size: 14px; color: #3B3B3B; } .comment_info_time{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .comment_info_time_left{ font-size: 10px; color: #999999; } .comment_info_time_right{ display: flex; flex-direction: row; align-items: center; } .praiseNum{ font-size: 10px; color: #ABABAB; } .praiseIcon{ margin-left: 5px; width: 10px; height: 10px; }