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

<template>
  <section class="cta">
    <div class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</div>
    <div class="cta-desc pf-sc-light">
      提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
    </div>
    <button class="cta-btn pf-sc-regular" @click="openConsultation">
      <span class="cta-btn-text">立即咨询</span>
      <i class="i-custom-arrow-right cta-btn-icon"></i>
    </button>
  </section>
</template>

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

<style scoped lang="scss">
  .cta {
    @apply w-full h-276px py-60px flex-center flex-col;
    @apply lt-sm:h-345px lt-sm:py-60px;
    background-size: cover;
    background-position: center;
    background-image: url('@/assets/images/bg-3.png');
    @screen lt-sm {
      background-size: cover;
      background-position: center;
      background-image: url('@/assets/images/bg-3-mobile.png');
    }
  }

  .cta-title {
    @apply font-s-40px lh-56px text-center;
    @apply lt-sm:font-s-40px lt-sm:lh-56px;
  }

  .cta-desc {
    @apply font-s-18px text-#232325;
    @apply lt-sm:font-s-18px lt-sm:mt-24px;
  }

  .cta-btn {
    @apply h-52px mt-22px w-268px bg-#0F67F8 text-white rounded-8px px-16px flex items-center justify-between hover:opacity-80;
    @apply lt-sm:h-84px lt-sm:w-391px lt-sm:mt-24px lt-sm:rounded-8px;
  }

  .cta-btn-text {
    @apply font-s-16px;
    @apply lt-sm:font-s-26px;
  }

  .cta-btn-icon {
    @apply i-custom-arrow-right wh-18px;
  }
</style>