global.css 优化；swiper css引入优化

src/app/(public)/_components/CategoryTabSwiper .tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { FreeMode } from "swiper/modules";
-import "swiper/css";
+
 
 // 标签数据，可自由增删修改文字、跳转路由
 const tabList = [

src/app/(public)/_components/HomeBestSellers.tsx

@@ -2,9 +2,6 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
-// 导入Swiper基础样式
-import "swiper/css";
-import "swiper/css/navigation";
 import type { HomeProduct } from "@/types/home/type";
 import Link from "next/link";
 interface HomeBestSellersProps {

src/app/(public)/_components/HomeContent.tsx

@@ -10,8 +10,6 @@ import MiddleImageSwiper from "./MiddleImageSwiper";
 import Trending from "./Trending";
 import RecommendedProducts from "./RecommendedProducts";
 import CategoryTabSwiper  from "./CategoryTabSwiper ";
-import "swiper/css";
-import "swiper/css/navigation";
 import type {HomeApiData,HomeProduct } from "@/types/home/type"
 import {CustomerService} from "@/components/common/CustomerService/CustomerService";
 // 定义组件入参类型

src/app/(public)/_components/HomeMiddleBanner.tsx

@@ -2,8 +2,6 @@
 import { useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/navigation";
 import Image from "next/image";
 import type { HomeSectionImage } from "@/types/home/type";
 interface middleBannerProps {

src/app/(public)/_components/HomeNewArrival.tsx

@@ -3,9 +3,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import Link from "next/link";
-// 导入Swiper基础样式
-import "swiper/css";
-import "swiper/css/navigation";
 import type {HomeProduct} from "@/types/home/type"
 interface NewArrivalProps {
   newArrival: HomeProduct[];

src/app/(public)/_components/JinGangSwiper.tsx

@@ -3,8 +3,6 @@ import { useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import type { Swiper as SwiperType } from "swiper/types";
 import { Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/navigation";
 import Image from "next/image";
 import type { HomeSectionImage } from "@/types/home/type";
 interface jinGangProps {

src/app/(public)/_components/MiddleImageSwiper.tsx

@@ -1,10 +1,6 @@
 
 import { Swiper, SwiperSlide } from "swiper/react";
 import {  Pagination  } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-import "./css/swiper-custom.css";
 import Link from "next/link";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
 import type {HomeProduct,HomeSectionImage} from "@/types/home/type"
@@ -62,7 +58,7 @@ const MiddleImageSwiper = ({ zeroWear,zeroWearImage }: zeroWearProps) => {
               type: "progressbar",
               el: ".my-progress-bar",
             }}
-            className="mySwiper"
+            className="mySwiper middle-image-swiper"
             breakpoints={{
               480: { slidesPerView: 1 },
               768: { slidesPerView: 2 },

src/app/(public)/_components/TopImageSwiper.tsx

@@ -1,6 +1,5 @@
 
 import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
 // import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules';
 // 定义图片类型
 type BannerImageItem = {

src/app/(public)/_components/Trending.tsx

@@ -1,9 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Scrollbar, Navigation } from "swiper/modules";
-import "swiper/css";
-import "swiper/css/scrollbar";
-import "swiper/css/navigation";
 import Image from "next/image";
 import Link from "next/link";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";

src/app/(public)/_components/css/swiper-custom.css

@@ -1,5 +0,0 @@
-/* swiper-custom.css */
-.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{
-    bottom: -16px ;
-    top: unset;
-}

src/app/(public)/customer/account/_components/AccountBottomHrefSwiper.tsx

@@ -5,7 +5,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 // 只导入 Autoplay 即可！loop 内置了
 import { Autoplay } from "swiper/modules";
 
-import "swiper/css";
+
 
 const AccountBottomHrefSwiper = () => {
   const swiperRef = useRef<any>(null);

src/app/(public)/customer/account/_components/AccountVipPopup.tsx

@@ -6,8 +6,6 @@ import { Navigation, Scrollbar } from "swiper/modules";
 import type { Swiper as SwiperType } from "swiper/types";
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import "swiper/css";
-import "swiper/css/navigation";
 import { clientFetch } from "@/lib/restApiClient";
 
 // 模拟你的每一页数据，方便维护

src/app/(public)/product/_components/ProductMedia.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import Image from "next/image";
-import "swiper/css";
-import "swiper/css/pagination";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination } from "swiper/modules";
 import type { Swiper as SwiperType } from "swiper";

src/app/(public)/product/_components/review/ReviewImageGalleryModal.tsx

@@ -4,8 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper/modules";
 import Image from "next/image";
 import type { GalleryItem } from "@/types/products/review";
-import "swiper/css";
-import "swiper/css/navigation";
+
 
 interface GalleryModalProps {
   open: boolean;

src/app/(public)/product/_components/youmaylike/Recommend.tsx

@@ -3,9 +3,7 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination } from "swiper/modules";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
-// 导入Swiper基础样式
-import "swiper/css";
-import "swiper/css/navigation";
+
 
 // 模拟产品数据（12个产品，分2块，每块6个）
 const productData = [

src/app/globals.css

@@ -1,88 +1,84 @@
+/* =========================================================
+ * Cascade layer order
+ *
+ * theme
+ *   ↓
+ * base
+ *   ↓
+ * vendor.swiper
+ *   ↓
+ * components
+ *   ↓
+ * utilities
+ * ======================================================= */
+
+@layer theme, base, vendor, components, utilities;
+@layer vendor.swiper;
+
+
+/* =========================================================
+ * Framework / vendor imports
+ *
+ * 注意：
+ * @import 必须位于普通 CSS rule 之前。
+ * Swiper 按需引入
+ * ======================================================= */
 @import "tailwindcss";
-@plugin '../../hero.ts';
-@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@custom-variant dark (&:is(.dark *));
 
-html,
-body {
-  scrollbar-width: thin;
-  scrollbar-color: #6b7280 transparent;
-}
+@import "swiper/css" layer(vendor.swiper);
+@import "swiper/css/navigation" layer(vendor.swiper);
+@import "swiper/css/pagination" layer(vendor.swiper);
+@import 'swiper/css/free-mode' layer(vendor.swiper);
+@import 'swiper/css/thumbs' layer(vendor.swiper);
 
-html::-webkit-scrollbar,
-body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
 
-html::-webkit-scrollbar-track,
-body::-webkit-scrollbar-track {
-  background: transparent;
-}
+/* =========================================================
+ * HeroUI v2
+ * ======================================================= */
 
-html::-webkit-scrollbar-thumb,
-body::-webkit-scrollbar-thumb {
-  background-color: #6b7280;
-  border-radius: 9999px;
-}
+@plugin '../../hero.ts';
 
-.dark html::-webkit-scrollbar-thumb,
-.dark body::-webkit-scrollbar-thumb {
-  background-color: #d4d4d4;
-}
+@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
 
-/**
- * 移动端适配核心：clamp() 根字号  在390px设计稿下 16px ≈ 4.1025641vw = 1rem
- * 比如 390px设计稿，有一个div宽度是120px，那么可以写 w-30，下面是换算原理：
- * tailwindcss中单位用的是rem， 默认根字号为16px，也就是在tailwindcss中，0.25rem = 4px，
- * 而对于类名 w-1 来说，这里的1就是0.25rem，即4px，那么w-1就是4px，w-2就是8px，以此类推
- * 
- * */
-html {
-  font-size: clamp(10px, 4.1025641vw, 40px);
-}
+@custom-variant dark (&:is(.dark *));
 
-/* GLOBAL VARIABLES :root中定义常规变量，不被映射到工具类*/
-:root {
-  /* Font families */
-  font-family: var(--font-outfit-variable), system-ui, sans-serif;
-  --background: #ffffff;
-  --foreground: #000;
-  --color-selected-black: #00000099;
-
-  --hero-background: #ffffff;
-  --hero-foreground: #000;
-  --dark-grey: #404040;
-  --selected-color: #e3ecff;
-  --selected-color-dark: #555b69;
-  --selected-bottom-dark: #95b6ff;
-  --selected-bg-bottom-dark: #314779;
-  --input-color: #b3b3b3;
-
-  /* 字体尺寸 */
-  --font-size-xxs: 13px;
-
-  /* 间距变量（供自定义类使用） */
-  --space-30: 120px;
-  --space-7_5: 30px;
-  --space-92_5: 23.125rem;
-}
 
-/*theme中定义的变量可以被映射到实用程序类(需要注意映射规则，不是所有变量都能映射)*/
+/* =========================================================
+ * Tailwind theme tokens
+ *
+ * @theme 中的变量会映射到 Tailwind utilities。
+ *
+ * 例如：
+ * --color-ly-gray
+ *   → text-ly-gray
+ *   → bg-ly-gray
+ *   → border-ly-gray
+ *
+ * --text-ly-16
+ *   → text-ly-16
+ *
+ * --leading-ly-24
+ *   → leading-ly-24
+ * ======================================================= */
+
 @theme {
   /*自定义颜色*/
   --color-ly-inputborder: #e5e5e5;
   --color-ly-placeholder: #A6A6A6;
   --color-ly-errorcolor: #FF0000;
+
   --color-ly-lightgray: #f9f9f9;
   --color-ly-middlegray: #f2f2f2;
-  --color-ly-gray: #d3d3d3; /*可被映射为text-ly-gray，bg-ly-gray等相关的颜色类目*/
+  --color-ly-gray: #d3d3d3;
   --color-ly-deepgray: #ACACAC;
+
   --color-ly-gold: #ffd700;
-  --color-ly-gold: #ffd700;
+
   --color-ly-green: #01754a;
   --color-ly-middlegreen: #036141;
   --color-ly-deepgreen: #1e3932;
+
+
   /*自定义字体大小 前缀 ly*/
   --text-ly-12: 0.75rem;
   --text-ly-13: 0.8125rem;
@@ -92,9 +88,9 @@ html {
   --text-ly-20: 1.25rem;
   --text-ly-22: 1.375rem;
   --text-ly-24: 1.5rem;
-  --text-ly-30: 1.875rem; /* 1.875rem (30px) */ 
-	--text-ly-36: 2.25rem; /* 2.25rem (36px) */ 	
-  --text-ly-48: 3rem; /* 3rem (48px) */ 
+  --text-ly-30: 1.875rem;
+  --text-ly-36: 2.25rem;
+  --text-ly-48: 3rem;
 
   /*自定义行高 前缀 ly*/
   --leading-ly-16: 1rem;
@@ -105,82 +101,156 @@ html {
   --leading-ly-26: 1.625rem;
   --leading-ly-28: 1.75rem;
   --leading-ly-36: 2.25rem;
-}
 
+}
 
-.dark {
-  --background: #171717;
-  --foreground: #ffffff;
 
-  --hero-background: #171717;
-  --hero-foreground: #ffffff;
-}
+/* =========================================================
+ * Runtime variables -> Tailwind theme
+ *
+ * inline 用于引用其它 CSS variables。
+ * @theme指令中的 inline 表示定义引用其他变量的主题变量, 比如 定义了一个变量--color-background，--color-background引用的是另一个变量
+ * 例如：
+ *
+ * --background
+ *      ↓
+ * --color-background
+ *      ↓
+ * bg-background
+ *
+ * 当 .dark 修改 --background 后，
+ * bg-background 会自动跟随，不需要额外写：
+ *
+ * bg-white dark:bg-background
+ * ======================================================= */
 
-/*@theme指令中的 inline 表示定义引用其他变量的主题变量
-  比如 定义了一个变量--color-background，--color-background引用的是另一个变量
-*/
 @theme inline {
-  --font-outfit: var(--font-outfit-variable), system-ui, sans-serif;
+  --font-outfit:
+    var(--font-outfit-variable),
+    system-ui,
+    sans-serif;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-font-color: var(--font-color);
-  --color-selected-black: var(--color-selected-black);
+
+  --color-selected-black: var(--selected-black);
 
   --color-dark-grey: var(--dark-grey);
+
   --color-selected-color: var(--selected-color);
   --color-selected-color-dark: var(--selected-color-dark);
+
   --color-selected-bottom-dark: var(--selected-bottom-dark);
   --color-selected-bg-bottom-dark: var(--selected-bg-bottom-dark);
-  --color-input-color: var(--input-color);
+
+  --color-input-color: var(--input-color); /*placeholder:text-input-color 设置placeholder颜色*/
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
+
+/* =========================================================
+ * Base
+ *
+ * 只放：
+ * - 全局 CSS variables
+ * - html/body
+ * - document-level defaults
+ *
+ * 不放具体业务组件样式。
+ * ======================================================= */
+
+@layer base {
+  :root {
+    /* GLOBAL VARIABLES :root中定义常规变量，不被映射到工具类*/
+
+    --background: #ffffff;
+    --foreground: #000000;
+
+    --selected-black: rgb(0 0 0 / 60%);
+
+    --hero-background: #ffffff;
+    --hero-foreground: #000000;
+
+    --dark-grey: #404040;
+
+    --selected-color: #e3ecff;
+    --selected-color-dark: #555b69;
+
+    --selected-bottom-dark: #95b6ff;
+    --selected-bg-bottom-dark: #314779;
+
+    --input-color: #b3b3b3;
+  }
+
+
+  /* ---------- Dark theme ---------- */
+
+  .dark {
+    --background: #171717;
+    --foreground: #ffffff;
+
+    --hero-background: #171717;
+    --hero-foreground: #ffffff;
+  }
+
+
+  /* ---------- Document ---------- */
+
+  html {
+    /*--font-outfit-variable 是在根layout.tsx中定义的*/
+    font-family:
+      var(--font-outfit-variable),
+      system-ui,
+      sans-serif;
+
+    /*
+     * PC 项目推荐保留稳定 scrollbar gutter，
+     * modal / drawer 锁定 body 时减少页面左右跳动。
+     */
+    scrollbar-gutter: stable;
+
+    scrollbar-width: thin;
+    scrollbar-color: #6b7280 transparent;
+  
+    /**
+      * 移动端适配核心：clamp() 根字号  在390px设计稿下 16px ≈ 4.1025641vw = 1rem
+      * 比如 390px设计稿，有一个div宽度是120px，那么可以写 w-30，下面是换算原理：
+      * tailwindcss中单位用的是rem， 默认根字号为16px，也就是在tailwindcss中，0.25rem = 4px，
+      * 而对于类名 w-1 来说，这里的1就是0.25rem，即4px，那么w-1就是4px，w-2就是8px，以此类推
+      * 
+      * */
+
+    font-size: clamp(10px, 4.1025641vw, 40px);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
 }
 
+
+/* =========================================================
+ * Components
+ *
+ * 放项目自己的复合样式和第三方组件 overrides。
+ *
+ * vendor.swiper 在 components 之前，因此这里的
+ * Swiper override 不需要通过 !important 去抢优先级。
+ * ======================================================= */
+
 @layer components {
   /* Hide scrollbar for drawer content */
   .drawer-scrollbar-hidden {
     scrollbar-width: none;
-    -ms-overflow-style: none;
   }
   .drawer-scrollbar-hidden::-webkit-scrollbar {
     display: none;
   }
 
-  .placeholder-input-color::placeholder {
-    color: var(--input-color);
-  }
-
-  .dark .placeholder-selected-color-dark::placeholder {
-    color: var(--selected-color-dark);
-  }
 
   .mobile-heading h2 {
-    @apply sticky bg-white z-50 dark:bg-background top-0;
-  }
-
-  .prose h1 {
-    margin: 12px 0 !important;
-    font-family: Outfit, sans-serif !important;
-    font-size: 24px !important;
-    font-weight: 600 !important;
-  }
-
-  .prose p {
-    color: var(--color-selected-black) !important;
-    font-weight: 300 !important;
-  }
-
-  .dark .prose p {
-    color: white !important;
-    font-weight: 300 !important;
+    @apply sticky z-50 bg-background top-0;
   }
 
-  .margin-t {
-    margin-top: -9px;
-  }
 
   @keyframes shimmer {
     0% {
@@ -213,7 +283,13 @@ body {
   }
   /*输入框样式*/
   .ly-input{
-    @apply block w-full box-border text-ly-12 px-4 leading-4 border-1 border-ly-inputborder h-11.5 placeholder:text-ly-placeholder focus:outline-none
+    @apply block w-full box-border text-ly-12 px-4 leading-4 border-1 border-ly-inputborder h-11.5 placeholder:text-ly-placeholder focus:outline-none;
+  }
+
+  .middle-image-swiper.swiper-horizontal > .swiper-pagination-progressbar, 
+  .middle-image-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal{
+      bottom: -1rem ;
+      top: unset;
   }
 
   .fade-in{
@@ -267,9 +343,7 @@ body {
   .ly-vipplus-bg{
     background: linear-gradient(128.05deg, rgba(250, 231, 200, 1) 0%, rgba(249, 255, 235, 1) 27.29%, rgba(242, 215, 172, 1) 64.42%, rgba(232, 202, 153, 1) 100%);
   }
-}
-
-apple-pay-button {
+  apple-pay-button {
     --apple-pay-button-box-sizing: border-box;
     --apple-pay-button-width: 300px;
     --apple-pay-button-height: 48px;
@@ -277,4 +351,6 @@ apple-pay-button {
     --apple-pay-button-padding: 6px 0px;
     display: block;
     width: 100%;
-}
+  }
+}
+

src/app/layout.tsx

@@ -38,7 +38,7 @@ const __srOnly: React.CSSProperties = {
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
-  maximumScale: 2,
+  maximumScale: 1,
   // userScalable: false,
   viewportFit: "cover"
   // Also supported but less commonly used

src/components/customer/accountSwiper.tsx

@@ -18,7 +18,7 @@ interface ProductItem {
   rating: number;
   review_count: number;
 }
-// import 'swiper/css';
+
 // 模拟商品数据（和图片内容匹配）
 const productList:ProductItem[] = [
                     {

src/components/home/HomeImageBanner.tsx

@@ -2,7 +2,6 @@
 
 import { useRouter } from 'next/navigation';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
 import {CurrencySwitch} from "@/components/common/CurrencySwitch/CurrencySwitch";
 import makeClient from "@/lib/ApolloClientBrowser";
 import { GET_CART_ITEM,GET_FILTER_ATTRIBUTES,CREATE_APPLY_COUPON, GET_COUNTRY_STATES} from "@/graphql";