diff --git a/office-site/assets/css/style.css b/office-site/assets/css/style.css new file mode 100644 index 0000000..ed2231d --- /dev/null +++ b/office-site/assets/css/style.css @@ -0,0 +1,321 @@ +/* 小米风格企业官网 - 全局样式 */ +:root { + --mi-orange: #ff6900; + --mi-orange-dark: #e65c00; + --mi-orange-light: #fff3ea; + --text: #333333; + --text-sub: #757575; + --text-light: #9e9e9e; + --bg: #f5f5f5; + --bg-soft: #fafafa; + --border: #e6e6e6; + --radius: 12px; + --shadow: 0 4px 16px rgba(0, 0, 0, .06); + --shadow-hover: 0 12px 28px rgba(0, 0, 0, .12); + --header-h: 72px; +} + +* { margin: 0; padding: 0; box-sizing: border-box; } + +body { + font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: var(--text); + background: #fff; + line-height: 1.7; + -webkit-font-smoothing: antialiased; +} + +a { color: inherit; text-decoration: none; } +img { display: block; max-width: 100%; } +ul { list-style: none; } + +.container { width: 1226px; max-width: 100%; margin: 0 auto; padding: 0 16px; } + +/* ============ 顶部导航 ============ */ +.header { + position: sticky; + top: 0; + z-index: 100; + background: rgba(255, 255, 255, .96); + backdrop-filter: saturate(180%) blur(8px); + border-bottom: 1px solid var(--border); +} +.header-inner { + height: var(--header-h); + display: flex; + align-items: center; + gap: 40px; +} +.logo { display: flex; align-items: center; gap: 10px; flex: none; } +.logo img { width: 36px; height: 36px; } +.logo span { font-size: 20px; font-weight: 700; letter-spacing: 1px; } + +.nav { display: flex; gap: 36px; flex: 1; } +.nav a { + font-size: 15px; + color: var(--text); + padding: 6px 0; + position: relative; + transition: color .2s; +} +.nav a:hover { color: var(--mi-orange); } +.nav a.active { color: var(--mi-orange); font-weight: 600; } +.nav a.active::after { + content: ""; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -2px; + width: 24px; + height: 3px; + border-radius: 2px; + background: var(--mi-orange); +} + +.header-actions { display: flex; align-items: center; gap: 12px; flex: none; } + +/* 按钮 */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + height: 44px; + padding: 0 26px; + border-radius: 22px; + font-size: 15px; + border: 1px solid transparent; + cursor: pointer; + transition: all .2s; + font-family: inherit; +} +.btn-primary { background: var(--mi-orange); color: #fff; } +.btn-primary:hover { background: var(--mi-orange-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 105, 0, .3); } +.btn-outline { border-color: var(--border); color: var(--text); background: #fff; } +.btn-outline:hover { border-color: var(--mi-orange); color: var(--mi-orange); } +.btn-sm { height: 36px; padding: 0 18px; font-size: 14px; border-radius: 18px; } +.btn-block { width: 100%; } + +/* ============ Hero ============ */ +.hero { + background: linear-gradient(135deg, #fff7f1 0%, #f7f8fa 55%, #eef1f5 100%); + padding: 72px 0 80px; + overflow: hidden; +} +.hero-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: center; +} +.hero-tag { + display: inline-block; + background: var(--mi-orange-light); + color: var(--mi-orange); + font-size: 13px; + padding: 6px 14px; + border-radius: 14px; + margin-bottom: 22px; +} +.hero h1 { font-size: 48px; line-height: 1.25; font-weight: 800; letter-spacing: 1px; } +.hero h1 em { font-style: normal; color: var(--mi-orange); } +.hero p { margin-top: 20px; font-size: 17px; color: var(--text-sub); max-width: 460px; } +.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; } +.hero-img { display: flex; justify-content: center; } +.hero-img img { width: 100%; max-width: 460px; } + +/* ============ 通用区块 ============ */ +.section { padding: 72px 0; } +.section-soft { background: var(--bg); } +.section-head { text-align: center; margin-bottom: 44px; } +.section-head h2 { font-size: 32px; font-weight: 700; } +.section-head p { margin-top: 10px; color: var(--text-sub); font-size: 15px; } + +/* 卡片 */ +.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } +.card { + background: #fff; + border-radius: var(--radius); + padding: 34px 30px; + box-shadow: var(--shadow); + transition: all .25s ease; + border: 1px solid transparent; +} +.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: #ffe0cc; } +.card .icon { + width: 96px; + height: 96px; + margin-bottom: 20px; +} +.card h3 { font-size: 20px; margin-bottom: 10px; } +.card p { color: var(--text-sub); font-size: 14px; min-height: 48px; } +.card .more { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 18px; + color: var(--mi-orange); + font-size: 14px; + font-weight: 600; +} +.card .more::after { content: "→"; transition: transform .2s; } +.card:hover .more::after { transform: translateX(4px); } + +/* 数据条 */ +.stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + background: #fff; + border-radius: var(--radius); + box-shadow: var(--shadow); + overflow: hidden; +} +.stats .item { padding: 34px 20px; text-align: center; border-right: 1px solid var(--border); } +.stats .item:last-child { border-right: none; } +.stats .num { font-size: 32px; font-weight: 800; color: var(--mi-orange); } +.stats .label { font-size: 14px; color: var(--text-sub); margin-top: 4px; } + +/* ============ 内页 ============ */ +.page-banner { + background: linear-gradient(135deg, #2b2b2b 0%, #1f1f1f 100%); + color: #fff; + padding: 56px 0; +} +.page-banner h1 { font-size: 36px; font-weight: 700; } +.page-banner p { margin-top: 10px; color: rgba(255, 255, 255, .7); font-size: 15px; } + +.panel { + background: #fff; + border-radius: var(--radius); + box-shadow: var(--shadow); + padding: 36px; +} +.panel + .panel { margin-top: 24px; } +.panel h2 { font-size: 22px; margin-bottom: 8px; } +.panel .desc { color: var(--text-sub); font-size: 14px; margin-bottom: 24px; } + +/* 占位区块 */ +.placeholder { + border: 1px dashed #d5d5d5; + border-radius: 10px; + background: repeating-linear-gradient(45deg, #fcfcfc, #fcfcfc 10px, #f7f7f7 10px, #f7f7f7 20px); + color: var(--text-light); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + text-align: center; + padding: 40px 20px; + font-size: 14px; +} +.placeholder .ph-title { font-size: 16px; color: var(--text-sub); font-weight: 600; } +.placeholder.tall { min-height: 260px; } +.placeholder.short { min-height: 120px; } + +/* 目录 / 章节骨架 */ +.chapter-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } +.chapter { + background: #fff; + border: 1px solid var(--border); + border-radius: 10px; + padding: 24px; + transition: all .2s; +} +.chapter:hover { border-color: var(--mi-orange); } +.chapter h4 { font-size: 16px; margin-bottom: 6px; } +.chapter p { font-size: 13px; color: var(--text-light); } + +/* 表单 */ +.form-row { display: flex; gap: 12px; flex-wrap: wrap; } +.input { + flex: 1; + min-width: 240px; + height: 48px; + padding: 0 18px; + border: 1px solid var(--border); + border-radius: 8px; + font-size: 15px; + font-family: inherit; + outline: none; + transition: border-color .2s; +} +.input:focus { border-color: var(--mi-orange); } +.form-tip { margin-top: 12px; font-size: 13px; color: var(--text-light); } + +.result-box { + margin-top: 24px; + border-top: 1px solid var(--border); + padding-top: 24px; +} +.result-empty { text-align: center; padding: 40px 0; color: var(--text-light); } +.result-empty .big { font-size: 40px; margin-bottom: 10px; opacity: .35; } + +table.result-table { width: 100%; border-collapse: collapse; font-size: 14px; } +table.result-table th, +table.result-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; } +table.result-table th { background: var(--bg-soft); color: var(--text-sub); font-weight: 600; } +.pass { color: #52c41a; font-weight: 600; } + +/* 客服 */ +.chat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } +.chat-window { + background: var(--bg-soft); + border: 1px solid var(--border); + border-radius: 10px; + overflow: hidden; +} +.chat-body { height: 380px; overflow-y: auto; padding: 20px; background: #fff; } +.bubble { max-width: 78%; padding: 12px 16px; border-radius: 14px; font-size: 14px; margin-bottom: 14px; line-height: 1.6; } +.bubble.bot { background: var(--bg-soft); border-top-left-radius: 4px; } +.bubble.me { background: var(--mi-orange); color: #fff; margin-left: auto; border-top-right-radius: 4px; } +.chat-foot { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); background: #fff; } + +.quick-list { display: flex; flex-direction: column; gap: 10px; } +.quick-item { + background: #fff; + border: 1px solid var(--border); + border-radius: 8px; + padding: 12px 14px; + font-size: 14px; + cursor: pointer; + transition: all .2s; +} +.quick-item:hover { border-color: var(--mi-orange); color: var(--mi-orange); } + +/* ============ 页脚 ============ */ +.footer { background: #fff; border-top: 1px solid var(--border); padding: 48px 0 28px; margin-top: 40px; } +.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; } +.footer h5 { font-size: 15px; margin-bottom: 14px; } +.footer li { font-size: 13px; color: var(--text-sub); padding: 5px 0; } +.footer li:hover { color: var(--mi-orange); } +.footer .brand p { font-size: 13px; color: var(--text-sub); margin-top: 12px; } +.footer-bottom { + margin-top: 32px; + padding-top: 20px; + border-top: 1px solid var(--border); + text-align: center; + font-size: 12px; + color: var(--text-light); +} +.footer-bottom a { color: var(--text-light); transition: color .2s; } +.footer-bottom a:hover { color: var(--mi-orange); } + +/* ============ 响应式 ============ */ +@media (max-width: 1080px) { + .container { width: 100%; } + .hero-inner { grid-template-columns: 1fr; text-align: center; } + .hero p { margin-left: auto; margin-right: auto; } + .hero-actions { justify-content: center; } + .grid-3 { grid-template-columns: repeat(2, 1fr); } + .stats { grid-template-columns: repeat(2, 1fr); } + .stats .item:nth-child(2) { border-right: none; } + .chat-layout { grid-template-columns: 1fr; } + .footer-cols { grid-template-columns: repeat(2, 1fr); } +} +@media (max-width: 720px) { + .nav { gap: 18px; overflow-x: auto; } + .hero h1 { font-size: 34px; } + .grid-3, .chapter-list { grid-template-columns: 1fr; } + .section { padding: 48px 0; } +} diff --git a/office-site/assets/img/hero-nas.svg b/office-site/assets/img/hero-nas.svg new file mode 100644 index 0000000..6ce9238 --- /dev/null +++ b/office-site/assets/img/hero-nas.svg @@ -0,0 +1,77 @@ + diff --git a/office-site/assets/img/icon-guide.svg b/office-site/assets/img/icon-guide.svg new file mode 100644 index 0000000..67690a2 --- /dev/null +++ b/office-site/assets/img/icon-guide.svg @@ -0,0 +1,15 @@ + diff --git a/office-site/assets/img/icon-report.svg b/office-site/assets/img/icon-report.svg new file mode 100644 index 0000000..24bf6b4 --- /dev/null +++ b/office-site/assets/img/icon-report.svg @@ -0,0 +1,12 @@ + diff --git a/office-site/assets/img/icon-support.svg b/office-site/assets/img/icon-support.svg new file mode 100644 index 0000000..62bca5c --- /dev/null +++ b/office-site/assets/img/icon-support.svg @@ -0,0 +1,13 @@ + diff --git a/office-site/assets/img/logo.svg b/office-site/assets/img/logo.svg new file mode 100644 index 0000000..21c78b5 --- /dev/null +++ b/office-site/assets/img/logo.svg @@ -0,0 +1,12 @@ + diff --git a/office-site/assets/js/main.js b/office-site/assets/js/main.js new file mode 100644 index 0000000..1635dcd --- /dev/null +++ b/office-site/assets/js/main.js @@ -0,0 +1,66 @@ +// 站点交互(占位实现,接入后端后替换为真实接口) +(function () { + 'use strict'; + + /* ---------- 报告查询 ---------- */ + var form = document.getElementById('reportForm'); + if (form) { + var sn = document.getElementById('sn'); + var empty = document.getElementById('resultEmpty'); + var detail = document.getElementById('resultDetail'); + + form.addEventListener('submit', function (e) { + e.preventDefault(); + var val = (sn.value || '').trim(); + if (!val) { + alert('请输入机身编号 / SN'); + sn.focus(); + return; + } + // TODO 接口:GET /api/reports?sn=xxx → 渲染真实报告数据 + empty.style.display = 'none'; + detail.style.display = 'block'; + detail.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + }); + } + + /* ---------- 智能客服 ---------- */ + var chatForm = document.getElementById('chatForm'); + if (chatForm) { + var input = document.getElementById('chatInput'); + var body = document.getElementById('chatBody'); + + function addBubble(text, who) { + var el = document.createElement('div'); + el.className = 'bubble ' + who; + el.textContent = text; + body.appendChild(el); + body.scrollTop = body.scrollHeight; + } + + chatForm.addEventListener('submit', function (e) { + e.preventDefault(); + var text = (input.value || '').trim(); + if (!text) return; + addBubble(text, 'me'); + input.value = ''; + + // TODO 接口:POST /api/chat → 返回真实回复 + setTimeout(function () { + addBubble('已收到你的问题:' + '「' + text + '」。智能客服接口尚未接入,这里将展示真实回复。', 'bot'); + }, 400); + }); + } + + /* ---------- 常见问题快捷提问 ---------- */ + var quickList = document.getElementById('quickList'); + if (quickList) { + var chatInput = document.getElementById('chatInput'); + quickList.addEventListener('click', function (e) { + var item = e.target.closest('.quick-item'); + if (!item || !chatInput) return; + chatInput.value = item.textContent.trim(); + chatInput.focus(); + }); + } +})(); diff --git a/office-site/guide.html b/office-site/guide.html new file mode 100644 index 0000000..7f2ec75 --- /dev/null +++ b/office-site/guide.html @@ -0,0 +1,143 @@ + + +
+ + +建议按以下顺序阅读,遇到任何问题可随时转接智能客服。
+内容待补充
+内容待补充
+内容待补充
+内容待补充
+内容待补充
+内容待补充
+该区域用于放置图文并茂的操作教程,内容后续填充。
+该区域用于放置操作视频,内容后续填充。
+高频问题解答,内容后续填充。
+遇到问题,从这里开始
+从尝鲜到生产,总有一款适合你
+入门尝鲜 · 偶尔使用
+稳定耐用 · 兴趣研究
+高性能 · 生产 / 发烧
+云优、云卓系列每台机器出厂前单独测试,报告可在官网查询;云启系列不提供此报告。
+ + +机身编号位于机器底部铭牌或包装箱侧面标签,如无法识别可联系智能客服协助查询。
+ +该区域用于展示报告样例图,内容后续填充。
+查询规则与常见问题说明,内容后续填充。
+服务时间 09:00 - 21:00
+描述你的问题,智能客服会即时给出建议(示例对话,接口接入后生效)。
+ +