/* ============================================================ 智学通 · 设计系统与通用组件 主色 #2E6BFF ｜ 辅色 #FF8A3D ｜ 成功 #22C55E ｜ 错误 #EF4444 ｜ 警示 #FACC15 ============================================================ */ :root { --primary: #2E6BFF; --primary-deep: #1E4FE0; --primary-soft: #E8F0FF; --orange: #FF8A3D; --orange-deep: #F26C20; --orange-soft: #FFF0E6; --green: #22C55E; --green-soft: #E7F8EE; --red: #EF4444; --red-soft: #FDECEC; --yellow: #FACC15; --bg: #FFFFFF; --card: #FFFFFF; --ink: #1A2233; --ink-2: #6B7280; --ink-3: #9CA3AF; --line: #EEF1F6; --radius: 20px; --radius-sm: 12px; --shadow: 0 8px 24px rgba(46, 107, 255, .08); --shadow-card: 0 4px 16px rgba(26, 34, 51, .06); --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } html, body { height: 100%; } body { font-family: var(--font); color: var(--ink); background: #E9EDF5; display: flex; justify-content: center; } /* ===== 手机画布（390×844，宽屏时带机身效果）===== */ .phone { width: 390px; height: 844px; max-height: 100vh; background: var(--bg); position: relative; overflow: hidden; display: flex; flex-direction: column; } @media (min-width: 460px) and (min-height: 900px) { body { align-items: center; padding: 20px 0; } .phone { border-radius: 54px; border: 11px solid #0b0b0f; box-shadow: 0 30px 60px rgba(20, 30, 60, .22), 0 0 0 2px #2a2a32 inset; } } /* ===== 顶部安全区（原状态栏：时间 / WiFi / 电量已移除，仅留白）===== */ .statusbar { height: 20px; flex: none; } /* ===== 页面导航栏 ===== */ .nav { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .nav .nav-back { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink); cursor: pointer; border: none; background: transparent; } .nav .nav-back:active { background: var(--line); } .nav .nav-title { font-size: 17px; font-weight: 700; } .nav .nav-right { width: 34px; display: flex; justify-content: flex-end; } .nav.light, .nav.light .nav-back { color: #fff; } /* ===== 内容区 ===== */ .content { flex: 1; overflow-y: auto; position: relative; } .content::-webkit-scrollbar { display: none; } /* ===== 底部 Tab 栏 ===== */ .tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: flex-start; padding-top: 10px; z-index: 20; } .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); flex: 1; text-decoration: none; cursor: pointer; } .tab.active { color: var(--primary); } .tab.active .tab-ic { transform: translateY(-3px); } .tab-ic { width: 26px; height: 26px; display: grid; place-items: center; transition: transform .2s; } /* ===== 按钮 ===== */ .btn { border: none; cursor: pointer; font-family: inherit; font-weight: 700; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(46, 107, 255, .32); } .btn-orange { background: var(--orange); color: #fff; box-shadow: 0 6px 14px rgba(255, 138, 61, .3); } .btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); } .btn-block { width: 100%; height: 52px; font-size: 16px; } .btn:disabled { opacity: .55; pointer-events: none; } /* ===== 卡片 ===== */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* ===== 提示 toast ===== */ .toast { position: fixed; left: 50%; top: 16%; transform: translateX(-50%); background: rgba(26, 34, 51, .9); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; z-index: 999; animation: fadeUp .22s; pointer-events: none; max-width: 80%; } /* ===== 空状态 / 加载 ===== */ .empty { padding: 48px 20px; text-align: center; color: var(--ink-3); } .empty-ic { font-size: 40px; margin-bottom: 10px; } .empty p { font-size: 13px; } .spinner { width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== 通用区块 ===== */ .section { padding: 0 20px; } .section-title { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800; margin: 20px 0 10px; } .section-title .more { font-size: 12px; color: var(--ink-3); font-weight: 600; cursor: pointer; } /* ===== 列表行 ===== */ .row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; } .row + .row { border-top: 1px solid var(--line); } .row:first-child { border-radius: var(--radius) var(--radius) 0 0; } .row:last-child { border-radius: 0 0 var(--radius) var(--radius); } .row .r-main { flex: 1; min-width: 0; } .row .r-t { font-size: 14.5px; font-weight: 700; } .row .r-s { font-size: 12px; color: var(--ink-2); margin-top: 3px; } .row .r-ic { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 18px; } .row.clickable { cursor: pointer; } .row.clickable:active { background: #F7F9FD; } .chev { color: var(--ink-3); flex: none; } /* ===== 标签 / 徽章 ===== */ .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .tag-blue { background: var(--primary-soft); color: var(--primary); } .tag-orange { background: var(--orange-soft); color: var(--orange-deep); } .tag-green { background: var(--green-soft); color: #15803D; } .tag-red { background: var(--red-soft); color: var(--red); } .tag-grey { background: var(--line); color: var(--ink-2); } /* ===== 分段切换 ===== */ .seg { display: inline-flex; background: #EDF1F8; border-radius: 12px; padding: 3px; gap: 2px; } .seg button { border: 0; background: transparent; font-family: inherit; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 7px 16px; border-radius: 9px; transition: .18s; } .seg button.on { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(26, 34, 51, .1); } /* ===== 学习阶段选择器（专业 / 专高）===== */ .stage-pick { display: flex; flex-direction: column; gap: 10px; } .stage-pick .sp-seg { display: flex; } .stage-pick .sp-seg .seg { flex: 1; display: flex; width: 100%; } .stage-pick .sp-seg .seg button { flex: 1; } .stage-pick .sp-lv { display: flex; flex-wrap: wrap; gap: 8px; } .stage-pick .sp-lv button { border: 1.5px solid var(--line); background: #fff; font-family: inherit; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 7px 15px; border-radius: 999px; transition: .18s; } .stage-pick .sp-lv button.on { background: var(--primary); border-color: var(--primary); color: #fff; } /* ===== 表单 ===== */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; } .input { width: 100%; height: 50px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; padding: 0 15px; font-size: 15px; font-family: inherit; color: var(--ink); outline: none; transition: .18s; } .input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } textarea.input { height: auto; padding: 13px 15px; resize: none; line-height: 1.6; } select.input { appearance: none; } /* ===== 统计小格 ===== */ .stat { display: flex; gap: 10px; } .stat .s-box { flex: 1; background: #fff; border-radius: 14px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow-card); } .stat .s-n { font-size: 19px; font-weight: 800; } .stat .s-l { font-size: 11px; color: var(--ink-3); margin-top: 3px; } /* ===== 进度条 ===== */ .progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; } .progress i { display: block; height: 100%; border-radius: 4px; background: var(--primary); transition: width .4s; } .progress.warn i { background: var(--yellow); } .progress.danger i { background: var(--red); } /* ===== 悬浮底部操作条 ===== */ .footerbar { flex: none; padding: 12px 20px 26px; background: #fff; box-shadow: 0 -6px 20px rgba(26, 34, 51, .06); display: flex; gap: 12px; } /* ===== 通用动效 ===== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* 底部留白避免被 Tab 栏遮挡 */ .has-tabbar .content { padding-bottom: 96px; } /* ===== 骨架屏（数据未回时占位，避免白屏跳动） ===== */ .sk { display: inline-block; background: linear-gradient(90deg, #EDF1F8 25%, #F7F9FE 37%, #EDF1F8 63%); background-size: 400% 100%; animation: skShimmer 1.4s ease infinite; border-radius: 7px; } @keyframes skShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .sk-line { display: block; } .sk-stat { flex: 1; min-width: 0; background: #fff; border-radius: 16px; padding: 14px 8px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; } .sk-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 0; } .sk-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: var(--shadow-card); } .sk-av { width: 34px; height: 34px; border-radius: 12px; flex: none; } .sk-col { flex: 1; min-width: 0; } .sk-grid { display: grid; gap: 9px; padding: 0 20px; } .sk-tile { background: #fff; border-radius: 14px; padding: 13px; box-shadow: var(--shadow-card); } .sk-block { padding: 16px 20px; } /* ===== 下拉刷新 ===== */ .content.has-ptr { overscroll-behavior-y: contain; } .ptr { position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); opacity: 0; transform: translateY(-58px); pointer-events: none; } .ptr.smooth { transition: transform .22s cubic-bezier(.2, .9, .3, 1), opacity .2s; } .ptr-spin { width: 15px; height: 15px; border-radius: 50%; flex: none; border: 2px solid #D7E2F5; border-top-color: var(--primary); transition: transform .2s, border-color .2s; } .ptr.ready .ptr-spin { transform: rotate(180deg); border-top-color: var(--green); } .ptr.ready .ptr-text { color: var(--green); } .ptr.loading .ptr-spin { animation: spin .7s linear infinite; } .ptr.loading .ptr-text { color: var(--primary); } /* ===== 软键盘避让 ===== */ body.kb-open .phone { transition: height .18s ease; } body.kb-open .inputbar { padding-bottom: 10px; } body.kb-open .has-tabbar .content { padding-bottom: 20px; } /* ============================================================ 白底主题（原「星空夜景主题」已整体下线） 学生端手机画布 .phone 背景改为纯白（--bg: #FFFFFF），星光/星云图层全部移除。 --night-* 变量名保留：各页