精美、现代化的产品展示页面
1.我们先看效果
2.源码内容（HTML版本）
Elegance Pro
¥29,999
Elegance Pro 是我们的旗舰产品，融合了现代工艺和传统制表技术。这款精致的手表不仅是一个计时工具，更是一件艺术品，彰显您的品味与地位。其精湛的做工和优雅的设计使其成为任何场合的完美配饰。
产品特点
瑞士制造
蓝宝石水晶镜面
50米防水
自动机械机芯
3.源码分享：React版本（推荐）
'use client'
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronLeft, ChevronRight, ShoppingCart, Heart } from 'lucide-react'
const watches = [
{ id: 1, name: "Elegance Pro", price: "¥29,999", image: "/placeholder.svg?height=400&width=400" },
{ id: 2, name: "Chrono Master", price: "¥34,999", image: "/placeholder.svg?height=400&width=400" },
{ id: 3, name: "Diver's Dream", price: "¥27,999", image: "/placeholder.svg?height=400&width=400" },
]
export default function WatchShowcase() {
const [currentWatch, setCurrentWatch] = useState(0)
const [isLiked, setIsLiked] = useState(false)
const nextWatch = () => setCurrentWatch((prev) => (prev + 1) % watches.length)
const prevWatch = () => setCurrentWatch((prev) => (prev - 1 + watches.length) % watches.length)
return (
key={currentWatch} src={watches[currentWatch].image} alt={watches[currentWatch].name} className="w-full h-[400px] object-cover" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.5 }} /> onClick={prevWatch} className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 transition-colors" > onClick={nextWatch} className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 transition-colors" >
key={watches[currentWatch].name} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="text-3xl font-bold mb-4" > {watches[currentWatch].name} key={watches[currentWatch].price} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.1 }} className="text-2xl text-gray-600 mb-6" > {watches[currentWatch].price} 这款精致的手表融合了现代工艺和传统制表技术。它不仅是一个计时工具，更是一件艺术品，彰显您的品味与地位。
whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="bg-black text-white px-6 py-3 rounded-full flex items-center space-x-2 hover:bg-gray-800 transition-colors" > 加入购物车 whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => setIsLiked(!isLiked)} className={`p-3 rounded-full ${ isLiked ? 'bg-red-500 text-white' : 'bg-gray-200 text-gray-600' }`} >
产品特点
{['瑞士制造', '蓝宝石水晶镜面', '50米防水', '自动机械机芯'].map((feature, index) => (
key={feature} initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5, delay: index * 0.1 }} className="flex items-center space-x-2" > {feature} ))}
)
}
扫描二维码分享
评论区
请登录后发表评论。