chelvc-custom/src/components/dynamic-list/dynamic-list.vue

<template>
  <view class="dynamic-list">
    <view v-for="(item, index) in 3" :key="index" class="u-m-b-60">
      <view class="fl-flex-item u-m-b-16">
        <view class="fl-flex">
          <u-avatar src="/static/img.jpg" size="50" />
          <view class="u-m-l-16">
            <view class="f-s-30 text-primary text-bold u-m-b-6 u-m-t-8">易只烊</view>
            <u-rate v-model="value" readonly gutter="0"></u-rate>
          </view>
        </view>
        <view class="f-s-24 text-999">2024.05.23</view>
      </view>
      <view class="dynamic-content">
        评价评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容内容
      </view>
      <u-album
        :urls="urls2"
        :multipleSize="multipleSize"
        :space="space"
        :singleSize="singleSize"
        :maxCount="maxCount"
        :rowCount="rowCount"
      ></u-album>

      <view class="fl-flex-item u-m-t-24">
        <view class="f-s-24 text-999">预览 10</view>
        <view class="fl-flex">
          <view class="like-message u-m-r-24 fl-flex">
            <!-- <u-icon name="thumb-up" color="#333" size="18"></u-icon> -->
            <u-icon name="thumb-up-fill" color="red" size="18"></u-icon>
            <text class="u-m-l-4">619</text>
          </view>
          <view class="like-message fl-flex">
            <u-icon name="chat" color="#333" size="18"></u-icon>
            <text class="u-m-l-4">619</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    maxCount: {
      type: Number,
      default: 3,
    },
    singleSize: {
      type: Number,
      default: 300,
    },
    space: {
      type: Number,
      default: 10,
    },
    multipleSize: {
      type: Number,
      default: 110,
    },
    rowCount: {
      type: Number,
      default: 3,
    },
    bottomShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      value: 4,
      urls2: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
      ],
    };
  },
  methods: {
    handleMore(item) {
      this.$emit('more', item);
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamic-list {
  background-color: #fff;
  .dynamic-content {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #0c1223;
    margin-bottom: 24rpx;
  }
  .like-message {
    height: 54rpx;
    line-height: 54rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #0c1223;
    border-radius: 54rpx;
    background-color: #f5f6f8;
  }
}
</style>