xiaodou-ai-admin/src/pages/card/preview.vue

<template>
  <div class="preview-page">
    <a-row :gutter="[32, 16]" justify="flex-start" style="margin-top: 24px;">
      <a-col :span="4" v-for="card in cardList" :key="card.id" style="margin-bottom: 16px;">
        <a-card @click="handleClick(card)" :bordered="false" hoverable style="width: 100%;height: 320px;" :title="card.name" >
          <div  class="card-bg" >
             <img style="width: 50%;Object-fit: contain;" :src="card.thumbnail" alt="example" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang='ts'  setup >
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { CardController } from '@/controller'

const route = useRoute()

const router = useRouter()

const cardList = ref<API.Card[]>([])

const getCardList = async () => {
  const { data } = await CardController.getCardList(route.query.id as string)
  cardList.value = data || []
  console.log('cardList:', cardList.value)
}

const handleClick = (card: API.Card) => {
  // 跳转到卡片详情页
  router.push({
    path: '/card',
    query: {
      id: card.id,
      name: card.name,
      img: card.img,
      parentId: card.parentId,
      card_type: Number(card.page) % 2 === 0 ? 21 : 5
    }
  })
}

watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      getCardList()
    }
  },
  { immediate: true }
)

onMounted(() => {
  console.log('route:', route)
  // getCardList()
  // 这里可以添加其他逻辑
})
</script>
<style lang='less' scoped >
.preview-page {
  .card-bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
  }
}

/deep/ .ant-card-body {
  padding: 0px;
  overflow: hidden;
  height: 265px;
}
</style>