better-staridc-MNBT
1/* ============================================================
2 * MNBT 安装向导（V1.84 全新前端 · 原生 CSS）
3 * 浅色简约圆角风格
4 * ============================================================ */
5
6:root {
7 --primary: #2c6cff;
8 --primary-dark: #2459d8;
9 --bg: #eef4ff;
10 --card: #ffffff;
11 --text: #1a2233;
12 --text-2: #5c6b85;
13 --text-3: #93a3c2;
14 --line: #e8eefb;
15 --blue-soft: #eaf2ff;
16 --blue-border: #d3e3ff;
17 --red: #e64a2e;
18 --green: #34b27b;
19 --radius: 16px;
20}
21
22* { box-sizing: border-box; margin: 0; padding: 0; }
23
24html, body { height: 100%; }
25
26body {
27 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
28 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
29 background: linear-gradient(165deg, #eaf2ff 0%, #f6faff 55%, #edf5ff 100%);
30 min-height: 100vh;
31 display: flex;
32 padding: 28px 16px;
33 color: var(--text);
34 line-height: 1.55;
35 font-size: 14px;
36}
37
38a { color: inherit; text-decoration: none; }
39img, svg { vertical-align: middle; }
40button, input, select, textarea { font: inherit; color: inherit; }
41iframe { width: 100%; height: 100%; border: 0; }
42
43/* 背景柔和装饰（低透明度色块，非光效） */
44.deco { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
45.deco-1 { width: 360px; height: 360px; background: #d4e3ff; top: -120px; left: -100px; opacity: .55; }
46.deco-2 { width: 300px; height: 300px; background: #dce9ff; bottom: -110px; right: -80px; opacity: .5; }
47
48/* ---------- 主卡片 ---------- */
49.install-card {
50 position: relative;
51 z-index: 1;
52 width: 100%;
53 max-width: 820px;
54 margin: auto;
55 background: var(--card);
56 border-radius: 22px;
57 box-shadow: 0 24px 64px rgba(44, 108, 255, .12), 0 2px 8px rgba(44, 108, 255, .06);
58 overflow: hidden;
59}
60
61/* ---------- 顶部品牌栏 ---------- */
62.install-header {
63 display: flex;
64 align-items: center;
65 justify-content: space-between;
66 padding: 22px 30px 18px;
67 border-bottom: 1px solid var(--line);
68}
69.brand { display: flex; align-items: center; gap: 12px; }
70.brand-logo {
71 width: 46px; height: 46px;
72 border-radius: 14px;
73 background: linear-gradient(135deg, #2c6cff, #6b96ff);
74 display: flex; align-items: center; justify-content: center;
75 box-shadow: 0 6px 16px rgba(44, 108, 255, .26);
76 flex-shrink: 0;
77}
78.brand-logo img { width: 28px; height: 28px; border-radius: 6px; }
79.brand h1 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
80.brand p { font-size: 12px; color: var(--text-3); margin-top: 1px; }
81.ver-badge {
82 font-size: 12px; font-weight: 600; color: var(--primary);
83 background: var(--blue-soft); border: 1px solid var(--blue-border);
84 padding: 4px 12px; border-radius: 999px;
85}
86
87/* ---------- 横向步骤条 ---------- */
88.steps { display: flex; padding: 22px 30px 4px; }
89.step {
90 flex: 1;
91 display: flex;
92 flex-direction: column;
93 align-items: center;
94 position: relative;
95}
96.step::before {
97 content: '';
98 position: absolute;
99 top: 15px;
100 left: -50%;
101 width: 100%;
102 height: 2px;
103 background: var(--primary);
104 z-index: 0;
105}
106.step:first-child::before { display: none; }
107.step .dot {
108 width: 30px; height: 30px;
109 border-radius: 50%;
110 background: var(--primary);
111 color: #fff;
112 display: flex; align-items: center; justify-content: center;
113 font-size: 13px; font-weight: 600;
114 position: relative; z-index: 1;
115 box-shadow: 0 2px 6px rgba(44, 108, 255, .25);
116 transition: all .3s ease;
117}
118.step .label { margin-top: 9px; text-align: center; }
119.step .label b { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); }
120.step .label i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 1px; }
121
122/* 当前步骤 */
123.step.curr-page-active .dot {
124 background: #fff;
125 color: var(--primary);
126 border: 2px solid var(--primary);
127 box-shadow: 0 0 0 4px rgba(44, 108, 255, .12);
128}
129.step.curr-page-active .label b { color: var(--text); }
130
131/* 当前步骤之后的步骤 */
132.step.curr-page-active ~ .step::before { background: #e3ecf9; }
133.step.curr-page-active ~ .step .dot {
134 background: #edf2fb;
135 color: #a3b4d0;
136 box-shadow: none;
137}
138.step.curr-page-active ~ .step .label b { color: var(--text-3); }
139.step.curr-page-active ~ .step .label i { color: #b8c5dd; }
140
141/* ---------- 主体 ---------- */
142.install-body { padding: 10px 30px 8px; }
143
144/* 进度条 */
145.progress-row {
146 display: flex; justify-content: space-between; align-items: center;
147 font-size: 12px; color: var(--text-3);
148 margin: 6px 0 8px;
149}
150.progress-row .pct { color: var(--primary); font-weight: 600; }
151.progress-track {
152 height: 6px; border-radius: 999px;
153 background: #edf2fa; overflow: hidden;
154}
155.progress-fill {
156 height: 100%; border-radius: 999px;
157 background: linear-gradient(90deg, #2c6cff, #6b96ff);
158 width: 0;
159 transition: width .6s cubic-bezier(.4, 0, .2, 1);
160}
161
162/* 内容面板（grid 单格重叠：只有当前面板可见，行高自适应，不堆积不截断） */
163#content-page-main {
164 display: grid;
165 grid-template-columns: 1fr;
166 min-height: 320px;
167 margin-top: 14px;
168}
169#content-page-main > div {
170 grid-area: 1 / 1;
171 display: none;
172 animation-duration: .55s;
173 animation-fill-mode: both;
174}
175#content-page-main > div.page-active {
176 display: block;
177 animation-name: panel-in;
178}
179
180@keyframes panel-in {
181 from { opacity: 0; transform: translateX(18px); }
182 to { opacity: 1; transform: translateX(0); }
183}
184/* JS next() 设置的切出/切入动画 */
185@keyframes exit {
186 from { opacity: 1; transform: translateX(0); }
187 to { opacity: 0; transform: translateX(-18px); }
188}
189@keyframes entry {
190 from { opacity: 0; transform: translateX(18px); }
191 to { opacity: 1; transform: translateX(0); }
192}
193
194.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
195.panel-icon {
196 width: 42px; height: 42px; border-radius: 13px;
197 background: var(--blue-soft); border: 1px solid var(--blue-border);
198 display: flex; align-items: center; justify-content: center;
199 flex-shrink: 0;
200}
201.panel-icon svg { width: 20px; height: 20px; color: var(--primary); }
202.panel-head h2 { font-size: 17px; font-weight: 700; }
203.panel-head p { font-size: 12px; color: var(--text-3); margin-top: 2px; }
204
205.welcome-lead { font-size: 14px; line-height: 1.8; color: var(--text-2); }
206.welcome-lead b { color: var(--text); }
207.welcome-links { margin-top: 10px; font-size: 14px; }
208.welcome-links a { color: var(--primary); font-weight: 600; }
209.welcome-links a:hover { text-decoration: underline; }
210
211/* 提示条 */
212.tip-box {
213 border-radius: 12px;
214 padding: 13px 16px;
215 font-size: 13px;
216 margin: 6px 0 16px;
217 display: flex; align-items: flex-start; gap: 8px;
218}
219.tip-box .mdi { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
220.tip-box.info { background: var(--blue-soft); color: var(--primary); border: 1px solid var(--blue-border); }
221.tip-box.warn { background: #fff8e6; color: #a8791a; border: 1px solid #f3e2b0; }
222
223/* 协议 */
224.license-box {
225 border: 1px solid var(--line);
226 border-radius: 14px;
227 background: #f9fbfe;
228 padding: 14px 16px;
229 height: 220px;
230 overflow-y: auto;
231 font-size: 12px;
232 color: var(--text-2);
233 line-height: 1.7;
234 margin-bottom: 16px;
235}
236.agree-card {
237 display: flex; align-items: center; gap: 12px;
238 border: 1px solid var(--line);
239 border-radius: 14px;
240 padding: 13px 16px;
241 cursor: pointer;
242 user-select: none;
243 transition: all .2s ease;
244 margin-bottom: 4px;
245}
246.agree-card:hover { border-color: var(--blue-border); }
247.agree-card .check {
248 width: 20px; height: 20px;
249 border-radius: 6px;
250 border: 2px solid #cfd8ea;
251 display: flex; align-items: center; justify-content: center;
252 flex-shrink: 0;
253 transition: all .2s ease;
254}
255.agree-card .check svg { width: 11px; height: 9px; display: none; }
256.agree-card b { font-size: 14px; font-weight: 600; display: block; }
257.agree-card small { font-size: 12px; color: var(--text-3); }
258.agree-card.terms-yes { border-color: var(--primary); background: var(--blue-soft); }
259.agree-card.terms-yes .check { background: var(--primary); border-color: var(--primary); }
260.agree-card.terms-yes .check svg { display: block; }
261
262/* 系统监测 */
263.sys-list { display: flex; flex-direction: column; gap: 10px; }
264.sys-item {
265 display: flex; align-items: center; gap: 12px;
266 border: 1px solid var(--line);
267 border-radius: 14px;
268 padding: 13px 16px;
269 background: #fbfcfe;
270 position: relative;
271}
272.sys-item .s-ico {
273 width: 34px; height: 34px;
274 border-radius: 10px;
275 background: var(--blue-soft);
276 display: flex; align-items: center; justify-content: center;
277 flex-shrink: 0;
278}
279.sys-item .s-ico svg { width: 17px; height: 17px; color: var(--primary); }
280.sys-item b { font-size: 13px; display: block; }
281.sys-item span { font-size: 12px; color: var(--text-3); }
282.sys-item::after {
283 content: '监测中...';
284 position: absolute;
285 top: 50%; right: 16px;
286 transform: translateY(-50%);
287 font-size: 12px; font-weight: 600;
288 color: var(--text-3);
289}
290.sys-item.yes { border-color: #bfe0d0; }
291.sys-item.yes::after { content: '支持'; color: var(--green); }
292.sys-item.no { border-color: #f3c4b8; }
293.sys-item.no::after { content: '不支持'; color: var(--red); }
294.sys-item.mn-no { border-color: #eedfb2; }
295.sys-item.mn-no::after { content: '非必须'; color: #c98a12; }
296
297/* 表单 */
298.form-item { margin-bottom: 14px; }
299.form-item label {
300 display: block;
301 font-size: 13px; font-weight: 600;
302 margin-bottom: 6px;
303}
304.form-item input[type="text"],
305.form-item input[type="password"],
306.form-item textarea {
307 width: 100%;
308 border: 1px solid var(--line);
309 border-radius: 12px;
310 background: #fff;
311 padding: 10px 14px;
312 font-size: 14px;
313 outline: none;
314 transition: border-color .2s, box-shadow .2s;
315}
316.form-item input:focus,
317.form-item textarea:focus {
318 border-color: var(--primary);
319 box-shadow: 0 0 0 3px rgba(44, 108, 255, .12);
320}
321.form-item textarea { resize: vertical; min-height: 56px; }
322.form-item input::placeholder, .form-item textarea::placeholder { color: #aeb9cf; }
323
324/* 安装模式选择 */
325.choice-list { display: flex; flex-direction: column; gap: 10px; }
326.choice-item {
327 display: flex; align-items: center; gap: 12px;
328 border: 1px solid var(--line);
329 border-radius: 14px;
330 padding: 13px 16px;
331 cursor: pointer;
332 user-select: none;
333 transition: all .2s ease;
334}
335.choice-item:hover { border-color: #9ec0ff; box-shadow: 0 4px 14px rgba(44, 108, 255, .06); }
336.choice-item .check {
337 width: 20px; height: 20px; border-radius: 6px;
338 border: 2px solid #cfd8ea;
339 display: flex; align-items: center; justify-content: center;
340 flex-shrink: 0;
341 transition: all .2s ease;
342}
343.choice-item .check svg { width: 11px; height: 9px; display: none; }
344.choice-item b { font-size: 14px; font-weight: 600; display: block; }
345.choice-item small { font-size: 12px; color: var(--text-3); }
346.choice-item.terms-yes { border-color: var(--primary); background: var(--blue-soft); }
347.choice-item.terms-yes .check { background: var(--primary); border-color: var(--primary); }
348.choice-item.terms-yes .check svg { display: block; }
349
350/* 完成 */
351.done-box { text-align: center; padding: 30px 0 10px; }
352.done-ico {
353 width: 78px; height: 78px;
354 margin: 0 auto 16px;
355 border-radius: 50%;
356 background: rgba(52, 178, 123, .12);
357 border: 3px solid var(--green);
358 display: flex; align-items: center; justify-content: center;
359}
360.done-ico svg { width: 42px; height: 42px; color: var(--green); }
361.done-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
362.done-box p { font-size: 13px; color: var(--text-2); }
363.admin-info {
364 margin: 22px 0 20px;
365 text-align: left;
366 background: #f6f9ff;
367 border: 1px solid var(--line);
368 border-radius: 14px;
369 padding: 16px 18px;
370 font-size: 13px;
371}
372.admin-info .ai-title { font-weight: 700; margin-bottom: 10px; }
373.admin-info .ai-row { color: var(--text-2); margin: 4px 0; }
374.admin-info code {
375 background: #fff;
376 border: 1px solid var(--line);
377 border-radius: 6px;
378 padding: 1px 8px;
379 font-size: 13px;
380 color: var(--text);
381}
382.entry-list { display: flex; flex-direction: column; gap: 10px; }
383.entry {
384 display: flex; align-items: center; gap: 12px;
385 border: 1px solid var(--line);
386 border-radius: 14px;
387 padding: 13px 16px;
388 transition: all .2s ease;
389}
390.entry:hover { border-color: #9ec0ff; box-shadow: 0 4px 14px rgba(44, 108, 255, .06); }
391.entry.primary { background: var(--primary); border-color: var(--primary); }
392.entry.primary:hover { opacity: .92; }
393.entry .e-ico {
394 width: 36px; height: 36px; border-radius: 10px;
395 background: var(--blue-soft);
396 display: flex; align-items: center; justify-content: center;
397 flex-shrink: 0;
398}
399.entry.primary .e-ico { background: rgba(255, 255, 255, .22); }
400.entry .e-ico svg { width: 17px; height: 17px; color: var(--primary); }
401.entry.primary .e-ico svg { color: #fff; }
402.entry b { font-size: 14px; font-weight: 600; display: block; }
403.entry.primary b { color: #fff; }
404.entry small { font-size: 12px; color: var(--text-3); }
405.entry.primary small { color: rgba(255, 255, 255, .75); }
406.entry .e-arrow { margin-left: auto; color: var(--text-3); flex-shrink: 0; }
407.entry .e-arrow svg { width: 14px; height: 14px; }
408.entry.primary .e-arrow svg { color: rgba(255, 255, 255, .55); }
409
410/* ---------- 底部操作区 ---------- */
411.install-foot {
412 display: flex;
413 align-items: center;
414 justify-content: space-between;
415 gap: 16px;
416 padding: 16px 30px 24px;
417 border-top: 1px solid var(--line);
418 margin-top: 18px;
419}
420.tip-msg {
421 display: flex; align-items: center; gap: 8px;
422 font-size: 12px; color: var(--red);
423 min-height: 20px;
424}
425.tip-msg svg { width: 14px; height: 14px; flex-shrink: 0; }
426.btn-next {
427 border: none;
428 border-radius: 12px;
429 background: linear-gradient(135deg, #2c6cff, #4a82ff);
430 color: #fff;
431 font-size: 14px; font-weight: 600;
432 padding: 11px 28px;
433 cursor: pointer;
434 box-shadow: 0 6px 16px rgba(44, 108, 255, .28);
435 transition: all .2s ease;
436 white-space: nowrap;
437}
438.btn-next:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(44, 108, 255, .34); }
439.btn-next:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
440
441/* 隐藏辅助 */
442.d-none { display: none !important; }
443
444/* ---------- 响应式 ---------- */
445@media (max-width: 640px) {
446 body { padding: 12px; }
447 .install-card { border-radius: 16px; }
448 .install-header, .steps, .install-body, .install-foot { padding-left: 18px; padding-right: 18px; }
449 .step .label i { display: none; }
450 .brand p { display: none; }
451 #content-page-main { min-height: 380px; }
452 .install-foot { flex-direction: column; align-items: stretch; }
453 .btn-next { width: 100%; }
454}