51 lines
958 B
Vue
51 lines
958 B
Vue
<script setup lang="ts">
|
||
import { CaseCard } from '@/components'
|
||
import type { Case } from '@/types/business/cases'
|
||
|
||
interface Props {
|
||
cases: Case[]
|
||
total: number
|
||
}
|
||
|
||
defineProps<Props>()
|
||
|
||
const emit = defineEmits<{
|
||
view: [id: string]
|
||
favorite: [id: string]
|
||
}>()
|
||
</script>
|
||
|
||
<template>
|
||
<div class="cases-grid">
|
||
<div v-if="cases.length > 0" class="cases-grid__list">
|
||
<CaseCard
|
||
v-for="item in cases"
|
||
:key="item.id"
|
||
:item="item"
|
||
@view="emit('view', $event)"
|
||
@favorite="emit('favorite', $event)"
|
||
/>
|
||
</div>
|
||
|
||
<p v-else class="cases-grid__empty text-secondary">
|
||
暂无符合条件的案例，请调整筛选条件
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.cases-grid {
|
||
&__list {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 23px 28px;
|
||
}
|
||
|
||
&__empty {
|
||
padding: @spacing-xxl 0;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
</style>
|