frontend-uniapp/pet-manual/components/CardList.vue

<script setup lang="ts">
interface ListItem {
  img: string
  title: string
  desc: string
  time: string
}
const props = defineProps<{
  cardList: ListItem[]
}>()
</script>

<template>
  <view
    v-for="(item, index) in props.cardList" :key="index" class="bg-[white] rounded-md shadow-lg mx-4 mb-4 w-[calc(100% - 32px)] mt-3"
  >
    <view class="flex">
      <image class="w-28 h-28 rounded-l-md" :src="item.img" />
      <view class="p-4">
        <view class="text-[14px]">
          {{ item.title }}
        </view>
        <view class="mt-2 text-[11px] text-[#999] whitespace-pre-line">
          {{ item.desc }}
        </view>
        <view class="mt-3 text-[10px] text-[#D8D8D8]">
          {{ item.time }}
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>

</style>