复制实践

src/components/layout/AppHeader.vue

@@ -5,11 +5,25 @@ import { Icon } from "@iconify/vue";
 
 const route = useRoute();
 const mobileOpen = ref(false);
+const activeDropdown = ref(null);
+const dropdownTimer = ref(null);
+
+const dropdowns = {
+  cases: [
+    { label: "设备管理", to: "/cases/1" },
+    { label: "QHSE", to: "/cases/2" },
+    { label: "智能注气", to: "/cases/3" },
+  ],
+};
 
 const navItems = [
   { label: "产品", to: "/products" },
   { label: "解决方案", to: "/solutions" },
-  { label: "客户案例", to: "/cases" },
+  {
+    label: "客户案例",
+    to: "/cases",
+    dropdown: dropdowns.cases,
+  },
   { label: "新闻动态", to: "/news" },
 ];
 
@@ -17,9 +31,31 @@ watch(
   () => route.fullPath,
   () => {
     mobileOpen.value = false;
+    activeDropdown.value = null;
+    if (dropdownTimer.value) {
+      clearTimeout(dropdownTimer.value);
+    }
   },
 );
 
+const handleMouseEnter = (item) => {
+  if (item.dropdown) {
+    if (dropdownTimer.value) {
+      clearTimeout(dropdownTimer.value);
+      dropdownTimer.value = null;
+    }
+    activeDropdown.value = item.label;
+  }
+};
+
+const handleMouseLeave = (item) => {
+  if (item.dropdown) {
+    dropdownTimer.value = setTimeout(() => {
+      activeDropdown.value = null;
+    }, 200);
+  }
+};
+
 const mobileLabel = computed(() =>
   mobileOpen.value ? "关闭菜单" : "打开菜单",
 );
@@ -38,14 +74,40 @@ const mobileLabel = computed(() =>
         </RouterLink>
 
         <nav class="nav" aria-label="主导航">
-          <RouterLink
+          <div
             v-for="item in navItems"
             :key="item.to"
-            class="nav__link"
-            :to="item.to"
+            class="nav__item"
+            @mouseenter="handleMouseEnter(item)"
+            @mouseleave="handleMouseLeave(item)"
           >
-            {{ item.label }}
-          </RouterLink>
+            <RouterLink class="nav__link" :to="item.to">
+              {{ item.label }}
+              <!-- <Icon
+                v-if="item.dropdown"
+                icon="lucide:chevron-down"
+                width="16"
+                height="16"
+              /> -->
+            </RouterLink>
+
+            <div
+              v-if="item.dropdown"
+              v-show="activeDropdown === item.label"
+              class="nav__dropdown-menu"
+              @mouseenter="handleMouseEnter(item)"
+              @mouseleave="handleMouseLeave(item)"
+            >
+              <RouterLink
+                v-for="subItem in item.dropdown"
+                :key="subItem.to"
+                class="nav__dropdown-item"
+                :to="subItem.to"
+              >
+                {{ subItem.label }}
+              </RouterLink>
+            </div>
+          </div>
         </nav>
       </div>
 
@@ -83,6 +145,94 @@ const mobileLabel = computed(() =>
 </template>
 
 <style scoped>
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.nav__item {
+  position: relative;
+}
+
+.nav__link {
+  padding: 10px 12px;
+  color: var(--slate-700);
+  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.nav__link:hover {
+  color: #1d4ed8;
+}
+
+.nav__link.router-link-exact-active {
+  color: var(--brand-700);
+}
+
+.nav__dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 140px;
+  background: #fff;
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
+  padding: 8px 10px;
+  margin-top: 4px;
+  z-index: 100;
+  animation: slideDown 0.2s ease-out;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.nav__dropdown-item {
+  display: block;
+  padding: 10px 20px;
+  width: 90%;
+  height: 50px;
+  color: var(--slate-700);
+  font-size: 15px;
+  transition: all 0.15s ease;
+  text-align: center;
+}
+
+.nav__dropdown-item:hover {
+  border-bottom: 4px solid #0052d9;
+  font-weight: bold;
+}
+
+.nav__dropdown-item.router-link-exact-active {
+  background: rgba(37, 99, 235, 0.12);
+  color: var(--brand-700);
+  font-weight: 600;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .app-header {
   position: fixed;
   z-index: 50;

src/router/index.js

@@ -54,6 +54,22 @@ const router = createRouter({
       component: () => import('../views/news/new4.vue'),
       meta: { title: '新闻动态' },
     },
+
+    {
+      path: '/cases/1',
+      component: () => import('../views/cases/case1.vue'),
+      meta: { title: '客户案例' },
+    },
+      {
+      path: '/cases/2',
+      component: () => import('../views/cases/case2.vue'),
+      meta: { title: '客户案例' },
+    },
+     {
+      path: '/cases/3',
+      component: () => import('../views/cases/case3.vue'),
+      meta: { title: '客户案例' },
+    },
     {
       path: '/about',
       name: 'about',

src/views/CasesView.vue

@@ -22,8 +22,7 @@ const categories = [
   {
     key: "equipment",
     title: "设备管理",
-    lead:
-      "覆盖台账、巡检、维保、预测性维护到告警处置的全生命周期闭环，让设备运行更稳定、维护更可控。",
+    lead: "覆盖台账、巡检、维保、预测性维护到告警处置的全生命周期闭环，让设备运行更稳定、维护更可控。",
     icon: "lucide:cpu",
     accent: "rgba(37, 99, 235, 0.9)",
     cover: bannerUrl,
@@ -34,55 +33,12 @@ const categories = [
         tags: ["台账治理", "主数据", "标准化"],
         metrics: ["资产一致率 ≥99%", "新增设备上线 T+1", "编码规则统一"],
       },
-      {
-        title: "巡检计划与移动端执行闭环",
-        desc: "计划自动排程、移动端签到拍照、异常一键上报，形成巡检闭环追踪。",
-        tags: ["巡检", "移动端", "闭环"],
-        metrics: ["漏检率≈0", "巡检效率 +30%", "异常处置可追溯"],
-      },
-      {
-        title: "智能维保与工单联动",
-        desc: "维保策略与备件、人员、工时联动，工单流转可视化，降低运维成本。",
-        tags: ["维保", "工单", "备件"],
-        metrics: ["工单闭环率 ≥98%", "平均修复时长 -20%", "备件周转 +15%"],
-      },
-      {
-        title: "预测性维护与健康度评估",
-        desc: "多源数据融合评估健康度，提前预警故障风险，避免非计划停机。",
-        tags: ["预测性维护", "健康度", "预警"],
-        metrics: ["停机 -20%", "维修成本 -12%", "告警准确率 +15%"],
-      },
-      {
-        title: "设备接入与状态监测（SCADA/IoT）",
-        desc: "统一采集与边缘接入，实时监测关键参数，支撑告警与趋势分析。",
-        tags: ["接入", "监测", "边缘"],
-        metrics: ["采集点位 6,000+", "秒级刷新", "告警规则可配置"],
-      },
-      {
-        title: "异常告警与处置SOP",
-        desc: "告警分级、自动派单与SOP引导，确保异常快速定位与闭环处置。",
-        tags: ["告警", "SOP", "处置"],
-        metrics: ["响应时长 -35%", "误报率下降", "处置闭环可审计"],
-      },
-      {
-        title: "润滑与点检管理",
-        desc: "点检路线、标准作业与耗材管理协同，减少人为遗漏与重复劳动。",
-        tags: ["点检", "润滑", "耗材"],
-        metrics: ["点检准时率 ≥99%", "重复工时 -18%", "耗材可追溯"],
-      },
-      {
-        title: "关键设备KPI看板与对标",
-        desc: "以停机、故障率、MTBF/MTTR为核心指标，对标分析并推动持续改进。",
-        tags: ["KPI", "看板", "对标"],
-        metrics: ["指标口径统一", "月度复盘固化", "改进项可跟踪"],
-      },
     ],
   },
   {
     key: "qhse",
     title: "QHSE",
-    lead:
-      "将质量、健康、安全、环境融入业务流程：从风险识别到整改闭环，让合规与效率同时提升。",
+    lead: "将质量、健康、安全、环境融入业务流程：从风险识别到整改闭环，让合规与效率同时提升。",
     icon: "lucide:shield-check",
     accent: "rgba(14, 116, 144, 0.92)",
     cover: bgUrl,
@@ -93,55 +49,12 @@ const categories = [
         tags: ["隐患", "整改", "闭环"],
         metrics: ["闭环率 ≥98%", "复发率下降", "审计留痕完整"],
       },
-      {
-        title: "作业票与高风险作业管控",
-        desc: "动火、受限空间等高风险作业票线上化，联动审批、交底与现场验证。",
-        tags: ["作业票", "审批", "现场验证"],
-        metrics: ["审批时长 -40%", "票证合规率提升", "现场校验可追溯"],
-      },
-      {
-        title: "风险分级管控与双重预防",
-        desc: "风险辨识、分级与管控措施落地，叠加隐患治理形成双重预防机制。",
-        tags: ["风险分级", "双重预防", "措施"],
-        metrics: ["风险台账统一", "措施执行可核查", "复核机制固化"],
-      },
-      {
-        title: "应急预案与演练管理",
-        desc: "预案库、演练计划、过程记录与复盘改进，提升应急协同与响应效率。",
-        tags: ["应急", "演练", "复盘"],
-        metrics: ["演练覆盖率提升", "响应流程标准化", "复盘问题闭环"],
-      },
-      {
-        title: "质量追溯与异常闭环",
-        desc: "打通过程数据与质量规则，异常自动触发处置流程，提升产品/工程质量。",
-        tags: ["质量", "追溯", "异常"],
-        metrics: ["不良率下降", "追溯时间 -80%", "异常闭环 T+1"],
-      },
-      {
-        title: "环保监测与排放合规",
-        desc: "在线监测、阈值预警与报表归档，支撑排放合规与监管报送。",
-        tags: ["环保", "监测", "合规"],
-        metrics: ["预警及时", "报表自动生成", "监管口径一致"],
-      },
-      {
-        title: "承包商HSE准入与评价",
-        desc: "资质准入、培训考试、现场评价与黑白名单管理，降低外协风险。",
-        tags: ["承包商", "准入", "评价"],
-        metrics: ["准入效率提升", "违规率下降", "评价结果可追溯"],
-      },
-      {
-        title: "培训考试与证书到期提醒",
-        desc: "培训计划、在线考试、证书管理与到期提醒，保障人员资质合规。",
-        tags: ["培训", "考试", "证书"],
-        metrics: ["到期漏管≈0", "培训覆盖率提升", "记录可审计"],
-      },
     ],
   },
   {
     key: "injection",
     title: "智能注气",
-    lead:
-      "围绕注气作业计划、过程监控与效果评估，联动工艺参数与产量数据，实现可控、可追溯、可优化。",
+    lead: "围绕注气作业计划、过程监控与效果评估，联动工艺参数与产量数据，实现可控、可追溯、可优化。",
     icon: "lucide:wind",
     accent: "rgba(2, 132, 199, 0.92)",
     cover: bannerUrl,
@@ -152,48 +65,6 @@ const categories = [
         tags: ["计划", "下发", "协同"],
         metrics: ["计划变更可追溯", "下发效率提升", "执行偏差可视化"],
       },
-      {
-        title: "注气过程监控与异常预警",
-        desc: "实时监控压力、流量、温度等关键参数，异常自动预警并联动处置。",
-        tags: ["监控", "预警", "处置"],
-        metrics: ["秒级监控", "异常定位更快", "告警规则可配置"],
-      },
-      {
-        title: "注气工艺参数优化建议",
-        desc: "基于历史数据与工况特征，给出参数窗口建议，提升作业稳定性。",
-        tags: ["优化", "参数窗口", "建议"],
-        metrics: ["波动降低", "能耗可控", "经验可沉淀"],
-      },
-      {
-        title: "注气效果评估与对比分析",
-        desc: "联动产量、压力与含水等指标，对比评估不同策略效果，支撑决策。",
-        tags: ["评估", "对比", "决策"],
-        metrics: ["评估口径统一", "策略对比直观", "月度复盘固化"],
-      },
-      {
-        title: "井站联动与作业记录归档",
-        desc: "井-站-管网联动视图，作业记录自动归档，满足追溯与审计需求。",
-        tags: ["联动", "归档", "追溯"],
-        metrics: ["记录完整", "审计便捷", "事件链条清晰"],
-      },
-      {
-        title: "设备运行状态与注气策略联动",
-        desc: "联动压缩机/阀组状态，自动约束策略边界，降低设备风险与误操作。",
-        tags: ["联动", "约束", "安全"],
-        metrics: ["误操作降低", "风险边界清晰", "联动规则可配置"],
-      },
-      {
-        title: "能耗与成本核算（注气侧）",
-        desc: "按作业、井、班组维度核算能耗与成本，为优化与考核提供依据。",
-        tags: ["能耗", "成本", "核算"],
-        metrics: ["核算自动化", "成本结构清晰", "对标可用"],
-      },
-      {
-        title: "注气数据治理与口径统一",
-        desc: "统一注气数据口径、指标体系与采集规范，支撑长期运营与模型迭代。",
-        tags: ["数据治理", "指标体系", "规范"],
-        metrics: ["口径统一", "数据可用性提升", "资产沉淀"],
-      },
     ],
   },
 ];
@@ -273,7 +144,10 @@ onBeforeUnmount(() => {
       subtitle="每个分类沉淀了多项可复用的落地案例与最佳实践，覆盖从方案设计到运营闭环的关键环节。"
     >
       <template #actions>
-        <RouterLink class="btn btn-primary" style="border-radius: 0" to="/contact"
+        <RouterLink
+          class="btn btn-primary"
+          style="border-radius: 0"
+          to="/contact"
           >留言咨询</RouterLink
         >
       </template>
@@ -314,7 +188,10 @@ onBeforeUnmount(() => {
               </div>
               <p class="muted caseLead">{{ cat.lead }}</p>
               <div class="caseHeadActions">
-                <RouterLink class="btn btn-ghost" style="border-radius: 0" to="/contact"
+                <RouterLink
+                  class="btn btn-ghost"
+                  style="border-radius: 0"
+                  to="/contact"
                   >对接同类项目</RouterLink
                 >
               </div>
@@ -336,10 +213,14 @@ onBeforeUnmount(() => {
 
                 <div class="caseMeta">
                   <div class="caseTags" aria-label="标签">
-                    <span v-for="t in c.tags" :key="t" class="tag">{{ t }}</span>
+                    <span v-for="t in c.tags" :key="t" class="tag">{{
+                      t
+                    }}</span>
                   </div>
                   <div class="caseMetrics" aria-label="指标">
-                    <span v-for="m in c.metrics" :key="m" class="metric">{{ m }}</span>
+                    <span v-for="m in c.metrics" :key="m" class="metric">{{
+                      m
+                    }}</span>
                   </div>
                 </div>
               </Reveal>
@@ -352,7 +233,11 @@ onBeforeUnmount(() => {
                 class="btn btn-link moreBtn"
                 @click="toggleExpand(cat.key)"
               >
-                {{ expanded[cat.key] ? "收起" : `展开更多（${cat.cases.length - maxPreview}）` }}
+                {{
+                  expanded[cat.key]
+                    ? "收起"
+                    : `展开更多（${cat.cases.length - maxPreview}）`
+                }}
               </button>
             </div>
           </section>

src/views/HomeView.vue

@@ -15,6 +15,10 @@ import indexBack2Url from "../assets/images/index_back2.png?url";
 import jiaohuIconUrl from "../assets/images/jiaohu.png?url";
 import planIconUrl from "../assets/images/方案.png?url";
 import caseIconUrl from "../assets/images/案例.png?url";
+import p1 from "../assets/images/p1.png?url";
+import p2 from "../assets/images/p2.png?url";
+// import p4 from "../assets/images/p4.png?url";
+import p3 from "../assets/images/p3.png?url";
 import CountUp from "../components/motion/CountUp.vue";
 import Reveal from "../components/motion/Reveal.vue";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
@@ -23,13 +27,6 @@ import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-const highlights = [
-  { label: "接入井站", end: 200, suffix: "+" },
-  { label: "生产指标", end: 500, suffix: "+" },
-  { label: "服务单位", end: 300, suffix: "+" },
-  { label: "区域覆盖", end: 20, suffix: "+" },
-];
-
 const slides = [
   {
     bg: banner1Url,
@@ -181,33 +178,63 @@ const products = [
     title: "油田数智底座（PaaS）",
     desc: "面向油田场景的数字底座：模型、流程、权限、消息与开放接口。",
     tags: ["组件化", "开放 API", "多租户"],
+    cover: p1,
   },
   {
     title: "井站物联与边缘网关",
     desc: "统一接入、监控、告警与远程运维，沉淀井站资产与运行状态。",
     tags: ["协议适配", "边缘采集", "运行监控"],
+    cover: banner2Url,
   },
   {
     title: "数据资产与指标中心",
     desc: "从采集到治理再到分析：资产目录、血缘、质量与指标口径管理。",
     tags: ["主数据", "质量校验", "指标中心"],
+    cover: p2,
   },
   {
     title: "智能分析与预测维护",
     desc: "结合油田机理与算法能力，落地工况识别、故障预警与能效优化。",
     tags: ["工况识别", "预测维护", "能效优化"],
+    cover: p3,
   },
 ];
 
 const solutions = [
-  { title: "设备管理", desc: "井场数据汇聚、施工过程可视化与风险预警。" },
-  { title: "智能钻修井", desc: "生产运行监控、工况分析与产量波动诊断。" },
-  { title: "智慧注气", desc: "站库管网联动监测、泄漏/压降异常识别。" },
-  { title: "智慧压裂", desc: "注采平衡分析、配注优化与效益评估。" },
-  { title: "停办管网", desc: "能耗在线核算、节能评估与合规披露闭环。" },
-  { title: "场站管理", desc: "告警闭环、工单联动与知识沉淀，提升设备可靠性。" },
+  {
+    title: "设备管理",
+    desc: "井场数据汇聚、施工过程可视化与风险预警。",
+    cover: banner1Url,
+  },
+  {
+    title: "智能钻修井",
+    desc: "生产运行监控、工况分析与产量波动诊断。",
+    cover: banner2Url,
+  },
+  {
+    title: "智慧注气",
+    desc: "站库管网联动监测、泄漏/压降异常识别。",
+    cover: banner3Url,
+  },
+  {
+    title: "智慧压裂",
+    desc: "注采平衡分析、配注优化与效益评估。",
+    cover: afterSalesUrl,
+  },
+  {
+    title: "停办管网",
+    desc: "能耗在线核算、节能评估与合规披露闭环。",
+    cover: news1,
+  },
+  {
+    title: "场站管理",
+    desc: "告警闭环、工单联动与知识沉淀，提升设备可靠性。",
+    cover: news3,
+  },
 ];
 
+const solutionsTabIndex = ref(0);
+
 const cases = [
   {
     title: "采油厂",
@@ -389,11 +416,11 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
       <div class="container">
         <Reveal as="div" class="sectionHead" :delay="0">
           <div style="display: flex; align-items: center">
-            <img src="../assets/images/title1.png" alt="" />
-            <h2 class="h2" style="padding: 0 30px; color: #696969">
+            <!-- <img src="../assets/images/title1.png" alt="" /> -->
+            <h2 class="h2" style="padding: 0 30px">
               数据驱动、形成油气价值闭环
             </h2>
-            <img src="../assets/images/title2.png" alt="" />
+            <!-- <img src="../assets/images/title2.png" alt="" /> -->
           </div>
         </Reveal>
 
@@ -431,16 +458,14 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
       </div>
     </section>
 
-    <section class="section">
+    <section class="section section--soft">
       <div class="container">
         <Reveal as="div" class="sectionHead" :delay="0">
           <div>
             <div style="display: flex; align-items: center">
-              <img src="../assets/images/title1.png" alt="" />
-              <h2 class="h2" style="padding: 0 30px; color: #696969">
-                覆盖油气生产全链路
-              </h2>
-              <img src="../assets/images/title2.png" alt="" />
+              <!-- <img src="../assets/images/title1.png" alt="" /> -->
+              <h2 class="h2" style="padding: 0 30px">覆盖油气生产全链路</h2>
+              <!-- <img src="../assets/images/title2.png" alt="" /> -->
             </div>
             <div class="muted" style="text-align: center; padding-top: 20px">
               从井场到站控，从数据到应用，按需组合，快速交付。
@@ -456,54 +481,107 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
             class="card card-pad productCard hover-lift"
             :delay="80 + idx * 70"
           >
-            <div class="productTitle">{{ p.title }}</div>
-            <div class="muted productDesc">{{ p.desc }}</div>
-            <div class="productTags">
-              <span v-for="t in p.tags" :key="t" class="pill">{{ t }}</span>
+            <div class="productImageWrapper">
+              <img :src="p.cover" :alt="p.title" class="productImage" />
+            </div>
+            <div class="productContent">
+              <div class="productTitle">{{ p.title }}</div>
+              <div class="muted productDesc">{{ p.desc }}</div>
+              <div class="productTags">
+                <span v-for="t in p.tags" :key="t" class="pill">{{ t }}</span>
+              </div>
             </div>
           </Reveal>
         </div>
       </div>
     </section>
 
-    <section
-      class="section section--soft solutionsBg"
-      :style="{ backgroundImage: `url(${solutionsBgUrl})` }"
-    >
-      <div class="container">
+    <section class="section" style="padding-left: 0; padding-right: 0">
+      <div>
         <Reveal as="div" class="sectionHead" :delay="0">
           <div style="display: flex; align-items: center">
-            <img src="../assets/images/title1.png" alt="" />
-            <h2 class="h2" style="padding: 0 30px; color: #696969">
-              面向场景的可复制实践
-            </h2>
-            <img src="../assets/images/title2.png" alt="" />
+            <!-- <img src="../assets/images/title1.png" alt="" /> -->
+            <h2 class="h2" style="padding: 0 30px">面向场景的可复制实践</h2>
+            <!-- <img src="../assets/images/title2.png" alt="" /> -->
           </div>
         </Reveal>
 
-        <div class="grid grid-3">
-          <Reveal
-            v-for="(s, idx) in solutions"
-            :key="s.title"
-            as="div"
-            class="hoverWrap"
-            :delay="80 + idx * 60"
-          >
-            <RouterLink
-              class="card card-pad solutionCard hover-lift"
-              to="/solutions"
+        <div class="solutionsTabContainer">
+          <div class="solutionsTabs">
+            <button
+              v-for="(s, idx) in solutions"
+              :key="s.title"
+              class="solutionsTabBtn"
+              :class="{ active: solutionsTabIndex === idx }"
+              @click="solutionsTabIndex = idx"
             >
-              <div class="solutionTitle">{{ s.title }}</div>
-              <div class="muted">{{ s.desc }}</div>
-              <div class="solutionMore">了解更多 →</div>
-            </RouterLink>
-          </Reveal>
-        </div>
-        <div style="display: flex; justify-content: center; padding-top: 30px">
-          <RouterLink class="btn btn-link" to="/news"
-            >查看全部方案
-            <Icon icon="lucide:chevron-right" width="24" height="24"
-          /></RouterLink>
+              <img
+                v-if="s.title === '设备管理'"
+                src="../assets//images/s1.png"
+                alt=""
+                style="width: 50px; height: 50px"
+              />
+              <img
+                v-if="s.title === '智能钻修井'"
+                src="../assets//images/s2.png"
+                alt=""
+                style="width: 50px; height: 50px"
+              />
+
+              <img
+                v-if="s.title === '智慧注气'"
+                src="../assets//images/s3.png"
+                alt=""
+                style="width: 50px; height: 50px"
+              />
+
+              <img
+                v-if="s.title === '智慧压裂'"
+                src="../assets//images/s4.png"
+                alt=""
+                style="width: 50px; height: 50px"
+              />
+
+              <img
+                v-if="s.title === '停办管网'"
+                src="../assets//images/s5.png"
+                alt=""
+                style="width: 50px; height: 50px"
+              />
+
+              <img
+                v-if="s.title === '场站管理'"
+                src="../assets//images/s6.png"
+                alt=""
+                style="width: 50px; height: 50px"
+              />
+              {{ s.title }}
+            </button>
+          </div>
+
+          <div class="solutionsTabContent">
+            <Transition name="slide-up" mode="out-in">
+              <div :key="solutionsTabIndex" class="solutionsTabInner">
+                <div class="solutionsTabText">
+                  <div class="solutionsTabTitle">
+                    {{ solutions[solutionsTabIndex].title }}
+                  </div>
+                  <div class="solutionsTabDesc">
+                    {{ solutions[solutionsTabIndex].desc }}
+                  </div>
+                  <RouterLink class="solutionsTabLink" to="/solutions">
+                    了解更多 →
+                  </RouterLink>
+                </div>
+                <div class="solutionsTabImage">
+                  <img
+                    :src="solutions[solutionsTabIndex].cover"
+                    :alt="solutions[solutionsTabIndex].title"
+                  />
+                </div>
+              </div>
+            </Transition>
+          </div>
         </div>
       </div>
     </section>
@@ -512,11 +590,9 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
       <div class="container">
         <Reveal as="div" class="sectionHead" :delay="0">
           <div style="display: flex; align-items: center">
-            <img src="../assets/images/title1.png" alt="" />
-            <h2 class="h2" style="padding: 0 10px; color: #696969">
-              用可量化指标呈现业务价值
-            </h2>
-            <img src="../assets/images/title2.png" alt="" />
+            <!-- <img src="../assets/images/title1.png" alt="" /> -->
+            <h2 class="h2" style="padding: 0 10px">用可量化指标呈现业务价值</h2>
+            <!-- <img src="../assets/images/title2.png" alt="" /> -->
           </div>
         </Reveal>
 
@@ -748,6 +824,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
   position: relative;
   padding: 54px 0 28px;
   overflow: hidden;
+  height: 50vh;
 }
 
 .hero__bg {
@@ -1227,7 +1304,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 }
 
 .productTitle {
-  font-weight: 850;
+  /* font-weight: 850; */
   letter-spacing: -0.02em;
 }
 
@@ -1987,4 +2064,254 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
     height: 100px;
   }
 }
+
+.productCard {
+  overflow: hidden;
+  padding: 0;
+  border: none;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
+}
+
+.productImageWrapper {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+}
+
+.productImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+.productCard:hover .productImage {
+  transform: scale(1.1);
+}
+
+.productContent {
+  padding: 20px;
+  background: #ffffff;
+  transition: background-color 0.3s ease;
+}
+
+.productCard:hover .productContent {
+  background-color: #024198;
+}
+
+.productCard:hover .productTitle,
+.productCard:hover .productDesc,
+.productCard:hover .pill {
+  color: #ffffff;
+}
+
+.productTitle {
+  letter-spacing: -0.02em;
+  font-size: 18px;
+  line-height: 1.4;
+  transition: color 0.3s ease;
+}
+
+.productDesc {
+  margin-top: 8px;
+  font-size: 14px;
+  line-height: 1.6;
+  transition: color 0.3s ease;
+}
+
+.productTags {
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.pill {
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--brand-700);
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.productCard:hover .pill {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+.solutionsTabContainer {
+  margin-top: 10px;
+
+  padding: 30px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.solutionsTabs {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 12px;
+
+  padding-bottom: 0;
+}
+
+.solutionsTabBtn {
+  padding: 12px 24px;
+  background: transparent;
+  border: none;
+  border-bottom: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--slate-600);
+  cursor: pointer;
+  transition: all 0.25s ease;
+  position: relative;
+  margin-bottom: -2px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.solutionsTabBtn:hover {
+  color: var(--brand-700);
+}
+
+.solutionsTabBtn.active {
+  color: var(--brand-700);
+  /* border-bottom-color: var(--brand-700); */
+  background: rgba(37, 99, 235, 0.06);
+}
+
+.solutionsTabContent {
+  min-height: 420px;
+  margin-top: 2px;
+}
+
+.solutionsTabInner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  align-items: center;
+  background-color: #f7f7fa;
+}
+
+.solutionsTabText {
+  padding: 20px;
+  padding-left: 100px;
+}
+
+.solutionsTabTitle {
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: #014198;
+  line-height: 1.3;
+  margin-bottom: 16px;
+}
+
+.solutionsTabDesc {
+  font-size: 16px;
+  line-height: 1.8;
+  color: #666666;
+  margin-bottom: 24px;
+}
+
+.solutionsTabLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--brand-700);
+  font-size: 16px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: gap 0.2s ease;
+}
+
+.solutionsTabLink:hover {
+  gap: 12px;
+}
+
+.solutionsTabImage {
+  overflow: hidden;
+}
+
+.solutionsTabImage img {
+  width: 100%;
+  height: 420px;
+  object-fit: cover;
+  display: block;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+@media (max-width: 960px) {
+  .solutionsTabInner {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+
+  .solutionsTabTitle {
+    font-size: 26px;
+  }
+
+  .solutionsTabImage img {
+    height: 240px;
+  }
+
+  .solutionsTabs {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .solutionsTabBtn {
+    width: 100%;
+    text-align: left;
+    padding: 14px 20px;
+    border-bottom: 2px solid rgba(15, 23, 42, 0.08);
+    margin-bottom: 0;
+  }
+
+  .solutionsTabBtn.active {
+    border-bottom-color: var(--brand-700);
+    background: rgba(37, 99, 235, 0.08);
+  }
+}
+
+@media (max-width: 520px) {
+  .solutionsTabContainer {
+    padding: 20px;
+  }
+
+  .solutionsTabTitle {
+    font-size: 22px;
+  }
+
+  .solutionsTabDesc {
+    font-size: 14px;
+  }
+
+  .solutionsTabImage img {
+    height: 200px;
+  }
+}
 </style>

src/views/SolutionsView.vue

@@ -506,9 +506,9 @@ onBeforeUnmount(() => {
   width: 18px;
   height: 18px;
   border-radius: 999px;
-  background: linear-gradient(180deg, #22c55e, #16a34a);
+  background: linear-gradient(180deg, #0766cd, #0d4a9e);
   box-shadow:
-    0 10px 22px rgba(34, 197, 94, 0.25),
+    0 10px 22px rgba(10, 71, 156, 0.25),
     inset 0 0 0 2px rgba(255, 255, 255, 0.85);
   margin-top: 4px;
 }

src/views/cases/case1.vue

@@ -0,0 +1,485 @@
+<template>
+  <div>
+    <PageHero
+      kicker=""
+      title="设备管理"
+      subtitle="围绕设备全生命周期，实现台账、巡检维保、预测维护与实时监控预警的闭环管理。"
+    >
+      <template #actions>
+        <RouterLink
+          class="btn btn-primary"
+          style="border-radius: 0"
+          to="/contact"
+          >获取产品资料</RouterLink
+        >
+      </template>
+    </PageHero>
+
+    <main class="case-content">
+      <div class="caseLayout">
+        <aside class="timelineCol" aria-label="项目实施时间线">
+          <div class="timeline">
+            <div class="timelineTrack" aria-hidden="true">
+              <div class="timelineRail"></div>
+              <div
+                class="timelineFill"
+                :style="{ transform: `scaleY(${progress})` }"
+              ></div>
+            </div>
+
+            <ol class="timelineSteps" role="list">
+              <li
+                v-for="(s, idx) in steps"
+                :key="s.key"
+                class="timelineStep"
+                :data-state="stepState(idx)"
+              >
+                <button
+                  type="button"
+                  class="timelineBtn"
+                  :aria-current="activeIndex === idx ? 'step' : 'false'"
+                  @click="scrollToStep(s.key)"
+                >
+                  <span class="dot" aria-hidden="true"></span>
+                  <span class="stepText">
+                    <span class="stepTitle">{{ s.title }}</span>
+                    <span class="stepSub muted">{{ s.sub }}</span>
+                  </span>
+                </button>
+              </li>
+            </ol>
+          </div>
+        </aside>
+
+        <div class="contentCol">
+          <!-- 项目背景 -->
+          <section
+            :ref="setStepEl('background')"
+            id="step-background"
+            class="case-section case-section--odd"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case1.png" alt="设备管理场景" />
+            </div>
+            <div class="case-section__content">
+              <h2>项目背景，破解设备管理痛点</h2>
+              <p>
+                XX油服公司原有设备管理模式粗放，存在台账混乱、维保数据分散、任务推进无序、库存与设备管理脱节、故障预警滞后等问题，严重影响设备运维效率与现场作业连续性，亟需一套高效、集成的设备管理解决方案。
+              </p>
+            </div>
+          </section>
+
+          <!-- 核心落地成果 -->
+          <section
+            :ref="setStepEl('delivery')"
+            id="step-delivery"
+            class="case-section case-section--even"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case2.png" alt="数字化管控系统" />
+            </div>
+
+            <div class="case-section__content">
+              <h2>核心落地成果，实现全流程数字化管控</h2>
+              <p>
+                依托我方工业互联网平台，为XX油服公司上线设备管理系统，实现设备线上台账标准化管理，维保数据统一归集、规范存档；通过定时推送维保、巡检任务，推动业务操作标准化、流程化，同时与库存管理深度集成，打通设备与库存数据壁垒。
+              </p>
+            </div>
+          </section>
+
+          <!-- 预测性维护赋能 -->
+          <section
+            :ref="setStepEl('predictive')"
+            id="step-predictive"
+            class="case-section case-section--odd"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case3.png" alt="预测性维护" />
+            </div>
+            <div class="case-section__content">
+              <h2>预测性维护赋能，提升设备运行可靠性</h2>
+              <p>
+                借助平台AI大模型与数采能力，系统实现设备预测性维护功能，实时监测设备运行数据，精准预判潜在故障，提前推送维护提醒，从被动抢修转为主动防控，有效降低设备故障发生率，大幅提升现场设备可用性与运行稳定性。
+              </p>
+            </div>
+          </section>
+
+          <!-- 量化成效 -->
+          <section
+            :ref="setStepEl('kpi')"
+            id="step-kpi"
+            class="case-section case-section--even"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case4.png" alt="量化成效展示" />
+            </div>
+
+            <div class="case-section__content">
+              <h2>量化成效，降本增效成果显著</h2>
+              <p>
+                项目上线后，XX油服公司设备管理效能全面提升，各项核心指标均达成预期目标，具体成效如下：设备管理效率提升40%，库存周转率提升35%，人均运维效能提升28%，设备故障发生率下降50%，设备可用性提升至98%，大幅降低人力与运维成本，实现管理提质增效。
+              </p>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import PageHero from "../../components/PageHero.vue";
+import { Icon } from "@iconify/vue";
+
+const steps = [
+  { key: "background", title: "项目背景", sub: "问题识别与痛点分析" },
+  { key: "delivery", title: "落地成果", sub: "系统上线与流程闭环" },
+  { key: "predictive", title: "预测性维护", sub: "AI预警与主动防控" },
+  { key: "kpi", title: "量化成效", sub: "指标提升与降本增效" },
+];
+
+const activeIndex = ref(0);
+const progress = ref(0);
+const stepEls = ref({});
+
+const setStepEl = (key) => (el) => {
+  if (!el) return;
+  stepEls.value = { ...stepEls.value, [key]: el };
+};
+
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+const headerOffset = () => {
+  if (typeof window === "undefined") return 72;
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue("--header-h")
+    .trim();
+  const n = Number.parseInt(raw, 10);
+  return Number.isFinite(n) ? n : 72;
+};
+
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+
+const orderedEls = computed(() =>
+  steps.map((s) => stepEls.value[s.key]).filter(Boolean),
+);
+
+const computeActiveIndex = (y) => {
+  let idx = 0;
+  for (let i = 0; i < steps.length; i++) {
+    const el = stepEls.value[steps[i].key];
+    if (!el) continue;
+    const top = el.getBoundingClientRect().top + window.scrollY;
+    if (y >= top) idx = i;
+  }
+  return idx;
+};
+
+const computeProgress = (y) => {
+  const els = orderedEls.value;
+  if (els.length < 2) return 0;
+
+  const first = els[0];
+  const last = els[els.length - 1];
+  const start = first.getBoundingClientRect().top + window.scrollY;
+  const end = last.getBoundingClientRect().bottom + window.scrollY;
+  const span = Math.max(1, end - start);
+  return clamp01((y - start) / span);
+};
+
+let raf = 0;
+const updateFromScroll = () => {
+  raf = 0;
+  if (typeof window === "undefined") return;
+  const y = window.scrollY + headerOffset() + 130;
+  activeIndex.value = computeActiveIndex(y);
+  progress.value = computeProgress(y);
+};
+
+const onScroll = () => {
+  if (raf) return;
+  raf = window.requestAnimationFrame(updateFromScroll);
+};
+
+const scrollToStep = (key) => {
+  const el = document.getElementById(`step-${key}`);
+  if (!el) return;
+  el.scrollIntoView({
+    behavior: prefersReducedMotion() ? "auto" : "smooth",
+    block: "start",
+  });
+};
+
+const stepState = (idx) =>
+  idx < activeIndex.value
+    ? "done"
+    : idx === activeIndex.value
+      ? "active"
+      : "todo";
+
+onMounted(() => {
+  updateFromScroll();
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onScroll, { passive: true });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", onScroll);
+  window.removeEventListener("resize", onScroll);
+  if (raf) window.cancelAnimationFrame(raf);
+});
+</script>
+
+<style scoped>
+.case-content {
+  max-width: 1300px;
+  margin: 0 auto;
+  padding: 60px 20px;
+}
+
+.caseLayout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 26px;
+  align-items: start;
+}
+
+.timelineCol {
+  position: relative;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.timeline {
+  position: sticky;
+  top: calc(var(--header-h) + 24px);
+  padding: 10px 10px 12px 0;
+  user-select: none;
+  max-height: calc(100vh - var(--header-h) - 48px);
+  overflow-y: auto;
+}
+
+.timelineTrack {
+  position: absolute;
+  left: 18px;
+  top: 10px;
+  bottom: 12px;
+  border-radius: 1px;
+  width: 2px;
+}
+
+.timelineRail {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.12);
+  border-radius: 999px;
+}
+
+.timelineFill {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #1d4ed8, #0ea5e9);
+  border-radius: 999px;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform 140ms linear;
+  will-change: transform;
+}
+
+.timelineSteps {
+  margin: 0;
+  padding: 0 0 0 2px;
+  list-style: none;
+  display: grid;
+  gap: 10px;
+}
+
+.timelineStep {
+  position: relative;
+}
+
+.timelineBtn {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 42px 1fr;
+  gap: 12px;
+  align-items: start;
+  text-align: left;
+  padding: 10px 12px 10px 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+}
+
+.timelineBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
+  border-radius: 12px;
+}
+
+.dot {
+  width: 15px;
+  height: 15px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.16);
+  background: rgba(255, 255, 255, 0.92);
+  display: grid;
+  place-items: center;
+  margin-left: 10px;
+  margin-top: 2px;
+  transition:
+    background-color 220ms ease,
+    border-color 220ms ease,
+    box-shadow 220ms ease;
+}
+.stepText {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.stepTitle {
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.stepSub {
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.timelineStep[data-state="active"] .dot {
+  transform: scale(1.12);
+  border-color: rgba(29, 78, 216, 0.38);
+  box-shadow:
+    0 0 0 6px rgba(37, 99, 235, 0.12),
+    0 10px 24px rgba(29, 78, 216, 0.18);
+  background: #1d4ed8;
+}
+
+.timelineStep[data-state="done"] .dot {
+  background: linear-gradient(180deg, #1d4ed8, #0ea5e9);
+  border-color: transparent;
+  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
+}
+
+.timelineStep[data-state="todo"] .stepTitle {
+  color: rgba(2, 6, 23, 0.72);
+}
+
+.case-section {
+  display: flex;
+  margin-bottom: 80px;
+  position: relative;
+  scroll-margin-top: calc(var(--header-h) + 120px);
+}
+
+.case-section--odd {
+  flex-direction: row;
+}
+
+.case-section--even {
+  flex-direction: row-reverse;
+}
+
+.case-section__image {
+  flex: 1;
+  min-width: 300px;
+
+  overflow: hidden;
+}
+
+.case-section__image img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.case-section__content {
+  flex: 1;
+  padding: 30px;
+  /* 
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1); */
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.case-section--even .case-section__content {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.case-section__content h2 {
+  /* color: var(--brand-700); */
+  font-size: 24px;
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+
+.case-section__content p {
+  color: var(--slate-700);
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+@media (max-width: 900px) {
+  .caseLayout {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .timelineCol {
+    display: none;
+  }
+
+  .case-section {
+    flex-direction: column;
+  }
+
+  .case-section__image {
+    order: 1;
+    margin-bottom: 20px;
+  }
+
+  .case-section__content {
+    order: 2;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 20px;
+  }
+
+  .case-section--even .case-section__content {
+    order: 2;
+  }
+}
+
+@media (max-width: 600px) {
+  .case-content {
+    padding: 40px 15px;
+  }
+
+  .case-section__content {
+    padding: 15px;
+  }
+}
+
+:deep(.pageHero) {
+  background-image: url("../../assets/images/bg5.jpg");
+
+  background-size: cover, cover;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  background-blend-mode: overlay;
+  color: #111;
+  border-bottom: none;
+  padding: 80px 0;
+}
+:deep(.pageHero__subtitle) {
+  color: #4f5055;
+}
+</style>

src/views/cases/case2.vue

@@ -0,0 +1,486 @@
+<template>
+  <div>
+    <PageHero
+      kicker=""
+      title="QHSE"
+      subtitle="以合规为底线，以数据为驱动，实现风险隐患闭环与作业全过程可控，助力管理升级。"
+    >
+      <template #actions>
+        <RouterLink
+          class="btn btn-primary"
+          style="border-radius: 0"
+          to="/contact"
+          >获取产品资料</RouterLink
+        >
+      </template>
+    </PageHero>
+
+    <main class="case-content">
+      <div class="caseLayout">
+        <aside class="timelineCol" aria-label="项目实施时间线">
+          <div class="timeline">
+            <div class="timelineTrack" aria-hidden="true">
+              <div class="timelineRail"></div>
+              <div
+                class="timelineFill"
+                :style="{ transform: `scaleY(${progress})` }"
+              ></div>
+            </div>
+
+            <ol class="timelineSteps" role="list">
+              <li
+                v-for="(s, idx) in steps"
+                :key="s.key"
+                class="timelineStep"
+                :data-state="stepState(idx)"
+              >
+                <button
+                  type="button"
+                  class="timelineBtn"
+                  :aria-current="activeIndex === idx ? 'step' : 'false'"
+                  @click="scrollToStep(s.key)"
+                >
+                  <span class="dot" aria-hidden="true"></span>
+                  <span class="stepText">
+                    <span class="stepTitle">{{ s.title }}</span>
+                    <span class="stepSub muted">{{ s.sub }}</span>
+                  </span>
+                </button>
+              </li>
+            </ol>
+          </div>
+        </aside>
+
+        <div class="contentCol">
+          <!-- 项目背景 -->
+          <section
+            :ref="setStepEl('background')"
+            id="step-background"
+            class="case-section case-section--odd"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case1.png" alt="设备管理场景" />
+            </div>
+            <div class="case-section__content">
+              <h2>项目背景 破解QHSE管理痛点</h2>
+              <p>
+                托我方工业互联网平台，为XX油服公司上线QHSE系统，全面覆盖风险与隐患管理、作业许可与过程监督、应急与健康管理等核心模块，严格适配QHSE体系标准；同时与平台内设备管理、生产管理系统深度集成，实现数据互通、流程联动，构建一体化安全管控体系。
+              </p>
+            </div>
+          </section>
+
+          <!-- 核心落地成果 -->
+          <section
+            :ref="setStepEl('delivery')"
+            id="step-delivery"
+            class="case-section case-section--even"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case2.png" alt="数字化管控系统" />
+            </div>
+
+            <div class="case-section__content">
+              <h2>核心落地成果 实现合规化智能管控</h2>
+              <p>
+                托我方工业互联网平台，为XX油服公司上线QHSE系统，全面覆盖风险与隐患管理、作业许可与过程监督、应急与健康管理等核心模块，严格适配QHSE体系标准；同时与平台内设备管理、生产管理系统深度集成，实现数据互通、流程联动，构建一体化安全管控体系。
+              </p>
+            </div>
+          </section>
+
+          <!-- 预测性维护赋能 -->
+          <section
+            :ref="setStepEl('predictive')"
+            id="step-predictive"
+            class="case-section case-section--odd"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case3.png" alt="预测性维护" />
+            </div>
+            <div class="case-section__content">
+              <h2>核心落地成果 实现合规化智能管控</h2>
+              <p>
+                借助平台数采与数据处理能力，系统实现风险精准识别、隐患闭环治理，作业许可全程线上审批、过程实时监督；完善应急处置流程与健康管理体系，配套培训与体系支持功能，推动QHSE管理从被动应对向主动防控转型，全面提升现场作业安全水平。
+              </p>
+            </div>
+          </section>
+
+          <!-- 量化成效 -->
+          <section
+            :ref="setStepEl('kpi')"
+            id="step-kpi"
+            class="case-section case-section--even"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case4.png" alt="量化成效展示" />
+            </div>
+
+            <div class="case-section__content">
+              <h2>量化成效，降本增效成果显著</h2>
+              <p>
+                项目上线后，XX油服公司QHSE管理合规性与效能全面提升，各项核心指标均达成预期目标，具体成效如下：合规达标率提升至100%，风险隐患整改率提升60%，作业许可办理效率提升55%，应急处置响应时间缩短45%，安全事故发生率下降70%，人均安全管理效能提升35%，全面满足行业监管要求，筑牢安全生产防线。
+              </p>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import PageHero from "../../components/PageHero.vue";
+import { Icon } from "@iconify/vue";
+
+const steps = [
+  { key: "background", title: "项目背景", sub: "问题识别与痛点分析" },
+  { key: "delivery", title: "落地成果", sub: "系统上线与流程闭环" },
+  { key: "predictive", title: "安全赋能", sub: "风险精准识别、隐患闭环治理" },
+  { key: "kpi", title: "量化成效", sub: "指标提升与降本增效" },
+];
+
+const activeIndex = ref(0);
+const progress = ref(0);
+const stepEls = ref({});
+
+const setStepEl = (key) => (el) => {
+  if (!el) return;
+  stepEls.value = { ...stepEls.value, [key]: el };
+};
+
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+const headerOffset = () => {
+  if (typeof window === "undefined") return 72;
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue("--header-h")
+    .trim();
+  const n = Number.parseInt(raw, 10);
+  return Number.isFinite(n) ? n : 72;
+};
+
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+
+const orderedEls = computed(() =>
+  steps.map((s) => stepEls.value[s.key]).filter(Boolean),
+);
+
+const computeActiveIndex = (y) => {
+  let idx = 0;
+  for (let i = 0; i < steps.length; i++) {
+    const el = stepEls.value[steps[i].key];
+    if (!el) continue;
+    const top = el.getBoundingClientRect().top + window.scrollY;
+    if (y >= top) idx = i;
+  }
+  return idx;
+};
+
+const computeProgress = (y) => {
+  const els = orderedEls.value;
+  if (els.length < 2) return 0;
+
+  const first = els[0];
+  const last = els[els.length - 1];
+  const start = first.getBoundingClientRect().top + window.scrollY;
+  const end = last.getBoundingClientRect().bottom + window.scrollY;
+  const span = Math.max(1, end - start);
+  return clamp01((y - start) / span);
+};
+
+let raf = 0;
+const updateFromScroll = () => {
+  raf = 0;
+  if (typeof window === "undefined") return;
+  const y = window.scrollY + headerOffset() + 130;
+  activeIndex.value = computeActiveIndex(y);
+  progress.value = computeProgress(y);
+};
+
+const onScroll = () => {
+  if (raf) return;
+  raf = window.requestAnimationFrame(updateFromScroll);
+};
+
+const scrollToStep = (key) => {
+  const el = document.getElementById(`step-${key}`);
+  if (!el) return;
+  el.scrollIntoView({
+    behavior: prefersReducedMotion() ? "auto" : "smooth",
+    block: "start",
+  });
+};
+
+const stepState = (idx) =>
+  idx < activeIndex.value
+    ? "done"
+    : idx === activeIndex.value
+      ? "active"
+      : "todo";
+
+onMounted(() => {
+  updateFromScroll();
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onScroll, { passive: true });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", onScroll);
+  window.removeEventListener("resize", onScroll);
+  if (raf) window.cancelAnimationFrame(raf);
+});
+</script>
+
+<style scoped>
+.case-content {
+  max-width: 1300px;
+  margin: 0 auto;
+  padding: 60px 20px;
+}
+
+.caseLayout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 26px;
+  align-items: start;
+}
+
+.timelineCol {
+  position: relative;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.timeline {
+  position: sticky;
+  top: calc(var(--header-h) + 24px);
+  padding: 10px 10px 12px 0;
+  user-select: none;
+  max-height: calc(100vh - var(--header-h) - 48px);
+  overflow-y: auto;
+}
+
+.timelineTrack {
+  position: absolute;
+  left: 18px;
+  top: 10px;
+  bottom: 12px;
+  border-radius: 1px;
+  width: 2px;
+}
+
+.timelineRail {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.12);
+  border-radius: 999px;
+}
+
+.timelineFill {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #1d4ed8, #0ea5e9);
+  border-radius: 999px;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform 140ms linear;
+  will-change: transform;
+}
+
+.timelineSteps {
+  margin: 0;
+  padding: 0 0 0 2px;
+  list-style: none;
+  display: grid;
+  gap: 10px;
+}
+
+.timelineStep {
+  position: relative;
+}
+
+.timelineBtn {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 42px 1fr;
+  gap: 12px;
+  align-items: start;
+  text-align: left;
+  padding: 10px 12px 10px 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+}
+
+.timelineBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
+  border-radius: 12px;
+}
+
+.dot {
+  width: 15px;
+  height: 15px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.16);
+  background: rgba(255, 255, 255, 0.92);
+  display: grid;
+  place-items: center;
+  margin-left: 10px;
+  margin-top: 2px;
+  transition:
+    background-color 220ms ease,
+    border-color 220ms ease,
+    box-shadow 220ms ease;
+}
+.stepText {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.stepTitle {
+  /* font-weight: 900; */
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.stepSub {
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.timelineStep[data-state="active"] .dot {
+  transform: scale(1.12);
+  border-color: rgba(29, 78, 216, 0.38);
+  box-shadow:
+    0 0 0 6px rgba(37, 99, 235, 0.12),
+    0 10px 24px rgba(29, 78, 216, 0.18);
+  background: #1d4ed8;
+}
+
+.timelineStep[data-state="done"] .dot {
+  background: linear-gradient(180deg, #1d4ed8, #0ea5e9);
+  border-color: transparent;
+  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
+}
+
+.timelineStep[data-state="todo"] .stepTitle {
+  color: rgba(2, 6, 23, 0.72);
+}
+
+.case-section {
+  display: flex;
+  margin-bottom: 80px;
+  position: relative;
+  scroll-margin-top: calc(var(--header-h) + 120px);
+}
+
+.case-section--odd {
+  flex-direction: row;
+}
+
+.case-section--even {
+  flex-direction: row-reverse;
+}
+
+.case-section__image {
+  flex: 1;
+  min-width: 300px;
+
+  overflow: hidden;
+}
+
+.case-section__image img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.case-section__content {
+  flex: 1;
+  padding: 30px;
+  /* 
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1); */
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.case-section--even .case-section__content {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.case-section__content h2 {
+  /* color: var(--brand-700); */
+  font-size: 24px;
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+
+.case-section__content p {
+  color: var(--slate-700);
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+@media (max-width: 900px) {
+  .caseLayout {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .timelineCol {
+    display: none;
+  }
+
+  .case-section {
+    flex-direction: column;
+  }
+
+  .case-section__image {
+    order: 1;
+    margin-bottom: 20px;
+  }
+
+  .case-section__content {
+    order: 2;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 20px;
+  }
+
+  .case-section--even .case-section__content {
+    order: 2;
+  }
+}
+
+@media (max-width: 600px) {
+  .case-content {
+    padding: 40px 15px;
+  }
+
+  .case-section__content {
+    padding: 15px;
+  }
+}
+
+:deep(.pageHero) {
+  background-image: url("../../assets/images/bg5.jpg");
+
+  background-size: cover, cover;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  background-blend-mode: overlay;
+  color: #111;
+  border-bottom: none;
+  padding: 80px 0;
+}
+:deep(.pageHero__subtitle) {
+  color: #4f5055;
+}
+</style>

src/views/cases/case3.vue

@@ -0,0 +1,486 @@
+<template>
+  <div>
+    <PageHero
+      kicker=""
+      title="智能注气"
+      subtitle="围绕设备全生命周期，实现台账、巡检维保、预测维护与实时监控预警的闭环管理。"
+    >
+      <template #actions>
+        <RouterLink
+          class="btn btn-primary"
+          style="border-radius: 0"
+          to="/contact"
+          >获取产品资料</RouterLink
+        >
+      </template>
+    </PageHero>
+
+    <main class="case-content">
+      <div class="caseLayout">
+        <aside class="timelineCol" aria-label="项目实施时间线">
+          <div class="timeline">
+            <div class="timelineTrack" aria-hidden="true">
+              <div class="timelineRail"></div>
+              <div
+                class="timelineFill"
+                :style="{ transform: `scaleY(${progress})` }"
+              ></div>
+            </div>
+
+            <ol class="timelineSteps" role="list">
+              <li
+                v-for="(s, idx) in steps"
+                :key="s.key"
+                class="timelineStep"
+                :data-state="stepState(idx)"
+              >
+                <button
+                  type="button"
+                  class="timelineBtn"
+                  :aria-current="activeIndex === idx ? 'step' : 'false'"
+                  @click="scrollToStep(s.key)"
+                >
+                  <span class="dot" aria-hidden="true"></span>
+                  <span class="stepText">
+                    <span class="stepTitle">{{ s.title }}</span>
+                    <span class="stepSub muted">{{ s.sub }}</span>
+                  </span>
+                </button>
+              </li>
+            </ol>
+          </div>
+        </aside>
+
+        <div class="contentCol">
+          <!-- 项目背景 -->
+          <section
+            :ref="setStepEl('background')"
+            id="step-background"
+            class="case-section case-section--odd"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case5.png" alt="设备管理场景" />
+            </div>
+            <div class="case-section__content">
+              <h2>项目背景，突破传统注气瓶颈</h2>
+              <p>
+                XX
+                注气现场面临设备老旧、自动化程度低的双重困境，依赖大量人员现场值守，作业效率受限，参数调整滞后，且设备故障多为被动抢修，存在较大安全隐患与运维成本，亟需通过智能化改造实现降本增效。
+              </p>
+            </div>
+          </section>
+
+          <!-- 核心落地成果 -->
+          <section
+            :ref="setStepEl('delivery')"
+            id="step-delivery"
+            class="case-section case-section--even"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case6.jpg" alt="数字化管控系统" />
+            </div>
+
+            <div class="case-section__content">
+              <h2>核心打造，打造智能无人底座</h2>
+              <p>
+                依托工业互联网平台，对现场老旧设备进行专项升级，加装远程控制器、智能阀门等核心组件，完成设备智能化改造。改造后设备全面接入平台，实现数据互通，为无人少人值守与智能调控奠定坚实硬件基础。
+              </p>
+            </div>
+          </section>
+
+          <!-- 预测性维护赋能 -->
+          <section
+            :ref="setStepEl('predictive')"
+            id="step-predictive"
+            class="case-section case-section--odd"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case7.png" alt="预测性维护" />
+            </div>
+            <div class="case-section__content">
+              <h2>智能调参与预测维护，双轮驱动提质增效</h2>
+              <p>
+                升级后的设备联动平台
+                AI算法，实时采集压力、温度、流量等核心数据，自动分析工况并动态调整注入参数，实现精准高效注气。同时，通过预测性维护技术精准预判设备潜在故障，变被动抢修为主动预防，提升设备管理水平。
+              </p>
+            </div>
+          </section>
+
+          <!-- 量化成效 -->
+          <section
+            :ref="setStepEl('kpi')"
+            id="step-kpi"
+            class="case-section case-section--even"
+          >
+            <div class="case-section__image">
+              <img src="../../assets/images/case4.png" alt="量化成效展示" />
+            </div>
+
+            <div class="case-section__content">
+              <h2>量化成效，实现安全高效转型</h2>
+              <p>项目上线后，XX 注气现场管理效能全面跃升，核心成效显著：</p>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import PageHero from "../../components/PageHero.vue";
+import { Icon } from "@iconify/vue";
+
+const steps = [
+  { key: "background", title: "项目背景", sub: "问题识别与痛点分析" },
+  { key: "delivery", title: "落地成果", sub: "系统上线与流程闭环" },
+  { key: "predictive", title: "提质增效", sub: "提升设备管理水平" },
+  { key: "kpi", title: "量化成效", sub: "指标提升与降本增效" },
+];
+
+const activeIndex = ref(0);
+const progress = ref(0);
+const stepEls = ref({});
+
+const setStepEl = (key) => (el) => {
+  if (!el) return;
+  stepEls.value = { ...stepEls.value, [key]: el };
+};
+
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+const headerOffset = () => {
+  if (typeof window === "undefined") return 72;
+  const raw = getComputedStyle(document.documentElement)
+    .getPropertyValue("--header-h")
+    .trim();
+  const n = Number.parseInt(raw, 10);
+  return Number.isFinite(n) ? n : 72;
+};
+
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+
+const orderedEls = computed(() =>
+  steps.map((s) => stepEls.value[s.key]).filter(Boolean),
+);
+
+const computeActiveIndex = (y) => {
+  let idx = 0;
+  for (let i = 0; i < steps.length; i++) {
+    const el = stepEls.value[steps[i].key];
+    if (!el) continue;
+    const top = el.getBoundingClientRect().top + window.scrollY;
+    if (y >= top) idx = i;
+  }
+  return idx;
+};
+
+const computeProgress = (y) => {
+  const els = orderedEls.value;
+  if (els.length < 2) return 0;
+
+  const first = els[0];
+  const last = els[els.length - 1];
+  const start = first.getBoundingClientRect().top + window.scrollY;
+  const end = last.getBoundingClientRect().bottom + window.scrollY;
+  const span = Math.max(1, end - start);
+  return clamp01((y - start) / span);
+};
+
+let raf = 0;
+const updateFromScroll = () => {
+  raf = 0;
+  if (typeof window === "undefined") return;
+  const y = window.scrollY + headerOffset() + 130;
+  activeIndex.value = computeActiveIndex(y);
+  progress.value = computeProgress(y);
+};
+
+const onScroll = () => {
+  if (raf) return;
+  raf = window.requestAnimationFrame(updateFromScroll);
+};
+
+const scrollToStep = (key) => {
+  const el = document.getElementById(`step-${key}`);
+  if (!el) return;
+  el.scrollIntoView({
+    behavior: prefersReducedMotion() ? "auto" : "smooth",
+    block: "start",
+  });
+};
+
+const stepState = (idx) =>
+  idx < activeIndex.value
+    ? "done"
+    : idx === activeIndex.value
+      ? "active"
+      : "todo";
+
+onMounted(() => {
+  updateFromScroll();
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onScroll, { passive: true });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", onScroll);
+  window.removeEventListener("resize", onScroll);
+  if (raf) window.cancelAnimationFrame(raf);
+});
+</script>
+
+<style scoped>
+.case-content {
+  max-width: 1300px;
+  margin: 0 auto;
+  padding: 60px 20px;
+}
+
+.caseLayout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 26px;
+  align-items: start;
+}
+
+.timelineCol {
+  position: relative;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.timeline {
+  position: sticky;
+  top: calc(var(--header-h) + 24px);
+  padding: 10px 10px 12px 0;
+  user-select: none;
+  max-height: calc(100vh - var(--header-h) - 48px);
+  overflow-y: auto;
+}
+
+.timelineTrack {
+  position: absolute;
+  left: 18px;
+  top: 10px;
+  bottom: 12px;
+  border-radius: 1px;
+  width: 2px;
+}
+
+.timelineRail {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.12);
+  border-radius: 999px;
+}
+
+.timelineFill {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #1d4ed8, #0ea5e9);
+  border-radius: 999px;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform 140ms linear;
+  will-change: transform;
+}
+
+.timelineSteps {
+  margin: 0;
+  padding: 0 0 0 2px;
+  list-style: none;
+  display: grid;
+  gap: 10px;
+}
+
+.timelineStep {
+  position: relative;
+}
+
+.timelineBtn {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 42px 1fr;
+  gap: 12px;
+  align-items: start;
+  text-align: left;
+  padding: 10px 12px 10px 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+}
+
+.timelineBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
+  border-radius: 12px;
+}
+
+.dot {
+  width: 15px;
+  height: 15px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.16);
+  background: rgba(255, 255, 255, 0.92);
+  display: grid;
+  place-items: center;
+  margin-left: 10px;
+  margin-top: 2px;
+  transition:
+    background-color 220ms ease,
+    border-color 220ms ease,
+    box-shadow 220ms ease;
+}
+.stepText {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.stepTitle {
+  /* font-weight: 900; */
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.stepSub {
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.timelineStep[data-state="active"] .dot {
+  transform: scale(1.12);
+  border-color: rgba(29, 78, 216, 0.38);
+  box-shadow:
+    0 0 0 6px rgba(37, 99, 235, 0.12),
+    0 10px 24px rgba(29, 78, 216, 0.18);
+  background: #1d4ed8;
+}
+
+.timelineStep[data-state="done"] .dot {
+  background: linear-gradient(180deg, #1d4ed8, #0ea5e9);
+  border-color: transparent;
+  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
+}
+
+.timelineStep[data-state="todo"] .stepTitle {
+  color: rgba(2, 6, 23, 0.72);
+}
+
+.case-section {
+  display: flex;
+  margin-bottom: 80px;
+  position: relative;
+  scroll-margin-top: calc(var(--header-h) + 120px);
+}
+
+.case-section--odd {
+  flex-direction: row;
+}
+
+.case-section--even {
+  flex-direction: row-reverse;
+}
+
+.case-section__image {
+  flex: 1;
+  min-width: 300px;
+
+  overflow: hidden;
+}
+
+.case-section__image img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.case-section__content {
+  flex: 1;
+  padding: 30px;
+  /* 
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1); */
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.case-section--even .case-section__content {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.case-section__content h2 {
+  /* color: var(--brand-700); */
+  font-size: 24px;
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+
+.case-section__content p {
+  color: var(--slate-700);
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+@media (max-width: 900px) {
+  .caseLayout {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .timelineCol {
+    display: none;
+  }
+
+  .case-section {
+    flex-direction: column;
+  }
+
+  .case-section__image {
+    order: 1;
+    margin-bottom: 20px;
+  }
+
+  .case-section__content {
+    order: 2;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 20px;
+  }
+
+  .case-section--even .case-section__content {
+    order: 2;
+  }
+}
+
+@media (max-width: 600px) {
+  .case-content {
+    padding: 40px 15px;
+  }
+
+  .case-section__content {
+    padding: 15px;
+  }
+}
+
+:deep(.pageHero) {
+  background-image: url("../../assets/images/bg5.jpg");
+
+  background-size: cover, cover;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  background-blend-mode: overlay;
+  color: #111;
+  border-bottom: none;
+  padding: 80px 0;
+}
+:deep(.pageHero__subtitle) {
+  color: #4f5055;
+}
+</style>