luban-app-store-web/components/app/CommetItem.vue

<template>
  <el-row>
    <el-col :span="3">
      <img :src="commet.icon" class="commet-user-icon"/>
    </el-col>
    <el-col :span="20">
      <div>
        <span class="commet-user-name">{{commet.userName}}</span> {{commet.time}}
      </div>
      <div class="commet-content">{{commet.message}}</div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: ["commet"]
}
</script>


<style scoped>
.el-row {
  margin: 10px 0 15px;
}
.el-col-3 {
  text-align: center;
}
.commet-user-icon {
  max-width: 80px;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  border: 1px solid #c0c4cc;
}
.commet-user-name {
  font-size: 18px;
  font-weight: 500;
}
.commet-content {
  padding: 10px 0;
  min-height: 40px;
}
</style>