首页/ mobileweb/ 极简云笔记与知识库H5移动端功能演示/ 代码预览

💻 代码预览 · 极简云笔记与知识库H5移动端功能演示

mw_tool · 上传者 驰旭教育
← 返回详情
r90/detail.html · 约 2588 字符
1<!doctype html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>笔记详情</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11  <header class="top">
12    <div class="top-l">已保存</div>
13    <div class="top-r">笔记详情</div>
14  </header>
15  <main class="main">
16<div class="card">
17  <div class="row"><div class="nm" style="font-size:17px;font-weight:800">产品需求 PRD 草稿</div>
18  <div><span class="tag">⭐ 星标</span></div></div>
19  <div class="row" style="margin-top:8px"><div class="avatar">驰</div><div class="info" style="flex:1"><div class="nm" style="font-size:13px">驰旭教育 · 产品组</div><div class="muted">编辑于 09:21 · 312 字 · 已同步</div></div>
20  <a class="btn sm" href="edit.html" style="text-decoration:none">编辑</a></div>
21</div>
22<div class="card">
23  <div class="sec-title"><span>📖</span> 渲染预览</div>
24  <div class="muted" style="line-height:1.8">
25  <b>一、背景</b><br>随着用户量增长,现有笔记检索响应变慢,需在 Q3 完成全文搜索重构。<br><br>
26  <b>二、目标</b><br>· 搜索延迟 &lt; 200ms<br>· 支持 Markdown 与标签聚合<br><br>
27  <span style="color:var(--vio)">引用:参考竞品 Notion 的索引方案</span></div>
28</div>
29<div class="card">
30  <div class="sec-title"><span>🏷️</span> 标签</div>
31  <span class="tag">工作</span> <span class="tag">草稿</span> <span class="tag">Q3</span>
32</div>
33<div class="card">
34  <div class="sec-title"><span>📚</span> 知识库关联</div>
35  <a class="note" href="kb.html"><div class="thumb">📐</div><div class="info"><div class="nm">检索架构设计</div><div class="sub">知识库 · 技术主题</div></div><span class="muted">›</span></a>
36</div>
37<div class="row" style="gap:8px;margin:2px 2px 12px">
38  <button class="btn line flex" style="flex:1">⭐ 星标</button>
39  <button class="btn line flex" style="flex:1">📤 分享</button>
40  <button class="btn flex" style="flex:1">🗑 删除</button>
41</div>
42</main>
43  <nav class="nav"><a class=" on" href="index.html"><span class="ic">📒</span>笔记</a><a class="" href="notebooks.html"><span class="ic">🗂️</span>笔记本</a><a class="" href="kb.html"><span class="ic">📚</span>知识库</a><a class="" href="search.html"><span class="ic">🔎</span>搜索</a><a class="" href="settings.html"><span class="ic">⚙️</span>设置</a></nav>
44</div>
45<script></script>
46</body>
47</html>