BigStickNewOfficialWebsite-V2/pages/solutions.vue

<script setup>
import SiteHeader from '~/components/site/SiteHeader.vue'
import SiteFooter from '~/components/site/SiteFooter.vue'

const activeIndustry = ref('enterprise')
const { openConsultation } = useConsultation()

useHead({
  title: '行业解决方案｜大马棒·云途全域 GEO',
  meta: [
    {
      name: 'description',
      content:
        '面向企业服务、教育培训、本地生活、医疗健康与电商零售行业，提供基于真实用户决策路径的 GEO 获客转化方案。'
    }
  ]
})

const industries = [
  {
    id: 'enterprise',
    name: '企业服务',
    summary: 'SaaS/软件/企服公司的获客与转化增长方案',
    icon: '/images/lanhu/slices/切图 41@2x.png',
    color: '#3b82ff',
    question: 'SaaS/软件/企服公司 最头疼什么？',
    answer: '决策动不动几个月，客户到处比方案，搜一圈下来你连备选名单都没进。',
    tacticTitle: '不追流量，追“信任”。',
    tactic:
      'B 端采购者搜的是问题，不是品牌名。我们在行业媒体做背书，在“怎么解决XX问题”的页面里埋你的方案，让客户在比选阶段就看到你。',
    actions: [
      '行业媒体深度稿+创始人访谈，拉高品牌水位',
      '占住“行业解决方案”“系统怎么选”这类长尾词',
      '持续输出白皮书、案例复盘，养客户信任'
    ],
    imageText: ['长尾关键词布局1200+', '有效线索成本直降45%']
  },
  {
    id: 'education',
    name: '教育培训',
    summary: '教育机构招生引流与品牌口碑建设方案',
    icon: '/images/lanhu/slices/切图 42@2x.png',
    color: '#20c781',
    question: '教育机构 最担心什么？',
    answer: '家长会反复搜索口碑、课程效果和真实评价，任何一处信息缺口都会影响咨询。',
    tacticTitle: '把“别人怎么说你”系统管理起来。',
    tactic:
      '围绕择校指南、课程比较、避坑经验与真实学习反馈，覆盖家长从了解、比较到报名咨询的完整路径。',
    actions: [
      '构建真实学员口碑内容矩阵，覆盖主流搜索与内容平台',
      '围绕“机构怎么样”“课程值得吗”等问题精准布局',
      '用场景化内容引导咨询，让搜索流量进入课程承接页'
    ],
    imageText: ['口碑内容矩阵覆盖800+', '试听咨询率提升38%']
  },
  {
    id: 'local-life',
    name: '本地生活',
    summary: '餐饮美业休闲娱乐门店引流获客方案',
    icon: '/images/lanhu/slices/切图 43@2x.png',
    color: '#ff7a2f',
    question: '本地生活门店 最怕什么？',
    answer: '用户就在附近搜，搜完就决定去哪一家；搜不到你，就等于把客户送给隔壁。',
    tacticTitle: '不是做大曝光，而是让附近的人搜得到你。',
    tactic:
      '围绕真实消费场景，在本地生活平台、内容社区和短视频渠道建立稳定覆盖，让用户从看到、心动到到店之间少走一步。',
    actions: [
      '覆盖本地生活平台内容，占住同城与附近搜索位置',
      '组合同城达人和真实顾客内容，避免假种草',
      '明确位置、场景、产品与消费理由，缩短到店路径'
    ],
    imageText: ['同城搜索覆盖95%', '到店咨询量提升170%']
  },
  {
    id: 'healthcare',
    name: '医疗健康',
    summary: '医疗机构品牌信任建设与患者获取方案',
    icon: '/images/lanhu/slices/切图 44@2x.png',
    color: '#ff525f',
    question: '医疗健康机构 最关键什么？',
    answer: '用户先相信你的专业，才敢把健康交给你；同时内容表达必须稳定合规。',
    tacticTitle: '不做擦边推广，建设合规权威形象。',
    tactic:
      '以合规科普为核心，把专业能力转化为用户看得懂、AI 能识别的内容，在用户搜索健康问题时持续呈现准确、稳定的专业声音。',
    actions: [
      '体系化输出合规科普内容，强化专业人设与核心 IP',
      '覆盖用户从“查症状”到“选机构”的全流程问题',
      '系统维护公开口碑，及时纠正过时与不准确信息'
    ],
    imageText: ['合规科普体系搭建', '品牌信任持续沉淀']
  },
  {
    id: 'ecommerce',
    name: '电商零售',
    summary: '电商零售品牌内容种草与转化承接方案',
    icon: '/images/lanhu/slices/切图 45@2x.png',
    color: '#a85cff',
    question: '电商零售品牌 最容易卡在哪里？',
    answer: '平台流量越来越贵，用户被种草后却搜不到品牌内容，信任验证断在站外。',
    tacticTitle: '填满用户主动搜索品牌时看到的内容。',
    tactic:
      '通过种草、测评、使用场景、短视频与直播承接，串起“被种草—主动搜—找到品牌—进入店铺或私域”的完整路径。',
    actions: [
      '全平台种草内容布局，持续提升品牌主动搜索热度',
      '产品测评与使用场景内容，降低理解和决策门槛',
      '把搜索流量承接至店铺、直播间与私域，沉淀复购用户'
    ],
    imageText: ['内容资产沉淀30000+', '自然流量占比提升60%']
  }
]

const activeDetail = computed(
  () => industries.find((industry) => industry.id === activeIndustry.value) || industries[0]
)

function selectIndustry(id) {
  activeIndustry.value = id
  document.getElementById('industry-plan')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
}

function requestIndustryPlan(industry, source) {
  openConsultation({ title: `获取${industry}行业方案`, industry, source })
}

function requestCustomPlan(source) {
  openConsultation({ title: '咨询定制行业方案', source })
}
</script>

<template>
  <div class="solutions-page">
    <a class="skip-link" href="#main-content">跳到主要内容</a>
    <SiteHeader />

    <main id="main-content">
      <section class="solutions-hero">
        <div class="page-width solutions-hero-inner">
          <div class="solutions-hero-copy">
            <p class="hero-badge"><span></span>专业营销增长服务商</p>
            <h1>让每一个行业<br />都有一套自己的增长打法</h1>
            <p>
              深度理解不同行业的增长痛点与用户决策路径，基于真实用户决策路径，匹配针对性的获客转化策略。
            </p>
            <button
              class="solutions-primary-button"
              type="button"
              @click="requestCustomPlan('行业解决方案页 Hero')"
            >
              获取专属方案 <AppIcon name="arrow-right" />
            </button>
          </div>

          <img
            class="solutions-hero-art"
            src="/images/lanhu/slices/组 352@2x.png"
            alt="行业增长策略视觉"
          />
        </div>
      </section>

      <section class="industry-overview">
        <div class="page-width">
          <header class="solutions-section-heading">
            <h2>哪些企业必须拥有<span>自己的增长打法</span></h2>
            <p>Which Enterprises Must Develop Their Own Growth Strategies?</p>
          </header>

          <div class="industry-card-grid">
            <button
              v-for="industry in industries"
              :key="industry.id"
              class="industry-card"
              type="button"
              :class="{ active: activeIndustry === industry.id }"
              :style="{ '--industry-color': industry.color }"
              @click="selectIndustry(industry.id)"
            >
              <img :src="industry.icon" :alt="`${industry.name}图标`" />
              <strong>{{ industry.name }}</strong>
              <span>{{ industry.summary }}</span>
              <small>了解更多 <AppIcon name="arrow-right" /></small>
            </button>
          </div>
        </div>
      </section>

      <section id="industry-plan" class="industry-plan-section">
        <div class="page-width">
          <header class="solutions-section-heading">
            <h2>我们如何<span>帮助客户</span></h2>
            <p>How We Support Our Customers</p>
          </header>

          <div class="industry-plan-layout">
            <div class="industry-tabs" aria-label="行业解决方案切换">
              <button
                v-for="industry in industries"
                :key="`tab-${industry.id}`"
                type="button"
                :class="{ active: activeIndustry === industry.id }"
                @click="activeIndustry = industry.id"
              >
                <img :src="industry.icon" alt="" />
                <span>
                  <strong>{{ industry.name }}</strong>
                  <small>{{ industry.summary.split('与')[0] }}</small>
                </span>
              </button>
            </div>

            <Transition name="solution-card" mode="out-in">
              <article :key="activeDetail.id" class="solution-detail-card">
                <div class="question-card">
                  <img src="/images/lanhu/slices/切图 39@2x.png" alt="" />
                  <div>
                    <strong>{{ activeDetail.question }}</strong>
                    <p>{{ activeDetail.answer }}</p>
                  </div>
                </div>

                <div class="detail-block">
                  <h3><span></span>我们怎么打</h3>
                  <p>{{ activeDetail.tacticTitle }} {{ activeDetail.tactic }}</p>
                </div>

                <div class="detail-block">
                  <h3><span></span>具体做几件事</h3>
                  <ul>
                    <li v-for="action in activeDetail.actions" :key="action">{{ action }}</li>
                  </ul>
                </div>

                <div class="result-visual">
                  <img src="/images/lanhu/slices/home-group95-image21@2x.png" alt="" />
                  <p>
                    <strong>{{ activeDetail.imageText[0] }}</strong>
                    <span>{{ activeDetail.imageText[1] }}</span>
                  </p>
                </div>
              </article>
            </Transition>
          </div>

          <div class="plan-actions">
            <button
              class="solutions-primary-button"
              type="button"
              @click="requestIndustryPlan(activeDetail.name, `${activeDetail.name}行业方案板块`)"
            >
              看{{ activeDetail.name }}完整方案 <AppIcon name="arrow-right" />
            </button>
            <button
              class="solutions-ghost-button"
              type="button"
              @click="requestCustomPlan('行业方案咨询')"
            >
              立即咨询
            </button>
          </div>
        </div>
      </section>

      <section class="more-industries-section">
        <div class="page-width more-industries-inner">
          <div>
            <h2>没在上面找到你的行业？</h2>
            <p>
              快消、地产、金融、汽车、法律……我们服务过的不止这些。无论你属于什么行业、处于什么发展阶段，我们都会基于你的品牌现状与增长目标，匹配最合适的营销策略。
            </p>
          </div>
          <button
            class="solutions-outline-light"
            type="button"
            @click="requestCustomPlan('更多行业板块')"
          >
            咨询定制方案 <AppIcon name="arrow-right" />
          </button>
        </div>
      </section>
    </main>

    <SiteFooter />
  </div>
</template>

<style scoped>
.solutions-page {
  --solutions-blue: #237df0;
  --solutions-ink: #333947;
  overflow: hidden;
  color: var(--solutions-ink);
  background: #fff;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  background: #1f70df;
  transform: translateY(-150%);
  transition: transform 0.2s;
}

.skip-link:focus {
  transform: translateY(0);
}

.solutions-hero {
  position: relative;
  min-height: 528px;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: linear-gradient(180deg, #f8faff 0%, #f3f7ff 100%);
}

.solutions-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: radial-gradient(circle at 55% 45%, rgba(110, 172, 255, 0.16), transparent 28%);
}

.solutions-hero-inner {
  position: relative;
  min-height: 528px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
}

.solutions-hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 10px;
}

.hero-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid rgba(50, 136, 252, 0.34);
  border-radius: 999px;
  color: #287df4;
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 500;
}

.hero-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5fa7ff;
}

.solutions-hero-copy h1 {
  margin: 22px 0 0;
  color: #3c3f48;
  font-size: clamp(38px, 3.7vw, 56px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.43;
}

.solutions-hero-copy > p:not(.hero-badge) {
  max-width: 610px;
  margin: 15px 0 0;
  color: #687386;
  font-size: 16px;
  line-height: 1.75;
}

.solutions-primary-button,
.solutions-ghost-button,
.solutions-outline-light {
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.solutions-primary-button {
  margin-top: 30px;
  color: #fff;
  background: linear-gradient(100deg, #453cff 0%, #08aef5 100%);
  box-shadow: 0 12px 24px rgba(31, 125, 240, 0.2);
}

.solutions-primary-button:hover,
.solutions-ghost-button:hover,
.solutions-outline-light:hover {
  transform: translateY(-2px);
}

.solutions-primary-button:hover {
  box-shadow: 0 16px 30px rgba(31, 125, 240, 0.28);
}

.solutions-hero-art {
  width: min(850px, 63vw);
  justify-self: end;
  transform: translate(70px, -5px);
  filter: drop-shadow(0 28px 36px rgba(36, 123, 224, 0.12));
}

.industry-overview {
  position: relative;
  padding: 77px 0 92px;
  background:
    radial-gradient(circle at 18% 84%, rgba(166, 231, 255, 0.13), transparent 24%),
    radial-gradient(circle at 82% 34%, rgba(252, 205, 232, 0.12), transparent 24%), #fff;
}

.solutions-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.solutions-section-heading h2 {
  margin: 0;
  color: #3c3f48;
  font-size: clamp(30px, 2.55vw, 43px);
  font-weight: 800;
  line-height: 1.3;
}

.solutions-section-heading h2 span {
  color: #287df4;
}

.solutions-section-heading p {
  width: fit-content;
  margin: 14px auto 0;
  color: #9da3ad;
  font-size: 14px;
  text-align: center;
}

.industry-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.industry-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 23px 23px 21px;
  border: 1px solid #cad8e8;
  border-radius: 11px;
  color: #4b5564;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.industry-card:hover,
.industry-card.active {
  border-color: color-mix(in srgb, var(--industry-color), #ffffff 18%);
  background: #fff;
  box-shadow: 0 18px 42px rgba(68, 120, 190, 0.12);
  transform: translateY(-5px);
}

.industry-card img {
  width: 60px;
  height: 60px;
}

.industry-card strong {
  margin-top: 20px;
  color: #343944;
  font-size: 18px;
  font-weight: 800;
}

.industry-card > span {
  min-height: 45px;
  margin-top: 10px;
  color: #606a79;
  font-size: 14px;
  line-height: 1.55;
}

.industry-card small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: var(--industry-color);
  font-size: 13px;
  font-weight: 600;
}

.industry-plan-section {
  padding: 82px 0 95px;
  background: linear-gradient(180deg, #f6fbff 0%, #f3f7fb 100%);
}

.industry-plan-layout {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(520px, 1.08fr);
  gap: 18px;
  margin-top: 42px;
}

.industry-tabs {
  display: grid;
  gap: 18px;
}

.industry-tabs button {
  min-height: 105px;
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #3d4654;
  background: #fff;
  text-align: left;
  box-shadow: 0 10px 24px rgba(87, 124, 169, 0.035);
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.industry-tabs button.active {
  border-color: #4087ff;
  background: #edf5ff;
  box-shadow: 0 16px 34px rgba(44, 124, 240, 0.1);
}

.industry-tabs button:hover {
  transform: translateX(4px);
}

.industry-tabs img {
  width: 54px;
  height: 54px;
}

.industry-tabs strong,
.industry-tabs small {
  display: block;
}

.industry-tabs strong {
  color: #353b46;
  font-size: 19px;
  font-weight: 800;
}

.industry-tabs small {
  margin-top: 7px;
  color: #687282;
  font-size: 14px;
}

.solution-detail-card {
  min-height: 600px;
  padding: 52px 28px 30px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(65, 100, 143, 0.08);
}

.question-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 17px;
  align-items: center;
  padding: 23px 28px;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(244, 249, 255, 0.95), rgba(255, 255, 255, 0.9));
}

.question-card img {
  width: 60px;
  height: 60px;
}

.question-card strong {
  color: #287df4;
  font-size: 17px;
  font-weight: 800;
}

.question-card p {
  margin: 8px 0 0;
  color: #5c8ee8;
  font-size: 13px;
  line-height: 1.7;
}

.detail-block {
  margin-top: 29px;
}

.detail-block h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: #3d4551;
  font-size: 18px;
  font-weight: 800;
}

.detail-block h3 span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, #46a8ff 20% 100%);
  box-shadow: 0 0 0 4px rgba(50, 150, 255, 0.1);
}

.detail-block p {
  margin: 15px 0 0;
  color: #5e6673;
  font-size: 15px;
  line-height: 1.85;
}

.detail-block ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.detail-block li {
  position: relative;
  padding-left: 24px;
  color: #5d6775;
  font-size: 14px;
  line-height: 1.7;
}

.detail-block li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: #16c781;
  content: '✓';
  font-weight: 800;
}

.result-visual {
  position: relative;
  margin-top: 33px;
  overflow: hidden;
  border-radius: 5px;
}

.result-visual img {
  width: 100%;
  height: 172px;
  display: block;
  object-fit: cover;
}

.result-visual p {
  position: absolute;
  top: 34px;
  left: 36px;
  margin: 0;
  color: #2e3540;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.result-visual strong,
.result-visual span {
  display: block;
}

.result-visual strong {
  color: #19202b;
}

.result-visual span {
  color: #207af0;
}

.plan-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 42px;
}

.plan-actions .solutions-primary-button {
  margin-top: 0;
}

.solutions-ghost-button {
  min-width: 154px;
  border: 1px solid #8f97a3;
  color: #4d5663;
  background: transparent;
}

.solutions-ghost-button:hover {
  border-color: #247df4;
  color: #247df4;
}

.solution-card-enter-active,
.solution-card-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.22s ease;
}

.solution-card-enter-from,
.solution-card-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.more-industries-section {
  padding: 80px 0;
  color: #fff;
  background-color: #1a1a2e !important;
}

.more-industries-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 60px;
}

.more-industries-inner h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 800;
}

.more-industries-inner p {
  max-width: 800px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  line-height: 1.8;
}

.solutions-outline-light {
  min-width: 166px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  color: #fff;
  background: transparent;
}

.solutions-outline-light:hover {
  border-color: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1180px) {
  .solutions-hero-art {
    width: min(760px, 62vw);
    transform: translate(36px, 0);
  }

  .industry-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .industry-plan-layout {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

@media (max-width: 900px) {
  .solutions-page :deep(.subsite-header) {
    height: 58px;
  }

  .solutions-hero,
  .solutions-hero-inner {
    min-height: auto;
  }

  .solutions-hero-inner {
    grid-template-columns: 1fr;
    padding-top: 70px;
    padding-bottom: 60px;
  }

  .solutions-hero-art {
    width: min(680px, 100%);
    justify-self: center;
    margin-top: 28px;
    transform: none;
  }

  .industry-card-grid,
  .industry-plan-layout,
  .more-industries-inner {
    grid-template-columns: 1fr;
  }

  .industry-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .industry-tabs button {
    min-height: 92px;
  }
}

@media (max-width: 620px) {
  .solutions-hero-inner {
    padding-top: 48px;
  }

  .solutions-hero-copy h1 {
    font-size: clamp(31px, 9vw, 40px);
    line-height: 1.38;
  }

  .solutions-hero-copy > p:not(.hero-badge) {
    font-size: 14px;
  }

  .solutions-hero-art {
    width: 135%;
    margin-left: -20%;
  }

  .industry-overview,
  .industry-plan-section {
    padding-top: 62px;
    padding-bottom: 68px;
  }

  .industry-card-grid {
    gap: 13px;
  }

  .industry-card {
    min-height: 205px;
  }

  .industry-tabs {
    grid-template-columns: 1fr;
  }

  .solution-detail-card {
    min-height: auto;
    padding: 24px 18px;
  }

  .question-card {
    grid-template-columns: 48px 1fr;
    padding: 18px;
  }

  .question-card img {
    width: 48px;
    height: 48px;
  }

  .result-visual img {
    height: 150px;
  }

  .result-visual p {
    top: 26px;
    left: 22px;
    font-size: 17px;
  }

  .plan-actions {
    flex-direction: column;
  }

  .more-industries-section {
    padding: 58px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-page *,
  .solutions-page *::before,
  .solutions-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
</style>