From 048732dfeff215be94e41869e388fdea403ff520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Tue, 29 Sep 2026 14:26:41 +0800
Subject: [PATCH] =?UTF-8?q?style(viewer):=20=E5=B9=BF=E5=91=8A=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E6=94=B9=E4=BB=8E=E5=8F=B3=E5=BE=80=E5=B7=A6=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E5=88=87=E6=8D=A2=EF=BC=88translateX=20=E8=BD=A8?=
 =?UTF-8?q?=E9=81=93=EF=BC=8C=E6=9B=BF=E4=BB=A3=E6=B7=A1=E5=85=A5=E6=B7=A1?=
 =?UTF-8?q?=E5=87=BA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 apps/viewer/src/components/ads/AdCarousel.vue | 39 +++++++------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/apps/viewer/src/components/ads/AdCarousel.vue b/apps/viewer/src/components/ads/AdCarousel.vue
index bff23ae..c6c7826 100644
--- a/apps/viewer/src/components/ads/AdCarousel.vue
+++ b/apps/viewer/src/components/ads/AdCarousel.vue
@@ -98,9 +98,10 @@ function openAd(ad: PublicAd): void {
     @pointerenter="paused = true" @pointerdown="paused = true" @pointerleave="paused = false"
     @touchstart="onTouchStart" @touchend="onTouchEnd"
   >
-    <!-- 全帧堆叠 + 透明度过渡（2026-09-29 切换柔化）：所有帧常驻 DOM 预加载
-         （首轮切换不空白），仅活跃帧可交互/可聚焦；错误上报只看活跃帧。 -->
-    <div class="ad-slides">
+    <!-- 轨道式滑动（2026-09-29 用户定稿：从右往左滑入，不做淡入淡出）：全帧
+         常驻轨道预加载（首轮切换不空白），track 整体 translateX；仅活跃帧
+         可聚焦；错误上报只看活跃帧。 -->
+    <div class="ad-slides" :style="{ transform: `translateX(-${current * 100}%)` }">
       <button
         v-for="(ad, i) in ads" :key="ad.adId" type="button" class="ad-slide"
         :class="{ active: i === current }" :aria-label="t('ads.open')"
@@ -146,41 +147,31 @@ function openAd(ad: PublicAd): void {
   touch-action: pan-y;
 }
 .ad-slides {
-  position: relative;
+  display: flex;
   width: 100%;
-  height: 100%;
+  align-items: flex-start; /* 各帧自然高度（运营上传统一高度图）；track 高=最高帧 */
+  /* 从右往左滑动切换（下一帧自右侧滑入；后退/右滑自然反向）。 */
+  transition: transform 0.45s ease;
 }
 .ad-slide {
-  /* 非活跃帧绝对叠放（淡出层，cover 吸收与活跃帧的细微高度差）；活跃帧
-   * 回归文档流撑起容器高度——图片自然高度即轮播高度（2026-09-29 用户定稿：
-   * 运营上传统一高度图片，容器不用固定比例锚点）。 */
-  position: absolute;
-  inset: 0;
+  flex: 0 0 100%;
   display: block;
   width: 100%;
-  height: 100%;
   padding: 0;
   border: 0;
   background: transparent;
   cursor: pointer;
-  /* 淡入淡出（切换柔化）：非活跃帧透明且不拦截交互；transition 只对 opacity，
-   * 与 prefers-reduced-motion 无关（纯视觉淡变，非位移动画）。 */
-  opacity: 0;
-  transition: opacity 0.45s ease;
-  pointer-events: none;
 }
-.ad-slide.active {
-  position: relative;
-  inset: auto;
-  height: auto;
-  opacity: 1;
-  pointer-events: auto;
+/* 位移类动画尊重系统减动效偏好（HeartComponents 同规）。 */
+@media (prefers-reduced-motion: reduce) {
+  .ad-slides {
+    transition: none;
+  }
 }
 .ad-slide img {
   display: block;
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  height: auto;
 }
 .ad-badge {
   position: absolute;