jiahong
1109 lines
58 KiB
HTML
1109 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>自然写科技 | 书写智能 yink.ai</title>
|
||
<meta name="description" content="深圳自然写科技 — 自然书写数字化产品方案，智能笔、IoT网关、教室互动、AI云服务">
|
||
<style>
|
||
/* ========== Reset & Base ========== */
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
color: #1d1d1f; background: #fff; line-height: 1.6; overflow-x: hidden;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
img { display: block; max-width: 100%; }
|
||
|
||
/* ========== Navigation ========== */
|
||
.nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
|
||
height: 52px;
|
||
background: transparent;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: background .4s, box-shadow .4s;
|
||
}
|
||
.nav.scrolled {
|
||
background: rgba(55,55,58,.94);
|
||
backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
box-shadow: 0 1px 4px rgba(0,0,0,.12);
|
||
}
|
||
.nav-inner {
|
||
width: 100%; max-width: 1024px; padding: 0 22px;
|
||
display: flex; align-items: center;
|
||
}
|
||
.nav-logo img { height: 36px; opacity: .95; transition: opacity .3s; }
|
||
.nav-logo img:hover { opacity: 1; }
|
||
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; margin-left: 28px; flex: 1; }
|
||
.nav-primary a {
|
||
font-size: 14px; color: #8DC63F; font-weight: 500;
|
||
letter-spacing: .02em; transition: color .3s;
|
||
}
|
||
.nav-primary a:hover { color: #a8e04a; }
|
||
.nav-spacer { flex: 1; }
|
||
.nav-secondary a {
|
||
font-size: 13px; color: rgba(141,198,63,.7); letter-spacing: .02em;
|
||
transition: color .3s;
|
||
}
|
||
.nav-secondary a:hover { color: #8DC63F; }
|
||
|
||
/* Mobile menu button */
|
||
.nav-menu-btn {
|
||
display: none; background: none; border: none; cursor: pointer; padding: 6px;
|
||
}
|
||
.nav-menu-btn span {
|
||
display: block; width: 18px; height: 1.5px; background: #fff;
|
||
margin: 4px 0; transition: transform .3s, opacity .3s;
|
||
}
|
||
|
||
/* ========== Hero ========== */
|
||
.hero {
|
||
position: relative; width: 100%;
|
||
height: 640px;
|
||
background: url('img/home.jpg') center/cover no-repeat;
|
||
display: flex; align-items: flex-end; justify-content: center;
|
||
overflow: hidden;
|
||
padding-bottom: 48px;
|
||
}
|
||
.hero::after {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.50) 100%);
|
||
}
|
||
.hero-content {
|
||
position: relative; z-index: 1; text-align: center; color: #fff;
|
||
padding: 0 24px; max-width: 720px;
|
||
}
|
||
.hero-content h1 {
|
||
font-size: 52px; font-weight: 700; letter-spacing: -.02em;
|
||
line-height: 1.15; margin-bottom: 16px; color: #8DC63F;
|
||
}
|
||
.hero-content h1 span { color: #8DC63F; }
|
||
.hero-content p {
|
||
font-size: 19px; font-weight: 400; color: rgba(255,255,255,.85);
|
||
line-height: 1.6; margin-bottom: 32px;
|
||
}
|
||
.hero-cta {
|
||
display: inline-block; padding: 12px 28px;
|
||
background: #8DC63F; color: #fff; border-radius: 24px;
|
||
font-size: 16px; font-weight: 500; letter-spacing: .02em;
|
||
transition: background .3s, transform .2s;
|
||
}
|
||
.hero-cta:hover { background: #7AB532; transform: scale(1.04); }
|
||
|
||
/* ========== Section Common ========== */
|
||
.section {
|
||
padding: 88px 24px;
|
||
max-width: 1024px; margin: 0 auto;
|
||
}
|
||
.section-full {
|
||
padding: 88px 0; width: 100%;
|
||
}
|
||
.section-gray { background: #f5f5f7; }
|
||
.section-dark { background: #1d1d1f; color: #f5f5f7; }
|
||
.section-title {
|
||
font-size: 44px; font-weight: 700; text-align: center;
|
||
letter-spacing: -.02em; margin-bottom: 12px;
|
||
}
|
||
.section-subtitle {
|
||
font-size: 18px; color: #86868b; text-align: center;
|
||
max-width: 600px; margin: 0 auto 56px;
|
||
}
|
||
.section-dark .section-subtitle { color: #a1a1a6; }
|
||
|
||
/* ========== Highlights Strip ========== */
|
||
.highlights {
|
||
display: grid; grid-template-columns: repeat(3, 1fr);
|
||
max-width: 980px; margin: 0 auto; gap: 0;
|
||
}
|
||
.highlight-item {
|
||
text-align: center; padding: 56px 24px;
|
||
border-right: 1px solid #e0e0e0;
|
||
}
|
||
.highlight-item:last-child { border-right: none; }
|
||
.highlight-num {
|
||
font-size: 52px; font-weight: 700; color: #8DC63F;
|
||
line-height: 1.1; margin-bottom: 8px;
|
||
}
|
||
.highlight-label { font-size: 16px; color: #6e6e73; }
|
||
|
||
/* ========== Download ========== */
|
||
.download-grid {
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 20px; max-width: 800px; margin: 0 auto;
|
||
}
|
||
.dl-card {
|
||
background: #fff; border-radius: 18px; padding: 32px 20px;
|
||
text-align: center; transition: transform .3s, box-shadow .3s;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,.06);
|
||
}
|
||
.dl-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.10); }
|
||
.dl-icon { font-size: 36px; margin-bottom: 12px; }
|
||
.dl-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
|
||
.dl-sub { font-size: 13px; color: #86868b; margin-bottom: 16px; }
|
||
.dl-platforms { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
|
||
.dl-tag {
|
||
font-size: 12px; padding: 4px 12px; border-radius: 12px;
|
||
background: #f0f7e6; color: #5a9a1e; font-weight: 500;
|
||
}
|
||
.dl-tag.coming { background: #f5f5f7; color: #a1a1a6; }
|
||
|
||
/* ========== About ========== */
|
||
.about-wrap {
|
||
max-width: 980px; margin: 0 auto; padding: 0 24px;
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
|
||
}
|
||
.about-img { border-radius: 20px; overflow: hidden; }
|
||
.about-img img { width: 100%; height: auto; }
|
||
.about-text h3 {
|
||
font-size: 15px; font-weight: 600; color: #8DC63F;
|
||
text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
|
||
}
|
||
.about-text h2 {
|
||
font-size: 32px; font-weight: 700; line-height: 1.25; margin-bottom: 20px;
|
||
}
|
||
.about-text p {
|
||
font-size: 15px; color: #515154; line-height: 1.8; margin-bottom: 14px;
|
||
}
|
||
.about-stats {
|
||
display: flex; justify-content: space-around; margin-top: 28px; padding-top: 24px;
|
||
border-top: 1px solid #e0e0e0;
|
||
}
|
||
.about-stats > div { flex: 1; text-align: center; }
|
||
.about-stat-num { font-size: 56px; font-weight: 700; color: #8DC63F; }
|
||
.about-stat-label { font-size: 22px; color: #86868b; margin-top: 4px; }
|
||
|
||
/* ========== Products ========== */
|
||
.product-grid {
|
||
display: grid; grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px; max-width: 980px; margin: 0 auto; padding: 0 24px;
|
||
}
|
||
.product-card {
|
||
background: #fff; border-radius: 20px; overflow: hidden;
|
||
transition: transform .3s, box-shadow .3s;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,.04);
|
||
}
|
||
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
|
||
.product-card-body { padding: 28px 24px; }
|
||
.product-card-body h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
|
||
.product-card-body p { font-size: 14px; color: #6e6e73; line-height: 1.7; }
|
||
.product-card-icon {
|
||
height: 180px; display: flex; align-items: center; justify-content: center;
|
||
font-size: 56px; background: #f5f5f7;
|
||
}
|
||
|
||
/* ========== Contact / Footer ========== */
|
||
.footer {
|
||
background: #3a3a3c; color: #d2d2d7; padding: 64px 24px 32px;
|
||
}
|
||
.footer-inner {
|
||
max-width: 980px; margin: 0 auto;
|
||
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px;
|
||
}
|
||
.footer-brand img { height: 48px; margin-bottom: 16px; }
|
||
.footer-brand p { font-size: 13px; color: #86868b; line-height: 1.7; }
|
||
.footer-col h4 {
|
||
font-size: 13px; font-weight: 600; color: #8DC63F;
|
||
margin-bottom: 16px; letter-spacing: .04em;
|
||
}
|
||
.footer-col ul { list-style: none; }
|
||
.footer-col li { margin-bottom: 10px; }
|
||
.footer-col a {
|
||
font-size: 13px; color: #ccc; transition: color .3s;
|
||
}
|
||
.footer-col a:hover { color: #8DC63F; }
|
||
.footer-col .contact-item {
|
||
font-size: 13px; color: #a1a1a6; margin-bottom: 10px; line-height: 1.6;
|
||
}
|
||
.footer-col .contact-item strong { color: #8DC63F; font-weight: 500; }
|
||
|
||
.footer-bottom {
|
||
max-width: 980px; margin: 0 auto;
|
||
border-top: 1px solid rgba(255,255,255,.08);
|
||
margin-top: 40px; padding-top: 20px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.footer-bottom p { font-size: 12px; color: #999; }
|
||
|
||
/* ========== Scroll Animations ========== */
|
||
.fade-in {
|
||
opacity: 0; transform: translateY(30px);
|
||
transition: opacity .7s ease-out, transform .7s ease-out;
|
||
}
|
||
.fade-in.visible { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ========== Product Catalog ========== */
|
||
.product-catalog {
|
||
--pc: #5a9a1e; --pc-light: #f0f7e6; --pc-text: #1e293b;
|
||
--pc-muted: #64748b; --pc-border: #e2e8f0; --pc-card: #fff;
|
||
--pc-radius: 12px; --pc-shadow: 0 2px 12px rgba(0,0,0,.08);
|
||
max-width: 1024px; margin: 0 auto; padding: 0 24px;
|
||
}
|
||
.catalog-title {
|
||
font-size: 22px; font-weight: 700; margin: 48px 0 20px;
|
||
padding-bottom: 10px; border-bottom: 2px solid var(--pc-border); color: var(--pc-text);
|
||
}
|
||
.catalog-title::before {
|
||
content: ""; display: inline-block; width: 4px; height: 18px;
|
||
background: var(--pc); border-radius: 2px; margin-right: 10px;
|
||
vertical-align: middle; margin-top: -2px;
|
||
}
|
||
.catalog-title:first-child { margin-top: 0; }
|
||
.brand-rule {
|
||
background: var(--pc-card); border: 1px solid var(--pc-border);
|
||
border-radius: var(--pc-radius); padding: 20px 24px; margin-bottom: 36px;
|
||
box-shadow: var(--pc-shadow);
|
||
}
|
||
.brand-rule p { color: var(--pc-muted); line-height: 1.7; }
|
||
.brand-rule strong { color: var(--pc); }
|
||
.product-catalog .table-wrap {
|
||
background: var(--pc-card); border-radius: var(--pc-radius);
|
||
box-shadow: var(--pc-shadow); overflow: hidden; margin-bottom: 48px;
|
||
border: 1px solid var(--pc-border);
|
||
}
|
||
.product-catalog table { width: 100%; border-collapse: collapse; }
|
||
.product-catalog thead th {
|
||
background: var(--pc); color: #fff; padding: 12px 16px;
|
||
text-align: left; font-weight: 600; font-size: 14px;
|
||
}
|
||
.product-catalog thead th:first-child { text-align: center; width: 52px; }
|
||
.product-catalog thead th:nth-child(4) { text-align: center; width: 100px; }
|
||
.product-catalog tbody tr {
|
||
border-bottom: 1px solid var(--pc-border); cursor: pointer; transition: background .15s;
|
||
}
|
||
.product-catalog tbody tr:last-child { border-bottom: none; }
|
||
.product-catalog tbody tr:hover { background: var(--pc-light); }
|
||
.product-catalog tbody td { padding: 12px 16px; vertical-align: middle; }
|
||
.product-catalog tbody td:first-child { text-align: center; font-weight: 700; color: var(--pc); }
|
||
.product-catalog tbody td:nth-child(4) { text-align: center; }
|
||
.product-catalog tbody td img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto; }
|
||
.tag-badge { display: inline-block; background: #f1f5f9; color: var(--pc-muted); font-size: 12px; padding: 2px 8px; border-radius: 99px; }
|
||
.product-label { font-weight: 700; font-size: 15px; }
|
||
.product-en { display: inline-block; font-family: Georgia, serif; font-weight: 700; color: var(--pc); }
|
||
.design-rules {
|
||
background: var(--pc-card); border: 1px solid var(--pc-border);
|
||
border-radius: var(--pc-radius); padding: 20px 24px; margin-bottom: 48px;
|
||
box-shadow: var(--pc-shadow);
|
||
}
|
||
.design-rules ul { padding-left: 0; list-style: none; }
|
||
.design-rules li { padding: 6px 0 6px 20px; position: relative; color: var(--pc-muted); }
|
||
.design-rules li::before { content: "\00B7"; position: absolute; left: 6px; color: var(--pc); font-size: 18px; line-height: 1.3; }
|
||
.design-rules strong { color: var(--pc-text); }
|
||
.product-section {
|
||
background: var(--pc-card); border: 1px solid var(--pc-border);
|
||
border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
|
||
margin-bottom: 48px; overflow: hidden;
|
||
}
|
||
.product-header {
|
||
background: linear-gradient(135deg, #6a9f2c 0%, #4a7a1a 100%);
|
||
color: #fff; padding: 24px 28px;
|
||
}
|
||
.product-header .seq { font-size: 22px; opacity: .85; margin-bottom: 6px; font-weight: 600; }
|
||
.product-header h2 { font-size: 24px; font-weight: 700; letter-spacing: .5px; margin-bottom: 6px; }
|
||
.product-header .en-name { font-family: Georgia, serif; font-size: 16px; opacity: .85; }
|
||
.product-body { padding: 28px; }
|
||
.intro-quote {
|
||
background: var(--pc-light); border-left: 4px solid var(--pc);
|
||
border-radius: 0 8px 8px 0; padding: 14px 18px; margin-bottom: 24px;
|
||
font-size: 15px; color: var(--pc-text);
|
||
}
|
||
.intro-quote strong { color: var(--pc); }
|
||
.positioning { margin-bottom: 24px; color: var(--pc-muted); line-height: 1.8; }
|
||
.positioning strong { color: var(--pc-text); font-size: 15px; display: block; margin-bottom: 6px; }
|
||
.features-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--pc-text); }
|
||
.features-list { list-style: none; padding: 0; margin-bottom: 24px; }
|
||
.features-list li {
|
||
padding: 8px 0 8px 28px; position: relative;
|
||
border-bottom: 1px solid var(--pc-border); color: var(--pc-muted); line-height: 1.6;
|
||
}
|
||
.features-list li:last-child { border-bottom: none; }
|
||
.features-list li::before { content: "\2726"; position: absolute; left: 6px; top: 8px; color: var(--pc); font-size: 11px; }
|
||
.features-list li strong { color: var(--pc-text); }
|
||
.spec-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--pc-text); }
|
||
.spec-table-wrap { border-radius: 8px; overflow: hidden; border: 1px solid var(--pc-border); margin-bottom: 24px; }
|
||
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||
.spec-table thead th { background: #f1f5f9; color: var(--pc-text); padding: 9px 14px; text-align: left; font-weight: 600; }
|
||
.spec-table tbody tr { border-top: 1px solid var(--pc-border); }
|
||
.spec-table tbody tr:hover { background: var(--pc-light); }
|
||
.spec-table td { padding: 9px 14px; color: var(--pc-muted); }
|
||
.spec-table td:first-child { color: var(--pc-text); font-weight: 500; width: 38%; }
|
||
.install-block {
|
||
background: #f8fafc; border-radius: 8px; padding: 14px 18px;
|
||
margin-bottom: 24px; font-size: 14px; color: var(--pc-muted);
|
||
border: 1px solid var(--pc-border);
|
||
}
|
||
.install-block strong { color: var(--pc-text); display: block; margin-bottom: 4px; }
|
||
.media-section { margin-bottom: 8px; }
|
||
.media-section h4 { font-weight: 700; font-size: 15px; margin-bottom: 14px; color: var(--pc-text); }
|
||
.img-grid {
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 16px; margin-bottom: 16px;
|
||
}
|
||
.img-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--pc-border); background: #fafafa; }
|
||
.img-card img { width: 100%; height: auto; display: block; }
|
||
.img-card.sm { max-width: 280px; }
|
||
.img-spec-row { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 24px; }
|
||
.img-spec-row .img-card.sm { flex-shrink: 0; margin-bottom: 0; }
|
||
.img-spec-row .spec-side { flex: 1; min-width: 0; }
|
||
.img-spec-row .spec-side .spec-title { margin-top: 0; }
|
||
.img-spec-row .spec-side .spec-table-wrap { margin-bottom: 0; }
|
||
.img-caption {
|
||
padding: 10px 14px; font-size: 13px; color: var(--pc-muted);
|
||
background: #f8fafc; border-top: 1px solid var(--pc-border);
|
||
}
|
||
.img-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
|
||
|
||
/* ========== Responsive ========== */
|
||
|
||
/* --- Tablet & small laptop (<=768px) --- */
|
||
@media (max-width: 768px) {
|
||
/* Nav */
|
||
.nav-links { display: none; }
|
||
.nav-menu-btn { display: block; }
|
||
.nav-links.open {
|
||
display: flex; flex-direction: column; gap: 0;
|
||
position: absolute; top: 52px; left: 0; right: 0;
|
||
background: rgba(55,55,58,.98); padding: 8px 0;
|
||
}
|
||
.nav-links.open a {
|
||
display: block; padding: 14px 32px; font-size: 15px;
|
||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||
}
|
||
.nav-links.open .nav-spacer { display: none; }
|
||
|
||
/* Hero */
|
||
.hero { height: 480px; }
|
||
.hero-content h1 { font-size: 32px; }
|
||
.hero-content p { font-size: 16px; }
|
||
|
||
/* Sections */
|
||
.section { padding: 56px 20px; }
|
||
.section-full { padding: 56px 0; }
|
||
.section-title { font-size: 30px; }
|
||
.section-subtitle { font-size: 16px; margin-bottom: 36px; }
|
||
|
||
/* Highlights */
|
||
.highlights { grid-template-columns: 1fr; }
|
||
.highlight-item { border-right: none; border-bottom: 1px solid #e0e0e0; padding: 32px 24px; }
|
||
.highlight-item:last-child { border-bottom: none; }
|
||
.highlight-num { font-size: 40px; }
|
||
|
||
/* About */
|
||
.about-wrap { grid-template-columns: 1fr; gap: 32px; }
|
||
.about-stats { flex-wrap: wrap; }
|
||
.about-stat-label { font-size: 18px; }
|
||
|
||
/* Download */
|
||
.download-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||
.dl-card { padding: 24px 14px; border-radius: 14px; }
|
||
|
||
/* Product cards */
|
||
.product-grid { grid-template-columns: 1fr; }
|
||
|
||
/* Footer */
|
||
.footer-inner { grid-template-columns: 1fr; gap: 32px; }
|
||
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
|
||
|
||
/* Product Catalog */
|
||
.product-catalog { padding: 0 12px; }
|
||
.catalog-title { font-size: 18px; }
|
||
.product-header .seq { font-size: 18px; }
|
||
.product-header h2 { font-size: 20px; }
|
||
.product-header .en-name { font-size: 14px; }
|
||
.product-body { padding: 18px 14px; }
|
||
.intro-quote { font-size: 14px; padding: 12px 14px; }
|
||
.positioning { font-size: 14px; }
|
||
.features-list li { font-size: 14px; }
|
||
.spec-table { font-size: 13px; }
|
||
.spec-table td:first-child { width: 35%; }
|
||
.img-grid { grid-template-columns: 1fr; }
|
||
.img-trio { grid-template-columns: 1fr; }
|
||
.img-spec-row { flex-direction: column; }
|
||
.img-spec-row .img-card.sm { max-width: 100%; align-self: center; }
|
||
.img-card.sm { max-width: 100%; margin: 0 auto; }
|
||
|
||
/* Product summary table: hide cols 4-6, enable horizontal scroll */
|
||
.product-catalog .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||
.product-catalog thead th:nth-child(4),
|
||
.product-catalog tbody td:nth-child(4) { display: none; }
|
||
.product-catalog thead th:nth-child(5),
|
||
.product-catalog tbody td:nth-child(5) { display: none; }
|
||
.product-catalog thead th:nth-child(6),
|
||
.product-catalog tbody td:nth-child(6) { display: none; }
|
||
}
|
||
|
||
/* --- Mobile (<=480px) --- */
|
||
@media (max-width: 480px) {
|
||
/* Hero */
|
||
.hero { height: 400px; }
|
||
.hero-content h1 { font-size: 26px; }
|
||
.hero-content p { font-size: 15px; margin-bottom: 24px; }
|
||
.hero-cta { padding: 10px 24px; font-size: 15px; }
|
||
|
||
/* Sections */
|
||
.section { padding: 40px 16px; }
|
||
.section-full { padding: 40px 0; }
|
||
.section-title { font-size: 24px; }
|
||
.section-subtitle { font-size: 14px; margin-bottom: 28px; }
|
||
|
||
/* About */
|
||
.about-text h2 { font-size: 24px; }
|
||
.about-text p { font-size: 14px; }
|
||
.about-stats { gap: 16px; }
|
||
.about-stats > div { flex: 1; }
|
||
.about-stat-num { font-size: 44px; }
|
||
.about-stat-label { font-size: 16px; }
|
||
|
||
/* Download */
|
||
.download-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||
.dl-card { padding: 20px 10px; border-radius: 12px; }
|
||
.dl-icon { font-size: 28px; margin-bottom: 8px; }
|
||
.dl-title { font-size: 15px; }
|
||
.dl-sub { font-size: 12px; margin-bottom: 12px; }
|
||
.dl-tag { font-size: 11px; padding: 3px 8px; }
|
||
|
||
/* Product catalog */
|
||
.product-catalog { padding: 0 8px; }
|
||
.product-header { padding: 18px 16px; }
|
||
.product-header .seq { font-size: 16px; }
|
||
.product-header h2 { font-size: 18px; }
|
||
.product-header .en-name { font-size: 13px; }
|
||
.product-body { padding: 14px 12px; }
|
||
.intro-quote { font-size: 13px; padding: 10px 12px; }
|
||
.positioning { font-size: 13px; }
|
||
.features-title, .spec-title { font-size: 14px; }
|
||
.features-list li { font-size: 13px; padding: 6px 0 6px 22px; }
|
||
.features-list li::before { left: 4px; }
|
||
.spec-table { font-size: 12px; }
|
||
.spec-table thead th { padding: 8px 10px; }
|
||
.spec-table td { padding: 8px 10px; }
|
||
.img-caption { font-size: 12px; padding: 8px 10px; }
|
||
.media-section h4 { font-size: 14px; }
|
||
.brand-rule { padding: 14px 16px; }
|
||
.brand-rule p { font-size: 13px; }
|
||
.design-rules li { font-size: 13px; }
|
||
|
||
/* Also hide col 3 (English name) on very small screens */
|
||
.product-catalog thead th:nth-child(3),
|
||
.product-catalog tbody td:nth-child(3) { display: none; }
|
||
|
||
/* Footer */
|
||
.footer { padding: 48px 16px 24px; }
|
||
.footer-col h4 { font-size: 12px; }
|
||
.footer-col a, .footer-col .contact-item { font-size: 12px; }
|
||
.footer-bottom p { font-size: 11px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ==================== Navigation ==================== -->
|
||
<nav class="nav" id="nav">
|
||
<div class="nav-inner">
|
||
<a href="#" class="nav-logo"><img src="img/logo-green.png" alt="自然写科技"></a>
|
||
<ul class="nav-links" id="navLinks">
|
||
<li class="nav-primary"><a href="#products">产品方案</a></li>
|
||
<li class="nav-primary"><a href="News/news.html">行业资讯</a></li>
|
||
<li class="nav-primary"><a href="#">社区交流</a></li>
|
||
<li class="nav-spacer"></li>
|
||
<li class="nav-secondary"><a href="#download">软件下载</a></li>
|
||
<li class="nav-secondary"><a href="#about">关于我们</a></li>
|
||
<li class="nav-secondary"><a href="#contact">联系我们</a></li>
|
||
</ul>
|
||
<button class="nav-menu-btn" id="menuBtn" aria-label="菜单">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ==================== Hero ==================== -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-content">
|
||
<h1>自然书写数字化</h1>
|
||
<p>中性笔手握自然书写，无感数字化采集笔迹<br>AI 实时分析，让课堂更高效</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==================== Download ==================== -->
|
||
<section class="section-full section-gray" id="download">
|
||
<div class="section" style="padding-top:0; padding-bottom:0;">
|
||
<h2 class="section-title fade-in">软件下载</h2>
|
||
<p class="section-subtitle fade-in">全平台覆盖，随时随地使用自然写产品</p>
|
||
<div class="download-grid fade-in">
|
||
<div class="dl-card">
|
||
<div class="dl-icon">📱</div>
|
||
<div class="dl-title">手机端 iOS</div>
|
||
<div class="dl-sub">随时查看学情数据</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">iPhone / iPad</span>
|
||
</div>
|
||
</div>
|
||
<div class="dl-card">
|
||
<div class="dl-icon">📱</div>
|
||
<div class="dl-title">手机端 Android</div>
|
||
<div class="dl-sub">随时查看学情数据</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">Android</span>
|
||
</div>
|
||
</div>
|
||
<div class="dl-card">
|
||
<div class="dl-icon">📱</div>
|
||
<div class="dl-title">手机端 鸿蒙</div>
|
||
<div class="dl-sub">随时查看学情数据</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">HarmonyOS</span>
|
||
</div>
|
||
</div>
|
||
<div class="dl-card">
|
||
<div class="dl-icon">💻</div>
|
||
<div class="dl-title">PC 教师端</div>
|
||
<div class="dl-sub">备课与课堂管理</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">Windows</span>
|
||
</div>
|
||
</div>
|
||
<div class="dl-card">
|
||
<div class="dl-icon">🖥️</div>
|
||
<div class="dl-title">智慧黑板</div>
|
||
<div class="dl-sub">教室互动大屏应用</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">Windows</span>
|
||
</div>
|
||
</div>
|
||
<div class="dl-card">
|
||
<div class="dl-icon">📺</div>
|
||
<div class="dl-title">电视端</div>
|
||
<div class="dl-sub">家庭学习场景</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">Android</span>
|
||
</div>
|
||
</div>
|
||
<div class="dl-card">
|
||
<div class="dl-icon">📋</div>
|
||
<div class="dl-title">Pad iOS</div>
|
||
<div class="dl-sub">便携课堂终端</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">iPad</span>
|
||
</div>
|
||
</div>
|
||
<div class="dl-card">
|
||
<div class="dl-icon">📋</div>
|
||
<div class="dl-title">Pad Android</div>
|
||
<div class="dl-sub">便携课堂终端</div>
|
||
<div class="dl-platforms">
|
||
<span class="dl-tag">Android</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==================== About ==================== -->
|
||
<section class="section-full" id="about" style="background:#fff;">
|
||
<div class="section" style="padding-top:0; padding-bottom:0;">
|
||
<h2 class="section-title fade-in">关于我们</h2>
|
||
<p class="section-subtitle fade-in">以自然书写为核心，用科技赋能教育</p>
|
||
</div>
|
||
<div class="about-wrap fade-in">
|
||
<div class="about-img">
|
||
<img src="img/founder.jpeg" alt="创始团队">
|
||
</div>
|
||
<div class="about-text">
|
||
<h3>Company Profile</h3>
|
||
<h2>深圳自然写科技有限公司</h2>
|
||
<p>由徐佳宏博士创办于 2025 年 8 月，自主研发自然书写数字化产品方案，由智能笔、IoT 网关、教室互动 APP、手机 APP、云服务组成。中小学生在学校课室及家里手握中性圆珠笔自然书写无感数字化，在教室课堂实时互动。</p>
|
||
<p>云端协同下教室智能黑板上安装的 APP 与师生高效互动，大大提高课堂效率。公司秉承教育部提出数智教育理念，保护青少年眼睛视力的责任担当，以自然书写的中性笔为学生课堂最效率的智能终端为核心。</p>
|
||
<div class="about-stats">
|
||
<div>
|
||
<div class="about-stat-num">13</div>
|
||
<div class="about-stat-label">软件著作权</div>
|
||
</div>
|
||
<div>
|
||
<div class="about-stat-num">3</div>
|
||
<div class="about-stat-label">发明专利</div>
|
||
</div>
|
||
<div>
|
||
<div class="about-stat-num">9</div>
|
||
<div class="about-stat-label">实用新型专利</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==================== Products ==================== -->
|
||
<section class="section-full section-gray" id="products">
|
||
<div class="section" style="padding-top:0; padding-bottom:0;">
|
||
<h2 class="section-title fade-in">产品方案</h2>
|
||
<p class="section-subtitle fade-in">从智能笔到云端 AI，完整的数字化书写生态</p>
|
||
</div>
|
||
|
||
<div class="product-catalog">
|
||
|
||
<h2 class="catalog-title">品牌命名规则</h2>
|
||
<div class="brand-rule">
|
||
<p>所有硬件产品采用统一的四字母英文标识命名，后三个字母固定为 <strong>ink</strong>（寓意“书写、墨迹”，呼应智能点阵笔教育系统的核心基因），首字母根据产品特性赋予语义区分。</p>
|
||
</div>
|
||
|
||
<h2 class="catalog-title">硬件产品列表</h2>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>#</th><th>产品名称</th><th>英文标识</th><th>产品图示</th><th>命名释义</th><th>词汇属性</th></tr></thead>
|
||
<tbody>
|
||
<tr onclick="location.href='#prod-bink'"><td>1</td><td><span class="product-label">黑板网关</span></td><td><span class="product-en">Wink / Bink</span></td><td><img src="product/img/Bink01.png" alt="Bink"></td><td>W = Wall，壁挂式黑板网关；B = Blackboard，黑板专用网关兼 UWB 接收器</td><td><span class="tag-badge">Wink 英语单词（眨眼），Bink 创造词</span></td></tr>
|
||
<tr onclick="location.href='#prod-cink'"><td>2</td><td><span class="product-label">教室网关</span></td><td><span class="product-en">Cink / Nink</span></td><td><img src="product/img/Cink1.png" alt="Cink"></td><td>C = Classroom，教室级智能网关；N = Network</td><td><span class="tag-badge">Cink 创造词</span></td></tr>
|
||
<tr onclick="location.href='#prod-mink'"><td>3</td><td><span class="product-label">教师笔</span></td><td><span class="product-en">Mink</span></td><td><img src="product/img/Mink3.jpg" alt="Mink"></td><td>M = Master，教师（师傅）专用智能笔</td><td><span class="tag-badge">英语单词（貂），品牌感强</span></td></tr>
|
||
<tr onclick="location.href='#prod-tink'"><td>4</td><td><span class="product-label">学生笔</span></td><td><span class="product-en">Tink</span></td><td><img src="product/img/Tink1.jpg" alt="Tink"></td><td>T = Trainee，学生（学员）专用智能笔</td><td><span class="tag-badge">创造词，近似 Think（思考）</span></td></tr>
|
||
<tr onclick="location.href='#prod-qink'"><td>5</td><td><span class="product-label">指向遥控器头</span></td><td><span class="product-en">Qink</span></td><td><img src="product/img/Qink1.png" alt="Qink"></td><td>Q = Quick（快速指向），插入智能笔的 UWB 发射模组</td><td><span class="tag-badge">创造词</span></td></tr>
|
||
<tr onclick="location.href='#prod-rink'"><td>6</td><td><span class="product-label">指向遥控器</span></td><td><span class="product-en">Link / Rink</span></td><td><img src="product/img/Rink.png" alt="Rink"></td><td>L = Link，远程连接指向遥控器；R = Remote</td><td><span class="tag-badge">Link 英语单词（链接）；Rink 英语单词</span></td></tr>
|
||
<tr onclick="location.href='#prod-hink'"><td>7</td><td><span class="product-label">手写板</span></td><td><span class="product-en">Hink / Xink</span></td><td><img src="product/img/Hink.png" alt="Hink"></td><td>H = Handwriting，手写输入板；X = eXpression</td><td><span class="tag-badge">Hink / Xink 均为创造词</span></td></tr>
|
||
<tr onclick="location.href='#prod-zink'"><td>8</td><td><span class="product-label">算力盒</span></td><td><span class="product-en">Dink / Zink</span></td><td><img src="product/img/Zink.png" alt="Zink"></td><td>D = Data，边缘数据计算盒；Z = Zone，区域算力中枢</td><td><span class="tag-badge">Dink 英语单词；Zink 创造词</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h2 class="catalog-title">标识设计要求</h2>
|
||
<div class="design-rules">
|
||
<ul>
|
||
<li><strong>字体：</strong>全大写 WINK / CINK / … 用于正式场景；首字母大写 Wink / Cink / … 用于文档行文</li>
|
||
<li><strong>色彩：</strong>各产品标识可搭配独立的品牌色，但统一保留 ink 部分的视觉一致性</li>
|
||
<li><strong>应用场景：</strong>产品外壳丝印、包装盒、软件界面、官网产品页</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2 class="catalog-title">产品功能介绍</h2>
|
||
|
||
<!-- 1. Bink -->
|
||
<div class="product-section" id="prod-bink">
|
||
<div class="product-header"><div class="seq">01 / 黑板网关</div><h2>Wink / Bink</h2><div class="en-name">Blackboard Wireless Gateway</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>嵌入智慧黑板的无线通信枢纽，笔迹汇聚 + UWB 精准接收，USB 接入即插即用，最多同时连接 64 支智能笔实时上屏。</div>
|
||
<div class="positioning"><strong>产品定位</strong>安装于智慧黑板（86寸交互式一体机）背面或侧面墙壁的壁挂式网关，是教室前端的数据汇聚与转发中枢。通过 USB 接入黑板主板取电，同时承担两大核心角色：一是通过 BLE 5.0 / SLE 1.0 汇聚全班智能笔书写数据并推送至大屏；二是作为 UWB 接收器，实时接收教师笔（Mink + Qink）发出的空间指向信号，将指向坐标转化为大屏光标操控。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>大容量笔连接：</strong>通过 BLE 5.0 / SLE 1.0 同时连接最多 64 支智能笔，实时接收书写坐标、压力和笔画数据</li>
|
||
<li><strong>大屏实时呈现：</strong>将笔迹数据通过 WebSocket 推送至黑板显示应用，实现板书实时上屏，延迟低于 50ms</li>
|
||
<li><strong>UWB 精准接收：</strong>作为 UWB 接收端，接收 Mink 教师笔上 Qink 模组发出的空间指向信号，定位精度达厘米级</li>
|
||
<li><strong>互动课堂指令：</strong>发题、收卷、分组抢答等课堂控制指令的下发与响应</li>
|
||
<li><strong>设备自动发现：</strong>基于 mDNS 协议自动发现并绑定教室内的算力盒和云平台，即插即用</li>
|
||
<li><strong>IoT 设备联动：</strong>控制教室内的智能灯、智能开关、智能窗帘、空调等 IoT 设备</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置</div>
|
||
<div class="img-spec-row">
|
||
<div class="img-card sm"><img src="product/img/Bink01.png" alt="Bink 产品外观"><div class="img-caption">Bink 黑板网关 — 直径 160mm，壁挂安装</div></div>
|
||
<div class="spec-side">
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>无线连接（笔迹）</td><td>BLE 5.0 / SLE 1.0 多连接</td></tr>
|
||
<tr><td>最大连接笔数</td><td>64 支</td></tr>
|
||
<tr><td>UWB 接收</td><td>内置 UWB 接收模组，厘米级定位精度</td></tr>
|
||
<tr><td>供电方式</td><td>USB 取电（连接黑板主板）</td></tr>
|
||
<tr><td>上行网络</td><td>WiFi 上联互联网</td></tr>
|
||
<tr><td>外形尺寸</td><td>直径 160mm 圆形</td></tr>
|
||
<tr><td>安装方式</td><td>壁挂式，固定于黑板背部或侧面墙壁</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
<div class="media-section">
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Bink.jpg" alt="Bink 安装效果"><div class="img-caption">Bink 壁挂式黑板网关 — 白色外壳融入教室环境</div></div>
|
||
</div>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Bink0.jpg" alt="会议室教室场景"><div class="img-caption">会议室 / 教室场景 — 智慧大屏搭配 Bink 网关，教师板书内容实时呈现</div></div>
|
||
<div class="img-card"><img src="product/img/Bink1.jpg" alt="互动课堂场景"><div class="img-caption">互动课堂场景 — 全班学生使用智能笔书写，Bink 实时汇聚笔迹数据</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. Cink -->
|
||
<div class="product-section" id="prod-cink">
|
||
<div class="product-header"><div class="seq">02 / 教室网关</div><h2>Cink / Nink</h2><div class="en-name">Classroom Wireless Gateway</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>嵌入墙面开关位的隐形网关，取电于墙壁，无需额外布线，最多同时连接 20 支智能笔。</div>
|
||
<div class="positioning"><strong>产品定位</strong>安装于教室墙面开关底盒位置的嵌入式网关设备，直接从墙壁开关位取电，外观与普通开关面板融为一体，完全隐形于教室环境。覆盖笔连接数为 20 支，满足小班或分组教学场景。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>笔连接：</strong>通过 BLE 5.0 / SLE 1.0 同时连接最多 20 支智能笔</li>
|
||
<li><strong>数据转发网关：</strong>将笔迹数据通过 WiFi 上联互联网，转发至算力盒或云平台</li>
|
||
<li><strong>离线缓存：</strong>网络中断时本地缓存笔迹数据（最大 256MB），网络恢复后自动上传</li>
|
||
<li><strong>LED 状态指示：</strong>黄色 = 未激活，蓝色 = 已激活在线，红色 = 故障</li>
|
||
<li><strong>远程运维：</strong>支持 OTA 固件升级、远程日志查看、设备参数远程配置</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置</div>
|
||
<div class="img-spec-row">
|
||
<div class="img-card sm"><img src="product/img/Cink1.png" alt="Cink 外观"><div class="img-caption">Cink 教室网关 — 白色方形外观，嵌入墙面开关底盒</div></div>
|
||
<div class="spec-side">
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>无线连接</td><td>BLE 5.0 / SLE 1.0 多连接</td></tr>
|
||
<tr><td>最大连接笔数</td><td>20 支</td></tr>
|
||
<tr><td>供电方式</td><td>墙壁开关位取电</td></tr>
|
||
<tr><td>上行网络</td><td>WiFi 上联互联网</td></tr>
|
||
<tr><td>安装方式</td><td>嵌入墙面开关底盒</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
<div class="media-section">
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Cink.jpg" alt="Cink 应用场景"><div class="img-caption">Cink 教室网关应用场景</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. Mink -->
|
||
<div class="product-section" id="prod-mink">
|
||
<div class="product-header"><div class="seq">03 / 教师笔</div><h2>Mink</h2><div class="en-name">Master Smart Pen</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>铝合金笔身 + 高帧率光学模组，教师手中的智慧教学核心工具。</div>
|
||
<div class="positioning"><strong>产品定位</strong>教师专用高端智能点阵笔，铝合金笔身设计，具备高帧率光学采集、麦克风语音控制和丰富的交互功能，是教师课堂教学的核心工具。教师只需在点阵纸上正常书写，Mink 即可将每一笔板书数字化，实时同步至智慧大屏。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>高精度书写：</strong>内置高帧率（130FPS）CMOS 光学模组，书写精度达 0.1mm，延迟 < 20ms</li>
|
||
<li><strong>压力感应：</strong>内置压力传感器，感知书写力度，实现粗细变化的自然笔迹还原</li>
|
||
<li><strong>语音交互：</strong>内置麦克风，支持按键说话进行语音指令控制（发题、翻页、切屏等）</li>
|
||
<li><strong>蜂鸣提示：</strong>答题超时、收卷完成等事件的声音提醒</li>
|
||
<li><strong>多设备连接：</strong>BLE 5.0 / SLE 1.0 直连黑板网关或教室网关，数据实时同步至大屏</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置（典型）</div>
|
||
<div class="img-spec-row">
|
||
<div class="img-card sm"><img src="product/img/Tink.png" alt="Tink 外观"><div class="img-caption">Tink 学生笔 — 橙色 ABS 笔身，轻巧耐摔</div></div>
|
||
<div class="spec-side">
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>镜头帧率</td><td>130 FPS</td></tr>
|
||
<tr><td>笔身材质</td><td>铝合金，电镀笔帽/笔尖</td></tr>
|
||
<tr><td>电池</td><td>180 mAh 可充电锂电池</td></tr>
|
||
<tr><td>陀螺仪</td><td>6轴</td></tr>
|
||
<tr><td>存储</td><td>32 MB</td></tr>
|
||
<tr><td>无线连接</td><td>BLE 5.0 / SLE 1.0</td></tr>
|
||
<tr><td>充电方式</td><td>USB-C 磁吸充电</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
<div class="media-section">
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Mink2.jpg" alt="板书教学场景"><div class="img-caption">板书教学场景 — 教师手持 Mink 在点阵教案上书写，板书实时呈现在智慧黑板上</div></div>
|
||
<div class="img-card"><img src="product/img/Mink3.jpg" alt="批改作业场景"><div class="img-caption">批改作业场景 — 教师使用 Mink 在学生点阵作业本上批改，批改痕迹自动数字化</div></div>
|
||
<div class="img-card"><img src="product/img/Mink4.jpg" alt="讲台桌面场景"><div class="img-caption">讲台桌面场景 — Mink 搭配液晶手写板在讲台使用，保持与学生目光交流</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. Tink -->
|
||
<div class="product-section" id="prod-tink">
|
||
<div class="product-header"><div class="seq">04 / 学生笔</div><h2>Tink</h2><div class="en-name">Trainee Smart Pen</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>轻量耐摔的学生专属智能笔，像普通笔一样书写，让每一笔作业自动数字化。</div>
|
||
<div class="positioning"><strong>产品定位</strong>面向中小学生的日常书写智能点阵笔，注重轻量化、耐用性和性价比，满足课堂互动和作业数字化的基本需求。学生无需改变书写习惯，在点阵纸上正常书写即可完成作业提交、课堂互动和考试答题。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>书写数字化：</strong>在点阵纸上正常书写，笔迹坐标实时采集并通过 BLE 传输至教室网关</li>
|
||
<li><strong>自动点名：</strong>笔进入教室范围自动与网关建立连接，实现电子签到</li>
|
||
<li><strong>离线存储：</strong>未联网状态下暂存笔迹数据（16~32MB），联网后自动同步</li>
|
||
<li><strong>墨水窗：</strong>透明墨水窗设计，直观查看笔芯余墨量</li>
|
||
<li><strong>耐摔设计：</strong>ABS 塑料笔身，抗 1.2m 高度跌落，适合学生日常使用</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置（典型）</div>
|
||
<div class="img-spec-row">
|
||
<div class="img-card sm"><img src="product/img/Tink.png" alt="Tink 外观"><div class="img-caption">Tink 学生笔 — 橙色 ABS 笔身，轻巧耐摔</div></div>
|
||
<div class="spec-side">
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>镜头帧率</td><td>130 FPS</td></tr>
|
||
<tr><td>笔身材质</td><td>ABS 塑料，未电镀</td></tr>
|
||
<tr><td>电池</td><td>180 mAh 可充电锂电池</td></tr>
|
||
<tr><td>陀螺仪</td><td>6轴</td></tr>
|
||
<tr><td>存储</td><td>16~32 MB</td></tr>
|
||
<tr><td>无线连接</td><td>BLE 5.0 / SLE 1.0</td></tr>
|
||
<tr><td>充电方式</td><td>USB-C</td></tr>
|
||
<tr><td>笔身重量</td><td>约 18g（含电池）</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
<div class="media-section">
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Tink3.png" alt="Tink 握笔"><div class="img-caption">Tink 握笔姿态 — 符合学生书写习惯的人体工学设计</div></div>
|
||
</div>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Tink1.jpg" alt="日常练习"><div class="img-caption">日常练习 — 学生使用 Tink 在点阵练习本上书写，笔迹实时同步至云端</div></div>
|
||
<div class="img-card"><img src="product/img/Tink2.jpg" alt="考试答题"><div class="img-caption">考试答题 — 学生在点阵试卷上答题，系统自动收卷、AI 自动批改</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. Qink -->
|
||
<div class="product-section" id="prod-qink">
|
||
<div class="product-header"><div class="seq">05 / 指向遥控器头</div><h2>Qink</h2><div class="en-name">Quick UWB Transmitter Module</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>插入 Mink 教师笔的 UWB 发射模组，让智能笔同时具备指向遥控器功能。</div>
|
||
<div class="positioning"><strong>产品定位</strong>微型 UWB 发射模组，通过 USB 接口插入 Mink 教师笔顶部。插入后教师手持 Mink 书写的同时即可作为空间指向遥控器使用——Qink 持续向 Bink 黑板网关发送空间方位信号，Bink 解算出指向坐标并转化为大屏光标位置，实现"所指即所得"的精准操控。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>UWB 精准发射：</strong>内置超宽带发射模组，持续向 Bink 发送空间方位信号，厘米级定位精度</li>
|
||
<li><strong>即插即用：</strong>USB 接口插入 Mink 顶部，由智能笔供电，无需独立充电</li>
|
||
<li><strong>书写与指向融合：</strong>书写时同步发射 UWB 信号，书写、翻页、光标控制无缝切换</li>
|
||
<li><strong>轻巧便携：</strong>体积小巧，插入后不影响握笔手感和重心</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置</div>
|
||
<div class="img-spec-row">
|
||
<div class="img-card sm"><img src="product/img/Qink.png" alt="Qink 产品外观"><div class="img-caption">Qink UWB 发射模组 — 插入智能笔顶部</div></div>
|
||
<div class="spec-side">
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>发射技术</td><td>UWB（超宽带）</td></tr>
|
||
<tr><td>接口</td><td>USB，插入 Mink 教师笔顶部</td></tr>
|
||
<tr><td>供电</td><td>由 Mink 智能笔经 USB 供电</td></tr>
|
||
<tr><td>配合接收端</td><td>Bink 黑板网关（UWB 接收）</td></tr>
|
||
<tr><td>定位精度</td><td>厘米级（< 5cm）</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
<div class="install-block"><strong>安装方式</strong>直接插入 Mink 教师笔顶部 USB 接口，即插即用，无需配置。取下后 Mink 恢复普通智能笔模式。</div>
|
||
<div class="media-section">
|
||
<h4>产品外观</h4>
|
||
<div class="img-trio">
|
||
<div class="img-card"><img src="product/img/Qink1.png" alt="Qink 深灰款"><div class="img-caption">深灰款 — T 型 UWB 发射模组</div></div>
|
||
<div class="img-card"><img src="product/img/Qink2.png" alt="Qink 橙色款"><div class="img-caption">橙色款 — 与 Tink 配色一致</div></div>
|
||
<div class="img-card"><img src="product/img/Qink3.png" alt="Qink 黑头橙身款"><div class="img-caption">黑头橙身款 — 品牌辨识度高</div></div>
|
||
</div>
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Bink1.jpg" alt="互动课堂"><div class="img-caption">互动课堂 — 教师手持插有 Qink 的 Mink，UWB 信号至 Bink，精准指向控制大屏光标</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. Rink -->
|
||
<div class="product-section" id="prod-rink">
|
||
<div class="product-header"><div class="seq">06 / 指向遥控器</div><h2>Link / Rink</h2><div class="en-name">Remote Smart Controller</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>一把遥控器替代所有，空间指向 + 语音 + 红外 + IoT 联动，教室智能操控的全能终端。</div>
|
||
<div class="positioning"><strong>产品定位</strong>智能指向遥控器手持端，集成 UWB 空间指向、蓝牙语音、红外控制、IoT 联动等多种能力，实现对教室大屏、灯光、窗帘、空调的一体化智能操控。教师只需一把 Rink 遥控器，即可在教室任意位置从容操控所有设备。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>空间指向操控：</strong>内置 UWB + 陀螺仪，空中挥动精准控制屏幕光标，厘米级精度</li>
|
||
<li><strong>触控板操控：</strong>方向键区域支持触控滑动，用于精细操作和翻页</li>
|
||
<li><strong>语音控制：</strong>内置麦克风，支持语音搜索和语音指令控制教室设备</li>
|
||
<li><strong>红外学习与发射：</strong>学习电视机、空调、投影仪等红外编码，一键替代多个遥控器</li>
|
||
<li><strong>RF433 射频控制：</strong>控制窗帘电机、智能开关等 433MHz 射频设备</li>
|
||
<li><strong>IoT 场景联动：</strong>一键切换"上课模式""护眼模式""放学模式"等场景预设</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置</div>
|
||
<div class="img-spec-row">
|
||
<div class="img-card sm"><img src="product/img/Rink.png" alt="Rink 外观"><div class="img-caption">Rink 指向遥控器 — 银色金属机身</div></div>
|
||
<div class="spec-side">
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>主芯片</td><td>TL7215A（星闪/蓝牙 SOC）</td></tr>
|
||
<tr><td>UWB 芯片</td><td>GT1500</td></tr>
|
||
<tr><td>按键数量</td><td>7 键 + 触控区</td></tr>
|
||
<tr><td>供电</td><td>1000mAh 充电锂电池</td></tr>
|
||
<tr><td>无线协议</td><td>星闪 / BLE / UWB / 红外</td></tr>
|
||
<tr><td>充电方式</td><td>USB-C</td></tr>
|
||
<tr><td>续航</td><td>常规使用约 30 天</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
<div class="media-section">
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Rink4.jpg" alt="智慧教育场景"><div class="img-caption">智慧教育场景 — 教师手持 Rink 在教室中自由走动，隔空操控大屏，同时控制灯光和窗帘</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. Hink -->
|
||
<div class="product-section" id="prod-hink">
|
||
<div class="product-header"><div class="seq">07 / 手写板</div><h2>Hink / Xink</h2><div class="en-name">Handwriting Tablet</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>无需配套笔的液晶手写板，手指即可书写，笔迹实时同步大屏。</div>
|
||
<div class="positioning"><strong>产品定位</strong>免笔压感式手写输入板，教师在板面上用手指或任意硬物书写，笔迹实时同步至大屏显示，是传统黑板粉笔书写的数字化替代方案。解决了"教师面对黑板背对学生"的传统痛点。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>免笔书写：</strong>电容/电阻触摸膜技术，手指或任意硬物均可书写</li>
|
||
<li><strong>一键擦除：</strong>专用擦除按键，一键清空当前画面</li>
|
||
<li><strong>蓝牙无线：</strong>BLE 5.0 / SLE 1.0 连接教室网关或黑板，无需布线</li>
|
||
<li><strong>USB 供电：</strong>USB-C 充电，内置电池无线使用</li>
|
||
<li><strong>多点触控：</strong>支持多点同时书写，师生协作共同操作</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置</div>
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>触控技术</td><td>电容触摸膜</td></tr>
|
||
<tr><td>无线连接</td><td>BLE 5.0 / SLE 1.0</td></tr>
|
||
<tr><td>供电方式</td><td>USB-C（5V），内置锂电池</td></tr>
|
||
<tr><td>书写区域</td><td>A4 幅面</td></tr>
|
||
<tr><td>显示技术</td><td>LCD 液晶书写屏</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
<div class="media-section">
|
||
<h4>产品外观</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Hink.png" alt="Hink 外观"><div class="img-caption">Hink 液晶手写板 — 黑色书写面板，A4 幅面，轻薄便携</div></div>
|
||
</div>
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Mink1.png" alt="讲台教学"><div class="img-caption">讲台教学 — 教师在 Hink 上书写，笔迹实时同步至大屏，保持与学生目光交流</div></div>
|
||
<div class="img-card"><img src="product/img/Hink2.png" alt="化学课堂"><div class="img-caption">化学课堂 — 在 Hink 上书写化学方程式和知识图谱，大屏同步显示</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. Zink -->
|
||
<div class="product-section" id="prod-zink">
|
||
<div class="product-header"><div class="seq">08 / 算力盒</div><h2>Dink / Zink</h2><div class="en-name">Edge AI Computing Box</div></div>
|
||
<div class="product-body">
|
||
<div class="intro-quote"><strong>一句话介绍：</strong>教室里的边缘 AI 大脑，离线也能秒级完成手写识别，写完即出结果。</div>
|
||
<div class="positioning"><strong>产品定位</strong>部署在教室内的边缘 AI 计算设备，将云端 AI 推理能力下沉至本地，实现离线或弱网环境下的实时手写识别，是互动课堂系统的智能大脑。确保即使校园网络不稳定，AI 识别能力也不降级。</div>
|
||
<div class="features-title">核心功能</div>
|
||
<ul class="features-list">
|
||
<li><strong>端侧 AI 推理：</strong>本地运行轻量化 AI 模型，支持中英文手写 OCR、数学列式识别、笔顺评分</li>
|
||
<li><strong>超低延迟：</strong>单次 OCR 识别 < 200ms，写完即出结果</li>
|
||
<li><strong>离线可用：</strong>断网环境下 AI 识别不降级，结果本地缓存待恢复后上传</li>
|
||
<li><strong>多终端分发：</strong>通过 WebSocket 实时推送至黑板、教师 PC、学生 Pad</li>
|
||
<li><strong>云边协同：</strong>MQTT 上报运行状态，支持 AI 模型在线更新</li>
|
||
<li><strong>集群管理：</strong>校级多台算力盒组成集群，统一调度与负载均衡</li>
|
||
<li><strong>OTA 升级：</strong>固件和 AI 模型远程升级，A/B 分区无损升级</li>
|
||
</ul>
|
||
<div class="spec-title">硬件配置</div>
|
||
<div class="img-spec-row">
|
||
<div class="img-card sm"><img src="product/img/Zink.png" alt="Zink 外观"><div class="img-caption">Zink 算力盒 — 深灰色金属外壳，紧凑小巧</div></div>
|
||
<div class="spec-side">
|
||
<div class="spec-table-wrap"><table class="spec-table">
|
||
<thead><tr><th>参数</th><th>规格</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>处理器</td><td>RK3588 八核 / NVIDIA Jetson</td></tr>
|
||
<tr><td>AI 算力</td><td>NPU 6 TOPS / GPU 512 CUDA 核</td></tr>
|
||
<tr><td>内存</td><td>8~32 GB LPDDR4x</td></tr>
|
||
<tr><td>存储</td><td>64GB eMMC + NVMe SSD</td></tr>
|
||
<tr><td>网络</td><td>千兆以太网 x2 + WiFi 6</td></tr>
|
||
<tr><td>功耗</td><td>15~30W（自适应）</td></tr>
|
||
<tr><td>尺寸</td><td>180mm x 160mm x 28mm</td></tr>
|
||
<tr><td>接口</td><td>双千兆网口、3x HDMI、2x USB、DC 电源</td></tr>
|
||
</tbody>
|
||
</table></div>
|
||
</div>
|
||
</div>
|
||
<div class="install-block"><strong>安装方式</strong>壁挂或桌面放置，有线接入校园网。可隐藏安装于智慧黑板/电视机背面，通过网络远程管理。</div>
|
||
<div class="media-section">
|
||
<h4>产品外观</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Zink1.png" alt="Zink 接口"><div class="img-caption">Zink 接口面板 — 双千兆网口、3x HDMI、2x USB、DC 电源接口</div></div>
|
||
</div>
|
||
<h4>应用场景</h4>
|
||
<div class="img-grid">
|
||
<div class="img-card"><img src="product/img/Zink3.jpg" alt="壁挂部署"><div class="img-caption">壁挂部署 — Zink 固定于智慧黑板侧面墙壁，搭配摄像头实现 AI 视觉辅助教学</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- .product-catalog -->
|
||
</section>
|
||
|
||
<!-- ==================== Footer / Contact ==================== -->
|
||
<footer class="footer" id="contact">
|
||
<div class="footer-inner">
|
||
<div class="footer-brand">
|
||
<img src="img/logo-green-font.png" alt="自然写科技">
|
||
<p>自然书写数字化产品方案<br>让每一笔书写都有价值</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>快速链接</h4>
|
||
<ul>
|
||
<li><a href="#products">产品方案</a></li>
|
||
<li><a href="#download">软件下载</a></li>
|
||
<li><a href="#about">关于我们</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>联系我们</h4>
|
||
<div class="contact-item"><strong>服务热线</strong><br>+86 138-0880-0509</div>
|
||
<div class="contact-item"><strong>地址</strong><br>广东省深圳市福田区百花四路</div>
|
||
<div class="contact-item">
|
||
<strong>邮箱</strong><br>
|
||
招聘 <a href="mailto:ren@writech.cn" style="color:#8DC63F;">ren@writech.cn</a><br>
|
||
技术 <a href="mailto:tech@writech.cn" style="color:#8DC63F;">tech@writech.cn</a><br>
|
||
合作 <a href="mailto:hezuo@writech.cn" style="color:#8DC63F;">hezuo@writech.cn</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>Copyright © 2021-2026 深圳自然写科技有限公司</p>
|
||
<p>粤ICP备2026021413号-1</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ==================== JavaScript ==================== -->
|
||
<script>
|
||
// Mobile menu toggle
|
||
const menuBtn = document.getElementById('menuBtn');
|
||
const navLinks = document.getElementById('navLinks');
|
||
menuBtn.addEventListener('click', () => {
|
||
navLinks.classList.toggle('open');
|
||
const spans = menuBtn.querySelectorAll('span');
|
||
if (navLinks.classList.contains('open')) {
|
||
spans[0].style.transform = 'rotate(45deg) translate(4px, 4px)';
|
||
spans[1].style.opacity = '0';
|
||
spans[2].style.transform = 'rotate(-45deg) translate(4px, -4px)';
|
||
} else {
|
||
spans[0].style.transform = 'none';
|
||
spans[1].style.opacity = '1';
|
||
spans[2].style.transform = 'none';
|
||
}
|
||
});
|
||
// Close menu on link click
|
||
navLinks.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('click', () => {
|
||
navLinks.classList.remove('open');
|
||
const spans = menuBtn.querySelectorAll('span');
|
||
spans[0].style.transform = 'none';
|
||
spans[1].style.opacity = '1';
|
||
spans[2].style.transform = 'none';
|
||
});
|
||
});
|
||
|
||
// Scroll fade-in animation
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.05 });
|
||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||
|
||
// Nav scroll: transparent → dark background
|
||
const nav = document.getElementById('nav');
|
||
const heroEl = document.getElementById('hero');
|
||
window.addEventListener('scroll', () => {
|
||
nav.classList.toggle('scrolled', window.scrollY > heroEl.offsetHeight - 52);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|