index.html · 约 18650 字符
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:#f5f7fa; --card:#fff; --text:#1f2937; --soft:#6b7280; --line:#e5e7eb;
12 --primary:#2563eb; --primary-light:#dbeafe; --green:#10b981; --orange:#f59e0b; --red:#ef4444;
13 --radius:18px; --shadow:0 4px 16px rgba(31,41,55,.08);
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:14px 18px 10px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
20 .topbar .tt{ font-size:18px; font-weight:800; }
21 .topbar .close{ font-size:24px; color:var(--soft); cursor:pointer; }
22 .topbar .dots{ font-size:20px; color:var(--soft); cursor:pointer; }
23 .main{ flex:1; overflow-y:auto; padding:0 16px 90px; }
24 .main::-webkit-scrollbar{ display:none; }
25 .view{ display:none; }
26 .view.active{ display:block; animation:fade .22s ease; }
27 @keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
28
29 /* 个人中心 */
30 .profile-card{ background:linear-gradient(135deg,var(--primary),#1d4ed8); border-radius:var(--radius); padding:20px; color:#fff; margin-bottom:16px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
31 .profile-card::before{ content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; background:rgba(255,255,255,.12); border-radius:50%; }
32 .profile-card::after{ content:""; position:absolute; bottom:-60px; left:20px; width:100px; height:100px; background:rgba(255,255,255,.06); border-radius:50%; }
33 .profile-card .row{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
34 .avatar{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:30px; border:2px solid rgba(255,255,255,.4); }
35 .profile-card .info{ flex:1; }
36 .profile-card .name{ font-size:18px; font-weight:800; }
37 .profile-card .sub{ font-size:12px; opacity:.85; margin-top:4px; }
38 .profile-card .sign{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; }
39 .stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
40 .stats-bar .item{ background:var(--card); border-radius:var(--radius); padding:14px 6px; text-align:center; box-shadow:var(--shadow); }
41 .stats-bar .item .v{ font-size:20px; font-weight:900; color:var(--text); }
42 .stats-bar .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
43 .banner-card{ background:linear-gradient(90deg,#f59e0b,#f97316); border-radius:var(--radius); padding:16px; color:#fff; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; box-shadow:var(--shadow); }
44 .banner-card::before{ content:""; position:absolute; right:-20px; top:-20px; width:90px; height:90px; background:rgba(255,255,255,.15); border-radius:50%; }
45 .banner-card .txt{ position:relative; z-index:1; }
46 .banner-card .tt2{ font-size:16px; font-weight:900; }
47 .banner-card .sub{ font-size:12px; opacity:.9; margin-top:3px; }
48 .banner-card .btn{ background:#fff; color:#f97316; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:800; border:none; cursor:pointer; position:relative; z-index:1; }
49 .section{ margin-bottom:16px; }
50 .section-title{ font-size:16px; font-weight:900; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
51 .section-title .more{ font-size:12px; color:var(--soft); font-weight:600; }
52 .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
53 .grid4 .cell{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
54 .grid4 .cell .ic{ font-size:26px; margin-bottom:6px; }
55 .grid4 .cell .txt{ font-size:12px; font-weight:700; color:var(--text); }
56 .two-card{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
57 .two-card .c{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
58 .two-card .c .t{ font-size:13px; color:var(--soft); font-weight:700; }
59 .two-card .c .n{ font-size:28px; font-weight:900; margin-top:4px; }
60 .two-card .c .hint{ font-size:11px; color:var(--soft); margin-top:6px; }
61 .grid-list{ background:var(--card); border-radius:var(--radius); padding:8px 16px; box-shadow:var(--shadow); margin-bottom:16px; }
62 .grid-list .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px 0; border-bottom:1px solid var(--line); }
63 .grid-list .row:last-child{ border-bottom:none; }
64 .grid-list .row .cell{ text-align:center; cursor:pointer; }
65 .grid-list .row .cell .ic{ font-size:24px; margin-bottom:5px; }
66 .grid-list .row .cell .txt{ font-size:12px; color:var(--text); font-weight:700; }
67
68 /* 服务大厅 */
69 .search-box{ background:var(--card); border-radius:999px; padding:10px 16px; margin-bottom:16px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow); }
70 .search-box input{ flex:1; border:none; outline:none; font-size:14px; color:var(--text); background:transparent; }
71 .search-box .ic{ color:var(--soft); }
72 .cat-tabs{ display:flex; gap:10px; margin-bottom:16px; overflow-x:auto; padding-bottom:2px; }
73 .cat-tabs::-webkit-scrollbar{ display:none; }
74 .cat-tabs span{ white-space:nowrap; padding:8px 16px; border-radius:999px; background:var(--card); font-size:13px; font-weight:700; color:var(--soft); box-shadow:var(--shadow); cursor:pointer; }
75 .cat-tabs span.on{ background:var(--primary); color:#fff; }
76 .service-card{ background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); }
77 .service-card .hd{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
78 .service-card .hd .ic{ font-size:28px; }
79 .service-card .hd .info{ flex:1; }
80 .service-card .hd .name{ font-size:15px; font-weight:900; }
81 .service-card .hd .tag{ display:inline-block; font-size:11px; padding:3px 8px; border-radius:999px; background:var(--primary-light); color:var(--primary); font-weight:700; margin-top:4px; }
82 .service-card .meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--soft); }
83 .service-card .btn{ margin-top:10px; width:100%; border:none; background:var(--primary); color:#fff; border-radius:10px; padding:11px; font-size:14px; font-weight:800; cursor:pointer; }
84
85 /* 咨询 */
86 .chat-list{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
87 .chat-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
88 .chat-item:last-child{ border-bottom:none; }
89 .chat-item .avatar2{ width:44px; height:44px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:22px; }
90 .chat-item .info{ flex:1; }
91 .chat-item .name{ font-size:15px; font-weight:900; }
92 .chat-item .msg{ font-size:12px; color:var(--soft); margin-top:3px; }
93 .chat-item .time{ font-size:11px; color:var(--soft); }
94 .faq{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
95 .faq .item{ padding:12px 0; border-bottom:1px solid var(--line); }
96 .faq .item:last-child{ border-bottom:none; }
97 .faq .q{ font-size:14px; font-weight:800; }
98 .faq .a{ font-size:12px; color:var(--soft); margin-top:4px; line-height:1.5; }
99
100 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
101 height:66px; background:#fff; border-top:1px solid var(--line); display:flex; z-index:20; }
102 .tabbar button{ flex:1; border:none; background:none; font-size:11px; color:var(--soft); font-weight:700;
103 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
104 .tabbar button .ti{ font-size:22px; }
105 .tabbar button.on{ color:var(--primary); }
106 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
107 background:rgba(31,41,55,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
108 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
109 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
110</style>
111</head>
112<body>
113<div class="app">
114 <header class="topbar" id="topbar">
115 <span class="close" id="closeBtn">×</span>
116 <span class="tt" id="topTitle">个人中心</span>
117 <span class="dots">⋯</span>
118 </header>
119
120 <main class="main" id="main">
121 <!-- 个人中心 -->
122 <section class="view active" id="view-me">
123 <div class="profile-card">
124 <div class="row">
125 <div class="avatar">👤</div>
126 <div class="info">
127 <div class="name">立即登录</div>
128 <div class="sub">登录后享受更多企业服务</div>
129 </div>
130 <button class="sign">签到</button>
131 </div>
132 </div>
133 <div class="stats-bar">
134 <div class="item"><div class="v">0</div><div class="l">待办</div></div>
135 <div class="item"><div class="v">0</div><div class="l">进行中</div></div>
136 <div class="item"><div class="v">0</div><div class="l">积分</div></div>
137 <div class="item"><div class="v">0</div><div class="l">消息</div></div>
138 </div>
139 <div class="banner-card">
140 <div class="txt">
141 <div class="tt2">新用户专享礼包</div>
142 <div class="sub">注册即送 300 元企服优惠券</div>
143 </div>
144 <button class="btn">立即领取</button>
145 </div>
146 <div class="section">
147 <div class="section-title">我的业务 <span class="more">全部 ›</span></div>
148 <div class="grid4">
149 <div class="cell"><div class="ic">🕐</div><div class="txt">待付款</div></div>
150 <div class="cell"><div class="ic">🔄</div><div class="txt">办理中</div></div>
151 <div class="cell"><div class="ic">✅</div><div class="txt">待确认</div></div>
152 <div class="cell"><div class="ic">🎉</div><div class="txt">已完成</div></div>
153 </div>
154 </div>
155 <div class="two-card">
156 <div class="c"><div class="t">我的企业</div><div class="n">0</div><div class="hint">未添加企业</div></div>
157 <div class="c"><div class="t">我的证照</div><div class="n">0</div><div class="hint">未添加证照</div></div>
158 </div>
159 <div class="section">
160 <div class="section-title">推荐服务</div>
161 <div class="grid-list">
162 <div class="row">
163 <div class="cell"><div class="ic">🪪</div><div class="txt">证照管理</div></div>
164 <div class="cell"><div class="ic">™</div><div class="txt">商标查询</div></div>
165 <div class="cell"><div class="ic">🔬</div><div class="txt">专利查询</div></div>
166 <div class="cell"><div class="ic">❓</div><div class="txt">帮助中心</div></div>
167 </div>
168 </div>
169 </div>
170 <div class="section">
171 <div class="section-title">我的服务</div>
172 <div class="grid-list">
173 <div class="row">
174 <div class="cell"><div class="ic">™</div><div class="txt">商标查询</div></div>
175 <div class="cell"><div class="ic">📑</div><div class="txt">商标分类</div></div>
176 <div class="cell"><div class="ic">📰</div><div class="txt">商标公告</div></div>
177 <div class="cell"><div class="ic">🔬</div><div class="txt">专利查询</div></div>
178 </div>
179 <div class="row">
180 <div class="cell"><div class="ic">🧮</div><div class="txt">所得税计算</div></div>
181 <div class="cell"><div class="ic">📊</div><div class="txt">增值税计算</div></div>
182 <div class="cell"><div class="ic">🪪</div><div class="txt">证照管理</div></div>
183 <div class="cell"><div class="ic">💼</div><div class="txt">我的钱包</div></div>
184 </div>
185 </div>
186 </div>
187 <div class="section">
188 <div class="section-title">其他</div>
189 <div class="grid-list">
190 <div class="row">
191 <div class="cell"><div class="ic">⚙️</div><div class="txt">设置</div></div>
192 <div class="cell"><div class="ic">🎁</div><div class="txt">活动中心</div></div>
193 <div class="cell"><div class="ic">❓</div><div class="txt">帮助中心</div></div>
194 <div class="cell"><div class="ic">ℹ️</div><div class="txt">关于我们</div></div>
195 </div>
196 </div>
197 </div>
198 </section>
199
200 <!-- 服务大厅 -->
201 <section class="view" id="view-home">
202 <div class="search-box">
203 <span class="ic">🔍</span>
204 <input type="text" placeholder="搜索工商、财税、知识产权服务">
205 </div>
206 <div class="cat-tabs" id="catTabs">
207 <span class="on" data-cat="all">全部</span>
208 <span data-cat="company">工商服务</span>
209 <span data-cat="tax">财税服务</span>
210 <span data-cat="ip">知识产权</span>
211 <span data-cat="qual">资质认证</span>
212 </div>
213 <div id="serviceBox"></div>
214 </section>
215
216 <!-- 在线咨询 -->
217 <section class="view" id="view-consult">
218 <div class="chat-list">
219 <div class="chat-item">
220 <div class="avatar2">💬</div>
221 <div class="info"><div class="name">专属客服 小企</div><div class="msg">您好，有什么可以帮您？</div></div>
222 <div class="time">09:30</div>
223 </div>
224 <div class="chat-item">
225 <div class="avatar2">👩💼</div>
226 <div class="info"><div class="name">工商顾问</div><div class="msg">营业执照加急办理，1天出证</div></div>
227 <div class="time">昨天</div>
228 </div>
229 <div class="chat-item">
230 <div class="avatar2">🧾</div>
231 <div class="info"><div class="name">财税专家</div><div class="msg">您上个月的报税已完成</div></div>
232 <div class="time">周一</div>
233 </div>
234 </div>
235 <div class="faq">
236 <div class="section-title" style="margin-top:0">常见问题</div>
237 <div class="item"><div class="q">如何办理营业执照？</div><div class="a">在线提交资料，专员 1 对 1 审核，最快 1 个工作日办结。</div></div>
238 <div class="item"><div class="q">商标注册需要多久？</div><div class="a">从提交到初审约 3-4 个月，注册证下发约 12-14 个月。</div></div>
239 <div class="item"><div class="q">代理记账包含哪些服务？</div><div class="a">包含票据整理、账务处理、纳税申报、财务报表及年度汇算。</div></div>
240 </div>
241 </section>
242 </main>
243
244 <nav class="tabbar">
245 <button data-go="home"><span class="ti">🏠</span>服务大厅</button>
246 <button data-go="consult"><span class="ti">💬</span>在线咨询</button>
247 <button data-go="me" class="on"><span class="ti">👤</span>我的</button>
248 </nav>
249</div>
250<div class="toast" id="toast"></div>
251
252<script>
253var SERVICES = [
254 {cat:"company", ic:"🏢", name:"公司注册", tag:"快速出证", price:"¥500起", sold:3280, time:"3-5天"},
255 {cat:"company", ic:"📝", name:"营业执照变更", tag:"全程代办", price:"¥300起", sold:1560, time:"1-3天"},
256 {cat:"company", ic:"🚪", name:"公司注销", tag:"疑难处理", price:"¥1000起", sold:890, time:"30-60天"},
257 {cat:"tax", ic:"🧾", name:"代理记账", tag:"包年优惠", price:"¥200/月", sold:5620, time:"按月"},
258 {cat:"tax", ic:"📊", name:"税务筹划", tag:"合规节税", price:"¥2000起", sold:740, time:"定制"},
259 {cat:"ip", ic:"™", name:"商标注册", tag:"免查询费", price:"¥800起", sold:4210, time:"12-14月"},
260 {cat:"ip", ic:"📜", name:"专利申请", tag:"加急审查", price:"¥3000起", sold:980, time:"6-12月"},
261 {cat:"qual", ic:"🏅", name:"ISO认证", tag:"全国通用", price:"¥6000起", sold:450, time:"15-30天"}
262];
263function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
264function renderServices(cat){
265 var list = cat==="all" ? SERVICES : SERVICES.filter(function(s){ return s.cat===cat; });
266 $("#serviceBox").html(list.map(function(s){
267 return '<div class="service-card">'+
268 '<div class="hd"><span class="ic">'+s.ic+'</span><div class="info"><div class="name">'+s.name+'</div><span class="tag">'+s.tag+'</span></div></div>'+
269 '<div class="meta"><span>价格 '+s.price+'</span><span>已售 '+s.sold+'</span><span>周期 '+s.time+'</span></div>'+
270 '<button class="btn">立即咨询</button></div>';
271 }).join(""));
272}
273function showView(v){
274 $(".view").removeClass("active"); $("#view-"+v).addClass("active");
275 $("#topTitle").text(v==="me"?"个人中心":(v==="home"?"服务大厅":"在线咨询"));
276 $("#closeBtn").css("visibility", v==="me"?"visible":"hidden");
277 $(".tabbar button").removeClass("on");
278 $(".tabbar button[data-go='"+v+"']").addClass("on");
279}
280$(function(){
281 renderServices("all");
282 $(document).on("click",".tabbar button[data-go]",function(){ showView($(this).data("go")); });
283 $(document).on("click","#catTabs span",function(){ $("#catTabs span").removeClass("on"); $(this).addClass("on"); renderServices($(this).data("cat")); });
284 $(document).on("click",".service-card .btn, .grid4 .cell, .grid-list .cell, .banner-card .btn, .sign",function(){ toast("功能演示中"); });
285});
286window.showBizView = function(v){ showView(v); };
287window.setBizCat = function(c){ $("#catTabs span[data-cat='"+c+"']").trigger("click"); };
288</script>
289</body>
290</html>