85 lines
4.7 KiB
Vue
85 lines
4.7 KiB
Vue
<script setup>
|
|
const customerCases = ref([
|
|
{ id: 1, platform: 'TEMU卖家', isPrimary: true, title: '复古水洗 经典重塑', description: '巡演灵感做旧款，粉丝自发应援首选', salesGrowth: '260%', monthlySales: '45W美元', image: 'https://picsum.photos/seed/case1/400/300' },
|
|
{ id: 2, platform: 'TikTok卖家', isPrimary: false, title: '冠军荣耀 同款套装', description: '夺冠纪念球衣，球迷珍藏爆款', salesGrowth: '300%', monthlySales: '68W美元', image: 'https://picsum.photos/seed/case2/400/300' },
|
|
{ id: 3, platform: 'SHEIN卖家', isPrimary: false, title: '潮流印花 全棉舒适', description: '自制设计印花图案，无尾货压力轻松售', salesGrowth: '180%', monthlySales: '22W美元', image: 'https://picsum.photos/seed/case3/400/300' },
|
|
{ id: 4, platform: 'TEMU卖家', isPrimary: true, title: '复古水洗 经典重塑', description: '巡演灵感做旧款，粉丝自发应援首选', salesGrowth: '260%', monthlySales: '45W美元', image: 'https://picsum.photos/seed/case1/400/300' },
|
|
{ id: 5, platform: 'TikTok卖家', isPrimary: false, title: '冠军荣耀 同款套装', description: '夺冠纪念球衣，球迷珍藏爆款', salesGrowth: '300%', monthlySales: '68W美元', image: 'https://picsum.photos/seed/case2/400/300' },
|
|
{ id: 6, platform: 'SHEIN卖家', isPrimary: false, title: '潮流印花 全棉舒适', description: '自制设计印花图案，无尾货压力轻松售', salesGrowth: '180%', monthlySales: '22W美元', image: 'https://picsum.photos/seed/case3/400/300' },
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="py-10 lg:py-16 bg-gray-50 overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-4 lg:px-6">
|
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 text-center mb-8 lg:mb-12">用户案例</h2>
|
|
</div>
|
|
|
|
<div class="hidden lg:block overflow-hidden hover:[&>.marquee-track]:[animation-play-state:paused]">
|
|
<div class="marquee-track flex gap-8 w-max animate-marquee">
|
|
<div
|
|
v-for="(testCase, idx) in [...customerCases, ...customerCases]"
|
|
:key="'a-' + idx"
|
|
class="flex-shrink-0 w-[350px] h-[420px] bg-white rounded-xl overflow-hidden"
|
|
>
|
|
<div class="relative h-48">
|
|
<span
|
|
:class="['absolute top-4 left-4', testCase.isPrimary ? 'bg-primary' : 'bg-black', 'text-white px-3 py-1 rounded-full text-sm font-medium']"
|
|
>
|
|
{{ testCase.platform }}
|
|
</span>
|
|
<img :src="testCase.image" :alt="testCase.title" class="w-full h-full object-cover" />
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">销量增长</p>
|
|
<p class="text-2xl lg:text-3xl font-bold text-primary">{{ testCase.salesGrowth }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-gray-500 text-sm">月销售额</p>
|
|
<p class="text-2xl lg:text-3xl font-bold text-primary">{{ testCase.monthlySales }}</p>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-lg lg:text-xl font-bold text-gray-900 mb-2">{{ testCase.title }}</h3>
|
|
<p class="text-gray-600 text-sm">{{ testCase.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:hidden overflow-x-auto pb-4 px-4">
|
|
<div class="flex gap-4 w-max">
|
|
<div
|
|
v-for="(testCase, idx) in customerCases"
|
|
:key="'m-' + idx"
|
|
class="flex-shrink-0 w-[280px] bg-white rounded-xl overflow-hidden"
|
|
>
|
|
<div class="relative h-36">
|
|
<span
|
|
:class="['absolute top-3 left-3', testCase.isPrimary ? 'bg-primary' : 'bg-black', 'text-white px-2 py-1 rounded-full text-xs font-medium']"
|
|
>
|
|
{{ testCase.platform }}
|
|
</span>
|
|
<img :src="testCase.image" :alt="testCase.title" class="w-full h-full object-cover" />
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<div>
|
|
<p class="text-gray-500 text-xs">销量增长</p>
|
|
<p class="text-xl font-bold text-primary">{{ testCase.salesGrowth }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-gray-500 text-xs">月销售额</p>
|
|
<p class="text-xl font-bold text-primary">{{ testCase.monthlySales }}</p>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-base font-bold text-gray-900 mb-1">{{ testCase.title }}</h3>
|
|
<p class="text-gray-600 text-xs">{{ testCase.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|