117 lines
4.3 KiB
Vue
117 lines
4.3 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { X } from 'lucide-vue-next'
|
||
import BookMockup from '../components/BookMockup.vue'
|
||
import { useSiteConfig } from '../../utils/siteConfig'
|
||
|
||
const siteConfig = useSiteConfig()
|
||
const books = siteConfig.value.books
|
||
const showQrModal = ref(false)
|
||
|
||
const categories = ['全部', '公共课', '专业课', '模拟卷', '内部讲义']
|
||
</script>
|
||
|
||
<template>
|
||
<div class="pt-24 min-h-screen bg-apple-grey animate-fade-in">
|
||
<div class="max-w-7xl mx-auto px-6 pb-20">
|
||
<div class="flex flex-col items-center text-center mb-16 pt-8">
|
||
<span class="bg-white border border-gray-200 text-gray-500 font-bold px-4 py-1.5 rounded-full text-xs mb-6 uppercase tracking-wider shadow-sm">
|
||
Official Store
|
||
</span>
|
||
<h1 class="text-4xl md:text-6xl font-semibold text-apple-dark mb-6">官方出版商城</h1>
|
||
<p class="text-xl text-gray-500 max-w-2xl font-light">
|
||
针对天津专升本考纲编写，每年更新。累计销量突破 500,000 册。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flex justify-center gap-4 mb-12 flex-wrap">
|
||
<button
|
||
v-for="(cat, i) in categories"
|
||
:key="i"
|
||
:class="[
|
||
'px-6 py-2 rounded-full text-sm font-medium transition-all',
|
||
i === 0 ? 'bg-black text-white shadow-lg' : 'bg-white text-gray-600 hover:bg-gray-100'
|
||
]"
|
||
>
|
||
{{ cat }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||
<div
|
||
v-for="(book, idx) in books"
|
||
:key="idx"
|
||
class="bg-white rounded-[2rem] p-8 flex flex-col items-center text-center shadow-sm hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 group relative overflow-hidden"
|
||
>
|
||
<div
|
||
v-if="book.tag"
|
||
class="absolute top-6 left-6 bg-red-500 text-white text-[10px] font-bold px-2 py-1 rounded-md"
|
||
>
|
||
{{ book.tag }}
|
||
</div>
|
||
|
||
<div class="w-full aspect-[4/3] flex items-center justify-center mb-8 mt-4 group-hover:scale-105 transition-transform duration-500">
|
||
<BookMockup
|
||
:title="book.title"
|
||
:imageSrc="book.imageSrc"
|
||
className="transform scale-90 max-w-[200px]"
|
||
/>
|
||
</div>
|
||
|
||
<div class="mt-auto w-full">
|
||
<h3 class="text-xl font-bold text-apple-dark mb-2 truncate">{{ book.title }}</h3>
|
||
<div class="flex items-center justify-center gap-3 mb-6">
|
||
<span class="text-red-500 font-bold text-lg">¥{{ book.price }}</span>
|
||
<span class="text-gray-400 text-sm line-through">¥{{ book.oldPrice }}</span>
|
||
</div>
|
||
<button
|
||
@click="showQrModal = true"
|
||
class="w-full py-3 rounded-full bg-apple-blue text-white font-medium text-sm hover:bg-apple-blue-hover transition-colors shadow-md hover:shadow-lg"
|
||
>
|
||
立即购买
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-if="showQrModal"
|
||
class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
|
||
>
|
||
<div
|
||
class="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||
@click="showQrModal = false"
|
||
/>
|
||
|
||
<div class="relative bg-white rounded-3xl shadow-2xl w-full max-w-md animate-slide-up">
|
||
<button
|
||
@click="showQrModal = false"
|
||
class="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition-colors z-10"
|
||
>
|
||
<X :size="24" class="text-gray-500" />
|
||
</button>
|
||
|
||
<div class="p-8 text-center">
|
||
<div class="mb-6">
|
||
<h3 class="text-2xl font-bold text-gray-900 mb-2">扫码添加客服</h3>
|
||
<p class="text-gray-500">添加微信客服，了解购买详情</p>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 rounded-2xl p-6 inline-block">
|
||
<img
|
||
:src="siteConfig.customerServiceQrcode"
|
||
alt="客服微信二维码"
|
||
class="w-64 h-64 mx-auto rounded-lg"
|
||
/>
|
||
</div>
|
||
|
||
<p class="text-sm text-gray-400 mt-6">
|
||
工作时间：周一至周日 9:00-21:00
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|