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

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

@@ -2,7 +2,7 @@
.heroBanner {
position: relative;
overflow: hidden;
padding: 5rem 0 4rem;
padding: 5rem 0 6rem;
text-align: center;
background: linear-gradient(160deg, #071525 0%, #0d2137 45%, #071525 100%);
color: #fff;
@@ -20,12 +20,21 @@
.heroGlow {
position: absolute;
top: -220px;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, transparent 65%);
top: -200px;
left: 30%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 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;
}
@@ -37,7 +46,13 @@
.heroLogo {
height: 120px;
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 {
@@ -52,8 +67,24 @@
.heroSubtitle {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.65);
color: rgba(255, 255, 255, 0.6);
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 ===== */
@@ -70,15 +101,17 @@
flex-direction: column;
align-items: center;
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;
background: rgba(6, 182, 212, 0.06);
background: rgba(6, 182, 212, 0.07);
min-width: 90px;
transition: border-color 0.2s;
transition: all 0.25s ease;
}
.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 {
@@ -106,12 +139,13 @@
.btn {
display: inline-flex;
align-items: center;
padding: 0.6rem 1.5rem;
gap: 0.35rem;
padding: 0.6rem 1.4rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none !important;
transition: all 0.2s ease;
transition: all 0.22s ease;
white-space: nowrap;
cursor: pointer;
}
@@ -125,23 +159,24 @@
.btnPrimary:hover {
background: #0e7490;
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;
}
.btnSecondary {
background: transparent;
background: rgba(255,255,255,0.05);
color: #7dd3fc !important;
border: 1px solid rgba(6, 182, 212, 0.35);
border: 1px solid rgba(6, 182, 212, 0.32);
}
.btnSecondary:hover {
background: rgba(6, 182, 212, 0.1);
background: rgba(6, 182, 212, 0.12);
border-color: #06b6d4;
color: #bae6fd !important;
transform: translateY(-2px);
}
/* ===== Content Sections ===== */
/* ===== Sections ===== */
.section {
padding: 5rem 0;
}
@@ -164,21 +199,38 @@
flex: 1;
}
.sectionImage {
.sectionImageWrap {
flex: 1;
display: flex;
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%;
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 {
display: inline-block;
padding: 0.28rem 0.9rem;
padding: 0.3rem 1rem;
background: rgba(8, 145, 178, 0.1);
color: #0891b2;
border: 1px solid rgba(6, 182, 212, 0.25);
@@ -186,7 +238,7 @@
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
letter-spacing: 0.03em;
letter-spacing: 0.04em;
}
:global([data-theme='dark']) .sectionBadge {
@@ -206,72 +258,174 @@
color: var(--ifm-color-emphasis-700);
line-height: 1.85;
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 {
list-style: none;
padding: 0;
margin-top: 1.25rem;
margin-bottom: 1.5rem;
}
.featureList li {
padding: 0.4rem 0 0.4rem 1.4rem;
padding: 0.45rem 0 0.45rem 1.5rem;
position: relative;
color: var(--ifm-color-emphasis-700);
font-size: 0.95rem;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.featureList li:last-child {
border-bottom: none;
}
.featureList li::before {
content: '→';
content: '▸';
position: absolute;
left: 0;
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 {
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 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 2rem;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.donateSubtitle {
color: var(--ifm-color-emphasis-600);
font-size: 0.95rem;
margin: 0;
}
.donateRow {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
gap: 2rem;
}
.donateCard {
flex: 1;
max-width: 300px;
text-align: center;
border: 2px solid #ccc;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 1rem;
transition: transform 0.3s;
max-width: 320px;
min-width: 260px;
background: var(--ifm-background-color);
border-radius: 16px;
border: 1px solid var(--ifm-color-emphasis-200);
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.donateCard:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
}
.donateCard img {
width: 80%;
height: auto;
.donateCardAccent {
height: 4px;
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 {
font-size: 0.9rem;
font-size: 0.875rem;
color: var(--ifm-color-emphasis-600);
padding: 0.5rem;
line-height: 1.7;
line-height: 1.75;
margin: 0;
}
/* ===== Responsive ===== */
@@ -279,13 +433,17 @@
.sectionInner,
.sectionReverse {
flex-direction: column !important;
gap: 2rem;
gap: 2.5rem;
}
.sectionImageWrap {
width: 100%;
}
}
@media (max-width: 768px) {
.heroBanner {
padding: 3.5rem 0 3rem;
padding: 3.5rem 0 5rem;
}
.heroTitle {
@@ -305,8 +463,8 @@
}
.statItem {
padding: 0.6rem 1.1rem;
min-width: 78px;
padding: 0.6rem 1rem;
min-width: 76px;
}
.statValue {
@@ -320,4 +478,8 @@
.section {
padding: 3rem 0;
}
.donateSection {
padding: 3rem 0;
}
}