initial commit
This commit is contained in:
@@ -0,0 +1,678 @@
|
||||
<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" data-spy="top" @click="scrollTo('top')">首页</span>
|
||||
<span class="text_2 nav-link" data-spy="about" @click="scrollTo('about')">WithMind</span>
|
||||
<span class="text_3 nav-link" data-spy="skills" @click="scrollTo('skills')">Skills</span>
|
||||
<span class="text_4 nav-link" data-spy="platform" @click="scrollTo('platform')">创作平台</span>
|
||||
<span class="text_5 nav-link" 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">关于 </span>
|
||||
<span class="text_7">WithMind</span>
|
||||
</div>
|
||||
<span class="text_8">
|
||||
WithMind 以AI Agent为核心,构建专属AI能力体系,落地在企业本地、专属企业数据、持续自我迭代的全员AI赋能系统。依托本地私有Agent智能节点 + 企业私有知识库沉淀 + 四大行业成熟技能插件,真正实现:企业知识留得住、员工能力带得走、销售业绩涨得快、团队培训零成本。
|
||||
</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.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-group_1 flex-col justify-between">
|
||||
<span class="text_9">降本:一个顶一个团队</span>
|
||||
<span class="text_10">省去策划、培训、行政答疑的大量<br />人力成本</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.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-group_2 flex-col justify-between">
|
||||
<span class="text_11">增效:能力统一升级</span>
|
||||
<span class="text_12">共享企业顶级知识/话术、新人快<br />速成长,团队能力无短板</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.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_13">留资:企业资产沉淀</span>
|
||||
<span class="text_14">沉淀员工经验/案例/流程等知识资<br />产,人走经验留,越用越增值</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.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-group_4 flex-col justify-between">
|
||||
<span class="text_15">安全:本地私有化部署</span>
|
||||
<span class="text_16">数据本地存储,杜绝公网泄露风<br />险,适配各类正规企业</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/FigmaDDSSlicePNG3878e1d3cb469cdcbd99b9c05feba2ac.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="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/FigmaDDSSlicePNG19d3d976285cb5b68f43bc632b989544.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/FigmaDDSSlicePNG84a786470b984b9dd918797997ece549.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_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 justify-between">
|
||||
<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 justify-between">
|
||||
<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 justify-between">
|
||||
<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="text-group_11 flex-col justify-between">
|
||||
<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">
|
||||
© 2026 武汉智韵未来科技有限公司 All right 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"> 核心能力</span>
|
||||
</div>
|
||||
<span class="text_48">四大核心技能插件,覆盖企业高频应用场景</span>
|
||||
</div>
|
||||
<div class="group_28 flex-col">
|
||||
<img
|
||||
class="label_3"
|
||||
referrerpolicy="no-referrer"
|
||||
src="./assets/img/Slice_11.png"
|
||||
/>
|
||||
<span class="text_49">企业管理大师</span>
|
||||
<span class="text_50">覆盖行政人事财务等制度流程,员工自助查询,减少答疑,实现管理自动化标准化。</span>
|
||||
<div class="group_29 flex-col">
|
||||
<div class="block_12 flex-col">
|
||||
<img
|
||||
class="label_4"
|
||||
referrerpolicy="no-referrer"
|
||||
src="./assets/img/Slice_13.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.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.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 class="group_31 flex-col"></div>
|
||||
<div class="group_32 flex-col">
|
||||
<div class="group_33 flex-col">
|
||||
<div class="image-wrapper_13 flex-col">
|
||||
<img
|
||||
class="image_32"
|
||||
referrerpolicy="no-referrer"
|
||||
src="./assets/img/FigmaDDSSlicePNG70cb065a8289fcc42ca78e42855a5469.png"
|
||||
/>
|
||||
<img
|
||||
class="image_33"
|
||||
referrerpolicy="no-referrer"
|
||||
src="./assets/img/FigmaDDSSlicePNGb5a93f0d10a547f00f477afb7b34d708.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-group_16 flex-col justify-between">
|
||||
<span class="text_57">企业管理大师</span>
|
||||
<span class="text_58">覆盖行政人事财务等制度流程,员工自助查询,减少答疑,实现管理自动化标准化。</span>
|
||||
</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/FigmaDDSSlicePNG606421222bffedb4ebea7a0ca9a561ef.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:用 IntersectionObserver 监听每个 section,
|
||||
进入视口时把对应 nav 链接加 .nav-active 类(蓝色高亮) */
|
||||
initScrollSpy() {
|
||||
const sections = ['top', 'about', 'skills', 'platform', 'agent', 'media', 'gateway'];
|
||||
const navLinks = document.querySelectorAll('.section_2 [data-spy]');
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
/* 多个 entry 同时触发时,选"离顶部最近"的那一个作为 active */
|
||||
let best = null;
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
if (!best || entry.boundingClientRect.top < best.boundingClientRect.top) {
|
||||
best = entry;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (best) {
|
||||
const id = best.target.id;
|
||||
this.activeSection = id;
|
||||
/* 同步 DOM class(因为 nav-link class 在外部 CSS 不可用,直接 toggle class) */
|
||||
navLinks.forEach((link) => {
|
||||
if (link.getAttribute('data-spy') === id) {
|
||||
link.classList.add('nav-active');
|
||||
} else {
|
||||
link.classList.remove('nav-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
/* 视口上 30% / 下 40% 区域作为"激活区",让 section 滚到屏幕上半部时高亮 */
|
||||
rootMargin: '-30% 0px -40% 0px',
|
||||
threshold: 0
|
||||
}
|
||||
);
|
||||
|
||||
sections.forEach((id) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) observer.observe(el);
|
||||
});
|
||||
},
|
||||
scrollTo(id) {
|
||||
if (id === 'top') {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
return;
|
||||
}
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
// 模型网关特殊处理:滚到网关模块底部,避免露出 footer 黑色背景
|
||||
if (id === 'gateway') {
|
||||
// 让网关底部对齐到"视口底部上方 250px"位置,留更大余量,footer 黑色背景完全在视口外
|
||||
const rect = el.getBoundingClientRect();
|
||||
const elBottom = rect.bottom + window.pageYOffset;
|
||||
const target = elBottom - window.innerHeight + 250;
|
||||
window.scrollTo({ top: Math.max(0, target), behavior: 'smooth' });
|
||||
return;
|
||||
}
|
||||
// 顶部 fixed 导航栏高度 2.134rem(80px),加 180px 余量,共 260px 偏移,完全避开导航遮住
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user