hulai-website/components/home/HeroBanner.vue

<template>
  <section v-if="brand && images" class="hero">
    <div class="hero-bg">
      <img
        :src="images.hero.background"
        alt="呼伦贝尔草原风光 莫日格勒河蜿蜒穿过辽阔草原"
        class="hero-bg-img"
        width="1600"
        height="900"
        fetchpriority="high"
      />
      <div class="hero-overlay" />
    </div>
    <div class="container hero-inner">
      <h1 class="hero-title">{{ seo.h1 }}</h1>
      <p class="hero-emotional">{{ brand.slogan.emotional }}</p>
      <p class="hero-functional">{{ brand.slogan.functional }}</p>
      <div class="hero-actions">
        <NuxtLink to="/products" class="hero-btn hero-btn--primary">
          <span>查看产品</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M6 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </NuxtLink>
        <NuxtLink to="/faq" class="hero-btn hero-btn--outline">常见问答</NuxtLink>
      </div>
    </div>
    <!-- 底部弧形裁切 -->
    <div class="hero-curve">
      <svg viewBox="0 0 1440 64" fill="none" preserveAspectRatio="none" aria-hidden="true">
        <path d="M0 64h1440V32C1200 0 240 0 0 32v32z" fill="currentColor" />
      </svg>
    </div>
  </section>
</template>

<script setup>
defineProps({
  seo: { type: Object, required: true },
})

const { data: brand } = await usePublicApi('brand')
const { data: images } = await usePublicApi('images')

// 仅在首页 preload Hero 图片，避免全站加载
useHead({
  link: [
    { rel: 'preload', href: images.value?.hero?.background, as: 'image' },
  ],
})
</script>

<style lang="less" scoped>
.hero {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;

  .respond-md({
    min-height: 580px;
  });

  .respond-lg({
    min-height: 640px;
  });
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

// 更丰富的渐变遮罩
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 26, 46, 0.35) 0%, rgba(26, 26, 46, 0.15) 40%, rgba(26, 26, 46, 0.5) 100%),
    linear-gradient(135deg, rgba(45, 106, 79, 0.3) 0%, transparent 60%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: @space-4xl;
  padding-bottom: 100px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;

  .respond-md({
    padding-top: @space-4xl;
    padding-bottom: 120px;
  });
}

.hero-title {
  color: #FFFFFF;
  margin-bottom: @space-lg;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}

.hero-emotional {
  font-size: @font-size-xl;
  color: rgba(255, 255, 255, 0.95);
  font-weight: @font-weight-medium;
  margin-bottom: @space-sm;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

  .respond-md({
    font-size: @font-size-2xl;
  });
}

.hero-functional {
  font-size: @font-size-md;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: @space-xl;

  .respond-md({
    font-size: @font-size-lg;
  });
}

.hero-actions {
  display: flex;
  gap: @space-md;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: @space-sm;
  padding: 14px 32px;
  border-radius: @border-radius-full;
  font-size: @font-size-base;
  font-weight: @font-weight-medium;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);

  .respond-md({
    padding: 16px 40px;
    font-size: @font-size-md;
  });

  &--primary {
    background: #fff;
    color: @color-primary;
    border: 2px solid #fff;

    &:hover {
      background: rgba(255, 255, 255, 0.92);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      color: @color-primary;
    }
  }

  &--outline {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;

    &:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.8);
      color: #fff;
      transform: translateY(-2px);
    }
  }
}

// 底部弧形
.hero-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
  color: @color-bg-gray;

  svg {
    width: 100%;
    height: 40px;

    .respond-md({
      height: 64px;
    });
  }
}
</style>