案例页面修改

src/components/layout/AppHeader.vue

@@ -7,12 +7,10 @@ const route = useRoute();
 const mobileOpen = ref(false);
 
 const navItems = [
-  { label: "首页", to: "/" },
   { label: "产品", to: "/products" },
   { label: "解决方案", to: "/solutions" },
   { label: "客户案例", to: "/cases" },
   { label: "新闻动态", to: "/news" },
-  { label: "关于我们", to: "/about" },
 ];
 
 watch(
@@ -30,28 +28,26 @@ const mobileLabel = computed(() =>
 <template>
   <header class="app-header">
     <div class="app-header__inner">
-      <RouterLink class="brand" to="/" aria-label="工业互联网门户">
-        <img
-          src="../../assets//images/logo.png"
-          alt=""
-          style="width: auto; height: 36px"
-        />
-        <!-- <span class="brand__text">
-          <span class="brand__name">工业互联网门户</span>
-          <span class="brand__tag muted">Industrial Internet Portal</span>
-        </span> -->
-      </RouterLink>
-
-      <nav class="nav" aria-label="主导航">
-        <RouterLink
-          v-for="item in navItems"
-          :key="item.to"
-          class="nav__link"
-          :to="item.to"
-        >
-          {{ item.label }}
+      <div style="display: flex; align-items: center">
+        <RouterLink class="brand" to="/" aria-label="工业互联网门户">
+          <img
+            src="../../assets//images/logo.png"
+            alt=""
+            style="width: auto; height: 36px"
+          />
         </RouterLink>
-      </nav>
+
+        <nav class="nav" aria-label="主导航">
+          <RouterLink
+            v-for="item in navItems"
+            :key="item.to"
+            class="nav__link"
+            :to="item.to"
+          >
+            {{ item.label }}
+          </RouterLink>
+        </nav>
+      </div>
 
       <div class="actions">
         <RouterLink class="btn actions__login" to="/contact">登录</RouterLink>
@@ -96,13 +92,15 @@ const mobileLabel = computed(() =>
   height: var(--header-h);
   background: rgba(255, 255, 255, 0.86);
   backdrop-filter: blur(14px);
-  border-bottom: 0.5px solid var(--border);
+  border-bottom: none;
+  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.05);
 }
 
 .app-header__inner {
   height: var(--header-h);
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 18px;
   padding: 0 20px;
 }
@@ -141,7 +139,6 @@ const mobileLabel = computed(() =>
 }
 
 .nav {
-  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -152,15 +149,14 @@ const mobileLabel = computed(() =>
   padding: 10px 12px;
   border-radius: 10px;
   color: var(--slate-700);
-  font-size: 14px;
+  font-size: 18px;
 }
 
 .nav__link:hover {
-  background: rgba(15, 23, 42, 0.04);
+  color: #1d4ed8;
 }
 
 .nav__link.router-link-exact-active {
-  background: rgba(37, 99, 235, 0.1);
   color: var(--brand-700);
 }
 

src/components/layout/SideButtons.vue

@@ -71,20 +71,22 @@ const handleOnlineConsultation = () => {
 .button-item:hover {
   /* transform: translateY(-2px); */
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  background: #014198;
+  color: aliceblue;
 }
 
-/* .button-item:active {
+.button-item:active {
   transform: translateY(0);
-} */
+}
 
 .free-experience {
-  background: linear-gradient(135deg, #00a9ff, #007aff);
-  color: white;
+  /* background: linear-gradient(135deg, #00a9ff, #007aff); */
+  color: #6a6a6a;
 }
 
 .online-consultation {
-  background: linear-gradient(135deg, #00a9ff, #007aff);
-  color: white;
+  /* background: linear-gradient(135deg, #00a9ff, #007aff); */
+  color: #6a6a6a;
 }
 
 @media (max-width: 768px) {

src/router/index.js

@@ -38,6 +38,21 @@ const router = createRouter({
       name: 'news',
       component: () => import('../views/NewsView.vue'),
       meta: { title: '新闻动态' },
+    },
+      {
+      path: '/news/1',
+      component: () => import('../views/news/new1.vue'),
+      meta: { title: '新闻动态' },
+    },
+     {
+      path: '/news/2',
+      component: () => import('../views/news/new2.vue'),
+      meta: { title: '新闻动态' },
+    },
+      {
+      path: '/news/4',
+      component: () => import('../views/news/new4.vue'),
+      meta: { title: '新闻动态' },
     },
     {
       path: '/about',

src/views/CasesView.vue

@@ -1,124 +1,361 @@
 <script setup>
-import { computed, ref } from "vue";
+import { Icon } from "@iconify/vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import PageHero from "../components/PageHero.vue";
+import Reveal from "../components/motion/Reveal.vue";
 import bannerUrl from "../assets/images/banner.jpg?url";
 import bgUrl from "../assets/images/bg.jpg?url";
-import Reveal from "../components/motion/Reveal.vue";
 
-const industries = ["全部", "汽车", "化工", "装备", "电子", "能源", "园区"];
-const active = ref("全部");
+const activeTab = ref("equipment");
+const expanded = ref({
+  equipment: false,
+  qhse: false,
+  injection: false,
+});
 
-const allCases = [
-  {
-    industry: "汽车",
-    title: "过程质量追溯与异常闭环",
-    desc: "打通工序数据与质量规则，实现异常定位与闭环处理。",
-    cover: bannerUrl,
-    metrics: ["良率 +3.2%", "追溯时间 -80%", "异常闭环 T+1"],
-  },
-  {
-    industry: "化工",
-    title: "能效监测与对标优化",
-    desc: "构建能耗指标体系与异常分析模型，实现持续能效提升。",
-    cover: bgUrl,
-    metrics: ["能耗 -6.8%", "对标覆盖 12 装置", "异常预警 7 类"],
-  },
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+const categories = [
   {
-    industry: "装备",
-    title: "预测性维护与停机治理",
-    desc: "多源数据融合评估健康度，提前预警故障风险。",
+    key: "equipment",
+    title: "设备管理",
+    lead:
+      "覆盖台账、巡检、维保、预测性维护到告警处置的全生命周期闭环，让设备运行更稳定、维护更可控。",
+    icon: "lucide:cpu",
+    accent: "rgba(37, 99, 235, 0.9)",
     cover: bannerUrl,
-    metrics: ["停机 -20%", "维修成本 -12%", "告警准确率 +15%"],
+    cases: [
+      {
+        title: "设备台账与参数标准化",
+        desc: "统一资产主数据、参数口径与编码规则，沉淀可复用的设备数据底座。",
+        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: ["指标口径统一", "月度复盘固化", "改进项可跟踪"],
+      },
+    ],
   },
   {
-    industry: "电子",
-    title: "设备接入与 OEE 提升",
-    desc: "统一采集与运行监控，驱动 OEE 分析与产线瓶颈改善。",
+    key: "qhse",
+    title: "QHSE",
+    lead:
+      "将质量、健康、安全、环境融入业务流程：从风险识别到整改闭环，让合规与效率同时提升。",
+    icon: "lucide:shield-check",
+    accent: "rgba(14, 116, 144, 0.92)",
     cover: bgUrl,
-    metrics: ["OEE +5.5%", "采集点位 6,000+", "停机原因 100% 标准化"],
+    cases: [
+      {
+        title: "隐患排查治理与整改闭环",
+        desc: "隐患登记、分级分责、整改验收一体化，形成闭环追踪与审计留痕。",
+        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", "培训覆盖率提升", "记录可审计"],
+      },
+    ],
   },
   {
-    industry: "能源",
-    title: "设备巡检与工单联动",
-    desc: "巡检计划、移动端执行与工单闭环，形成运维知识沉淀。",
+    key: "injection",
+    title: "智能注气",
+    lead:
+      "围绕注气作业计划、过程监控与效果评估，联动工艺参数与产量数据，实现可控、可追溯、可优化。",
+    icon: "lucide:wind",
+    accent: "rgba(2, 132, 199, 0.92)",
     cover: bannerUrl,
-    metrics: ["工单闭环率 98%", "巡检漏检 0", "知识库 300+"],
-  },
-  {
-    industry: "园区",
-    title: "园区运营可视化",
-    desc: "统一态势大屏与多系统联动，实现事件快速响应。",
-    cover: bgUrl,
-    metrics: ["事件响应 -35%", "系统对接 10+", "指标 200+"],
+    cases: [
+      {
+        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: ["核算自动化", "成本结构清晰", "对标可用"],
+      },
+      {
+        title: "注气数据治理与口径统一",
+        desc: "统一注气数据口径、指标体系与采集规范，支撑长期运营与模型迭代。",
+        tags: ["数据治理", "指标体系", "规范"],
+        metrics: ["口径统一", "数据可用性提升", "资产沉淀"],
+      },
+    ],
   },
 ];
 
-const filtered = computed(() => {
-  if (active.value === "全部") return allCases;
-  return allCases.filter((c) => c.industry === active.value);
+const tabItems = computed(() =>
+  categories.map((c) => ({
+    ...c,
+    count: c.cases.length,
+  })),
+);
+
+const maxPreview = 6;
+const visibleCases = (cat) =>
+  expanded.value[cat.key] ? cat.cases : cat.cases.slice(0, maxPreview);
+
+const toggleExpand = (key) => {
+  expanded.value = { ...expanded.value, [key]: !expanded.value[key] };
+};
+
+const scrollToCategory = (key) => {
+  const el = document.getElementById(`case-${key}`);
+  if (!el) return;
+  activeTab.value = key;
+  el.scrollIntoView({
+    behavior: prefersReducedMotion() ? "auto" : "smooth",
+    block: "start",
+  });
+};
+
+let io = null;
+onMounted(() => {
+  if (typeof window === "undefined") return;
+  if (!("IntersectionObserver" in window)) return;
+
+  const headerHRaw = getComputedStyle(document.documentElement)
+    .getPropertyValue("--header-h")
+    .trim();
+  const headerH = Number.parseInt(headerHRaw, 10);
+  const topOffset = Number.isFinite(headerH) ? headerH : 72;
+
+  const sections = categories
+    .map((c) => document.getElementById(`case-${c.key}`))
+    .filter(Boolean);
+
+  io = new IntersectionObserver(
+    (entries) => {
+      const visible = entries
+        .filter((e) => e.isIntersecting)
+        .sort(
+          (a, b) =>
+            (a.boundingClientRect.top ?? 0) - (b.boundingClientRect.top ?? 0),
+        )[0];
+      if (!visible) return;
+      const id = visible.target.getAttribute("id") || "";
+      const key = id.replace("case-", "");
+      if (key) activeTab.value = key;
+    },
+    {
+      threshold: 0.22,
+      rootMargin: `-${topOffset + 10}px 0px -55% 0px`,
+    },
+  );
+
+  for (const s of sections) io.observe(s);
+});
+
+onBeforeUnmount(() => {
+  if (io) io.disconnect();
 });
 </script>
 
 <template>
-  <div>
+  <div class="casesView">
     <PageHero
       kicker="客户案例"
-      title="以指标呈现价值"
-      subtitle="从设备接入、数据治理到应用运营，沉淀可复用的行业实践。"
+      title="案例分为三大类：设备管理、QHSE、智能注气"
+      subtitle="每个分类沉淀了多项可复用的落地案例与最佳实践，覆盖从方案设计到运营闭环的关键环节。"
     >
       <template #actions>
-        <RouterLink class="btn btn-primary" to="/contact"
-          >获取案例集</RouterLink
+        <RouterLink class="btn btn-primary" style="border-radius: 0" to="/contact"
+          >留言咨询</RouterLink
         >
-        <RouterLink class="btn btn-ghost" to="/solutions">匹配方案</RouterLink>
       </template>
     </PageHero>
 
+    <nav class="tabBar" aria-label="案例分类导航">
+      <button
+        v-for="t in tabItems"
+        :key="t.key"
+        type="button"
+        class="tabBtn"
+        :class="{ 'is-active': activeTab === t.key }"
+        @click="scrollToCategory(t.key)"
+      >
+        <Icon :icon="t.icon" class="tabIcon" />
+        <span class="tabText">{{ t.title }}</span>
+        <span class="tabCount">{{ t.count }}</span>
+      </button>
+    </nav>
+
     <section class="section">
       <div class="container">
-        <Reveal as="div" class="filters" :delay="0">
-          <button
-            v-for="i in industries"
-            :key="i"
-            type="button"
-            class="filter"
-            :data-active="active === i ? 'true' : 'false'"
-            @click="active = i"
+        <div class="stack">
+          <section
+            v-for="(cat, catIdx) in categories"
+            :key="cat.key"
+            class="caseSection"
+            :id="`case-${cat.key}`"
+            :style="{ '--accent': cat.accent }"
           >
-            {{ i }}
-          </button>
-        </Reveal>
-
-        <div class="grid grid-3">
-          <Reveal
-            v-for="(c, idx) in filtered"
-            :key="c.title"
-            as="div"
-            class="card caseCard hover-lift"
-            :delay="60 + idx * 70"
-          >
-            <img
-              class="caseCover"
-              :src="c.cover"
-              :alt="c.title"
-              loading="lazy"
-            />
-            <div class="casePad">
-              <div class="caseTop">
-                <span class="pill">{{ c.industry }}</span>
-                <RouterLink class="btn btn-link" to="/contact"
-                  >对接同类项目 →</RouterLink
-                >
+            <Reveal as="header" class="caseHead" :delay="40 + catIdx * 80">
+              <div class="caseHeadTop">
+                <span class="caseBadge">分类</span>
+                <div class="caseHeadTitle">
+                  <Icon :icon="cat.icon" class="caseHeadIcon" />
+                  <h2 class="h2">{{ cat.title }}</h2>
+                </div>
               </div>
-              <div class="caseTitle">{{ c.title }}</div>
-              <div class="muted">{{ c.desc }}</div>
-              <div class="caseMetrics">
-                <span v-for="m in c.metrics" :key="m" class="metric">{{
-                  m
-                }}</span>
+              <p class="muted caseLead">{{ cat.lead }}</p>
+              <div class="caseHeadActions">
+                <RouterLink class="btn btn-ghost" style="border-radius: 0" to="/contact"
+                  >对接同类项目</RouterLink
+                >
               </div>
+            </Reveal>
+
+            <div class="caseGrid">
+              <Reveal
+                v-for="(c, idx) in visibleCases(cat)"
+                :key="c.title"
+                as="article"
+                class="card caseCard hover-lift"
+                :delay="60 + idx * 60"
+              >
+                <div class="caseCardTop">
+                  <div class="caseCardLine" aria-hidden="true"></div>
+                  <div class="caseCardTitle">{{ c.title }}</div>
+                  <div class="muted caseCardDesc">{{ c.desc }}</div>
+                </div>
+
+                <div class="caseMeta">
+                  <div class="caseTags" aria-label="标签">
+                    <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>
+                  </div>
+                </div>
+              </Reveal>
+            </div>
+
+            <div class="caseMore">
+              <button
+                v-if="cat.cases.length > maxPreview"
+                type="button"
+                class="btn btn-link moreBtn"
+                @click="toggleExpand(cat.key)"
+              >
+                {{ expanded[cat.key] ? "收起" : `展开更多（${cat.cases.length - maxPreview}）` }}
+              </button>
             </div>
-          </Reveal>
+          </section>
         </div>
       </div>
     </section>
@@ -126,63 +363,200 @@ const filtered = computed(() => {
 </template>
 
 <style scoped>
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-bottom: 16px;
+.casesView {
+  --tab-bg: rgba(255, 255, 255, 0.92);
 }
 
-.filter {
-  height: 38px;
-  padding: 0 14px;
-  /* border-radius: 999px; */
-  border: 1px solid var(--border);
-  background: #fff;
-  cursor: pointer;
-  font-weight: 700;
-  color: var(--slate-700);
-  transition: 160ms ease;
+.tabBar {
+  position: sticky;
+  top: var(--header-h);
+  z-index: 20;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  background: #eef5f8;
+  height: 76px;
+  margin: 10px 0 18px;
+  border: 0;
+  border-radius: 0;
 }
 
-.filter:hover {
-  background: rgba(15, 23, 42, 0.02);
+.tabBtn {
+  height: 76px;
+  border: 0;
+  background: #eef5f8;
+  padding: 0 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: var(--slate-700);
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease,
+    background-color 160ms ease;
 }
 
-.filter[data-active="true"] {
-  border-color: rgba(37, 99, 235, 0.35);
-  background: rgba(37, 99, 235, 0.08);
+.tabBtn.is-active {
   color: var(--brand-700);
+  background-color: #fff;
+}
+
+.tabBtn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
+}
+
+.tabIcon {
+  width: 18px;
+  height: 18px;
+}
+
+.tabText {
+  display: inline-block;
+  white-space: nowrap;
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  padding-bottom: 10px;
+  background-image: linear-gradient(currentColor, currentColor);
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 0 2px;
+  transition: background-size 160ms ease;
+}
+
+.tabBtn.is-active .tabText {
+  background-size: 100% 2px;
+}
+
+.tabCount {
+  font-size: 12px;
+  font-weight: 900;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  background: rgba(255, 255, 255, 0.72);
+  color: rgba(2, 6, 23, 0.72);
 }
 
-.caseTop {
+.stack {
+  display: grid;
+  gap: 26px;
+}
+
+.caseSection {
+  scroll-margin-top: calc(var(--header-h) + 88px);
+  padding: 18px 0 10px;
+}
+
+.caseHead {
+  padding: 18px 4px 14px;
+  display: grid;
+  gap: 10px;
+}
+
+.caseHeadTop {
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.caseBadge {
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  color: rgba(2, 6, 23, 0.62);
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  padding: 6px 10px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.caseHeadTitle {
+  display: inline-flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
+  gap: 10px;
 }
 
-.caseCover {
-  width: 100%;
-  height: 140px;
-  object-fit: cover;
-  display: block;
-  border-bottom: 1px solid var(--border);
+.caseHeadIcon {
+  width: 20px;
+  height: 20px;
+  color: var(--accent);
+}
+
+.caseLead {
+  max-width: 92ch;
+}
+
+.caseHeadActions {
+  margin-top: 2px;
+}
+
+.caseGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  margin-top: 10px;
+}
+
+.caseCard {
+  border: 1px solid var(--border);
+  border-top: 0;
+  box-shadow: 0 16px 42px rgba(2, 6, 23, 0.08);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
+}
+
+.caseCardTop {
+  padding: 18px 18px 10px;
 }
 
-.casePad {
-  padding: 18px;
+.caseCardLine {
+  height: 2px;
+  width: 100%;
+  background: linear-gradient(90deg, var(--accent), rgba(2, 6, 23, 0));
+  margin-bottom: 12px;
 }
 
-.caseTitle {
+.caseCardTitle {
   font-weight: 900;
   letter-spacing: -0.02em;
-  margin-bottom: 6px;
+  line-height: 1.25;
+}
+
+.caseCardDesc {
+  margin-top: 8px;
+  line-height: 1.75;
+}
+
+.caseMeta {
+  padding: 8px 18px 18px;
+  display: grid;
+  gap: 12px;
+}
+
+.caseTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.03);
+  border: 1px solid var(--border);
+  font-weight: 700;
+  color: var(--slate-700);
+  font-size: 12px;
 }
 
 .caseMetrics {
-  margin-top: 12px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -192,11 +566,64 @@ const filtered = computed(() => {
   display: inline-flex;
   align-items: center;
   padding: 6px 10px;
-  /* border-radius: 12px; */
   background: rgba(15, 23, 42, 0.03);
   border: 1px solid var(--border);
-  font-weight: 700;
-  color: var(--slate-700);
+  border-left: 2px solid var(--accent);
+  font-weight: 800;
+  color: rgba(2, 6, 23, 0.78);
   font-size: 12px;
 }
+
+.caseMore {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.moreBtn {
+  font-weight: 900;
+  letter-spacing: -0.01em;
+}
+
+: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;
+}
+
+@media (max-width: 960px) {
+  .caseGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .tabBar {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .tabBtn {
+    justify-content: space-between;
+    padding: 0 16px;
+    height: 64px;
+  }
+
+  .tabText {
+    padding-bottom: 6px;
+  }
+}
+
+@media (max-width: 560px) {
+  .caseGrid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/views/HomeView.vue

@@ -1,5 +1,8 @@
 <script setup>
 import banner1Url from "../assets/images/banner.jpg?url";
+import news1 from "../assets/images/news1.jpg?url";
+import news3 from "../assets/images/news3.png?url";
+import news4 from "../assets/images/news4.png?url";
 import banner2Url from "../assets/images/banner2.jpg?url";
 import banner3Url from "../assets/images/banner3.jpg?url";
 import solutionsBgUrl from "../assets/images/bg.jpg?url";
@@ -16,6 +19,9 @@ import CountUp from "../components/motion/CountUp.vue";
 import Reveal from "../components/motion/Reveal.vue";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { Icon } from "@iconify/vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 const highlights = [
   { label: "接入井站", end: 200, suffix: "+" },
@@ -28,29 +34,29 @@ const slides = [
   {
     bg: banner1Url,
     kicker: "油田数智化 · 端边云协同 · 生产经营一体化",
-    headline1: "连接井站、设备与业务，",
-    headline2Before: "构建",
-    headline2Emphasis: "安全、可控",
-    headline2After: "的油田数智底座",
-    desc: "提供井站物联接入、数据治理、生产经营应用与智能分析一体化能力，支撑油田提质增效与本质安全。",
+    headline1: "油气领域专属工业互联网平台",
+    headline2Before: "",
+    headline2Emphasis: "",
+    headline2After: "",
+    desc: "以边云协同、AI驱动智能决策，是打通油气领域全链条的数据中枢，实现设备互联、数据贯通与业务协同，助力油气生产更高效、更安全、更绿色",
   },
   {
     bg: banner2Url,
     kicker: "油田数据治理 · 主数据/指标 · 统一口径",
-    headline1: "让采集数据可追溯、可复用，",
-    headline2Before: "把“",
-    headline2Emphasis: "数据资产",
-    headline2After: "”变成可持续能力",
-    desc: "构建井、站、管网等资产目录，打通血缘与质量体系，沉淀指标口径与标签体系，为分析、AI 与业务闭环提供可信底座。",
+    headline1: "油气专属设备智能管理平台",
+    headline2Before: "",
+    headline2Emphasis: "",
+    headline2After: "",
+    desc: "基于油气领域工业互联网平台，打造数采、设备、维保、巡检、预测性维护与一体的设备管理系统，实现全生命周期数字化管控。以数据驱动智运维，提升设备可靠性与运行效率，为油气生产安全、稳定运行提供坚实支撑",
   },
   {
     bg: banner3Url,
     kicker: "场景方案 · 快速复制 · 价值闭环",
-    headline1: "用指标驱动持续优化与精细管理，",
-    headline2Before: "从试点到规模化，形成",
-    headline2Emphasis: "可运营闭环",
+    headline1: "AI钻井优化，提升钻井效率，缩短钻井周期",
+    headline2Before: "",
+    headline2Emphasis: "",
     headline2After: "",
-    desc: "沉淀钻完井、采油采气、集输管网与能耗管理等场景模板，结合交付方法论与组件化能力，缩短落地周期，提升复制效率。",
+    desc: "基于数采、大模型技术，打造智能钻井优化方案，实时提供钻井参数优化与场指导，助力钻速提升30%以上。以AI驱动智能钻井、降本增效、安全可控，为油气勘探开发注入数智动能 ",
   },
 ];
 
@@ -103,7 +109,7 @@ onBeforeUnmount(stop);
 
 const capabilityPlatforms = [
   {
-    title: "连接井站平台",
+    title: "连接现场设备",
     desc: "打通井场、站控与 SCADA 数据链路，构建稳定可扩展的采集与边缘体系。",
     art: heroIndustrialUrl,
     variant: "connect",
@@ -120,7 +126,7 @@ const capabilityPlatforms = [
     ],
   },
   {
-    title: "数据治理平台",
+    title: "数据资产治理",
     desc: "统一资产与指标口径，完善血缘与质量体系，让数据资产可管、可用、可运营。",
     art: sectionDataUrl,
     variant: "connect",
@@ -137,7 +143,7 @@ const capabilityPlatforms = [
     ],
   },
   {
-    title: "生产经营应用平台",
+    title: "生产运营决策",
     desc: "面向生产运行与经营管理，快速构建大屏、报表、预警与处置闭环应用。",
     art: heroIndustrialUrl,
     variant: "connect",
@@ -194,12 +200,12 @@ const products = [
 ];
 
 const solutions = [
-  { title: "钻完井", desc: "井场数据汇聚、施工过程可视化与风险预警。" },
-  { title: "采油采气", desc: "生产运行监控、工况分析与产量波动诊断。" },
-  { title: "集输管网", desc: "站库管网联动监测、泄漏/压降异常识别。" },
-  { title: "注水注气", desc: "注采平衡分析、配注优化与效益评估。" },
-  { title: "能耗与碳管理", desc: "能耗在线核算、节能评估与合规披露闭环。" },
-  { title: "设备运维", desc: "告警闭环、工单联动与知识沉淀，提升设备可靠性。" },
+  { title: "设备管理", desc: "井场数据汇聚、施工过程可视化与风险预警。" },
+  { title: "智能钻修井", desc: "生产运行监控、工况分析与产量波动诊断。" },
+  { title: "智慧注气", desc: "站库管网联动监测、泄漏/压降异常识别。" },
+  { title: "智慧压裂", desc: "注采平衡分析、配注优化与效益评估。" },
+  { title: "停办管网", desc: "能耗在线核算、节能评估与合规披露闭环。" },
+  { title: "场站管理", desc: "告警闭环、工单联动与知识沉淀，提升设备可靠性。" },
 ];
 
 const cases = [
@@ -250,6 +256,7 @@ const news = [
     desc: "全新门户界面设计，优化用户体验，增强产品展示效果。",
     cover: banner1Url,
     type: "featured", // 上部大图新闻
+    link: "/news/4",
   },
   {
     date: "2026-01-28",
@@ -279,19 +286,22 @@ const news = [
 
 const marketActivities = [
   {
-    title: "DeepOil亮相2025中国5G+工业互联网大会",
+    title: "AI设备管理系统实现在线状态智能分析，隐患早发现",
     desc: "2025中国5G+工业互联网大会在武汉开幕，DeepOil精彩亮相。",
-    cover: banner1Url,
+    cover: news1,
+    link: "/news/1",
   },
   {
-    title: "DeepOil成功协办第十四届中国创新创业大赛工业智能体赛",
+    title: "石化行业设备完整性管理数字化：破解运维痛点的核心方案",
     desc: "推动工业智能化发展，助力企业创新转型。",
-    cover: banner2Url,
+    cover: news3,
+    link: "/news/2",
   },
   {
-    title: "2025第二届中国(郑州)数字化与先进装备制造业博览会",
+    title: "制造业新趋势：从“事后维修” 到“预测性维护”，只差一套系统",
     desc: "打造“人工智能+工业互联网”赋能制造业转型发展新范式",
-    cover: banner3Url,
+    cover: news4,
+    link: "/news/3",
   },
 ];
 
@@ -324,14 +334,14 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
           <Transition name="heroText" mode="out-in">
             <div :key="activeIndex" class="hero__copy">
               <div class="section-kicker">{{ activeSlide.kicker }}</div>
-              <h1 class="hero__title">
+              <h3 class="hero__title">
                 {{ activeSlide.headline1 }}<br />
                 {{ activeSlide.headline2Before
                 }}<span class="hero__em">{{
                   activeSlide.headline2Emphasis
                 }}</span
                 >{{ activeSlide.headline2After }}
-              </h1>
+              </h3>
               <p class="hero__desc muted">{{ activeSlide.desc }}</p>
               <div class="hero__cta">
                 <RouterLink class="btn btn-primary" to="/contact"
@@ -340,21 +350,18 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
                 <RouterLink class="btn btn-ghost" to="/solutions"
                   >查看解决方案</RouterLink
                 >
-                <!-- <RouterLink class="btn btn-link" to="/products"
-                  >了解产品 →</RouterLink
-                > -->
               </div>
             </div>
           </Transition>
 
-          <div class="hero__stats">
+          <!-- <div class="hero__stats">
             <div v-for="item in highlights" :key="item.label" class="stat">
               <div class="stat__value">
                 <CountUp :end="item.end" :suffix="item.suffix" />
               </div>
               <div class="stat__label muted">{{ item.label }}</div>
             </div>
-          </div>
+          </div> -->
 
           <div class="hero__controls" aria-label="首页轮播控制">
             <div class="dots" role="tablist" aria-label="轮播指示器">
@@ -383,8 +390,8 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
         <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 class="h2" style="padding: 0 30px; color: #696969">
+              数据驱动、形成油气价值闭环
             </h2>
             <img src="../assets/images/title2.png" alt="" />
           </div>
@@ -430,8 +437,8 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
           <div>
             <div style="display: flex; align-items: center">
               <img src="../assets/images/title1.png" alt="" />
-              <h2 class="h2" style="padding: 0 10px; color: #696969">
-                覆盖油田生产全链路
+              <h2 class="h2" style="padding: 0 30px; color: #696969">
+                覆盖油气生产全链路
               </h2>
               <img src="../assets/images/title2.png" alt="" />
             </div>
@@ -467,7 +474,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
         <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 class="h2" style="padding: 0 30px; color: #696969">
               面向场景的可复制实践
             </h2>
             <img src="../assets/images/title2.png" alt="" />
@@ -621,7 +628,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
                 class="news-featured-item"
                 :delay="80 + idx * 60"
               >
-                <RouterLink class="news-featured-link" to="/news">
+                <RouterLink class="news-featured-link" :to="n.link">
                   <div class="news-featured-image-wrapper">
                     <img
                       :src="n.cover"
@@ -673,7 +680,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
           <!-- 右侧：市场活动 -->
           <div class="market-column">
             <div style="display: flex; justify-content: space-between">
-              <h3>市场活动</h3>
+              <h3>行业知识</h3>
               <RouterLink
                 class="btn btn-link"
                 to="/news"
@@ -689,7 +696,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
               class="market-activity"
               :delay="80 + idx * 60"
             >
-              <RouterLink class="market-activity-link" to="/news">
+              <RouterLink class="market-activity-link" :to="activity.link">
                 <div class="market-activity-image-wrapper">
                   <img
                     :src="activity.cover"
@@ -733,33 +740,6 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
         </div>
       </div>
     </section>
-
-    <!-- <section class="section">
-      <div class="container cta">
-        <Reveal
-          as="div"
-          class="cta__card card hover-lift"
-          :delay="0"
-          :style="{ '--cta-bg': `url(${ctaBgUrl})` }"
-        >
-          <div class="cta__pad">
-            <div class="cta__title">让油田数据真正“可用、可管、可运营”</div>
-            <div class="muted">
-              我们可以基于你的油田业务现状，给出 2–4
-              周可落地的试点方案与演示环境。
-            </div>
-            <div class="cta__btns">
-              <RouterLink class="btn btn-primary" to="/contact"
-                >预约咨询</RouterLink
-              >
-              <RouterLink class="btn btn-ghost" to="/cases"
-                >参考案例</RouterLink
-              >
-            </div>
-          </div>
-        </Reveal>
-      </div>
-    </section> -->
   </div>
 </template>
 
@@ -804,7 +784,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
 
 .hero__title {
   margin-top: 14px;
-  font-size: 40px;
+  font-size: 35px;
   line-height: 1.12;
   letter-spacing: -0.03em;
 }
@@ -885,7 +865,7 @@ const partners = Array.from({ length: 12 }).map((_, idx) => ({
   margin-top: 14px;
   display: flex;
   position: relative;
-  left: 43%;
+  left: 40%;
   align-items: center;
   justify-content: center;
   gap: 10px;

src/views/ProductsView.vue

@@ -1,70 +1,237 @@
 <script setup>
-import PageHero from '../components/PageHero.vue'
+import PageHero from "../components/PageHero.vue";
+import { Icon } from "@iconify/vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 
-const modules = [
+const activeTab = ref("platform");
+const tabBarRef = ref(null);
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+const pillars = [
   {
-    title: '设备接入（IIoT）',
-    desc: '覆盖 PLC/仪表/传感器/网关等多类型设备，支持边缘计算、离线缓存与断点续传。',
-    points: ['协议适配与采集', '运行监控与告警', '远程运维与工单'],
+    key: "platform",
+    title: "工业互联网平台",
+    lead: "油气专属底座，打通“数采—数据—系统—AI”，为全场景应用落地提供稳定支撑。",
+    icon: "lucide:layers-3",
+    items: [
+      {
+        title: "油气专属底座 · 适配全场景需求",
+        desc: "聚焦油气领域专属场景，深度适配数采、大模型相关各类应用需求，可灵活承载勘探、开发等全环节数字化场景，贴合行业业务特性。",
+      },
+      {
+        title: "高兼容架构 · 打破系统壁垒",
+        desc: "采用高兼容技术架构，可无缝对接油气领域各类数采设备、现有系统及大模型应用，实现数据互通、系统联动，降低对接成本。",
+      },
+      {
+        title: "灵活可扩展 · 承载多元需求",
+        desc: "平台底座具备高度灵活性与可扩展性，可根据油气领域不同场景、不同需求，灵活承载数采、大模型相关各类数字化应用落地。",
+      },
+    ],
   },
   {
-    title: '工业数据治理',
-    desc: '沉淀可复用的数据资产：统一资产、口径与血缘，推动“可用数据”规模化生产。',
-    points: ['资产目录与标签', '数据质量与校验', '指标中心与口径管理'],
+    key: "equipment",
+    title: "设备管理",
+    lead: "围绕设备全生命周期，实现台账、巡检维保、预测维护与实时监控预警的闭环管理。",
+    icon: "lucide:cpu",
+    items: [
+      {
+        title: "全维度设备管理 · 筑牢管控基础",
+        desc: "依托平台底座，承载油气领域设备全生命周期管理场景，兼容各类数采设备，实现设备台账、参数信息统一管控，适配不同型号、不同环节油气设备，高效统筹设备资源。",
+      },
+      {
+        title: "智慧维保巡检 · 降低运维成本",
+        desc: "联动巡检、维保全流程，支持自定义巡检计划与维保流程，无缝对接现场数采数据，实现维保巡检标准化、规范化，减少人工冗余，提高运维效率。",
+      },
+      {
+        title: "预测性维护 · 防范设备风险",
+        desc: "借助平台大模型与数采技术支撑，实时分析设备运行数据，精准预测潜在故障并提前触发维护提醒，规避停机风险，降低故障损失。",
+      },
+      {
+        title: "实时监控预警 · 保障作业安全",
+        desc: "实时采集运行参数，实现设备状态可视化监控；异常情况快速预警、精准推送，适配油气现场复杂作业环境，筑牢安全生产防线。",
+      },
+    ],
   },
   {
-    title: '工业应用（低代码）',
-    desc: '面向生产、质量、能源与设备运维，提供组件库与模板，快速搭建可运营应用。',
-    points: ['表单/流程/看板', '权限与审计', '应用市场与复用'],
+    key: "production",
+    title: "生产管理",
+    lead: "面向油气生产项目，贯通任务、计划、数据与报表，提升协同效率与过程可控性。",
+    icon: "lucide:clipboard-check",
+    items: [
+      {
+        title: "项目任务管理 · 联动平台高效统筹",
+        desc: "承接油气领域生产项目全流程任务管理，无缝对接平台数据体系，实现任务分配、进度跟踪、闭环管理，统筹项目各环节，确保生产任务有序推进。",
+      },
+      {
+        title: "计划与实际联动 · 精准把控生产节奏",
+        desc: "基于平台数采能力，科学制定生产计划；同步对接生产实际数据，自动匹配计划与实际差异，实时调整生产安排，保障流程高效衔接。",
+      },
+      {
+        title: "自动报表生成 · 沉淀核心数据资产",
+        desc: "自动汇总数采数据、生产进度与任务完成情况，一键生成日报、月报等报表，减少人工录入，实现生产数据规范化保存与资产沉淀。",
+      },
+      {
+        title: "全流程数智赋能 · 提升生产整体效能",
+        desc: "深度联动平台数采与数据管理能力，打造生产计划、任务执行、数据统计全链条，减少人工冗余，提升协同效率，实现数字化、智能化转型。",
+      },
+    ],
   },
   {
-    title: '智能分析（AI）',
-    desc: '结合工业机理与算法模型，落地质检、预测维护、异常检测与能效优化。',
-    points: ['视觉质检', '预测性维护', '异常与根因分析'],
+    key: "qhse",
+    title: "QHSE",
+    lead: "以合规为底线，以数据为驱动，实现风险隐患闭环与作业全过程可控，助力管理升级。",
+    icon: "lucide:shield-check",
+    items: [
+      {
+        title: "合规适配QHSE体系 · 筑牢安全底线",
+        desc: "全面贴合QHSE管理体系标准，覆盖风险隐患、作业许可、环境管理等核心模块，确保管理流程合规达标，契合油气行业安全环保监管要求，规避合规风险。",
+      },
+      {
+        title: "多系统集成联动 · 实现协同管控",
+        desc: "深度集成设备管理、生产管理等系统，实现数据互通、流程联动，同步设备状态、作业计划等数据，打破系统壁垒，构建安全+生产+设备一体化管控体系。",
+      },
+      {
+        title: "全维度风险防控 · 保障作业安全",
+        desc: "整合风险隐患管理、应急与健康管理、作业许可与过程监督等功能，借助数采与数据处理能力，实现风险精准识别、隐患闭环治理、作业全过程可控。",
+      },
+      {
+        title: "体系化支撑 · 赋能管理升级",
+        desc: "涵盖目标管理、培训与体系支持等模块，联动平台数据资产，实现目标拆解、培训落地与体系落地，推动从被动应对到主动防控转型，提升管理效能。",
+      },
+    ],
   },
-]
+];
 
 const deliver = [
-  { title: 'SaaS', desc: '开箱即用，按需订阅，快速试点与复制。' },
-  { title: '私有化', desc: '数据本地化部署，适配企业安全与合规要求。' },
-  { title: '混合云', desc: '核心数据本地，弹性算力上云，兼顾成本与性能。' },
-]
+  { title: "SaaS", desc: "开箱即用，按需订阅，快速试点与复制。" },
+  { title: "私有化", desc: "数据本地化部署，适配企业安全与合规要求。" },
+  { title: "混合云", desc: "核心数据本地，弹性算力上云，兼顾成本与性能。" },
+];
+
+function headerOffsetPx() {
+  const rootStyle = getComputedStyle(document.documentElement);
+  const headerVar = rootStyle.getPropertyValue("--header-h")?.trim();
+  const headerH = Number.parseFloat(headerVar || "72") || 72;
+  const tabH = tabBarRef.value?.getBoundingClientRect?.().height || 0;
+  return Math.round(headerH + tabH + 16);
+}
+
+function scrollToTab(key) {
+  const el = document.getElementById(`product-${key}`);
+  if (!el) return;
+  activeTab.value = key;
+
+  const offset = headerOffsetPx();
+  const y = el.getBoundingClientRect().top + window.scrollY - offset;
+  window.scrollTo({
+    top: Math.max(0, y),
+    behavior: prefersReducedMotion() ? "auto" : "smooth",
+  });
+}
+
+let observer = null;
+onMounted(() => {
+  const offset = headerOffsetPx();
+  observer = new IntersectionObserver(
+    (entries) => {
+      const visible = entries
+        .filter((e) => e.isIntersecting)
+        .sort(
+          (a, b) => (b.intersectionRatio || 0) - (a.intersectionRatio || 0),
+        )[0];
+      if (visible?.target?.id)
+        activeTab.value = visible.target.id.replace("product-", "");
+    },
+    {
+      root: null,
+      threshold: [0.25, 0.45, 0.6],
+      rootMargin: `-${offset}px 0px -55% 0px`,
+    },
+  );
+
+  for (const p of pillars) {
+    const el = document.getElementById(`product-${p.key}`);
+    if (el) observer.observe(el);
+  }
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect?.();
+  observer = null;
+});
 </script>
 
 <template>
-  <div>
+  <div class="productsView">
     <PageHero
-      kicker="产品矩阵"
-      title="工业互联网能力中台"
-      subtitle="以工业 PaaS 为底座，叠加 IIoT 接入、数据治理、低代码应用与智能分析，形成从“连接”到“运营”的全链路能力。"
+      kicker=""
+      title="油气行业数智产品矩阵"
+      subtitle="以工业互联网平台为底座，覆盖设备管理、生产管理与QHSE，贯通数采、数据、流程与AI，支撑从勘探开发到生产运营的全场景数字化。"
     >
       <template #actions>
-        <RouterLink class="btn btn-primary" to="/contact">获取产品资料</RouterLink>
-        <RouterLink class="btn btn-ghost" to="/solutions">查看方案</RouterLink>
+        <RouterLink
+          class="btn btn-primary"
+          style="border-radius: 0"
+          to="/contact"
+          >获取产品资料</RouterLink
+        >
       </template>
     </PageHero>
 
-    <section class="section">
-      <div class="container">
-        <div class="sectionHead">
-          <div>
-            <div class="section-kicker">模块能力</div>
-            <h2 class="h2">面向落地的可组合能力</h2>
-            <div class="muted">每个模块都可独立交付，也可与其他模块组合，形成端到端解决方案。</div>
-          </div>
+    <section class="section" style="padding-top: 0; margin-top: -10px">
+      <div>
+        <div
+          ref="tabBarRef"
+          class="tabBar"
+          role="tablist"
+          aria-label="产品域导航"
+        >
+          <button
+            v-for="p in pillars"
+            :key="p.key"
+            class="tabBtn"
+            :class="{ 'is-active': activeTab === p.key }"
+            type="button"
+            role="tab"
+            :aria-selected="activeTab === p.key ? 'true' : 'false'"
+            @click="scrollToTab(p.key)"
+          >
+            <span
+              class="tabText"
+              style="display: flex; align-items: center; gap: 10px"
+              ><Icon :icon="p.icon" width="18" height="18" aria-hidden="true" />
+              <span>{{ p.title }}</span></span
+            >
+          </button>
         </div>
 
-        <div class="grid grid-2 moduleGrid">
-          <div v-for="m in modules" :key="m.title" class="card card-pad moduleCard">
-            <div class="moduleTitle">{{ m.title }}</div>
-            <div class="muted moduleDesc">{{ m.desc }}</div>
-            <div class="modulePoints">
-              <div v-for="p in m.points" :key="p" class="modulePoint">
-                <span class="dot" aria-hidden="true"></span>
-                <span>{{ p }}</span>
+        <div class="productStac container">
+          <section
+            v-for="p in pillars"
+            :id="`product-${p.key}`"
+            :key="p.key"
+            class="productSection"
+          >
+            <header class="productHead">
+              <div class="productHeadTop">
+                <h2 class="productTitle">{{ p.title }}</h2>
+              </div>
+              <p class="productLead">{{ p.lead }}</p>
+            </header>
+
+            <div class="productBody">
+              <div v-for="it in p.items" :key="it.title" class="featureRow">
+                <div class="featureDot" aria-hidden="true"></div>
+                <div class="featureMain">
+                  <div class="featureTitle">{{ it.title }}</div>
+                  <div class="muted featureDesc">{{ it.desc }}</div>
+                </div>
               </div>
             </div>
-          </div>
+          </section>
         </div>
       </div>
     </section>
@@ -73,13 +240,21 @@ const deliver = [
       <div class="container">
         <div class="sectionHead">
           <div>
-            <div class="section-kicker">交付方式</div>
-            <h2 class="h2">灵活适配企业 IT 架构</h2>
+            <!-- <div class="section-kicker">交付方式</div> -->
+            <h2 class="h2">灵活适配企业IT与合规边界</h2>
+            <div class="muted">
+              支持试点快速落地，也支持规模化推广与安全合规的长期运行。
+            </div>
           </div>
         </div>
 
         <div class="grid grid-3">
-          <div v-for="d in deliver" :key="d.title" class="card card-pad deliverCard">
+          <div
+            v-for="d in deliver"
+            :key="d.title"
+            class="card card-pad deliverCard"
+            style="border: none; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05)"
+          >
             <div class="deliverTitle">{{ d.title }}</div>
             <div class="muted">{{ d.desc }}</div>
           </div>
@@ -90,6 +265,13 @@ const deliver = [
 </template>
 
 <style scoped>
+/* 在 <style scoped> 内部添加以下内容 */
+
+.productsView {
+  --ink: rgba(2, 6, 23, 0.92);
+  --tab-bg: rgba(255, 255, 255, 0.92);
+}
+
 .sectionHead {
   display: flex;
   align-items: flex-end;
@@ -98,39 +280,205 @@ const deliver = [
   margin-bottom: 16px;
 }
 
-.moduleGrid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.productStac {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
-.moduleTitle {
-  font-weight: 900;
-  letter-spacing: -0.02em;
-}
+/* Remove PageHero gradients for this page */
+:deep(.pageHero) {
+  background-image: url("../assets/images/bg3.png");
 
-.moduleDesc {
-  margin-top: 8px;
+  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;
 }
 
-.modulePoints {
-  margin-top: 12px;
+.tabBar {
+  position: sticky;
+  top: var(--header-h);
+  padding: 0 30px;
+  z-index: 20;
   display: grid;
-  gap: 10px;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0px;
+  background: #eef5f8;
+  margin: 10px 0 18px;
+  height: 80px;
+  border: 0;
+  border-radius: 0;
 }
 
-.modulePoint {
-  display: flex;
+.tabBtn {
+  height: 80px;
+  font-size: 20px;
+  border: 0;
+  background: #eef5f8;
+  box-shadow: var(--tab-shadow);
+  padding: 0 50px;
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 10px;
   color: var(--slate-700);
-  font-weight: 600;
+
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.tabBtn.is-active {
+  color: var(--brand-700);
+  background-color: #fff;
+}
+
+.tabBtn:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px rgba(37, 99, 235, 0.24),
+    var(--tab-shadow-hover);
 }
 
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--brand-600);
-  box-shadow: 0 8px 14px rgba(29, 78, 216, 0.20);
+.tabText {
+  display: inline-block;
+  white-space: nowrap;
+  padding-bottom: 10px;
+  background-image: linear-gradient(currentColor, currentColor);
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 0 2px;
+  transition: background-size 160ms ease;
+}
+
+.tabBtn.is-active .tabText {
+  background-size: 100% 2px;
+}
+
+.productStack {
+  display: grid;
+  gap: 26px;
+}
+
+.productSection {
+  scroll-margin-top: calc(var(--header-h) + 84px);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  margin-top: 50px;
+}
+
+.productHead {
+  padding: 18px 18px 14px;
+
+  text-align: center;
+}
+
+.productHeadTop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.productBadge {
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  color: rgba(2, 6, 23, 0.65);
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  padding: 6px 10px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.productTitle {
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  font-size: 30px;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.productLead {
+  margin-top: 10px;
+  max-width: 92ch;
+
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.productBody {
+  padding: 10px 2px 6px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.featureRow {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  align-items: start;
+  gap: 16px;
+  padding: 22px 22px;
+  border: 0;
+  /* border-radius: 18px; */
+  background: #fff;
+  box-shadow: 0 16px 42px rgba(2, 6, 23, 0.12);
+  min-height: 178px;
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.featureRow:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 22px 58px rgba(2, 6, 23, 0.16);
+}
+
+.featureDot {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #0766cd, #0d4a9e);
+  box-shadow:
+    0 10px 22px rgba(10, 71, 156, 0.25),
+    inset 0 0 0 2px rgba(255, 255, 255, 0.85);
+  margin-top: 4px;
+}
+
+.featureMain {
+  min-width: 0;
+}
+
+.featureTitle {
+  letter-spacing: -0.01em;
+  color: rgba(2, 6, 23, 0.9);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.featureDesc {
+  margin-top: 10px;
+  line-height: 1.75;
+  color: #666666;
+  text-align: left;
 }
 
 .deliverTitle {
@@ -139,9 +487,40 @@ const deliver = [
 }
 
 @media (max-width: 960px) {
-  .moduleGrid {
+  .sectionHead {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .tabBar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .productBody {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .productBody {
     grid-template-columns: 1fr;
   }
 }
-</style>
 
+@media (prefers-reduced-motion: reduce) {
+  .tabBtn {
+    transition: none !important;
+    transform: none !important;
+  }
+
+  .tabText {
+    transition: none !important;
+  }
+
+  .featureRow {
+    transition: none !important;
+    transform: none !important;
+  }
+}
+</style>

src/views/SolutionsView.vue

@@ -1,93 +1,228 @@
 <script setup>
-import PageHero from '../components/PageHero.vue'
-import solutionsBgUrl from '../assets/images/bg.jpg?url'
-import Reveal from '../components/motion/Reveal.vue'
+import PageHero from "../components/PageHero.vue";
+import solutionsBgUrl from "../assets/images/bg.jpg?url";
+import Reveal from "../components/motion/Reveal.vue";
 
-const solutions = [
-  {
-    title: '离散制造 · 质量与效率提升',
-    desc: '聚焦工序追溯、质量闭环与设备稳定性，提升良率与交付稳定性。',
-    scenes: ['工序追溯与过程控制', 'OEE 与停机分析', '质量异常闭环与 8D'],
-  },
-  {
-    title: '流程工业 · 能效与安全协同',
-    desc: '围绕工艺优化与运行安全，形成指标体系与异常分析闭环。',
-    scenes: ['能耗监测与对标', '工艺参数波动预警', '装置运行监控与告警'],
-  },
-  {
-    title: '园区与能源 · 运营可视化',
-    desc: '统一园区数据与应用入口，联动安环、能耗、资产与运维。',
-    scenes: ['园区综合态势大屏', '能源计量与分摊', '设备巡检与工单'],
-  },
+import { Icon } from "@iconify/vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+
+const activeTab = ref("platform");
+const tabBarRef = ref(null);
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+const pillars = [
   {
-    title: '供应链协同 · 透明与协同',
-    desc: '打通订单、库存与交付状态，提升响应速度与协同效率。',
-    scenes: ['订单跟踪与交付预警', '库存可视化与周转分析', '供应商协同门户'],
+    key: "platform",
+    title: "设备升级改造能力",
+    lead: "油气专属底座，打通“数采—数据—系统—AI”，为全场景应用落地提供稳定支撑。",
+    icon: "lucide:layers-3",
+    items: [
+      {
+        title: "全景设备升级 适配平台接入",
+        desc: "依托工业互联网平台底座，提供油气领域全类型设备升级改造服务，针对老旧设备、传统设备，完成仪器仪表升级、PLC控制系统改造或加装，确保改造后设备可无缝接入平台，打通设备与平台的数据联通通道，为后续智能管控奠定基础",
+      },
+      {
+        title: "实时数采远程管控 提升作业便捷度",
+        desc: "通过设备升级改造，结合平台数采能力，实现现场设备运行数据实时采集、同步上传，打破现场操作局限，支持远程对设备进行控制、参数调试，无需现场值守，降低人工成本，提升设备运维与操作的便捷性、高效性。",
+      },
+      {
+        title: "AI大模型赋能  智能动态调参",
+        desc: "升级后的设备联动工业互联网平台AI大模型算法，基于实时采集的设备运行数据，进行智能分析、精准研判，自动输出动态调参建议或完成自动调参，优化设备运行状态，确保设备始终处于最佳运行工况，提升运行效率。",
+      },
+      {
+        title: "设备专项赋能 预测性维护",
+        desc: "针对油气领域部分核心设备，在升级改造基础上，结合平台数据处理与大模型能力，实时监测运行参数，精准预判设备潜在故障、损耗情况，提前触发维护提醒，实现预测性维护，减少停机损失，延长设备使用寿命。",
+      },
+    ],
   },
   {
-    title: '碳管理 · 合规披露与减排',
-    desc: '以数据治理为基础，构建碳核算、减排评估与合规披露。',
-    scenes: ['组织/产品碳核算', '减排项目评估', '合规披露与审计留痕'],
+    key: "equipment",
+    title: "智慧注气",
+    lead: "围绕设备全生命周期，实现台账、巡检维保、预测维护与实时监控预警的闭环管理。",
+    icon: "lucide:cpu",
+    items: [
+      {
+        title: "老旧设备升级 筑牢无人值守基础",
+        desc: "依托工业互联网平台底座，针对油气注气领域老旧设备，开展专项升级改造，加装远程控制器、智能阀门等核心组件，完成设备智能化升级，打破传统人工操作局限，为注气现场无人值守搭建硬件支撑，确保设备可无缝接入平台实现协同管控。",
+      },
+      {
+        title: "实时数据采集 精准把控运行状态",
+        desc: "升级后的注气设备联动平台数采能力，实时采集现场压力、温度、流量等核心运行参数，同步上传至工业互联网平台，实现参数实时可视化监控，全面掌握注气全流程运行状态，为无人值守下的智能调控提供精准数据支撑。",
+      },
+      {
+        title: "智能动态调参 实现无人管控",
+        desc: "依托工业互联网平台算法能力，基于实时采集的运行数据，自动分析注气工况，动态调整注入参数，无需人工现场操作，真正实现注气现场无人少人值守，大幅减少人工干预，确保注气过程稳定、高效、精准。",
+      },
+      {
+        title: "降本增效保安全 赋能场景升级",
+        desc: "通过无人值守模式，大幅减少现场值守人员，降低人力成本；智能动态调参优化注气效率，提升作业产能；减少人员现场作业频次，规避现场安全风险，实现“降本、增效、保安全”三重价值，推动注气场景数字化、智能化转型。",
+      },
+    ],
   },
   {
-    title: '设备运维 · 预测维护',
-    desc: '多源数据融合，落地预测性维护，降低停机与维护成本。',
-    scenes: ['多指标健康度', '故障预测与诊断', '备件与工单联动'],
+    key: "production",
+    title: "智慧钻井",
+    lead: "面向油气生产项目，贯通任务、计划、数据与报表，提升协同效率与过程可控性。",
+    icon: "lucide:clipboard-check",
+    items: [
+      {
+        title: "数据精准采集  筑牢钻井分析基础",
+        desc: "依托工业互联网平台数采能力，深度联动录井仪设备，实时采集钻井全流程工况数据，全面记录钻井过程中的各项核心参数，实现数据精准捕捉、实时上传、规范存储，为后续AI分析、钻井优化及完井报告生成，提供完整、可靠的数据支撑。",
+      },
+      {
+        title: "AI大模型深度赋能 精准分析钻井工况",
+        desc: "基于工业互联网平台AI大模型能力，对采集的录井数据进行深度挖掘、智能分析，精准识别钻井过程中的工况异常、参数偏差等问题，快速研判钻井态势，为钻井作业优化提供科学、精准的数据分析支撑，规避盲目操作风险。",
+      },
+      {
+        title: "钻井参数智能优化 提升钻井作业交通",
+        desc: "结合AI大模型的工况分析结果，联动工业互联网平台管控能力，为钻井现场提供精准的参数优化建议，指导现场调整钻井参数，优化钻井工艺，有效提升钻速、降低钻井损耗，助力钻井作业提质增效，契合油气勘探开发高效化需求。",
+      },
+      {
+        title: "智能生成完井报告 提升报告编制效率",
+        desc: "依托平台数据沉淀与AI处理能力，自动汇总钻井全流程录井数据、工况分析结果及优化记录，一键生成标准化完井报告，无需人工繁琐录入，大幅缩短报告编制周期，确保报告数据精准、内容规范，为钻井成果复盘、后续作业提供有力支撑。",
+      },
+    ],
   },
-]
-
-const approach = [
-  { step: '01', title: '梳理现状', desc: '明确目标与关键指标，识别可快速见效的试点场景。' },
-  { step: '02', title: '快速接入', desc: '优先打通关键设备与系统，形成可用数据最小闭环。' },
-  { step: '03', title: '治理沉淀', desc: '统一资产、口径与质量规则，沉淀可复用的数据资产。' },
-  { step: '04', title: '应用运营', desc: '以看板与流程闭环驱动持续改进，形成规模化复制能力。' },
-]
+];
+
+const deliver = [
+  { title: "SaaS", desc: "开箱即用，按需订阅，快速试点与复制。" },
+  { title: "私有化", desc: "数据本地化部署，适配企业安全与合规要求。" },
+  { title: "混合云", desc: "核心数据本地，弹性算力上云，兼顾成本与性能。" },
+];
+
+function headerOffsetPx() {
+  const rootStyle = getComputedStyle(document.documentElement);
+  const headerVar = rootStyle.getPropertyValue("--header-h")?.trim();
+  const headerH = Number.parseFloat(headerVar || "72") || 72;
+  const tabH = tabBarRef.value?.getBoundingClientRect?.().height || 0;
+  return Math.round(headerH + tabH + 16);
+}
+
+function scrollToTab(key) {
+  const el = document.getElementById(`product-${key}`);
+  if (!el) return;
+  activeTab.value = key;
+
+  const offset = headerOffsetPx();
+  const y = el.getBoundingClientRect().top + window.scrollY - offset;
+  window.scrollTo({
+    top: Math.max(0, y),
+    behavior: prefersReducedMotion() ? "auto" : "smooth",
+  });
+}
+
+let observer = null;
+onMounted(() => {
+  const offset = headerOffsetPx();
+  observer = new IntersectionObserver(
+    (entries) => {
+      const visible = entries
+        .filter((e) => e.isIntersecting)
+        .sort(
+          (a, b) => (b.intersectionRatio || 0) - (a.intersectionRatio || 0),
+        )[0];
+      if (visible?.target?.id)
+        activeTab.value = visible.target.id.replace("product-", "");
+    },
+    {
+      root: null,
+      threshold: [0.25, 0.45, 0.6],
+      rootMargin: `-${offset}px 0px -55% 0px`,
+    },
+  );
+
+  for (const p of pillars) {
+    const el = document.getElementById(`product-${p.key}`);
+    if (el) observer.observe(el);
+  }
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect?.();
+  observer = null;
+});
 </script>
 
 <template>
   <div>
     <PageHero
-      kicker="解决方案"
-      title="面向行业场景的可复制实践"
-      subtitle="围绕制造、流程、园区、供应链、碳管理与运维等场景，提供“平台能力 + 行业模板 + 交付方法”的一体化方案。"
+      kicker=""
+      title="油气行业数智产品矩阵"
+      subtitle="以工业互联网平台为底座，覆盖设备管理、生产管理与QHSE，贯通数采、数据、流程与AI，支撑从勘探开发到生产运营的全场景数字化。"
     >
       <template #actions>
-        <RouterLink class="btn btn-primary" to="/contact">获取方案白皮书</RouterLink>
-        <RouterLink class="btn btn-ghost" to="/cases">参考案例</RouterLink>
+        <RouterLink
+          class="btn btn-primary"
+          style="border-radius: 0"
+          to="/contact"
+          >获取产品资料</RouterLink
+        >
       </template>
     </PageHero>
 
-    <section class="section">
-      <div class="container">
-        <Reveal as="div" class="sectionHead" :delay="0">
-          <div>
-            <div class="section-kicker">方案清单</div>
-            <h2 class="h2">从试点到复制的交付体系</h2>
-          </div>
-        </Reveal>
+    <section class="section" style="padding-top: 0; margin-top: -10px">
+      <div>
+        <div
+          ref="tabBarRef"
+          class="tabBar"
+          role="tablist"
+          aria-label="产品域导航"
+        >
+          <button
+            v-for="p in pillars"
+            :key="p.key"
+            class="tabBtn"
+            :class="{ 'is-active': activeTab === p.key }"
+            type="button"
+            role="tab"
+            :aria-selected="activeTab === p.key ? 'true' : 'false'"
+            @click="scrollToTab(p.key)"
+          >
+            <span
+              class="tabText"
+              style="display: flex; align-items: center; gap: 10px"
+              ><Icon :icon="p.icon" width="18" height="18" aria-hidden="true" />
+              <span>{{ p.title }}</span></span
+            >
+          </button>
+        </div>
 
-        <div class="grid grid-3">
-          <Reveal
-            v-for="(s, idx) in solutions"
-            :key="s.title"
-            as="div"
-            class="card card-pad solutionCard hover-lift"
-            :delay="60 + idx * 70"
+        <div class="productStac container">
+          <section
+            v-for="p in pillars"
+            :id="`product-${p.key}`"
+            :key="p.key"
+            class="productSection"
           >
-            <div class="solutionTitle">{{ s.title }}</div>
-            <div class="muted">{{ s.desc }}</div>
-            <div class="solutionScenes">
-              <div v-for="sc in s.scenes" :key="sc" class="scene">
-                <span class="dot" aria-hidden="true"></span>
-                <span>{{ sc }}</span>
+            <header class="productHead">
+              <div class="productHeadTop">
+                <h2 class="productTitle">{{ p.title }}</h2>
+              </div>
+              <p class="productLead">{{ p.lead }}</p>
+            </header>
+
+            <div class="productBody">
+              <div v-for="it in p.items" :key="it.title" class="featureRow">
+                <div class="featureDot" aria-hidden="true"></div>
+                <div class="featureMain">
+                  <div class="featureTitle">{{ it.title }}</div>
+                  <div class="muted featureDesc">{{ it.desc }}</div>
+                </div>
               </div>
             </div>
-          </Reveal>
+          </section>
         </div>
       </div>
     </section>
 
-    <section class="section section--soft solutionsBg" :style="{ '--solutions-bg': `url(${solutionsBgUrl})` }">
+    <section
+      class="section section--soft solutionsBg"
+      :style="{ '--solutions-bg': `url(${solutionsBgUrl})` }"
+    >
       <div class="container">
         <Reveal as="div" class="sectionHead" :delay="0">
           <div>
@@ -168,7 +303,7 @@ const approach = [
 }
 
 .solutionsBg::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   background-image: var(--solutions-bg);
@@ -179,14 +314,278 @@ const approach = [
 }
 
 .solutionsBg::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(248, 250, 252, 0.92));
+  background: linear-gradient(
+    180deg,
+    rgba(248, 250, 252, 0.78),
+    rgba(248, 250, 252, 0.92)
+  );
 }
 
 .solutionsBg > .container {
   position: relative;
   z-index: 1;
 }
+
+.productsView {
+  --ink: rgba(2, 6, 23, 0.92);
+  --tab-bg: rgba(255, 255, 255, 0.92);
+}
+
+.sectionHead {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 16px;
+}
+
+.productStac {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+/* Remove PageHero gradients for this page */
+:deep(.pageHero) {
+  border-bottom: none;
+}
+
+.tabBar {
+  position: sticky;
+  top: var(--header-h);
+  padding: 0 30px;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0px;
+  background: #eef5f8;
+  margin: 10px 0 18px;
+  height: 80px;
+  border: 0;
+  border-radius: 0;
+}
+
+.tabBtn {
+  height: 80px;
+  font-size: 20px;
+  border: 0;
+  background: #eef5f8;
+  box-shadow: var(--tab-shadow);
+  padding: 0 50px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: var(--slate-700);
+
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.tabBtn.is-active {
+  color: var(--brand-700);
+  background-color: #fff;
+}
+
+.tabBtn:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px rgba(37, 99, 235, 0.24),
+    var(--tab-shadow-hover);
+}
+
+.tabText {
+  display: inline-block;
+  white-space: nowrap;
+  padding-bottom: 10px;
+  background-image: linear-gradient(currentColor, currentColor);
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 0 2px;
+  transition: background-size 160ms ease;
+}
+
+.tabBtn.is-active .tabText {
+  background-size: 100% 2px;
+}
+
+.productStack {
+  display: grid;
+  gap: 26px;
+}
+
+.productSection {
+  scroll-margin-top: calc(var(--header-h) + 84px);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  margin-top: 50px;
+}
+
+.productHead {
+  padding: 18px 18px 14px;
+
+  text-align: center;
+}
+
+.productHeadTop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.productBadge {
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  color: rgba(2, 6, 23, 0.65);
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  padding: 6px 10px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.productTitle {
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  font-size: 30px;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.productLead {
+  margin-top: 10px;
+  max-width: 92ch;
+
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.productBody {
+  padding: 10px 2px 6px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.featureRow {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  align-items: start;
+  gap: 16px;
+  padding: 22px 22px;
+  border: 0;
+  /* border-radius: 18px; */
+  background: #fff;
+  box-shadow: 0 16px 42px rgba(2, 6, 23, 0.12);
+  min-height: 178px;
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.featureRow:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 22px 58px rgba(2, 6, 23, 0.16);
+}
+
+.featureDot {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #22c55e, #16a34a);
+  box-shadow:
+    0 10px 22px rgba(34, 197, 94, 0.25),
+    inset 0 0 0 2px rgba(255, 255, 255, 0.85);
+  margin-top: 4px;
+}
+
+.featureMain {
+  min-width: 0;
+}
+
+.featureTitle {
+  letter-spacing: -0.01em;
+  color: rgba(2, 6, 23, 0.9);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.featureDesc {
+  margin-top: 10px;
+  line-height: 1.75;
+  color: #666666;
+  text-align: left;
+}
+
+.deliverTitle {
+  font-weight: 900;
+  margin-bottom: 6px;
+}
+
+@media (max-width: 960px) {
+  .sectionHead {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .tabBar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .productBody {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .productBody {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tabBtn {
+    transition: none !important;
+    transform: none !important;
+  }
+
+  .tabText {
+    transition: none !important;
+  }
+
+  .featureRow {
+    transition: none !important;
+    transform: none !important;
+  }
+}
+
+:deep(.pageHero) {
+  background-image: url("../assets/images/bg4.png");
+
+  background-size: cover, cover;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+  background-blend-mode: overlay;
+  color: #111;
+  padding: 80px 0;
+}
+:deep(.pageHero__subtitle) {
+  color: #4f5055;
+}
 </style>

src/views/news/new1.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="container">
+    <div class="news-detail-page">
+      <!-- 面包屑导航 -->
+      <div class="breadcrumb">
+        <span class="breadcrumb-item" style="cursor: pointer">首页</span>
+        <span class="breadcrumb-separator">&gt;</span>
+        <span class="breadcrumb-item">新闻动态</span>
+        <span class="breadcrumb-separator">&gt;</span>
+        <span class="breadcrumb-item">行业知识</span>
+      </div>
+
+      <!-- 新闻标题 -->
+      <h1 class="news-title">{{ news.title }}</h1>
+
+      <!-- 发布信息 -->
+      <div class="news-meta">
+        <span class="meta-date">{{ news.date }}</span>
+        <span class="meta-category">分类：{{ news.category }}</span>
+      </div>
+
+      <!-- 分隔线 -->
+      <div class="divider"></div>
+
+      <!-- 新闻内容 -->
+      <div class="news-content">
+        <p>
+          随着全球能源行业数字化转型的深入推进，油气田智能化管理正从概念走向实践。近年来，以人工智能、大数据、物联网为代表的新一代信息技术与油气生产场景加速融合，设备管理系统作为安全生产的关键一环，正经历着从"被动维修"到"主动预警"的根本性变革。通过在线状态智能分析和隐患早期预警，油气企业正在构筑更加安全、高效的生产防线。
+        </p>
+
+        <h4>多维感知：让设备"开口说话"</h4>
+
+        <p>
+          在传统的油气生产场景中，设备运行状态往往依赖人工巡检和经验判断。如今，这一局面正在被彻底改写。
+        </p>
+
+        <p>
+          走进中原油田普光分公司天然气净化厂，两位特殊的"员工"——5G
+          智能巡检机器人正沿着预定路线穿梭于联合装置之间，代替人工完成大量周期性、危险性、高强度的巡检工作。这是我国首个高含硫气田数智融合示范工程的一个缩影。通过对图像、声音、温度等多维数据的实时采集，机器人能够精准完成设备运行状态检测、仪表读数识别、现场环境安全感知等任务。
+        </p>
+
+        <p>
+          而在机器人无法到达的区域，5G
+          手持巡检终端和智能安全头盔则成为巡检人员的"第二双眼睛"。巡检任务自动下发，指导人员按时按点完成检查，所有数据实时回传，形成空地一体、人机协同的立体化监测网络。与此同时，14
+          座无人机机场、17 台无人机对 210
+          千米集输管道开展自动巡检，仿地飞行采集图像视频，对管道裸露、占压、地灾变化等隐患进行
+          AI 识别预警
+        </p>
+
+        <!-- 图片直接写在模板中 -->
+        <div class="news-image">
+          <img :src="newsImage" alt="新闻图片" />
+        </div>
+
+        <p>
+          这套多维巡检体系带来的效益是实实在在的：联合装置巡检减少8人，集输管道巡检减少20人，人工劳动强度降低30%，劳动生产率提升20%。巡检方式从“全人工”迈入“人工+机器人辅助”的新阶段。
+        </p>
+
+        <h4>智能分析：从“人找隐患”到“隐患找人”</h4>
+
+        <p>
+          在国家管网集团黄岛油库，智慧运营系统的启用让安全管理实现了从“事后处置”到“事前预防”的跨越。2024年6月23日，智慧油库平台发出提示：未参与外输的6016号储罐液位持续缓慢下降。每小时1毫米的差异，人工难以察觉，而管理系统却精准捕捉到了这一变化。经测试确认，这是8817号阀门发生轻微内漏。一次典型的“小切口预警”，避免了潜在的安全风险。
+        </p>
+
+        <p>
+          这套平台通过32条趋势判断规则，结合AI算法，实现对管线泄漏、液位异常、设备故障的实时监控。操作时间从小时级压缩至分钟级，异常检测精度提升至98%，误报率降低80%。
+        </p>
+
+        <p>
+          大庆石化的实践同样印证了智能分析的巨大潜力。仪表运维综合管理平台上线后，每天清晨，机动设备部高级主管高大勇的第一件事就是登录平台，检修数量、高频故障设备排名等信息一目了然。“这就像给全公司设备做‘每日晨检’，任何异常都难逃它的‘火眼金睛’。”高大勇说。
+        </p>
+
+        <p>
+          让平台“一战成名”的，是炼油区的一次精准“诊疗”。高频检修统计模块发现，烷基化装置闪蒸罐液位计在3个月内校表次数达26次。技术团队立即调取仪表历史档案与检修记录，联合属地单位展开“会诊”，彻底根治了仪表“顽疾”。平台自动提取设备检修数据生成可视化图表，实现了从“人找隐患”到“隐患找人”的转变。
+        </p>
+
+        <h4>预测维护：治“未病”而非等“生病”</h4>
+
+        <p>
+          设备的全生命周期健康管理，正在推动油气企业从被动维修走向预测性维护。
+        </p>
+
+        <p>
+          在大庆石化，仪表运维综合管理平台内置的“仪表失效数据库”与“定期维修维护工作清单”模块，为预知维修提供了重要支撑。前者自动生成失效趋势报告，为制定维护策略提供科学依据；后者提示定期维护内容，推动预防性维修落地。平台试运行以来，仪表专业主动维护作业量占比提升至30%以上。
+        </p>
+
+        <p>
+          设备维修中心设备三级工程师刘云宝对此深有感触：“不用等设备‘生病’了再抢救，每台设备都有持续更新的电子‘体检档案’，我们可以预判设备出现问题的高发期，提前介入。”
+        </p>
+
+        <p>
+          在胜利海洋钻井公司，自研的配件PMS管理系统借助数字化手段，每月平均节省18万元配件成本，库存配件储备从995项减至872项。通过将平台所有设备配件统一录入数据库，系统实现库存自动更新、出入库记录查询、低储报警和数据统计分析四大功能，库存储备一目了然。
+        </p>
+
+        <div class="news-image">
+          <img src="../../assets/images/news2.jpg" alt="新闻图片" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import newsImage from "@/assets/images/news1.jpg";
+
+const news = ref({
+  title: "AI 设备管理系统实现在线状态智能分析，隐患早发现",
+  date: "2026-01-16 09:35:53",
+  category: "行业知识",
+});
+</script>
+
+<style scoped>
+.news-detail-page {
+  max-width: 1200px;
+  margin: 50px auto;
+  padding: 40px 50px;
+  background-color: #fff;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+.breadcrumb {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.breadcrumb-item {
+  display: inline-block;
+  margin-right: 10px;
+  transition: all 0.3s ease;
+}
+
+.breadcrumb-item:hover {
+  color: #04439a;
+}
+
+.breadcrumb-item:last-child {
+  color: #333;
+}
+
+.breadcrumb-separator {
+  margin: 0 5px;
+}
+
+.news-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+  line-height: 1.4;
+}
+
+.news-meta {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.meta-date,
+.meta-category {
+  margin-right: 20px;
+}
+
+.divider {
+  border-top: 1px solid #e0e0e0;
+  margin: 30px 0;
+}
+
+.news-content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: rgb(63, 65, 80);
+}
+
+.news-content p {
+  margin: 20px 0;
+}
+
+.news-content h4 {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin: 30px 0 15px;
+}
+
+.news-content strong {
+  color: #000;
+  font-weight: bold;
+}
+
+.news-image {
+  margin: 30px 0;
+  text-align: center;
+}
+
+.news-image img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .news-detail-page {
+    padding: 20px;
+  }
+
+  .breadcrumb {
+    font-size: 12px;
+  }
+
+  .news-title {
+    font-size: 24px;
+  }
+
+  .news-meta {
+    font-size: 12px;
+  }
+}
+</style>

src/views/news/new2.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="container">
+    <div class="news-detail-page">
+      <!-- 面包屑导航 -->
+      <div class="breadcrumb">
+        <span class="breadcrumb-item" style="cursor: pointer">首页</span>
+        <span class="breadcrumb-separator">&gt;</span>
+        <span class="breadcrumb-item">新闻动态</span>
+        <span class="breadcrumb-separator">&gt;</span>
+        <span class="breadcrumb-item">行业知识</span>
+      </div>
+
+      <!-- 新闻标题 -->
+      <h1 class="news-title">{{ news.title }}</h1>
+
+      <!-- 发布信息 -->
+      <div class="news-meta">
+        <span class="meta-date">{{ news.date }}</span>
+        <span class="meta-category">分类：{{ news.category }}</span>
+      </div>
+
+      <!-- 分隔线 -->
+      <div class="divider"></div>
+
+      <!-- 新闻内容 -->
+      <div class="news-content">
+        <p>
+          随着石化行业向高端化、绿色化、智能化方向迈进，设备管理作为安全生产的“压舱石”，正面临着前所未有的挑战与机遇。传统运维模式中“人工依赖度高、数据实时性不足、故障预警滞后”的三大痛点，长期困扰着企业，导致维护成本攀升、非计划停机频发。在此背景下，设备完整性管理的数字化转型不再是“选择题”，而是关乎企业生存与竞争力的“必答题”。
+        </p>
+
+        <h4>一、传统运维之困：三大痛点亟待破解</h4>
+
+        <p>
+          在传统的石化设备管理场景中，经验主导的模式往往让企业陷入被动。
+          “过去检修靠经验摸索，效率低还易误判。”一位一线维修人员道出了行业普遍困境。传统模式下，设备巡检依赖人工定时定点，数据记录停留在纸质流转，故障识别依靠老师傅的“望闻问切”。这种方式的局限性显而易见：人工判断主观性强，难以保证准确率；数据无法实时回传，隐患发现时往往已造成损失；故障预警严重滞后，维修模式停留在“事后救火”。
+        </p>
+
+        <p>
+          更深层的矛盾在于管理流程的碎片化。设备台账、巡检记录、维修档案散落在不同部门、不同系统中，形成一个个“数据孤岛”。中韩石化在改革前曾面临设备缺陷平均响应时间高达7.6小时的窘境，跨专业协作效率低下成为制约运维效能的瓶颈。正如业内专家所言：“流程碎片化、风险预判难、权责不清晰，正在消耗企业的安全边际和经济效益。”
+        </p>
+
+        <h4>二、数字化破局：构建设备全生命周期管理体系</h4>
+
+        <p>
+          破解上述困局，关键在于构建覆盖设备全生命周期的数字化管理体系。这一体系的核心思路可以概括为“三个转变”：从经验驱动向数据驱动转变，从被动响应向主动预防转变，从单点管理向全流程闭环转变。
+        </p>
+
+        <p>
+          全生命周期档案是管理的基石。榆林炼油厂在构建设备完整性管理体系时，为厂区内3.5万余台套设备逐一建立全生命周期精准档案，实现设备信息“一机一档、动态更新”。围绕设备规划、采购、安装、运行、维护、报废等关键环节，落地成型17个核心管理模块，最终搭建起全流程闭环管理框架。江汉盐化工同样将10744台套设备全部上线，逐一核实型号、技术参数等信息，建立起详实完备的电子台账，实现了设备信息“一键查询、全程追溯”。
+        </p>
+
+        <p>
+          分级分类管理让资源配置更精准。基于设备在生产中的重要程度、故障影响范围等因素，将设备划分为关键设备（A类）、重要设备（B类）、一般设备（C类）三类，明确不同级别设备的管理标准和责任主体。盛虹石化的实践印证了这一思路的价值——其柴油加氢裂化装置往复式压缩机通过精细化管理，单次运行时长达到17918小时，是行业惯例8400小时的2.13倍，年度维护费用从260万元降至150万元。
+        </p>
+
+        <div class="news-image">
+          <img src="../../assets/images/news3.png" alt="新闻图片" />
+        </div>
+
+        <h4>三、智能诊断：让设备隐患“无处遁形”</h4>
+
+        <p>
+          在线监测系统如同设备的“核磁共振”。江汉盐化工为400多台套A类设备加装在线监测系统，实时监测设备震动和温度，一旦出现异常便第一时间发出预警。今年1月，漂粉精冷冻站冷水机组轴承润滑不良，系统在缓慢劣化初期即发出预警，工作人员及时补充润滑油，避免了一次潜在的非计划停车。沧州炼化则通过联动使用班组机泵监测管理系统、转动设备预防性维修决策系统和泵群在线监测系统，构建起“基础数据采集—趋势智能预判—深度故障分析”的三级防护体系。当预防性维修决策系统识别到蒸发塔回流泵轴承检测指标异常升高趋势时，在未触发报警值阶段便提出检修建议，最终精准定位泵轴故障，实现预知性检修。
+        </p>
+
+        <p>
+          离线监测智能诊断填补了另一块拼图。对于大量未安装在线传感器的设备，兰州石化开发出国内首个适配离线监测数据的智能诊断模型。该模型采用模块化编程，将46个指标算子、16种常见故障诊断深度整合，可全面诊断离心泵、电动机的不平衡、不对中等核心故障，并针对滚动轴承细分故障类型。经历史故障数据验证，模型诊断准确率达83.3%，在300万吨/年重催装置140台设备上成功应用，累计故障报警11次。
+        </p>
+
+        <div class="news-image">
+          <img src="../../assets/images/new2.png" alt="新闻图片" />
+        </div>
+
+        <p>
+          从人工巡检到多维感知，从经验判断到数据驱动，从被动维修到预测维护——石化行业设备完整性管理的数字化转型，正在深刻改变生产方式。在这场变革中，每一台设备都成为会“说话”的安全哨兵，每一次隐患的早期发现都为安全生产筑牢防线。随着工业AI大模型、数字孪生等技术的持续突破，设备管理必将从“数字化”迈向“智能化”，为石化行业高质量发展注入源源不断的创新动力。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const news = ref({
+  title: "AI 设备管理系统实现在线状态智能分析，隐患早发现",
+  date: "2026-01-16 09:35:53",
+  category: "行业知识",
+});
+</script>
+
+<style scoped>
+.news-detail-page {
+  max-width: 1200px;
+  margin: 50px auto;
+  padding: 40px 50px;
+  background-color: #fff;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+.breadcrumb {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.breadcrumb-item {
+  display: inline-block;
+  margin-right: 10px;
+  transition: all 0.3s ease;
+}
+
+.breadcrumb-item:hover {
+  color: #04439a;
+}
+
+.breadcrumb-item:last-child {
+  color: #333;
+}
+
+.breadcrumb-separator {
+  margin: 0 5px;
+}
+
+.news-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+  line-height: 1.4;
+}
+
+.news-meta {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.meta-date,
+.meta-category {
+  margin-right: 20px;
+}
+
+.divider {
+  border-top: 1px solid #e0e0e0;
+  margin: 30px 0;
+}
+
+.news-content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: rgb(63, 65, 80);
+}
+
+.news-content p {
+  margin: 20px 0;
+}
+
+.news-content h4 {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin: 30px 0 15px;
+}
+
+.news-content strong {
+  color: #000;
+  font-weight: bold;
+}
+
+.news-image {
+  margin: 30px 0;
+  text-align: center;
+}
+
+.news-image img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .news-detail-page {
+    padding: 20px;
+  }
+
+  .breadcrumb {
+    font-size: 12px;
+  }
+
+  .news-title {
+    font-size: 24px;
+  }
+
+  .news-meta {
+    font-size: 12px;
+  }
+}
+</style>

src/views/news/new4.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="container">
+    <div class="news-detail-page">
+      <!-- 面包屑导航 -->
+      <div class="breadcrumb">
+        <span class="breadcrumb-item" style="cursor: pointer">首页</span>
+        <span class="breadcrumb-separator">&gt;</span>
+        <span class="breadcrumb-item">新闻动态</span>
+        <span class="breadcrumb-separator">&gt;</span>
+        <span class="breadcrumb-item">新闻资讯</span>
+      </div>
+
+      <!-- 新闻标题 -->
+      <h1 class="news-title">{{ news.title }}</h1>
+
+      <!-- 发布信息 -->
+      <div class="news-meta">
+        <span class="meta-date">{{ news.date }}</span>
+        <span class="meta-category">分类：{{ news.category }}</span>
+      </div>
+
+      <!-- 分隔线 -->
+      <div class="divider"></div>
+
+      <!-- 新闻内容 -->
+      <div class="news-content">
+        <p>
+          石油石化行业数字化转型的积极推动者——DeepOil宣布，其全新改版的油田数智化产品与方案展示门户正式上线运行。此次门户重构，是DeepOil在深耕油气智能化领域多年后的又一次品牌与服务双升级。新版门户以“让技术可见，让价值可感”为使命，通过颠覆性的界面设计、流畅的交互体验以及系统化的产品呈现，致力于为全球能源客户打造一站式、全景式的数智化创新视窗。
+        </p>
+
+        <h4>一、传统运维之困：三大痛点亟待破解</h4>
+
+        <p>
+          在传统的石化设备管理场景中，经验主导的模式往往让企业陷入被动。
+          “过去检修靠经验摸索，效率低还易误判。”一位一线维修人员道出了行业普遍困境。传统模式下，设备巡检依赖人工定时定点，数据记录停留在纸质流转，故障识别依靠老师傅的“望闻问切”。这种方式的局限性显而易见：人工判断主观性强，难以保证准确率；数据无法实时回传，隐患发现时往往已造成损失；故障预警严重滞后，维修模式停留在“事后救火”。
+        </p>
+
+        <p>
+          更深层的矛盾在于管理流程的碎片化。设备台账、巡检记录、维修档案散落在不同部门、不同系统中，形成一个个“数据孤岛”。中韩石化在改革前曾面临设备缺陷平均响应时间高达7.6小时的窘境，跨专业协作效率低下成为制约运维效能的瓶颈。正如业内专家所言：“流程碎片化、风险预判难、权责不清晰，正在消耗企业的安全边际和经济效益。”
+        </p>
+
+        <h4>二、数字化破局：构建设备全生命周期管理体系</h4>
+
+        <p>
+          破解上述困局，关键在于构建覆盖设备全生命周期的数字化管理体系。这一体系的核心思路可以概括为“三个转变”：从经验驱动向数据驱动转变，从被动响应向主动预防转变，从单点管理向全流程闭环转变。
+        </p>
+
+        <p>
+          全生命周期档案是管理的基石。榆林炼油厂在构建设备完整性管理体系时，为厂区内3.5万余台套设备逐一建立全生命周期精准档案，实现设备信息“一机一档、动态更新”。围绕设备规划、采购、安装、运行、维护、报废等关键环节，落地成型17个核心管理模块，最终搭建起全流程闭环管理框架。江汉盐化工同样将10744台套设备全部上线，逐一核实型号、技术参数等信息，建立起详实完备的电子台账，实现了设备信息“一键查询、全程追溯”。
+        </p>
+
+        <p>
+          分级分类管理让资源配置更精准。基于设备在生产中的重要程度、故障影响范围等因素，将设备划分为关键设备（A类）、重要设备（B类）、一般设备（C类）三类，明确不同级别设备的管理标准和责任主体。盛虹石化的实践印证了这一思路的价值——其柴油加氢裂化装置往复式压缩机通过精细化管理，单次运行时长达到17918小时，是行业惯例8400小时的2.13倍，年度维护费用从260万元降至150万元。
+        </p>
+
+        <div class="news-image">
+          <img src="../../assets/images/news3.png" alt="新闻图片" />
+        </div>
+
+        <h4>三、智能诊断：让设备隐患“无处遁形”</h4>
+
+        <p>
+          在线监测系统如同设备的“核磁共振”。江汉盐化工为400多台套A类设备加装在线监测系统，实时监测设备震动和温度，一旦出现异常便第一时间发出预警。今年1月，漂粉精冷冻站冷水机组轴承润滑不良，系统在缓慢劣化初期即发出预警，工作人员及时补充润滑油，避免了一次潜在的非计划停车。沧州炼化则通过联动使用班组机泵监测管理系统、转动设备预防性维修决策系统和泵群在线监测系统，构建起“基础数据采集—趋势智能预判—深度故障分析”的三级防护体系。当预防性维修决策系统识别到蒸发塔回流泵轴承检测指标异常升高趋势时，在未触发报警值阶段便提出检修建议，最终精准定位泵轴故障，实现预知性检修。
+        </p>
+
+        <p>
+          离线监测智能诊断填补了另一块拼图。对于大量未安装在线传感器的设备，兰州石化开发出国内首个适配离线监测数据的智能诊断模型。该模型采用模块化编程，将46个指标算子、16种常见故障诊断深度整合，可全面诊断离心泵、电动机的不平衡、不对中等核心故障，并针对滚动轴承细分故障类型。经历史故障数据验证，模型诊断准确率达83.3%，在300万吨/年重催装置140台设备上成功应用，累计故障报警11次。
+        </p>
+
+        <div class="news-image">
+          <img src="../../assets/images/new2.png" alt="新闻图片" />
+        </div>
+
+        <p>
+          从人工巡检到多维感知，从经验判断到数据驱动，从被动维修到预测维护——石化行业设备完整性管理的数字化转型，正在深刻改变生产方式。在这场变革中，每一台设备都成为会“说话”的安全哨兵，每一次隐患的早期发现都为安全生产筑牢防线。随着工业AI大模型、数字孪生等技术的持续突破，设备管理必将从“数字化”迈向“智能化”，为石化行业高质量发展注入源源不断的创新动力。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const news = ref({
+  title: "门户新版上线：油田数智化产品与方案展示",
+  date: "2026-01-16 09:35:53",
+  category: "新闻动态",
+});
+</script>
+
+<style scoped>
+.news-detail-page {
+  max-width: 1200px;
+  margin: 50px auto;
+  padding: 40px 50px;
+  background-color: #fff;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+.breadcrumb {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.breadcrumb-item {
+  display: inline-block;
+  margin-right: 10px;
+  transition: all 0.3s ease;
+}
+
+.breadcrumb-item:hover {
+  color: #04439a;
+}
+
+.breadcrumb-item:last-child {
+  color: #333;
+}
+
+.breadcrumb-separator {
+  margin: 0 5px;
+}
+
+.news-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+  line-height: 1.4;
+}
+
+.news-meta {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.meta-date,
+.meta-category {
+  margin-right: 20px;
+}
+
+.divider {
+  border-top: 1px solid #e0e0e0;
+  margin: 30px 0;
+}
+
+.news-content {
+  font-size: 16px;
+  line-height: 1.8;
+  color: rgb(63, 65, 80);
+}
+
+.news-content p {
+  margin: 20px 0;
+}
+
+.news-content h4 {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin: 30px 0 15px;
+}
+
+.news-content strong {
+  color: #000;
+  font-weight: bold;
+}
+
+.news-image {
+  margin: 30px 0;
+  text-align: center;
+}
+
+.news-image img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .news-detail-page {
+    padding: 20px;
+  }
+
+  .breadcrumb {
+    font-size: 12px;
+  }
+
+  .news-title {
+    font-size: 24px;
+  }
+
+  .news-meta {
+    font-size: 12px;
+  }
+}
+</style>