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