yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

H5首页更新

Browse Source
This commit is contained in:
hrx 2026-08-13 14:46:19 +08:00
parent 4d2e31d79e
commit f5b85598ef
10 changed files with 955 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
f/web-kboss/src/components/FloatingBox/FloatingBox.vue
View File

@ -252,7 +252,7 @@ export default {
},
getYunbaoProducts() {
return [
{ id: 'bid', key: this.$t('yunbao.products.bid'), intro: 'E投标智能体是覆盖「招标解析→标书编制→合规审查→查重→知识沉淀」全链路的一站式投标AI解决方案，帮企业将编标周期从数天压缩至小时级，低级废标率降低100%。' },
// { id: 'bid', key: this.$t('yunbao.products.bid'), intro: 'E投标智能体是覆盖「招标解析→标书编制→合规审查→查重→知识沉淀」全链路的一站式投标AI解决方案，帮企业将编标周期从数天压缩至小时级，低级废标率降低100%。' },
{ id: 'tender', key: this.$t('yunbao.products.tender'), intro: 'E招标智能体，AI辅助编制招标文件，自动合规性审查，让招标流程更高效、更透明、更合规。' },
{ id: 'evaluation', key: this.$t('yunbao.products.evaluation'), intro: 'E评标智能体，AI辅助评标分析，自动提取关键指标、横向对比评分、识别异常报价，帮助评标专家高效、公正地完成评审工作。' },
{ id: 'loggingReview', key: this.$t('yunbao.products.loggingReview'), intro: '面向林业管理的行业智能体，可在线完成采伐申请材料的智能核验，自动比对采伐范围、树种、蓄积量等核心指标与合规要求，快速识别违规申请，助力林业资源可持续利用。' },
@ -414,7 +414,7 @@ export default {
if (action === 'browse') {
setTimeout(() => {
this.addBotMsg(vm.$t('yunbao.recommend'), [
{ text: vm.$t('yunbao.products.bid'), desc: vm.$t('yunbao.productDescs.bid'), action: 'goExternal', url: 'https://bid-ocai-v2.jinan.opencomputing.cn/', type: 'cards' },
// { text: vm.$t('yunbao.products.bid'), desc: vm.$t('yunbao.productDescs.bid'), action: 'goExternal', url: 'https://bid-ocai-v2.jinan.opencomputing.cn/', type: 'cards' },
{ text: vm.$t('yunbao.products.contract'), desc: vm.$t('yunbao.productDescs.contract'), action: 'goContract', type: 'cards' },
{ text: vm.$t('yunbao.products.decision'), desc: vm.$t('yunbao.productDescs.decision'), action: 'goInvest', type: 'cards' }
])

12
f/web-kboss/src/router/index.js
View File

@ -108,6 +108,18 @@ export const constantRoutes = [
meta: {
title: 'H5关于我们', fullPath: '/h5HomePage/about'
}
},
{
path: 'decision-case',
title: 'H5投策智能体案例',
component: () => import('@/views/H5/decisionCase/index.vue'),
meta: { title: '投策智能体', fullPath: '/h5HomePage/decision-case' }
},
{
path: 'contract-case',
title: 'H5合同智能审查案例',
component: () => import('@/views/H5/contractCase/index.vue'),
meta: { title: '合同智能审查', fullPath: '/h5HomePage/contract-case' }
}
]
},

12
f/web-kboss/src/store/modules/permission.js
View File

@ -228,6 +228,18 @@ if (isMobile) {
fullPath: "/h5HomePage/about",
isMobile: true
},
},
{
path: 'decision-case',
title: 'H5投策智能体案例',
component: () => import('@/views/H5/decisionCase/index.vue'),
meta: { title: '投策智能体', fullPath: '/h5HomePage/decision-case', isMobile: true }
},
{
path: 'contract-case',
title: 'H5合同智能审查案例',
component: () => import('@/views/H5/contractCase/index.vue'),
meta: { title: '合同智能审查', fullPath: '/h5HomePage/contract-case', isMobile: true }
}
]
});

14
f/web-kboss/src/views/H5/about/index.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="about-page">
<img class="about-logo" src="@/views/H5/images/logo.png" alt="开元云">
<div class="content-layer">
<section class="about-section">
<div class="about-container">
@ -163,6 +164,19 @@ export default {
box-sizing: border-box;
}
.about-logo {
// position: absolute;
// top: 0.28rem;
// left: 0.28rem;
margin-top: 0.28rem;
margin-left: 0.28rem;
z-index: 3;
display: block;
width: 1.58rem;
height: auto;
object-fit: contain;
}
.content-layer {
box-sizing: border-box;
padding: 0.64rem 0.28rem 0.34rem;

2
f/web-kboss/src/views/H5/components/footer/footer.vue
View File

@ -52,7 +52,7 @@
</div>
<div class="qr-item">
<div class="qr-code">
<img src="@/assets/image/img.png" alt="微信客服二维码">
<img src="@/assets/image/newkefu.png" alt="微信客服二维码">
</div>
<span class="qr-desc">微信客服</span>
</div>

482
f/web-kboss/src/views/H5/contractCase/index.vue Normal file
View File

@ -0,0 +1,482 @@
<template>
<div class="contract-case-h5">
<button type="button" class="page-back" aria-label="返回上一页" @click="goBack">
<span aria-hidden="true">‹</span>
</button>
<section class="case-hero">
<div class="case-container">
<h1>合同智能审查</h1>
<p>面向企业法务与业务签约全流程的专业审查智能体，聚合法规条文、企业内部风控标准、历史合同案例多维信息，依托大模型深度语义解析能力自动识别合同法律隐患，智能生成标准化修改建议与风险说明。</p>
</div>
</section>
<!-- <nav class="case-tabs">
<button v-for="tab in tabs" :key="tab.id" type="button" :class="{ active: activeTab === tab.id }" @click="scrollTo(tab.id)">{{ tab.label }}</button>
</nav> -->
<main>
<section id="scenarios" class="case-section">
<div class="case-container">
<header class="section-heading">
<h2>应用场景</h2>
<p>覆盖企业合同全生命周期审核链路</p>
</header>
<div class="scenario-grid">
<article v-for="item in scenarios" :key="item.title" class="scenario-card">
<div class="scenario-visual" :class="item.visual">
<div class="document" />
<span class="visual-mark">{{ item.mark }}</span>
</div>
<div class="scenario-content">
<span class="card-icon">{{ item.icon }}</span>
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</div>
</article>
</div>
</div>
</section>
<section id="solution" class="case-section solution-section">
<div class="case-container">
<header class="section-heading">
<h2>企业合同管理的困境与解决方案</h2>
<p>围绕数据归集、合同编审、知识沉淀、智能咨询四大核心维度</p>
</header>
<div class="solution-grid">
<section class="solution-column">
<h3 class="column-title danger"><span>!</span>现存困境</h3>
<article v-for="item in problems" :key="item.title" class="solution-item danger">
<span class="item-icon">{{ item.icon }}</span>
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.desc }}</p>
</div>
</article>
</section>
<section class="solution-column">
<h3 class="column-title primary"><span>✓</span>解决方案</h3>
<article v-for="item in solutions" :key="item.title" class="solution-item primary">
<span class="item-icon">{{ item.icon }}</span>
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.desc }}</p>
</div>
</article>
</section>
</div>
</div>
</section>
<section id="highlights" class="case-section">
<div class="case-container">
<header class="section-heading">
<h2>项目亮点</h2>
<p>全流程智能风控，覆盖四大核心审查能力</p>
</header>
<div class="highlight-grid">
<article v-for="(item, index) in highlights" :key="item.title" class="highlight-card">
<b>{{ index + 1 }}</b>
<div>
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</div>
</article>
</div>
</div>
</section>
</main>
</div>
</template>
<script>
export default {
name: 'H5ContractCase',
data() {
return {
activeTab: 'scenarios',
tabs: [{ id: 'scenarios', label: '应用场景' }, { id: 'solution', label: '解决方案' }, { id: 'highlights', label: '项目亮点' }],
scenarios: [
{ title: '业务合同初审', desc: '自动解析购销、服务、租赁、合作类通用业务合同，逐条对标企业风控红线快速筛查风险点，输出初审意见，减轻法务基础审核工作量，快速完成业务前置审批。', icon: '▤', mark: '✓', visual: 'blue' },
{ title: '复杂商事合同深度风控', desc: '针对投融资、知识产权、工程、保密竞业等高风险专项合同，联动完整法条与司法判例开展多层级风险推演，梳理权责漏洞、违约缺陷、管辖争议等深层隐患，输出完整风险评估文档。', icon: '⌑', mark: '!', visual: 'purple' },
{ title: '多方合同版本比对修订', desc: '自动识别甲乙双方多轮修改稿件差异，区分新增、删减、修改条款，高亮标注风险变更内容，同步生成版本对比台账，辅助商务谈判与法务复核，避免改稿遗漏关键风险。', icon: '⇄', mark: '↔', visual: 'green' }
],
problems: [
{ title: '文件信息割裂分散', desc: '合同、法规、历史判例、内部模板散落在不同存储渠道，无统一检索入口，审核时需跨文件反复核对。', icon: '◫' },
{ title: '风控经验难以留存复用', desc: '资深法务的审查要点、谈判底线、风险处置经验仅存于个人，人员交接后容易出现标准不统一。', icon: '◉' },
{ title: '人工审核耗时长、标准化弱', desc: '海量合同逐条人工审阅消耗大量人力，不同法务审核尺度参差不齐，紧急签约场景响应慢。', icon: '◷' }
],
solutions: [
{ title: '多源文件统一归集解析', desc: '批量上传PDF、Word、扫描件合同，OCR识别图文内容，统一结构化抽取交易主体、价款、履约、违约等关键信息。', icon: '▤' },
{ title: '全条款AI智能编审修正', desc: '分层扫描合同全部条款，对标法律法规与企业内控规则标记高中低三级风险，配套标准化合规替换条款。', icon: '✎' },
{ title: '法务知识库沉淀管理', desc: '将企业标准模板、审查清单、判例、内部风控制度转化为结构化知识库，沉淀企业专属法务资产。', icon: '▱' },
{ title: '自然语言法务智能问答', desc: '支持业务、法务人员以口语化提问查询合规要求、条款写法、风险后果，即时输出专业解答与参考条款。', icon: '?' }
],
highlights: [
{ title: '分级风险自动标注，配套合规整改条款', desc: '按重大、一般、提示三级划分风险，精准定位风险对应原文段落，每条风险同步匹配适配企业制度与现行法律的替换条款。' },
{ title: '多版本合同差异智能比对溯源', desc: '上传新旧合同、甲乙双方往来稿件，系统自动高亮新增、删减、变更条款，生成可追溯对比台账。' },
{ title: '全格式合同兼容识别，扫描件精准解析', desc: '支持Word、PDF、图片扫描件、盖章影像文件上传，内置高精度OCR图文识别，覆盖存量和增量合同文件。' },
{ title: '企业法务知识一键复用，审查标准统一', desc: '内置企业专属合同模板库、风控红线清单、行业判例库，新员工可直接复用成熟审查标准。' }
]
}
},
methods: {
goBack() {
if (window.history.length > 1) {
this.$router.back()
return
}
this.$router.push('/h5HomePage/index')
},
scrollTo(id) {
this.activeTab = id
const section = this.$el.querySelector(`#${id}`)
if (section) section.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}
}
</script>
<style lang="less" scoped>
.contract-case-h5 {
min-height: 100vh;
color: #182230;
background: #f6f8fb;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.case-container {
width: auto;
margin: 0 .32rem;
}
.page-back {
position: fixed;
top: .24rem;
left: .24rem;
z-index: 8;
display: grid;
place-items: center;
width: .64rem;
height: .64rem;
padding: 0;
color: #29415f;
font-size: .48rem;
line-height: 1;
background: rgba(255, 255, 255, .92);
border: 1px solid #dce5ef;
border-radius: 50%;
box-shadow: 0 .08rem .2rem rgba(31, 53, 84, .12);
}
.page-back span {
margin-top: -.05rem;
}
.case-hero {
min-height: 3.64rem;
padding: 0 .32rem;
background: url('~@/assets/image/bgimg.png') center / cover no-repeat;
}
.case-hero .case-container {
max-width: 5.9rem;
padding-top: 1.08rem;
margin: 0;
}
.case-hero h1 {
margin: 0 0 .2rem;
font-size: .42rem;
font-weight: 800;
line-height: 1.2;
}
.case-hero p {
margin: 0;
color: #465466;
font-size: .26rem;
line-height: 1.75;
}
.case-tabs {
position: sticky;
z-index: 5;
top: 0;
display: flex;
gap: .16rem;
padding: .16rem .32rem;
overflow-x: auto;
white-space: nowrap;
background: rgba(255, 255, 255, .96);
border-bottom: 1px solid #e6eaf0;
box-shadow: 0 .04rem .16rem rgba(15, 23, 42, .05);
}
.case-tabs button {
flex: 0 0 auto;
min-height: .58rem;
padding: 0 .22rem;
color: #5c6878;
font-size: .24rem;
font-weight: 600;
background: #f3f5f8;
border: 0;
border-radius: .12rem;
}
.case-tabs button.active {
color: #1769e0;
background: #eaf3ff;
}
.case-section {
padding: .68rem 0;
scroll-margin-top: .92rem;
}
.solution-section {
background: #edf5ff;
}
.section-heading {
margin-bottom: .38rem;
text-align: left;
}
.section-heading h2 {
margin: 0 0 .12rem;
font-size: .34rem;
font-weight: 800;
line-height: 1.35;
}
.section-heading p {
margin: 0;
color: #66758a;
font-size: .24rem;
line-height: 1.6;
}
.scenario-grid,
.solution-grid,
.highlight-grid {
display: grid;
grid-template-columns: 1fr;
gap: .22rem;
}
.scenario-card,
.solution-item,
.highlight-card {
background: #fff;
border: 1px solid #e8edf3;
border-radius: .16rem;
box-shadow: 0 .08rem .2rem rgba(15, 23, 42, .05);
}
.scenario-card {
overflow: hidden;
}
.scenario-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 2.1rem;
overflow: hidden;
}
.scenario-visual::before,
.scenario-visual::after {
position: absolute;
width: .8rem;
height: .8rem;
content: '';
border-radius: 50%;
opacity: .15;
}
.scenario-visual::before {
top: .2rem;
left: .5rem;
background: currentColor;
}
.scenario-visual::after {
right: .44rem;
bottom: .18rem;
background: currentColor;
}
.scenario-visual.blue {
color: #2563eb;
background: linear-gradient(135deg, #eaf3ff, #e8ecff);
}
.scenario-visual.purple {
color: #7c3aed;
background: linear-gradient(135deg, #f6edff, #ffeef7);
}
.scenario-visual.green {
color: #0d9488;
background: linear-gradient(135deg, #ecfdf5, #d8faf1);
}
.document {
position: relative;
z-index: 1;
width: .94rem;
height: 1.24rem;
background: repeating-linear-gradient(#fff 0 .15rem, #dbeafe .15rem .18rem);
border: .02rem solid currentColor;
border-radius: .06rem;
box-shadow: .1rem .1rem 0 currentColor;
opacity: .9;
}
.visual-mark {
position: absolute;
z-index: 2;
display: grid;
place-items: center;
width: .38rem;
height: .38rem;
color: #fff;
font-size: .22rem;
font-weight: 800;
background: currentColor;
border-radius: 50%;
transform: translate(.45rem, -.46rem);
}
.scenario-content {
padding: .28rem;
}
.card-icon,
.item-icon,
.highlight-card b {
display: inline-grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, #2684ff, #4e6df5);
}
.card-icon {
width: .42rem;
height: .42rem;
margin-right: .12rem;
font-size: .23rem;
border-radius: .1rem;
vertical-align: middle;
}
.scenario-content h3 {
display: inline;
margin: 0;
font-size: .29rem;
line-height: 1.45;
}
.scenario-content p,
.solution-item p,
.highlight-card p {
margin: .16rem 0 0;
color: #5d6a7b;
font-size: .24rem;
line-height: 1.72;
}
.solution-column {
display: grid;
gap: .18rem;
}
.column-title {
display: flex;
align-items: center;
gap: .12rem;
margin: .08rem 0;
font-size: .3rem;
}
.column-title span {
display: grid;
place-items: center;
width: .42rem;
height: .42rem;
color: #fff;
border-radius: .1rem;
}
.column-title.danger span {
background: #ef5757;
}
.column-title.primary span {
background: #2b7de9;
}
.solution-item {
display: flex;
gap: .18rem;
padding: .26rem;
border-left: .06rem solid #5e9df0;
}
.solution-item.danger {
border-left-color: #f36b6b;
}
.item-icon {
flex: 0 0 auto;
width: .48rem;
height: .48rem;
color: #1769e0;
font-size: .24rem;
background: #e7f1ff;
border-radius: .1rem;
}
.danger .item-icon {
color: #d84949;
background: #ffebeb;
}
.solution-item h4 {
margin: 0;
font-size: .27rem;
line-height: 1.45;
}
.solution-item p {
margin-top: .08rem;
}
.highlight-card {
display: flex;
gap: .18rem;
padding: .28rem;
}
.highlight-card b {
flex: 0 0 auto;
width: .48rem;
height: .48rem;
font-size: .22rem;
border-radius: .12rem;
}
.highlight-card h3 {
margin: 0;
font-size: .28rem;
line-height: 1.45;
}
.highlight-card p {
margin-top: .1rem;
}
</style>

385
f/web-kboss/src/views/H5/decisionCase/index.vue Normal file
View File

@ -0,0 +1,385 @@
<template>
<div class="decision-case-h5">
<button type="button" class="page-back" aria-label="返回上一页" @click="goBack">
<span aria-hidden="true">‹</span>
</button>
<section class="case-hero">
<img :src="bannerImg" alt="">
<div class="case-container">
<h1>投策智能体</h1>
<p>面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告。帮助企业快速梳理核心信息，预判市场走向，辅助降低决策偏差，提升投资方案的科学性与可行性
</p>
</div>
</section>
<!--
<nav class="case-tabs">
<button v-for="tab in tabs" :key="tab.id" type="button" :class="{ active: activeTab === tab.id }" @click="scrollTo(tab.id)">{{ tab.label }}</button>
</nav> -->
<main>
<section id="scenarios" class="case-section">
<div class="case-container">
<header class="section-heading">
<h2>应用场景</h2>
<p>覆盖企业投资决策全链路</p>
</header>
<div class="scenario-grid">
<article v-for="item in scenarios" :key="item.title" class="feature-card"><span class="card-icon">{{
item.icon }}</span>
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</article>
</div>
</div>
</section>
<section id="solution" class="case-section">
<div class="case-container">
<header class="section-heading">
<h2>企业决策的困境与解决方案</h2>
<p>聚焦数据收集、研报撰写、知识管理、智能应用四大维度</p>
</header>
<div class="solution-grid">
<section class="solution-card danger">
<h3><span>!</span>困境：数据丰富，洞察贫乏</h3>
<article v-for="item in problems" :key="item.title" class="list-item"><i>{{ item.icon }}</i>
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.desc }}</p>
</div>
</article>
</section>
<section class="solution-card primary">
<h3><span>✓</span>解决方案：E决策平台核心能力</h3>
<p class="intro">聚焦“数据收集、研报撰写、知识管理、智能应用”四大维度，帮助企业构建专属知识体系，赋能科学决策。</p>
<article v-for="item in abilities" :key="item.title" class="ability-item"><i>{{ item.icon }}</i>
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.desc }}</p>
</div>
</article>
</section>
</div>
</div>
</section>
<section id="highlights" class="case-section">
<div class="case-container">
<header class="section-heading">
<h2>项目亮点</h2>
<p>一次研究，双格式交付</p>
</header>
<div class="highlight-grid">
<article v-for="item in highlights" :key="item.title" class="feature-card"><span class="card-icon">{{
item.icon }}</span>
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</article>
</div>
</div>
</section>
</main>
</div>
</template>
<script>
export default {
name: 'H5DecisionCase',
data() {
return {
activeTab: 'scenarios', bannerImg: require('@/views/homePage/agentStore/img.jpg'),
tabs: [{ id: 'scenarios', label: '应用场景' }, { id: 'solution', label: '解决方案' }, { id: 'highlights', label: '项目亮点' }],
scenarios: [{ title: '投资可行性研究', desc: '自动收集行业数据、市场趋势、政策信息，生成专业的投资可行性分析报告，辅助决策者快速评估项目价值与风险。', icon: '▥' }, { title: '市场调研分析', desc: '整合多维度市场数据，自动分析市场规模、竞争格局、发展趋势，生成详实的市场调研报告，支撑业务决策。', icon: '▤' }, { title: '竞品分析', desc: '自动收集竞品信息，分析产品特性、市场策略、用户反馈，生成竞品对比分析报告，帮助企业制定差异化竞争策略。', icon: '▦' }],
problems: [{ title: '数据孤岛严重', desc: '数据分散在不同业务系统中、或者网站信源中，难以打通整合，阻碍全面分析与决策。', icon: '◫' }, { title: '知识沉淀难', desc: '关键业务知识与专家经验主要存在于个人头脑中，随人员流动而流失。', icon: '◉' }, { title: '报告撰写耗时费力', desc: '手工整理数据、制作高质量决策报告过程繁琐，效率低下，难以快速响应需求。', icon: '▧' }],
abilities: [{ title: '数据收集与整合', desc: '自动抓取内外部数据源，打破壁垒，统一数据口径', icon: '◫' }, { title: '知识管理与沉淀', desc: '将非结构化文档转化为结构化知识图谱，沉淀企业核心资产', icon: '▱' }, { title: '智能应用与问答', desc: '支持自然语言提问，快速检索与回答，即问即得关键洞察', icon: '?' }, { title: 'AI辅助研报撰写', desc: '输入主题自动生成内容，支持一键导出为PDF/PPT', icon: '▧' }],
highlights: [{ title: '一键生成PDF研究报告', desc: '在AI辅助生成研报内容后，系统支持一键导出为格式规范、内容详实的PDF研究报告，满足归档与深度阅读需求。', icon: '▧' }, { title: '一键生成PPT演示文稿', desc: '除了PDF，系统还支持一键导出为PPT演示文稿，并自动完成逻辑梳理、智能分页和专业排版，即导即用。', icon: '▥' }]
}
},
methods: {
goBack() {
if (window.history.length > 1) {
this.$router.back()
return
}
this.$router.push('/h5HomePage/index')
},
scrollTo(id) {
this.activeTab = id
const section = this.$el.querySelector(`#${id}`)
if (section) section.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}
}
</script>
<style lang="less" scoped>
.decision-case-h5 {
min-height: 100vh;
color: #182230;
background: #f6f8fb;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.case-container {
width: auto;
margin: 0 .32rem;
}
.page-back {
position: fixed;
top: .24rem;
left: .24rem;
z-index: 8;
display: grid;
place-items: center;
width: .64rem;
height: .64rem;
padding: 0;
color: #29415f;
font-size: .48rem;
line-height: 1;
background: rgba(255, 255, 255, .92);
border: 1px solid #dce5ef;
border-radius: 50%;
box-shadow: 0 .08rem .2rem rgba(31, 53, 84, .12);
}
.page-back span {
margin-top: -.05rem;
}
.case-hero {
position: relative;
min-height: 3.64rem;
overflow: hidden;
}
.case-hero::after {
position: absolute;
inset: 0;
content: '';
background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .73) 48%, rgba(255, 255, 255, .08) 100%);
}
.case-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.case-hero .case-container {
position: relative;
z-index: 1;
max-width: 5.8rem;
padding-top: 1.08rem;
}
.case-hero h1 {
margin: 0 0 .2rem;
font-size: .42rem;
font-weight: 800;
line-height: 1.2;
}
.case-hero p {
margin: 0;
color: #465466;
font-size: .26rem;
line-height: 1.75;
}
.case-tabs {
position: sticky;
z-index: 5;
top: 0;
display: flex;
gap: .16rem;
padding: .16rem .32rem;
overflow-x: auto;
white-space: nowrap;
background: rgba(255, 255, 255, .96);
border-bottom: 1px solid #e6eaf0;
box-shadow: 0 .04rem .16rem rgba(15, 23, 42, .05);
}
.case-tabs button {
flex: 0 0 auto;
min-height: .58rem;
padding: 0 .22rem;
color: #5c6878;
font-size: .24rem;
font-weight: 600;
background: #f3f5f8;
border: 0;
border-radius: .12rem;
}
.case-tabs button.active {
color: #1769e0;
background: #eaf3ff;
}
.case-section {
padding: .68rem 0;
scroll-margin-top: .92rem;
}
.case-section:nth-child(even) {
background: #edf5ff;
}
.section-heading {
margin-bottom: .38rem;
text-align: left;
}
.section-heading h2 {
margin: 0 0 .12rem;
font-size: .34rem;
font-weight: 800;
line-height: 1.35;
}
.section-heading p {
margin: 0;
color: #66758a;
font-size: .24rem;
line-height: 1.6;
}
.scenario-grid,
.solution-grid,
.highlight-grid {
display: grid;
grid-template-columns: 1fr;
gap: .22rem;
}
.feature-card,
.solution-card {
background: #fff;
border: 1px solid #e8edf3;
border-radius: .16rem;
box-shadow: 0 .08rem .2rem rgba(15, 23, 42, .05);
}
.feature-card {
padding: .28rem;
}
.card-icon {
display: inline-grid;
place-items: center;
width: .42rem;
height: .42rem;
margin-right: .12rem;
color: #fff;
font-size: .23rem;
vertical-align: middle;
background: linear-gradient(135deg, #2684ff, #4e6df5);
border-radius: .1rem;
}
.feature-card h3 {
display: inline;
margin: 0;
font-size: .29rem;
line-height: 1.45;
}
.feature-card p,
.solution-card p {
margin: .16rem 0 0;
color: #5d6a7b;
font-size: .24rem;
line-height: 1.72;
}
.solution-card {
padding: .28rem;
border-left: .06rem solid #5e9df0;
}
.solution-card.danger {
border-left-color: #f36b6b;
}
.solution-card h3 {
display: flex;
align-items: flex-start;
gap: .12rem;
margin: 0 0 .18rem;
color: #1769e0;
font-size: .3rem;
line-height: 1.42;
}
.solution-card.danger h3 {
color: #d84949;
}
.solution-card h3 span {
display: grid;
flex: 0 0 auto;
place-items: center;
width: .42rem;
height: .42rem;
color: #fff;
background: #2b7de9;
border-radius: .1rem;
}
.solution-card.danger h3 span {
background: #ef5757;
}
.list-item,
.ability-item {
display: flex;
gap: .18rem;
margin-top: .18rem;
}
.list-item i,
.ability-item i {
display: grid;
flex: 0 0 auto;
place-items: center;
width: .48rem;
height: .48rem;
color: #d84949;
font-style: normal;
font-size: .24rem;
background: #ffebeb;
border-radius: .1rem;
}
.ability-item {
padding: .18rem;
background: #f1f7ff;
border-radius: .12rem;
}
.ability-item i {
color: #fff;
background: linear-gradient(135deg, #2684ff, #4e6df5);
}
.list-item h4,
.ability-item h4 {
margin: 0 0 .06rem;
font-size: .27rem;
line-height: 1.45;
}
.list-item p,
.ability-item p {
margin: 0;
font-size: .24rem;
line-height: 1.65;
}
.intro {
margin: 0 0 .18rem !important;
}
</style>

BIN
f/web-kboss/src/views/H5/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 514 KiB

13
f/web-kboss/src/views/H5/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h5-container">
<div ref="mainContent" class="main" @scroll="handleScroll">
<div id="homeOut" ref="mainContent" class="main" @scroll="handleScroll">
<transition :name="transitionName" mode="out-in">
<router-view />
</transition>
@ -67,10 +67,12 @@ export default {
watch: {
'$route'(to) {
this.updateActiveTab(to.path)
this.resetScrollPosition()
}
},
mounted() {
this.updateActiveTab(this.$route.path)
this.resetScrollPosition()
},
methods: {
switchTab(tab) {
@ -81,6 +83,15 @@ export default {
updateActiveTab(path) {
this.activeTab = path.endsWith('/about') ? 'about' : 'index'
},
resetScrollPosition() {
this.$nextTick(() => {
const mainContent = this.$refs.mainContent
if (mainContent) mainContent.scrollTo({ top: 0, left: 0, behavior: 'auto' })
window.scrollTo(0, 0)
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
})
},
handleScroll() {
const mainContent = this.$refs.mainContent
if (mainContent) this.showBackToTop = mainContent.scrollTop > this.scrollThreshold

56
f/web-kboss/src/views/H5/official/index.vue
View File

@ -5,6 +5,7 @@
<div class="bg-orb bg-orb--3"></div>
<div class="bg-orb bg-orb--4"></div>
<img class="home-logo" src="@/views/H5/images/logo.png" alt="开元云">
<section class="home-hero">
<div class="hero-content">
<h1>一个平台，千行百业</h1>
@ -15,7 +16,7 @@
<button type="button" class="hero-secondary" @click="contactSales">联系销售</button>
</div>
</div>
</section>
</section>
<section id="h5-ai-solutions" class="ai-section">
<div class="section-inner">
@ -35,9 +36,11 @@
>
{{ item.scenarioLabel }}
</button>
<div class="solution-icon" v-html="item.icon"></div>
<div >
<div class="solution-icon" v-html="item.icon"></div>
<h3>{{ item.title }}</h3>
<p class="solution-subtitle">{{ item.subtitle }}</p>
</div>
<div class="solution-detail">
<strong>{{ item.detailTitle }}</strong>
<em>{{ item.detailSubTitle }}</em>
@ -58,7 +61,7 @@
<div class="section-inner">
<h2 class="section-title">成功案例</h2>
<div class="case-list">
<article
<article
v-for="(item, index) in caseCards"
:key="item.title"
class="case-card"
@ -126,7 +129,7 @@ export default {
bg: 'linear-gradient(145deg, rgba(208, 236, 249, .92), rgba(124, 196, 238, .78))',
shadow: '0 18px 54px rgba(80, 150, 220, .2)',
scenarioLabel: '投策智能体→',
scenarioPath: '/homePage/agentStore/decisionCase',
scenarioPath: '/h5HomePage/decision-case',
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="24" cy="18" r="6"/><circle cx="10" cy="34" r="5"/><circle cx="38" cy="34" r="5"/><path d="m20 23-7 7m15-7 7 7"/></svg>'
},
{
@ -194,7 +197,7 @@ export default {
bg: 'linear-gradient(145deg, rgba(200, 214, 242, .92), rgba(116, 146, 216, .78))',
shadow: '0 18px 54px rgba(60, 80, 160, .18)',
scenarioLabel: '合同智能审查→',
scenarioPath: '/homePage/agentStore/contractCase',
scenarioPath: '/h5HomePage/contract-case',
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 6h16l10 10v26a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4zM28 6v10h10M14 24h20M14 31h16"/></svg>'
},
{
@ -307,6 +310,17 @@ export default {
background: #f59e0b;
}
.home-logo {
position: absolute;
top: 0.28rem;
left: 0.28rem;
z-index: 3;
display: block;
width: 1.58rem;
height: auto;
object-fit: contain;
}
.home-hero {
position: relative;
min-height: 6.8rem;
@ -564,7 +578,7 @@ export default {
position: relative;
width: 100%;
aspect-ratio: 405 / 620;
height: auto;
height: 8rem;
perspective: 12rem;
cursor: pointer;
}
@ -606,7 +620,7 @@ export default {
.case-card-label {
flex: 1;
box-sizing: border-box;
padding: 0.28rem;
padding: 0.22rem 0.28rem;
display: flex;
flex-direction: column;
justify-content: center;
@ -614,14 +628,14 @@ export default {
.case-card-label strong {
color: #111827;
font-size: 0.32rem;
line-height: 1.35;
font-size: 0.38rem;
line-height: 1.28;
}
.case-card-label span {
margin-top: 0.1rem;
margin-top: 0.06rem;
color: #64748b;
font-size: 0.2rem;
font-size: 0.23rem;
}
.case-card-back {
@ -647,38 +661,38 @@ export default {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0.42rem 0.32rem;
padding: 0.32rem 0.28rem;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.case-content h3 {
margin: 0 0 0.16rem;
margin: 0 0 0.1rem;
color: #fff;
font-size: 0.36rem;
line-height: 1.2;
font-size: 0.6rem;
line-height: 1.18;
font-weight: 800;
}
.case-content h4,
.case-content p {
margin: 0 0 0.18rem;
margin: 0 0 0.12rem;
color: rgba(255, 255, 255, .9);
font-size: 0.22rem;
line-height: 1.72;
font-size: 0.3rem;
line-height: 1.55;
}
.case-content h4 {
margin-bottom: 0.22rem;
margin-bottom: 0.14rem;
color: #e0f2fe;
font-weight: 700;
}
.case-summary {
color: rgba(255, 255, 255, .82) !important;
font-size: 0.2rem !important;
line-height: 1.68 !important;
font-size: 0.23rem !important;
line-height: 1.52 !important;
}
.case-cta {