40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<template>
|
|
<view class="tap-feedback m-0 overflow-hidden rounded-[22px] p-0 text-left soft-card"
|
|
@click="$emit('select', product)">
|
|
<view class="relative h-[142px] overflow-hidden bg-[#e7efe7]">
|
|
<image class="block h-full w-full" :src="product.image" mode="aspectFill" lazy-load />
|
|
</view>
|
|
<view class="p-3.5">
|
|
<text class="text-clamp-2 min-h-[42px] text-[15px] font-semibold leading-[21px] text-[#1f2c25] text-justify">{{
|
|
product.title
|
|
}}</text>
|
|
<view class="mt-2 flex flex-wrap gap-1">
|
|
<text v-for="tag in product.tags.slice(0, 3)" :key="tag"
|
|
class="rounded-[7px] border border-[#6fb2a7]/70 bg-[#eef8f5] px-1.5 py-0.5 text-[10px] leading-4 text-[#227464]">
|
|
{{ tag }}
|
|
</text>
|
|
</view>
|
|
<view class="mt-3 flex min-h-[24px] items-end justify-between gap-2">
|
|
<text class="min-w-0 flex-1 truncate text-[11px] leading-none text-[#718073]">{{ product.subtitle ||
|
|
product.destinationName || "贵州定制" }}</text>
|
|
<text class="shrink-0 whitespace-nowrap text-[14px] font-bold leading-none text-[#a86539]">
|
|
{{ formatProductCardPrice(product.price) }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { formatProductCardPrice } from "@/lib/data";
|
|
import type { Product } from "@/lib/types";
|
|
|
|
defineProps<{
|
|
product: Product;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
select: [product: Product];
|
|
}>();
|
|
</script>
|