huijia-website/app/components/section/hero.vue

<template>
  <section class="hero">
    <div class="hero-content">
      <div class="hero-text">
        <h1 class="hero-title">智慧社区整体解决方案</h1>
        <p class="hero-subtitle">绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。</p>

        <ul class="hero-metrics">
          <li v-for="(item, index) in metrics" :key="index" class="metric">
            <strong class="metric-value">{{ item.value }}</strong>
            <span class="metric-label">{{ item.label }}</span>
          </li>
        </ul>
        <div class="hero-actions">
          <button class="btn-primary hero-btn-primary">查看方案</button>
          <button class="hero-btn-outline" @click="openConsultation">免费咨询</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
  const { openConsultation } = useConsultation()

  const metrics = [
    { value: '300+', label: '服务客户' },
    { value: '800+', label: '管理小区' },
    { value: '50w+', label: '管理房屋' },
  ]
</script>

<style scoped lang="scss">
  .hero {
    @apply h-680px relative overflow-hidden;
    @apply lt-sm:w-full lt-sm:h-auto lt-sm:aspect-[750/880];

    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/banner.png');

    @screen lt-sm {
      @apply w-full h-auto;
      aspect-ratio: 750/880;
      background-image: url('@/assets/images/banner-mobile.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .hero-content {
      @extend %landing-container;
      @apply flex items-center pb-48px pt-200px;
      @apply lt-sm:pt-80px;
    }

    .hero-text {
      @apply text-left w-full;
      @apply lt-sm:text-center;
    }

    .hero-metrics {
      @apply mt-35px flex items-center gap-48px;
      @apply lt-sm:justify-center lt-sm:mt-20px lt-sm:gap-76px;
    }

    .hero-title {
      @apply font-s-48px font-semibold text-#000000;
      @apply lt-sm:font-s-56px;
    }

    .hero-subtitle {
      @apply font-s-18px text-#091221/70;
      @apply lt-sm:mt-12px lt-sm:font-s-26px lt-sm:px-25px;
      @apply lt-xs:px-0;
    }

    .hero-actions {
      @apply mt-35px flex items-center gap-16px;
      @apply lt-sm:justify-center lt-sm:absolute lt-sm:bottom-80px lt-sm:left-1/2 lt-sm:-translate-x-1/2;
    }

    .hero-btn-primary {
      @apply w-127px h-56px rounded-8px text-white font-s-18px pf-sc-semibold;
      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
    }

    .hero-btn-outline {
      @apply w-127px h-56px bg-white border-#0F67F8 border-1 rounded-8px hover:opacity-80 font-s-18px font-semibold text-#0F67F8;
      @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
    }

    .metric {
      @apply flex items-start flex-col;
      @apply lt-sm:items-center;

      .metric-value {
        @apply font-s-32px font-semibold text-#0F67F8;
        @apply lt-sm:font-s-52px;
      }

      .metric-label {
        @apply font-s-14px text-#384146;
        @apply lt-sm:font-s-24px;
      }
    }
  }

  .btn-primary {
    @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF];
    border: none;
    outline: none;
    &:hover {
      opacity: 0.8;
    }
  }
</style>