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

style: 用品牌 Logo 强化首屏识别

Browse Source
This commit is contained in:
3127647737@qq.com 2026-08-03 10:37:36 +08:00
parent badd46c7e0
commit f414bb140b
1 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
oneinai.html
View File

@ -131,6 +131,39 @@
color: transparent; color: transparent;
} }
.hero h1.hero-brand-title {
max-width: 520px;
margin-bottom: 24px;
font-size: 0;
line-height: 1;
}
.hero-brand-title img {
display: block;
width: min(520px, 88vw);
height: auto;
filter: drop-shadow(0 16px 24px rgba(16, 24, 40, 0.12));
}
.hero-slogan {
max-width: 660px;
margin: 0 0 26px;
color: var(--ink);
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
font-size: clamp(34px, 5vw, 68px);
font-weight: 900;
letter-spacing: 0;
line-height: 1.04;
}
.hero-slogan span {
display: block;
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 {
max-width: 550px; max-width: 550px;
margin: 0 0 32px; margin: 0 0 32px;
@ -708,6 +741,16 @@
font-size: clamp(48px, 14vw, 76px); font-size: clamp(48px, 14vw, 76px);
} }
.hero h1.hero-brand-title {
margin-bottom: 20px;
font-size: 0;
}
.hero-slogan {
margin-bottom: 22px;
font-size: clamp(34px, 10vw, 54px);
}
.hero-lead { .hero-lead {
font-size: 15px; font-size: 15px;
line-height: 1.78; line-height: 1.78;
@ -836,7 +879,10 @@
<section class='hero'> <section class='hero'>
<div class='hero-copy'> <div class='hero-copy'>
<div class='eyebrow'>ONEINAI / API</div> <div class='eyebrow'>ONEINAI / API</div>
<h1>&#x6a21;&#x578b;&#x63a5;&#x5165;&#xff0c;<span>&#x56de;&#x5230;&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#x3002;</span></h1> <h1 class='hero-brand-title'>
<img src='https://minio.oneinai.com/oneinai/images/logo/oneinai(800x800).png' alt='ONEINAI Logo' loading='eager'>
</h1>
<p class='hero-slogan'>&#x6a21;&#x578b;&#x63a5;&#x5165;&#xff0c;<span>&#x56de;&#x5230;&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#x3002;</span></p>
<p class='hero-lead'><strong>&#x4e00;&#x4e2a;&#x5165;&#x53e3;&#xff0c;&#x8fde;&#x63a5;&#x591a;&#x79cd;&#x6a21;&#x578b;&#x3002;</strong> &#x4ece;&#x8bf7;&#x6c42;&#x8f6c;&#x53d1;&#x3001;&#x5bc6;&#x94a5;&#x7ba1;&#x7406;&#x5230;&#x7528;&#x91cf;&#x5bf9;&#x8d26;&#xff0c;&#x628a;&#x590d;&#x6742;&#x7684;&#x6a21;&#x578b;&#x8c03;&#x7528;&#x4ea4;&#x7ed9;&#x4e00;&#x5957;&#x6e05;&#x6670;&#x3001;&#x7a33;&#x5b9a;&#x3001;&#x53ef;&#x8ffd;&#x6eaf;&#x7684;&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#x3002;</p> <p class='hero-lead'><strong>&#x4e00;&#x4e2a;&#x5165;&#x53e3;&#xff0c;&#x8fde;&#x63a5;&#x591a;&#x79cd;&#x6a21;&#x578b;&#x3002;</strong> &#x4ece;&#x8bf7;&#x6c42;&#x8f6c;&#x53d1;&#x3001;&#x5bc6;&#x94a5;&#x7ba1;&#x7406;&#x5230;&#x7528;&#x91cf;&#x5bf9;&#x8d26;&#xff0c;&#x628a;&#x590d;&#x6742;&#x7684;&#x6a21;&#x578b;&#x8c03;&#x7528;&#x4ea4;&#x7ed9;&#x4e00;&#x5957;&#x6e05;&#x6670;&#x3001;&#x7a33;&#x5b9a;&#x3001;&#x53ef;&#x8ffd;&#x6eaf;&#x7684;&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#x3002;</p>
<div class='hero-actions'> <div class='hero-actions'>
<a href='https://api.oneinai.com/register' target='_blank' rel='noopener' class='btn btn-primary'> <a href='https://api.oneinai.com/register' target='_blank' rel='noopener' class='btn btn-primary'>