style: 重做 Apple 风格首页视觉
This commit is contained in:
parent
06ea85bbc5
commit
83787cfae4
282
oneinai.html
282
oneinai.html
@ -884,6 +884,288 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
/* Apple-inspired refinement: keep the custom home page legible beneath the
|
||||||
|
New API navigation and let the product proof carry the visual weight. */
|
||||||
|
.oneinai-root {
|
||||||
|
--gold: #0071e3;
|
||||||
|
--blue: #0071e3;
|
||||||
|
--cyan: #0071e3;
|
||||||
|
--ink: #1d1d1f;
|
||||||
|
--muted: #6e6e73;
|
||||||
|
--soft: #86868b;
|
||||||
|
--line: rgba(0, 0, 0, 0.12);
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
color: #1d1d1f;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
background: #f5f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oneinai-root::before,
|
||||||
|
.oneinai-root::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
width: min(1180px, calc(100% - 40px));
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 620px;
|
||||||
|
gap: 72px;
|
||||||
|
padding: 88px 0 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
left: -90px;
|
||||||
|
right: -90px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
border-radius: 0 0 24px 24px;
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
|
||||||
|
clip-path: none;
|
||||||
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-kicker {
|
||||||
|
color: #6e6e73;
|
||||||
|
letter-spacing: 1.6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-kicker::before {
|
||||||
|
background: #0071e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1,
|
||||||
|
.section-title,
|
||||||
|
.price-main {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
color: #1d1d1f;
|
||||||
|
font-size: clamp(56px, 6.6vw, 84px);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.02;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 span {
|
||||||
|
color: #0071e3;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
color: #515154;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-proof {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.16);
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-proof-accent {
|
||||||
|
border-top-color: #0071e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-index,
|
||||||
|
.section-kicker,
|
||||||
|
.price-label,
|
||||||
|
.provenance-label {
|
||||||
|
color: #0071e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-proof strong,
|
||||||
|
.section-title,
|
||||||
|
.feature-name,
|
||||||
|
.model-title,
|
||||||
|
.price-main,
|
||||||
|
.mini-stat strong,
|
||||||
|
.provenance-bar strong {
|
||||||
|
color: #1d1d1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-proof span:last-child,
|
||||||
|
.section-desc,
|
||||||
|
.feature-txt,
|
||||||
|
.model-meta,
|
||||||
|
.price-note,
|
||||||
|
.mini-stat span,
|
||||||
|
.provenance-bar p {
|
||||||
|
color: #6e6e73;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #0071e3;
|
||||||
|
border-color: #0071e3;
|
||||||
|
box-shadow: 0 10px 24px rgba(0, 113, 227, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
color: #1d1d1f;
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: #d2d2d7;
|
||||||
|
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal {
|
||||||
|
border-color: #d2d2d7;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
|
||||||
|
backdrop-filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal:first-child {
|
||||||
|
border-color: #0071e3;
|
||||||
|
background: #f0f6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal:first-child strong {
|
||||||
|
font-size: 18px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal strong,
|
||||||
|
.metric-chip strong {
|
||||||
|
color: #1d1d1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal span,
|
||||||
|
.metric-chip span {
|
||||||
|
color: #6e6e73;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-frame {
|
||||||
|
border-color: #d2d2d7;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-frame::before {
|
||||||
|
border-color: rgba(0, 113, 227, 0.12);
|
||||||
|
opacity: 0.58;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-frame::after {
|
||||||
|
opacity: 0.28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner {
|
||||||
|
border-color: rgba(0, 113, 227, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-chip {
|
||||||
|
border-color: #d2d2d7;
|
||||||
|
background: rgba(255, 255, 255, 0.96);
|
||||||
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-kicker,
|
||||||
|
.price-label,
|
||||||
|
.provenance-label {
|
||||||
|
letter-spacing: 1.6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card,
|
||||||
|
.model-card,
|
||||||
|
.mini-stat,
|
||||||
|
.contact-panel,
|
||||||
|
.doc-action,
|
||||||
|
.pricing-main,
|
||||||
|
.provenance-bar {
|
||||||
|
border-color: #d2d2d7;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card::before,
|
||||||
|
.model-card::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover,
|
||||||
|
.model-card:hover,
|
||||||
|
.doc-action:hover {
|
||||||
|
border-color: #0071e3;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-index {
|
||||||
|
border-color: #d2d2d7;
|
||||||
|
color: #0071e3;
|
||||||
|
background: #f5f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-main {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-note strong {
|
||||||
|
color: #0071e3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provenance-bar {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-action,
|
||||||
|
.doc-action span {
|
||||||
|
color: #1d1d1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.08);
|
||||||
|
color: #6e6e73;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.hero {
|
||||||
|
gap: 40px;
|
||||||
|
padding: 64px 0 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
left: -24px;
|
||||||
|
right: -24px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: auto;
|
||||||
|
clip-path: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 620px) {
|
||||||
|
.hero {
|
||||||
|
gap: 22px;
|
||||||
|
padding: 44px 0 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 72px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<div class='oneinai-root'>
|
<div class='oneinai-root'>
|
||||||
<main class='page' id='top'>
|
<main class='page' id='top'>
|
||||||
<section class='hero'>
|
<section class='hero'>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user