feat(website): Hero 截图改为轮播，新增回到顶部

[Leaderxin]

做了什么

Hero 的截图从一张改成五张的产品导览轮播，首张按你说的用日间主题（深色站点上先给一张亮色截图，应用有两套主题这件事才在第一眼说清楚）。默认不跟站点主题联动，纯手动。

轮播内容：主界面（日间）→ 主界面（夜间）→ 市场概览 → 分时 + 五档 → 指数 K 线。五张都是 2057×1466，宽高比一致，切换时轨道高度不变。

右下角新增回到顶部按钮，滚过 3/4 屏后淡入。

轮播的几个决定

• 不自动播放。 会动的 Hero 抢走正文的注意力，而且正是 prefers-reduced-motion 想拦掉的那类动效。
• 左右按钮常显，不做成 hover 才出现。 触摸设备没有 hover，而「看不出可以点」是轮播最常见的失败。按钮是深色玻璃底、不跟主题走 —— 它压的是截图而不是页面底色，截图本身有亮有暗，只有「深底 + 浅图标」两边都成立。
• 非当前页设 aria-hidden。 其余几页只是被 transform 移出视野，仍在无障碍树里，不标记的话读屏会把五张截图一口气全念出来。
• 方向键只在焦点进入轮播时才接管（监听挂在 .carousel 上而不是 document 上），否则会劫持页面本身的滚动。已测：焦点在 body 上按右键，轮播不动。
• 触摸滑动只是加分项（按钮和圆点始终可见），判定卡严 —— 横向位移 >45px 且大于纵向 3 倍，且不调 preventDefault，竖向拖动仍然是滚动页面。
• 圆点命中区 44×44、点与点间隔 8px，但视觉上只是 8px 的点；选中态拉成胶囊，不靠颜色一个维度表意。

回到顶部

做成 <a href="#top"> 而不是 <button>：滚动交给片段导航与 html{scroll-behavior:smooth}，禁用 JS 时它照样能用，JS 只决定「滚过 3/4 屏才显示」。用锚点还顺手避开一个坑 —— 按钮版本在「滚到顶就隐藏」时若正持有焦点，会把焦点丢给 body。

顺带修掉两个布局缺陷

1. 图片被纵向拉伸。 为防 CLS 给轮播图加了 width/height 属性，但 CSS 里只覆盖了 width，height 属性就作为定值生效了 —— 实测渲染成 1070×1466 而不是 1070×763。补上 height: auto。这个是从渲染图里看不出来的，靠量 getBoundingClientRect() 才发现。
2. 功能图没预留宽高比，lazy 加载完会把下方内容顶下去一次。用 aspect-ratio: 2057/1466 预留，行情条那两张 344×59 的用 auto 关掉继承。

验证

• 用 Chrome 无头实际渲染：五页逐一截图核对（含点圆点跳转、连点两次切换）、深浅两套主题、500px 移动端
• 写了个状态测试跑 --dump-dom 抓结果，确认环绕（5→1、1→5）、aria-hidden 同步、计数器与文案更新、方向键不劫持页面
• 对比度审计扩到 58 组全过（新增箭头图标压亮色截图 9.37:1、未选中圆点 3.08:1 等）
• 500/620/860/1024/1440 五个宽度下 scrollWidth === clientWidth，无横向溢出
• HTML 标签闭合、24 张图 alt 齐全、vue-tsc 与 149 个测试全绿