lixin/NewAPI-Customize-Homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加工作流内容与滚动动效

Browse Source
This commit is contained in:
3127647737@qq.com 2026-08-03 10:46:35 +08:00
parent ceff4f490e
commit dede52c180
1 changed files with 144 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
oneinai.html
View File

@ -463,6 +463,75 @@
text-transform: uppercase; 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 { .pricing-section {
padding-top: clamp(80px, 10vw, 126px); 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) { @media (max-width: 920px) {
.page { .page {
width: min(100% - 40px, 720px); width: min(100% - 40px, 720px);
@ -687,6 +776,20 @@
padding: 22px; 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 { .docs-panel {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 34px; gap: 34px;
@ -784,6 +887,10 @@
gap: 12px; gap: 12px;
} }
.workflow-step {
padding: 24px 22px;
}
.row-title { .row-title {
font-size: 19px; font-size: 19px;
} }
@ -897,7 +1004,7 @@
</section> </section>
<section class='section' id='capability'> <section class='section' id='capability'>
<div class='section-heading'> <div class='section-heading reveal-on-scroll'>
<div> <div>
<div class='section-kicker'>&#x80fd;&#x529b; / 01</div> <div class='section-kicker'>&#x80fd;&#x529b; / 01</div>
<h2 class='section-title'>&#x628a;&#x590d;&#x6742;&#x8c03;&#x7528;&#xff0c;&#x538b;&#x7f29;&#x6210;&#x4e00;&#x4e2a;&#x5165;&#x53e3;&#x3002;</h2> <h2 class='section-title'>&#x628a;&#x590d;&#x6742;&#x8c03;&#x7528;&#xff0c;&#x538b;&#x7f29;&#x6210;&#x4e00;&#x4e2a;&#x5165;&#x53e3;&#x3002;</h2>
@ -906,19 +1013,19 @@
</div> </div>
<div class='capability-list'> <div class='capability-list'>
<article class='capability-row'> <article class='capability-row reveal-on-scroll'>
<span class='row-index'>01</span> <span class='row-index'>01</span>
<h3 class='row-title'>&#x5168;&#x7403;&#x8fb9;&#x7f18;&#x52a0;&#x901f;</h3> <h3 class='row-title'>&#x5168;&#x7403;&#x8fb9;&#x7f18;&#x52a0;&#x901f;</h3>
<p class='row-detail'>&#x5c06;&#x8bf7;&#x6c42;&#x8def;&#x7531;&#x81f3;&#x66f4;&#x8fd1;&#x3001;&#x66f4;&#x7a33;&#x7684;&#x7ebf;&#x8def;&#xff0c;&#x964d;&#x4f4e;&#x8de8;&#x5883;&#x8c03;&#x7528;&#x4e2d;&#x7684;&#x6296;&#x52a8;&#xff0c;&#x8ba9;&#x5173;&#x952e;&#x4e1a;&#x52a1;&#x4fdd;&#x6301;&#x8fde;&#x7eed;&#x54cd;&#x5e94;&#x3002;</p> <p class='row-detail'>&#x5c06;&#x8bf7;&#x6c42;&#x8def;&#x7531;&#x81f3;&#x66f4;&#x8fd1;&#x3001;&#x66f4;&#x7a33;&#x7684;&#x7ebf;&#x8def;&#xff0c;&#x964d;&#x4f4e;&#x8de8;&#x5883;&#x8c03;&#x7528;&#x4e2d;&#x7684;&#x6296;&#x52a8;&#xff0c;&#x8ba9;&#x5173;&#x952e;&#x4e1a;&#x52a1;&#x4fdd;&#x6301;&#x8fde;&#x7eed;&#x54cd;&#x5e94;&#x3002;</p>
<span class='row-tag'>ROUTING</span> <span class='row-tag'>ROUTING</span>
</article> </article>
<article class='capability-row'> <article class='capability-row reveal-on-scroll'>
<span class='row-index'>02</span> <span class='row-index'>02</span>
<h3 class='row-title'>&#x900f;&#x660e;&#x6210;&#x672c;&#x63a7;&#x5236;</h3> <h3 class='row-title'>&#x900f;&#x660e;&#x6210;&#x672c;&#x63a7;&#x5236;</h3>
<p class='row-detail'>&#x7edf;&#x4e00;&#x8ba1;&#x4ef7;&#x89c4;&#x5219;&#x3001;&#x6e05;&#x6670;&#x8d26;&#x5355;&#x4e0e;&#x7528;&#x91cf;&#x8bb0;&#x5f55;&#xff0c;&#x8ba9;&#x6a21;&#x578b;&#x9884;&#x7b97;&#x53ef;&#x4ee5;&#x88ab;&#x770b;&#x89c1;&#x3001;&#x88ab;&#x6838;&#x5bf9;&#xff0c;&#x4e5f;&#x88ab;&#x6301;&#x7eed;&#x89c4;&#x5212;&#x3002;</p> <p class='row-detail'>&#x7edf;&#x4e00;&#x8ba1;&#x4ef7;&#x89c4;&#x5219;&#x3001;&#x6e05;&#x6670;&#x8d26;&#x5355;&#x4e0e;&#x7528;&#x91cf;&#x8bb0;&#x5f55;&#xff0c;&#x8ba9;&#x6a21;&#x578b;&#x9884;&#x7b97;&#x53ef;&#x4ee5;&#x88ab;&#x770b;&#x89c1;&#x3001;&#x88ab;&#x6838;&#x5bf9;&#xff0c;&#x4e5f;&#x88ab;&#x6301;&#x7eed;&#x89c4;&#x5212;&#x3002;</p>
<span class='row-tag'>BILLING</span> <span class='row-tag'>BILLING</span>
</article> </article>
<article class='capability-row'> <article class='capability-row reveal-on-scroll'>
<span class='row-index'>03</span> <span class='row-index'>03</span>
<h3 class='row-title'>&#x4f01;&#x4e1a;&#x7ea7;&#x5b89;&#x5168;</h3> <h3 class='row-title'>&#x4f01;&#x4e1a;&#x7ea7;&#x5b89;&#x5168;</h3>
<p class='row-detail'>&#x5bc6;&#x94a5;&#x5206;&#x5c42;&#x7ba1;&#x7406;&#x3001;&#x8bf7;&#x6c42;&#x94fe;&#x8def;&#x52a0;&#x5bc6;&#x4e0e;&#x670d;&#x52a1;&#x72b6;&#x6001;&#x76d1;&#x63a7;&#xff0c;&#x51cf;&#x5c11;&#x96c6;&#x6210;&#x98ce;&#x9669;&#xff0c;&#x652f;&#x6491;&#x7a33;&#x5b9a;&#x4e0a;&#x7ebf;&#x3002;</p> <p class='row-detail'>&#x5bc6;&#x94a5;&#x5206;&#x5c42;&#x7ba1;&#x7406;&#x3001;&#x8bf7;&#x6c42;&#x94fe;&#x8def;&#x52a0;&#x5bc6;&#x4e0e;&#x670d;&#x52a1;&#x72b6;&#x6001;&#x76d1;&#x63a7;&#xff0c;&#x51cf;&#x5c11;&#x96c6;&#x6210;&#x98ce;&#x9669;&#xff0c;&#x652f;&#x6491;&#x7a33;&#x5b9a;&#x4e0a;&#x7ebf;&#x3002;</p>
@ -927,8 +1034,39 @@
</div> </div>
</section> </section>
<section class='section workflow-section' id='workflow'>
<div class='section-heading reveal-on-scroll'>
<div>
<div class='section-kicker'>&#x5de5;&#x4f5c;&#x6d41; / 02</div>
<h2 class='section-title'>&#x4ece;&#x8bf7;&#x6c42;&#x5230;&#x7ed3;&#x679c;&#xff0c;<br>&#x6bcf;&#x4e00;&#x6b65;&#x90fd;&#x6e05;&#x695a;&#x3002;</h2>
</div>
<p class='section-description'>&#x628a;&#x63a5;&#x5165;&#x3001;&#x8def;&#x7531;&#x548c;&#x5bf9;&#x8d26;&#x62c6;&#x6210;&#x4e09;&#x6b65;&#xff0c;&#x8ba9;&#x56e2;&#x961f;&#x4ece;&#x7b2c;&#x4e00;&#x6b21;&#x8c03;&#x7528;&#x5f00;&#x59cb;&#xff0c;&#x5c31;&#x77e5;&#x9053;&#x8bf7;&#x6c42;&#x53d1;&#x751f;&#x5728;&#x54ea;&#x91cc;&#x3001;&#x989d;&#x5ea6;&#x82b1;&#x5728;&#x54ea;&#x91cc;&#x3002;</p>
</div>
<div class='workflow-list'>
<article class='workflow-step reveal-on-scroll'>
<span class='workflow-index'>01</span>
<h3 class='workflow-title'>&#x7edf;&#x4e00;&#x63a5;&#x5165;</h3>
<p class='workflow-detail'>&#x5c06;&#x73b0;&#x6709; OpenAI &#x517c;&#x5bb9;&#x5ba2;&#x6237;&#x7aef;&#x6307;&#x5411;&#x7edf;&#x4e00;&#x5165;&#x53e3;&#xff0c;&#x4e0d;&#x91cd;&#x590d;&#x6539;&#x9020;&#x4e1a;&#x52a1;&#x4ee3;&#x7801;&#x3002;</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'>&#x667a;&#x80fd;&#x8def;&#x7531;</h3>
<p class='workflow-detail'>&#x6839;&#x636e;&#x7ebf;&#x8def;&#x4e0e;&#x6a21;&#x578b;&#x72b6;&#x6001;&#x8f6c;&#x53d1;&#x8bf7;&#x6c42;&#xff0c;&#x628a;&#x7a33;&#x5b9a;&#x6027;&#x653e;&#x5728;&#x6bcf;&#x4e00;&#x6b21;&#x8c03;&#x7528;&#x4e4b;&#x524d;&#x3002;</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'>&#x7528;&#x91cf;&#x53ef;&#x89c1;</h3>
<p class='workflow-detail'>&#x5145;&#x503c;&#x3001;&#x989d;&#x5ea6;&#x3001;&#x8bf7;&#x6c42;&#x8bb0;&#x5f55;&#x5728;&#x540c;&#x4e00;&#x6761;&#x94fe;&#x8def;&#x91cc;&#xff0c;&#x65b9;&#x4fbf;&#x9884;&#x7b97;&#x548c;&#x8fd0;&#x8425;&#x590d;&#x76d8;&#x3002;</p>
<span class='workflow-meta'>CLEAR USAGE</span>
</article>
</div>
</section>
<section class='section pricing-section' id='pricing'> <section class='section pricing-section' id='pricing'>
<div class='pricing-layout'> <div class='pricing-layout reveal-on-scroll'>
<div> <div>
<div class='price-label'>&#x8ba1;&#x4ef7;&#x89c4;&#x5219; / &#x6e05;&#x6670;&#x53ef;&#x6838;&#x5bf9;</div> <div class='price-label'>&#x8ba1;&#x4ef7;&#x89c4;&#x5219; / &#x6e05;&#x6670;&#x53ef;&#x6838;&#x5bf9;</div>
<div class='price-main'>1 CNY = 1 USD</div> <div class='price-main'>1 CNY = 1 USD</div>
@ -952,7 +1090,7 @@
</section> </section>
<section class='section docs-section' id='docs'> <section class='section docs-section' id='docs'>
<div class='docs-panel'> <div class='docs-panel reveal-on-scroll'>
<div> <div>
<div class='section-kicker'>&#x6587;&#x6863; / &#x4e0b;&#x4e00;&#x6b65;</div> <div class='section-kicker'>&#x6587;&#x6863; / &#x4e0b;&#x4e00;&#x6b65;</div>
<h2 class='section-title'>&#x4ece;&#x6587;&#x6863;&#x5f00;&#x59cb;&#xff0c;<br>&#x8ba9;&#x7cfb;&#x7edf;&#x5f00;&#x59cb;&#x5de5;&#x4f5c;&#x3002;</h2> <h2 class='section-title'>&#x4ece;&#x6587;&#x6863;&#x5f00;&#x59cb;&#xff0c;<br>&#x8ba9;&#x7cfb;&#x7edf;&#x5f00;&#x59cb;&#x5de5;&#x4f5c;&#x3002;</h2>