init

2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
@@ -0,0 +1,87 @@
+<script setup>
+import { serviceOverview } from "~/data/services";
+
+defineProps({
+  problem: {
+    type: Object,
+    default: () => serviceOverview.problem,
+  },
+});
+</script>
+
+<template>
+  <section
+    class="bg-top bg-no-repeat py-6 md:py-16"
+    :style="{ backgroundImage: `url(${problem.backgroundImage})` }"
+  >
+    <div class="container-gm">
+      <div class="mx-auto max-w-[760px] text-center" data-reveal>
+        <h2 class="section-title text-balance">
+          企业的营销数字化面临的
+          <span class="text-gm-green">三个问题</span>
+          ，增长超人将如何帮您解决？
+        </h2>
+        <div class="mx-auto mt-7 flex size-12 items-center justify-center rounded-full border border-[#b7f7c2] text-gm-green shadow-[0_0_0_8px_rgba(27,214,41,0.08)]">
+          ↓
+        </div>
+      </div>
+
+      <article class="mt-14 grid gap-10 rounded-[20px] bg-white px-6 py-8 shadow-soft lg:mt-[92px] lg:grid-cols-[1.05fr_0.95fr] lg:px-12 lg:py-10" data-stagger>
+        <div data-stagger-item>
+          <span class="rounded-full bg-gm-green px-4 py-1 text-xs font-medium text-white">
+            {{ problem.problemLabel }}
+          </span>
+          <h3 class="mt-8 text-[24px] font-medium leading-[1.5] text-[#7f7f7f] md:text-[30px]">
+            {{ problem.problem }}
+          </h3>
+
+          <p class="mt-9 text-sm text-[#999]">{{ problem.solutionTitle }}</p>
+          <p class="mt-4 text-[24px] font-medium leading-[1.5] text-[#8f8f8f] md:text-[30px]">
+            {{ problem.solution }}
+          </p>
+
+          <div class="mt-16 space-y-5">
+            <p class="text-sm text-[#999]">网站开发服务</p>
+            <NuxtLink :to="problem.solutionLink.href" class="inline-flex items-center gap-2 text-sm font-medium text-gm-green">
+              {{ problem.solutionLink.label }}
+              <span aria-hidden="true">→</span>
+            </NuxtLink>
+          </div>
+        </div>
+
+        <div data-stagger-item>
+          <p class="mb-5 text-sm text-[#999]">相关案例</p>
+          <div class="grid grid-cols-2 border-l border-t border-[#edf0ee] md:grid-cols-3">
+            <div
+              v-for="item in problem.cases"
+              :key="item"
+              class="flex min-h-[96px] items-center justify-center border-b border-r border-[#edf0ee] px-3 text-center text-xs leading-relaxed text-[#828282]"
+            >
+              {{ item }}
+            </div>
+          </div>
+
+          <p class="mb-5 mt-10 text-sm text-[#999]">相关洞察</p>
+          <ul class="space-y-3">
+            <li
+              v-for="(item, index) in problem.insights"
+              :key="item"
+              class="flex gap-2 text-sm leading-relaxed text-[#555]"
+            >
+              <span class="mt-2 size-1 shrink-0 rounded-full bg-gm-green" />
+              <span>
+                {{ item }}
+                <span
+                  v-if="index === 0"
+                  class="ml-2 rounded-full bg-gm-green px-2 py-0.5 text-[10px] text-white"
+                >
+                  HOT
+                </span>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>