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

合同审查页面 #132

Merged
charles merged 1 commits from main into prod 2026-06-23 14:11:16 +08:00
Conversation 0 Commits 1 Files Changed 4 +913 -1
4 changed files with 913 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
f/web-kboss/src/assets/image/bgimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

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

@ -367,6 +367,12 @@ export const constantRoutes = [
name: "agentStoreDecisionCase",
hidden: true,
meta: { title: "投策智能体案例", onCache: true },
}, {
path: "agentStore/contractCase",
component: () => import("@/views/homePage/agentStore/contractCase.vue"),
name: "agentStoreContractCase",
hidden: true,
meta: { title: "合同智能审查案例", onCache: true },
}, {
path: "detail",
component: () => import("@/views/homePage/detail/index.vue"),

906
f/web-kboss/src/views/homePage/agentStore/contractCase.vue Normal file
View File

@ -0,0 +1,906 @@
<template>
<div class="contract-case-page" :class="{ 'has-fixed-tabs': isTabsFixed }">
<div class="decor decor--blue"></div>
<div class="decor decor--purple"></div>
<section class="case-hero" :style="{ backgroundImage: `url(${bannerImg})` }">
<div class="case-container">
<div class="case-hero__content">
<h1>合同智能审查</h1>
<p>
面向企业法务与业务签约全流程的专业审查智能体，聚合法规条文、企业内部风控标准、历史合同案例多维信息，依托大模型深度语义解析能力自动识别合同法律隐患，智能生成标准化修改建议与风险说明。
</p>
</div>
</div>
</section>
<section ref="caseTabs" class="case-tabs" :class="{ 'is-fixed': isTabsFixed }">
<div class="case-container">
<button
v-for="tab in tabs"
:key="tab.id"
type="button"
class="tab-item"
:class="{ 'tab-active': activeTab === tab.id }"
@click="scrollToSection(tab.id)"
>
{{ tab.label }}
</button>
</div>
</section>
<main class="case-main">
<section id="scenarios" class="case-section">
<div class="case-container">
<div class="section-heading">
<h2>应用场景</h2>
<p>覆盖企业合同全生命周期审核链路</p>
</div>
<div class="scenario-grid">
<article class="feature-card scenario-card">
<div class="feature-card__visual feature-card__visual--illustration visual-blue">
<svg viewBox="0 0 400 200" fill="none">
<circle cx="320" cy="40" r="60" fill="#3b82f6" opacity="0.1" />
<circle cx="80" cy="160" r="40" fill="#6366f1" opacity="0.1" />
<g transform="translate(120, 40)">
<rect x="0" y="20" width="120" height="140" rx="8" fill="#e0e7ff" stroke="#3b82f6" stroke-width="2" />
<line x1="20" y1="45" x2="100" y2="45" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
<line x1="20" y1="65" x2="100" y2="65" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
<line x1="20" y1="85" x2="80" y2="85" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
<rect x="15" y="10" width="120" height="140" rx="8" fill="#c7d2fe" stroke="#3b82f6" stroke-width="2" />
<line x1="35" y1="35" x2="115" y2="35" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
<line x1="35" y1="55" x2="115" y2="55" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
<line x1="35" y1="75" x2="95" y2="75" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
<rect x="30" y="0" width="120" height="140" rx="8" fill="white" stroke="#3b82f6" stroke-width="2" />
<line x1="50" y1="25" x2="130" y2="25" stroke="#3b82f6" stroke-width="2" />
<line x1="50" y1="45" x2="130" y2="45" stroke="#3b82f6" stroke-width="2" />
<line x1="50" y1="65" x2="110" y2="65" stroke="#3b82f6" stroke-width="2" />
<circle cx="135" cy="25" r="8" fill="#10b981" />
<path d="M 131 25 L 134 28 L 139 22" stroke="white" stroke-width="2" stroke-linecap="round" />
<circle cx="135" cy="45" r="8" fill="#10b981" />
<path d="M 131 45 L 134 48 L 139 42" stroke="white" stroke-width="2" stroke-linecap="round" />
<circle cx="135" cy="65" r="8" fill="#f59e0b" />
<line x1="131" y1="65" x2="139" y2="65" stroke="white" stroke-width="2" stroke-linecap="round" />
</g>
<g class="magnifier" transform="translate(60, 60)">
<circle cx="25" cy="25" r="20" fill="none" stroke="#3b82f6" stroke-width="3" />
<line x1="40" y1="40" x2="55" y2="55" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" />
<circle cx="25" cy="25" r="12" fill="#3b82f6" opacity="0.1" />
</g>
</svg>
</div>
<div class="feature-card__head">
<span class="icon-gradient">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z" />
</svg>
</span>
<h3>业务合同初审</h3>
</div>
<p>自动解析购销、服务、租赁、合作类通用业务合同，逐条对标企业风控红线快速筛查风险点，输出初审意见，减轻法务基础审核工作量，快速完成业务前置审批。</p>
</article>
<article class="feature-card scenario-card">
<div class="feature-card__visual feature-card__visual--illustration visual-purple">
<svg viewBox="0 0 400 200" fill="none">
<circle cx="100" cy="50" r="50" fill="#8b5cf6" opacity="0.1" />
<circle cx="300" cy="150" r="60" fill="#ec4899" opacity="0.1" />
<g transform="translate(140, 30)">
<path d="M 60 0 L 120 20 L 120 80 Q 120 120 60 140 Q 0 120 0 80 L 0 20 Z" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="2" opacity="0.6" />
<path d="M 60 15 L 105 30 L 105 75 Q 105 105 60 120 Q 15 105 15 75 L 15 30 Z" fill="#c4b5fd" stroke="#8b5cf6" stroke-width="2" opacity="0.8" />
<path d="M 60 30 L 90 40 L 90 70 Q 90 90 60 100 Q 30 90 30 70 L 30 40 Z" fill="white" stroke="#8b5cf6" stroke-width="2" />
<rect x="48" y="55" width="24" height="20" rx="2" fill="#8b5cf6" />
<path d="M 52 55 L 52 48 Q 52 42 60 42 Q 68 42 68 48 L 68 55" fill="none" stroke="#8b5cf6" stroke-width="3" />
<circle cx="60" cy="65" r="3" fill="white" />
</g>
<g class="risk-dots">
<circle cx="80" cy="100" r="6" fill="#ef4444" />
<circle cx="80" cy="100" r="10" fill="#ef4444" opacity="0.3" />
<circle cx="320" cy="80" r="6" fill="#f59e0b" />
<circle cx="320" cy="80" r="10" fill="#f59e0b" opacity="0.3" />
<circle cx="280" cy="140" r="6" fill="#10b981" />
<circle cx="280" cy="140" r="10" fill="#10b981" opacity="0.3" />
</g>
</svg>
</div>
<div class="feature-card__head">
<span class="icon-gradient">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</span>
<h3>复杂商事合同深度风控</h3>
</div>
<p>针对投融资、知识产权、工程、保密竞业等高风险专项合同，联动完整法条与司法判例开展多层级风险推演，梳理权责漏洞、违约缺陷、管辖争议等深层隐患，输出完整风控评估文档。</p>
</article>
<article class="feature-card scenario-card">
<div class="feature-card__visual feature-card__visual--illustration visual-green">
<svg viewBox="0 0 400 200" fill="none">
<circle cx="350" cy="60" r="50" fill="#10b981" opacity="0.1" />
<circle cx="50" cy="140" r="40" fill="#14b8a6" opacity="0.1" />
<g transform="translate(80, 40)">
<rect x="0" y="0" width="100" height="130" rx="6" fill="white" stroke="#10b981" stroke-width="2" />
<text x="10" y="20" font-size="10" fill="#10b981" font-weight="bold">V1.0</text>
<line x1="15" y1="35" x2="85" y2="35" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="50" x2="85" y2="50" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="65" x2="75" y2="65" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="80" x2="85" y2="80" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="95" x2="65" y2="95" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="50" x2="85" y2="50" stroke="#ef4444" stroke-width="2" />
</g>
<g transform="translate(220, 40)">
<rect x="0" y="0" width="100" height="130" rx="6" fill="white" stroke="#14b8a6" stroke-width="2" />
<text x="10" y="20" font-size="10" fill="#14b8a6" font-weight="bold">V2.0</text>
<line x1="15" y1="35" x2="85" y2="35" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="50" x2="85" y2="50" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="65" x2="85" y2="65" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="80" x2="75" y2="80" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
<line x1="15" y1="95" x2="85" y2="95" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
<rect x="13" y="63" width="74" height="4" fill="#10b981" opacity="0.3" />
</g>
<g class="compare-arrow" transform="translate(185, 90)">
<path d="M 0 15 L 20 15 M 15 10 L 20 15 L 15 20" stroke="#6366f1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g class="diff-tags">
<rect x="90" y="48" width="30" height="8" rx="2" fill="#ef4444" opacity="0.2" />
<text x="95" y="54" font-size="8" fill="#ef4444" font-weight="bold">删除</text>
<rect x="230" y="63" width="30" height="8" rx="2" fill="#10b981" opacity="0.2" />
<text x="235" y="69" font-size="8" fill="#10b981" font-weight="bold">新增</text>
</g>
</svg>
</div>
<div class="feature-card__head">
<span class="icon-gradient">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
</svg>
</span>
<h3>多方合同版本比对修订</h3>
</div>
<p>自动识别甲乙双方多轮修改稿件差异，区分新增、删减、修改条款，高亮标注风险变更内容，同步生成版本对比台账，辅助商务谈判与法务复核，避免改稿遗漏关键风险。</p>
</article>
</div>
</div>
</section>
<section id="solution" class="case-section solution-section">
<div class="case-container">
<div class="section-heading">
<h2>企业合同管理的困境与解决方案</h2>
<p>围绕数据归集、合同编审、知识沉淀、智能咨询四大核心维度</p>
</div>
<div class="solution-grid">
<div class="solution-column">
<div class="column-title column-title--danger">
<span>
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z" />
</svg>
</span>
<h3>现存困境</h3>
</div>
<article v-for="item in problems" :key="item.title" class="solution-item solution-item--danger">
<span class="solution-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
</svg>
</span>
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.desc }}</p>
</div>
</article>
</div>
<div class="solution-column">
<div class="column-title column-title--primary">
<span>
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
<h3>解决方案</h3>
</div>
<article v-for="item in solutions" :key="item.title" class="solution-item solution-item--primary">
<span class="solution-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
</svg>
</span>
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.desc }}</p>
</div>
</article>
</div>
</div>
</div>
</section>
<section id="highlights" class="case-section">
<div class="case-container">
<div class="section-heading">
<h2>项目亮点</h2>
<p>全流程智能风控，四大核心审查能力落地</p>
</div>
<div class="highlight-grid">
<article v-for="(item, index) in highlights" :key="item.title" class="highlight-card">
<span class="highlight-num">{{ index + 1 }}</span>
<div>
<h3>{{ item.title }}</h3>
<p>{{ item.desc }}</p>
</div>
</article>
</div>
</div>
</section>
</main>
</div>
</template>
<script>
export default {
name: 'ContractCase',
data() {
return {
activeTab: 'scenarios',
isTabsFixed: false,
tabsOriginTop: 0,
bannerImg: require('@/assets/image/bgimg.png'),
tabs: [
{ id: 'scenarios', label: '应用场景' },
{ id: 'solution', label: '解决方案' },
{ id: 'highlights', label: '项目亮点' }
],
scenarios: [
{
title: '业务合同初审',
desc: '自动解析购销、服务、租赁、合作类通用业务合同，逐条对标企业风控红线快速筛查风险点，输出初审意见，减轻法务基础审核工作量。',
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z',
visualClass: 'visual-blue'
},
{
title: '复杂商事合同深度风控',
desc: '针对投融资、知识产权、工程、保密竞业等高风险专项合同，联动完整法条与司法判例开展多层级风险推演，输出完整风控评估文档。',
icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
visualClass: 'visual-purple'
},
{
title: '多方合同版本比对修订',
desc: '自动识别甲乙双方多轮修改稿件差异，区分新增、删减、修改条款，高亮标注风险变更内容，辅助商务谈判与法务复核。',
icon: 'M8 7h12m0 0l-4-4m4 4l-4 4M16 17H4m0 0l4 4m-4-4l4-4',
visualClass: 'visual-green'
}
],
problems: [
{
title: '文件信息割裂分散',
desc: '合同、法规、历史判例、内部模板散落在不同存储渠道，无统一检索入口，审核时需跨文件反复核对。',
icon: 'M4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.58 4 8 4s8-1.79 8-4M4 7c0-2.21 3.58-4 8-4s8 1.79 8 4'
},
{
title: '风控经验难以留存复用',
desc: '资深法务的审查要点、谈判底线、风险处置经验仅存于个人，人员交接后容易出现标准不统一。',
icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
},
{
title: '人工审核耗时长、标准化弱',
desc: '海量合同逐条人工审阅消耗大量人力，不同法务审核尺度参差不齐，紧急签约场景响应慢。',
icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
}
],
solutions: [
{
title: '多源文件统一归集解析',
desc: '批量上传 PDF、Word、扫描件合同，OCR 识别图文内容，统一结构化抽取交易主体、价款、履约、违约等关键信息。',
icon: 'M4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.58 4 8 4s8-1.79 8-4'
},
{
title: '全条款 AI 智能编审修正',
desc: '分层扫描合同全部条款，对标法律法规与企业内控规则标记高中低三级风险，配套标准化合规替换条款。',
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z'
},
{
title: '法务知识库沉淀管理',
desc: '将企业标准模板、审查清单、判例、内部风控制度转化为结构化知识库，沉淀企业专属法务资产。',
icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253'
},
{
title: '自然语言法务智能问答',
desc: '支持业务、法务人员以口语化提问查询合规要求、条款写法、风险后果，即时输出专业解答与参考条款。',
icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'
}
],
highlights: [
{
title: '分级风险自动标注，配套合规整改条款',
desc: '按重大、一般、提示三级划分风险，精准定位风险对应原文段落，每条风险同步匹配适配企业制度与现行法律的替换条款。'
},
{
title: '多版本合同差异智能比对溯源',
desc: '上传新旧合同、甲乙双方往来稿件，系统自动高亮新增、删减、变更条款，生成可追溯对比台账。'
},
{
title: '全格式合同兼容识别，扫描件精准解析',
desc: '支持 Word、PDF、图片扫描件、盖章影像文件上传，内置高精度 OCR 图文识别，覆盖存量和增量合同文件。'
},
{
title: '企业法务知识一键复用，审查标准统一',
desc: '内置企业专属合同模板库、风控红线清单、行业判例库，新员工可直接复用成熟审查标准。'
}
]
}
},
mounted() {
this.$nextTick(() => {
const scroller = this.getScrollContainer()
this.resetScrollTop(scroller)
this.refreshTabsOrigin()
scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
this.handlePageScroll()
})
},
beforeDestroy() {
this.getScrollContainer().removeEventListener('scroll', this.handlePageScroll)
},
methods: {
getScrollContainer() {
return document.getElementById('homeOut') || window
},
resetScrollTop(scroller) {
if (scroller === window) {
window.scrollTo(0, 0)
} else {
scroller.scrollTop = 0
}
this.isTabsFixed = false
},
refreshTabsOrigin() {
const scroller = this.getScrollContainer()
this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
},
getScrollOffset() {
const tabs = this.$el.querySelector('.case-tabs')
return (tabs ? tabs.offsetHeight : 0) + 12
},
getElementTopInScroller(element, scroller) {
if (scroller === window) {
return element.getBoundingClientRect().top + window.pageYOffset
}
return element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
},
getScrollerTop(scroller) {
return scroller === window ? window.pageYOffset : scroller.scrollTop
},
scrollToSection(sectionName) {
this.activeTab = sectionName
const element = this.$el.querySelector(`#${sectionName}`)
if (!element) return
const scroller = this.getScrollContainer()
const top = this.getElementTopInScroller(element, scroller) - this.getScrollOffset()
scroller.scrollTo({ top, behavior: 'smooth' })
},
handlePageScroll() {
const scroller = this.getScrollContainer()
const scrollerTop = this.getScrollerTop(scroller)
this.isTabsFixed = scrollerTop >= this.tabsOriginTop
const offsetTop = scrollerTop + this.getScrollOffset() + 24
const currentTab = this.tabs
.map(tab => {
const element = this.$el.querySelector(`#${tab.id}`)
return element ? { id: tab.id, top: this.getElementTopInScroller(element, scroller) } : null
})
.filter(Boolean)
.reverse()
.find(tab => offsetTop >= tab.top)
if (currentTab) this.activeTab = currentTab.id
},
handleContact() {
this.$message.info('感谢您的关注，我们将尽快与您联系')
}
}
}
</script>
<style scoped>
.contract-case-page {
position: relative;
width: 100%;
min-height: 100vh;
overflow: visible;
color: #111827;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.contract-case-page *,
.contract-case-page *::before,
.contract-case-page *::after {
box-sizing: border-box;
}
.contract-case-page h1,
.contract-case-page h2,
.contract-case-page h3,
.contract-case-page h4,
.contract-case-page p {
margin-top: 0;
font-family: inherit;
}
.case-container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.decor {
position: absolute;
border-radius: 999px;
filter: blur(64px);
opacity: 0.12;
pointer-events: none;
}
.decor--blue {
top: 80px;
left: 40px;
width: 256px;
height: 256px;
background: linear-gradient(135deg, #60a5fa, #a855f7);
}
.decor--purple {
top: 400px;
right: 80px;
width: 320px;
height: 320px;
background: linear-gradient(135deg, #c084fc, #3b82f6);
}
.case-hero {
position: relative;
min-height: min(446px, calc(100vw * 446 / 1551));
padding: 120px 0 86px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.case-hero__content {
max-width: 900px;
}
.case-hero h1 {
margin: 0 0 24px;
color: #111827;
font-size: 48px;
font-weight: 800;
line-height: 1.1;
}
.case-hero p {
max-width: 980px;
margin: 0;
color: #4b5563;
font-size: 20px;
line-height: 1.75;
}
.case-tabs {
position: sticky;
top: 0;
z-index: 80;
height: 60px;
background: #fff;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.case-tabs.is-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
}
.contract-case-page.has-fixed-tabs .case-main {
padding-top: 60px;
}
.case-tabs .case-container {
display: flex;
align-items: center;
gap: 32px;
height: 100%;
}
.tab-item {
height: 100%;
padding: 12px 16px;
color: #374151;
font-weight: 500;
background: transparent;
border: 0;
border-radius: 8px;
transition: all 0.3s ease;
}
.tab-item:hover,
.tab-active {
color: #3b82f6;
background: #eff6ff;
}
.case-main {
padding-bottom: 80px;
}
.case-section {
position: relative;
padding: 72px 0;
}
.solution-section {
background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}
.section-heading {
margin-bottom: 48px;
text-align: center;
}
.section-heading h2 {
margin: 0 0 16px;
color: #111827;
font-size: 40px;
font-weight: 800;
}
.section-heading p {
margin: 0;
color: #4b5563;
font-size: 20px;
}
.scenario-grid,
.solution-grid,
.highlight-grid {
display: grid;
gap: 32px;
}
.scenario-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.solution-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
}
.highlight-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-card,
.solution-item,
.highlight-card {
background: #fff;
border-radius: 18px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
transition: all 0.3s ease;
}
.feature-card:hover,
.solution-item:hover,
.highlight-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}
.feature-card {
overflow: hidden;
}
.feature-card__visual {
display: flex;
align-items: center;
justify-content: center;
height: 190px;
}
.feature-card__visual svg {
width: 84px;
height: 84px;
}
.feature-card__visual--illustration {
position: relative;
height: 192px;
overflow: hidden;
}
.feature-card__visual--illustration > svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.magnifier,
.compare-arrow {
transition: transform 0.3s ease;
transform-box: fill-box;
transform-origin: center;
}
.scenario-card:hover .magnifier {
transform: scale(1.1);
}
.scenario-card:hover .compare-arrow {
transform: translateX(8px);
}
.scenario-card:hover .risk-dots {
animation: case-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.scenario-card:hover .diff-tags {
animation: case-bounce 1s infinite;
}
.visual-blue {
color: #2563eb;
background: linear-gradient(135deg, #eff6ff, #e0e7ff);
}
.visual-purple {
color: #7c3aed;
background: linear-gradient(135deg, #faf5ff, #fce7f3);
}
.visual-green {
color: #0d9488;
background: linear-gradient(135deg, #f0fdf4, #ccfbf1);
}
@keyframes case-pulse {
50% {
opacity: 0.5;
}
}
@keyframes case-bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
.feature-card__head {
display: flex;
align-items: center;
gap: 12px;
padding: 32px 32px 0;
margin-bottom: 16px;
}
.feature-card h3,
.solution-item h4,
.highlight-card h3 {
margin: 0;
color: #111827;
font-size: 20px;
font-weight: 700;
}
.feature-card p,
.solution-item p,
.highlight-card p {
margin: 0;
color: #4b5563;
line-height: 1.7;
}
.feature-card > p {
padding: 0 32px 32px;
}
.icon-gradient,
.solution-icon,
.column-title span,
.highlight-num {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
border-radius: 12px;
}
.icon-gradient {
width: 40px;
height: 40px;
}
.icon-gradient svg {
width: 20px;
height: 20px;
}
.column-title {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.column-title span {
width: 48px;
height: 48px;
box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}
.column-title--danger span {
background: linear-gradient(135deg, #ef4444, #f97316);
}
.column-title h3 {
margin: 0;
color: #111827;
font-size: 26px;
font-weight: 800;
}
.column-title svg,
.solution-icon svg {
width: 24px;
height: 24px;
}
.solution-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.solution-item {
display: flex;
gap: 20px;
padding: 24px;
border-left: 4px solid #60a5fa;
}
.solution-item--danger {
border-left-color: #f87171;
}
.solution-item--danger .solution-icon {
background: linear-gradient(135deg, #fee2e2, #ffedd5);
color: #dc2626;
}
.solution-icon {
width: 56px;
height: 56px;
}
.solution-item h4 {
margin-bottom: 8px;
}
.highlight-card {
display: flex;
gap: 18px;
padding: 32px;
}
.highlight-num {
width: 48px;
height: 48px;
font-size: 22px;
font-weight: 800;
}
.highlight-card h3 {
margin-bottom: 12px;
}
.case-cta {
padding: 80px 0;
color: #fff;
background: linear-gradient(90deg, #334155, #1e293b);
}
.case-cta__inner {
max-width: 896px;
text-align: center;
}
.case-cta h2 {
margin: 0 0 24px;
font-size: 40px;
font-weight: 800;
}
.case-cta p {
margin: 0 0 32px;
color: rgba(255, 255, 255, 0.9);
font-size: 20px;
}
.case-cta button {
padding: 16px 32px;
color: #2563eb;
font-size: 18px;
font-weight: 700;
background: #fff;
border: 0;
border-radius: 8px;
transition: all 0.2s;
}
.case-cta button:hover {
background: #eff6ff;
}
@media (max-width: 1024px) {
.scenario-grid,
.solution-grid,
.highlight-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.case-hero {
padding: 72px 0 56px;
}
.case-hero h1 {
font-size: 36px;
}
.case-hero p,
.section-heading p,
.case-cta p {
font-size: 16px;
}
.case-tabs {
overflow-x: auto;
}
.case-tabs .case-container {
gap: 12px;
min-width: max-content;
}
.section-heading h2,
.case-cta h2 {
font-size: 30px;
}
.feature-card__head,
.feature-card > p,
.solution-item,
.highlight-card {
padding: 24px;
}
}
</style>

2
f/web-kboss/src/views/homePage/agentStore/index.vue
View File

@ -120,7 +120,7 @@ export default {
{ id: 1, name: 'E招标', description: '全流程电子化招标交易核心工具，支持多品类招标业务线上开展，实现招投标全过程无纸化运行。搭载多CA互认、在线清标、电子保函等实用功能，保障招标合规高效。', tags: ['多CA互认', '在线清标', '电子保函'], category: 'general', subCategory: 'bidding', iconPath: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', decorClass: 'decor-gradient-blue', iconClass: 'icon-gradient-blue' },
{ id: 2, name: 'E投标', description: '适配全品类电子招投标场景的线上投标工具，支持在线完成信息注册、标书获取、文件编制、加密提交全流程操作。实时同步招标变更与澄清信息，保障投标过程安全可追溯。', tags: ['在线签章', '加密提交', '变更同步'], category: 'general', subCategory: 'bidding', iconPath: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green', externalUrl: 'https://bid-ocai-v2.jinan.opencomputing.cn/' },
{ id: 3, name: 'E评标', description: '智能化线上评审系统，覆盖专家签到、清标比对、符合性评审、打分汇总、报告生成全流程。支持标书交叉比对、废标在线操作与澄清收发，提升评标效率与规范性。', tags: ['专家云签', '交叉比对', '智能打分'], category: 'general', subCategory: 'bidding', iconPath: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4', decorClass: 'decor-gradient-indigo', iconClass: 'icon-gradient-indigo' },
{ id: 4, name: '合同智能审查', description: 'AI驱动的办公智能体，可快速识别合同中的风险条款、表述歧义、合规漏洞，自动标注问题位置并给出修改建议。支持多类型合同模板适配，大幅缩短人工审查时长。', tags: ['风险识别', '批量审查', '审查报告'], category: 'general', subCategory: 'office', iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', decorClass: 'decor-gradient-amber', iconClass: 'icon-gradient-amber' },
{ id: 4, name: '合同智能审查', description: 'AI驱动的办公智能体，可快速识别合同中的风险条款、表述歧义、合规漏洞，自动标注问题位置并给出修改建议。支持多类型合同模板适配，大幅缩短人工审查时长。', tags: ['风险识别', '批量审查', '审查报告'], category: 'general', subCategory: 'office', iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', decorClass: 'decor-gradient-amber', iconClass: 'icon-gradient-amber', casePath: '/homePage/agentStore/contractCase' },
{ id: 5, name: '投策智能体', description: '面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告，提升投资方案科学性。', tags: ['场景模拟', '可视化报告', '风险预判'], category: 'general', subCategory: 'office', iconPath: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', decorClass: 'decor-gradient-purple', iconClass: 'icon-gradient-purple', casePath: '/homePage/agentStore/decisionCase' },
{ id: 6, name: '采伐智审', description: '面向林业管理的行业智能体，可在线完成采伐申请材料的智能核验，自动比对采伐范围、树种、蓄积量等核心指标与合规要求，快速识别违规申请，助力林业资源可持续利用。', tags: ['智能核验', '合规比对', '违规识别'], category: 'industry', subCategory: 'forestry', iconPath: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L22 12l-6.714 3.143L13 22l-2.286-6.857L4 12l6.714-3.143L13 2z', decorClass: 'decor-gradient-emerald', iconClass: 'icon-gradient-emerald' },
{ id: 7, name: '燃机智慧监盘', description: '能源领域工业智能体，实时采集燃机运行的温度、压力、振动等多维度数据，通过AI算法识别异常运行征兆，提前预判潜在故障，保障燃机稳定运行，降低运维成本。', tags: ['实时监测', '故障预判', '智能告警'], category: 'industry', subCategory: 'energy', iconPath: 'M13 10V3L4 14h7v7l9-11h-7z', decorClass: 'decor-gradient-red', iconClass: 'icon-gradient-red' },