/* ============================================================ 学海无涯 · 互动实验室组件库 用法：文章页 引入本文件 + interactive.js 所有组件用 .lab 容器包裹，data-lab 指定类型 ============================================================ */ /* ============ 通用容器 ============ */ .lab { margin: 1.6rem 0; padding: 1.1rem 1.2rem 1.2rem; background: var(--bg3, #fff); border: 1px solid var(--rule, #e2dccf); border-left: 3px solid var(--accent2, #a05a2c); border-radius: var(--radius, 6px); box-shadow: 0 1px 2px rgba(43, 42, 38, 0.04); } .lab-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--rule, #e2dccf); } .lab-tag { font-family: var(--font-mono, monospace); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bg3, #fff); background: var(--accent2, #a05a2c); padding: 0.18em 0.6em; border-radius: 999px; white-space: nowrap; } .lab-title { font-family: var(--font-serif, serif); font-size: 0.95rem; font-weight: 700; color: var(--ink, #2b2a26); } .lab-hint { font-size: 0.78rem; color: var(--muted, #8a8579); margin-top: 0.7rem; line-height: 1.7; } /* ============ 通用控件行 ============ */ .lab-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: nowrap; margin-bottom: 0.7rem; } .lab-row > label { font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--ink-soft, #4a4842); flex: 0 0 auto; min-width: 4.2em; white-space: nowrap; } .lab-row output, .lab-val { font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--accent, #556b3d); min-width: 3.6em; text-align: right; } /* 滑块统一样式 */ .lab input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 90px; height: 4px; border-radius: 999px; background: var(--rule, #e2dccf); outline: none; cursor: pointer; } .lab input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bg, #faf7f2); border: 2px solid var(--accent, #556b3d); cursor: grab; } .lab input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; } .lab input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--bg, #faf7f2); border: 2px solid var(--accent, #556b3d); cursor: grab; } /* 按钮 */ .lab button { font-family: var(--font, serif); font-size: 0.78rem; padding: 0.32em 0.85em; color: var(--ink, #2b2a26); background: var(--bg2, #f2ede4); border: 1px solid var(--rule, #e2dccf); border-radius: var(--radius, 6px); cursor: pointer; transition: all 0.15s; } .lab button:hover { background: var(--accent-soft, #eaece1); border-color: var(--accent, #556b3d); } .lab button:active { transform: translateY(1px); } .lab button.primary { color: #fff; background: var(--accent, #556b3d); border-color: var(--accent, #556b3d); } .lab button.primary:hover { background: var(--accent2, #a05a2c); border-color: var(--accent2, #a05a2c); } .lab select, .lab input[type="text"], .lab input[type="number"] { font-family: var(--font-mono, monospace); font-size: 0.76rem; padding: 0.3em 0.5em; color: var(--ink, #2b2a26); background: var(--bg3, #fff); border: 1px solid var(--rule, #e2dccf); border-radius: var(--radius, 6px); } /* ============ 组件 1 · 色盘 color-picker ============ */ .lab-color-stage { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; margin-bottom: 0.9rem; } .lab-swatch { width: 96px; height: 96px; border-radius: var(--radius, 6px); border: 1px solid var(--rule, #e2dccf); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); transition: background 0.12s; } .lab-color-codes { display: flex; flex-direction: column; gap: 0.4rem; } .lab-code { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono, monospace); font-size: 0.74rem; } .lab-code b { color: var(--muted, #8a8579); font-weight: 400; min-width: 3.2em; } .lab-code span { color: var(--ink, #2b2a26); background: var(--bg2, #f2ede4); padding: 0.1em 0.45em; border-radius: 3px; cursor: pointer; user-select: all; } .lab-code span:hover { background: var(--accent-soft, #eaece1); } /* 预设色块 */ .lab-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; } .lab-presets button { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--rule, #e2dccf); } .lab-presets button:hover { transform: scale(1.12); } /* ============ 组件 2 · 对比度检查 contrast ============ */ .lab-contrast-preview { padding: 1rem; border-radius: var(--radius, 6px); border: 1px solid var(--rule, #e2dccf); margin-bottom: 0.8rem; text-align: center; } .lab-contrast-preview .big { font-size: 1.3rem; font-weight: 700; } .lab-contrast-preview .small { font-size: 0.82rem; margin-top: 0.3rem; } .lab-ratio { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-family: var(--font-mono, monospace); font-size: 0.76rem; } .lab-ratio .num { font-size: 1.15rem; font-weight: 700; color: var(--ink, #2b2a26); } .lab-badge { padding: 0.16em 0.55em; border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.06em; } .lab-badge.pass { background: #d4e2c8; color: #3f5030; } .lab-badge.fail { background: #f0d8d0; color: #8a3a20; } /* ============ 组件 3 · 盒模型 box-model ============ */ .lab-box-stage { display: flex; justify-content: center; padding: 1rem 0.5rem; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); margin-bottom: 0.9rem; overflow: auto; } .lab-box-margin { background: rgba(160, 90, 44, 0.14); position: relative; transition: padding 0.12s; } .lab-box-border { background: rgba(85, 107, 61, 0.3); transition: padding 0.12s; } .lab-box-padding { background: rgba(74, 109, 140, 0.18); transition: padding 0.12s; } .lab-box-content { background: var(--bg3, #fff); border: 1px dashed var(--rule, #e2dccf); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono, monospace); font-size: 0.68rem; color: var(--muted, #8a8579); min-width: 60px; min-height: 40px; } .lab-box-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-family: var(--font-mono, monospace); font-size: 0.68rem; color: var(--ink-soft, #4a4842); margin-top: 0.5rem; } .lab-box-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.3em; vertical-align: -1px; } /* ============ 组件 4 · Flexbox 演练场 flexbox ============ */ .lab-flex-stage { display: flex; min-height: 130px; padding: 0.6rem; background: var(--bg2, #f2ede4); border: 1px dashed var(--rule, #e2dccf); border-radius: var(--radius, 6px); margin-bottom: 0.9rem; gap: 6px; transition: all 0.18s; } .lab-flex-stage > div { background: var(--accent, #556b3d); color: #fff; font-family: var(--font-mono, monospace); font-size: 0.72rem; padding: 0.7rem 0.9rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .lab-flex-stage > div:nth-child(2) { background: #4a6d8c; } .lab-flex-stage > div:nth-child(3) { background: #8a5a7a; } .lab-flex-stage > div:nth-child(4) { background: #a05a2c; } /* ============ 组件 5 · 像素放大镜 pixel-zoom ============ */ .lab-pixel-grid { display: grid; gap: 1px; background: var(--rule, #e2dccf); border: 1px solid var(--rule, #e2dccf); border-radius: 3px; margin-bottom: 0.9rem; overflow: hidden; } .lab-pixel-grid div { aspect-ratio: 1; min-width: 4px; } /* ============ 组件 6 · 事件流可视化 event-flow ============ */ .lab-event-stage { padding: 0.9rem; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); margin-bottom: 0.8rem; } .lab-event-layer { padding: 0.75rem; border: 2px solid var(--rule, #e2dccf); border-radius: var(--radius, 6px); background: var(--bg3, #fff); font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--ink-soft, #4a4842); transition: all 0.2s; } .lab-event-layer.hit { border-color: var(--accent2, #a05a2c); background: rgba(160, 90, 44, 0.1); box-shadow: 0 0 0 3px rgba(160, 90, 44, 0.14); } .lab-log { font-family: var(--font-mono, monospace); font-size: 0.7rem; line-height: 1.85; max-height: 130px; overflow-y: auto; padding: 0.6rem 0.75rem; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); color: var(--ink-soft, #4a4842); } .lab-log div { border-bottom: 1px dotted var(--rule, #e2dccf); } .lab-log div:last-child { border-bottom: none; } .lab-log .empty { color: var(--muted, #8a8579); border: none; } .lab-log b { color: var(--accent, #556b3d); } /* ============ 组件 7 · 帧率模拟 fps ============ */ .lab-fps-track { position: relative; height: 46px; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); overflow: hidden; margin-bottom: 0.8rem; } .lab-fps-ball { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--accent, #556b3d); } /* ============ 组件 8 · 单位换算 converter ============ */ .lab-convert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.7rem; margin-bottom: 0.6rem; } .lab-convert-cell { padding: 0.6rem 0.7rem; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); text-align: center; } .lab-convert-cell b { display: block; font-family: var(--font-mono, monospace); font-size: 0.64rem; font-weight: 400; color: var(--muted, #8a8579); letter-spacing: 0.08em; margin-bottom: 0.2rem; } .lab-convert-cell span { font-family: var(--font-mono, monospace); font-size: 0.92rem; font-weight: 700; color: var(--accent, #556b3d); } /* ============ 组件 9 · 小测验 quiz ============ */ .lab-quiz-q { font-size: 0.92rem; color: var(--ink, #2b2a26); margin-bottom: 0.8rem; } .lab-quiz-opts { display: flex; flex-direction: column; gap: 0.45rem; } .lab-quiz-opts button { text-align: left; padding: 0.5em 0.8em; font-size: 0.84rem; font-family: var(--font, serif); } .lab-quiz-opts button.correct { background: #d4e2c8; border-color: #556b3d; color: #3f5030; } .lab-quiz-opts button.wrong { background: #f0d8d0; border-color: #a05a2c; color: #8a3a20; } .lab-quiz-explain { margin-top: 0.8rem; padding: 0.7rem 0.85rem; background: var(--bg2, #f2ede4); border-left: 3px solid var(--accent, #556b3d); border-radius: var(--radius, 6px); font-size: 0.84rem; color: var(--ink-soft, #4a4842); line-height: 1.75; } /* ============ 组件 10 · 前后对比滑杆 compare ============ */ .lab-compare { position: relative; border-radius: var(--radius, 6px); overflow: hidden; border: 1px solid var(--rule, #e2dccf); margin-bottom: 0.7rem; } .lab-compare-pane { display: flex; align-items: center; justify-content: center; min-height: 120px; font-family: var(--font-mono, monospace); font-size: 0.78rem; padding: 1rem; text-align: center; } /* ============ 组件 11 · 分词器 ============ */ .lab-token-stage { display: flex; flex-wrap: wrap; gap: 3px; padding: 0.7rem; min-height: 56px; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); margin-bottom: 0.8rem; align-content: flex-start; } .lab-token { font-family: var(--font-mono, monospace); font-size: 0.76rem; padding: 0.16em 0.42em; border-radius: 3px; border: 1px solid rgba(226, 220, 207, 0.9); color: var(--ink, #2b2a26); white-space: pre; } /* ============ 组件 12 / 17 · 条形图 ============ */ .lab-bars { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; } .lab-bar-row { display: flex; align-items: center; gap: 0.55rem; } .lab-bar-label { font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--ink-soft, #4a4842); min-width: 2.8em; flex: 0 0 auto; white-space: nowrap; } .lab-bar-track { flex: 1; height: 14px; background: var(--bg2, #f2ede4); border-radius: 3px; overflow: hidden; min-width: 40px; } .lab-bar-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent, #556b3d), #7a9455); border-radius: 3px; transition: width 0.14s; } .lab-bar-val { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--accent, #556b3d); min-width: 3.4em; text-align: right; flex: 0 0 auto; } /* ============ 组件 13 · 向量图 ============ */ .lab-vec-stage { display: flex; justify-content: center; padding: 0.5rem; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); margin-bottom: 0.8rem; } .lab-vec-svg { width: 100%; max-width: 300px; height: auto; } /* ============ 组件 14 · 公式展示 ============ */ .lab-formula { padding: 0.8rem 0.9rem; background: var(--bg2, #f2ede4); border-left: 3px solid var(--accent, #556b3d); border-radius: var(--radius, 6px); margin-top: 0.3rem; } .lab-formula-line { font-family: var(--font-mono, monospace); font-size: 0.78rem; line-height: 2; color: var(--ink-soft, #4a4842); } .lab-formula-line b { color: var(--ink, #2b2a26); } .lab-formula-line b.hi { color: var(--accent2, #a05a2c); font-size: 0.92rem; } /* ============ 组件 15 · 二进制位 ============ */ .lab-bits { font-family: var(--font-mono, monospace); font-size: 0.62rem; line-height: 1.9; margin-top: 0.6rem; word-break: break-all; } .lab-bits i { display: inline-block; width: 1.15em; text-align: center; font-style: normal; border-radius: 2px; } .lab-bits i.net { background: rgba(85, 107, 61, 0.28); color: #3f5030; } .lab-bits i.host { background: rgba(160, 90, 44, 0.2); color: #8a3a20; } .lab-bits u { text-decoration: none; color: var(--muted, #8a8579); margin: 0 1px; } .lab-bits-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.66rem; color: var(--ink-soft, #4a4842); } /* ============ 组件 16 · 三次握手 ============ */ .lab-hs-stage { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 0.5rem; align-items: center; padding: 0.9rem 0.6rem; background: var(--bg2, #f2ede4); border-radius: var(--radius, 6px); margin-bottom: 0.8rem; } .lab-hs-side { text-align: center; font-family: var(--font-mono, monospace); font-size: 0.7rem; } .lab-hs-side b { display: block; font-family: var(--font, serif); font-size: 0.82rem; color: var(--ink, #2b2a26); margin-bottom: 0.35rem; } .lab-hs-state { padding: 0.2em 0.4em; background: var(--bg3, #fff); border: 1px solid var(--rule, #e2dccf); border-radius: 3px; color: var(--accent, #556b3d); font-size: 0.62rem; transition: all 0.2s; } .lab-hs-mid { text-align: center; } .lab-hs-idle { font-family: var(--font-mono, monospace); font-size: 0.68rem; color: var(--muted, #8a8579); } .lab-hs-packet { display: inline-block; font-family: var(--font-mono, monospace); font-size: 0.64rem; padding: 0.3em 0.6em; border-radius: 999px; color: #fff; animation: labSlide 0.4s ease; } .lab-hs-packet.fwd { background: var(--accent, #556b3d); } .lab-hs-packet.bwd { background: var(--accent2, #a05a2c); } @keyframes labSlide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } /* ============ 组件 18 · 状态码 ============ */ .lab-codes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; } .lab-code-btn { font-family: var(--font-mono, monospace) !important; font-size: 0.76rem !important; padding: 0.3em 0.6em !important; border-radius: 4px !important; } .lab-code-btn.ok { background: #d4e2c8; border-color: #b8cda6; } .lab-code-btn.redir { background: #dde6ee; border-color: #c2d2e0; } .lab-code-btn.cli { background: #f3e4d8; border-color: #e2cbb8; } .lab-code-btn.srv { background: #f0d8d0; border-color: #dfbcb0; } .lab-code-btn.sel { box-shadow: 0 0 0 2px var(--accent, #556b3d); transform: translateY(-1px); } /* ============ 响应式 ============ */ @media (max-width: 620px) { .lab { padding: 0.9rem 0.9rem 1rem; } .lab-color-stage { grid-template-columns: 1fr; } .lab-swatch { width: 100%; height: 64px; } .lab-row { gap: 0.5rem; } .lab-row > label { min-width: 3.6em; font-size: 0.68rem; } .lab-row output, .lab-val { min-width: 3em; font-size: 0.68rem; } .lab input[type="range"] { min-width: 0; } .lab-hs-stage { grid-template-columns: 1fr; gap: 0.7rem; } .lab-bar-label { min-width: 2.4em; font-size: 0.68rem; } .lab-bar-val { min-width: 3em; font-size: 0.64rem; } .lab-bits { font-size: 0.54rem; } .lab-formula-line { font-size: 0.7rem; } }