From 344edd86a74394a4942ae899209798745936009f Mon Sep 17 00:00:00 2001 From: teasiu Date: Sun, 12 Apr 2026 12:37:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.js | 166 +++++++++++------- src/pages/index.module.css | 343 +++++++++++++++++++++++++++++++++---- 2 files changed, 420 insertions(+), 89 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index 0450dae..6a1dd5f 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,95 +6,143 @@ import Layout from '@theme/Layout'; import useBaseUrl from "@docusaurus/useBaseUrl"; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Amlogic from '@site/src/components/Amlogic'; - import styles from './index.module.css'; +const stats = [ + { value: '~3W', label: '满载功耗' }, + { value: '4核', label: 'ARM CPU' }, + { value: '1.6GHz', label: '最高主频' }, + { value: '¥18/年', label: '全年电费' }, +]; + function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( -
+
+
+
- Logo -

{siteConfig.title}

-

{siteConfig.tagline}

-
- 保姆级刷机教程 - 最新固件下载 - 设备支持适配表 -
-

-
- - 系统最新升级公告 - - - 海纳思系统使用手册 - +
+ HiNas Logo +

{siteConfig.title}

+

{siteConfig.tagline}

+ +
+ {stats.map((s) => ( +
+ {s.value} + {s.label} +
+ ))} +
+ +
+ + 保姆级刷机教程 + + + 最新固件下载 + + + 设备适配表 + +
+
+ + 系统升级公告 + + + 海纳思使用手册 + +
); } -function PolicyPersistence() { - const {siteConfig} = useDocusaurusContext(); +function SectionPersistence() { return ( -
-
-
-
-

开源，免费，易用的家用 Linux 服务器系统

-

- 海纳思系统，一个基于开源 Linux Ubuntu 20.04 LTS 打造的 NAS 系统，
- 开发者精心打造，已开发和内置丰富的程序和功能，内网穿透，网盘共享，
- 远程下载，Docker安装，个人博客，网络建站，socks5服务，ftp上传下载，
- webdav接口，终端控制，一键还原，计划任务等等。
+

+
+
+
+ 开源 · 免费 · 易用 +

家用 Linux 服务器系统

+

+ 海纳思系统，基于 Ubuntu 20.04 LTS 打造的 NAS 系统，开发者精心内置丰富功能： + 内网穿透、网盘共享、远程下载、Docker 安装、个人博客、网络建站、 + Socks5 服务、FTP 上传下载、WebDAV 接口、终端控制、一键还原、计划任务等。

-
- Policy Persistence +
+ 系统功能概览
-
+
); } -function PolicyEnforcement() { - const {siteConfig} = useDocusaurusContext(); +function SectionEnforcement() { return ( -
-
-
-
- homepage +
+
+
+
+ 海思机顶盒
-
-

将千家万户的机顶盒打造成一台超低功耗的 Linux 服务器

-

实测功耗约 3 瓦，全年无休≈18元/年，一杯奶茶钱，养活它一年。
- 盒子4核心CPU，内核频率达1.4GHz-1.6GHz，流畅运行各项 NAS 程序。
- 作为家用存储，Linux 学习，学生技术孵化，网络下载，组网跳板，均可。
- 网页建站，内网穿越，公网映射，科学上网，跑脚本，定时任务等，更佳。
- 我是小盒子，也是大世界！千家万户都有一个机顶盒，开启您的探索之旅！

+
+ 变废为宝 +

将机顶盒变成超低功耗服务器

+

+ 实测功耗约 3 瓦，全年无休电费 ≈18 元/年，一杯奶茶钱养活它一年。 + 盒子 4 核 CPU，主频达 1.4~1.6GHz，流畅运行各类 NAS 程序。 +

+
    +
  • 家用存储 / Linux 学习 / 学生技术孵化
    • +
  • 网页建站 / 内网穿透 / 公网映射
    • +
  • 科学上网 / 跑脚本 / 定时任务
    • +
-
+
); } function OpenCollective() { - return ( - - ); + return ( +
+
+

捐助作者，持续开发

+
+
+ 作者赞赏码 +

+ 作者赞赏码

+ 作者"神雕"开发的固件和提供的个人网站，为了持续维护和进步，呼吁有能力的网友支持本站持续运作和固件持续开发更新。不甚感激！您的捐助将用于本站的服务器架设和固件升级维护。 +

+
+
+ 支付宝 +

+ 支付宝

+ 可以抽出时间为小白网友提供付费远程协助，包括刷机、运维、疑难解决等需求。已组建微信群，加微信注明入群将定期邀请加入。 +

+
+
+
+
+ ); } export default function Home() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( - - + + diff --git a/src/pages/index.module.css b/src/pages/index.module.css index cf56090..84e26d0 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -1,40 +1,323 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - +/* ===== Hero ===== */ .heroBanner { - padding: 4rem 0; - text-align: center; position: relative; overflow: hidden; + padding: 5rem 0 4rem; + text-align: center; + background: linear-gradient(160deg, #071525 0%, #0d2137 45%, #071525 100%); + color: #fff; } -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; +.heroGrid { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(6, 182, 212, 0.07) 1px, transparent 1px), + linear-gradient(90deg, rgba(6, 182, 212, 0.07) 1px, transparent 1px); + background-size: 48px 48px; + pointer-events: none; +} + +.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%); + pointer-events: none; +} + +.heroContent { + position: relative; + z-index: 1; +} + +.heroLogo { + height: 120px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 28px rgba(6, 182, 212, 0.45)); +} + +.heroTitle { + font-size: 3rem; + font-weight: 700; + margin-bottom: 0.75rem; + background: linear-gradient(90deg, #38bdf8, #06b6d4, #67e8f9); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.heroSubtitle { + font-size: 1.15rem; + color: rgba(255, 255, 255, 0.65); + margin-bottom: 2.5rem; +} + +/* ===== Stats ===== */ +.statsRow { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 2.5rem; +} + +.statItem { + display: flex; + flex-direction: column; + align-items: center; + padding: 0.75rem 1.5rem; + border: 1px solid rgba(6, 182, 212, 0.22); + border-radius: 12px; + background: rgba(6, 182, 212, 0.06); + min-width: 90px; + transition: border-color 0.2s; +} + +.statItem:hover { + border-color: rgba(6, 182, 212, 0.5); +} + +.statValue { + font-size: 1.5rem; + font-weight: 700; + color: #38bdf8; + line-height: 1.2; +} + +.statLabel { + font-size: 0.78rem; + color: rgba(255, 255, 255, 0.5); + margin-top: 0.25rem; +} + +/* ===== Buttons ===== */ +.buttonGroup { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.btn { + display: inline-flex; + align-items: center; + padding: 0.6rem 1.5rem; + border-radius: 8px; + font-size: 0.95rem; + font-weight: 500; + text-decoration: none !important; + transition: all 0.2s ease; + white-space: nowrap; + cursor: pointer; +} + +.btnPrimary { + background: #0891b2; + color: #fff !important; + border: 1px solid transparent; +} + +.btnPrimary:hover { + background: #0e7490; + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35); + color: #fff !important; +} + +.btnSecondary { + background: transparent; + color: #7dd3fc !important; + border: 1px solid rgba(6, 182, 212, 0.35); +} + +.btnSecondary:hover { + background: rgba(6, 182, 212, 0.1); + border-color: #06b6d4; + color: #bae6fd !important; +} + +/* ===== Content Sections ===== */ +.section { + padding: 5rem 0; +} + +.sectionAlt { + background: var(--ifm-color-emphasis-100); +} + +.sectionInner { + display: flex; + align-items: center; + gap: 4rem; +} + +.sectionReverse { + flex-direction: row-reverse; +} + +.sectionText { + flex: 1; +} + +.sectionImage { + flex: 1; + display: flex; + justify-content: center; +} + +.sectionImage img { + max-width: 100%; + border-radius: 16px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); +} + +.sectionBadge { + display: inline-block; + padding: 0.28rem 0.9rem; + background: rgba(8, 145, 178, 0.1); + color: #0891b2; + border: 1px solid rgba(6, 182, 212, 0.25); + border-radius: 100px; + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 1rem; + letter-spacing: 0.03em; +} + +:global([data-theme='dark']) .sectionBadge { + background: rgba(6, 182, 212, 0.12); + color: #38bdf8; + border-color: rgba(6, 182, 212, 0.28); +} + +.sectionTitle { + font-size: 1.9rem; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.35; +} + +.sectionDesc { + color: var(--ifm-color-emphasis-700); + line-height: 1.85; + font-size: 1rem; +} + +.featureList { + list-style: none; + padding: 0; + margin-top: 1.25rem; +} + +.featureList li { + padding: 0.4rem 0 0.4rem 1.4rem; + position: relative; + color: var(--ifm-color-emphasis-700); + font-size: 0.95rem; +} + +.featureList li::before { + content: '→'; + position: absolute; + left: 0; + color: #06b6d4; + font-weight: 600; +} + +/* ===== Donate / Sponsors ===== */ +.donateSection { + padding: 4rem 0; +} + +.donateTitle { + text-align: center; + font-size: 1.5rem; + margin-bottom: 2rem; +} + +.donateRow { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 24px; +} + +.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; +} + +.donateCard:hover { + transform: translateY(-8px); +} + +.donateCard img { + width: 80%; + height: auto; +} + +.donateCaption { + font-size: 0.9rem; + color: var(--ifm-color-emphasis-600); + padding: 0.5rem; + line-height: 1.7; +} + +/* ===== Responsive ===== */ +@media (max-width: 996px) { + .sectionInner, + .sectionReverse { + flex-direction: column !important; + gap: 2rem; } } -.buttons { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - margin-top: 5px; -} +@media (max-width: 768px) { + .heroBanner { + padding: 3.5rem 0 3rem; + } -.policypersistence { - padding: 60px 0; - font-size: 1.3rem; - justify-content: center; - line-height: 40px; - background-color: var(--ifm-color-emphasis-100); -} + .heroTitle { + font-size: 2.2rem; + } -.policyenforcement { - padding: 60px 0; - font-size: 1.3rem; - justify-content: center; - line-height: 40px; -} \ No newline at end of file + .heroLogo { + height: 90px; + } + + .heroSubtitle { + font-size: 1rem; + } + + .statsRow { + gap: 0.75rem; + } + + .statItem { + padding: 0.6rem 1.1rem; + min-width: 78px; + } + + .statValue { + font-size: 1.25rem; + } + + .sectionTitle { + font-size: 1.5rem; + } + + .section { + padding: 3rem 0; + } +}