固定宽度预览轮播

不预设“一屏显示几张”，而是先定义卡片最舒服的自然尺寸，再让视口决定可见数量。

固定宽度卡片 桌面端保持 370px 自然宽度，不按容器平均分配。
下一张预览 通过外层裁切与内部可见溢出，持续暗示后方还有内容。
自然可视数量 Swiper 使用 slidesPerView: 'auto'，让视口决定能看到几张。
桌面方向控制 大屏提供上一张与下一张按钮，边界状态自动禁用。
移动端触控 手机端卡片改为 300px，并隐藏方向按钮，优先手势滑动。
分类 Tabs 同一套视觉结构支持多个分类面板，切换逻辑保持清晰。
延迟初始化 分类首次打开时才创建 Swiper，避免隐藏容器尺寸计算异常。
图片比例锁定 aspect-ratio: 370 / 497，桌面与手机保持统一竖版构图。
底部渐变文字层 文字独立于图片，通过伪元素渐变保证可读性与视觉完整。
克制的 Hover 仅放大到 1.02，动效缓慢且轻，不破坏大图展示的稳定感。
Swiper 本地加载 JS 与 CSS 均放在项目目录，演示运行时不依赖远程 CDN。
响应式留白 桌面使用宽留白，手机收敛到 20px，保留下一张露出空间。
固定宽度卡片 桌面端保持 370px 自然宽度，不按容器平均分配。
下一张预览 通过外层裁切与内部可见溢出，持续暗示后方还有内容。
自然可视数量 Swiper 使用 slidesPerView: 'auto'，让视口决定能看到几张。
图片比例锁定 aspect-ratio: 370 / 497，桌面与手机保持统一竖版构图。
底部渐变文字层 文字独立于图片，通过伪元素渐变保证可读性与视觉完整。
响应式留白 桌面使用宽留白，手机收敛到 20px，保留下一张露出空间。
桌面方向控制 大屏提供上一张与下一张按钮，边界状态自动禁用。
分类 Tabs 同一套视觉结构支持多个分类面板，切换逻辑保持清晰。
延迟初始化 分类首次打开时才创建 Swiper，避免隐藏容器尺寸计算异常。
克制的 Hover 仅放大到 1.02，动效缓慢且轻，不破坏大图展示的稳定感。
下一张预览 通过外层裁切与内部可见溢出，持续暗示后方还有内容。
移动端触控 手机端卡片改为 300px，并隐藏方向按钮，优先手势滑动。
延迟初始化 分类首次打开时才创建 Swiper，避免隐藏容器尺寸计算异常。
图片比例锁定 aspect-ratio: 370 / 497，桌面与手机保持统一竖版构图。
响应式留白 桌面使用宽留白，手机收敛到 20px，保留下一张露出空间。
图片比例锁定 aspect-ratio: 370 / 497，桌面与手机保持统一竖版构图。
底部渐变文字层 文字独立于图片，通过伪元素渐变保证可读性与视觉完整。
克制的 Hover 仅放大到 1.02，动效缓慢且轻，不破坏大图展示的稳定感。
Swiper 本地加载 JS 与 CSS 均放在项目目录，演示运行时不依赖远程 CDN。