训推 智能体商店及案例
This commit is contained in:
parent
bb21b374d0
commit
6dff3cbdbc
@ -349,6 +349,24 @@ export const constantRoutes = [
|
|||||||
name: "computeMarketCreateInstance",
|
name: "computeMarketCreateInstance",
|
||||||
hidden: true,
|
hidden: true,
|
||||||
meta: { title: "创建实例", onCache: true },
|
meta: { title: "创建实例", onCache: true },
|
||||||
|
}, {
|
||||||
|
path: "trainPlatform",
|
||||||
|
component: () => import("@/views/homePage/trainPlatform"),
|
||||||
|
name: "trainPlatform",
|
||||||
|
hidden: true,
|
||||||
|
meta: { title: "训推平台", onCache: true },
|
||||||
|
}, {
|
||||||
|
path: "agentStore",
|
||||||
|
component: () => import("@/views/homePage/agentStore"),
|
||||||
|
name: "agentStore",
|
||||||
|
hidden: true,
|
||||||
|
meta: { title: "智能体商店", onCache: true },
|
||||||
|
}, {
|
||||||
|
path: "agentStore/decisionCase",
|
||||||
|
component: () => import("@/views/homePage/agentStore/decisionCase.vue"),
|
||||||
|
name: "agentStoreDecisionCase",
|
||||||
|
hidden: true,
|
||||||
|
meta: { title: "投策智能体案例", onCache: true },
|
||||||
}, {
|
}, {
|
||||||
path: "detail",
|
path: "detail",
|
||||||
component: () => import("@/views/homePage/detail/index.vue"),
|
component: () => import("@/views/homePage/detail/index.vue"),
|
||||||
|
|||||||
477
f/web-kboss/src/views/homePage/agentStore/agent.css
Normal file
477
f/web-kboss/src/views/homePage/agentStore/agent.css
Normal file
@ -0,0 +1,477 @@
|
|||||||
|
.agent-store-page {
|
||||||
|
color: #111827;
|
||||||
|
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-store-page *,
|
||||||
|
.agent-store-page *::before,
|
||||||
|
.agent-store-page *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-bg {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin-left: calc(50% - 50vw);
|
||||||
|
margin-right: calc(50% - 50vw);
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ede9fe 100%);
|
||||||
|
background-size: 50px 50px, 50px 50px, auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-screen {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
max-width: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-circle {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(80px);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-circle--blue {
|
||||||
|
top: 5%;
|
||||||
|
left: -10%;
|
||||||
|
width: 800px;
|
||||||
|
height: 800px;
|
||||||
|
background: rgba(59, 130, 246, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-circle--purple {
|
||||||
|
top: 40%;
|
||||||
|
right: -8%;
|
||||||
|
width: 700px;
|
||||||
|
height: 700px;
|
||||||
|
background: rgba(139, 92, 246, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-circle--green {
|
||||||
|
bottom: 10%;
|
||||||
|
left: 20%;
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
background: rgba(16, 185, 129, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 80px 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section--compact {
|
||||||
|
padding: 80px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: min(100%, 920px);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 650;
|
||||||
|
background: #dbeafe;
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg--xs {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg--sm {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
font-size: clamp(44px, 5vw, 68px);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.08;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 0 auto 36px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blur {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(80px);
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blur--blue {
|
||||||
|
top: -80px;
|
||||||
|
right: -60px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: rgba(59, 130, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blur--indigo {
|
||||||
|
bottom: -60px;
|
||||||
|
left: -40px;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
background: rgba(99, 102, 241, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-section {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 64px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-section--apps {
|
||||||
|
padding: 48px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner {
|
||||||
|
width: min(100%, 1280px);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-primary,
|
||||||
|
.tabs-secondary {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-primary {
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-secondary {
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 10px 24px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 9999px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-primary .tab-button:not(.is-main-active):hover,
|
||||||
|
.tabs-secondary .tab-button:not(.is-sub-active):hover {
|
||||||
|
color: #2563eb;
|
||||||
|
background: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-secondary .tab-button:not(.is-sub-active) {
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button.is-main-active,
|
||||||
|
.tab-button.is-sub-active {
|
||||||
|
color: #fff;
|
||||||
|
background: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 32px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card__decor {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
opacity: 0.6;
|
||||||
|
transform: translate(25%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card__body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card__header h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card__body p {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.625;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 12px;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-size: 14px;
|
||||||
|
background: rgba(37, 99, 235, 0.1);
|
||||||
|
border: 1px solid rgba(37, 99, 235, 0.2);
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.use-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.use-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.use-btn--sm {
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 8px 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
min-height: 46px;
|
||||||
|
padding: 12px 32px;
|
||||||
|
font-size: 18px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel {
|
||||||
|
padding: 40px 32px;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel__title {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel__desc {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-blue {
|
||||||
|
background: linear-gradient(to bottom right, #dbeafe, #eff6ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-blue {
|
||||||
|
background: linear-gradient(to bottom right, #3b82f6, #2563eb);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-green {
|
||||||
|
background: linear-gradient(to bottom right, #dcfce7, #f0fdf4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-green {
|
||||||
|
background: linear-gradient(to bottom right, #22c55e, #16a34a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-indigo {
|
||||||
|
background: linear-gradient(to bottom right, #e0e7ff, #eef2ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-indigo {
|
||||||
|
background: linear-gradient(to bottom right, #6366f1, #4f46e5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-amber {
|
||||||
|
background: linear-gradient(to bottom right, #fef3c7, #fffbeb);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-amber {
|
||||||
|
background: linear-gradient(to bottom right, #f59e0b, #d97706);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-purple {
|
||||||
|
background: linear-gradient(to bottom right, #f3e8ff, #faf5ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-purple {
|
||||||
|
background: linear-gradient(to bottom right, #a855f7, #9333ea);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floating {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating {
|
||||||
|
animation: floating 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.app-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.hero-section,
|
||||||
|
.hero-section--compact {
|
||||||
|
padding: 48px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-section {
|
||||||
|
padding: 52px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card {
|
||||||
|
min-height: auto;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card__header {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel {
|
||||||
|
padding: 34px 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
760
f/web-kboss/src/views/homePage/agentStore/decisionCase.vue
Normal file
760
f/web-kboss/src/views/homePage/agentStore/decisionCase.vue
Normal file
@ -0,0 +1,760 @@
|
|||||||
|
<template>
|
||||||
|
<div class="decision-case-page" :class="{ 'has-fixed-tabs': isTabsFixed }">
|
||||||
|
<div class="decor decor--blue"></div>
|
||||||
|
<div class="decor decor--purple"></div>
|
||||||
|
<div class="decor decor--deep-blue"></div>
|
||||||
|
<div class="decor decor--deep-purple"></div>
|
||||||
|
|
||||||
|
<section class="case-hero">
|
||||||
|
<img class="case-hero__bg" :src="bannerImg" alt="">
|
||||||
|
<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 v-for="item in scenarios" :key="item.title" class="feature-card">
|
||||||
|
<div class="feature-card__head">
|
||||||
|
<div class="icon-gradient">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>{{ item.title }}</h3>
|
||||||
|
</div>
|
||||||
|
<p>{{ item.desc }}</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="solution" class="case-section">
|
||||||
|
<div class="case-container">
|
||||||
|
<div class="section-heading">
|
||||||
|
<h2>企业决策的困境与解决方案</h2>
|
||||||
|
<p>聚焦数据收集、研报撰写、知识管理、智能应用四大维度</p>
|
||||||
|
</div>
|
||||||
|
<div class="solution-grid">
|
||||||
|
<article class="problem-card">
|
||||||
|
<h3>
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||||
|
</svg>
|
||||||
|
困境：数据丰富，洞察贫乏
|
||||||
|
</h3>
|
||||||
|
<div class="list-block">
|
||||||
|
<div v-for="item in problems" :key="item.title" class="list-item list-item--danger">
|
||||||
|
<div class="list-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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>{{ item.title }}</h4>
|
||||||
|
<p>{{ item.desc }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="solution-card">
|
||||||
|
<h3>
|
||||||
|
<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>
|
||||||
|
解决方案：E决策平台核心能力
|
||||||
|
</h3>
|
||||||
|
<p class="solution-card__intro">
|
||||||
|
聚焦“数据收集、研报撰写、知识管理、智能应用”四大维度，帮助企业构建专属知识体系，赋能科学决策。
|
||||||
|
</p>
|
||||||
|
<div class="ability-list">
|
||||||
|
<div v-for="item in abilities" :key="item.title" class="ability-item">
|
||||||
|
<div class="ability-icon icon-gradient">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>{{ item.title }}</h4>
|
||||||
|
<p>{{ item.desc }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</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 in highlights" :key="item.title" class="feature-card">
|
||||||
|
<div class="feature-card__head">
|
||||||
|
<div class="icon-gradient">
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>{{ item.title }}</h3>
|
||||||
|
</div>
|
||||||
|
<p>{{ item.desc }}</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section class="case-cta">
|
||||||
|
<div class="case-container case-cta__inner">
|
||||||
|
<h2>开始使用投策智能体</h2>
|
||||||
|
<p>让AI赋能您的投资决策，一次研究，双格式交付</p>
|
||||||
|
<button type="button" @click="handleContact">联系销售</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DecisionCase',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeTab: 'scenarios',
|
||||||
|
isTabsFixed: false,
|
||||||
|
tabsOriginTop: 0,
|
||||||
|
tabs: [
|
||||||
|
{ id: 'scenarios', label: '应用场景' },
|
||||||
|
{ id: 'solution', label: '解决方案' },
|
||||||
|
{ id: 'highlights', label: '项目亮点' }
|
||||||
|
],
|
||||||
|
scenarios: [
|
||||||
|
{
|
||||||
|
title: '投资可行性研究',
|
||||||
|
desc: '自动收集行业数据、市场趋势、政策信息，生成专业的投资可行性分析报告，辅助决策者快速评估项目价值与风险。',
|
||||||
|
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '市场调研分析',
|
||||||
|
desc: '整合多维度市场数据，自动分析市场规模、竞争格局、发展趋势，生成详实的市场调研报告，支撑业务决策。',
|
||||||
|
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '竞品分析',
|
||||||
|
desc: '自动收集竞品信息，分析产品特性、市场策略、用户反馈，生成竞品对比分析报告，帮助企业制定差异化竞争策略。',
|
||||||
|
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
problems: [
|
||||||
|
{
|
||||||
|
title: '数据孤岛严重',
|
||||||
|
desc: '数据分散在不同业务系统中、或者网站信源中，难以打通整合，阻碍全面分析与决策。',
|
||||||
|
icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-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: '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'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
abilities: [
|
||||||
|
{
|
||||||
|
title: '数据收集与整合',
|
||||||
|
desc: '自动抓取内外部数据源，打破壁垒，统一数据口径',
|
||||||
|
icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.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'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'AI辅助研报撰写',
|
||||||
|
desc: '输入主题自动生成内容，支持一键导出PDF/PPT',
|
||||||
|
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 01.293.707V19a2 2 0 01-2 2z'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
highlights: [
|
||||||
|
{
|
||||||
|
title: '一键生成PDF研究报告',
|
||||||
|
desc: '在AI辅助生成研报内容后，系统支持一键导出为格式规范、内容详实的PDF研究报告，满足归档与深度阅读需求。',
|
||||||
|
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 01.293.707V19a2 2 0 01-2 2z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '一键生成PPT演示文稿',
|
||||||
|
desc: '除了PDF，系统还支持一键导出为PPT演示文稿，并自动完成逻辑梳理、智能分页和专业排版，即导即用。',
|
||||||
|
icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
bannerImg: require('./img.jpg')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const scroller = this.getScrollContainer()
|
||||||
|
this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
|
||||||
|
scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
|
||||||
|
this.handlePageScroll()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.getScrollContainer().removeEventListener('scroll', this.handlePageScroll)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getScrollContainer() {
|
||||||
|
return document.getElementById('homeOut') || window
|
||||||
|
},
|
||||||
|
getScrollOffset() {
|
||||||
|
const tabs = this.$el.querySelector('.case-tabs')
|
||||||
|
const tabsHeight = tabs ? tabs.offsetHeight : 0
|
||||||
|
return tabsHeight + 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) {
|
||||||
|
const scroller = this.getScrollContainer()
|
||||||
|
const offset = this.getScrollOffset()
|
||||||
|
const top = this.getElementTopInScroller(element, scroller) - offset
|
||||||
|
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>
|
||||||
|
.decision-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%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision-case-page *,
|
||||||
|
.decision-case-page *::before,
|
||||||
|
.decision-case-page *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-container {
|
||||||
|
width: min(100%, 1280px);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 999px;
|
||||||
|
filter: blur(64px);
|
||||||
|
opacity: 0.1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor--blue {
|
||||||
|
top: 80px;
|
||||||
|
left: 40px;
|
||||||
|
width: 256px;
|
||||||
|
height: 256px;
|
||||||
|
background: linear-gradient(135deg, #60a5fa, #a855f7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor--purple {
|
||||||
|
top: 384px;
|
||||||
|
right: 80px;
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
background: linear-gradient(135deg, #c084fc, #3b82f6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor--deep-blue {
|
||||||
|
top: 1200px;
|
||||||
|
left: 25%;
|
||||||
|
width: 288px;
|
||||||
|
height: 288px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #9333ea);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor--deep-purple {
|
||||||
|
top: 2000px;
|
||||||
|
right: 33%;
|
||||||
|
width: 384px;
|
||||||
|
height: 384px;
|
||||||
|
background: linear-gradient(135deg, #a855f7, #2563eb);
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero {
|
||||||
|
position: relative;
|
||||||
|
height: min(446px, calc(100vw * 446 / 1551));
|
||||||
|
min-height: 260px;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero__bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero__content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 672px;
|
||||||
|
padding-top: clamp(46px, 5.2vw, 82px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero h1 {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero p {
|
||||||
|
margin: 0;
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.625;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 80;
|
||||||
|
background: #fff;
|
||||||
|
height: 60px;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision-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: 64px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading h2 {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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));
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
max-width: 1024px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card,
|
||||||
|
.problem-card,
|
||||||
|
.solution-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
padding: 32px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-grid .feature-card h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p {
|
||||||
|
margin: 0;
|
||||||
|
color: #4b5563;
|
||||||
|
line-height: 1.625;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-card,
|
||||||
|
.solution-card {
|
||||||
|
padding: 32px;
|
||||||
|
border-left: 4px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-card {
|
||||||
|
border-left-color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-card {
|
||||||
|
border-left-color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-card h3,
|
||||||
|
.solution-card h3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-card h3 {
|
||||||
|
color: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-card h3 {
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-card h3 svg,
|
||||||
|
.solution-card h3 svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-icon,
|
||||||
|
.ability-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
color: #dc2626;
|
||||||
|
background: #fee2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-icon svg,
|
||||||
|
.ability-icon svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item h4,
|
||||||
|
.ability-item h4 {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item p,
|
||||||
|
.ability-item p,
|
||||||
|
.solution-card__intro {
|
||||||
|
margin: 0;
|
||||||
|
color: #4b5563;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-card__intro {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ability-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ability-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px;
|
||||||
|
background: #eff6ff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ability-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ability-item p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-cta {
|
||||||
|
padding: 80px 0;
|
||||||
|
color: #fff;
|
||||||
|
background : linear-gradient(90deg, #334155, #1e293b);
|
||||||
|
/* background: #fff; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-cta__inner {
|
||||||
|
max-width: 896px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-cta h2 {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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) {
|
||||||
|
.solution-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.case-hero {
|
||||||
|
min-height: auto;
|
||||||
|
padding: 64px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero__content {
|
||||||
|
padding-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-hero p,
|
||||||
|
.section-heading p,
|
||||||
|
.case-cta p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs {
|
||||||
|
top: 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-tabs .case-container {
|
||||||
|
gap: 12px;
|
||||||
|
min-width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading h2,
|
||||||
|
.case-cta h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scenario-grid,
|
||||||
|
.highlight-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card,
|
||||||
|
.problem-card,
|
||||||
|
.solution-card {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
f/web-kboss/src/views/homePage/agentStore/img.jpg
Normal file
BIN
f/web-kboss/src/views/homePage/agentStore/img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
161
f/web-kboss/src/views/homePage/agentStore/index.vue
Normal file
161
f/web-kboss/src/views/homePage/agentStore/index.vue
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<div class="agent-store-page">
|
||||||
|
<div class="grid-bg min-h-screen">
|
||||||
|
<main>
|
||||||
|
<div class="page-shell relative">
|
||||||
|
<div class="decor-circle decor-circle--blue"></div>
|
||||||
|
<div class="decor-circle decor-circle--purple"></div>
|
||||||
|
<div class="decor-circle decor-circle--green"></div>
|
||||||
|
|
||||||
|
<section class="hero-section hero-section--compact">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-eyebrow">
|
||||||
|
<svg class="icon-svg--xs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
即开即用
|
||||||
|
</div>
|
||||||
|
<h1 class="hero-title">
|
||||||
|
<span class="gradient-text">智能体商店</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero-description">
|
||||||
|
覆盖招投标、合同审查、能源监控、工业质检等多行业场景，即开即用的AI智能体服务
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-blur hero-blur--blue floating"></div>
|
||||||
|
<div class="hero-blur hero-blur--indigo hero-blur--indigo-delay floating"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section page-section--apps">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="tabs-primary">
|
||||||
|
<button type="button" class="tab-button" :class="{ 'is-main-active': activeMainTab === 'general' }" @click="setMainTab('general')">
|
||||||
|
通用应用
|
||||||
|
</button>
|
||||||
|
<button type="button" class="tab-button" :class="{ 'is-main-active': activeMainTab === 'industry' }" @click="setMainTab('industry')">
|
||||||
|
行业应用
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tabs-secondary">
|
||||||
|
<button
|
||||||
|
v-for="tab in visibleSubTabs"
|
||||||
|
:key="tab.id"
|
||||||
|
type="button"
|
||||||
|
class="tab-button"
|
||||||
|
:class="{ 'is-sub-active': activeSubTab === tab.id }"
|
||||||
|
@click="activeSubTab = tab.id"
|
||||||
|
>
|
||||||
|
{{ tab.label }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="app-grid">
|
||||||
|
<div v-for="app in filteredApps" :key="app.id" class="app-card card-hover">
|
||||||
|
<div class="app-card__decor" :class="app.decorClass"></div>
|
||||||
|
<div class="app-card__body">
|
||||||
|
<div class="app-card__header">
|
||||||
|
<div class="app-icon" :class="app.iconClass">
|
||||||
|
<svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="app.iconPath" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>{{ app.name }}</h3>
|
||||||
|
</div>
|
||||||
|
<p>{{ app.description }}</p>
|
||||||
|
<div class="tag-list">
|
||||||
|
<span v-for="tag in app.tags" :key="tag" class="feature-tag">{{ tag }}</span>
|
||||||
|
<button type="button" class="use-btn use-btn--sm" @click="handleUse(app)">
|
||||||
|
{{ app.casePath ? '查看案例' : '立即使用' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="cta-panel">
|
||||||
|
<h2 class="cta-panel__title">需要定制智能体？</h2>
|
||||||
|
<p class="cta-panel__desc">告诉我们您的业务场景，我们将为您打造专属的AI智能体解决方案</p>
|
||||||
|
<button type="button" class="use-btn btn-primary" @click="handleContact">
|
||||||
|
联系我们
|
||||||
|
<svg class="icon-svg--sm" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AgentStore',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeMainTab: 'general',
|
||||||
|
activeSubTab: 'all',
|
||||||
|
generalSubTabs: [
|
||||||
|
{ id: 'all', label: '全部' },
|
||||||
|
{ id: 'bidding', label: '招投标' },
|
||||||
|
{ id: 'office', label: '办公' }
|
||||||
|
],
|
||||||
|
industrySubTabs: [
|
||||||
|
{ id: 'all', label: '全部' },
|
||||||
|
{ id: 'energy', label: '能源' },
|
||||||
|
{ id: 'quality', label: '质检' }
|
||||||
|
],
|
||||||
|
apps: [
|
||||||
|
{ 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' },
|
||||||
|
{ 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: 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: '面向工业能源管理场景，实时采集能耗数据，AI分析异常用能并给出优化建议，助力企业节能降耗。', tags: ['能耗分析', '异常预警', '优化建议'], category: 'industry', subCategory: 'energy', iconPath: 'M13 10V3L4 14h7v7l9-11h-7z', decorClass: 'decor-gradient-blue', iconClass: 'icon-gradient-blue' },
|
||||||
|
{ id: 7, name: '质检视觉检测', description: '基于深度学习的工业视觉质检方案，可快速识别产品表面缺陷、尺寸偏差，实时输出检测报告，提升产线良率。', tags: ['缺陷检测', '实时报告', '深度学习'], category: 'industry', subCategory: 'quality', iconPath: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
visibleSubTabs() {
|
||||||
|
return this.activeMainTab === 'general' ? this.generalSubTabs : this.industrySubTabs
|
||||||
|
},
|
||||||
|
filteredApps() {
|
||||||
|
let result = this.apps
|
||||||
|
result = result.filter(app => app.category === this.activeMainTab)
|
||||||
|
if (this.activeSubTab !== 'all') {
|
||||||
|
result = result.filter(app => app.subCategory === this.activeSubTab)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setMainTab(tab) {
|
||||||
|
this.activeMainTab = tab
|
||||||
|
this.activeSubTab = 'all'
|
||||||
|
},
|
||||||
|
handleUse(app) {
|
||||||
|
if (app.casePath) {
|
||||||
|
this.$router.push(app.casePath)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$message.info(`即将使用智能体：${app.name}`)
|
||||||
|
},
|
||||||
|
handleContact() {
|
||||||
|
this.$message.info('感谢您的关注，我们将尽快与您联系')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './agent.css';
|
||||||
|
</style>
|
||||||
@ -26,9 +26,9 @@
|
|||||||
<p class="nav-hover" :class="{ active: $route.path.includes('/computeMarket') }" @click="$router.push('/homePage/computeMarket')">算力市场</p>
|
<p class="nav-hover" :class="{ active: $route.path.includes('/computeMarket') }" @click="$router.push('/homePage/computeMarket')">算力市场</p>
|
||||||
<p class="nav-hover" :class="{ active: isActiveTokenMarket }" @click="handleModelSquareClick">token市集</p>
|
<p class="nav-hover" :class="{ active: isActiveTokenMarket }" @click="handleModelSquareClick">token市集</p>
|
||||||
<!-- 训推平台 -->
|
<!-- 训推平台 -->
|
||||||
<p class="nav-hover" @click="goTrainPlatform">训推平台</p>
|
<p class="nav-hover" :class="{ active: $route.path.includes('/trainPlatform') }" @click="goTrainPlatform">训推平台</p>
|
||||||
<!-- 智能体商店 -->
|
<!-- 智能体商店 -->
|
||||||
<p class="nav-hover" @click="goAgentStore">智能体商店</p>
|
<p class="nav-hover" :class="{ active: $route.path.includes('/agentStore') }" @click="goAgentStore">智能体商店</p>
|
||||||
<p class="nav-hover" @click="goYuanjing">元境</p>
|
<p class="nav-hover" @click="goYuanjing">元境</p>
|
||||||
<!-- 供需广场 -->
|
<!-- 供需广场 -->
|
||||||
<p :class="{ active: $route.path.includes('/supply') }">
|
<p :class="{ active: $route.path.includes('/supply') }">
|
||||||
@ -419,12 +419,12 @@ export default Vue.extend({
|
|||||||
|
|
||||||
// 跳转训推平台
|
// 跳转训推平台
|
||||||
goTrainPlatform() {
|
goTrainPlatform() {
|
||||||
window.open('http://101.200.145.167:8923/', '_blank')
|
this.$router.push('/homePage/trainPlatform')
|
||||||
},
|
},
|
||||||
|
|
||||||
// 跳转智能体商店
|
// 跳转智能体商店
|
||||||
goAgentStore() {
|
goAgentStore() {
|
||||||
window.open('http://101.200.145.167:8923/compute-apps', '_blank')
|
this.$router.push('/homePage/agentStore')
|
||||||
},
|
},
|
||||||
|
|
||||||
// 跳转元境
|
// 跳转元境
|
||||||
|
|||||||
162
f/web-kboss/src/views/homePage/trainPlatform/index.vue
Normal file
162
f/web-kboss/src/views/homePage/trainPlatform/index.vue
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<div class="train-page">
|
||||||
|
<div class="grid-bg min-h-screen">
|
||||||
|
<main>
|
||||||
|
<div class="page-shell">
|
||||||
|
<section class="hero-section">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-eyebrow animate-fade-in-up">
|
||||||
|
<svg class="icon-svg--xs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||||
|
</svg>
|
||||||
|
全新 AI 开发体验
|
||||||
|
</div>
|
||||||
|
<h1 class="hero-title animate-fade-in-up animate-delay-100">
|
||||||
|
<span class="gradient-text">训推平台</span><br>
|
||||||
|
<span class="hero-title__sub">AI模型全流程开发</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero-description animate-fade-in-up animate-delay-200">
|
||||||
|
一站式云端AI开发平台，通过对话即可快速构建智能体、工作流、网页与移动应用，依托强大的云端基础设施实现开箱即用的环境和一键部署服务
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions animate-fade-in-up animate-delay-300">
|
||||||
|
<button type="button" class="use-btn btn-primary" @click="handleStart">开始使用</button>
|
||||||
|
<button type="button" class="btn-secondary" @click="handleVisit">访问平台</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-blur hero-blur--blue floating"></div>
|
||||||
|
<div class="hero-blur hero-blur--indigo hero-blur--indigo-delay floating"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="features" class="page-section page-section--soft">
|
||||||
|
<div class="section-inner section-inner--wide">
|
||||||
|
<div class="section-heading">
|
||||||
|
<h2>全链路AI开发能力</h2>
|
||||||
|
<p>覆盖从数据处理到模型部署的全流程，一站式解决AI开发需求</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-grid">
|
||||||
|
<div v-for="feature in features" :key="feature.title" class="feature-card card-hover">
|
||||||
|
<div class="feature-card__decor" :class="feature.decorClass"></div>
|
||||||
|
<div class="feature-card__body">
|
||||||
|
<div class="feature-icon" :class="feature.iconClass">
|
||||||
|
<svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="feature.iconPath" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>{{ feature.title }}</h3>
|
||||||
|
<p>{{ feature.desc }}</p>
|
||||||
|
<div class="tag-list">
|
||||||
|
<span v-for="tag in feature.tags" :key="tag" class="feature-tag">{{ tag }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-heading">
|
||||||
|
<h2>一站式开发流程</h2>
|
||||||
|
<p>从想法到产品上线，全流程无缝衔接</p>
|
||||||
|
</div>
|
||||||
|
<div class="workflow-list">
|
||||||
|
<div v-for="(step, index) in workflowSteps" :key="step.title" class="workflow-step" :class="{ 'step-line': index < workflowSteps.length - 1 }">
|
||||||
|
<div class="step-num" :class="step.done ? 'step-num--done' : step.iconClass">
|
||||||
|
<svg v-if="step.done" class="icon-svg--sm" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span v-else>{{ index + 1 }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="workflow-step__card" :class="{ 'workflow-step__card--final': step.done }">
|
||||||
|
<h3 class="workflow-step__title">{{ step.title }}</h3>
|
||||||
|
<p class="workflow-step__desc">{{ step.desc }}</p>
|
||||||
|
<div v-if="!step.done" class="workflow-step__meta">
|
||||||
|
<span class="workflow-step__meta-label">预计时间：</span>
|
||||||
|
<span class="workflow-step__meta-value">{{ step.time }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-else class="workflow-step__status">
|
||||||
|
<svg class="icon-svg--xs" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
已上线运营
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section page-section--soft">
|
||||||
|
<div class="section-inner section-inner--wide">
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div v-for="stat in stats" :key="stat.label" class="stat-card card-hover">
|
||||||
|
<div class="stat-card__value gradient-text">{{ stat.value }}</div>
|
||||||
|
<div class="stat-card__label">{{ stat.label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="page-section">
|
||||||
|
<div class="section-inner cta-panel">
|
||||||
|
<h2 class="cta-panel__title cta-panel__title--lg">告别部署烦恼</h2>
|
||||||
|
<p class="cta-panel__desc cta-panel__desc--lg">
|
||||||
|
无论你是零基础小白还是资深开发者，训推平台都能帮你实现从想法到产品上线的丝滑体验
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button type="button" class="use-btn btn-primary" @click="handleLearnMore">了解更多</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TrainPlatform',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
features: [
|
||||||
|
{ title: '数据处理', desc: '支持数据清洗、标注、增强、数据集格式转换，提供海量数据集预处理能力，让数据准备更高效', tags: ['数据清洗', '智能标注', '数据增强'], iconClass: 'icon-gradient-blue', decorClass: 'decor-gradient-blue', iconPath: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4' },
|
||||||
|
{ title: '预训练', desc: '支持7B-200B参数规模的Dense/MoE模型分布式预训练、支持断点续训、支持训练可观测性。', tags: ['DeepSpeed', '多卡训练', '分布式'], iconClass: 'icon-gradient-indigo', decorClass: 'decor-gradient-indigo', iconPath: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' },
|
||||||
|
{ title: '后训练', desc: '支持模型微调、强化学习等后训练操作，低成本高效适配业务场景。', tags: ['LoRA', 'QLoRA', 'Prefix Tuning'], iconClass: 'icon-gradient-purple', decorClass: 'decor-gradient-purple', iconPath: 'M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z' },
|
||||||
|
{ title: '量化压缩', desc: '支持FP8、INT8、FP4量化压缩技术，高效推理服务。', tags: ['INT4', 'INT8', 'GPTQ'], iconClass: 'icon-gradient-cyan', decorClass: 'decor-gradient-cyan', iconPath: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' },
|
||||||
|
{ title: '推理部署', desc: '一键部署高性能分布式推理服务、支持PD分离、推测解码、KV缓存等先进推理优化技术', tags: ['vLLM', 'TGI', 'SGLang'], iconClass: 'icon-gradient-green', decorClass: 'decor-gradient-green', iconPath: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
|
||||||
|
{ title: '智能体开发', desc: '可视化工作流编排、多智能体交互、丰富的工具集成、深度匹配业务应用', tags: ['工作流', '工具集成', '记忆能力'], iconClass: 'icon-gradient-amber', decorClass: 'decor-gradient-amber', iconPath: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' }
|
||||||
|
],
|
||||||
|
workflowSteps: [
|
||||||
|
{ title: '数据准备', desc: '上传原始数据，使用平台提供的清洗、标注、增强工具进行处理', time: '10-30分钟', iconClass: 'icon-gradient-blue' },
|
||||||
|
{ title: '模型训练/微调', desc: '选择基础模型和训练策略，一键启动训练任务，实时监控进度', time: '1-24小时', iconClass: 'icon-gradient-indigo' },
|
||||||
|
{ title: '量化优化', desc: '对训练好的模型进行量化压缩，降低部署成本，提升推理速度', time: '30分钟-2小时', iconClass: 'icon-gradient-purple' },
|
||||||
|
{ title: '一键部署', desc: '选择推理引擎和配置参数，自动完成服务部署，获取API接口', time: '5-15分钟', iconClass: 'icon-gradient-cyan' },
|
||||||
|
{ title: '服务上线', desc: '服务自动弹性扩缩容，实时监控指标，一站式运维管理', done: true }
|
||||||
|
],
|
||||||
|
stats: [
|
||||||
|
{ value: '1.2TB', label: '日处理数据量' },
|
||||||
|
{ value: '99.8%', label: '服务可用性' },
|
||||||
|
{ value: '2.3x', label: '推理加速' },
|
||||||
|
{ value: '75%', label: '存储节省' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleStart() {
|
||||||
|
this.$message.info('开始使用训推平台')
|
||||||
|
},
|
||||||
|
handleVisit() {
|
||||||
|
this.$message.info('访问平台')
|
||||||
|
},
|
||||||
|
handleLearnMore() {
|
||||||
|
this.$message.info('了解更多')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './train.css';
|
||||||
|
</style>
|
||||||
622
f/web-kboss/src/views/homePage/trainPlatform/train.css
Normal file
622
f/web-kboss/src/views/homePage/trainPlatform/train.css
Normal file
@ -0,0 +1,622 @@
|
|||||||
|
.train-page {
|
||||||
|
color: #111827;
|
||||||
|
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.train-page *,
|
||||||
|
.train-page *::before,
|
||||||
|
.train-page *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-bg {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin-left: calc(50% - 50vw);
|
||||||
|
margin-right: calc(50% - 50vw);
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ede9fe 100%);
|
||||||
|
background-size: 50px 50px, 50px 50px, auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-h-screen {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
max-width: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
position: relative;
|
||||||
|
padding: 80px 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: min(100%, 920px);
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 650;
|
||||||
|
background: #dbeafe;
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg--xs {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg--sm {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
font-size: clamp(44px, 5vw, 68px);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.08;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title__sub {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 12px;
|
||||||
|
color: #374151;
|
||||||
|
font-size: clamp(30px, 3.6vw, 50px);
|
||||||
|
background: none;
|
||||||
|
-webkit-text-fill-color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 0 auto 36px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary,
|
||||||
|
.use-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
color: #fff;
|
||||||
|
min-height: 46px;
|
||||||
|
padding: 12px 32px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
min-height: 46px;
|
||||||
|
padding: 12px 32px;
|
||||||
|
color: #2563eb;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: rgba(255, 255, 255, 0.68);
|
||||||
|
border: 1px solid #bfdbfe;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blur {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(64px);
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blur--blue {
|
||||||
|
top: 80px;
|
||||||
|
left: 40px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: #bfdbfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blur--indigo {
|
||||||
|
right: 80px;
|
||||||
|
bottom: 40px;
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
background: #c7d2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blur--indigo-delay {
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating {
|
||||||
|
animation: floating 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in-up {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-delay-100 {
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-delay-200 {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-delay-300 {
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-section {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 64px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-section--soft {
|
||||||
|
padding: 64px 24px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner {
|
||||||
|
width: min(100%, 1280px);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner--wide {
|
||||||
|
width: min(100%, 1400px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0 auto 64px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading h2 {
|
||||||
|
margin: 0 0 14px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: clamp(30px, 3vw, 42px);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.18;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading p {
|
||||||
|
margin: 0;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 32px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__decor {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
opacity: 0.6;
|
||||||
|
transform: translate(25%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__body h3 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card__body p {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.625;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 12px;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-size: 14px;
|
||||||
|
background: rgba(37, 99, 235, 0.1);
|
||||||
|
border: 1px solid rgba(37, 99, 235, 0.2);
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
max-width: 768px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 48px;
|
||||||
|
left: 24px;
|
||||||
|
width: 2px;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
background: linear-gradient(#3b82f6, #93c5fd);
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-num {
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__card {
|
||||||
|
flex: 1;
|
||||||
|
padding: 24px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #f3f4f6;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__card--final {
|
||||||
|
border-color: #dcfce7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__title {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__desc {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__meta,
|
||||||
|
.workflow-step__status {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__status {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
color: #16a34a;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__meta-label {
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-step__meta-value {
|
||||||
|
color: #374151;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
padding: 32px 24px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #f3f4f6;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card__value {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: clamp(34px, 4vw, 52px);
|
||||||
|
font-weight: 850;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card__label {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel {
|
||||||
|
padding: 40px 32px;
|
||||||
|
text-align: center;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel__title {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel__desc {
|
||||||
|
margin: 0 0 24px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel__title--lg {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: clamp(30px, 3vw, 36px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel__desc--lg {
|
||||||
|
max-width: 672px;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-blue,
|
||||||
|
.decor-gradient-blue {
|
||||||
|
background: linear-gradient(to bottom right, #dbeafe, #eff6ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-blue {
|
||||||
|
background: linear-gradient(to bottom right, #3b82f6, #2563eb);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-indigo,
|
||||||
|
.decor-gradient-indigo {
|
||||||
|
background: linear-gradient(to bottom right, #e0e7ff, #eef2ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-indigo {
|
||||||
|
background: linear-gradient(to bottom right, #6366f1, #4f46e5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-purple,
|
||||||
|
.decor-gradient-purple {
|
||||||
|
background: linear-gradient(to bottom right, #f3e8ff, #faf5ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-purple {
|
||||||
|
background: linear-gradient(to bottom right, #a855f7, #9333ea);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-cyan,
|
||||||
|
.decor-gradient-cyan {
|
||||||
|
background: linear-gradient(to bottom right, #cffafe, #ecfeff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-cyan {
|
||||||
|
background: linear-gradient(to bottom right, #06b6d4, #0891b2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-green,
|
||||||
|
.decor-gradient-green {
|
||||||
|
background: linear-gradient(to bottom right, #dcfce7, #f0fdf4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-green {
|
||||||
|
background: linear-gradient(to bottom right, #22c55e, #16a34a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-num--done {
|
||||||
|
background: #22c55e;
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-gradient-amber,
|
||||||
|
.decor-gradient-amber {
|
||||||
|
background: linear-gradient(to bottom right, #fef3c7, #fffbeb);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gradient-amber {
|
||||||
|
background: linear-gradient(to bottom right, #f59e0b, #d97706);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes floating {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.feature-grid,
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.hero-section {
|
||||||
|
padding: 48px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title__sub {
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-section,
|
||||||
|
.page-section--soft {
|
||||||
|
padding: 52px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-grid,
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
min-height: auto;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-panel {
|
||||||
|
padding: 34px 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user