<template>
  <div class="page flex-col" id="top">
    <div class="group_1 flex-row justify-between">
      <div class="section_1 flex-col">
        <div class="section_2 flex-row">
          <img
            class="image_1"
            referrerpolicy="no-referrer"
            src="./assets/img/slice-3-black-1x.png"
            srcset="
              ./assets/img/slice-3-black-1x.png 1x,
              ./assets/img/slice-3-black-2x.png 2x,
              ./assets/img/slice-3-black-3x.png 3x
            "
          />
          <span class="text_1 nav-link" :class="{ 'nav-active': activeSection === 'top' }" data-spy="top" @click="scrollTo('top')">首页</span>
          <span class="text_2 nav-link" :class="{ 'nav-active': activeSection === 'about' }" data-spy="about" @click="scrollTo('about')">WithMind</span>
          <span class="text_3 nav-link" :class="{ 'nav-active': activeSection === 'skills' }" data-spy="skills" @click="scrollTo('skills')">Skills</span>
          <span class="text_4 nav-link" :class="{ 'nav-active': activeSection === 'platform' }" data-spy="platform" @click="scrollTo('platform')">创作平台</span>
          <span class="text_nav_practice nav-link" :class="{ 'nav-active': activeSection === 'practice' }" data-spy="practice" @click="scrollTo('practice')">应用实践</span>
          <span class="text_5 nav-link" :class="{ 'nav-active': activeSection === 'gateway' }" data-spy="gateway" @click="scrollTo('gateway')">模型网关</span>
          <div class="group_3 flex-col"></div>
        </div>
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="./assets/img/FigmaDDSSlicePNGfa4ede1cb67c8bb29fb955b805bb02d4.png"
        />
        <div class="section_5 flex-row justify-between" id="about">
          <div class="text-wrapper_1">
            <span class="text_6">关于&nbsp;</span>
            <img
              class="text_7 logo_about"
              referrerpolicy="no-referrer"
              src="./assets/img/slice-3-black-3x.png"
            />
          </div>
          <span class="text_8">
            WithMind&nbsp;以AI&nbsp;Agent为核心，构建专属AI能力体系，落地在企业本地、专属企业数据、持续自我迭代的全员AI赋能系统。依托本地私有Agent智能节点&nbsp;+&nbsp;企业私有知识库沉淀&nbsp;+&nbsp;四大行业成熟技能插件，真正实现：企业知识留得住、员工能力带得走、销售业绩涨得快、团队培训零成本。
          </span>
        </div>
        <div class="section_6 flex-row justify-between">
          <div class="image-text_1 flex-col justify-between">
            <div class="group_4 flex-col">
              <div class="box_3 flex-col">
                <div class="image-wrapper_1 flex-col">
                  <img
                    class="label_1"
                    referrerpolicy="no-referrer"
                    src="./assets/img/Slice_6@3x.png"
                  />
                </div>
              </div>
            </div>
            <div class="text-group_1 flex-col justify-between">
              <span class="text_9">降本：一个顶一个团队</span>
              <span class="text_10">无需再设专职策划、讲师或行政答疑岗，系统自动化处理；话术政策变更5分钟在线生效，无需研发介入，大幅减少重复性人力投入。</span>
            </div>
          </div>
          <div class="group_5 flex-col"></div>
          <div class="image-text_2 flex-col justify-between">
            <div class="block_1 flex-col">
              <div class="block_2 flex-col">
                <div class="image-wrapper_2 flex-col">
                  <img
                    class="label_2"
                    referrerpolicy="no-referrer"
                    src="./assets/img/Slice_7@3x.png"
                  />
                </div>
              </div>
            </div>
            <div class="text-group_2 flex-col justify-between">
              <span class="text_11">增效：能力统一升级</span>
              <span class="text_12">全员同步最优话术与知识库，新人一周即可具备成熟能力；系统自动推送最新优秀案例，团队能力始终拉齐，无短板员工。</span>
            </div>
          </div>
          <div class="group_6 flex-col"></div>
          <div class="image-text_3 flex-col justify-between">
            <div class="image-wrapper_3 flex-col">
              <img
                class="image_3"
                referrerpolicy="no-referrer"
                src="./assets/img/Slice_8@3x.png"
              />
            </div>
            <div class="text-group_3 flex-col justify-between">
              <span class="text_13">留资：企业资产沉淀</span>
              <span class="text_14">典型案例与处理流程一键归档，形成企业专属知识库；人员流动不带走经验，新员工可随时复用，内容随业务增长持续增值。</span>
            </div>
          </div>
          <div class="group_7 flex-col"></div>
          <div class="image-text_4 flex-col justify-between">
            <div class="image-wrapper_4 flex-col">
              <img
                class="image_4"
                referrerpolicy="no-referrer"
                src="./assets/img/Slice_9@3x.png"
              />
            </div>
            <div class="text-group_4 flex-col justify-between">
              <span class="text_15">安全：本地私有化部署</span>
              <span class="text_16">全部数据存于企业自有服务器，物理隔离公网，满足金融、政务等高合规要求；企业拥有完整权限与审计能力，安全自主可控。</span>
            </div>
          </div>
        </div>
        <div class="image-wrapper_5 flex-col">
          <img
            class="image_5"
            referrerpolicy="no-referrer"
            src="./assets/img/FigmaDDSSlicePNGace196b5119f6099423d6ad80890e799.png"
          />
        </div>
      </div>
      <img
        class="image_6"
        referrerpolicy="no-referrer"
        src="./assets/img/FigmaDDSSlicePNG9a319156e7bafe4887f1fbd806cdec9f.png"
      />
    </div>
    <div class="group_8 flex-row justify-between" id="platform">
      <div class="group_9 flex-col justify-between">
        <div class="section_7 flex-row justify-between">
          <div class="text-wrapper_2 flex-col justify-between">
            <span class="text_17">知识库：</span>
            <span class="text_18">让知识随时可用</span>
          </div>
          <img
            class="image_7"
            referrerpolicy="no-referrer"
            src="./assets/img/slice-15-1x.png"
            srcset="
              ./assets/img/slice-15-1x.png 1x,
              ./assets/img/slice-15-2x.png 2x,
              ./assets/img/slice-15-3x.png 3x
            "
          />
        </div>
        <span class="paragraph_1">
          不仅是资料存档，更是活化的第二大脑。
          <br />
          <br />
          知识支持自动抓取网页、文档、音视频与数据库内容，智能标签与向量检索让信息秒级定位；版本追溯、团队共编、权限分级，确保每一次更新都精准同步，沉淀为可复用的组织资产。
        </span>
      </div>
      <img
        class="image_8"
        referrerpolicy="no-referrer"
        src="./assets/img/knowledge-base.png"
      />
    </div>
    <div class="group_10 flex-row justify-between" id="agent">
      <img
        class="image_9"
        referrerpolicy="no-referrer"
        src="./assets/img/agent.png"
      />
      <div class="box_4 flex-col justify-between">
        <div class="group_11 flex-row justify-between">
          <div class="text-wrapper_3 flex-col justify-between">
            <span class="text_19">Agent：</span>
            <span class="text_20">让任务自动执行</span>
          </div>
          <div class="image-wrapper_6 flex-col">
            <img
              class="image_10"
              referrerpolicy="no-referrer"
              src="./assets/img/Slice_16@3x.png"
            />
          </div>
        </div>
        <span class="paragraph_2">
          不只是问答机器人，更是你的自动执行伙伴。
          <br />
          <br />
          可设定目标、拆分任务、调用工具（如搜索、API、代码执行），主动生成周报、分析数据、起草脚本，甚至根据知识库变化动态调整策略；支持多轮对话与意图识别，让复杂工作流像聊天一样自然流转。
        </span>
      </div>
    </div>
    <div class="group_12 flex-row justify-between" id="media">
      <div class="block_3 flex-col justify-between">
        <div class="group_13 flex-row justify-between">
          <div class="text-wrapper_4 flex-col justify-between">
            <span class="text_21">新媒体应用：</span>
            <span class="text_22">让传播精准触达</span>
          </div>
          <div class="group_14 flex-col"><div class="box_5 flex-col"></div></div>
        </div>
        <span class="paragraph_3">
          不止于发布，更是数据驱动的运营中枢。
          <br />
          <br />
          将图文、视频、互动组件适配至公众号、抖音、小红书等平台，内置热点追踪、AI润色与多版本标题生成；发布后实时回传阅读、转化、互动数据，反哺知识库与Agent策略，形成“创作-分发-优化”的智能增长飞轮。
        </span>
      </div>
      <img
        class="image_11"
        referrerpolicy="no-referrer"
        src="./assets/img/new-media.png"
      />
    </div>
    <div class="practice_text_wrapper_13 flex-row" id="practice"><span class="practice_text_23">应用实践</span></div>
    <div class="practice_box_23 flex-row justify-between">
      <div class="practice_box_24 flex-col justify-between">
        <div class="practice_block_5 flex-row justify-between">
          <img
            class="practice_image_13"
            referrerpolicy="no-referrer"
            src="./assets/img/suishi.png"
          />
          <div class="practice_group_18 flex-col"></div>
        </div>
        <span class="practice_text_24">员工随时问AI清晰解答</span>
      </div>
      <div class="practice_image_text_15 flex-col justify-between">
        <img
          class="practice_image_15"
          referrerpolicy="no-referrer"
          src="./assets/img/jike.png"
        />
        <span class="practice_text_group_5">员工即刻获取文案标签</span>
      </div>
      <div class="practice_image_text_16 flex-col justify-between">
        <img
          class="practice_image_16"
          referrerpolicy="no-referrer"
          src="./assets/img/xinren.png"
        />
        <span class="practice_text_group_6">新人快速开单标准化话术</span>
      </div>
      <div class="practice_box_25 flex-col justify-between">
        <div class="practice_block_7 flex-col">
          <img
            class="practice_image_17"
            referrerpolicy="no-referrer"
            src="./assets/img/24xinren.png"
          />
        </div>
        <span class="practice_text_25">24小时新员工培训导师</span>
      </div>
    </div>
    <div class="group_15 flex-row" id="gateway">
      <div class="group_16 flex-col">
        <div class="group_17 flex-col">
          <div class="image-wrapper_7 flex-col">
            <img
              class="image_12"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGfa5a4d0305f975e1f89ebd5054eca3fc.png"
            />
          </div>
        </div>
        <div class="group_18 flex-col">
          <div class="block_4 flex-row">
            <div class="text-group_5 flex-col justify-between">
              <span class="text_23">统一的大模型接口网关</span>
              <span class="text_24">多模型统一接入，只需将基址替换为：</span>
            </div>
          </div>
          <div class="block_5 flex-row">
            <div class="block_6 flex-row">
              <span class="text_25">http://localhost:3001</span>
              <span class="text_26">/v1/responses</span>
              <div class="box_6 flex-col">
                <div class="group_19 flex-col"><div class="section_9 flex-col"></div></div>
              </div>
            </div>
          </div>
          <div class="block_7 flex-row justify-between">
            <div class="box_7 flex-row">
              <div class="image-text_5 flex-row justify-between">
                <div class="image-wrapper_8 flex-col">
                  <img
                    class="thumbnail_1"
                    referrerpolicy="no-referrer"
                    src="./assets/img/miyao@3x.png"
                  />
                </div>
                <span class="text-group_6">获取秘钥</span>
              </div>
            </div>
            <div class="box_8 flex-row">
              <div class="image-text_6 flex-row justify-between">
                <div class="image-wrapper_9 flex-col">
                  <img
                    class="thumbnail_2"
                    referrerpolicy="no-referrer"
                    src="./assets/img/wendang@3x.png"
                  />
                </div>
                <span class="text-group_7">文档</span>
              </div>
            </div>
          </div>
          <div class="text-wrapper_5 flex-row"><span class="text_27">支持众多的大模型供应商</span></div>
          <div class="image-wrapper_10 flex-row justify-between">
            <img
              class="image_13"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGa36d7108339c344eeeb5868149056ba0.png"
            />
            <img
              class="image_14"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG0e55bb84ca516dc8d186c4ef260c84ef.png"
            />
            <img
              class="image_15"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG121e93ad99e596f8c2abad8493162198.png"
            />
            <img
              class="image_16"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG651d971a96e1d79fef9a2f64a82c6fd6.png"
            />
            <img
              class="image_17"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG30e6ee8bfc1c6fb98ca605a89050ebb0.png"
            />
            <img
              class="image_18"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG5a7047986d873811d83480d935a68040.png"
            />
            <img
              class="image_19"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG6339c9767782f4f2d34a14f575e02710.png"
            />
            <img
              class="image_20"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG552022fefe8d80467ff8bfd944893380.png"
            />
          </div>
          <div class="image-wrapper_11 flex-row justify-between">
            <img
              class="image_21"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG52defb376a26965ebe5333983c2f74a6.png"
            />
            <img
              class="image_22"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGcedce18e53d33e55860230c6c03e8fe4.png"
            />
            <img
              class="image_23"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG8cd91f2bf78d9ce5632d5fa0dea4b809.png"
            />
            <img
              class="image_24"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGc8a8dad5223015796a2cb323e72e0cba.png"
            />
            <img
              class="image_25"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGf1ab2b0af31a1c7bf9b765093dbf7f14.png"
            />
            <img
              class="image_26"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNGeb71a6274624ba6dd100a9854c08c4c3.png"
            />
            <img
              class="image_27"
              referrerpolicy="no-referrer"
              src="./assets/img/FigmaDDSSlicePNG4386c42b8a6daf9ebd91147466a14dfd.png"
            />
          </div>
          <div class="block_8 flex-col"></div>
          <div class="block_9 flex-col"></div>
        </div>
      </div>
    </div>
    <div class="group_20 flex-row">
      <div class="group_21 flex-col">
        <div class="group_22 flex-row">
          <img
            class="footer-logo"
            referrerpolicy="no-referrer"
            src="./assets/img/slice-3-white-1x.png"
            srcset="
              ./assets/img/slice-3-white-1x.png 1x,
              ./assets/img/slice-3-white-2x.png 2x,
              ./assets/img/slice-3-white-3x.png 3x
            "
          />
          <span class="text_28 nav-link" @click="scrollTo('about')">关于 WithMind</span>
          <span class="text_29 nav-link" @click="scrollTo('skills')">Skills</span>
          <span class="text_30 nav-link" @click="scrollTo('platform')">创作平台</span>
          <span class="text_nav_practice_footer nav-link" @click="scrollTo('practice')">应用实践</span>
          <span class="text_31 nav-link" @click="scrollTo('gateway')">模型网关</span>
        </div>
        <div class="group_23 flex-row">
          <div class="group_24 flex-col justify-between">
            <span class="text_32">
              告别孤岛式协作，一键接入知识库、Agent与新媒体分发渠道，让数据、行动与传播无缝闭环，满足从灵感迸发到内容落地的全链路需求。
            </span>
            <div class="image-text_7 flex-col justify-between nav-link" @click="scrollTo('gateway')">
              <img
                class="image_29"
                referrerpolicy="no-referrer"
                src="./assets/img/FigmaDDSSlicePNG3cc2d58da2ae33f445a1471d8f218d42.png"
              />
              <span class="text-group_8">在线咨询</span>
            </div>
          </div>
          <div class="text-group_9 flex-col">
            <span class="text_33 nav-link" @click="scrollTo('about')">WithMind</span>
            <span class="text_34 nav-link" @click="scrollTo('skills')">核心价值</span>
          </div>
          <div class="text-wrapper_6 flex-col">
            <span class="text_35 nav-link" @click="scrollTo('skills')">企业管理大师</span>
            <span class="text_36 nav-link" @click="scrollTo('skills')">新媒体专家</span>
            <span class="text_37 nav-link" @click="scrollTo('skills')">销冠助手</span>
            <span class="text_38 nav-link" @click="scrollTo('skills')">培训导师</span>
          </div>
          <div class="text-group_10 flex-col">
            <span class="text_39 nav-link" @click="scrollTo('platform')">知识库</span>
            <span class="text_40 nav-link" @click="scrollTo('agent')">Agent</span>
            <span class="text_41 nav-link" @click="scrollTo('media')">新媒体应用</span>
          </div>
          <div class="practice_footer_col flex-col">
            <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">员工问答</span>
            <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">获取文案</span>
            <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">标准话术</span>
            <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">培训导师</span>
          </div>
          <div class="text-group_11 flex-col">
            <span class="text_42 nav-link" @click="scrollTo('gateway')">获取秘钥</span>
            <span class="text_43 nav-link" @click="scrollTo('gateway')">文档</span>
          </div>
        </div>
        <div class="text-wrapper_7 flex-row justify-between">
          <span class="text_44">
            &nbsp;©&nbsp;2026&nbsp;武汉智韵未来科技有限公司&nbsp;All&nbsp;right&nbsp;sreserved
          </span>
          <span class="text_45">备案号：鄂ICP备11111111号</span>
        </div>
        <div class="group_25 flex-col"></div>
      </div>
    </div>
    <div class="group_26 flex-col"></div>
    <img
      class="image_30"
      referrerpolicy="no-referrer"
      src="./assets/img/FigmaDDSSlicePNGb29d3722a6dc7b251885dd340188decb.png"
    />
    <div class="group_27 flex-row" id="skills">
      <div class="text-group_12 flex-col justify-between">
        <div class="text-wrapper_8">
          <span class="text_46">Skills</span>
          <span class="text_47">&nbsp;核心能力</span>
        </div>
        <span class="text_48">四大核心技能插件，覆盖企业高频应用场景</span>
      </div>
      <div class="group_28 flex-col">
        <div class="group_28_top flex-col">
          <img
            class="label_3"
            referrerpolicy="no-referrer"
            src="./assets/img/Slice_11@3x.png"
          />
          <span class="text_49">企业管理大师</span>
          <span class="text_50">覆盖行政人事财务等制度流程，<br />员工自助查询，减少答疑，实现<br />管理自动化标准化。</span>
        </div>
        <div class="group_29 flex-col">
          <div class="block_12 flex-col">
            <img
              class="label_4"
              referrerpolicy="no-referrer"
              src="./assets/img/Slice_13@3x.png"
            />
          </div>
          <div class="text-group_13 flex-col justify-between">
            <span class="text_51">新媒体专家</span>
            <span class="text_52">支持策划、文案、脚本、规划等创作，结合业务定制可落地方案，零成本拥有内容团队。</span>
          </div>
        </div>
      </div>
      <div class="group_30 flex-col justify-between">
        <div class="box_12 flex-col">
          <img
            class="box_13"
            referrerpolicy="no-referrer"
            src="./assets/img/Slice_12@3x.png"
          />
          <div class="text-group_14 flex-col justify-between">
            <span class="text_53">销冠助手</span>
            <span class="text_54">内置全流程话术，100%学习产品案例生成专属话术，统一销售口径，提升转化率。</span>
          </div>
        </div>
        <div class="box_15 flex-col">
          <div class="image-wrapper_12 flex-col">
            <img
              class="image_31"
              referrerpolicy="no-referrer"
              src="./assets/img/Slice_14@3x.png"
            />
          </div>
          <div class="text-group_15 flex-col justify-between">
            <span class="text_55">培训导师</span>
            <span class="text_56">24小时在线自动学习内部资料，支持培训考核，知识沉淀传承，新人快速上手。</span>
          </div>
        </div>
      </div>
    </div>
    <img
      class="image_34"
      referrerpolicy="no-referrer"
      src="./assets/img/Slice_5.png"
    />
    <div class="group_34 flex-col">
      <div class="section_11 flex-row">
        <div class="text-wrapper_9 flex-col justify-between">
          <span class="paragraph_4">
            WithMind
            <br />
            企业专属私有化AI知识大脑
          </span>
          <span class="text_59">
            用一个Key，聚百模之力，让您的业务永远拥有最合适的AI大脑，而无需为模型选择与维护烦恼，专注打造核心竞争力。
          </span>
        </div>
        <img
          class="image-26-knowledge"
          referrerpolicy="no-referrer"
          src="./assets/img/FigmaDDSSlicePNGe134cacc91c0bf8d272766810f8b17be.png"
        />
      </div>
      <div class="section_12 flex-row">
        <div class="box_16 flex-row">
          <div class="image-text_8 flex-row justify-between">
            <span class="text-group_17">了解更多</span>
            <div class="image-wrapper_16 flex-col">
              <img
                class="thumbnail_3"
                referrerpolicy="no-referrer"
                src="./assets/img/Slice_19@3x.png"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="section_13 flex-col"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {},
      activeSection: 'top'  /* 当前高亮的 nav 对应的 section id */
    };
  },
  mounted() {
    this.initScrollSpy();
  },
  methods: {
    /* scroll-spy:用 Vue 响应式 data(activeSection) 驱动 nav-link 的 :class 绑定。
       关键设计:点击 nav-link 后,锁定 activeSection = id,屏蔽一切自动 update,
       直到平滑滚动结束再校准。这样彻底避免"点击瞬间设的 activeSection
       被 IO/scroll 回调里的 compute() 改掉"的竞态。 */
    initScrollSpy() {
      const sectionIds = ['about', 'skills', 'platform', 'agent', 'media', 'practice', 'gateway'];

      // 单一 compute:section 顶 ≤ 视口高度的 50%(即"section 顶已过视口中线")就算激活
      // 这避开 about 段高度只有 ~144px 的边界问题:
      //   点 skills 后,skills 顶 ≈ 260px < 375px(50% vh),platform 顶 > 375 → 选 skills
      //   而 about 顶 ≈ 116px 也 ≤ 375,但 for 循环从上到下遍历,后一个 skills 覆盖前一个
      const compute = () => {
        const scrollY = window.scrollY || window.pageYOffset || 0;
        if (scrollY < 100) return 'top';
        const vh = window.innerHeight || document.documentElement.clientHeight;
        const trigger = vh * 0.5;
        let activeId = 'top';
        for (const id of sectionIds) {
          const el = document.getElementById(id);
          if (!el) continue;
          const top = el.getBoundingClientRect().top;
          if (top <= trigger) {
            activeId = id;
          } else {
            break;
          }
        }
        return activeId;
      };

      const update = () => {
        // 抑制期(scrollTo 触发的平滑滚动过程中)不响应任何 update
        if (Date.now() < (this.scrollSuppressUntil || 0)) return;
        this.activeSection = compute();
      };

      // IO 兜底:section 进入/退出视口时重算
      const observer = new IntersectionObserver(() => update(), {
        rootMargin: '0px 0px -50% 0px',
        threshold: 0
      });
      sectionIds.forEach((id) => {
        const el = document.getElementById(id);
        if (el) observer.observe(el);
      });

      let ticking = false;
      window.addEventListener('scroll', () => {
        if (ticking) return;
        ticking = true;
        requestAnimationFrame(() => {
          ticking = false;
          update();
        });
      }, { passive: true });

      update();
    },
    scrollTo(id) {
      // 1) 立即同步响应式状态(不等滚动动画)
      this.activeSection = id;
      // 2) 抑制一切自动 update 1.2s(覆盖 smooth 滚动动画)
      const suppressMs = 1200;
      this.scrollSuppressUntil = Date.now() + suppressMs;
      // 3) 抑制期结束后,按当前 scrollY 校准一次
      setTimeout(() => {
        this.scrollSuppressUntil = 0; // 解除抑制
        // 此时页面已稳定,scrollY 是最终值,compute() 必然正确
        this.activeSection = (() => {
          const sectionIds = ['about', 'skills', 'platform', 'agent', 'media', 'practice', 'gateway'];
          const scrollY = window.scrollY || window.pageYOffset || 0;
          if (scrollY < 100) return 'top';
          const vh = window.innerHeight || document.documentElement.clientHeight;
          const trigger = vh * 0.5;
          let activeId = 'top';
          for (const sid of sectionIds) {
            const el = document.getElementById(sid);
            if (!el) continue;
            const top = el.getBoundingClientRect().top;
            if (top <= trigger) {
              activeId = sid;
            } else {
              break;
            }
          }
          return activeId;
        })();
      }, suppressMs);
      // 4) 触发滚动
      if (id === 'top') {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        return;
      }
      const el = document.getElementById(id);
      if (el) {
        if (id === 'gateway') {
          // gateway 段高度 23.574rem 可能超过视口,按"底部对齐"算会让顶部滚出视口看不见
          // 改成顶部对齐(留 100px 给 nav,不让"统一的大模型接口网关"标题被挡)
          const top = el.getBoundingClientRect().top + window.pageYOffset - 100;
          window.scrollTo({ top: top, behavior: 'smooth' });
        } else if (id === 'skills') {
          // skills 段是 absolute 定位 (group_27 top: 35.547rem),点击时让它顶部贴视口顶部,
          // 不要再留 260px(否则会露出上面 gateway 段的"降本/增效/留资/安全"等模块内容)
          const top = el.getBoundingClientRect().top + window.pageYOffset;
          window.scrollTo({ top: top, behavior: 'smooth' });
        } else {
          const top = el.getBoundingClientRect().top + window.pageYOffset - 260;
          window.scrollTo({ top: top, behavior: 'smooth' });
        }
      }
    }
  }
};
</script>
<style scoped lang="css" src="./assets/index.rem.css" />
<style scoped>
/* 顶部导航固定，滚动时始终可见、可点击 */
.section_2 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  /* will-change:transform + 自身 transform:translateZ(0):把 fixed 导航推到独立 GPU 合成层,
     滚动时导航不再走主线程重绘,避免每帧重新画整个 nav 元素造成顶部闪/卡 */
  will-change: transform;
  transform: translateZ(0);
}
/* 导航被 fixed 移出文档流，给内容补回 80px 顶部间距，避免上移错位 */
.section_1 {
  margin-top: 2.133rem;
}
.nav-link {
  cursor: pointer;
  transition: opacity 0.2s;
  position: relative;
  z-index: 101;
}
.nav-link:hover {
  opacity: 0.7;
}
/* scroll-spy 高亮:当前可见 section 对应的 nav 链接变蓝
   跟 text_1/text_7 (WithMind 标题) 同色 rgba(25, 140, 255, 1) */
.nav-link.nav-active {
  color: rgba(25, 140, 255, 1) !important;
}

/* ===== 修复 logo：底部用与首页 image_1 同款整张合并图 ===== */
/* 顶部 image_1 (slice-3-black, 浅色页头) + 底部 .footer-logo (slice-3-white, 深色页脚 group_21 bg: rgba(16,16,16,1)) */
/* 尺寸/比例与首页 6.347rem × 0.854rem 完全一致,无图-字缝隙 */
.footer-logo {
  width: 6.347rem;
  height: 0.854rem;
  display: block;
  object-fit: contain;
  margin: 0;
}

/* ===== 4 个价值标签(降本/增效/留资/安全)的小字描述：强制两行 + 居中 + 跟参考图断句一字不差(不改文案) ===== */
/* 调小 font-size 到 0.39rem + letter-spacing 0rem 让 6.4rem 容器能容纳 16-17 字(留 1-2 字余量),
   配合 <br /> 在 14-15 字处硬换行,避免自然换行与 <br /> 重复触发导致 3 行 */
.text-group_1,
.text-group_2,
.text-group_3,
.text-group_4 {
  align-items: center !important;
}
.text_10,
.text_12,
.text_14,
.text_16 {
  /* 还原:不强制 2 行、不改 font-size / line-height,文字回到原本单行布局,行间距恢复默认 */
}

/* ===== 底部 footer 版权信息上方加横线分隔 ===== */
/* 写在 <style scoped> 里(用 !important),因为外部 index.rem.css 的 .text-wrapper_7 没被 scoped 处理,匹配不上 */
.text-wrapper_7 {
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
  padding-top: 1.067rem !important;
  height: auto !important;
  z-index: 2 !important;
}
.group_20,
.group_21 {
  height: 16rem !important;    /* footer 内容实际累加 ≈ 16rem,缩 3.3rem 消除底部黑色空白 */
}

/* 知识大脑右侧装饰图（新版蓝湖：单张 339x327 替代原 image_35 + label_5 拼接） */
.image-26-knowledge {
  width: 9.04rem;
  height: 8.72rem;
  margin: 0.747rem 4.16rem 0 8.907rem;
  display: block;
}

/* ============ 应用实践板块(全部 class 用 practice_ 前缀避开与 gateway 的 class 冲突)============ */
/* 关键设计:这些 CSS 写在 <style scoped> 里(不是 index.rem.css),
   自动带 [data-v-xxx] 属性选择器,scope 隔离不会被全局污染 */
.practice_text_wrapper_13 {
  width: 4.694rem;
  height: 1.707rem;
  margin: 6.4rem 0 0 6.934rem;
}

.practice_text_23 {
  width: 4.694rem;
  height: 1.707rem;
  overflow-wrap: break-word;
  color: rgba(22, 22, 22, 1);
  font-size: 1.173rem;
  font-family: Source Han Sans CN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.707rem;
}

.practice_box_23 {
  width: 37.334rem;
  min-height: 8.267rem;
  margin: 0.8rem 0 0 6.934rem;
}

.practice_box_24 {
  width: 8.534rem;
  min-height: 8.267rem;
}

.practice_block_5 {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 8.534rem;
  height: 6.934rem;
}

.practice_image_13 {
  width: 8.534rem;
  height: 6.934rem;
  object-fit: contain;
}

.practice_group_18 {
  border-radius: 16px;
  position: absolute;
  left: 0;
  top: 0;
  width: 8.534rem;
  height: 6.934rem;
  border: 2px solid rgba(232, 244, 255, 1);
  pointer-events: none;
}

.practice_text_24 {
  width: 8.534rem;
  height: 0.96rem;
  overflow-wrap: break-word;
  color: rgba(86, 86, 86, 1);
  font-size: 0.533rem;
  font-family: Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  line-height: 0.96rem;
  margin-top: 0.374rem;
}

.practice_image_text_15 {
  width: 8.534rem;
  min-height: 8.267rem;
  margin-left: 1.067rem;
}

.practice_image_15 {
  width: 8.534rem;
  height: 6.934rem;
  object-fit: contain;
}

.practice_text_group_5 {
  width: 8.534rem;
  height: 0.96rem;
  overflow-wrap: break-word;
  color: rgba(86, 86, 86, 1);
  font-size: 0.533rem;
  font-family: Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  line-height: 0.96rem;
  margin-top: 0.374rem;
}

.practice_image_text_16 {
  width: 8.534rem;
  min-height: 8.267rem;
  margin-left: 1.067rem;
}

.practice_image_16 {
  width: 8.534rem;
  height: 6.934rem;
  object-fit: contain;
}

.practice_text_group_6 {
  width: 8.534rem;
  height: 0.96rem;
  overflow-wrap: break-word;
  color: rgba(86, 86, 86, 1);
  font-size: 0.533rem;
  font-family: Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  line-height: 0.96rem;
  margin-top: 0.374rem;
}

.practice_box_25 {
  width: 8.534rem;
  min-height: 8.267rem;
  margin-left: 1.067rem;
}

.practice_block_7 {
  background-color: rgba(255, 255, 255, 1);
  height: 6.934rem;
  width: 8.534rem;
  position: relative;
  border: 2px solid rgba(232, 244, 255, 1);
  border-radius: 16px;
  overflow: hidden;
}

.practice_image_17 {
  width: 8.534rem;
  height: 6.934rem;
  object-fit: contain;
}

.practice_text_25 {
  width: 8.534rem;
  height: 0.96rem;
  overflow-wrap: break-word;
  color: rgba(86, 86, 86, 1);
  font-size: 0.533rem;
  font-family: Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  line-height: 0.96rem;
  margin-top: 0.374rem;
}

/* ============ footer 应用实践列(比照 newcss text-wrapper_16,放在"创作平台"和"模型网关"之间)============ */
/* 比照 newcss .text-wrapper_16:
   - width: 1.92rem(原 withmind 误用 2.4rem)
   - height: 5.12rem(原 withmind 误用 3.734rem,4 项需要 5.12rem)
   - margin-left: 0.934rem(原 withmind 误用 1.787rem)
   写在 <style scoped> 里自动带 [data-v-xxx],scope 隔离不会污染其他列。

   关键修复:不要用 justify-between,改用普通流式布局 + 每项固定 margin-top,
   这样 4 项的实际渲染高度 = 4*0.96 + 3*0.427 = 5.121rem ≈ 5.12rem,精确填满,
   不会因 justify-between 撑开产生视觉间距不一致 */
.practice_footer_col {
  width: 1.92rem;
  height: 5.12rem;
  /* 再右移 0.2rem(原 0.747rem → 0.947rem) */
  margin-left: 0.947rem;
}

.practice_footer_col_item {
  width: 1.92rem;
  height: 0.96rem;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 0.48rem;
  font-family: Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: right;
  line-height: 0.96rem;
  cursor: pointer;
}

.practice_footer_col_item + .practice_footer_col_item {
  margin-top: 0.427rem;
}
</style>