<template>
  <div class="comment-container">
    <text class="iconfont comment-left">&#xe643;</text>
    <div class="comment-right">
      <text class="text-remark">{{ item.name }}</text>
      <text class="text-black">{{ item.comment }}</text>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item']
  /* -------------------SelfCustomEvent------------------ */
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';
.comment-container {
  padding: @gap-4 @gap-4 0 @gap-4;
  background-color: @white;
  width: 100%;
  .flex-box-mixins(row, flex-start, flex-start);
}
.comment-left {
  width: 60px;
  font-size: 40px;
  padding-right: @gap-2;
}
.comment-right {
  flex: 1;
  flex-direction: column;
  .border-bottom-mixins();
  .text-remark,
  .text-black {
    margin-bottom: @gap-4;
  }
}
</style>
