@@ -1449,21 +1458,19 @@
}
brandModalListEl.innerHTML = `
-
- ${items.map((item) => `
-
-
-
${escapeHtml(item.title || "-")}
- ${item.meta ? `
${escapeHtml(item.meta)}
` : ""}
+ ${items.map((item) => `
+
+
+
${escapeHtml(item.title || "-")}
+ ${item.meta ? `
${escapeHtml(item.meta)}
` : ""}
+
+ ${item.tags.map((tag) => `${escapeHtml(tag)}`).join("")}
- ${item.tags && item.tags.length ? `
-
- ${item.tags.map((tag) => `${escapeHtml(tag)}`).join("")}
-
- ` : ""}
-
- `).join("")}
-
+ `).join("")}
`;
}
diff --git a/web/device_query.html b/web/device_query.html
index 2104c99..e612744 100644
--- a/web/device_query.html
+++ b/web/device_query.html
@@ -346,6 +346,10 @@
margin-top: 12px;
flex-wrap: wrap;
}
+ .btns + .sub,
+ .btns + .field-tip {
+ margin-top: 10px;
+ }
button {
border: 0;
border-radius: 10px;
@@ -558,6 +562,9 @@
padding: 14px 16px;
font-weight: 700;
color: #1f355a;
+ user-select: none;
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: transparent;
}
.collapse-card summary::-webkit-details-marker {
display: none;
@@ -660,33 +667,166 @@
margin: 24px auto;
padding: 0 16px 32px;
display: grid;
+ grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
}
- .doc-link-list {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- margin-top: 12px;
+ .doc-sidebar {
+ align-self: start;
+ position: sticky;
+ top: calc(var(--nav-height) + 24px);
+ padding: 12px;
+ max-height: calc(100vh - var(--nav-height) - 40px);
+ overflow: hidden;
+ display: grid;
+ grid-template-rows: minmax(0, 1fr);
}
- .doc-link {
- display: inline-flex;
- align-items: center;
- padding: 8px 12px;
+ .doc-preview {
+ min-width: 0;
+ padding: 18px;
+ }
+ .doc-toc {
+ min-height: 0;
+ overflow: auto;
+ display: grid;
+ gap: 8px;
+ padding-right: 4px;
+ }
+ .doc-toc-section {
+ display: grid;
+ gap: 6px;
+ padding: 8px 0 10px;
+ border-bottom: 1px solid #e7edf7;
+ }
+ .doc-toc-section:last-child {
+ border-bottom: 0;
+ padding-bottom: 0;
+ }
+ .doc-toc-title {
+ padding: 0 4px;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ color: #587095;
+ text-transform: uppercase;
+ }
+ .doc-toc-links {
+ display: grid;
+ gap: 6px;
+ }
+ .doc-toc-link {
+ display: block;
+ padding: 7px 10px;
border-radius: 10px;
- border: 1px solid #d7e2f3;
- background: #f8fbff;
- color: #204470;
+ color: #33527f;
text-decoration: none;
font-size: 13px;
- font-weight: 700;
+ line-height: 1.45;
+ background: transparent;
+ border: 1px solid transparent;
}
- .doc-link:hover {
- background: #eef5ff;
+ .doc-toc-link:hover {
+ background: #f4f8ff;
+ border-color: #e0e8f6;
}
- .doc-link.active {
- background: #0f6fff;
- border-color: #0f6fff;
- color: #fff;
+ .doc-toc-link.level-2 {
+ font-weight: 600;
+ color: #28466f;
+ }
+ .doc-toc-link.level-3 {
+ margin-left: 0;
+ font-size: 12px;
+ }
+ .doc-toc-link.level-4 {
+ margin-left: 12px;
+ font-size: 12px;
+ }
+ .markdown-body {
+ color: #223047;
+ font-size: 14px;
+ line-height: 1.75;
+ }
+ .markdown-body > :first-child {
+ margin-top: 0;
+ }
+ .markdown-body > :last-child {
+ margin-bottom: 0;
+ }
+ .markdown-body h1,
+ .markdown-body h2,
+ .markdown-body h3,
+ .markdown-body h4 {
+ margin: 1.2em 0 0.55em;
+ color: #1b2a42;
+ line-height: 1.35;
+ }
+ .markdown-body h1 { font-size: 32px; }
+ .markdown-body h2 { font-size: 24px; }
+ .markdown-body h3 { font-size: 19px; }
+ .markdown-body h4 { font-size: 16px; }
+ .markdown-body p,
+ .markdown-body ul,
+ .markdown-body ol,
+ .markdown-body blockquote {
+ margin: 0 0 1em;
+ }
+ .markdown-body ul,
+ .markdown-body ol {
+ padding-left: 22px;
+ }
+ .markdown-body li + li {
+ margin-top: 4px;
+ }
+ .markdown-body blockquote {
+ padding: 10px 14px;
+ border-left: 4px solid #cddcf6;
+ border-radius: 0 10px 10px 0;
+ background: #f7faff;
+ color: #52627a;
+ }
+ .markdown-body pre {
+ margin: 0 0 1em;
+ white-space: pre-wrap;
+ word-break: break-word;
+ font-size: 13px;
+ line-height: 1.65;
+ background: #f6f8fb;
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ padding: 14px;
+ overflow: auto;
+ }
+ .markdown-body pre code {
+ padding: 0;
+ border: 0;
+ background: transparent;
+ color: inherit;
+ font-size: inherit;
+ }
+ .markdown-body code {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+ font-size: 0.92em;
+ padding: 1px 6px;
+ border-radius: 6px;
+ background: #edf3ff;
+ color: #294f88;
+ border: 1px solid #d7e3fb;
+ }
+ .markdown-body hr {
+ border: 0;
+ border-top: 1px solid #d8e1ef;
+ margin: 1.2em 0;
+ }
+ .markdown-body a {
+ color: #0f6fff;
+ text-decoration: none;
+ }
+ .markdown-body a:hover {
+ text-decoration: underline;
+ }
+ .markdown-body h2,
+ .markdown-body h3,
+ .markdown-body h4 {
+ scroll-margin-top: calc(var(--nav-height) + 20px);
}
.doc-section + .doc-section {
margin-top: 14px;
@@ -700,6 +840,13 @@
.query-sidebar {
position: static;
}
+ .doc-grid {
+ grid-template-columns: 1fr;
+ }
+ .doc-sidebar {
+ position: static;
+ max-height: none;
+ }
.search-layout {
grid-template-columns: 1fr;
}
@@ -722,7 +869,7 @@
MobileModels
设备查询
数据管理
-
相关文档
+
使用文档