Chengdong Zhang
0d0e10b97b
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
48 lines
1.9 KiB
Vue
48 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { Product } from "@vmall/shared";
|
|
import { t as pick } from "@vmall/shared";
|
|
import { lowestSku } from "~/utils/product";
|
|
|
|
const props = defineProps<{ product: Product }>();
|
|
const { locale } = useI18n();
|
|
|
|
const sku = computed(() => lowestSku(props.product));
|
|
// Reported by the catalog API from paid orders; no reviews figure exists.
|
|
const sold = computed(() => props.product.sold_count);
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
:to="`/goods/${product.slug}`"
|
|
class="group block h-full no-underline text-inherit transition-shadow duration-200 hover:-translate-y-0.5 hover:shadow-lg"
|
|
>
|
|
<VCard :padded="false" class="h-full overflow-hidden border border-border bg-surface">
|
|
<div class="flex items-center justify-center p-4">
|
|
<img
|
|
:src="product.images[0] || '/mock/product-1.svg'"
|
|
:alt="pick(product.name, locale)"
|
|
loading="lazy"
|
|
class="h-[180px] w-[180px] object-contain"
|
|
/>
|
|
</div>
|
|
<div class="px-[14px] pb-[14px]">
|
|
<p class="m-0 h-[37px] overflow-hidden text-[13px] leading-[1.4] transition-colors group-hover:text-primary">
|
|
{{ pick(product.name, locale) }}
|
|
</p>
|
|
<p class="m-0 mb-2 mt-1 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] text-muted/70">
|
|
{{ pick(product.description, locale) }}
|
|
</p>
|
|
<p class="m-0">
|
|
<span v-if="sku" class="mr-2 text-[16px] font-bold text-primary">
|
|
<PriceText :amount-minor="sku.price_minor" :currency="sku.currency" />
|
|
</span>
|
|
<s v-if="sku" class="text-[12px] text-muted/60">
|
|
<PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" />
|
|
</s>
|
|
</p>
|
|
<p class="m-0 mt-1.5 text-[12px] text-muted/70">{{ $t("product.salesCount", { n: sold }) }}</p>
|
|
</div>
|
|
</VCard>
|
|
</NuxtLink>
|
|
</template>
|