pc_nuxt/app/components/HeroComparePreview.vue

<template>
  <!--
    工具页 Hero 右侧的「前后对比」示例卡片。
    动漫头像 / 老照片 / 形象照三个页面共用这一个组件，保证切页时示例卡片位置和尺寸完全重叠
    （尺寸：190×142，lg 下 200×150；hero 内边距 py-10 = 80px，加 200px 与其它页 hero 等高）。
  -->
  <div
    class="cursor-pointer lg:w-[200px]"
    role="button"
    :aria-label="`查看${afterLabel}效果对比`"
    tabindex="0"
    @click="emit('open')"
    @keydown.enter.prevent="emit('open')"
    @keydown.space.prevent="emit('open')"
  >
    <div class="relative mx-auto h-[190px] w-[142px] overflow-hidden rounded-[28px] bg-[var(--c-dfe8f4)] shadow-[0_18px_38px_var(--sh-31-62-112-180)] lg:h-[200px] lg:w-[150px]">
      <!--
        两张图必须落在同一个盒子里、用同一套 object-fit 参数，再用 clip-path 裁掉原图右半边，
        这样左右两半才是同一处画面的前后对照（写法与大图对比弹层一致）。
        早先把原图塞进半宽容器 + 固定像素宽度，两张图的缩放基准不同，人物就会错位。
      -->
      <img :src="after" class="absolute inset-0 h-full w-full object-cover" :alt="`${afterLabel}示例`">
      <img
        :src="before"
        class="absolute inset-0 h-full w-full object-cover"
        style="clip-path: inset(0 50% 0 0)"
        :alt="`${beforeLabel}示例`"
      >
      <div class="absolute bottom-0 left-1/2 top-0 -ml-px w-0.5 bg-[var(--c-ffffff)]/95 shadow-[0_0_12px_var(--sh-20-37-66-220)]" />
      <div class="absolute left-3 top-3 rounded-full bg-[var(--c-0f172a)]/50 px-2 py-0.5 text-[10px] font-bold text-white">{{ beforeLabel }}</div>
      <div class="absolute right-3 top-3 rounded-full bg-[var(--c-0f172a)]/50 px-2 py-0.5 text-[10px] font-bold text-white">{{ afterLabel }}</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  /** 原图 */
  before: { type: String, required: true },
  /** 效果图 */
  after: { type: String, required: true },
  beforeLabel: { type: String, default: '原图' },
  /** 效果图角标：动漫 / 修复 / 艺术 */
  afterLabel: { type: String, default: '效果' },
})
const emit = defineEmits(['open'])
</script>