个人中心页面

src/components/customer/accountSwiper.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+// 模拟商品数据（和图片内容匹配）
+const productList = [
+  {
+    id: 1,
+    imgUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg", // 替换成你的真实图片路径（public下）
+    title: "Widow's Peak M Hairline 13x6 HD Lace Front Wig N...",
+    price: "$132.91",
+    originalPrice: "$204.16",
+    tag: "Extra $50 OFF | Code: MW50 | This Week",
+  },
+  {
+    id: 2,
+    imgUrl: "https://cdn.alipearlhair.com/media/catalog/product/cache/6/thumbnail/750x1000/9df78eab33525d08d6e5fb8d27136e95/b/o/body_wave_lace_front_wig_2.jpg", // 替换成你的真实图片路径
+    title: "Alipearl Deep Wave Wig 100% Human Hair Swiss...",
+    price: "$149.66",
+    originalPrice: "$199.54",
+    tag: "", // 第二个商品无标签
+  },
+  // 可添加更多商品
+];
+const AccountSwiper = () => {
+  return (
+    <div className="w-full max-w-[700px] mx-auto px-4">
+      {/* Swiper 核心容器 */}
+      <Swiper
+     
+        slidesPerView={2} // 一行显示2个商品（和图片一致）
+        spaceBetween={8} // 商品之间的间距
+        breakpoints={{
+          // 响应式适配（小屏显示1个）
+          390: { slidesPerView: 2 },
+          640: { slidesPerView: 2 },
+        }}
+        className="product-swiper"
+      >
+        {/* 循环渲染商品卡片 */}
+        {productList.map((product) => (
+          <SwiperSlide key={product.id} className="rounded-lg overflow-hidden">
+            <div className="flex flex-col h-full">
+              {/* 商品图片（带标签） */}
+              <div className="relative">
+                <img
+                  src={product.imgUrl}
+                  alt={product.title}
+                  className="w-full h-auto object-cover rounded-t-lg"
+                />
+                {/* 促销标签（有内容才显示） */}
+                {product.tag && (
+                  <div className="absolute bottom-2 left-2 bg-black/80 text-white text-xs px-2 py-1 rounded">
+                    {product.tag}
+                  </div>
+                )}
+              </div>
+
+              {/* 商品标题 */}
+              <p className="mt-3 text-sm text-gray-800 font-medium line-clamp-2">
+                {product.title}
+              </p>
+
+              {/* 价格区域 */}
+              <div className="flex items-center gap-2 mt-2">
+                <span className="text-red-600 font-bold">{product.price}</span>
+                <span className="text-xs text-gray-500 line-through">
+                  {product.originalPrice}
+                </span>
+                {/* 购物车图标 */}
+                <span className="ml-auto text-gray-600">🛒</span>
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      {/* 分页器容器（底部小圆点） */}
+      {/* <div className="swiper-pagination flex justify-center mt-4"></div> */}
+    </div>
+  );
+};
+
+export default AccountSwiper;