zhibo_2025/beifen/01_zhibo_list_card/components/LiveCard.vue

<template>
  <div class="card" @click="$emit('click')">
    <img :src="live.image" alt="" class="thumb" />
    <div class="info">
      <div>{{ live.title }}</div>
      <small>{{ live.subtitle }} · 👁️{{ live.viewers }}</small>
    </div>
  </div>
</template>

<script setup>
defineProps({
  live: Object
})
</script>

<style>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.info {
  padding: 8px;
}
</style>