wanzhe/withmindwebsite
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新需求样式修改

Browse Source
This commit is contained in:
jack
2026-07-12 22:06:41 +08:00
parent a901d9f8e4
commit 8d73b819aa
11 changed files with 473 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/withmind/index.vue
+292 -14
View File
@@ -17,6 +17,7 @@
<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>
@@ -28,7 +29,11 @@
<div class="section_5 flex-row justify-between" id="about">
<div class="text-wrapper_1">
<span class="text_6">关于&nbsp;</span>
<span class="text_7">WithMind</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;四大行业成熟技能插件，真正实现：企业知识留得住、员工能力带得走、销售业绩涨得快、团队培训零成本。
@@ -49,7 +54,7 @@
</div>
<div class="text-group_1 flex-col justify-between">
<span class="text_9">降本：一个顶一个团队</span>
<span class="text_10">省去策划、培训、行政答疑的大量<br />人力成本</span>
<span class="text_10">无需再设专职策划、讲师或行政答疑岗，系统自动化处理；话术政策变更5分钟在线生效，无需研发介入，大幅减少重复性人力投入。</span>
</div>
</div>
<div class="group_5 flex-col"></div>
@@ -67,7 +72,7 @@
</div>
<div class="text-group_2 flex-col justify-between">
<span class="text_11">增效：能力统一升级</span>
<span class="text_12">共享企业顶级知识/话术、新人快<br />速成长，团队能力无短板</span>
<span class="text_12">全员同步最优话术与知识库，新人一周即可具备成熟能力；系统自动推送最新优秀案例，团队能力始终拉齐，无短板员工。</span>
</div>
</div>
<div class="group_6 flex-col"></div>
@@ -81,7 +86,7 @@
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_13">留资：企业资产沉淀</span>
<span class="text_14">沉淀员工经验/案例/流程等知识资<br />产，人走经验留，越用越增值</span>
<span class="text_14">典型案例与处理流程一键归档，形成企业专属知识库；人员流动不带走经验，新员工可随时复用，内容随业务增长持续增值。</span>
</div>
</div>
<div class="group_7 flex-col"></div>
@@ -95,7 +100,7 @@
</div>
<div class="text-group_4 flex-col justify-between">
<span class="text_15">安全：本地私有化部署</span>
<span class="text_16">数据本地存储，杜绝公网泄露风<br />险，适配各类正规企业</span>
<span class="text_16">全部数据存于企业自有服务器，物理隔离公网，满足金融、政务等高合规要求；企业拥有完整权限与审计能力，安全自主可控。</span>
</div>
</div>
</div>
@@ -160,7 +165,7 @@
<img
class="image_10"
referrerpolicy="no-referrer"
src="./assets/img/FigmaDDSSlicePNG3878e1d3cb469cdcbd99b9c05feba2ac.png"
src="./assets/img/Slice_16@3x.png"
/>
</div>
</div>
@@ -194,6 +199,58 @@
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/FigmaDDSSlicePNG38af9e11503ff1d7ac74d0eeb9dd4f1e.png"
/>
<img
class="practice_image_14"
referrerpolicy="no-referrer"
src="./assets/img/FigmaDDSSlicePNG95bb06f93849eb4fda3afcae18737685.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/FigmaDDSSlicePNG9f52383cacd98f169cfa2e612b998325.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/FigmaDDSSlicePNGa56aa142e64ca24ffc07e30c92a3363d.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/FigmaDDSSlicePNG4f1be8f45f397d1a477d171fa0fe7a3e.png"
/>
<div class="practice_image_wrapper_7 flex-col">
<img
class="practice_image_18"
referrerpolicy="no-referrer"
src="./assets/img/FigmaDDSSlicePNG29c2fea3ab599f0c9cf863b29ac33e1a.png"
/>
</div>
</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">
@@ -228,7 +285,7 @@
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="./assets/img/FigmaDDSSlicePNG19d3d976285cb5b68f43bc632b989544.png"
src="./assets/img/miyao@3x.png"
/>
</div>
<span class="text-group_6">获取秘钥</span>
@@ -240,7 +297,7 @@
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
src="./assets/img/FigmaDDSSlicePNG84a786470b984b9dd918797997ece549.png"
src="./assets/img/wendang@3x.png"
/>
</div>
<span class="text-group_7">文档</span>
@@ -348,6 +405,7 @@
<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">
@@ -364,22 +422,28 @@
<span class="text-group_8">在线咨询</span>
</div>
</div>
<div class="text-group_9 flex-col justify-between">
<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 justify-between">
<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 justify-between">
<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="text-group_11 flex-col justify-between">
<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>
@@ -535,7 +599,7 @@ export default {
直到平滑滚动结束再校准。这样彻底避免"点击瞬间设的 activeSection
被 IO/scroll 回调里的 compute() 改掉"的竞态。 */
initScrollSpy() {
const sectionIds = ['about', 'skills', 'platform', 'agent', 'media', 'gateway'];
const sectionIds = ['about', 'skills', 'platform', 'agent', 'media', 'practice', 'gateway'];
// 单一 compute:section 顶 ≤ 视口高度的 50%(即"section 顶已过视口中线")就算激活
// 这避开 about 段高度只有 ~144px 的边界问题:
@@ -599,7 +663,7 @@ export default {
this.scrollSuppressUntil = 0; // 解除抑制
// 此时页面已稳定,scrollY 是最终值,compute() 必然正确
this.activeSection = (() => {
const sectionIds = ['about', 'skills', 'platform', 'agent', 'media', 'gateway'];
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;
@@ -718,4 +782,218 @@ export default {
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: 4.347rem;
height: 6.934rem;
object-fit: contain;
}
.practice_image_14 {
width: 4.187rem;
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;
}
.practice_image_17 {
width: 4.054rem;
height: 6.934rem;
object-fit: contain;
}
.practice_image_wrapper_7 {
border-radius: 16px;
height: 6.934rem;
border: 2px solid rgba(232, 244, 255, 1);
width: 8.534rem;
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.practice_image_18 {
width: 4.774rem;
height: 6.934rem;
margin-left: 3.76rem;
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>