400 lines
38 KiB
Vue
400 lines
38 KiB
Vue
<template>
|
||
<view class="min-h-screen pb-16">
|
||
<view class="min-h-screen bg-gradient-to-br from-purple-50 via-white to-pink-50">
|
||
<view >
|
||
<view class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200/50 shadow-sm">
|
||
<view class="px-4 py-4">
|
||
<view class="flex items-center justify-between">
|
||
<view class="flex items-center gap-3">
|
||
<view >
|
||
<view class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg"
|
||
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-sparkles w-6 h-6 text-purple-600" aria-hidden="true">
|
||
<path
|
||
d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z">
|
||
</path>
|
||
<path d="M20 3v4"></path>
|
||
<path d="M22 5h-4"></path>
|
||
<path d="M4 17v2"></path>
|
||
<path d="M5 18H3"></path>
|
||
</svg>
|
||
<h1
|
||
class="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||
香氛拼团</h1>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view >
|
||
<view class="flex items-center gap-3"><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 has-[>svg]:px-2.5 p-2 hover:bg-purple-50 transition-colors duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-search w-5 h-5 text-gray-600" aria-hidden="true">
|
||
<path d="m21 21-4.34-4.34"></path>
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 has-[>svg]:px-2.5 p-2 hover:bg-purple-50 transition-colors duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-heart w-5 h-5 text-gray-600" aria-hidden="true">
|
||
<path
|
||
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
|
||
</path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 has-[>svg]:px-2.5 p-2 hover:bg-purple-50 transition-colors duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-send w-5 h-5 text-gray-600" aria-hidden="true">
|
||
<path
|
||
d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z">
|
||
</path>
|
||
<path d="m21.854 2.147-10.94 10.939"></path>
|
||
</svg></button></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pb-20">
|
||
<view class="max-w-lg mx-auto px-4 py-6">
|
||
<view >
|
||
<view class="flex items-center justify-between mb-6">
|
||
<view class="flex items-center bg-white rounded-2xl p-1 shadow-sm border border-gray-100">
|
||
<button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-primary/90 h-8 gap-1.5 has-[>svg]:px-2.5 px-6 py-2 rounded-xl transition-all duration-300 bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-md transform scale-105"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" class="lucide lucide-trending-up w-4 h-4 mr-2"
|
||
aria-hidden="true">
|
||
<path d="M16 7h6v6"></path>
|
||
<path d="m22 7-8.5 8.5-5-5L2 17"></path>
|
||
</svg>推荐产品</button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 px-6 py-2 rounded-xl transition-all duration-300 text-gray-600 hover:text-purple-600 hover:bg-purple-50"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" class="lucide lucide-heart w-4 h-4 mr-2"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
|
||
</path>
|
||
</svg>拼团活动</button></view>
|
||
<view class="flex items-center gap-2"><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 p-2 rounded-xl transition-all duration-200 text-gray-400 hover:text-purple-600 hover:bg-purple-50"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" class="lucide lucide-grid3x3 lucide-grid-3x3 w-4 h-4"
|
||
aria-hidden="true">
|
||
<rect width="18" height="18" x="3" y="3" rx="2"></rect>
|
||
<path d="M3 9h18"></path>
|
||
<path d="M3 15h18"></path>
|
||
<path d="M9 3v18"></path>
|
||
<path d="M15 3v18"></path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 p-2 rounded-xl transition-all duration-200 bg-purple-100 text-purple-600 transform scale-110"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" class="lucide lucide-list w-4 h-4" aria-hidden="true">
|
||
<path d="M3 12h.01"></path>
|
||
<path d="M3 18h.01"></path>
|
||
<path d="M3 6h.01"></path>
|
||
<path d="M8 12h13"></path>
|
||
<path d="M8 18h13"></path>
|
||
<path d="M8 6h13"></path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 p-2 rounded-xl text-gray-400 hover:text-purple-600 hover:bg-purple-50 transition-all duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round" class="lucide lucide-funnel w-4 h-4" aria-hidden="true">
|
||
<path
|
||
d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z">
|
||
</path>
|
||
</svg></button></view>
|
||
</view>
|
||
</view>
|
||
<view class="space-y-6 " style="opacity: 1;">
|
||
<view >
|
||
<view data-slot="card"
|
||
class="bg-card text-card-foreground flex flex-col gap-6 py-6 group border-0 shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden cursor-pointer transform hover:scale-[1.01]">
|
||
<view class="relative">
|
||
<view
|
||
class="aspect-[4/3] overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200">
|
||
<img alt="玫瑰香水盲盒"
|
||
class="w-full h-full object-cover transition-all duration-700 opacity-100 scale-100 scale-100"
|
||
src="https://picsum.photos/400/400?random=1">
|
||
<view
|
||
class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent">
|
||
</view>
|
||
</view>
|
||
<view class="absolute top-4 left-4 flex flex-wrap gap-2"><span data-slot="badge"
|
||
class="justify-center border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-primary/90 bg-red-500/90 backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full flex items-center gap-1 shadow-lg"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-trending-up w-3 h-3" aria-hidden="true">
|
||
<path d="M16 7h6v6"></path>
|
||
<path d="m22 7-8.5 8.5-5-5L2 17"></path>
|
||
</svg>热销</span><span data-slot="badge"
|
||
class="inline-flex items-center justify-center border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-primary/90 bg-orange-500/90 backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full shadow-lg">-30%</span>
|
||
</view>
|
||
<view
|
||
class="absolute top-4 right-4 flex flex-col gap-3 transition-all duration-300 opacity-0 translate-x-4">
|
||
<button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 bg-white/90 backdrop-blur-sm text-gray-700 p-3 rounded-full shadow-lg hover:bg-white hover:scale-110 transition-all duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-heart w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
|
||
</path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 bg-white/90 backdrop-blur-sm text-gray-700 p-3 rounded-full shadow-lg hover:bg-white hover:scale-110 transition-all duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-bookmark w-5 h-5" aria-hidden="true">
|
||
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 bg-white/90 backdrop-blur-sm text-gray-700 p-3 rounded-full shadow-lg hover:bg-white hover:scale-110 transition-all duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-send w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z">
|
||
</path>
|
||
<path d="m21.854 2.147-10.94 10.939"></path>
|
||
</svg></button></view>
|
||
<view
|
||
class="absolute inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center transition-all duration-300 opacity-0">
|
||
<view
|
||
class="bg-white/90 backdrop-blur-sm rounded-full px-6 py-3 flex items-center gap-2 shadow-lg transform transition-all duration-300 hover:scale-105">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-eye w-5 h-5 text-purple-600" aria-hidden="true">
|
||
<path
|
||
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0">
|
||
</path>
|
||
<circle cx="12" cy="12" r="3"></circle>
|
||
</svg><span class="text-purple-600 font-medium">查看详情</span></view>
|
||
</view>
|
||
</view>
|
||
<view data-slot="card-content" class="p-6">
|
||
<view class="flex flex-wrap gap-2 mb-3"><span data-slot="badge"
|
||
class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-purple-600 border-purple-200 text-xs">热销</span><span
|
||
data-slot="badge"
|
||
class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-purple-600 border-purple-200 text-xs">限量</span>
|
||
</view>
|
||
<h3 class="font-bold text-xl mb-2 line-clamp-2 leading-tight">玫瑰香水盲盒</h3>
|
||
<p class="text-sm text-gray-600 line-clamp-2 leading-relaxed">经典玫瑰香调，优雅女神范，持久留香8小时
|
||
</p>
|
||
<view class="flex items-center gap-4 my-4">
|
||
<view class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg"
|
||
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
class="lucide lucide-star w-4 h-4 text-yellow-500 fill-current"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
|
||
</path>
|
||
</svg><span class="font-medium text-gray-900">4.8</span><span
|
||
class="text-sm text-gray-500">(234条评价)</span></view>
|
||
<view class="text-sm text-gray-500">567 人喜欢</view>
|
||
</view>
|
||
<view class="flex items-baseline gap-3"><span
|
||
class="text-3xl font-bold text-red-600">¥139</span><span
|
||
class="text-lg text-gray-400 line-through">¥199</span><span
|
||
data-slot="badge"
|
||
class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 ml-auto">7折</span>
|
||
</view>
|
||
<view class="flex gap-3 mt-6"><button data-slot="button"
|
||
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 flex-1"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-heart w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
|
||
</path>
|
||
</svg><span class="text-sm font-medium">567</span></button><button
|
||
data-slot="button"
|
||
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-send w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z">
|
||
</path>
|
||
<path d="m21.854 2.147-10.94 10.939"></path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 has-[>svg]:px-3 flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-shopping-cart w-5 h-5 mr-2" aria-hidden="true">
|
||
<circle cx="8" cy="21" r="1"></circle>
|
||
<circle cx="19" cy="21" r="1"></circle>
|
||
<path
|
||
d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12">
|
||
</path>
|
||
</svg>立即购买</button></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view >
|
||
<view data-slot="card"
|
||
class="bg-card text-card-foreground flex flex-col gap-6 py-6 group border-0 shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden cursor-pointer transform hover:scale-[1.01]">
|
||
<view class="relative">
|
||
<view
|
||
class="aspect-[4/3] overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200">
|
||
<img alt="薰衣草助眠香氛"
|
||
class="w-full h-full object-cover transition-all duration-700 opacity-100 scale-100 scale-100"
|
||
src="https://picsum.photos/400/400?random=2">
|
||
<view
|
||
class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent">
|
||
</view>
|
||
</view>
|
||
<view class="absolute top-4 left-4 flex flex-wrap gap-2"><span data-slot="badge"
|
||
class="inline-flex items-center justify-center border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-primary/90 bg-green-500/90 backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full shadow-lg">新品</span><span
|
||
data-slot="badge"
|
||
class="inline-flex items-center justify-center border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-primary/90 bg-orange-500/90 backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full shadow-lg">-31%</span>
|
||
</view>
|
||
<view
|
||
class="absolute top-4 right-4 flex flex-col gap-3 transition-all duration-300 opacity-0 translate-x-4">
|
||
<button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 bg-white/90 backdrop-blur-sm text-gray-700 p-3 rounded-full shadow-lg hover:bg-white hover:scale-110 transition-all duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-heart w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
|
||
</path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 bg-white/90 backdrop-blur-sm text-gray-700 p-3 rounded-full shadow-lg hover:bg-white hover:scale-110 transition-all duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-bookmark w-5 h-5" aria-hidden="true">
|
||
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground dark:hover:bg-accent/50 h-8 gap-1.5 has-[>svg]:px-2.5 bg-white/90 backdrop-blur-sm text-gray-700 p-3 rounded-full shadow-lg hover:bg-white hover:scale-110 transition-all duration-200"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-send w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z">
|
||
</path>
|
||
<path d="m21.854 2.147-10.94 10.939"></path>
|
||
</svg></button></view>
|
||
<view
|
||
class="absolute inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center transition-all duration-300 opacity-0">
|
||
<view
|
||
class="bg-white/90 backdrop-blur-sm rounded-full px-6 py-3 flex items-center gap-2 shadow-lg transform transition-all duration-300 hover:scale-105">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-eye w-5 h-5 text-purple-600" aria-hidden="true">
|
||
<path
|
||
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0">
|
||
</path>
|
||
<circle cx="12" cy="12" r="3"></circle>
|
||
</svg><span class="text-purple-600 font-medium">查看详情</span></view>
|
||
</view>
|
||
</view>
|
||
<view data-slot="card-content" class="p-6">
|
||
<view class="flex flex-wrap gap-2 mb-3"><span data-slot="badge"
|
||
class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-purple-600 border-purple-200 text-xs">新品</span><span
|
||
data-slot="badge"
|
||
class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-purple-600 border-purple-200 text-xs">助眠</span>
|
||
</view>
|
||
<h3 class="font-bold text-xl mb-2 line-clamp-2 leading-tight">薰衣草助眠香氛</h3>
|
||
<p class="text-sm text-gray-600 line-clamp-2 leading-relaxed">天然薰衣草精油，助眠好伴侣，舒缓身心</p>
|
||
<view class="flex items-center gap-4 my-4">
|
||
<view class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg"
|
||
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
class="lucide lucide-star w-4 h-4 text-yellow-500 fill-current"
|
||
aria-hidden="true">
|
||
<path
|
||
d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z">
|
||
</path>
|
||
</svg><span class="font-medium text-gray-900">4.6</span><span
|
||
class="text-sm text-gray-500">(156条评价)</span></view>
|
||
<view class="text-sm text-gray-500">423 人喜欢</view>
|
||
</view>
|
||
<view class="flex items-baseline gap-3"><span
|
||
class="text-3xl font-bold text-red-600">¥89</span><span
|
||
class="text-lg text-gray-400 line-through">¥129</span><span
|
||
data-slot="badge"
|
||
class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 ml-auto">69折</span>
|
||
</view>
|
||
<view class="flex gap-3 mt-6"><button data-slot="button"
|
||
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 flex-1"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-heart w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
|
||
</path>
|
||
</svg><span class="text-sm font-medium">423</span></button><button
|
||
data-slot="button"
|
||
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-send w-5 h-5" aria-hidden="true">
|
||
<path
|
||
d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z">
|
||
</path>
|
||
<path d="m21.854 2.147-10.94 10.939"></path>
|
||
</svg></button><button data-slot="button"
|
||
class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 has-[>svg]:px-3 flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"><svg
|
||
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-shopping-cart w-5 h-5 mr-2" aria-hidden="true">
|
||
<circle cx="8" cy="21" r="1"></circle>
|
||
<circle cx="19" cy="21" r="1"></circle>
|
||
<path
|
||
d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12">
|
||
</path>
|
||
</svg>立即购买</button></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: 'Hello'
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style> |