yeuimu
79fabd85f7
- Redesign website homepage & product-center per Figma (fonts, logos, hero/footer/customer cases) - Add API upload module (multer) with static serving for uploads/public assets - Add OriginGood.delisted flag and SDS request retry logic - Add admin ImageUpload component and goods import/upload flows - Add vitest suite for website components and composables (32 tests) - Add skills, docs, plans and PRODUCT.md
47 lines
2.7 KiB
Vue
47 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import type { Product } from '~/composables/useProductCenter';
|
|
import { sortTagsByGroup } from '~/composables/useProductCenter';
|
|
|
|
const props = defineProps<{ product: Product; showCountry?: boolean }>();
|
|
const visibleTags = computed(() => sortTagsByGroup(props.product.tags).slice(0, 3));
|
|
const price = computed(() => {
|
|
const value = Number(props.product.price);
|
|
return Number.isFinite(value) ? value.toFixed(2) : null;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<a class="product-card" :href="`https://inkpod.vip/portal/detail/${product.id}`">
|
|
<div class="product-media">
|
|
<img v-if="product.image" :src="product.image" :alt="product.name" loading="lazy" />
|
|
<i v-else class="fa-regular fa-image" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 :title="product.name">{{ product.name }}</h3>
|
|
<div class="chips">
|
|
<span v-for="tag in visibleTags" :key="tag.id" class="chip" :style="{ color: tag.fontColor || tag.color || '#21834b', backgroundColor: `${tag.color || '#eaf8ef'}30` }">{{ tag.name }}</span>
|
|
<span v-if="showCountry" class="chip country">{{ product.country.name }}</span>
|
|
</div>
|
|
<div class="price"><template v-if="price"><small>￥</small>{{ price }}<small>起</small></template><template v-else>暂无报价</template></div>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.product-card { display: block; width: 100%; height: 382px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
|
|
.product-media { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f2f2f2; color: #bbb; font-size: 32px; }
|
|
.product-media img { width: 100%; height: 100%; object-fit: cover; }
|
|
.product-info { padding: 7px 12px 9px; }
|
|
.product-info h3 { margin: 0 0 5px; overflow: hidden; color: #000; font-size: 18px; font-weight: 500; line-height: 25px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chips { display: flex; gap: 6px; height: 21px; margin-bottom: 5px; overflow: hidden; }
|
|
.chip { display: inline-flex; align-items: center; flex: 0 0 auto; height: 21px; padding: 0 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
|
|
.chip.country { color: #535353; background: #ececef; }
|
|
.price { margin-top: 5px; color: #000; font-size: 20px; font-weight: 700; line-height: 28px; }
|
|
.price small { font-size: 16px; font-weight: 500; }
|
|
@media (max-width: 760px) {
|
|
.product-card { height: auto; min-height: 0; max-width: none; overflow: visible; }
|
|
.product-info h3 { font-size: 15px; }
|
|
}
|
|
</style>
|