首页/ mobileweb/ 智能待办与日程管家H5移动端功能演示/ 代码预览

💻 代码预览 · 智能待办与日程管家H5移动端功能演示

mw_tool · 上传者 驰旭教育
← 返回详情
r81/tasks.html · 约 3086 字符
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="search">🔍 搜索任务,如「复盘报告」</div>
17<div class="chips">
18  <div class="chip on">全部 18</div><div class="chip">工作 9</div><div class="chip">生活 5</div><div class="chip">学习 4</div>
19</div>
20<div class="seg" style="margin-bottom:12px"><div class="sg on"><button>待办</button></div><div class="sg"><button>已完成</button></div></div>
21<div class="card">
22  <div class="task" onclick="t=this.querySelector('.check');t.classList.toggle('done');this.classList.toggle('done')">
23    <div class="check"></div><div class="info"><div class="nm">提交季度复盘报告</div><div class="sub">今天 11:00 · 高优先级</div></div><span class="tag">工作</span></div>
24  <div class="task" onclick="t=this.querySelector('.check');t.classList.toggle('done');this.classList.toggle('done')">
25    <div class="check"></div><div class="info"><div class="nm">回复合作方邮件</div><div class="sub">今天 15:00</div></div><span class="tag">工作</span></div>
26  <a class="task" href="task_detail.html" style="text-decoration:none;color:inherit">
27    <div class="check"></div><div class="info"><div class="nm">取快递 · 顺丰 SF123</div><div class="sub">生活</div></div><span class="tag">生活</span></a>
28  <div class="task" onclick="t=this.querySelector('.check');t.classList.toggle('done');this.classList.toggle('done')">
29    <div class="check"></div><div class="info"><div class="nm">读完《深度工作》第 6 章</div><div class="sub">学习 · 剩余 20 页</div></div><span class="tag">学习</span></div>
30  <div class="task" onclick="t=this.querySelector('.check');t.classList.toggle('done');this.classList.toggle('done')">
31    <div class="check"></div><div class="info"><div class="nm">缴纳水电费</div><div class="sub">生活 · 7 月 18 日截止</div></div><span class="badge b-warn">截止</span></div>
32  <a class="task" href="task_detail.html" style="text-decoration:none;color:inherit">
33    <div class="check done indigo"></div><div class="info"><div class="nm done">晨会同步周计划</div><div class="sub">已完成 08:30</div></div><span class="badge b-ok">已完成</span></a>
34</div>
35<a class="fab" href="task_detail.html" title="新建任务">+</a>
36</main>
37  <nav class="nav"><a class="" href="index.html"><span class="ic">📋</span>今日</a><a class=" on" href="tasks.html"><span class="ic">✅</span>待办</a><a class="" href="calendar.html"><span class="ic">📅</span>日历</a><a class="" href="stats.html"><span class="ic">📈</span>统计</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
38</div>
39<script></script>
40</body>
41</html>