feat：接口联调

pages/services.vue

@@ -37,6 +37,12 @@ const ringModels = [
   }
 ]
 
+const serviceVisualImages = [
+  '/images/services/brand-exposure-visual.png',
+  '/images/services/lead-conversion-visual.png',
+  '/images/services/omnichannel-visual.png'
+]
+
 const services = [
   {
     id: 'brand-exposure',
@@ -190,11 +196,11 @@ onBeforeUnmount(() => animationContext?.revert())
             <div class="hero-core">
               <small>GEO</small><strong>品效双环</strong><span>持续增长</span>
             </div>
-            <div class="hero-data hero-data-top"><small>品牌提及</small><strong>+217%</strong></div>
-            <div class="hero-data hero-data-bottom">
-              <small>转化效率</small><strong>+64%</strong>
-            </div>
-            <div class="hero-visual-caption"><span></span> AI 搜索增长系统正在运行</div>
+            <!--            <div class="hero-data hero-data-top"><small>品牌提及</small><strong>+217%</strong></div>-->
+            <!--            <div class="hero-data hero-data-bottom">-->
+            <!--              <small>转化效率</small><strong>+64%</strong>-->
+            <!--            </div>-->
+            <!--            <div class="hero-visual-caption"><span></span> AI 搜索增长系统正在运行</div>-->
           </div>
         </div>
       </section>
@@ -224,7 +230,7 @@ onBeforeUnmount(() => animationContext?.revert())
       <section class="model-deep-section">
         <div class="page-width">
           <header class="model-heading services-reveal">
-            <p class="section-kicker">双环增长模型</p>
+            <p class="section-kicker section-center">双环增长模型</p>
             <h2>一边沉淀品牌声量，一边推动精准获客</h2>
             <p>两个环路共享同一套业务事实、内容资产与数据目标，让品牌建设和转化结果互相增强。</p>
           </header>
@@ -279,7 +285,7 @@ onBeforeUnmount(() => animationContext?.revert())
         <div class="page-width">
           <header class="service-system-heading services-reveal">
             <div>
-              <p class="section-kicker">服务体系</p>
+              <p class="section-kicker section-center">服务体系</p>
               <h2>三类能力，服务同一个增长目标</h2>
             </div>
             <p>
@@ -337,7 +343,13 @@ onBeforeUnmount(() => animationContext?.revert())
                   <span>{{ service.visualTitle }}</span
                   ><small>YUNTU GEO SYSTEM</small>
                 </div>
-                <div class="visual-network">
+                <img
+                  v-if="serviceVisualImages[serviceIndex]"
+                  class="visual-network-image"
+                  :src="serviceVisualImages[serviceIndex]"
+                  :alt="`${service.title}示意图`"
+                />
+                <div v-else class="visual-network">
                   <div class="network-core">
                     <small>{{ service.index }}</small
                     ><strong>{{ service.title.split('，')[0] }}</strong>
@@ -350,7 +362,10 @@ onBeforeUnmount(() => animationContext?.revert())
                   >
                   <i v-for="line in 4" :key="line" :class="`network-line line-${line}`"></i>
                 </div>
-                <div class="visual-metric">
+                <div
+                  v-if="serviceIndex === 0 || !serviceVisualImages[serviceIndex]"
+                  class="visual-metric"
+                >
                   <strong>{{ service.metric }}</strong
                   ><span>{{ service.metricLabel }}</span>
                 </div>
@@ -364,7 +379,7 @@ onBeforeUnmount(() => animationContext?.revert())
         <div class="process-background" aria-hidden="true"></div>
         <div class="page-width">
           <header class="process-heading services-reveal">
-            <p class="section-kicker">标准化交付</p>
+            <p class="section-kicker section-center">标准化交付</p>
             <h2>五步推进，每一步都有依据</h2>
             <p>从第一次沟通到内容资产交付，节点透明、数据可查、方向可调整。</p>
           </header>
@@ -424,7 +439,7 @@ onBeforeUnmount(() => animationContext?.revert())
           <article class="featured-proof">
             <div class="proof-tag">教育培训行业 · GEO 全链路案例</div>
             <h2>420 个真实问题，5 个月进入 AI 推荐列表</h2>
-            <p>
+            <p class="add-white">
               围绕家长“找方法、选机构、比课程、看口碑、做决策”的完整路径，搭建问题库、可信内容与持续监测体系。
             </p>
             <div class="proof-data">
@@ -460,7 +475,7 @@ onBeforeUnmount(() => animationContext?.revert())
       <section class="services-cta">
         <div class="cta-wave" aria-hidden="true"></div>
         <div class="page-width services-cta-content services-reveal">
-          <p>从一次真实诊断开始</p>
+          <p class="section-center">从一次真实诊断开始</p>
           <h2>你的品牌，应该先解决曝光问题，<br />还是转化问题？</h2>
           <span>聊聊行业、现状和目标，我们会给出第一步建议。</span>
           <button
@@ -520,6 +535,10 @@ onBeforeUnmount(() => animationContext?.revert())
   font-weight: 700;
   letter-spacing: 0.14em;
 }
+.section-center {
+  justify-content: center;
+  margin: 0 auto !important;
+}
 .services-hero {
   position: relative;
   min-height: 650px;
@@ -666,10 +685,10 @@ onBeforeUnmount(() => animationContext?.revert())
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.9);
+  border: 0;
   border-radius: 50%;
   color: #fff;
-  background: linear-gradient(145deg, rgba(35, 126, 241, 0.94), rgba(43, 180, 231, 0.84));
+  background: linear-gradient(145deg, #176fd8, #1ca9de);
   box-shadow:
     0 22px 45px rgba(33, 116, 224, 0.28),
     inset 0 1px 5px rgba(255, 255, 255, 0.7);
@@ -695,7 +714,7 @@ onBeforeUnmount(() => animationContext?.revert())
   z-index: 3;
   top: 50%;
   left: 50%;
-  border: 1px solid rgba(50, 133, 234, 0.3);
+  border: 0;
   border-radius: 50%;
   transform: translate(-50%, -50%);
 }
@@ -706,14 +725,13 @@ onBeforeUnmount(() => animationContext?.revert())
 .hero-orbit-two {
   width: 490px;
   height: 490px;
-  border-style: dashed;
   opacity: 0.72;
 }
 .hero-orbit i {
   position: absolute;
   width: 13px;
   height: 13px;
-  border: 3px solid #fff;
+  border: 0;
   border-radius: 50%;
   background: #2383f4;
   box-shadow: 0 5px 15px rgba(32, 125, 237, 0.35);
@@ -896,11 +914,20 @@ onBeforeUnmount(() => animationContext?.revert())
   position: absolute;
   width: 345px;
   aspect-ratio: 1;
+  overflow: hidden;
+  border: 0;
+  outline: 0;
+  box-shadow: none;
 }
 .model-ring img {
   display: block;
-  width: 100%;
+  width: calc(100% + 4px);
+  max-width: none;
+  margin: -2px;
+  border: 0;
+  outline: 0;
   filter: drop-shadow(0 25px 32px rgba(58, 123, 205, 0.12));
+  box-shadow: none;
 }
 .ring-1 {
   top: 10px;
@@ -916,16 +943,23 @@ onBeforeUnmount(() => animationContext?.revert())
   left: 50%;
   display: grid;
   justify-items: center;
+  min-width: 106px;
+  padding: 10px 14px 11px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 10px 24px rgba(42, 100, 180, 0.14);
   transform: translate(-50%, -50%);
+  backdrop-filter: blur(10px);
 }
 .ring-copy small {
-  color: #87a4c6;
+  color: #6e8eb4;
   font-size: 11px;
 }
 .ring-copy strong {
   margin-top: 5px;
-  color: #2d76d8;
+  color: #135fbd;
   font-size: 17px;
+  font-weight: 800;
 }
 .ring-connector {
   position: absolute;
@@ -1040,6 +1074,7 @@ onBeforeUnmount(() => animationContext?.revert())
   letter-spacing: 0.12em;
 }
 .service-index span {
+  font-size: 18px;
   margin-left: 12px;
   color: #2c80ed;
 }
@@ -1095,9 +1130,9 @@ onBeforeUnmount(() => animationContext?.revert())
 .service-details li {
   position: relative;
   padding-left: 14px;
-  color: var(--service-copy);
-  font-size: 14px;
-  line-height: 1.65;
+  color: var(--service-copy) !important;
+  font-size: 14px !important;
+  line-height: 1.65 !important;
 }
 .service-details li::before {
   position: absolute;
@@ -1110,20 +1145,30 @@ onBeforeUnmount(() => animationContext?.revert())
   background: #4b97ef;
 }
 .service-action {
+  min-height: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
   margin-top: 27px;
-  padding: 0 0 5px;
-  border-bottom: 1px solid #8eb8e9;
-  color: #257ce8;
-  background: transparent;
+  padding: 0 24px !important;
+  border: 0;
+  border-radius: 999px;
+  color: #fff;
+  background: linear-gradient(100deg, #3158ff, #12aef5);
+  box-shadow: 0 12px 24px rgba(25, 106, 255, 0.2);
   font-size: 14px;
   font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
 }
-.service-action b {
-  margin-left: 8px;
-  transition: margin 0.2s;
+.service-action :deep(.app-icon) {
+  flex: 0 0 auto;
+  font-size: 1.05em;
+  transition: transform 0.2s;
 }
-.service-action:hover b {
-  margin-left: 13px;
+.service-action:hover :deep(.app-icon) {
+  transform: translateX(3px);
 }
 .service-story-visual {
   position: relative;
@@ -1149,6 +1194,8 @@ onBeforeUnmount(() => animationContext?.revert())
     linear-gradient(145deg, #f4f8ff, #dcecff);
 }
 .visual-topline {
+  position: relative;
+  z-index: 2;
   display: flex;
   justify-content: space-between;
   padding: 24px 27px;
@@ -1168,6 +1215,19 @@ onBeforeUnmount(() => animationContext?.revert())
   height: 340px;
   transform: translate(-50%, -50%);
 }
+.visual-network-image {
+  position: absolute;
+  z-index: 1;
+  top: 54%;
+  left: 50%;
+  width: min(620px, 108%);
+  height: min(500px, 90%);
+  max-width: none;
+  object-fit: contain;
+  pointer-events: none;
+  filter: drop-shadow(0 22px 34px rgba(46, 121, 220, 0.16));
+  transform: translate(-50%, -48%);
+}
 .network-core {
   position: absolute;
   z-index: 3;
@@ -1252,6 +1312,7 @@ onBeforeUnmount(() => animationContext?.revert())
 }
 .visual-metric {
   position: absolute;
+  z-index: 2;
   right: 24px;
   bottom: 22px;
   display: grid;
@@ -1444,6 +1505,9 @@ onBeforeUnmount(() => animationContext?.revert())
   letter-spacing: 0.12em;
   opacity: 0.72;
 }
+.add-white {
+  color: white !important;
+}
 .featured-proof h2 {
   max-width: 720px;
   margin: 26px 0 0;
@@ -1815,6 +1879,11 @@ onBeforeUnmount(() => animationContext?.revert())
     width: 310px;
     height: 280px;
   }
+  .visual-network-image {
+    top: 52%;
+    width: min(500px, 118%);
+    height: 360px;
+  }
   .network-core {
     width: 108px;
     height: 108px;