RentWeAppFront/components/asset/assetList.vue

<template>
  <view class="asset-list">
    <view
      v-for="item in list"
      :key="item.assetsNo"
      class="asset-card"
      @click="onClick(item)"
    >
      <image class="cover" :src="'https://www.wujiaguotou.com' + item.coverImgUrl" mode="aspectFill" />

      <view class="info">
        <text class="name">{{ item.assetsName }}</text>
        <text class="address">{{ item.assetsAddress }}</text>
      </view>

      <u-icon name="arrow-right" size="28" color="#999" class="arrow" />
    </view>

     <u-empty v-if="list.length === 0" mode="list" text="暂无资产数据" />
  </view>
</template>

<script>
export default {
  name: "AssetList",
  props: {
    list: {
      type: Array,
      default: () => [],
    }
  },
  emits: ["click"],
  onLoad(options) {
  },
  methods: {
    onClick(item) {
      this.$emit("click", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.asset-list {
  padding: 20rpx;
}

.asset-card {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  position: relative;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

  .cover {
    width: 160rpx;
    height: 120rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
    background-color: #f0f0f0;
  }

  .info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .name {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 6rpx;
    }

    .address {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 4rpx;
    }

    .status {
      font-size: 24rpx;
      color: #409eff;
    }
  }

  .arrow {
    margin-left: 10rpx;
  }
}
</style>