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

<template>
  <div style="margin-top: 20px; min-height: 100px; background: #FFFFFF;">
    <div class="commet-title">
      <span><i class="el-icon-edit"></i> 用户评论</span>
    </div>
    <div class="commet-show">
      <el-row :gutter="10">
        <el-col :span="18">
          <div class="commet-list">
            <commet-item v-for="(commet, index) in commets" :key="index" :commet="commet"/>
            <span class="no-commet" v-if="!commets || commets.length === 0">暂无评论</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="commet-submit">
            <el-input
              type="textarea"
              :rows="10"
              resize="none"
              placeholder="发表评论">
            </el-input>
            <div style="margin-top: 20px;">
              <el-button type="success">发表评论</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CommetItem from './CommetItem'

export default {
  components: {
    CommetItem
  },
  data () {
    return {
      commets: [
        {
          id: 1,
          userName: "飞翔的企鹅",
          time: "2018-04-03 11:30:35",
          icon: "/icon.jpg",
          message: "这个应用真好用啊！！！"
        },
        {
          id: 2,
          userName: "飞翔的企鹅2",
          time: "2018-04-03 11:30:35",
          icon: "/icon.jpg",
          message: "突然看到首页又有这个软件……居然还没挂……想看这类小说的去起点看如倾如诉的书吧，虽然现在我觉得它的小说有点不合胃口，但是这类小说里他的书是顶尖的。毕竟题材限制，如果只是火影同人的话建议看火影之活久见，还有三千世的三部曲（有很小的腐向但是文笔超好）"
        },
        {
          id: 3,
          userName: "我的名字你不懂",
          time: "2018-04-03 11:47:26",
          icon: "/icon.jpg",
          message: "软件用了有一段时间了，能查电费，能交电费，还是很方便的"
        },
        {
          id: 4,
          userName: "我的名字你不懂",
          time: "2018-04-03 11:47:26",
          icon: "/icon.jpg",
          message: "软件用了有一段时间了，能查电费，能交电费，还是很方便的"
        }
      ],
      noCommets: []
    }
  }
}
</script>


<style scoped>
.commet-title {
  padding: 5px 10px;
  background: rgb(200, 200, 200);
}
.commet-title span {
  font-size: 18px;
  font-weight: bold;
}
.commet-show {
  padding-top: 25px;
}
.commet-list {
  min-height: 300px;
  border-right: solid;
  border-right-width: 1px;
}
.commet-list .no-commet {
  font-size: 20px;
  font-weight: 500;
}
.commet-submit {
  padding: 0 10px;
}
</style>