chelvc-custom/src/components/comment/CommentList.vue

<template>
  <view>
    <block>
      <view
        class="item"
        v-for="item in 10"
        :key="item"
        @click="$Router.push('/pages/community/commDetail/index')"
      >
        <view class="item-avatar">
          <u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg" />
        </view>
        <view class="item-content">
          <u--text text="uView UI" type="primary" bold size="17"></u--text>
          <u--text
            margin="0 0 8px 0"
            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
          ></u--text>
          <u-album :urls="urls2"></u-album>
          <view>
            <text
              class="iconfont icon-thumb-up"
              style="font-size: 48rpx; padding: 20rpx 0"
            ></text>
            <text
              class="iconfont icon-heart"
              style="font-size: 48rpx; padding: 20rpx 0; margin-left: 20rpx"
            ></text>
          </view>
        </view>
      </view>
    </block>
    <block>
      <u-empty
        icon="/static/default-graph/no-comment.png"
        text="暂无数据"
      ></u-empty>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      albumWidth: 0,
      urls2: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.item {
  padding: 10rpx 0;
  display: flex;
  .item-avatar {
  }
  .item-content {
    margin-left: 10rpx;
    ::v-deep .u-cell__body {
      padding: 0;
    }
  }
}
</style>