feat: 增加工作流内容与滚动动效
This commit is contained in:
parent
ceff4f490e
commit
dede52c180
150
oneinai.html
150
oneinai.html
@ -463,6 +463,75 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.workflow-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border-top: 1px solid var(--ink);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 272px;
|
||||
padding: 28px 26px 26px;
|
||||
border-right: 1px solid var(--line);
|
||||
transition: background 220ms ease, border-color 220ms ease;
|
||||
}
|
||||
|
||||
.workflow-step:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.workflow-step::before {
|
||||
content: '';
|
||||
width: 42px;
|
||||
height: 2px;
|
||||
margin-bottom: 28px;
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.workflow-step:hover {
|
||||
background: linear-gradient(135deg, rgba(0, 163, 170, 0.07), rgba(144, 149, 232, 0.09));
|
||||
border-color: rgba(62, 164, 236, 0.28);
|
||||
}
|
||||
|
||||
.workflow-index {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 26px;
|
||||
color: var(--faint);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.workflow-title {
|
||||
margin: 0 0 14px;
|
||||
color: var(--ink);
|
||||
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.workflow-detail {
|
||||
max-width: 300px;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.workflow-meta {
|
||||
margin-top: auto;
|
||||
color: var(--red-dark);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
|
||||
.pricing-section {
|
||||
padding-top: clamp(80px, 10vw, 126px);
|
||||
}
|
||||
@ -644,6 +713,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(34px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (animation-timeline: view()) {
|
||||
.reveal-on-scroll {
|
||||
animation: scroll-reveal linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 8% cover 34%;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.page {
|
||||
width: min(100% - 40px, 720px);
|
||||
@ -687,6 +776,20 @@
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.workflow-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
min-height: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.workflow-step:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.docs-panel {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 34px;
|
||||
@ -784,6 +887,10 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
padding: 24px 22px;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
font-size: 19px;
|
||||
}
|
||||
@ -897,7 +1004,7 @@
|
||||
</section>
|
||||
|
||||
<section class='section' id='capability'>
|
||||
<div class='section-heading'>
|
||||
<div class='section-heading reveal-on-scroll'>
|
||||
<div>
|
||||
<div class='section-kicker'>能力 / 01</div>
|
||||
<h2 class='section-title'>把复杂调用，压缩成一个入口。</h2>
|
||||
@ -906,19 +1013,19 @@
|
||||
</div>
|
||||
|
||||
<div class='capability-list'>
|
||||
<article class='capability-row'>
|
||||
<article class='capability-row reveal-on-scroll'>
|
||||
<span class='row-index'>01</span>
|
||||
<h3 class='row-title'>全球边缘加速</h3>
|
||||
<p class='row-detail'>将请求路由至更近、更稳的线路，降低跨境调用中的抖动，让关键业务保持连续响应。</p>
|
||||
<span class='row-tag'>ROUTING</span>
|
||||
</article>
|
||||
<article class='capability-row'>
|
||||
<article class='capability-row reveal-on-scroll'>
|
||||
<span class='row-index'>02</span>
|
||||
<h3 class='row-title'>透明成本控制</h3>
|
||||
<p class='row-detail'>统一计价规则、清晰账单与用量记录，让模型预算可以被看见、被核对，也被持续规划。</p>
|
||||
<span class='row-tag'>BILLING</span>
|
||||
</article>
|
||||
<article class='capability-row'>
|
||||
<article class='capability-row reveal-on-scroll'>
|
||||
<span class='row-index'>03</span>
|
||||
<h3 class='row-title'>企业级安全</h3>
|
||||
<p class='row-detail'>密钥分层管理、请求链路加密与服务状态监控，减少集成风险，支撑稳定上线。</p>
|
||||
@ -927,8 +1034,39 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='section workflow-section' id='workflow'>
|
||||
<div class='section-heading reveal-on-scroll'>
|
||||
<div>
|
||||
<div class='section-kicker'>工作流 / 02</div>
|
||||
<h2 class='section-title'>从请求到结果，<br>每一步都清楚。</h2>
|
||||
</div>
|
||||
<p class='section-description'>把接入、路由和对账拆成三步，让团队从第一次调用开始，就知道请求发生在哪里、额度花在哪里。</p>
|
||||
</div>
|
||||
|
||||
<div class='workflow-list'>
|
||||
<article class='workflow-step reveal-on-scroll'>
|
||||
<span class='workflow-index'>01</span>
|
||||
<h3 class='workflow-title'>统一接入</h3>
|
||||
<p class='workflow-detail'>将现有 OpenAI 兼容客户端指向统一入口，不重复改造业务代码。</p>
|
||||
<span class='workflow-meta'>ONE ENDPOINT</span>
|
||||
</article>
|
||||
<article class='workflow-step reveal-on-scroll'>
|
||||
<span class='workflow-index'>02</span>
|
||||
<h3 class='workflow-title'>智能路由</h3>
|
||||
<p class='workflow-detail'>根据线路与模型状态转发请求，把稳定性放在每一次调用之前。</p>
|
||||
<span class='workflow-meta'>SMART ROUTING</span>
|
||||
</article>
|
||||
<article class='workflow-step reveal-on-scroll'>
|
||||
<span class='workflow-index'>03</span>
|
||||
<h3 class='workflow-title'>用量可见</h3>
|
||||
<p class='workflow-detail'>充值、额度、请求记录在同一条链路里，方便预算和运营复盘。</p>
|
||||
<span class='workflow-meta'>CLEAR USAGE</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='section pricing-section' id='pricing'>
|
||||
<div class='pricing-layout'>
|
||||
<div class='pricing-layout reveal-on-scroll'>
|
||||
<div>
|
||||
<div class='price-label'>计价规则 / 清晰可核对</div>
|
||||
<div class='price-main'>1 CNY = 1 USD</div>
|
||||
@ -952,7 +1090,7 @@
|
||||
</section>
|
||||
|
||||
<section class='section docs-section' id='docs'>
|
||||
<div class='docs-panel'>
|
||||
<div class='docs-panel reveal-on-scroll'>
|
||||
<div>
|
||||
<div class='section-kicker'>文档 / 下一步</div>
|
||||
<h2 class='section-title'>从文档开始，<br>让系统开始工作。</h2>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user