index.html · 约 30872 字符
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<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --bg:#f3f8fb; --card:#fff; --text:#0d2438; --soft:#5b7a91; --line:#e0eef7;
12 --primary:#0d9488; --primary-light:#ccfbf1; --accent:#6366f1; --warn:#f59e0b; --red:#ef4444;
13 --radius:16px; --shadow:0 4px 16px rgba(13,148,136,.10);
14 }
15 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
16 background:var(--bg); color:var(--text); }
17 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
18 position:relative; box-shadow:0 0 28px rgba(0,0,0,.08); display:flex; flex-direction:column; }
19 .topbar{ padding:12px 18px 8px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:linear-gradient(135deg,var(--primary),#14b8a6); color:#fff; }
20 .topbar .tt{ font-size:18px; font-weight:800; }
21 .topbar .icr{ display:flex; gap:14px; font-size:20px; }
22 .main{ flex:1; overflow-y:auto; padding:0 16px 90px; }
23 .main::-webkit-scrollbar{ display:none; }
24 .view{ display:none; }
25 .view.active{ display:block; animation:fade .22s ease; }
26 @keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
27
28 /* 首页 */
29 .profile-strip{ background:linear-gradient(135deg,var(--primary),#14b8a6); border-radius:var(--radius); padding:18px; color:#fff; margin:16px 0; position:relative; overflow:hidden; box-shadow:var(--shadow); }
30 .profile-strip::before{ content:""; position:absolute; top:-25px; right:-25px; width:120px; height:120px; background:rgba(255,255,255,.12); border-radius:50%; }
31 .profile-strip .row{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
32 .profile-strip .avatar{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:28px; border:2px solid rgba(255,255,255,.45); }
33 .profile-strip .info{ flex:1; }
34 .profile-strip .name{ font-size:18px; font-weight:900; }
35 .profile-strip .sub{ font-size:12px; opacity:.9; margin-top:4px; }
36 .profile-strip .edit{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; }
37 .progress-row{ display:flex; align-items:center; gap:10px; margin-top:12px; position:relative; z-index:1; }
38 .progress-row .bar{ flex:1; height:7px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden; }
39 .progress-row .bar .fill{ height:100%; background:#fff; border-radius:999px; }
40 .progress-row .txt{ font-size:12px; font-weight:700; white-space:nowrap; }
41 .kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
42 .kpi-row .item{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); }
43 .kpi-row .item .v{ font-size:20px; font-weight:900; color:var(--primary); }
44 .kpi-row .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
45 .section{ margin-bottom:16px; }
46 .section-title{ font-size:16px; font-weight:900; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
47 .section-title .more{ font-size:12px; color:var(--soft); font-weight:600; }
48 .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
49 .grid4 .cell{ background:var(--card); border-radius:14px; padding:14px 4px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
50 .grid4 .cell .ic{ font-size:26px; margin-bottom:6px; }
51 .grid4 .cell .txt{ font-size:12px; font-weight:700; color:var(--text); }
52 .rank-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
53 .rank-card .row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
54 .rank-card .row:last-child{ border-bottom:none; }
55 .rank-card .num{ width:24px; height:24px; border-radius:50%; background:var(--primary-light); color:var(--primary); font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
56 .rank-card .name{ flex:1; font-size:14px; font-weight:700; }
57 .rank-card .val{ font-size:14px; font-weight:900; color:var(--primary); }
58
59 /* 线索池 */
60 .search-box{ background:var(--card); border-radius:999px; padding:10px 16px; margin:16px 0; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); }
61 .search-box input{ flex:1; border:none; background:transparent; font-size:14px; outline:none; color:var(--text); }
62 .search-box .ic{ font-size:18px; color:var(--soft); }
63 .tabs{ display:flex; gap:8px; margin-bottom:16px; }
64 .tabs .tab{ flex:1; background:var(--card); border-radius:999px; padding:9px; text-align:center; font-size:14px; font-weight:700; color:var(--soft); cursor:pointer; box-shadow:var(--shadow); }
65 .tabs .tab.on{ background:var(--primary); color:#fff; }
66 .lead-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:12px; }
67 .lead-card .hd{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
68 .lead-card .avatar{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#14b8a6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; }
69 .lead-card .title{ flex:1; }
70 .lead-card .title .t{ font-size:16px; font-weight:900; }
71 .lead-card .title .t .badge{ display:inline-block; background:var(--primary-light); color:var(--primary); font-size:11px; padding:2px 6px; border-radius:999px; margin-left:6px; }
72 .lead-card .title .sub{ font-size:12px; color:var(--soft); margin-top:2px; }
73 .lead-card .btn{ background:#eff6ff; color:var(--accent); border-radius:999px; padding:7px 12px; font-size:12px; font-weight:800; border:none; cursor:pointer; }
74 .lead-card .stats{ display:flex; gap:20px; margin-bottom:14px; }
75 .lead-card .stats .item{ text-align:center; }
76 .lead-card .stats .item .v{ font-size:18px; font-weight:900; }
77 .lead-card .stats .item .l{ font-size:11px; color:var(--soft); margin-top:2px; }
78 .lead-card .actions{ display:flex; gap:8px; }
79 .lead-card .actions button{ flex:1; background:var(--bg); border:none; border-radius:10px; padding:10px; font-size:13px; font-weight:700; color:var(--soft); cursor:pointer; }
80 .lead-card .actions button.primary{ background:var(--primary); color:#fff; }
81 .lead-card .meta{ font-size:12px; color:var(--soft); margin-top:12px; }
82
83 /* 客户详情 */
84 .detail-hero{ background:linear-gradient(135deg,var(--primary),#14b8a6); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; }
85 .detail-hero::before{ content:""; position:absolute; bottom:-40px; right:-40px; width:160px; height:160px; background:rgba(255,255,255,.10); border-radius:50%; }
86 .detail-hero .back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; opacity:.9; margin-bottom:10px; cursor:pointer; }
87 .detail-hero .row{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
88 .detail-hero .avatar{ width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:32px; border:2px solid rgba(255,255,255,.45); }
89 .detail-hero .name{ font-size:20px; font-weight:900; }
90 .detail-hero .sub{ font-size:13px; opacity:.9; margin-top:4px; }
91 .detail-hero .tag{ display:inline-block; background:rgba(255,255,255,.22); border-radius:999px; padding:4px 10px; font-size:12px; margin-top:10px; }
92 .behavior-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
93 .behavior-card .hd{ font-size:15px; font-weight:900; margin-bottom:14px; }
94 .behavior-card .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
95 .behavior-card .grid .item{ background:var(--bg); border-radius:12px; padding:12px 4px; text-align:center; }
96 .behavior-card .grid .item .v{ font-size:22px; font-weight:900; color:var(--primary); }
97 .behavior-card .grid .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
98 .follow-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
99 .follow-card .hd{ font-size:15px; font-weight:900; margin-bottom:14px; }
100 .follow-card .item{ display:flex; gap:12px; padding-bottom:14px; position:relative; }
101 .follow-card .item:last-child{ padding-bottom:0; }
102 .follow-card .item::before{ content:""; position:absolute; left:6px; top:10px; bottom:-4px; width:2px; background:var(--line); }
103 .follow-card .item:last-child::before{ display:none; }
104 .follow-card .dot{ width:14px; height:14px; border-radius:50%; background:var(--primary); border:3px solid #fff; box-shadow:0 0 0 2px var(--line); flex-shrink:0; z-index:1; }
105 .follow-card .dot.done{ background:var(--accent); }
106 .follow-card .info .t{ font-size:14px; font-weight:900; }
107 .follow-card .info .sub{ font-size:12px; color:var(--soft); margin-top:2px; }
108
109 /* 课程中心 */
110 .calendar-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin:16px 0; }
111 .calendar-card .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
112 .calendar-card .hd .t{ font-size:16px; font-weight:900; }
113 .calendar-card .hd .sub{ font-size:12px; color:var(--soft); }
114 .calendar-card .week{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:12px; color:var(--soft); margin-bottom:8px; }
115 .calendar-card .days{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; gap:6px; }
116 .calendar-card .days .d{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:14px; font-weight:700; margin:0 auto; }
117 .calendar-card .days .d.today{ background:var(--primary); color:#fff; }
118 .calendar-card .days .d.mark{ background:var(--primary-light); color:var(--primary); }
119 .empty-state{ text-align:center; padding:20px; color:var(--soft); }
120 .empty-state .ic{ font-size:42px; margin-bottom:8px; }
121 .empty-state .t{ font-size:14px; font-weight:700; }
122 .empty-state .btn{ background:var(--primary); color:#fff; border-radius:999px; padding:10px 24px; font-size:13px; font-weight:800; border:none; margin-top:12px; cursor:pointer; }
123 .filter-bar{ display:flex; gap:8px; margin-bottom:16px; }
124 .filter-bar .chip{ background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13px; color:var(--soft); white-space:nowrap; cursor:pointer; }
125 .filter-bar .chip.on{ background:var(--primary); color:#fff; border-color:var(--primary); }
126 .course-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:12px; cursor:pointer; }
127 .course-card .tag-row{ display:flex; gap:6px; margin-bottom:10px; }
128 .course-card .tag-row span{ font-size:11px; padding:3px 8px; border-radius:999px; font-weight:700; }
129 .course-card .tag-row .type{ background:var(--primary-light); color:var(--primary); }
130 .course-card .tag-row .live{ background:#fef3c7; color:#b45309; }
131 .course-card .t{ font-size:15px; font-weight:900; line-height:1.4; }
132 .course-card .sub{ font-size:12px; color:var(--soft); margin-top:6px; }
133 .course-card .btn{ background:var(--bg); color:var(--primary); border-radius:10px; padding:8px 16px; font-size:13px; font-weight:800; border:none; margin-top:12px; cursor:pointer; }
134
135 /* 课程详情 */
136 .course-hero{ background:linear-gradient(135deg,var(--accent),#8b5cf6); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; }
137 .course-hero::before{ content:""; position:absolute; top:-30px; right:-30px; width:140px; height:140px; background:rgba(255,255,255,.12); border-radius:50%; }
138 .course-hero .back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; opacity:.9; margin-bottom:10px; cursor:pointer; }
139 .course-hero .tt2{ font-size:18px; font-weight:900; margin-bottom:8px; }
140 .course-hero .info{ display:flex; gap:16px; font-size:12px; opacity:.9; }
141 .info-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
142 .info-card .hd{ font-size:15px; font-weight:900; margin-bottom:12px; }
143 .info-card .row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
144 .info-card .row:last-child{ border-bottom:none; }
145 .info-card .row .l{ color:var(--soft); }
146 .info-card .row .v{ font-weight:900; }
147 .chapter-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
148 .chapter-card .hd{ font-size:15px; font-weight:900; margin-bottom:12px; }
149 .chapter-card .item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
150 .chapter-card .item:last-child{ border-bottom:none; }
151 .chapter-card .num{ width:28px; height:28px; border-radius:50%; background:var(--primary-light); color:var(--primary); font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
152 .chapter-card .txt{ flex:1; }
153 .chapter-card .txt .t{ font-size:14px; font-weight:700; }
154 .chapter-card .txt .sub{ font-size:12px; color:var(--soft); margin-top:2px; }
155 .chapter-card .lock{ font-size:18px; color:var(--soft); }
156 .start-btn{ position:fixed; bottom:76px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:398px; background:var(--primary); color:#fff; border:none; border-radius:999px; padding:14px; font-size:15px; font-weight:900; cursor:pointer; box-shadow:0 4px 16px rgba(13,148,136,.35); z-index:30; }
157
158 /* 个人中心 */
159 .me-card{ background:linear-gradient(135deg,var(--primary),#14b8a6); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; box-shadow:var(--shadow); }
160 .me-card::before{ content:""; position:absolute; top:-30px; right:-30px; width:130px; height:130px; background:rgba(255,255,255,.12); border-radius:50%; }
161 .me-card .row{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
162 .me-card .avatar{ width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:32px; border:2px solid rgba(255,255,255,.45); }
163 .me-card .name{ font-size:18px; font-weight:900; }
164 .me-card .id{ font-size:12px; opacity:.85; margin-top:4px; }
165 .me-card .qr{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; }
166 .me-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
167 .me-stats .item{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); }
168 .me-stats .item .v{ font-size:18px; font-weight:900; color:var(--primary); }
169 .me-stats .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
170 .menu-card{ background:var(--card); border-radius:var(--radius); padding:8px 16px; box-shadow:var(--shadow); margin-bottom:16px; }
171 .menu-card .row{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer; }
172 .menu-card .row:last-child{ border-bottom:none; }
173 .menu-card .row .ic{ font-size:22px; width:28px; text-align:center; }
174 .menu-card .row .txt{ flex:1; font-size:14px; font-weight:700; }
175 .menu-card .row .arr{ color:var(--soft); font-size:18px; }
176
177 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
178 height:66px; background:#fff; border-top:1px solid var(--line); display:flex; z-index:20; }
179 .tabbar button{ flex:1; border:none; background:none; font-size:11px; color:var(--soft); font-weight:700;
180 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
181 .tabbar button .ti{ font-size:22px; }
182 .tabbar button.on{ color:var(--primary); }
183 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
184 background:rgba(13,36,56,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
185 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
186 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
187</style>
188</head>
189<body>
190<div class="app">
191 <header class="topbar" id="topbar">
192 <span></span>
193 <span class="tt" id="topTitle">智链销售云</span>
194 <span class="icr"><span>🔔</span><span>⚙️</span></span>
195 </header>
196
197 <main class="main" id="main">
198 <!-- 首页 -->
199 <section class="view active" id="view-home">
200 <div class="profile-strip">
201 <div class="row">
202 <div class="avatar">👨💼</div>
203 <div class="info">
204 <div class="name">陈远航</div>
205 <div class="sub">高级客户顾问 · 智链科技</div>
206 </div>
207 <button class="edit">完善名片</button>
208 </div>
209 <div class="progress-row">
210 <div class="bar"><div class="fill" style="width:78%"></div></div>
211 <div class="txt">名片完整度 78%</div>
212 </div>
213 </div>
214 <div class="kpi-row">
215 <div class="item"><div class="v">156</div><div class="l">今日线索</div></div>
216 <div class="item"><div class="v">42</div><div class="l">意向客户</div></div>
217 <div class="item"><div class="v">8</div><div class="l">今日成交</div></div>
218 </div>
219 <div class="section">
220 <div class="section-title">快捷入口</div>
221 <div class="grid4">
222 <div class="cell" data-go="leads"><div class="ic">🎯</div><div class="txt">线索池</div></div>
223 <div class="cell" data-go="courses"><div class="ic">📚</div><div class="txt">课程中心</div></div>
224 <div class="cell"><div class="ic">📞</div><div class="txt">客户跟进</div></div>
225 <div class="cell"><div class="ic">📊</div><div class="txt">业绩报表</div></div>
226 <div class="cell"><div class="ic">📅</div><div class="txt">拜访计划</div></div>
227 <div class="cell"><div class="ic">💬</div><div class="txt">消息中心</div></div>
228 <div class="cell"><div class="ic">🏆</div><div class="txt">排行榜</div></div>
229 <div class="cell" data-go="me"><div class="ic">👤</div><div class="txt">个人中心</div></div>
230 </div>
231 </div>
232 <div class="section">
233 <div class="section-title">销售排行榜<span class="more">全部 ›</span></div>
234 <div class="rank-card">
235 <div class="row"><div class="num">1</div><div class="name">陈远航</div><div class="val">128 万</div></div>
236 <div class="row"><div class="num">2</div><div class="name">林小雨</div><div class="val">96 万</div></div>
237 <div class="row"><div class="num">3</div><div class="name">王建国</div><div class="val">84 万</div></div>
238 <div class="row"><div class="num">4</div><div class="name">赵思琪</div><div class="val">72 万</div></div>
239 </div>
240 </div>
241 </section>
242
243 <!-- 线索池 -->
244 <section class="view" id="view-leads">
245 <div class="tabs">
246 <div class="tab on">线索</div>
247 <div class="tab">客户</div>
248 <div class="tab">公海</div>
249 </div>
250 <div class="search-box"><span class="ic">🔍</span><input type="text" placeholder="搜索客户 / 企业 / 手机号"></div>
251 <div class="section-title">共 3 条线索<span class="more">最近浏览时间 ↓</span></div>
252 <div class="lead-list">
253 <div class="lead-card" data-go="customer">
254 <div class="hd">
255 <div class="avatar">赵</div>
256 <div class="title"><div class="t">赵志远 <span class="badge">新</span></div><div class="sub">星河科技 · 市场总监</div></div>
257 <button class="btn">意向客户</button>
258 </div>
259 <div class="stats">
260 <div class="item"><div class="v">89</div><div class="l">访问次数</div></div>
261 <div class="item"><div class="v">34</div><div class="l">总时长(分)</div></div>
262 <div class="item"><div class="v">12</div><div class="l">浏览页面</div></div>
263 </div>
264 <div class="actions">
265 <button>屏蔽</button>
266 <button>发消息</button>
267 <button class="primary">打电话</button>
268 </div>
269 <div class="meta">最近访问：07-16 14:32 · 最近沟通：07-16 10:15</div>
270 </div>
271 <div class="lead-card">
272 <div class="hd">
273 <div class="avatar" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">张</div>
274 <div class="title"><div class="t">张栋梁</div><div class="sub">蓝海集团 · 采购经理</div></div>
275 <button class="btn">意向客户</button>
276 </div>
277 <div class="stats">
278 <div class="item"><div class="v">12</div><div class="l">访问次数</div></div>
279 <div class="item"><div class="v">5</div><div class="l">总时长(分)</div></div>
280 <div class="item"><div class="v">1</div><div class="l">浏览页面</div></div>
281 </div>
282 <div class="actions">
283 <button>屏蔽</button>
284 <button>发消息</button>
285 <button class="primary">打电话</button>
286 </div>
287 <div class="meta">最近访问：07-16 11:20 · 最近沟通：07-15 17:40</div>
288 </div>
289 </div>
290 </section>
291
292 <!-- 客户详情 -->
293 <section class="view" id="view-customer">
294 <div class="detail-hero">
295 <div class="back" data-go="leads">‹ 返回线索池</div>
296 <div class="row">
297 <div class="avatar">赵</div>
298 <div class="info">
299 <div class="name">赵志远</div>
300 <div class="sub">星河科技 · 市场总监 · 138****6789</div>
301 <span class="tag">高意向客户</span>
302 </div>
303 </div>
304 </div>
305 <div class="behavior-card">
306 <div class="hd">客户行为数据</div>
307 <div class="grid">
308 <div class="item"><div class="v">89</div><div class="l">访问次数</div></div>
309 <div class="item"><div class="v">34</div><div class="l">总时长(分)</div></div>
310 <div class="item"><div class="v">12</div><div class="l">浏览页面</div></div>
311 <div class="item"><div class="v">3</div><div class="l">下载资料</div></div>
312 <div class="item"><div class="v">2</div><div class="l">观看直播</div></div>
313 <div class="item"><div class="v">1</div><div class="l">提交表单</div></div>
314 </div>
315 </div>
316 <div class="follow-card">
317 <div class="hd">跟进记录</div>
318 <div class="item"><div class="dot done"></div><div class="info"><div class="t">首次电话沟通</div><div class="sub">07-10 10:00 · 了解企业培训需求</div></div></div>
319 <div class="item"><div class="dot done"></div><div class="info"><div class="t">发送产品方案</div><div class="sub">07-12 14:30 · 已查看 3 次</div></div></div>
320 <div class="item"><div class="dot"></div><div class="info"><div class="t">预约线上演示</div><div class="sub">07-17 15:00 · 待完成</div></div></div>
321 </div>
322 </section>
323
324 <!-- 课程中心 -->
325 <section class="view" id="view-courses">
326 <div class="calendar-card">
327 <div class="hd"><span class="t">我的课程</span><span class="sub">2026年7月</span></div>
328 <div class="week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
329 <div class="days">
330 <span class="d">27</span><span class="d">28</span><span class="d">29</span><span class="d">30</span>
331 <span class="d today">1</span><span class="d">2</span><span class="d">3</span>
332 <span class="d mark">4</span><span class="d">5</span><span class="d">6</span><span class="d">7</span>
333 <span class="d">8</span><span class="d">9</span><span class="d">10</span>
334 </div>
335 <div class="empty-state">
336 <div class="ic">📅</div>
337 <div class="t">暂无报名直播课程</div>
338 <button class="btn">更多免费公开课</button>
339 </div>
340 </div>
341 <div class="filter-bar">
342 <div class="chip on">课程类型</div>
343 <div class="chip">最近学习</div>
344 <div class="chip">我的收藏</div>
345 </div>
346 <div class="course-card" data-go="course_detail">
347 <div class="tag-row"><span class="type">体系课</span><span class="live">正在更新</span></div>
348 <div class="t">一页纸搞定项目管理 · 实战班</div>
349 <div class="sub">共 3 章 9 节 · 已学 2 节</div>
350 <button class="btn">进入学习</button>
351 </div>
352 <div class="course-card">
353 <div class="tag-row"><span class="type">公开课</span><span class="live">直播</span></div>
354 <div class="t">2026 数据增长的新机遇</div>
355 <div class="sub">直播时间：7 月 18 日 20:00</div>
356 <button class="btn">预约直播</button>
357 </div>
358 </section>
359
360 <!-- 课程详情 -->
361 <section class="view" id="view-course_detail">
362 <div class="course-hero">
363 <div class="back" data-go="courses">‹ 返回课程中心</div>
364 <div class="tt2">一页纸搞定项目管理 · 实战班</div>
365 <div class="info"><span>共 3 章 9 节</span><span>已有 1,280 人学习</span></div>
366 </div>
367 <div class="info-card">
368 <div class="hd">课程信息</div>
369 <div class="row"><span class="l">讲师</span><span class="v">王明哲 · PMP 认证</span></div>
370 <div class="row"><span class="l">难度</span><span class="v">入门进阶</span></div>
371 <div class="row"><span class="l">有效期</span><span class="v">购买后 365 天</span></div>
372 </div>
373 <div class="chapter-card">
374 <div class="hd">课程章节</div>
375 <div class="item"><div class="num">1</div><div class="txt"><div class="t">项目管理全景图</div><div class="sub">15 分钟 · 免费试看</div></div><span class="lock">▶</span></div>
376 <div class="item"><div class="num">2</div><div class="txt"><div class="t">一页纸立项法</div><div class="sub">22 分钟 · 已解锁</div></div><span class="lock">▶</span></div>
377 <div class="item"><div class="num">3</div><div class="txt"><div class="t">风险与进度双控</div><div class="sub">28 分钟 · 已解锁</div></div><span class="lock">🔒</span></div>
378 </div>
379 <button class="start-btn">继续学习</button>
380 </section>
381
382 <!-- 个人中心 -->
383 <section class="view" id="view-me">
384 <div class="me-card">
385 <div class="row">
386 <div class="avatar">👨💼</div>
387 <div class="info">
388 <div class="name">陈远航</div>
389 <div class="id">工号：ZL-2026-0088 · 高级客户顾问</div>
390 </div>
391 <button class="qr">二维码</button>
392 </div>
393 </div>
394 <div class="me-stats">
395 <div class="item"><div class="v">156</div><div class="l">线索</div></div>
396 <div class="item"><div class="v">42</div><div class="l">客户</div></div>
397 <div class="item"><div class="v">18</div><div class="l">成交</div></div>
398 <div class="item"><div class="v">36</div><div class="l">课时</div></div>
399 </div>
400 <div class="menu-card">
401 <div class="row"><span class="ic">📊</span><span class="txt">我的业绩</span><span class="arr">›</span></div>
402 <div class="row"><span class="ic">🎯</span><span class="txt">我的线索</span><span class="arr">›</span></div>
403 <div class="row"><span class="ic">📚</span><span class="txt">我的课程</span><span class="arr">›</span></div>
404 <div class="row"><span class="ic">🏆</span><span class="txt">积分商城</span><span class="arr">›</span></div>
405 </div>
406 <div class="menu-card">
407 <div class="row"><span class="ic">⚙️</span><span class="txt">系统设置</span><span class="arr">›</span></div>
408 <div class="row"><span class="ic">❓</span><span class="txt">帮助中心</span><span class="arr">›</span></div>
409 </div>
410 </section>
411 </main>
412
413 <nav class="tabbar">
414 <button data-go="home" class="on"><span class="ti">🏠</span>首页</button>
415 <button data-go="leads"><span class="ti">🎯</span>线索</button>
416 <button data-go="courses"><span class="ti">📚</span>课程</button>
417 <button data-go="me"><span class="ti">👤</span>我的</button>
418 </nav>
419</div>
420<div class="toast" id="toast"></div>
421
422<script>
423function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
424function showView(v){
425 $(".view").removeClass("active");
426 $("#view-"+v).addClass("active");
427 var titles={home:"智链销售云",leads:"线索池",customer:"客户详情",courses:"课程中心",course_detail:"课程详情",me:"个人中心"};
428 $("#topTitle").text(titles[v]||"智链销售云");
429 $(".tabbar button").removeClass("on");
430 $(".tabbar button[data-go='"+v+"']").addClass("on");
431 $(".main").scrollTop(0);
432}
433$(function(){
434 $(document).on("click",".tabbar button[data-go]",function(){ showView($(this).data("go")); });
435 $(document).on("click","[data-go]",function(e){ e.stopPropagation(); showView($(this).data("go")); });
436 $(document).on("click",".tabs .tab, .filter-bar .chip, .lead-card .actions button, .lead-card .btn, .empty-state .btn, .course-card .btn, .start-btn, .menu-card .row, .icr span",function(){ toast("功能演示中"); });
437});
438window.showSalesView = function(v){ showView(v); };
439</script>
440</body>
441</html>