💻 代码预览 · 小草问卷宝

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
11<header class="header"><span class="back"></span><h1>任务中心</h1><span class="right">🔔</span></header>
12<div class="sign-card">
13  <div class="sc-emoji">📅</div>
14  <div class="sc-body">
15    <div class="sc-title">每日签到</div>
16    <div class="sc-sub">连续签到 7 天额外奖励 · 已连续 6 天</div>
17  </div>
18  <div class="sc-btn">立即签到</div>
19</div>
20<div class="sign-week">
21  <div class="sw-day done"><b>✓</b>周一</div>
22  <div class="sw-day done"><b>✓</b>周二</div>
23  <div class="sw-day done"><b>✓</b>周三</div>
24  <div class="sw-day done"><b>✓</b>周四</div>
25  <div class="sw-day done"><b>✓</b>周五</div>
26  <div class="sw-day done"><b>✓</b>周六</div>
27  <div class="sw-day today"><b>7</b>周日</div>
28</div>
29<div class="section-title">🎯 今日任务 <span>完成 2/5</span></div>
30<div id="taskList"></div>
31
32
33<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="surveys.html"><span class="icon">📋</span>问卷</a><a class=" active" href="tasks.html"><span class="icon">🎯</span>任务</a><a class="" href="wallet.html"><span class="icon">💰</span>钱包</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
34<script src="data.js"></script>
35<script>
36  var tl = document.getElementById('taskList');
37  var h = '';
38  window.DATA.tasks.forEach(function (t) {
39    h += '<div class="task-card"><div class="tk-emoji">' + t.emoji + '</div><div class="tk-body">'
40      + '<div class="tk-title">' + t.title + '</div><div class="tk-desc">' + t.desc + '</div>'
41      + '<div class="tk-reward">' + t.reward + '</div>'
42      + '</div><div class="tk-btn" data-toast="任务处理中">' + t.btn + '</div></div>';
43  });
44  tl.innerHTML = h;
45</script>
46<script src="app.js"></script>
47</body>
48</html>