.fxm-comment-item{
  width: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  &-header{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  &-header-left{
    display: flex;
    flex-direction: row;
  }
  &-header-img{
    width: @comment-item-header-img;
    height: @comment-item-header-img;
    border-radius: @comment-item-header-img;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: @comment-item-margin-12;    
    img{
      border-radius: @comment-item-header-img;
      width: 100%;
      height: 100%;
    }
  }
  &-header-name{
    font-size: @comment-item-header-font;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
  }
  &-header-left-name{
    display: flex;
    flex-direction: column;
  }
  &-header-time{
    font-size: @comment-item-header-font-12;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
  }
  &-header-right{
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: flex-end;
  }
  &-cotent{
    font-size: @comment-item-header-font;
    font-family: var(--light-font, SFProText-Medium, SFProText);
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    margin: @comment-item-margin-12 0;
  }
  &-imgList{
    width: 100%;
    display: flex;
    flex-direction: row;
    height: @comment-item-cot-height;
    overflow-x: scroll;
    overflow-y: hidden;
    img{
      height: @comment-item-img-height;
      width: @comment-item-img-height;
      margin-right: @comment-item-margin-8;
    }
    video{
      height: @comment-item-img-height;
      width: @comment-item-img-height;
      margin-right: @comment-item-margin-8;
    }
  }
}