pc_nuxt/app/components/AppHero.vue

<template>
  <!--
    统一的页面 Hero 区域。
    目的：各工具页 hero 高度一致、底色一致（PC 端多页切换时不会突兀）。
    左侧文案 + 右侧自定义插槽（预览卡片等）。
  -->
  <section class="relative overflow-hidden border-b border-[var(--c-e8eef7)] bg-gradient-to-br from-[var(--c-ffffff)] via-[var(--c-eef6ff)] to-[var(--c-f5faff)]">
    <!-- 装饰光斑（低饱和，避免 PC 端色块过重） -->
    <div class="pointer-events-none absolute -right-24 -top-28 h-72 w-72 rounded-full bg-[var(--c-0b8cff)]/10 blur-2xl" />
    <div class="pointer-events-none absolute -bottom-28 right-40 h-56 w-56 rounded-full bg-[var(--c-20d3a2)]/10 blur-2xl" />

    <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="flex min-h-[220px] flex-col justify-center gap-6 py-8 lg:min-h-[280px] lg:flex-row lg:items-center lg:justify-between lg:gap-10 lg:py-10">
        <!-- 文案 -->
        <div class="max-w-[560px]">
          <div v-if="kicker" class="text-[11px] font-extrabold tracking-[0.18em] text-[var(--c-0b8cff)] lg:text-xs">
            {{ kicker }}
          </div>
          <h1 class="mt-3 text-[26px] font-extrabold leading-tight text-[var(--c-172033)] lg:text-[36px]">
            {{ title }}
          </h1>
          <p v-if="desc" class="mt-3 text-sm leading-relaxed text-[var(--c-66758a)] lg:text-base">
            {{ desc }}
          </p>
          <div v-if="$slots.actions" class="mt-5 flex flex-wrap items-center gap-3">
            <slot name="actions" />
          </div>
        </div>

        <!-- 右侧插槽：预览卡片等 -->
        <div v-if="$slots.aside" class="flex-shrink-0">
          <slot name="aside" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  kicker: { type: String, default: '' },
  title: { type: String, required: true },
  desc: { type: String, default: '' },
})
</script>