teasiu/doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

升级风格

Browse Source
This commit is contained in:
teasiu
2026-04-12 12:48:52 +08:00
parent 875a1e5b26
commit 4e95736763
2 changed files with 266 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/index.js
View File

@@ -21,6 +21,7 @@ function HomepageHeader() {
<header className={styles.heroBanner}> <header className={styles.heroBanner}>
<div className={styles.heroGrid} /> <div className={styles.heroGrid} />
<div className={styles.heroGlow} /> <div className={styles.heroGlow} />
<div className={styles.heroGlowRight} />
<div className="container"> <div className="container">
<div className={styles.heroContent}> <div className={styles.heroContent}>
<img <img
@@ -42,25 +43,30 @@ function HomepageHeader() {
<div className={styles.buttonGroup}> <div className={styles.buttonGroup}>
<Link className={clsx(styles.btn, styles.btnPrimary)} to={useBaseUrl('docs/category/机顶盒刷机教程')}> <Link className={clsx(styles.btn, styles.btnPrimary)} to={useBaseUrl('docs/category/机顶盒刷机教程')}>
保姆级刷机教程 📖 保姆级刷机教程
</Link> </Link>
<Link className={clsx(styles.btn, styles.btnPrimary)} to="download"> <Link className={clsx(styles.btn, styles.btnPrimary)} to="download">
最新固件下载 ⬇️ 最新固件下载
</Link> </Link>
<Link className={clsx(styles.btn, styles.btnPrimary)} to={useBaseUrl('devices')}> <Link className={clsx(styles.btn, styles.btnPrimary)} to={useBaseUrl('devices')}>
设备适配表 📋 设备适配表
</Link> </Link>
</div> </div>
<div className={styles.buttonGroup}> <div className={styles.buttonGroup}>
<Link className={clsx(styles.btn, styles.btnSecondary)} to={useBaseUrl('news')}> <Link className={clsx(styles.btn, styles.btnSecondary)} to={useBaseUrl('news')}>
系统升级公告 📣 系统升级公告
</Link> </Link>
<Link className={clsx(styles.btn, styles.btnSecondary)} to={useBaseUrl('docs/intro')}> <Link className={clsx(styles.btn, styles.btnSecondary)} to={useBaseUrl('docs/intro')}>
海纳思使用手册 📚 海纳思使用手册
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className={styles.heroWave}>
<svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z" fill="var(--ifm-background-color)" />
</svg>
</div>
</header> </header>
); );
} }
@@ -71,16 +77,20 @@ function SectionPersistence() {
<div className="container"> <div className="container">
<div className={styles.sectionInner}> <div className={styles.sectionInner}>
<div className={styles.sectionText}> <div className={styles.sectionText}>
<span className={styles.sectionBadge}>开源 · 免费 · 易用</span> <span className={styles.sectionBadge}>✦ 开源 · 免费 · 易用</span>
<h2 className={styles.sectionTitle}>家用 Linux 服务器系统</h2> <h2 className={styles.sectionTitle}>家用 Linux 服务器系统</h2>
<p className={styles.sectionDesc}> <p className={styles.sectionDesc}>
海纳思系统，基于 Ubuntu 20.04 LTS 打造的 NAS 系统，开发者精心内置丰富功能： 海纳思系统，基于 Ubuntu 20.04 LTS 打造的 NAS 系统，开发者精心内置丰富功能：
内网穿透、网盘共享、远程下载、Docker 安装、个人博客、网络建站、
Socks5 服务、FTP 上传下载、WebDAV 接口、终端控制、一键还原、计划任务等。
</p> </p>
<div className={styles.tagCloud}>
{['内网穿透','网盘共享','远程下载','Docker','个人博客','网络建站','Socks5','FTP','WebDAV','终端控制','一键还原','计划任务'].map(tag => (
<span key={tag} className={styles.tag}>{tag}</span>
))}
</div>
</div> </div>
<div className={styles.sectionImage}> <div className={styles.sectionImageWrap}>
<img src="img/about.png" alt="系统功能概览" width="400" height="466" /> <div className={styles.imageGlow} />
<img src="img/about.png" alt="系统功能概览" className={styles.sectionImg} width="400" height="466" />
</div> </div>
</div> </div>
</div> </div>
@@ -93,11 +103,12 @@ function SectionEnforcement() {
<section className={clsx(styles.section, styles.sectionAlt)}> <section className={clsx(styles.section, styles.sectionAlt)}>
<div className="container"> <div className="container">
<div className={clsx(styles.sectionInner, styles.sectionReverse)}> <div className={clsx(styles.sectionInner, styles.sectionReverse)}>
<div className={styles.sectionImage}> <div className={styles.sectionImageWrap}>
<img src="img/huawei.png" alt="海思机顶盒" height="250" width="400" /> <div className={styles.imageGlow} />
<img src="img/huawei.png" alt="海思机顶盒" className={styles.sectionImg} height="250" width="400" />
</div> </div>
<div className={styles.sectionText}> <div className={styles.sectionText}>
<span className={styles.sectionBadge}>变废为宝</span> <span className={styles.sectionBadge}>✦ 变废为宝</span>
<h2 className={styles.sectionTitle}>将机顶盒变成超低功耗服务器</h2> <h2 className={styles.sectionTitle}>将机顶盒变成超低功耗服务器</h2>
<p className={styles.sectionDesc}> <p className={styles.sectionDesc}>
实测功耗约 3 瓦，全年无休电费 ≈18 元/年，一杯奶茶钱养活它一年。 实测功耗约 3 瓦，全年无休电费 ≈18 元/年，一杯奶茶钱养活它一年。
@@ -108,6 +119,9 @@ function SectionEnforcement() {
<li>网页建站 / 内网穿透 / 公网映射</li> <li>网页建站 / 内网穿透 / 公网映射</li>
<li>科学上网 / 跑脚本 / 定时任务</li> <li>科学上网 / 跑脚本 / 定时任务</li>
</ul> </ul>
<blockquote className={styles.sectionQuote}>
"我是小盒子，也是大世界！千家万户都有一个机顶盒，开启您的探索之旅！"
</blockquote>
</div> </div>
</div> </div>
</div> </div>
@@ -119,21 +133,34 @@ function OpenCollective() {
return ( return (
<section className={styles.donateSection}> <section className={styles.donateSection}>
<div className="container"> <div className="container">
<h2 className={styles.donateTitle}>捐助作者，持续开发</h2> <div className={styles.donateTitleWrap}>
<h2 className={styles.donateTitle}>捐助作者，持续开发</h2>
<p className={styles.donateSubtitle}>您的支持是项目持续进步的动力</p>
</div>
<div className={styles.donateRow}> <div className={styles.donateRow}>
<div className={styles.donateCard}> <div className={clsx(styles.donateCard, styles.donateCardBlue)}>
<img src="img/danote.png" alt="作者赞赏码" /> <div className={styles.donateCardAccent} />
<p className={styles.donateCaption}> <div className={styles.donateQrWrap}>
作者赞赏码<br /><br /> <img src="img/danote.png" alt="作者赞赏码" className={styles.donateQr} />
作者"神雕"开发的固件和提供的个人网站，为了持续维护和进步，呼吁有能力的网友支持本站持续运作和固件持续开发更新。不胜感激! 您的捐助将用于本站的服务器架设和固件升级维护。 </div>
</p> <div className={styles.donateCardBody}>
<h3 className={styles.donateCardTitle}>作者赞赏码</h3>
<p className={styles.donateCaption}>
作者"神雕"开发的固件和提供的个人网站，为了持续维护和进步，呼吁有能力的网友支持本站持续运作和固件持续开发更新。不胜感激! 您的捐助将用于本站的服务器架设和固件升级维护。
</p>
</div>
</div> </div>
<div className={styles.donateCard}> <div className={clsx(styles.donateCard, styles.donateCardCyan)}>
<img src="img/alipay.png" alt="支付宝" /> <div className={styles.donateCardAccent} />
<p className={styles.donateCaption}> <div className={styles.donateQrWrap}>
支付宝<br /><br /> <img src="img/alipay.png" alt="支付宝" className={styles.donateQr} />
可以抽出时间为小白网友提供付费远程协助，包括刷机、运维、疑难解决等需求。已组建微信群，加微信注明入群将定期邀请加入。 </div>
</p> <div className={styles.donateCardBody}>
<h3 className={styles.donateCardTitle}>支付宝 / 远程协助</h3>
<p className={styles.donateCaption}>
可以抽出时间为小白网友提供付费远程协助，包括刷机、运维、疑难解决等需求。已组建微信群，加微信注明入群将定期邀请加入。
</p>
</div>
</div> </div>
</div> </div>
</div> </div>

264
src/pages/index.module.css
View File

@@ -2,7 +2,7 @@
.heroBanner { .heroBanner {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 5rem 0 4rem; padding: 5rem 0 6rem;
text-align: center; text-align: center;
background: linear-gradient(160deg, #071525 0%, #0d2137 45%, #071525 100%); background: linear-gradient(160deg, #071525 0%, #0d2137 45%, #071525 100%);
color: #fff; color: #fff;
@@ -20,12 +20,21 @@
.heroGlow { .heroGlow {
position: absolute; position: absolute;
top: -220px; top: -200px;
left: 50%; left: 30%;
transform: translateX(-50%); width: 600px;
width: 700px; height: 600px;
height: 700px; background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 65%);
background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, transparent 65%); pointer-events: none;
}
.heroGlowRight {
position: absolute;
bottom: -150px;
right: 20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 65%);
pointer-events: none; pointer-events: none;
} }
@@ -37,7 +46,13 @@
.heroLogo { .heroLogo {
height: 120px; height: 120px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
filter: drop-shadow(0 0 28px rgba(6, 182, 212, 0.45)); filter: drop-shadow(0 0 32px rgba(6, 182, 212, 0.5));
animation: floatLogo 4s ease-in-out infinite;
}
@keyframes floatLogo {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
} }
.heroTitle { .heroTitle {
@@ -52,8 +67,24 @@
.heroSubtitle { .heroSubtitle {
font-size: 1.15rem; font-size: 1.15rem;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.6);
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
letter-spacing: 0.05em;
}
/* Wave bottom of hero */
.heroWave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 0;
}
.heroWave svg {
display: block;
width: 100%;
height: 80px;
} }
/* ===== Stats ===== */ /* ===== Stats ===== */
@@ -70,15 +101,17 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border: 1px solid rgba(6, 182, 212, 0.22); border: 1px solid rgba(6, 182, 212, 0.2);
border-radius: 12px; border-radius: 12px;
background: rgba(6, 182, 212, 0.06); background: rgba(6, 182, 212, 0.07);
min-width: 90px; min-width: 90px;
transition: border-color 0.2s; transition: all 0.25s ease;
} }
.statItem:hover { .statItem:hover {
border-color: rgba(6, 182, 212, 0.5); border-color: rgba(6, 182, 212, 0.55);
background: rgba(6, 182, 212, 0.12);
transform: translateY(-3px);
} }
.statValue { .statValue {
@@ -106,12 +139,13 @@
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 0.6rem 1.5rem; gap: 0.35rem;
padding: 0.6rem 1.4rem;
border-radius: 8px; border-radius: 8px;
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 500; font-weight: 500;
text-decoration: none !important; text-decoration: none !important;
transition: all 0.2s ease; transition: all 0.22s ease;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
@@ -125,23 +159,24 @@
.btnPrimary:hover { .btnPrimary:hover {
background: #0e7490; background: #0e7490;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35); box-shadow: 0 8px 24px rgba(6, 182, 212, 0.38);
color: #fff !important; color: #fff !important;
} }
.btnSecondary { .btnSecondary {
background: transparent; background: rgba(255,255,255,0.05);
color: #7dd3fc !important; color: #7dd3fc !important;
border: 1px solid rgba(6, 182, 212, 0.35); border: 1px solid rgba(6, 182, 212, 0.32);
} }
.btnSecondary:hover { .btnSecondary:hover {
background: rgba(6, 182, 212, 0.1); background: rgba(6, 182, 212, 0.12);
border-color: #06b6d4; border-color: #06b6d4;
color: #bae6fd !important; color: #bae6fd !important;
transform: translateY(-2px);
} }
/* ===== Content Sections ===== */ /* ===== Sections ===== */
.section { .section {
padding: 5rem 0; padding: 5rem 0;
} }
@@ -164,21 +199,38 @@
flex: 1; flex: 1;
} }
.sectionImage { .sectionImageWrap {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative;
} }
.sectionImage img { .imageGlow {
position: absolute;
inset: -20px;
background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
border-radius: 24px;
pointer-events: none;
}
.sectionImg {
max-width: 100%; max-width: 100%;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
transition: transform 0.35s ease, box-shadow 0.35s ease;
position: relative;
z-index: 1;
}
.sectionImg:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
} }
.sectionBadge { .sectionBadge {
display: inline-block; display: inline-block;
padding: 0.28rem 0.9rem; padding: 0.3rem 1rem;
background: rgba(8, 145, 178, 0.1); background: rgba(8, 145, 178, 0.1);
color: #0891b2; color: #0891b2;
border: 1px solid rgba(6, 182, 212, 0.25); border: 1px solid rgba(6, 182, 212, 0.25);
@@ -186,7 +238,7 @@
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
letter-spacing: 0.03em; letter-spacing: 0.04em;
} }
:global([data-theme='dark']) .sectionBadge { :global([data-theme='dark']) .sectionBadge {
@@ -206,72 +258,174 @@
color: var(--ifm-color-emphasis-700); color: var(--ifm-color-emphasis-700);
line-height: 1.85; line-height: 1.85;
font-size: 1rem; font-size: 1rem;
margin-bottom: 1rem;
} }
/* Tag cloud */
.tagCloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.tag {
display: inline-block;
padding: 0.25rem 0.75rem;
background: var(--ifm-color-emphasis-100);
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 6px;
font-size: 0.82rem;
color: var(--ifm-color-emphasis-700);
transition: all 0.2s;
}
.tag:hover {
border-color: #06b6d4;
color: #0891b2;
background: rgba(6, 182, 212, 0.06);
}
:global([data-theme='dark']) .tag:hover {
color: #38bdf8;
}
/* Feature list */
.featureList { .featureList {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-top: 1.25rem; margin-top: 1.25rem;
margin-bottom: 1.5rem;
} }
.featureList li { .featureList li {
padding: 0.4rem 0 0.4rem 1.4rem; padding: 0.45rem 0 0.45rem 1.5rem;
position: relative; position: relative;
color: var(--ifm-color-emphasis-700); color: var(--ifm-color-emphasis-700);
font-size: 0.95rem; font-size: 0.95rem;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.featureList li:last-child {
border-bottom: none;
} }
.featureList li::before { .featureList li::before {
content: '→'; content: '▸';
position: absolute; position: absolute;
left: 0; left: 0;
color: #06b6d4; color: #06b6d4;
font-weight: 600; font-size: 0.9rem;
} }
/* ===== Donate / Sponsors ===== */ /* Quote */
.sectionQuote {
margin: 0;
padding: 1rem 1.25rem;
border-left: 3px solid #06b6d4;
background: rgba(6, 182, 212, 0.05);
border-radius: 0 8px 8px 0;
font-style: italic;
color: var(--ifm-color-emphasis-600);
font-size: 0.92rem;
line-height: 1.7;
}
:global([data-theme='dark']) .sectionQuote {
background: rgba(6, 182, 212, 0.08);
}
/* ===== Donate Section ===== */
.donateSection { .donateSection {
padding: 4rem 0; padding: 5rem 0;
background: linear-gradient(180deg, var(--ifm-color-emphasis-100) 0%, var(--ifm-background-color) 100%);
}
.donateTitleWrap {
text-align: center;
margin-bottom: 2.5rem;
} }
.donateTitle { .donateTitle {
text-align: center; font-size: 1.75rem;
font-size: 1.5rem; font-weight: 700;
margin-bottom: 2rem; margin-bottom: 0.5rem;
}
.donateSubtitle {
color: var(--ifm-color-emphasis-600);
font-size: 0.95rem;
margin: 0;
} }
.donateRow { .donateRow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 24px; gap: 2rem;
} }
.donateCard { .donateCard {
flex: 1; flex: 1;
max-width: 300px; max-width: 320px;
text-align: center; min-width: 260px;
border: 2px solid #ccc; background: var(--ifm-background-color);
border-radius: 12px; border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid var(--ifm-color-emphasis-200);
padding: 1rem; overflow: hidden;
transition: transform 0.3s; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.donateCard:hover { .donateCard:hover {
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
} }
.donateCard img { .donateCardAccent {
width: 80%; height: 4px;
height: auto; width: 100%;
}
.donateCardBlue .donateCardAccent {
background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}
.donateCardCyan .donateCardAccent {
background: linear-gradient(90deg, #06b6d4, #22d3ee);
}
.donateQrWrap {
display: flex;
justify-content: center;
padding: 1.5rem 1.5rem 1rem;
background: var(--ifm-color-emphasis-100);
}
.donateQr {
width: 160px;
height: 160px;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.donateCardBody {
padding: 1.25rem 1.5rem 1.5rem;
}
.donateCardTitle {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--ifm-color-emphasis-900);
} }
.donateCaption { .donateCaption {
font-size: 0.9rem; font-size: 0.875rem;
color: var(--ifm-color-emphasis-600); color: var(--ifm-color-emphasis-600);
padding: 0.5rem; line-height: 1.75;
line-height: 1.7; margin: 0;
} }
/* ===== Responsive ===== */ /* ===== Responsive ===== */
@@ -279,13 +433,17 @@
.sectionInner, .sectionInner,
.sectionReverse { .sectionReverse {
flex-direction: column !important; flex-direction: column !important;
gap: 2rem; gap: 2.5rem;
}
.sectionImageWrap {
width: 100%;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.heroBanner { .heroBanner {
padding: 3.5rem 0 3rem; padding: 3.5rem 0 5rem;
} }
.heroTitle { .heroTitle {
@@ -305,8 +463,8 @@
} }
.statItem { .statItem {
padding: 0.6rem 1.1rem; padding: 0.6rem 1rem;
min-width: 78px; min-width: 76px;
} }
.statValue { .statValue {
@@ -320,4 +478,8 @@
.section { .section {
padding: 3rem 0; padding: 3rem 0;
} }
.donateSection {
padding: 3rem 0;
}
} }