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

style: 对齐参考站轻量产品视觉

Browse Source
This commit is contained in:
3127647737@qq.com 2026-08-03 10:17:30 +08:00
parent 4db9ba8185
commit cc04288d55
1 changed files with 129 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
oneinai.html
View File

@ -5,23 +5,24 @@
} }
.oneinai-root { .oneinai-root {
--paper: #f2efe8; --paper: #ffffff;
--paper-light: #f8f6f1; --paper-light: #fbfdff;
--ink: #1d1c1a; --ink: #0a0a0a;
--muted: #706d67; --muted: #667085;
--faint: #9c9890; --faint: #98a2b3;
--line: rgba(29, 28, 26, 0.18); --line: #e8e8e8;
--line-soft: rgba(29, 28, 26, 0.09); --line-soft: #f1f4f7;
--red: #ee342d; --red: #3ea4ec;
--red-dark: #b92924; --red-dark: #0e72bc;
--green: #54715a; --cyan: #00a3aa;
--violet: #9095e8;
display: block; display: block;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
color: var(--ink); color: var(--ink);
background: var(--paper); background: var(--paper);
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 1.6; line-height: 1.6;
@ -35,15 +36,22 @@
inset: 0; inset: 0;
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
opacity: 0.25; opacity: 0.42;
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
0deg, 90deg,
rgba(29, 28, 26, 0.035) 0, rgba(62, 164, 236, 0.055) 0,
rgba(29, 28, 26, 0.035) 1px, rgba(62, 164, 236, 0.055) 1px,
transparent 1px, transparent 1px,
transparent 7px transparent 96px
), repeating-linear-gradient(
0deg,
rgba(62, 164, 236, 0.045) 0,
rgba(62, 164, 236, 0.045) 1px,
transparent 1px,
transparent 96px
); );
mix-blend-mode: multiply; mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
} }
.oneinai-root * { .oneinai-root * {
@ -84,7 +92,9 @@
.brand-mark { .brand-mark {
width: 12px; width: 12px;
height: 12px; height: 12px;
background: var(--red); border-radius: 4px;
background: linear-gradient(135deg, var(--cyan) 0%, var(--red) 52%, var(--violet) 100%);
box-shadow: 0 4px 12px rgba(62, 164, 236, 0.24);
} }
.masthead-note { .masthead-note {
@ -176,7 +186,7 @@
max-width: 760px; max-width: 760px;
margin: 0 0 32px; margin: 0 0 32px;
color: var(--ink); color: var(--ink);
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif; font-family: 'Public Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: clamp(56px, 8.2vw, 124px); font-size: clamp(56px, 8.2vw, 124px);
font-weight: 900; font-weight: 900;
letter-spacing: 0; letter-spacing: 0;
@ -186,6 +196,10 @@
.hero h1 span { .hero h1 span {
display: block; display: block;
color: var(--red); color: var(--red);
background: linear-gradient(100deg, var(--cyan) 0%, var(--red) 56%, var(--violet) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
} }
.hero-lead { .hero-lead {
@ -216,8 +230,9 @@
gap: 12px; gap: 12px;
min-height: 48px; min-height: 48px;
padding: 0 18px; padding: 0 18px;
border: 1px solid var(--ink); border: 1px solid var(--line);
border-radius: 0; border-radius: 12px;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 800; font-weight: 800;
@ -232,24 +247,27 @@
.btn-primary { .btn-primary {
color: var(--paper-light); color: var(--paper-light);
background: var(--ink); border-color: var(--red);
background: var(--red);
box-shadow: 0 10px 24px rgba(62, 164, 236, 0.22);
} }
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus-visible { .btn-primary:focus-visible {
border-color: var(--red); border-color: var(--red-dark);
background: var(--red); background: var(--red-dark);
} }
.btn-secondary { .btn-secondary {
color: var(--ink); color: var(--ink);
background: transparent; background: rgba(255, 255, 255, 0.74);
} }
.btn-secondary:hover, .btn-secondary:hover,
.btn-secondary:focus-visible { .btn-secondary:focus-visible {
color: var(--red-dark); color: var(--red-dark);
border-color: var(--red); border-color: var(--red);
background: #ffffff;
} }
.icon { .icon {
@ -318,7 +336,13 @@
max-width: 430px; max-width: 430px;
aspect-ratio: 1 / 0.94; aspect-ratio: 1 / 0.94;
overflow: hidden; overflow: hidden;
background: var(--ink); border: 1px solid rgba(62, 164, 236, 0.18);
border-radius: 24px;
background:
radial-gradient(ellipse 64% 80% at 82% 0%, rgba(144, 149, 232, 0.24) 0%, transparent 62%),
linear-gradient(135deg, rgba(0, 163, 170, 0.09) 0%, rgba(62, 164, 236, 0.05) 48%, rgba(144, 149, 232, 0.13) 100%),
#f8fbff;
box-shadow: 0 28px 72px rgba(62, 164, 236, 0.14);
} }
.proof-art::before, .proof-art::before,
@ -330,26 +354,32 @@
.proof-art::before { .proof-art::before {
inset: 20px; inset: 20px;
border: 1px solid rgba(242, 239, 232, 0.22); border: 1px solid rgba(62, 164, 236, 0.2);
border-radius: 16px;
background-image:
linear-gradient(90deg, rgba(62, 164, 236, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(62, 164, 236, 0.08) 1px, transparent 1px);
background-size: 36px 36px;
} }
.proof-art::after { .proof-art::after {
top: -18%; top: 10%;
right: 16%; right: 8%;
width: 1px; width: 46%;
height: 136%; height: 54%;
background: var(--red); border-radius: 50%;
transform: rotate(36deg); background: radial-gradient(circle, rgba(0, 163, 170, 0.16), transparent 68%);
opacity: 0.9; filter: blur(16px);
opacity: 0.86;
} }
.proof-art img { .proof-art img {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 70%; width: 62%;
height: auto; height: auto;
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32)); filter: drop-shadow(0 16px 24px rgba(16, 24, 40, 0.18));
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
} }
@ -362,7 +392,7 @@
top: 34px; top: 34px;
left: 34px; left: 34px;
z-index: 2; z-index: 2;
color: var(--paper-light); color: var(--red-dark);
font-size: 10px; font-size: 10px;
} }
@ -431,24 +461,31 @@
} }
.capability-list { .capability-list {
border-top: 1px solid var(--ink); display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
} }
.capability-row { .capability-row {
display: grid; display: flex;
grid-template-columns: 64px minmax(180px, 0.72fr) minmax(0, 1.5fr) 120px; flex-direction: column;
gap: 28px; align-items: flex-start;
align-items: center; min-height: 258px;
min-height: 116px; padding: 26px;
padding: 20px 0; gap: 16px;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 12px 34px rgba(16, 24, 40, 0.05);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
transition: padding 220ms ease, background 220ms ease; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
} }
.capability-row:hover { .capability-row:hover {
padding-right: 14px; transform: translateY(-4px);
padding-left: 14px; border-color: rgba(62, 164, 236, 0.34);
background: rgba(238, 52, 45, 0.055); background: #ffffff;
box-shadow: 0 20px 42px rgba(62, 164, 236, 0.12);
} }
.row-index { .row-index {
@ -473,7 +510,11 @@
} }
.row-tag { .row-tag {
justify-self: end; margin-top: auto;
padding: 5px 9px;
border: 1px solid rgba(62, 164, 236, 0.18);
border-radius: 999px;
background: rgba(62, 164, 236, 0.08);
color: var(--red-dark); color: var(--red-dark);
font-size: 10px; font-size: 10px;
font-weight: 900; font-weight: 900;
@ -490,6 +531,13 @@
grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
gap: clamp(38px, 9vw, 140px); gap: clamp(38px, 9vw, 140px);
align-items: end; align-items: end;
padding: clamp(30px, 5vw, 62px);
border: 1px solid rgba(62, 164, 236, 0.16);
border-radius: 24px;
background:
radial-gradient(ellipse 48% 120% at 78% 0%, rgba(62, 164, 236, 0.16) 0%, transparent 62%),
linear-gradient(112deg, #ffffff 0%, #ffffff 48%, #f5fbff 100%);
box-shadow: 0 22px 64px rgba(62, 164, 236, 0.1);
} }
.price-label { .price-label {
@ -521,7 +569,7 @@
} }
.price-facts { .price-facts {
border-top: 1px solid var(--ink); border-top: 1px solid var(--line);
} }
.price-fact { .price-fact {
@ -554,8 +602,13 @@
gap: 48px; gap: 48px;
align-items: end; align-items: end;
padding: clamp(32px, 5vw, 66px); padding: clamp(32px, 5vw, 66px);
color: var(--paper-light); color: var(--ink);
background: var(--ink); border: 1px solid rgba(62, 164, 236, 0.18);
border-radius: 24px;
background:
radial-gradient(ellipse 48% 120% at 78% 0%, rgba(144, 149, 232, 0.2) 0%, transparent 62%),
linear-gradient(112deg, #ffffff 0%, #f8fcff 48%, #f5f6ff 100%);
box-shadow: 0 20px 60px rgba(62, 164, 236, 0.1);
} }
.docs-panel .section-kicker { .docs-panel .section-kicker {
@ -563,13 +616,13 @@
} }
.docs-panel .section-title { .docs-panel .section-title {
color: var(--paper-light); color: var(--ink);
font-size: clamp(34px, 5vw, 62px); font-size: clamp(34px, 5vw, 62px);
} }
.docs-panel .section-description { .docs-panel .section-description {
margin-top: 22px; margin-top: 22px;
color: rgba(248, 246, 241, 0.64); color: var(--muted);
} }
.doc-link { .doc-link {
@ -578,9 +631,9 @@
gap: 18px; gap: 18px;
min-width: 242px; min-width: 242px;
padding: 18px 0; padding: 18px 0;
border-top: 1px solid rgba(248, 246, 241, 0.5); border-top: 1px solid rgba(62, 164, 236, 0.34);
border-bottom: 1px solid rgba(248, 246, 241, 0.5); border-bottom: 1px solid rgba(62, 164, 236, 0.34);
color: var(--paper-light); color: var(--ink);
font-size: 15px; font-size: 15px;
font-weight: 800; font-weight: 800;
transition: color 180ms ease, border-color 180ms ease, gap 180ms ease; transition: color 180ms ease, border-color 180ms ease, gap 180ms ease;
@ -591,12 +644,13 @@
gap: 24px; gap: 24px;
color: var(--red); color: var(--red);
border-color: var(--red); border-color: var(--red);
background: rgba(255, 255, 255, 0.56);
} }
.doc-link small { .doc-link small {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
color: rgba(248, 246, 241, 0.54); color: var(--muted);
font-size: 10px; font-size: 10px;
font-weight: 900; font-weight: 900;
letter-spacing: 0.14em; letter-spacing: 0.14em;
@ -670,23 +724,17 @@
gap: 24px; gap: 24px;
} }
.capability-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section-heading { .section-heading {
margin-bottom: 36px; margin-bottom: 36px;
} }
.capability-row { .capability-row {
grid-template-columns: 52px minmax(0, 1fr) 100px; min-height: 232px;
gap: 18px; padding: 22px;
}
.row-detail {
grid-column: 2 / -1;
grid-row: 2;
}
.row-tag {
grid-column: 3;
grid-row: 1;
} }
.docs-panel { .docs-panel {
@ -785,6 +833,10 @@
margin-bottom: 32px; margin-bottom: 32px;
} }
.capability-list {
grid-template-columns: 1fr;
}
.section-title { .section-title {
font-size: 37px; font-size: 37px;
} }
@ -794,9 +846,9 @@
} }
.capability-row { .capability-row {
grid-template-columns: 38px minmax(0, 1fr); min-height: 0;
padding: 22px;
gap: 12px; gap: 12px;
padding: 18px 0;
} }
.row-title { .row-title {
@ -804,8 +856,6 @@
} }
.row-detail { .row-detail {
grid-column: 2;
grid-row: 2;
font-size: 13px; font-size: 13px;
} }
@ -866,7 +916,7 @@
<span class='brand-mark' aria-hidden='true'></span> <span class='brand-mark' aria-hidden='true'></span>
<span>ONEINAI</span> <span>ONEINAI</span>
</a> </a>
<span class='masthead-note'>MODEL ACCESS / PRODUCTION READY</span> <span class='masthead-note'>统一模型入口 / 面向生产环境</span>
<nav class='masthead-nav' aria-label='页面导航'> <nav class='masthead-nav' aria-label='页面导航'>
<a href='#capability'>能力</a> <a href='#capability'>能力</a>
<a href='#pricing'>计价</a> <a href='#pricing'>计价</a>
@ -876,7 +926,7 @@
<section class='hero'> <section class='hero'>
<div class='hero-copy'> <div class='hero-copy'>
<div class='eyebrow'>ONEINAI / API GATEWAY</div> <div class='eyebrow'>ONEINAI / API</div>
<h1>模型接入，<span>回到基础设施。</span></h1> <h1>模型接入，<span>回到基础设施。</span></h1>
<p class='hero-lead'><strong>一个入口，连接多种模型。</strong> 从请求转发、密钥管理到用量对账，把复杂的模型调用交给一套清晰、稳定、可追溯的基础设施。</p> <p class='hero-lead'><strong>一个入口，连接多种模型。</strong> 从请求转发、密钥管理到用量对账，把复杂的模型调用交给一套清晰、稳定、可追溯的基础设施。</p>
<div class='hero-actions'> <div class='hero-actions'>
@ -929,7 +979,7 @@
<section class='section' id='capability'> <section class='section' id='capability'>
<div class='section-heading'> <div class='section-heading'>
<div> <div>
<div class='section-kicker'>CAPABILITY / 01</div> <div class='section-kicker'>能力 / 01</div>
<h2 class='section-title'>把复杂调用，压缩成一个入口。</h2> <h2 class='section-title'>把复杂调用，压缩成一个入口。</h2>
</div> </div>
<p class='section-description'>从账户、额度、密钥到请求转发，ONEINAI 将分散的模型能力整理为一套更适合生产环境的调用路径。</p> <p class='section-description'>从账户、额度、密钥到请求转发，ONEINAI 将分散的模型能力整理为一套更适合生产环境的调用路径。</p>
@ -960,7 +1010,7 @@
<section class='section pricing-section' id='pricing'> <section class='section pricing-section' id='pricing'>
<div class='pricing-layout'> <div class='pricing-layout'>
<div> <div>
<div class='price-label'>PRICING / CLEAR BY DESIGN</div> <div class='price-label'>计价规则 / 清晰可核对</div>
<div class='price-main'>1 CNY = 1 USD</div> <div class='price-main'>1 CNY = 1 USD</div>
<p class='price-note'>充值按 <strong>1 CNY = 1 USD</strong> 统一计价；模型额度来自一手正规渠道采购，规则清晰，账单可核对。</p> <p class='price-note'>充值按 <strong>1 CNY = 1 USD</strong> 统一计价；模型额度来自一手正规渠道采购，规则清晰，账单可核对。</p>
</div> </div>
@ -984,7 +1034,7 @@
<section class='section docs-section' id='docs'> <section class='section docs-section' id='docs'>
<div class='docs-panel'> <div class='docs-panel'>
<div> <div>
<div class='section-kicker'>DOCUMENTATION / NEXT STEP</div> <div class='section-kicker'>文档 / 下一步</div>
<h2 class='section-title'>从文档开始，<br>让系统开始工作。</h2> <h2 class='section-title'>从文档开始，<br>让系统开始工作。</h2>
<p class='section-description'>查看模型接入、密钥配置、接口调用和迁移说明，快速完成 NewAPI 生产环境集成。</p> <p class='section-description'>查看模型接入、密钥配置、接口调用和迁移说明，快速完成 NewAPI 生产环境集成。</p>
</div> </div>