128 lines
2.2 KiB
Vue
128 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
import type { Product } from '~/composables/useProductCenter';
|
||
|
||
const props = defineProps<{
|
||
products: Product[];
|
||
loading: boolean;
|
||
showCountry?: boolean;
|
||
}>();
|
||
|
||
const skeletonCount = 12;
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div v-if="loading" class="product-grid">
|
||
<ProductCardSkeleton
|
||
v-for="n in skeletonCount"
|
||
:key="`skeleton-${n}`"
|
||
/>
|
||
</div>
|
||
|
||
<div v-else-if="products.length === 0" class="empty-state">
|
||
<div class="empty-art">
|
||
<div class="empty-box"></div>
|
||
<div class="empty-lid"></div>
|
||
<div class="empty-spark spark-1"></div>
|
||
<div class="empty-spark spark-2"></div>
|
||
</div>
|
||
<h2>暂无匹配商品</h2>
|
||
<p>试试清空筛选条件，或切换其他分类看看。</p>
|
||
</div>
|
||
|
||
<div v-else class="product-grid">
|
||
<ProductCard
|
||
v-for="product in products"
|
||
:key="product.id"
|
||
:product="product"
|
||
:show-country="showCountry"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.product-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 28px;
|
||
}
|
||
|
||
.empty-state {
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: 480px;
|
||
padding: 80px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-art {
|
||
position: relative;
|
||
width: 220px;
|
||
height: 176px;
|
||
margin: 0 auto 28px;
|
||
}
|
||
|
||
.empty-box {
|
||
position: absolute;
|
||
left: 35px;
|
||
top: 42px;
|
||
width: 150px;
|
||
height: 94px;
|
||
border-radius: 18px;
|
||
background: #f2f2f2;
|
||
transform: perspective(400px) rotateX(58deg) rotateZ(-8deg);
|
||
}
|
||
|
||
.empty-lid {
|
||
position: absolute;
|
||
left: 48px;
|
||
top: 20px;
|
||
width: 124px;
|
||
height: 64px;
|
||
border-radius: 16px;
|
||
background: #e8e8e8;
|
||
transform: rotate(-8deg);
|
||
}
|
||
|
||
.empty-spark {
|
||
position: absolute;
|
||
border-radius: 999px;
|
||
background: #ff6a00;
|
||
}
|
||
|
||
.spark-1 {
|
||
left: 21px;
|
||
top: 52px;
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.spark-2 {
|
||
right: 26px;
|
||
top: 18px;
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
.empty-state h2 {
|
||
margin: 0 0 10px;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #111;
|
||
}
|
||
|
||
.empty-state p {
|
||
margin: 0;
|
||
color: #777;
|
||
font-size: 16px;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.product-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
}
|
||
</style>
|