/* 由 WXSS 转换，勿手改 */ :root{--rpx:calc(min(100vw, 430px) / 750);--vh:1vh} /* ---- styles/gold.wxss ---- */ /* ================================================================== * 收费面金皮 · styles/gold.wxss（v4.86.494） * ------------------------------------------------------------------ * 木哥 2026-10-24 23:3x 两张截图 + 一句令： * 「这些和收费有关的弹窗弹框和页面，都设计成金色的ui风格。全站统一这种风格。」 * * 一套色，别处不许自造 —— 与 components/pay-pop（v4.86.402 开通弹窗）、 * pages/wallet（v4.86.481 财富/充值）同一套金铜系： * 主金 #a8792c 价格数字 / 金按钮 / 金描边字 * 亮金 #d8b25c 渐变亮头 / 分割线高光 * 边金 #c9a15c 卡片描边 / 选中边 * 底金 #fdf8ec 价目块底 / 弹窗底 * 微金 #fffdf6 弹窗头 / 卡片顶部渐隐 * 淡金边 #f0e6d2 细分割线 / 内框 * 深棕 #6b4d14 标题字（比纯黑暖，和金色是一家人） * 金灰 #b0a488 注释小字 * * 用在哪：价目页（班级档位）、开通/升级弹窗、额度墙、会员页、商城下单结算。 * 不用在哪：班级列表、作业、点评这些功能页 —— 收费痕迹不许提前露（v4.86.443 的运营口径）。 * * 字号只走 20 / 24 / 28 / 32 / 40 / ≥46（A 层五档，tools/lint-style.js 会扫）。 * ================================================================== */ /* ---- 页面底：一层极淡金雾，不是白纸 ---- */ .gd-page { min-height: calc(var(--vh) * 100); background: linear-gradient(180deg, #fdf8ec 0%, #f8f1e2 calc(var(--rpx) * 320), #f6efe1 100%); box-sizing: border-box; } /* ---- 页头：深棕金压顶 + 一条亮金细线 ---- */ .gd-hero { position: relative; padding: calc(var(--rpx) * 36) calc(var(--rpx) * 32) calc(var(--rpx) * 40); background: linear-gradient(150deg, #43301a 0%, #6b4d14 60%, #8a6a22 100%); overflow: hidden; } .gd-hero::after { content: ''; position: absolute; left: calc(var(--rpx) * 32); right: calc(var(--rpx) * 32); bottom: 0; height: calc(var(--rpx) * 2); background: linear-gradient(90deg, rgba(216, 178, 92, 0) 0%, #d8b25c 50%, rgba(216, 178, 92, 0) 100%); } .gd-hero-t { font-size: calc(var(--rpx) * 40); font-weight: 700; color: #fdf3d8; letter-spacing: calc(var(--rpx) * 2); } .gd-hero-s { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); line-height: 1.6; color: rgba(253, 243, 216, 0.78); } /* 页头右上的小印：只用来说明这一页是「价目」，不做促销角标 */ .gd-seal { position: absolute; right: calc(var(--rpx) * 32); top: calc(var(--rpx) * 40); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 18); border: calc(var(--rpx) * 1) solid rgba(216, 178, 92, 0.7); border-radius: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); letter-spacing: calc(var(--rpx) * 2); color: #e8cf94; } /* ---- 卡片：米金底 + 金描边，不做重阴影 ---- */ .gd-card { margin: calc(var(--rpx) * 24) calc(var(--rpx) * 24) 0; padding: calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 20); border: calc(var(--rpx) * 2) solid #f0e6d2; background: linear-gradient(180deg, #fffdf6, #ffffff calc(var(--rpx) * 200)); box-shadow: 0 calc(var(--rpx) * 6) calc(var(--rpx) * 22) rgba(107, 77, 20, 0.06); } .gd-card-t { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #6b4d14; } .gd-card-s { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); line-height: 1.6; color: #8a7d66; } /* ---- 价目标签 ---- */ .gd-tag { padding: calc(var(--rpx) * 4) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 6); background: #fdf8ec; border: calc(var(--rpx) * 1) solid #c9a15c; font-size: calc(var(--rpx) * 20); color: #a8792c; } /* ---- 价格：¥ 小、数字大、周期灰 ---- */ .gd-price { display: flex; align-items: baseline; margin-top: calc(var(--rpx) * 12); } .gd-price-cur { font-size: calc(var(--rpx) * 24); color: #a8792c; } .gd-price-v { margin-left: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 46); font-weight: 700; line-height: 1.1; color: #a8792c; letter-spacing: calc(var(--rpx) * 1); } .gd-price-per { flex: 1; margin-left: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 20); color: #b0a488; } /* ---- 金按钮：亮金压主金的渐变，白字 ---- */ .gd-cta { margin-top: calc(var(--rpx) * 20); height: calc(var(--rpx) * 80); line-height: calc(var(--rpx) * 80); border-radius: calc(var(--rpx) * 999); background: linear-gradient(135deg, #d8b25c, #a8792c); font-size: calc(var(--rpx) * 28); font-weight: 600; color: #ffffff; text-align: center; border: none; } .gd-cta::after { border: none; } .gd-cta-hover { opacity: 0.88; } .gd-cta[disabled] { background: #e6dcc4; color: #ffffff; } /* ---- 金描边的次按钮（当前档位 / 已知晓） ---- */ .gd-cta-ghost { margin-top: calc(var(--rpx) * 20); height: calc(var(--rpx) * 80); line-height: calc(var(--rpx) * 76); border-radius: calc(var(--rpx) * 999); background: #fffdf6; border: calc(var(--rpx) * 2) solid #c9a15c; font-size: calc(var(--rpx) * 28); font-weight: 600; color: #a8792c; text-align: center; } .gd-cta-ghost::after { border: none; } /* ---- 注释小字 ---- */ .gd-fine { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); line-height: 1.6; color: #b0a488; } /* ---- 细分割线 ---- */ .gd-line { height: calc(var(--rpx) * 2); margin: calc(var(--rpx) * 20) 0; background: linear-gradient(90deg, rgba(201, 161, 92, 0) 0%, rgba(201, 161, 92, 0.55) 50%, rgba(201, 161, 92, 0) 100%); } /* ---- app.wxss ---- */ /* ================================================================== * 全局皮肤 · 微信生态版（v4.74.0 全站视觉统一） * 目标：像长在微信里，不像一个贴了绿纸的小程序。 * 规矩（照微信 7.0 设计规范）： * · 底色一律 #ededed 灰，白色分组块承载内容，块与块之间 calc(var(--rpx) * 16) 灰缝 * · 分组块：白底、calc(var(--rpx) * 16) 圆角、**没有阴影**（阴影是"华为风"的招牌，去掉） * · 分割线：calc(var(--rpx) * 1) 发丝线 #e5e5e5，列表行内对齐 * · 按钮：方角 calc(var(--rpx) * 12)，不再是 calc(var(--rpx) * 999) 药丸 * · 图标布局：行首小图标 + 一行主文 + 灰色右箭头 › * 本文件只改"皮"，不改任何页面的信息层级与功能位置。 * * ── 色板（唯一真相，别再自造颜色）────────────────────────── * 主绿 #07c160 品牌/强调/进度/数字/选中态 * 绿-按压 #06ad56 按下态 * 绿-禁用 #a6e0be 禁用按钮 * 绿-浅底 #e8f7ee 标签底 / 浅绿分组块 * 绿-浅边 #d5f0df 浅绿块描边 * 页面底 #ededed 银行卡式的灰底 * 卡片底 #ffffff 白分组块 * 填充灰 #f7f7f7 输入框 / 次级底 * 次灰底 #f2f2f2 离线徽章 / 轨道 * 按压灰 #ececec 按压反馈 * 分割线 #e5e5e5 * 箭头灰 #c8c8cd › * 一级文字 #191919 * 二级文字 #888888 * 三级文字 #b2b2b2 * 红 #fa5151 / 红底 #feeceb —— 错误、删除 * 橙 #fa9d3b / 橙底 #fff7e6 —— **仅**待办、未达标、评分色阶 * 蓝 #576b95 —— 可点的次要链接（微信蓝） * 聊天气泡绿 #95ec69 —— 只用于"我发的"气泡 * ※ 装饰性暖金/米黄/棕（#8a6116 #b8860b #d99a12 #fff7e6 之类）已全站清除。 * ※ v4.86.494 例外（木哥 2026-10-24 23:3x「这些和收费有关的弹窗弹框和页面， * 都设计成金色的ui风格。全站统一这种风格。」）：**收费面**统一金铜系 * 主金 #a8792c / 亮金 #d8b25c / 边金 #c9a15c / 底金 #fdf8ec / 深棕 #6b4d14， * 公共类在 styles/gold.wxss，弹窗是 components/gold-modal； * 范围只到价目页、开通弹窗、额度墙、会员/充值、商城下单结算， * 功能页（班级列表、作业、点评、首页）一处都不许搬这套色。 * * ── 字号（5 档，别再出现 22/26/30/34 这种中间值）──────────── * T0 calc(var(--rpx) * 40)(20px) 页面主标题 / 卡片大数字 * T1 calc(var(--rpx) * 32)(16px) 一级：卡片标题 · 列表主文 · 主按钮 * T2 calc(var(--rpx) * 28)(14px) 二级：正文 · 副标题 · 次要按钮 · 输入框 * T3 calc(var(--rpx) * 24)(12px) 三级：注释 · 说明 · 列表副文 * T4 calc(var(--rpx) * 20)(10px) 标签 · 角标（全站最小字号） * ※ ≥calc(var(--rpx) * 46) 一律是图标/emoji 字形尺寸，不属文字刻度。 * * ── 菜单栏（tabBar）────────────────────────────────────── * 图标：微信标准 81×81px，图形占 24 栅格 20 单位（已按此出图） * 文字：微信客户端固定 10px，等于本项目 T4 calc(var(--rpx) * 20) —— 不可由 app.json 改； * 要完全掌控字号只能改自定义 tabBar（custom: true），当前不做。 * ================================================================== */ /* v4.86.499：金皮改成**全局引一次**。 原来（496）是各页自己 @import "../../../styles/gold.wxss" —— 档位页在子包 pkgOps 里，`../../../` 越过了子包根，微信编译器直接报 `path ../../../styles/gold.wxss not found from ./pkgOps/pages/tclass/plan.wxss` （上传时才炸，本地 lint / 386 条用例全绿也看不出来）。 放这里 = 跟"一套色只有一处真相"同义，而且主包内引用，任何子包页面直接用类就行。 */ #app-page { background: #ededed; color: #191919; font-size: calc(var(--rpx) * 28); font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; line-height: 1.6; } .page-wrap { padding: calc(var(--rpx) * 16) calc(var(--rpx) * 24) calc(var(--rpx) * 60); box-sizing: border-box; /* v4.69.3：兜住内容里任何横向溢出。 用 clip 而不是 hidden —— hidden 会把 overflow-y 一并算成 auto， 在 iOS 上会让整页纵向滚动出问题（v4.69.0 踩过）；clip 不影响另一轴。 */ overflow-x: clip; } /* ---- 分组块（原 .card）：白底、微圆角、无阴影 ---- */ .card { background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 28) calc(var(--rpx) * 32); margin-bottom: calc(var(--rpx) * 16); } .card-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 16); } .muted { color: #888888; font-size: calc(var(--rpx) * 24); } /* ---- 按钮：全站只有这六类（v4.86.183 · 木哥 00:2x「按类别统一，符合微信生态」）---- * ① .btn-primary 主按钮 实心 #07c160 + 白字（唯一"最重的动作"用它） * ② .btn-ghost 次按钮 白底 + calc(var(--rpx) * 1) #e5e5e5 边 + #191919 字 * ③ .btn-warn 警示按钮 白底 + #fa5151 字（微信规范红，只给"退出/删除/取消单"这类） * ④ .btn-mini 小按钮 行内、方角 calc(var(--rpx) * 8)、字号 calc(var(--rpx) * 24) * ⑤ .nsw 通知开关 行内胶囊 calc(var(--rpx) * 999)、字号 calc(var(--rpx) * 24)（开/关两态，全站通知类只准用它） * ⑥ .wx-link 文字链 微信蓝 #576b95 * 大按钮三档**同尺寸**（calc(var(--rpx) * 10) 圆角 / calc(var(--rpx) * 32) 字号 / padding calc(var(--rpx) * 24) 0），只换配色； * 小元素两档同尺寸（calc(var(--rpx) * 999) 圆角 / calc(var(--rpx) * 24) 字号 / padding calc(var(--rpx) * 8) calc(var(--rpx) * 24)），只换配色。 * 字号只走本仓 5 档阶梯 20/24/28/32/40 —— 别自造 26/30/34/16/19。 * 按下态只加深一档（主 #06ad56 / 次 #f2f2f2）；button 用自带 .button-hover， * view 当按钮时挂 hover-class="button-hover"（按下会带上这个类，照样命中下面的规则）。 * ★ 禁止自造：其他底色（深灰/橙/深绿）、渐变底、投影、胶囊化的大按钮。 */ .btn-primary { background: #07c160; color: #ffffff; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 32); font-weight: 500; padding: calc(var(--rpx) * 24) 0; text-align: center; border: none; line-height: 1.4; transition: background 0.12s ease; } .btn-primary::after { border: none; } .btn-primary.button-hover, .btn-primary[disabled].button-hover { background: #06ad56; color: #ffffff; } .btn-primary[disabled] { background: #a6e0be; color: #ffffff; } .btn-ghost { background: #ffffff; color: #191919; border: calc(var(--rpx) * 1) solid #e5e5e5; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 32); padding: calc(var(--rpx) * 24) 0; text-align: center; line-height: 1.4; transition: background 0.12s ease; } .btn-ghost::after { border: none; } .btn-ghost.button-hover { background: #f2f2f2; color: #191919; } /* 微信"警示"按钮（退出登录这类） */ .btn-warn { background: #ffffff; color: #fa5151; border: none; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 32); padding: calc(var(--rpx) * 24) 0; text-align: center; line-height: 1.4; } .btn-warn::after { border: none; } .row-between { display: flex; align-items: center; justify-content: space-between; } .empty { padding: calc(var(--rpx) * 80) calc(var(--rpx) * 20); text-align: center; color: #b2b2b2; font-size: calc(var(--rpx) * 28); } .tag { display: inline-block; padding: calc(var(--rpx) * 4) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 6); background: #e8f7ee; color: #07c160; font-size: calc(var(--rpx) * 24); } /* ---- 列表行（微信 cell：一行主文 + 右侧灰箭头） ---- */ .cell { display: flex; align-items: center; padding: calc(var(--rpx) * 28) 0; border-bottom: calc(var(--rpx) * 1) solid #e5e5e5; } .cell:last-child { border-bottom: none; } .cell-main { flex: 1; min-width: 0; } .cell-title { font-size: calc(var(--rpx) * 32); color: #191919; } .cell-sub { font-size: calc(var(--rpx) * 24); color: #b2b2b2; margin-top: calc(var(--rpx) * 4); } .cell-right { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #07c160; margin-left: calc(var(--rpx) * 20); flex-shrink: 0; } .cell-right.minus { color: #888888; } /* 微信风格的右箭头 ›（灰、细、靠右） */ .wx-arrow { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 40); line-height: 1; color: #c8c8cd; font-weight: 300; } /* 可点的列表行：按下变灰（微信的按压反馈就是整行变灰） */ .cell-tap, .wx-tap { transition: background-color 0.08s; } .cell-tap:active, .wx-tap:active { background-color: #ececec; } /* 分组块上方的小灰标题（微信的 section header 写法） */ .wx-section { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 16) calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); color: #888888; } /* ---- 页面左上角品牌 logo + 名称 ---- */ .app-header { display: flex; justify-content: flex-start; align-items: center; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 8) calc(var(--rpx) * 20); gap: calc(var(--rpx) * 16); } /* v4.86.530：主 logo 从绿色字标换成绿猫头像（images/logo.png 同步换源）， 页头收敛成「猫标 + 名称」——旧字标旁的分隔杠与单线猫一并退场 */ .app-header-logo { width: calc(var(--rpx) * 48); height: calc(var(--rpx) * 48); border-radius: calc(var(--rpx) * 10); opacity: 0.95; } /* v4.86.530：主 logo 已是绿猫，字标旁的竖杠与单线猫不再展示（wxml 保留结构，收敛走 CSS） */ .app-header-divider { display: none; } /* 单线绿猫（透明底微信绿线条） */ .app-header-cat { display: none; } .app-header-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #07c160; letter-spacing: calc(var(--rpx) * 2); } /* v4.86.262（任务书 D-05/D-06/D-07）：页头右侧的积分位 —— 三处常驻、一眼可见。 ★ 不定位悬浮、不叠角标（D-06 ③）：margin-left:auto 只占行内最后一格， 品牌区在左、数字在右，谁也不会盖住谁。 */ .app-header-point { margin-left: auto; display: flex; align-items: baseline; gap: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 999); background: rgba(7, 193, 96, 0.08); border: calc(var(--rpx) * 1) solid rgba(7, 193, 96, 0.18); } .app-header-point-v { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #07c160; } .app-header-point-u { font-size: calc(var(--rpx) * 24); color: #07c160; opacity: 0.75; } .app-header-point-guest .app-header-point-v { font-size: calc(var(--rpx) * 24); font-weight: 400; } /* 墨宝数字 */ .bean-num { color: #07c160; font-weight: 600; } /* 级别徽章 */ .badge { display: inline-block; padding: calc(var(--rpx) * 4) calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); margin-left: calc(var(--rpx) * 12); vertical-align: middle; } .badge-junior { background: #e8f7ee; color: #07c160; } .badge-excellent { background: #fff7e6; color: #fa9d3b; } .badge-senior { background: #feeceb; color: #fa5151; } /* 小按钮 */ .btn-mini { display: inline-block; font-size: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 10); background: #07c160; color: #ffffff; margin-left: calc(var(--rpx) * 16); } .btn-mini.ghost { background: #ffffff; color: #888888; border: calc(var(--rpx) * 1) solid #e5e5e5; } /* ⑤ 通知开关（v4.86.183 木哥第 3 条：全站"微信通知"的开/关按键只准用这一颗） * 未开 = 绿边白底绿字「开启」（是号召）；已开 = 浅绿底 + 绿字「已开启」（已生效，弱化）。 * 与 .btn-mini 同一套尺寸、只换配色 —— 作业页 / 详情页 / 我的页 / 助教中心长得一模一样。 */ .nsw { display: inline-block; flex-shrink: 0; margin-left: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 999); border: calc(var(--rpx) * 1) solid #07c160; background: #ffffff; color: #07c160; font-size: calc(var(--rpx) * 24); line-height: 1.6; white-space: nowrap; } .nsw-on { border-color: #07c160; background: #e8f7ee; color: #07c160; } /* 通知行（v4.86.183：day 页与详情页原先各写一份、逐字相同 ⇒ 收上来共用，顺手省主包） */ .notify-row { margin-top: calc(var(--rpx) * 22); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 22); border-radius: calc(var(--rpx) * 14); background: #f7f7f7; display: flex; align-items: center; font-size: calc(var(--rpx) * 28); } .notify-row:active { background: #e8f7ee; } .notify-icon { margin-right: calc(var(--rpx) * 12); } .notify-text { flex: 1; } /* 链接：微信蓝（微信生态里"能点"的次要文字就是这种蓝） */ .wx-link { color: #576b95; } /* ---- 输入框 / 文本域：微信用浅灰填充，不再是米色 ---- */ .input { background: #f7f7f7; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 28); } .area { background: #f7f7f7; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 28); width: auto; min-height: calc(var(--rpx) * 140); box-sizing: border-box; } .field-label { font-size: calc(var(--rpx) * 24); color: #888888; margin-bottom: calc(var(--rpx) * 12); } /* 字段名 + 🎤说话 挤同一行（v4.83.5 全站默认语音输入） */ .field-label-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--rpx) * 16); } .field-block { margin-bottom: calc(var(--rpx) * 24); } /* 入口行（微信 cell 的老别名，与 .cell 同一套） */ .entry { display: flex; align-items: center; padding: calc(var(--rpx) * 28) 0; border-bottom: calc(var(--rpx) * 1) solid #e5e5e5; } .entry:last-child { border-bottom: none; } .entry-arrow { color: #c8c8cd; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 40); font-weight: 300; line-height: 1; } /* ---- 助教在线/离线标志 ---- */ .badge-online { background: #e8f7ee; color: #07c160; } .badge-offline { background: #f2f2f2; color: #b2b2b2; } /* v4.86.182：视频动作纠正块（day 页与详情页共用一份，避免两页各写一遍吃主包） */ /* 视频动作纠正（v4.86.183 木哥 00:1x「做成和今日打卡一样的绿色主按键」）： * 不再是"带说明的卡片"，就是一颗主按钮 —— 尺寸/圆角/配色全由 .btn-primary 提供， * 这里只补一条外边距；未开通时走禁用绿（与主按钮禁用态同色）。day 页与详情页共用。 */ .hw-video{margin-top:calc(var(--rpx) * 24);} .hw-video-off{background:#a6e0be;} /* v4.86.362（木哥 359 号令）：有原音的 ♪ 声音图标**常驻闪动** —— 任何时候、 * 任何页面（圈画页/老师复看/学生详情/记录页/放大层）都在闪，一眼看出「这处有声音」。 * 只动 opacity 不碰 transform —— detail 的 .voice-dot 自带 translate(-50%,-50%)， * 动画里改 transform 会把它拽离原位（图标飘移比不闪严重得多）。各页的 * .xx-flash 类只写 animation 一行，keyframes 全站共用这一份。 */ @keyframes voice-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ===== 图标块（v4.86.547 木哥令：消息页系统线要和发现页一个风格）===== * 彩底圆角方块 + 白色线条图示，一图一义、笔画最少（同聊天页语音键的技术）。 * 九枚图示是 v4.86.541 为发现页重画的，这次搬成全站一份： * 发现页行内 calc(var(--rpx) * 56)（.ico-tile-s）、消息页头像位 calc(var(--rpx) * 92)（.ico-tile-m）。 * 键名沿用发现页那份（char/demo/record/park/family/letter/remind/mall/power）， * remind 就是铃铛 —— 消息页「平台通知」直接复用它，不再单独画一枚。 */ .ico-tile { display: flex; align-items: center; justify-content: center; border-radius: calc(var(--rpx) * 12); flex-shrink: 0; } .ico-tile-s { width: calc(var(--rpx) * 56); height: calc(var(--rpx) * 56); } .ico-tile-m { width: calc(var(--rpx) * 92); height: calc(var(--rpx) * 92); border-radius: calc(var(--rpx) * 16); } .ico-gl { width: 60%; height: 60%; background-repeat: no-repeat; background-position: center; background-size: contain; } .ico-gl-char { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMjEiIGN5PSIyMSIgcj0iMTAiLz48cGF0aCBkPSJNMjggMjggMzggMzgiLz48cGF0aCBkPSJNMTcgMjFoOCIvPjwvc3ZnPg=="); } .ico-gl-demo { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDM0bDIuNS03LjVMMzMgMTBsNSA1LTE2LjUgMTYuNUwxNCAzNHoiLz48cGF0aCBkPSJNMzAuNSAxMi41bDUgNSIvPjwvc3ZnPg=="); } .ico-gl-record { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMTIiIHk9IjkiIHdpZHRoPSIyNCIgaGVpZ2h0PSIzMCIgcng9IjMiLz48cGF0aCBkPSJNMTggMThoMTJNMTggMjVoMTJNMTggMzJoNyIvPjwvc3ZnPg=="); } .ico-gl-park { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIyNyIgcj0iMTIiLz48cGF0aCBkPSJNMTQgMTkgMTIgOWw4IDYiLz48cGF0aCBkPSJNMzQgMTkgMzYgOWwtOCA2Ii8+PHBhdGggZD0iTTIwIDI2aC4xTTI4IDI2aC4xIi8+PC9zdmc+"); } .ico-gl-family { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEwIDM4aDI4Ii8+PHBhdGggZD0iTTE3IDM4VjI2TTI0IDM4VjE1TTMxIDM4VjMwIi8+PC9zdmc+"); } .ico-gl-letter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMTAiIHk9IjE0IiB3aWR0aD0iMjgiIGhlaWdodD0iMjAiIHJ4PSIzIi8+PHBhdGggZD0iTTEwIDE3bDE0IDEwIDE0LTEwIi8+PC9zdmc+"); } .ico-gl-hw { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMTIiIHk9IjciIHdpZHRoPSIyNCIgaGVpZ2h0PSIzNCIgcng9IjMiLz48cGF0aCBkPSJNMTggMTZoMTJNMTggMjNoMTIiLz48cGF0aCBkPSJNMTggMzJsMyAzIDYtNyIvPjwvc3ZnPg=="); } .ico-gl-remind { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTI0IDEwYy02IDAtOSA0LjUtOSAxMHY2bC0zIDZoMjRsLTMtNnYtNmMwLTUuNS0zLTEwLTktMTB6Ii8+PHBhdGggZD0iTTIxIDM2YTMgMyAwIDAgMCA2IDAiLz48L3N2Zz4="); } .ico-gl-mall { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDE3aDIwbC0xLjUgMjBhMi41IDIuNSAwIDAgMS0yLjUgMi4zSDE4YTIuNSAyLjUgMCAwIDEtMi41LTIuM0wxNCAxN3oiLz48cGF0aCBkPSJNMTguNSAxN3YtM2E1LjUgNS41IDAgMCAxIDExIDB2MyIvPjwvc3ZnPg=="); } .ico-gl-power { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE2IDloMTZ2MTBhOCA4IDAgMCAxLTE2IDBWOXoiLz48cGF0aCBkPSJNMTYgMTJoLTR2MmE2IDYgMCAwIDAgNSA2Ii8+PHBhdGggZD0iTTMyIDEyaDR2MmE2IDYgMCAwIDEtNSA2Ii8+PHBhdGggZD0iTTI0IDI3djZNMTcgMzloMTRNMjAgMzNoOGwxIDZoLTEwbDEtNnoiLz48L3N2Zz4="); } /* v7.0.037（木哥 20:0x「设置页所有图标参考发现页的图标，统一风格」）： * 设置页要用的七枚新图示，画法与那九枚同一条技术（48×48、白线 3、圆头圆角）， * 彩底由页面用 tint 铺，这里只画白线。person 给「名字」、key 给「账号 ID」、 * phone/pin/school/steps 给手机号与上学档案、sound/mic 给提醒与麦克风。 */ .ico-gl-key { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iNyIvPjxwYXRoIGQ9Ik0yMSAyMWwxNSAxNSIvPjxwYXRoIGQ9Ik0zMCAzMGw0LTQiLz48cGF0aCBkPSJNMzQgMzRsNC00Ii8+PC9zdmc+"); } .ico-gl-phone { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMTQiIHk9IjciIHdpZHRoPSIyMCIgaGVpZ2h0PSIzNCIgcng9IjQiLz48cGF0aCBkPSJNMjEgMzVoNiIvPjwvc3ZnPg=="); } .ico-gl-pin { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTI0IDQwczEyLTkuNiAxMi0yMGExMiAxMiAwIDAgMC0yNCAwYzAgMTAuNCAxMiAyMCAxMiAyMHoiLz48Y2lyY2xlIGN4PSIyNCIgY3k9IjIwIiByPSI0LjUiLz48L3N2Zz4="); } .ico-gl-school { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgNDBoMzYiLz48cGF0aCBkPSJNMTAgNDBWMjBsMTQtOSAxNCA5djIwIi8+PHBhdGggZD0iTTE5IDQwVjI5aDEwdjExIi8+PC9zdmc+"); } .ico-gl-steps { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgMzlWMjloOXYtOWg5VjEwaDkiLz48cGF0aCBkPSJNOSAzOWgzMCIvPjwvc3ZnPg=="); } .ico-gl-sound { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgMjBoN2w5LTh2MjRsLTktOEg5eiIvPjxwYXRoIGQ9Ik0zMiAxOGMzIDMgMyA5IDAgMTIiLz48cGF0aCBkPSJNMzcgMTNjNiA1IDYgMTcgMCAyMiIvPjwvc3ZnPg=="); } .ico-gl-mic { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMTkiIHk9IjgiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxOSIgcng9IjUiLz48cGF0aCBkPSJNMTMgMjRjMCA3IDUgMTEgMTEgMTFzMTEtNCAxMS0xMSIvPjxwYXRoIGQ9Ik0yNCAzNXY2Ii8+PC9zdmc+"); } .ico-gl-person { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIxNyIgcj0iNyIvPjxwYXRoIGQ9Ik0xMSAzOWMwLTcgNi0xMSAxMy0xMXMxMyA0IDEzIDExIi8+PC9zdmc+"); } /* v7.0.081（木哥令「消息页单独出管理员·信息反馈」）：对话气泡 + 两行字， * 画法与上面九枚同一套（白线 3、圆头圆角），彩底由消息页 .msg-fb-tile 铺。 */ .ico-gl-fb { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEzIDEwaDIyYTQgNCAwIDAgMSA0IDR2MTFhNCA0IDAgMCAxLTQgNEgyNGwtOCA4di04aC0zYTQgNCAwIDAgMS00LTRWMTRhNCA0IDAgMCAxIDQtNHoiLz48cGF0aCBkPSJNMTcgMTdoMTRNMTcgMjNoOSIvPjwvc3ZnPg=="); } /* v7.0.182（木哥令，附「今天的作业与点评」截图）：《待办引导准则》全站一份 —— * 凡「等用户点一下才算完」的主按钮（确认点评 / 同意示范 / 确认邀约…）： * ① 未读（还没看过）：键上挂 .btn-glow-dot「未读」红角标，同时按键发光； * ② 已读未办：角标摘、发光继续 —— 光一直呼吸到动作做完（成功后键变灰停光）； * ③ 样式全站只此一份：待办主按钮加 .btn-glow 一个类即生效，keyframes 共用， * 禁止各页自造动画/投影；光只给「可点且待办」，禁用态/成功态一律不加。 * ④ v7.0.187（木哥发图令「角标没有显示完整，需要修补好」）：原生 button 自带 * overflow:hidden，把探出键顶的「未读」角标裁掉半截 —— .btn-glow 一并 * overflow:visible 放行，凡挂光的键角标都完整（全站一处修，四处同好）。 * 本版接入四处：day 页广场邀约确认键（带未读角标）、day 页示范同意键两份、 * day 页已选老师确认键、detail 页示范同意键。 */ @keyframes wb-btn-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.45); } 50% { box-shadow: 0 0 0 calc(var(--rpx) * 14) rgba(7, 193, 96, 0); } } .btn-glow { position: relative; overflow: visible; animation: wb-btn-glow 1.6s ease-out infinite; } .btn-glow-dot { position: absolute; top: calc(var(--rpx) * -14); right: calc(var(--rpx) * 10); background: #fa5151; color: #ffffff; font-size: calc(var(--rpx) * 20); line-height: 1; padding: calc(var(--rpx) * 6) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 999); border: calc(var(--rpx) * 2) solid #ffffff; } /* ---- pages/index/index.wxss ---- */ [data-route="pages/index/index"] /* ================================================================== * 打卡首页 · 微信生态皮肤（v4.70.0） * 白分组块 + 发丝线 + 灰箭头；渐变/阴影/虚线/米色全部退场。 * ================================================================== */ .hero { padding: calc(var(--rpx) * 24) calc(var(--rpx) * 8) calc(var(--rpx) * 36); } [data-route="pages/index/index"] .hero-date { font-size: calc(var(--rpx) * 24); color: #888888; letter-spacing: calc(var(--rpx) * 2); } [data-route="pages/index/index"] .hero-title { font-size: calc(var(--rpx) * 52); font-weight: 600; color: #191919; margin-top: calc(var(--rpx) * 12); letter-spacing: calc(var(--rpx) * 2); } [data-route="pages/index/index"] .hero-sub { font-size: calc(var(--rpx) * 28); color: #888888; margin-top: calc(var(--rpx) * 14); } [data-route="pages/index/index"] .notice { margin-top: calc(var(--rpx) * 20); text-align: center; } [data-route="pages/index/index"] /* 统计条：白块 + 发丝分隔，黑数字 */ .stats { display: flex; background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 32) 0; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .stat { flex: 1; text-align: center; border-right: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/index/index"] .stat:last-child { border-right: none; } [data-route="pages/index/index"] .stat-num { font-size: calc(var(--rpx) * 48); font-weight: 600; color: #191919; line-height: 1.2; } [data-route="pages/index/index"] .stat-label { font-size: calc(var(--rpx) * 24); color: #888888; margin-top: calc(var(--rpx) * 8); } [data-route="pages/index/index"] /* v4.86.66（木哥）：打卡主卡 —— 打卡键 + 四个打卡数值（我的页挪来）合成一张卡， 放打卡页第一位；数值行复用下面的 .stat/.stat-num/.stat-label（去独立卡的圆角底） */ .checkin-card { background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 28) calc(var(--rpx) * 24) calc(var(--rpx) * 8); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .checkin-btn { position: relative; margin-bottom: calc(var(--rpx) * 24); } [data-route="pages/index/index"] /* v4.86.259（木哥令）：未读点评数红点挂在主按钮右上角 —— 有几次显示几次 （badge.fmt，>99 折 99+）；进 day 页看到即燛（markCurSeen） */ .checkin-badge { position: absolute; /* v4.86.274（木哥令「数字显示不完整」）：负偏移悬在按钮外被裁掉上半 —— * 收进按钮内部右上角，永远完整。 */ top: calc(var(--rpx) * 8); right: calc(var(--rpx) * 8); min-width: calc(var(--rpx) * 32); padding: 0 calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 18); background: #fa5151; color: #ffffff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 32); text-align: center; box-sizing: border-box; border: calc(var(--rpx) * 3) solid #ffffff; } [data-route="pages/index/index"] .checkin-stats { display: flex; padding-bottom: calc(var(--rpx) * 24); } [data-route="pages/index/index"] /* v4.86.317（木哥 317 号令）：角标下面的「哪几篇」入口 —— 一行小字， 不抢打卡主键的视觉，点整行进未读明细 */ .unread-line { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--rpx) * 4); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 4) calc(var(--rpx) * 4); border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/index/index"] .unread-line-t { font-size: calc(var(--rpx) * 24); color: #666666; } [data-route="pages/index/index"] .unread-line-go { font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/index/index"] .main-btn { margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .recent-item { display: flex; align-items: center; padding: calc(var(--rpx) * 26) 0; border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/index/index"] .recent-main { flex: 1; } [data-route="pages/index/index"] .recent-date { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/index/index"] .recent-note { margin-top: calc(var(--rpx) * 6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--rpx) * 480); } [data-route="pages/index/index"] /* 微信灰箭头 */ .recent-arrow { color: #c8c8cd; font-size: calc(var(--rpx) * 40); font-weight: 300; line-height: 1; } [data-route="pages/index/index"] .err { margin-top: calc(var(--rpx) * 24); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/index/index"] /* v4.74.7：页头右上角的「Lv·称号·猫名」小条已撤（周木：「没有必要，我的页面有详细展示」）， 连带 .header-id / -lv / -title / -cat / -cat-img / -go 六条样式一并删掉，别留死代码。 等级/称号/猫名的完整口径仍在「我的」页与猫咪乐园，打卡页只留品牌页头。 */ /* ============ v4.83.5：和墨灵猫说说话（全站唯一聊天入口） ============ 绿底突出、跟游戏入口卡同一套绿（#e9f8ef + 绿描边）。 两行结构：上排「头像 + 标题 + 说明」，下排两个等宽按钮（陪孩子 / 聊正事）。 */ .talk-entry { background: #e9f8ef; border: calc(var(--rpx) * 1) solid rgba(7, 193, 96, 0.22); border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 24); margin: calc(var(--rpx) * 16) 0; } [data-route="pages/index/index"] .talk-head { display: flex; align-items: center; } [data-route="pages/index/index"] .talk-avatar { width: calc(var(--rpx) * 76); height: calc(var(--rpx) * 76); border-radius: 50%; flex-shrink: 0; margin-right: calc(var(--rpx) * 20); background: #ffffff; } [data-route="pages/index/index"] .talk-info { flex: 1; min-width: 0; } [data-route="pages/index/index"] .talk-name { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; } [data-route="pages/index/index"] .talk-say { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #4c8f68; line-height: 1.4; } [data-route="pages/index/index"] .talk-row { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 20); } [data-route="pages/index/index"] .talk-btn { flex: 1; height: calc(var(--rpx) * 68); line-height: calc(var(--rpx) * 68); text-align: center; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); font-weight: 500; color: #0a7a3d; background: #ffffff; border: calc(var(--rpx) * 1) solid rgba(7, 193, 96, 0.35); } [data-route="pages/index/index"] .talk-btn-main { color: #ffffff; background: #07c160; border-color: #07c160; } [data-route="pages/index/index"] /* 猫咪乐园入口：白块 + 图标 + 箭头（微信列表行写法） */ .game-entry { display: flex; align-items: center; background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 24); margin: calc(var(--rpx) * 16) 0; } [data-route="pages/index/index"] /* 小猫刺刺毛：整行转红调 */ .game-entry-sad { background: #feeceb; } [data-route="pages/index/index"] .game-entry-icon { position: relative; width: calc(var(--rpx) * 56); height: calc(var(--rpx) * 56); flex-shrink: 0; margin-right: calc(var(--rpx) * 20); display: flex; align-items: center; justify-content: center; } [data-route="pages/index/index"] /* 入口图标：一律单线绿猫 logo（v4.74.4 起，刺刺毛态也不再扮鬼脸—— 状态语义交给卡片红底 + 「小猫刺刺毛了：…」文案，图标保持品牌统一） */ .game-entry-cat-img { width: 100%; height: 100%; display: block; } [data-route="pages/index/index"] /* 入口右上角小红点 */ .ge-dot { position: absolute; top: calc(var(--rpx) * -2); right: calc(var(--rpx) * -6); width: calc(var(--rpx) * 18); height: calc(var(--rpx) * 18); border-radius: 50%; background: #fa5151; } [data-route="pages/index/index"] /* v4.86.65（木哥）：乐园入口的未读数字角标（要操心的照顾动作数，>99 折 99+）， 与「我的」页 .fn-badge 同一套口径（utils/unread-badge.js） */ .ge-badge { position: absolute; top: calc(var(--rpx) * -10); right: calc(var(--rpx) * -18); min-width: calc(var(--rpx) * 28); height: calc(var(--rpx) * 30); padding: 0 calc(var(--rpx) * 8); box-sizing: border-box; border-radius: calc(var(--rpx) * 16); background: #fa5151; color: #fff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 30); text-align: center; font-weight: 600; } [data-route="pages/index/index"] .game-entry-info { flex: 1; min-width: 0; } [data-route="pages/index/index"] .game-entry-name { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/index/index"] .game-entry-say { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.5; } [data-route="pages/index/index"] /* 今天的安排提示条：压平 */ .plan-tip { display: flex; align-items: center; padding: calc(var(--rpx) * 22) calc(var(--rpx) * 24); margin-bottom: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 16); background: #e8f7ee; } [data-route="pages/index/index"] .plan-tip-icon { font-size: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .plan-tip-body { flex: 1; min-width: 0; } [data-route="pages/index/index"] .plan-tip-text { display: block; font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/index/index"] .plan-tip-sub { display: block; margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [data-route="pages/index/index"] .plan-tip-go { font-size: calc(var(--rpx) * 40); font-weight: 300; color: #c8c8cd; } [data-route="pages/index/index"] /* 聊天入口不再放首页 */ /* 聊天入口不再放首页（避免"两只猫"）：聊天统一从猫咪乐园 / 悬浮猫进 */ /* v4.69.2：离屏画布收进屏内。 原来用 position:fixed + left:-9999px 藏到屏幕外，iOS 会把这种负偏移的 fixed 盒子算进页面可滚动宽度 —— 整页因此能被左右拖（「我的」页晃、打卡/记录页没有 这块画布所以不晃）。现在锚在屏内左上、缩到 1px、透明、不挡点击。 画布出图只认 canvas.width/height（share-card.js / detail.js 都是这么写的）， CSS 尺寸只影响显示，改小不影响分享图质量。 */ anvas { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1; } [data-route="pages/index/index"] /* ================================================================== * 老师榜 * v4.86.425（木哥 21:36：「全部错了，老师榜的 ui，我是要图二的样式」） * 一行一张白卡，不再是密集榜单行：左圆头像、名字 + 胶囊徽标、 * 擅长·口吻、简介两行；选中那张描绿边 + 右上绿勾。 * ================================================================== */ .board-sec { margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .board-head { padding: calc(var(--rpx) * 6) calc(var(--rpx) * 8) calc(var(--rpx) * 16); } [data-route="pages/index/index"] .board-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/index/index"] .board-note { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); line-height: 1.5; color: #888888; } [data-route="pages/index/index"] /* 一张卡 = 一位老师 */ .board-card { position: relative; display: flex; align-items: flex-start; background: #ffffff; border: calc(var(--rpx) * 2) solid transparent; border-radius: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 26) calc(var(--rpx) * 24); margin-bottom: calc(var(--rpx) * 18); box-sizing: border-box; } [data-route="pages/index/index"] /* 按压反馈（原 mentor-row-hover 的白色卡版本） */ .board-card-hover { background: #fafafa; } [data-route="pages/index/index"] /* v4.86.448（木哥 16:1x「页面还显示打钩，把这一套打勾逻辑去掉」）： * 「被选中」这套在真人老师行里根本不存在 —— 老师是「邀约 → 接单」， * 没有一个常驻的「当前选中」状态。陪练跟着去掉，榜上不再有绿边与绿勾。 */ .board-ava-wrap { position: relative; flex-shrink: 0; margin-right: calc(var(--rpx) * 22); } [data-route="pages/index/index"] .mentor-avatar { display: block; width: calc(var(--rpx) * 96); height: calc(var(--rpx) * 96); border-radius: 50%; background: #f2f2f2; } [data-route="pages/index/index"] /* 没照片回退首字块：浅灰圆 + 绿字（图二的创始人位就是这形状） */ .mentor-avatar-empty { display: flex; align-items: center; justify-content: center; background: #f2f2f2; color: #07c160; font-size: calc(var(--rpx) * 40); font-weight: 600; } [data-route="pages/index/index"] /* v4.86.419（木哥令）：「陪」字标志放在头像右下侧 */ .coach-pei { position: absolute; right: calc(var(--rpx) * -6); bottom: calc(var(--rpx) * -6); width: calc(var(--rpx) * 32); height: calc(var(--rpx) * 32); line-height: calc(var(--rpx) * 32); text-align: center; border-radius: 50%; background: #8a6320; color: #ffffff; font-size: calc(var(--rpx) * 20); font-weight: bold; border: calc(var(--rpx) * 3) solid #ffffff; box-sizing: content-box; } [data-route="pages/index/index"] .mentor-main { flex: 1; min-width: 0; /* 右上角那枚勾的位置留出来，名字长了也不压到它 */ padding-right: calc(var(--rpx) * 34); } [data-route="pages/index/index"] .mentor-line { display: flex; align-items: center; flex-wrap: wrap; } [data-route="pages/index/index"] .mentor-name { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; max-width: calc(var(--rpx) * 300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/index/index"] /* 胶囊徽标：身份级别 / 性格 / 在线，绿描边绿字（图二那几枚） */ .board-chip { margin-left: calc(var(--rpx) * 10); padding: 0 calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 34); border-radius: calc(var(--rpx) * 999); border: calc(var(--rpx) * 1) solid rgba(7, 193, 96, 0.55); color: #07c160; flex-shrink: 0; } [data-route="pages/index/index"] /* 推荐：橙底白字胶囊（图二「推荐」那枚） */ .mentor-reco { margin-left: calc(var(--rpx) * 10); padding: 0 calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 34); border-radius: calc(var(--rpx) * 999); color: #ffffff; background: #ff8a3d; flex-shrink: 0; } [data-route="pages/index/index"] /* 第二行：擅长 · 口吻（真人老师是「已点评 N 单 · 家长评分 X」） */ .mentor-sub { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/index/index"] /* 第三行起：简介，最多两行（图二是两行后截断） */ .mentor-bio-line { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); line-height: 1.55; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } [data-route="pages/index/index"] /* 空态落在灰底上：给张白卡（wxml 里 class 仍只写 .empty，别包成两层卡） */ .board-sec > .empty { background: #ffffff; border-radius: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 56) 0; margin-bottom: calc(var(--rpx) * 18); } [data-route="pages/index/index"] .board-coach-note { padding: calc(var(--rpx) * 6) calc(var(--rpx) * 8) calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #8a6320; } [data-route="pages/index/index"] /* ---------- 战力值：白块黑数字绿进度条 ---------- */ .power-card { display: flex; align-items: center; margin: calc(var(--rpx) * 16) 0; padding: calc(var(--rpx) * 28) calc(var(--rpx) * 32); background: #ffffff; border-radius: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .power-left { min-width: calc(var(--rpx) * 180); } [data-route="pages/index/index"] .power-cap { font-size: calc(var(--rpx) * 24); color: #888888; letter-spacing: calc(var(--rpx) * 2); } [data-route="pages/index/index"] .power-num { font-size: calc(var(--rpx) * 60); font-weight: 600; color: #191919; line-height: 1.15; } [data-route="pages/index/index"] .power-right { flex: 1; padding-left: calc(var(--rpx) * 20); } [data-route="pages/index/index"] .power-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/index/index"] .power-bar { height: calc(var(--rpx) * 12); background: #f2f2f2; border-radius: calc(var(--rpx) * 999); margin: calc(var(--rpx) * 14) 0 calc(var(--rpx) * 10); overflow: hidden; } [data-route="pages/index/index"] .power-bar-in { height: 100%; background: #07c160; border-radius: calc(var(--rpx) * 999); } [data-route="pages/index/index"] .power-delta { font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/index/index"] .power-delta.flat { color: #b2b2b2; } [data-route="pages/index/index"] .power-go { color: #c8c8cd; font-size: calc(var(--rpx) * 40); font-weight: 300; line-height: 1; } [data-route="pages/index/index"] /* 每日结算弹层：白卡片（微信弹窗就是白底圆角） */ .power-pop { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; } [data-route="pages/index/index"] .power-pop-box { width: calc(var(--rpx) * 480); padding: calc(var(--rpx) * 48) calc(var(--rpx) * 30) calc(var(--rpx) * 40); text-align: center; background: #ffffff; border-radius: calc(var(--rpx) * 16); animation: powerPopIn 220ms ease-out; } [data-route="pages/index/index"] .power-pop-cap { font-size: calc(var(--rpx) * 28); color: #888888; letter-spacing: calc(var(--rpx) * 4); } [data-route="pages/index/index"] .power-pop-num { font-size: calc(var(--rpx) * 88); font-weight: 600; color: #07c160; line-height: 1.2; } [data-route="pages/index/index"] .power-pop-sub { font-size: calc(var(--rpx) * 24); color: #888888; } @keyframes powerPopIn { from { transform: scale(0.86); opacity: 0; } to { transform: scale(1); opacity: 1; } } [data-route="pages/index/index"] /* 分享名片画布（#shareCanvas）：只在后台画转发图用，绝不参与排版。 ⚠️ v4.69.2 在「我的」页用过 left:-9999px，iOS 会把整页撑出横向滚动； 与 detail/mine 同款：钉在左上角缩到 1px + 全透明 + 不接事件。 */ .share-canvas { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1; } [data-route="pages/index/index"] /* v4.74.20：猫咪乐园入口卡绿底，视觉突出 */ .game-entry-green { background: #e9f8ef; border: calc(var(--rpx) * 1) solid rgba(7, 193, 96, 0.22); } [data-route="pages/index/index"] .game-entry-green .game-entry-cat-img { background: #ffffff; border-radius: 50%; } [data-route="pages/index/index"] /* v4.86.259：「老师点评好了」提示条撤下（.review-tip/.review-count 样式随絆）—— 未读提醒改挂打卡主卡的按钮角标（见 .checkin-badge）。 */ /* v4.86.119（提审驳回第 2 条）：未登录时的**轻提示**，不再是一张拦人的登录卡。 * v4.86.415（木哥 16:3x：「登录卡片和下边的找到组织卡片粘在一起了」）： * 全站卡片靠 .card 的 margin-bottom 排间距，这张卡当初只写了 margin-top —— * 未登录时战力卡不显示（它自带 margin: calc(var(--rpx) * 16) 0），登录卡下面紧贴「找到自己的组织」， * 两张白卡之间 0 间距，看着就是一块。补上 margin-bottom，与全站 calc(var(--rpx) * 16) 节奏一致。 */ .guest-tip { margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 16); padding: calc(var(--rpx) * 24); background: #ffffff; border-radius: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .guest-tip-t { font-size: calc(var(--rpx) * 24); color: #666666; line-height: 1.6; } [data-route="pages/index/index"] /* v4.86.415：登录失败的原因就贴在按钮上方（原来只落在页尾 .err，点完没反馈） */ .guest-tip-err { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); line-height: 1.6; color: #fa5151; } [data-route="pages/index/index"] .guest-tip-btn { margin-top: calc(var(--rpx) * 20); } [data-route="pages/index/index"] /* ---------------- v4.86.230（木哥令）老师身份的「点评」tab ---------------- 打卡主卡（.checkin-card / .checkin-stats / .stat）整块复用 —— 两种身份下 「一颗主键 + 一排数值」是同一件事，样式不该另起一套。下面只补老师这边 独有的三条：名片小字、待点评单一行、行右侧的箭头。 */ .m-line { margin-top: calc(var(--rpx) * 20); text-align: center; font-size: calc(var(--rpx) * 24); } [data-route="pages/index/index"] .m-task { display: flex; align-items: center; padding: calc(var(--rpx) * 20) 0; border-top: calc(var(--rpx) * 1) solid #f0f0f0; } [data-route="pages/index/index"] .m-task-main { flex: 1; min-width: 0; } [data-route="pages/index/index"] .m-task-name { font-size: calc(var(--rpx) * 32); color: #333333; } [data-route="pages/index/index"] .m-task-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); } [data-route="pages/index/index"] .m-task-go { margin-left: calc(var(--rpx) * 16); color: #bbbbbb; font-size: calc(var(--rpx) * 40); line-height: 1; } [data-route="pages/index/index"] /* ---------------- 学员作业广场（v4.86.254 木哥令） ---------------- */ .plaza-item { display: flex; align-items: center; padding: calc(var(--rpx) * 20) 0; border-bottom: calc(var(--rpx) * 1) solid #f0f0f0; } [data-route="pages/index/index"] /* v4.86.270：广场学员档案化 —— 头像 + 数据行 + 精确到秒的提交时间 */ .plaza-ava { flex-shrink: 0; width: calc(var(--rpx) * 76); height: calc(var(--rpx) * 76); margin-right: calc(var(--rpx) * 18); border-radius: 50%; overflow: hidden; background: #eef7ee; } [data-route="pages/index/index"] .plaza-ava-img { width: calc(var(--rpx) * 76); height: calc(var(--rpx) * 76); } [data-route="pages/index/index"] .plaza-ava-txt { text-align: center; line-height: calc(var(--rpx) * 76); font-size: calc(var(--rpx) * 32); color: #0a7a3d; } [data-route="pages/index/index"] .plaza-no { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #9ec9ae; } [data-route="pages/index/index"] .plaza-stats { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #4c8f68; } [data-route="pages/index/index"] .plaza-at { margin-top: calc(var(--rpx) * 2); font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/index/index"] .plaza-item:last-child { border-bottom: none; } [data-route="pages/index/index"] .plaza-main { flex: 1; min-width: 0; } [data-route="pages/index/index"] .plaza-name { font-size: calc(var(--rpx) * 32); color: #333333; } [data-route="pages/index/index"] .plaza-date { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/index/index"] .plaza-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/index/index"] .plaza-tag { display: inline-block; margin-top: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 8); background: #eef7ee; color: #3a9e3a; font-size: calc(var(--rpx) * 20); } [data-route="pages/index/index"] .plaza-btn { margin: 0 0 0 calc(var(--rpx) * 16); padding: 0 calc(var(--rpx) * 24); height: calc(var(--rpx) * 60); line-height: calc(var(--rpx) * 60); border-radius: calc(var(--rpx) * 10); background: #2f9e44; color: #ffffff; font-size: calc(var(--rpx) * 24); } [data-route="pages/index/index"] .plaza-btn-off { background: #cccccc; color: #ffffff; } [data-route="pages/index/index"] .plaza-empty { padding: calc(var(--rpx) * 20) 0; } [data-route="pages/index/index"] .plaza-more { padding: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 4); text-align: center; color: #2f9e44; font-size: calc(var(--rpx) * 28); } [data-route="pages/index/index"] /* v4.86.267：老师点评分享 · 记忆跳转提示条 + 班级点评入口 */ .hw-tip { display: flex; align-items: center; margin: calc(var(--rpx) * 16) calc(var(--rpx) * 24) 0; padding: calc(var(--rpx) * 22) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); background: #e9f8ef; border: calc(var(--rpx) * 2) solid #c9ecd7; } [data-route="pages/index/index"] .hw-tip-main { flex: 1; min-width: 0; } [data-route="pages/index/index"] .hw-tip-t { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #0a7a3d; } [data-route="pages/index/index"] .hw-tip-s { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #4c8f68; } [data-route="pages/index/index"] .hw-tip-x { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); padding: 0 calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 32); color: #9ec9ae; } [data-route="pages/index/index"] /* v4.86.436（木哥令：「班级点评的新标志也不醒目」）—— 原来是米白底 #fdf1e3 + 棕字 #a8641a，跟标题的深灰并排几乎看不出有个标。 改成实心暖橙 + 白字 + 加粗，与本轮「查字推荐」标同一支色（全站唯一暖橙）， 两个「新/推荐」一眼同源；字号仍 calc(var(--rpx) * 20)（A 层五档），靠配色与字重提亮。 */ .class-entry-new { margin-left: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 999); background: #ff6a00; box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 8) rgba(255, 106, 0, 0.3); font-size: calc(var(--rpx) * 20); font-weight: 600; color: #ffffff; letter-spacing: calc(var(--rpx) * 1); } [data-route="pages/index/index"] .class-entry-sub { margin-top: calc(var(--rpx) * 8); line-height: 1.6; } [data-route="pages/index/index"] /* v4.86.351：查字搜索框已收口到 components/char-search（页头共用），本页样式随旧卡退场 */ .class-entry-attr { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); font-weight: 400; color: #4c8f68; } [data-route="pages/index/index"] .class-entry-btn { margin-top: calc(var(--rpx) * 18); padding: calc(var(--rpx) * 16) 0; border-radius: calc(var(--rpx) * 10); background: #e9f8ef; text-align: center; font-size: calc(var(--rpx) * 28); font-weight: 500; color: #0a7a3d; } [data-route="pages/index/index"] /* v4.86.288（木哥令）：找到自己的组织 —— 输班级码直接加入班级。 字号只走 20/24/28 档，圆角 999/10，绿色沿用本页那支 #0a7a3d/#07c160。 */ .cls-join-head { display: flex; align-items: center; gap: calc(var(--rpx) * 12); } [data-route="pages/index/index"] .cls-join-face { width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); border-radius: 50%; background: #e9f8ef; text-align: center; line-height: calc(var(--rpx) * 44); font-size: calc(var(--rpx) * 28); color: #07c160; } [data-route="pages/index/index"] .cls-join-row { display: flex; align-items: center; gap: calc(var(--rpx) * 14); margin-top: calc(var(--rpx) * 18); padding: calc(var(--rpx) * 10) calc(var(--rpx) * 10) calc(var(--rpx) * 10) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 999); background: #f2f9f4; } [data-route="pages/index/index"] .cls-join-input { flex: 1; font-size: calc(var(--rpx) * 28); color: #233c2e; } [data-route="pages/index/index"] .cls-join-ph { color: #9ec9ae; } [data-route="pages/index/index"] .cls-join-btn { flex-shrink: 0; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 30); border-radius: calc(var(--rpx) * 999); background: #07c160; text-align: center; font-size: calc(var(--rpx) * 24); font-weight: 500; color: #ffffff; } [data-route="pages/index/index"] .cls-join-btn-hover { opacity: 0.85; } [data-route="pages/index/index"] .cls-join-btn-busy { opacity: 0.6; } [data-route="pages/index/index"] .cls-join-tip { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/index/index"] /* ---------- 语音陪伴（v7.0.151：原语音陪练卡整组退役，缩成页头胶囊键） ---------- 页头这枚与原积分键同构（绿底细绿边圆角），名字 + 左右开关 */ .app-header-voice { margin-left: auto; display: flex; align-items: center; gap: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 8) calc(var(--rpx) * 2) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 999); background: rgba(7, 193, 96, 0.08); border: calc(var(--rpx) * 1) solid rgba(7, 193, 96, 0.18); } [data-route="pages/index/index"] .app-header-voice-t { font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/index/index"] .app-header-voice-sw { transform: scale(0.7); } [data-route="pages/index/index"] /* v7.0.151（木哥令「大按键，绿圈绿字风格」）：新手一键直达训练营 —— 白底绿描边大胶囊键、绿字，摆原语音陪练卡的位置 */ .newbie-btn { margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 26) calc(var(--rpx) * 24); text-align: center; font-size: calc(var(--rpx) * 32); font-weight: 600; color: #07c160; background: #ffffff; border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 999); } [data-route="pages/index/index"] .newbie-btn-hover { opacity: 0.85; } [data-route="pages/index/index"] /* v4.86.573：538 的 .boot 垫层样式随节点一起撤（它就是用户看到的闪屏）。 */ /* v7.0.071（木哥令）：「老师工具」升级成胶囊键 —— 结构抄页头积分键（浅底 + 细边 + calc(var(--rpx) * 999) 圆角），颜色换成「新」徽章那支全站唯一暖橙，键与标同色同源。 */ .class-entry-tool { padding: calc(var(--rpx) * 6) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 999); background: rgba(255, 106, 0, 0.08); border: calc(var(--rpx) * 1) solid rgba(255, 106, 0, 0.18); font-size: calc(var(--rpx) * 24); color: #ff6a00; } [data-route="pages/index/index"] /* v7.0.199（木哥令「有作业未提交，新手键下边直接出来完整的未提交作业的卡片」）： 卡面与作业页（pkgOps/hwhome）同一张脸 —— 标题/布置日/状态章/最迟提交时间/ 提交作业主键 + 免费口径行，色板一致（微信绿/橙/红） */ .hw-todo-block { margin-top: calc(var(--rpx) * 20); } [data-route="pages/index/index"] .hw-todo-card { background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 28); margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/index/index"] .hw-todo-head { display: flex; justify-content: space-between; align-items: flex-start; } [data-route="pages/index/index"] .hw-todo-tt { flex: 1; min-width: 0; } [data-route="pages/index/index"] .hw-todo-t1 { display: block; font-size: calc(var(--rpx) * 32); font-weight: 600; color: rgba(0, 0, 0, 0.9); line-height: 1.4; } [data-route="pages/index/index"] .hw-todo-t2 { display: block; font-size: calc(var(--rpx) * 24); color: #b2b2b2; margin-top: calc(var(--rpx) * 8); } [data-route="pages/index/index"] .hw-todo-st { font-size: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 8); flex-shrink: 0; margin-left: calc(var(--rpx) * 16); } [data-route="pages/index/index"] .hw-todo-st.n { background: #fff7f0; color: #fa9d3b; } [data-route="pages/index/index"] .hw-todo-st.s { background: #f0f9eb; color: #07c160; } [data-route="pages/index/index"] .hw-todo-meta { display: flex; flex-wrap: wrap; gap: calc(var(--rpx) * 8) calc(var(--rpx) * 24); margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #fa5151; } [data-route="pages/index/index"] .hw-todo-none { font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/index/index"] .hw-todo-btn { background: #07c160; color: #ffffff; font-weight: 500; font-size: calc(var(--rpx) * 28); padding: calc(var(--rpx) * 22) 0; margin-top: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 10); line-height: 1.4; } [data-route="pages/index/index"] .hw-todo-btn::after { border: none; } [data-route="pages/index/index"] .hw-todo-btn-hover { background: #06ad56; } [data-route="pages/index/index"] .hw-todo-free { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); color: #b2b2b2; text-align: center; } /* ---- components/voice-bar/voice-bar.wxss ---- */ [data-comp="components/voice-bar/voice-bar"] /* 统一语音输入条 —— 微信绿系，跟全站一致 */ .vb { width: 100%; } [data-comp="components/voice-bar/voice-bar"] /* ============ 录音浮层（v4.86.81，照微信的页面效果） 按住期间全屏变暗 + 绿色气泡 + 动态波形，不再边说边出文字； 上划取消时气泡变灰、提示变红。fixed 盖满屏，组件里同样生效。 */ .vb-rec { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; } [data-comp="components/voice-bar/voice-bar"] .vb-rec-bubble { min-width: calc(var(--rpx) * 340); padding: calc(var(--rpx) * 40) calc(var(--rpx) * 60); background: #95ec69; border-radius: calc(var(--rpx) * 24); display: flex; align-items: center; justify-content: center; } [data-comp="components/voice-bar/voice-bar"] .vb-rec-no { background: #d8d8d8; } [data-comp="components/voice-bar/voice-bar"] .vb-rec-tail { width: 0; height: 0; border-left: calc(var(--rpx) * 18) solid transparent; border-right: calc(var(--rpx) * 18) solid transparent; border-top: calc(var(--rpx) * 22) solid #95ec69; } [data-comp="components/voice-bar/voice-bar"] .vb-rec-tail-no { border-top-color: #d8d8d8; } [data-comp="components/voice-bar/voice-bar"] .vb-wave { display: flex; align-items: center; height: calc(var(--rpx) * 100); } [data-comp="components/voice-bar/voice-bar"] .vb-wbar { width: calc(var(--rpx) * 12); height: calc(var(--rpx) * 32); margin: 0 calc(var(--rpx) * 8); border-radius: calc(var(--rpx) * 8); background: rgba(0, 0, 0, 0.5); animation: vbWave 0.9s ease-in-out infinite; } [data-comp="components/voice-bar/voice-bar"] .vb-rec-no .vb-wbar { background: rgba(0, 0, 0, 0.28); animation: none; } @keyframes vbWave { 0% { height: calc(var(--rpx) * 24); } 50% { height: calc(var(--rpx) * 88); } 100% { height: calc(var(--rpx) * 24); } } [data-comp="components/voice-bar/voice-bar"] .vb-rec-tip { margin-top: calc(var(--rpx) * 140); color: #ffffff; font-size: calc(var(--rpx) * 32); } [data-comp="components/voice-bar/voice-bar"] .vb-rec-tip-no { color: #ffb2b2; } [data-comp="components/voice-bar/voice-bar"] /* ============ 整条输入栏 ============ */ .vb-bar { display: flex; align-items: center; gap: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 20) calc(calc(var(--rpx) * 12) + env(safe-area-inset-bottom)); background: #f7f7f7; border-top: calc(var(--rpx) * 1) solid #e5e5e5; } [data-comp="components/voice-bar/voice-bar"] .vb-key { flex-shrink: 0; width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); line-height: calc(var(--rpx) * 64); text-align: center; font-size: calc(var(--rpx) * 40); border-radius: 50%; background: #ffffff; border: calc(var(--rpx) * 1) solid #e5e5e5; } [data-comp="components/voice-bar/voice-bar"] /* v4.86.538：按键里的图标改成微信那枚「圆圈里带声波」的语音键（木哥 20:1x 「输入框的麦克风图标，全站全部调整为微信中用的圆圈里面带声音的符号」）。 */ .vb-ico-voice { width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); margin: calc(var(--rpx) * 10) auto 0; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48Y2lyY2xlIGN4PSI0OCIgY3k9IjQ4IiByPSI0MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTkxOTE5IiBzdHJva2Utd2lkdGg9IjUiLz48Y2lyY2xlIGN4PSIzNyIgY3k9IjQ4IiByPSI1IiBmaWxsPSIjMTkxOTE5Ii8+PHBhdGggZD0iTTQ5IDM5YTEyIDEyIDAgMCAxIDAgMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE5MTkxOSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNNTcgMzBhMjQgMjQgMCAwIDEgMCAzNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTkxOTE5IiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg=="); } [data-comp="components/voice-bar/voice-bar"] /* 右边那个占位格：让「按住说话」居中，不偏左 */ .vb-key-ghost { background: transparent; border-color: transparent; } [data-comp="components/voice-bar/voice-bar"] .vb-mic { flex: 1; height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); text-align: center; border-radius: calc(var(--rpx) * 10); background: #ffffff; border: calc(var(--rpx) * 1) solid #e5e5e5; transition: background 0.12s ease, transform 0.12s ease; } [data-comp="components/voice-bar/voice-bar"] .vb-mic-t { font-size: calc(var(--rpx) * 28); color: #333333; font-weight: 500; } [data-comp="components/voice-bar/voice-bar"] /* v4.86.91：按住反馈「只加深一档」（微信本身不变绿）—— * 原来整块跳成微信绿 + 白字，和「按住 说话」那枚按键的规矩自相矛盾。 */ .vb-mic-on { background: #e3e3e3; border-color: #dcdcdc; transform: scale(0.98); } [data-comp="components/voice-bar/voice-bar"] .vb-mic-on .vb-mic-t { color: #191919; } [data-comp="components/voice-bar/voice-bar"] .vb-mic-off { background: #f2f2f2; border-color: #e5e5e5; } [data-comp="components/voice-bar/voice-bar"] .vb-mic-off .vb-mic-t { font-size: calc(var(--rpx) * 24); color: #b2b2b2; font-weight: 400; } [data-comp="components/voice-bar/voice-bar"] .vb-input { flex: 1; height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 20); box-sizing: border-box; background: #ffffff; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); color: #333333; } [data-comp="components/voice-bar/voice-bar"] .vb-ph { color: #b2b2b2; font-size: calc(var(--rpx) * 28); } [data-comp="components/voice-bar/voice-bar"] .vb-send { flex-shrink: 0; padding: 0 calc(var(--rpx) * 26); height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); border-radius: calc(var(--rpx) * 10); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 28); } [data-comp="components/voice-bar/voice-bar"] .vb-send-off { background: #a6e0be; } [data-comp="components/voice-bar/voice-bar"] /* ============ 小麦克风按钮（挂到别的输入框旁） ============ */ /* v4.86.88（木哥 23:3x 第 2 条「严格按照微信生态的按键、空间布局设计来做」）： 按住说话 = 微信那颗「按住 说话」—— 浅灰底、全圆胶囊、正文黑字； 按住时只加深一档（微信本身不变色，录音浮层已经在给反馈）。 */ .vb-btn { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 999); background: #f7f7f7; border: calc(var(--rpx) * 1) solid #ececec; } [data-comp="components/voice-bar/voice-bar"] .vb-btn-t { font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 400; } [data-comp="components/voice-bar/voice-bar"] /* v4.86.86（木哥 22:5x 第 5 条）：大号变体 + 撑满一行 —— 长按类按钮得够好按、够显眼 */ .vb-btn-lg { height: calc(var(--rpx) * 80); padding: 0 calc(var(--rpx) * 32); } [data-comp="components/voice-bar/voice-bar"] .vb-btn-lg .vb-btn-t { font-size: calc(var(--rpx) * 32); } [data-comp="components/voice-bar/voice-bar"] .vb-block .vb-btn { width: 100%; } [data-comp="components/voice-bar/voice-bar"] .vb-block { width: 100%; } [data-comp="components/voice-bar/voice-bar"] .vb-btn-on { background: #e3e3e3; border-color: #dcdcdc; } [data-comp="components/voice-bar/voice-bar"] .vb-btn-on .vb-btn-t { color: #191919; } [data-comp="components/voice-bar/voice-bar"] .vb-btn-off { background: #f2f2f2; border-color: #e5e5e5; } [data-comp="components/voice-bar/voice-bar"] .vb-btn-off .vb-btn-t { color: #b2b2b2; } [data-comp="components/voice-bar/voice-bar"] /* v4.86.119 提审驳回第 1 条 → v4.86.128 木哥 16:0x：声纹协议改成页面上圈选同意（原来是弹层） 圈子点一下 = 同意，《声纹授权协议》点一下 = 看全文。未勾时按住说话不录音，只闪一下。 字号只走 A 层五档（20/24/28/32/calc(var(--rpx) * 40)）。 */ .vb-agree { display: flex; align-items: center; padding: calc(var(--rpx) * 8) calc(var(--rpx) * 4) calc(var(--rpx) * 10); } [data-comp="components/voice-bar/voice-bar"] .vb-agree-dot { width: calc(var(--rpx) * 32); height: calc(var(--rpx) * 32); border: calc(var(--rpx) * 2) solid #c8c9cc; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; margin-right: calc(var(--rpx) * 10); flex-shrink: 0; } [data-comp="components/voice-bar/voice-bar"] .vb-agree-dot-on { border-color: #07c160; background: #07c160; } [data-comp="components/voice-bar/voice-bar"] .vb-agree-tick { font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 20); color: #ffffff; } [data-comp="components/voice-bar/voice-bar"] .vb-agree-tx { font-size: calc(var(--rpx) * 24); color: #333333; } [data-comp="components/voice-bar/voice-bar"] .vb-agree-lk { font-size: calc(var(--rpx) * 24); color: #576b95; } [data-comp="components/voice-bar/voice-bar"] /* 已同意：整行退到背景里，只留一个能点开的入口 */ .vb-agree-on .vb-agree-tx { font-size: calc(var(--rpx) * 20); color: #999999; } [data-comp="components/voice-bar/voice-bar"] .vb-agree-on .vb-agree-lk { font-size: calc(var(--rpx) * 20); color: #999999; } [data-comp="components/voice-bar/voice-bar"] /* 没勾就按录音：这一行闪两下（把人指到圈子上去） */ .vb-agree-flash { animation: vb-agree-blink 0.4s ease-in-out 2; } @keyframes vb-agree-blink { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } } [data-comp="components/voice-bar/voice-bar"] /* v4.86.136（木哥 18:0x）：btn 变体的圈选行**并进按键那一行、落在按键右边** —— 原来在按键下边、还带「我已阅读并同意」六个字，一行挤不下就折成「已同 意」 「《声纹授权协 议》」（圈画批注页录像实锤）。现在一行到底、只留圈 + 《》。 */ .vb-btn-row { display: flex; align-items: center; flex-wrap: nowrap; } [data-comp="components/voice-bar/voice-bar"] /* 按键自己不许被挤扁（四个字是页面给的下限） */ .vb-btn-row .vb-btn { flex-shrink: 0; } [data-comp="components/voice-bar/voice-bar"] .vb-agree-after { margin-left: calc(var(--rpx) * 18); padding: 0; flex-shrink: 0; } [data-comp="components/voice-bar/voice-bar"] /* 这一行只剩圈子可点 ⇒ 热区给足（手指没那么准） */ .vb-agree-after .vb-agree-dot { width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); margin-right: calc(var(--rpx) * 8); } [data-comp="components/voice-bar/voice-bar"] .vb-agree-after .vb-agree-tick { font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 24); } [data-comp="components/voice-bar/voice-bar"] /* 已同意也不再缩小字号（原来掉到 calc(var(--rpx) * 20)，一行里看着像掉了半截） */ .vb-agree-after .vb-agree-lk, [data-comp="components/voice-bar/voice-bar"] .vb-agree-on.vb-agree-after .vb-agree-lk { font-size: calc(var(--rpx) * 24); } /* ---- components/loading-bar/loading-bar.wxss ---- */ [data-comp="components/loading-bar/loading-bar"] /* v4.86.140 通用加载条 —— 全站唯一加载指示器（木哥 19:0x） v4.86.297（木哥令）：改成「进度条 + 主人身份等级对应的墨灵猫在条上走」。 颜色口径：轨道 #ececec（浅灰底）/ 进度 #07c160（品牌绿，与主按钮同色） 条与猫同一条时长、同一条曲线 ⇒ 猫永远踩在进度头上，不闪跳。 字号只用 calc(var(--rpx) * 24)（A 层 5 档内）；不出现任何红字。 */ .lb { display: flex; flex-direction: column; align-items: center; padding: calc(var(--rpx) * 24) 0; } [data-comp="components/loading-bar/loading-bar"] .lb-block { padding: calc(var(--rpx) * 48) 0; } [data-comp="components/loading-bar/loading-bar"] /* 轨道：猫要蹲在条上，所以不能 overflow:hidden（否则猫被裁掉半个身子） */ .lb-track { position: relative; width: calc(var(--rpx) * 320); height: calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 8); background: #ececec; } [data-comp="components/loading-bar/loading-bar"] .lb-fill { width: 0; height: 100%; border-radius: calc(var(--rpx) * 8); background: #07c160; animation: lb-walk 1.6s linear infinite; } [data-comp="components/loading-bar/loading-bar"] /* 迷你版：塞进 calc(var(--rpx) * 160) 缩略图方块里（作品图加载占位） */ .lb-mini { padding: 0; } [data-comp="components/loading-bar/loading-bar"] .lb-mini .lb-track { width: calc(var(--rpx) * 120); height: calc(var(--rpx) * 8); } [data-comp="components/loading-bar/loading-bar"] .lb-mini .lb-cat { width: calc(var(--rpx) * 28); height: calc(var(--rpx) * 28); margin-left: calc(var(--rpx) * -14); bottom: calc(var(--rpx) * 6); } [data-comp="components/loading-bar/loading-bar"] /* 真实进度模式：条停在 pct 处（wxml 里内联 width），猫同步走过去 */ .lb-fill-real { animation: none; transition: width 0.3s linear; } [data-comp="components/loading-bar/loading-bar"] /* 猫：width calc(var(--rpx) * 40) 宽高比交给 aspectFit；bottom 让它站在条上 */ .lb-cat { position: absolute; left: 0; bottom: calc(var(--rpx) * 8); width: calc(var(--rpx) * 40); height: calc(var(--rpx) * 40); margin-left: calc(var(--rpx) * -20); animation: lb-cat-walk 1.6s linear infinite; } [data-comp="components/loading-bar/loading-bar"] .lb-cat-real { animation: none; transition: left 0.3s linear; } [data-comp="components/loading-bar/loading-bar"] .lb-tx { margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #999999; } [data-comp="components/loading-bar/loading-bar"] /* 条 0→100% 与猫 0→100% 同刻同速：猫踩在进度头上 */ @keyframes lb-walk { 0% { width: 0; } 100% { width: 100%; } } @keyframes lb-cat-walk { 0% { left: 0; } 100% { left: 100%; } } [data-comp="components/loading-bar/loading-bar"] /* ---------------- v4.86.368（木哥 365 号令）：启动进度条（fixed） ---------------- 「每次进小程序，开始出现的空白页，不管时间多长，都要加一个进度条」。 页首通栏 calc(var(--rpx) * 6)：从第一帧起就钉在屏幕最上边（页面视口，navbar 之下）， 循环动画自己走 —— 加载 1 秒它走 1 秒，加载 10 秒它走 10 秒，绝不停在半路。 颜色口径照旧：轨道 #ececec、进度 #07c160、猫照旧在条上走（297 号令同一副脸）。 */ .lb-fixed { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; padding: 0; display: block; pointer-events: none; } [data-comp="components/loading-bar/loading-bar"] .lb-fixed .lb-track { width: 100%; height: calc(var(--rpx) * 6); border-radius: 0; background: #ececec; } [data-comp="components/loading-bar/loading-bar"] .lb-fixed .lb-fill { border-radius: 0; } [data-comp="components/loading-bar/loading-bar"] .lb-fixed .lb-cat { width: calc(var(--rpx) * 32); height: calc(var(--rpx) * 32); margin-left: calc(var(--rpx) * -16); bottom: calc(var(--rpx) * 4); } /* ---- components/cat-loading/cat-loading.wxss ---- */ [data-comp="components/cat-loading/cat-loading"] /* 猫走进度 · 全屏遮罩（v4.86.297 木哥令）—— 微信生态浅色：白卡 + 绿条 + 猫 条与猫同一时长同一曲线 ⇒ 猫踩在进度头上；字号只用 24/calc(var(--rpx) * 28)（A 层 5 档内）。 */ .cl-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 500; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; } [data-comp="components/cat-loading/cat-loading"] .cl-card { width: calc(var(--rpx) * 520); background: #ffffff; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 48) calc(var(--rpx) * 40) calc(var(--rpx) * 36); display: flex; flex-direction: column; align-items: center; } [data-comp="components/cat-loading/cat-loading"] .cl-track { position: relative; width: calc(var(--rpx) * 400); height: calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 8); background: #ececec; } [data-comp="components/cat-loading/cat-loading"] .cl-fill { width: 0; height: 100%; border-radius: calc(var(--rpx) * 8); background: #07c160; animation: cl-walk 1.6s linear infinite; } [data-comp="components/cat-loading/cat-loading"] .cl-cat { position: absolute; left: 0; bottom: calc(var(--rpx) * 8); width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); margin-left: calc(var(--rpx) * -22); animation: cl-cat-walk 1.6s linear infinite; } [data-comp="components/cat-loading/cat-loading"] .cl-tx { margin-top: calc(var(--rpx) * 28); font-size: calc(var(--rpx) * 24); color: #999999; text-align: center; } @keyframes cl-walk { 0% { width: 0; } 100% { width: 100%; } } @keyframes cl-cat-walk { 0% { left: 0; } 100% { left: 100%; } } /* ---- components/privacy-pop/privacy-pop.wxss ---- */ [data-comp="components/privacy-pop/privacy-pop"] /* v4.86.286 自定义隐私弹窗 —— 与全站弹窗风格一致（白圆角卡 + 品牌绿同意键） */ .pp-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 3000; display: flex; align-items: center; justify-content: center; } [data-comp="components/privacy-pop/privacy-pop"] .pp-box { width: calc(var(--rpx) * 580); background: #fff; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 40) calc(var(--rpx) * 36) calc(var(--rpx) * 32); box-sizing: border-box; } [data-comp="components/privacy-pop/privacy-pop"] .pp-title { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #111; text-align: center; margin-bottom: calc(var(--rpx) * 28); } [data-comp="components/privacy-pop/privacy-pop"] .pp-body { max-height: calc(var(--rpx) * 480); } [data-comp="components/privacy-pop/privacy-pop"] /* v4.86.374（370 号令）：一张卡里两段授权 —— 隐私那段打头，声纹那段跟后、 * 一条浅分隔线隔开（同一张卡，但两份协议各自看得清） */ .pp-sec { padding: calc(var(--rpx) * 4) 0; } [data-comp="components/privacy-pop/privacy-pop"] .pp-sec-voice { margin-top: calc(var(--rpx) * 20); padding-top: calc(var(--rpx) * 20); border-top: calc(var(--rpx) * 1) solid #ececec; } [data-comp="components/privacy-pop/privacy-pop"] .pp-sub { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #111; line-height: calc(var(--rpx) * 44); margin-bottom: calc(var(--rpx) * 6); } [data-comp="components/privacy-pop/privacy-pop"] .pp-text { font-size: calc(var(--rpx) * 28); line-height: calc(var(--rpx) * 48); color: #333; } [data-comp="components/privacy-pop/privacy-pop"] .pp-link { font-size: calc(var(--rpx) * 28); line-height: calc(var(--rpx) * 48); color: #0a7a3d; text-decoration: underline; } [data-comp="components/privacy-pop/privacy-pop"] .pp-btns { display: flex; margin-top: calc(var(--rpx) * 36); } [data-comp="components/privacy-pop/privacy-pop"] .pp-btn { flex: 1; margin: 0 calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 8) 0; line-height: 2.2; } [data-comp="components/privacy-pop/privacy-pop"] .pp-no { background: #f2f3f5; color: #333; } [data-comp="components/privacy-pop/privacy-pop"] .pp-yes { background: #07c160; color: #fff; } [data-comp="components/privacy-pop/privacy-pop"] .pp-btn::after { border: none; } /* ---- components/login-agree/login-agree.wxss ---- */ [data-comp="components/login-agree/login-agree"] /* 登录前确认卡（v4.86.466）—— 与全站底部卡同款：白底、上圆角、绿色主按钮。 木哥 11:4x「能不要就不要」：标题、副标题、小字说明、底部提示全没了， 只剩三行 + 一颗键 + 一行「暂不登录」，卡片因此矮了一截。 v4.86.475（木哥 17:47 截图）：三条协议**各自一行**、字再小一号，整张卡再紧凑 —— 行距/圈/按钮/「暂不登录」全面收 4~calc(var(--rpx) * 8)；正文 32 → calc(var(--rpx) * 24) 并 nowrap， 窄机上宁可打点点（ellipsis）也不折行（折行会让「保护指引」那一串断开）。 */ .la-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 3500; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; } [data-comp="components/login-agree/login-agree"] .la-card { width: 100%; box-sizing: border-box; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 32) calc(calc(var(--rpx) * 18) + env(safe-area-inset-bottom)); background: #ffffff; border-radius: calc(var(--rpx) * 10) calc(var(--rpx) * 10) 0 0; } [data-comp="components/login-agree/login-agree"] .la-row { display: flex; align-items: center; padding: calc(var(--rpx) * 10) 0; } [data-comp="components/login-agree/login-agree"] /* 圆圈：勾上是品牌绿实心 + 白勾 */ .la-box { flex: none; width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); margin-right: calc(var(--rpx) * 14); box-sizing: border-box; border: calc(var(--rpx) * 2) solid #c8c8c8; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; } [data-comp="components/login-agree/login-agree"] .la-box-on { border-color: #07c160; background: #07c160; } [data-comp="components/login-agree/login-agree"] .la-tick { font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 24); color: #ffffff; font-weight: 700; } [data-comp="components/login-agree/login-agree"] .la-line { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 36); color: #191919; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-comp="components/login-agree/login-agree"] .la-link { color: #0a7a3d; text-decoration: underline; } [data-comp="components/login-agree/login-agree"] .la-err { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #fa5151; text-align: center; } [data-comp="components/login-agree/login-agree"] .la-btn { margin-top: calc(var(--rpx) * 16); width: 100%; height: calc(var(--rpx) * 80); line-height: calc(var(--rpx) * 80); padding: 0; border: none; border-radius: calc(var(--rpx) * 10); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 28); font-weight: 600; } [data-comp="components/login-agree/login-agree"] .la-btn::after { border: none; } [data-comp="components/login-agree/login-agree"] .la-btn[disabled] { background: #d8d8d8; color: #ffffff; } [data-comp="components/login-agree/login-agree"] .la-later { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 36); color: #999999; text-align: center; } /* ---- components/gold-dialog/gold-dialog.wxss ---- */ [data-comp="components/gold-dialog/gold-dialog"] /* 金色弹窗 · v4.86.540（木哥 2026-10-26 定稿 · 框 B / C / E 共用一套壳） * 金三档：主键 #fbeecd→#cfa64f / 深金带 #6d4b10→#6a480e / 卡片底 #fffdf8→#f8eac6。 * 尺寸：弹窗宽 calc(var(--rpx) * 480)，深金带 calc(var(--rpx) * 72)，主键 calc(var(--rpx) * 82)。 * * 字号（v4.86.550 木哥令「所有金壳的弹框的文字，严格按照微信内弹窗的各级别标题的字号」）： * 微信弹窗是 17px 标题 + 14px 正文 + 17px 按键，本仓 A 层只有 20/24/28/32/40 五档， * 按 1px≈calc(var(--rpx) * 2) 取最近档 —— 17px→calc(var(--rpx) * 32)、14px→calc(var(--rpx) * 28)、12px→calc(var(--rpx) * 24)、10px→calc(var(--rpx) * 20)： * 深金带 / 主标题 / 主键 / 文字链次键 = calc(var(--rpx) * 32)（微信 17px 那一级） * 副题（正文说明）、权益清单每行 = calc(var(--rpx) * 28)（微信 14px 正文） * 金额条标签、单位、勾号 = calc(var(--rpx) * 24)（微信 12px 辅助） * 极细注（fine print） = calc(var(--rpx) * 20)（微信 10px 注脚） * 金额数字 = calc(var(--rpx) * 40)（收费面另有一档：价目要一眼看到） * 改字号前先对这张表，别在弹窗里自造 26 / 30 这种中间值（lint-style 会拦）。 */ .gd-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.52); z-index: 999; display: flex; align-items: center; justify-content: center; } [data-comp="components/gold-dialog/gold-dialog"] .gd-dlg { width: calc(var(--rpx) * 480); border-radius: calc(var(--rpx) * 30); overflow: hidden; background: linear-gradient(180deg, #fffdf8 0%, #fffaef 58%, #fdf4e2 100%); box-shadow: 0 calc(var(--rpx) * 36) calc(var(--rpx) * 100) rgba(80, 55, 10, 0.28), 0 0 0 calc(var(--rpx) * 1) rgba(214, 186, 124, 0.55); } [data-comp="components/gold-dialog/gold-dialog"] .gd-band { height: calc(var(--rpx) * 72); background: linear-gradient(135deg, #6d4b10, #8d6620 52%, #6a480e); color: #ffe9b8; font-size: calc(var(--rpx) * 32); font-weight: 700; letter-spacing: calc(var(--rpx) * 6); display: flex; align-items: center; justify-content: center; } [data-comp="components/gold-dialog/gold-dialog"] .gd-bd { padding: calc(var(--rpx) * 26) calc(var(--rpx) * 30) calc(var(--rpx) * 22); } [data-comp="components/gold-dialog/gold-dialog"] .gd-t { font-size: calc(var(--rpx) * 32); font-weight: 800; color: #4a3208; text-align: center; line-height: 1.45; letter-spacing: calc(var(--rpx) * 0.4); } [data-comp="components/gold-dialog/gold-dialog"] .gd-s { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); color: #a1834a; text-align: center; line-height: 1.6; /* v7.0.144：查字页那句「单买｜会员更合算」是两段（源串里带 \n\n）， 不写 pre-line 会被折成一整行，两条路的对比就糊在一起了 */ white-space: pre-line; } [data-comp="components/gold-dialog/gold-dialog"] /* 金额条（框 B 的魂：一眼看到扣多少、还剩多少） */ .gd-kv { margin-top: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #6d4b10, #8d6620 52%, #6a480e); box-shadow: inset 0 calc(var(--rpx) * 1) 0 rgba(255, 255, 255, 0.22), inset 0 0 0 calc(var(--rpx) * 1) rgba(255, 231, 176, 0.28), 0 calc(var(--rpx) * 8) calc(var(--rpx) * 28) rgba(140, 99, 20, 0.22); } [data-comp="components/gold-dialog/gold-dialog"] .gd-k { font-size: calc(var(--rpx) * 24); color: #e6cd97; letter-spacing: calc(var(--rpx) * 0.6); } [data-comp="components/gold-dialog/gold-dialog"] .gd-v { display: flex; align-items: baseline; } [data-comp="components/gold-dialog/gold-dialog"] .gd-num { font-size: calc(var(--rpx) * 40); font-weight: 800; color: #fff3d0; line-height: 1; text-shadow: 0 calc(var(--rpx) * 1) 0 rgba(80, 55, 10, 0.45); } [data-comp="components/gold-dialog/gold-dialog"] .gd-suf { font-size: calc(var(--rpx) * 24); font-weight: 600; color: #ffeec2; margin-left: calc(var(--rpx) * 4); } [data-comp="components/gold-dialog/gold-dialog"] .gd-kv-mute { background: linear-gradient(135deg, #fdf7e8, #f7ebcd); box-shadow: inset 0 0 0 calc(var(--rpx) * 1) #e8d5a6; } [data-comp="components/gold-dialog/gold-dialog"] .gd-kv-mute .gd-k { color: #96793c; } [data-comp="components/gold-dialog/gold-dialog"] .gd-kv-mute .gd-num { color: #8a6320; text-shadow: none; } [data-comp="components/gold-dialog/gold-dialog"] .gd-kv-mute .gd-suf { color: #5c4a1e; } [data-comp="components/gold-dialog/gold-dialog"] /* 权益 / 回执清单 */ .gd-items { margin-top: calc(var(--rpx) * 18); padding-top: calc(var(--rpx) * 16); border-top: calc(var(--rpx) * 1) solid #f0e3c4; } [data-comp="components/gold-dialog/gold-dialog"] .gd-item { display: flex; align-items: flex-start; line-height: 1.85; } [data-comp="components/gold-dialog/gold-dialog"] .gd-ck { font-size: calc(var(--rpx) * 24); color: #c79733; width: calc(var(--rpx) * 24); flex: 0 0 calc(var(--rpx) * 24); } [data-comp="components/gold-dialog/gold-dialog"] .gd-it { font-size: calc(var(--rpx) * 28); color: #4a3a17; flex: 1; } [data-comp="components/gold-dialog/gold-dialog"] .gd-fine { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 20); color: #a2937a; text-align: center; line-height: 1.5; } [data-comp="components/gold-dialog/gold-dialog"] /* 键区：一颗金主键 + 一条文字链次键 */ .gd-acts { display: flex; align-items: center; padding: 0 calc(var(--rpx) * 30) calc(var(--rpx) * 26); } [data-comp="components/gold-dialog/gold-dialog"] .gd-ghost { /* calc(var(--rpx) * 32) 的 4 字取消失键（「退出邀请」）要放得下：calc(var(--rpx) * 164) 才不挤 */ width: calc(var(--rpx) * 164); height: calc(var(--rpx) * 82); border-radius: calc(var(--rpx) * 10); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 32); color: #8a7340; background: rgba(201, 151, 51, 0.1); margin-right: calc(var(--rpx) * 14); } [data-comp="components/gold-dialog/gold-dialog"] .gd-ok { flex: 1; height: calc(var(--rpx) * 82); border-radius: calc(var(--rpx) * 10); background: linear-gradient(180deg, #fbeecd 0%, #eed79f 46%, #dcb96a 78%, #cfa64f 100%); color: #6b4a12; font-size: calc(var(--rpx) * 32); font-weight: 700; letter-spacing: calc(var(--rpx) * 0.4); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 calc(var(--rpx) * 1) 0 rgba(255, 255, 255, 0.8), inset 0 0 0 calc(var(--rpx) * 1) rgba(255, 255, 255, 0.5), 0 calc(var(--rpx) * 8) calc(var(--rpx) * 24) rgba(150, 105, 25, 0.2); } [data-comp="components/gold-dialog/gold-dialog"] .gd-ok-danger { background: linear-gradient(180deg, #ef6a52, #d3442c); color: #ffffff; box-shadow: inset 0 calc(var(--rpx) * 1) 0 rgba(255, 255, 255, 0.35), 0 calc(var(--rpx) * 8) calc(var(--rpx) * 24) rgba(200, 60, 40, 0.24); } [data-comp="components/gold-dialog/gold-dialog"] .gd-acts-one .gd-ok { width: 100%; } [data-comp="components/gold-dialog/gold-dialog"] /* v7.0.144：有第三条路（文字链）时键区收一点底距，给文字链让位，不把框撑高 */ .gd-acts-link { padding-bottom: calc(var(--rpx) * 18); } [data-comp="components/gold-dialog/gold-dialog"] .gd-link { padding: 0 calc(var(--rpx) * 30) calc(var(--rpx) * 26); text-align: center; font-size: calc(var(--rpx) * 28); color: #8a7340; } [data-comp="components/gold-dialog/gold-dialog"] .gd-hover { opacity: 0.9; } /* ---- components/char-search/char-search.wxss ---- */ [data-comp="components/char-search/char-search"] /* v4.86.351（木哥 350 号令）：查字搜索框 —— 页头 logo 下边一条卡 样式沿用 v4.86.289 的查字卡：淡绿底胶囊 + 「字/典」轮播图标 + 查写法键 */ .cs-card { margin-top: calc(var(--rpx) * 16); /* v4.86.353（木哥 352 号令）：与下方卡片留出距离 —— 全局 .card 只有 margin-bottom 没有 margin-top，本卡不给自己下边距就会和下一张贴死 */ margin-bottom: calc(var(--rpx) * 16); background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); box-sizing: border-box; } [data-comp="components/char-search/char-search"] .cs-row { display: flex; align-items: center; gap: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 14) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 999); background: #f2f9f4; } [data-comp="components/char-search/char-search"] .cs-ico { position: relative; flex-shrink: 0; width: calc(var(--rpx) * 52); height: calc(var(--rpx) * 52); border-radius: 50%; background: #0a7a3d; color: #ffffff; overflow: hidden; } [data-comp="components/char-search/char-search"] .cs-ico-a, [data-comp="components/char-search/char-search"] .cs-ico-b { position: absolute; left: 0; top: 0; width: calc(var(--rpx) * 52); height: calc(var(--rpx) * 52); text-align: center; line-height: calc(var(--rpx) * 52); font-size: calc(var(--rpx) * 24); } [data-comp="components/char-search/char-search"] .cs-ico-a { animation: cs-dict-a 2.6s steps(1, end) infinite; } [data-comp="components/char-search/char-search"] .cs-ico-b { animation: cs-dict-b 2.6s steps(1, end) infinite; } @keyframes cs-dict-a { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes cs-dict-b { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } [data-comp="components/char-search/char-search"] .cs-input { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 28); color: #191919; } [data-comp="components/char-search/char-search"] .cs-ph { color: #9a9a9a; font-size: calc(var(--rpx) * 28); } [data-comp="components/char-search/char-search"] .cs-go { flex-shrink: 0; padding: calc(var(--rpx) * 8) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 999); background: #ffffff; font-size: calc(var(--rpx) * 24); color: #0a7a3d; } [data-comp="components/char-search/char-search"] .cs-go-hover { background: #e8f5ec; } /* ---- components/hello-profile/hello-profile.wxss ---- */ [data-comp="components/hello-profile/hello-profile"] .hp-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; /* v4.86.569：对齐登录确认卡（3500）—— 那颗键在木哥真机上点得通， 把层级这个变量也消掉 */ z-index: 3500; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; } [data-comp="components/hello-profile/hello-profile"] .hp-card { width: 100%; box-sizing: border-box; padding: calc(var(--rpx) * 40) calc(var(--rpx) * 40) calc(calc(var(--rpx) * 32) + env(safe-area-inset-bottom)); background: #ffffff; border-radius: calc(var(--rpx) * 20) calc(var(--rpx) * 20) 0 0; } [data-comp="components/hello-profile/hello-profile"] .hp-title { font-size: calc(var(--rpx) * 40); font-weight: 600; color: #191919; text-align: center; } [data-comp="components/hello-profile/hello-profile"] /* v4.86.574：一步一提示行（头像好了 → 点键盘上的「用微信昵称」） */ .hp-sub { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); color: #07c160; text-align: center; } [data-comp="components/hello-profile/hello-profile"] /* 主按钮：整张卡最显眼的东西，占满宽度、够高，手指放上去就是它 */ .hp-one { margin-top: calc(var(--rpx) * 32); width: 100%; height: calc(var(--rpx) * 104); line-height: calc(var(--rpx) * 104); padding: 0; border: none; border-radius: calc(var(--rpx) * 12); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 32); font-weight: 600; } [data-comp="components/hello-profile/hello-profile"] .hp-one::after { border: none; } [data-comp="components/hello-profile/hello-profile"] /* 昵称步：type=nickname 的输入框穿主按钮同一身衣服（居中、绿底白字）， 点它弹键盘，键盘上方就是微信那颗「使用微信昵称」 */ .hp-nick-btn { text-align: center; } [data-comp="components/hello-profile/hello-profile"] .hp-ph-btn { color: rgba(255, 255, 255, 0.85); font-weight: 600; } [data-comp="components/hello-profile/hello-profile"] .hp-ph { color: rgba(255, 255, 255, 0.85); } [data-comp="components/hello-profile/hello-profile"] /* 授权协议行：小圈圈打勾，圈在左、文案在右 */ .hp-agree { margin-top: calc(var(--rpx) * 28); display: flex; align-items: center; justify-content: center; gap: calc(var(--rpx) * 12); } [data-comp="components/hello-profile/hello-profile"] .hp-check { width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); border: calc(var(--rpx) * 3) solid #c8c8c8; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: none; background: #ffffff; } [data-comp="components/hello-profile/hello-profile"] .hp-check-on { border-color: #07c160; background: #07c160; } [data-comp="components/hello-profile/hello-profile"] .hp-check-mark { width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 9); border-left: calc(var(--rpx) * 4) solid #ffffff; border-bottom: calc(var(--rpx) * 4) solid #ffffff; transform: rotate(-45deg) translate(calc(var(--rpx) * 1), calc(var(--rpx) * -2)); } [data-comp="components/hello-profile/hello-profile"] .hp-agree-t { font-size: calc(var(--rpx) * 24); color: #888888; } [data-comp="components/hello-profile/hello-profile"] .hp-link { color: #576b95; } [data-comp="components/hello-profile/hello-profile"] .hp-err { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #fa5151; text-align: center; } [data-comp="components/hello-profile/hello-profile"] /* v4.86.569：面板装死后的相册退路行（点击可开相册） */ .hp-deadlink { margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #fa5151; text-align: center; text-decoration: underline; } [data-comp="components/hello-profile/hello-profile"] .hp-later { margin-top: calc(var(--rpx) * 26); font-size: calc(var(--rpx) * 28); color: #999999; text-align: center; } /* ---- pages/checkin/checkin.wxss ---- */ [data-route="pages/checkin/checkin"] /* v4.86.163：占位框照着范纸的 A4 竖幅比例（1:1.414）竖着放，居中、约占三分之一屏，不再满宽 v4.86.383（379 号令 · 木哥）：一屏要塞下底下全部按键（按住说话 / 声纹授权 / 提交打卡）—— 作业框从 340×480 收到 300×400（仍保留竖幅、点开可放大，缩略图够看），省下 calc(var(--rpx) * 80) 高度 */ .shot { width: calc(var(--rpx) * 300); height: calc(var(--rpx) * 400); margin: 0 auto; border-radius: calc(var(--rpx) * 16); background: #f7f7f7; border: calc(var(--rpx) * 1) solid #f2f2f2; display: flex; align-items: center; justify-content: center; overflow: hidden; } [data-route="pages/checkin/checkin"] .shot-img { width: 100%; height: 100%; } [data-route="pages/checkin/checkin"] /* v4.86.165：选图先验证 —— 作业框里的进度条 */ .shot-verify { width: 100%; padding: 0 calc(var(--rpx) * 30); box-sizing: border-box; text-align: center; } [data-route="pages/checkin/checkin"] .shot-verify-t { font-size: calc(var(--rpx) * 28); color: #1f2937; font-weight: 700; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/checkin/checkin"] .shot-bar { width: 100%; height: calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 8); background: #e8e8e8; overflow: hidden; } [data-route="pages/checkin/checkin"] .shot-bar-in { height: 100%; border-radius: calc(var(--rpx) * 8); background: #07c160; transition: width 0.25s ease; } [data-route="pages/checkin/checkin"] .shot-verify-s { margin-top: calc(var(--rpx) * 18); font-size: calc(var(--rpx) * 24); color: #9aa0a6; } [data-route="pages/checkin/checkin"] .shot-empty { text-align: center; } [data-route="pages/checkin/checkin"] .shot-plus { font-size: calc(var(--rpx) * 72); color: #b2b2b2; line-height: 1; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/checkin/checkin"] .tips { margin-top: calc(var(--rpx) * 10); text-align: center; } [data-route="pages/checkin/checkin"] /* v7.0.187（木哥令）：我的作业记录 —— 提交键下面的次级键（白底线框，不抢主键） */ .ck-rec { margin-top: calc(var(--rpx) * 16); } [data-route="pages/checkin/checkin"] .field { display: flex; align-items: center; /* v4.86.383（379 号令）：行高收紧 26→16 —— 三行字段各省 calc(var(--rpx) * 20)，一屏能见全部按键 */ /* v4.86.570（木哥发两张打卡页截图令：「输入框的文字，左边太靠边的，优化一下所有类似问题。」） 左右原来是 0，标签/输入值/textarea 文字全贴卡片左缘；补 calc(var(--rpx) * 20) 内边距， 连带「按住说话」钮也一起进到边内 */ padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); background: #f7f7f7; border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/checkin/checkin"] .field-col { display: block; } [data-route="pages/checkin/checkin"] /* v4.83.5：字段名 + 语音按钮同一行（「想说的话」右边挂个🎤说话） */ .field-row { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/checkin/checkin"] .field-label { /* v4.86.382（378 号令 · 木哥）：标签一行不折 —— 固定 calc(var(--rpx) * 160) 装不下 「学生姓名（选填）」7 个字，折成两行把输入区挤矮。改 min-width 保底 （作业日期/孩子昵称 4 字仍占 160，视觉不变），长标签自然撑开、 nowrap 兜死不折行，flex-shrink:0 保证 input 不会被挤没。 */ width: auto; min-width: calc(var(--rpx) * 160); flex-shrink: 0; white-space: nowrap; color: #888888; font-size: calc(var(--rpx) * 28); } [data-route="pages/checkin/checkin"] .field-row .field-label { min-width: 0; } [data-route="pages/checkin/checkin"] .field-value { flex: 1; font-size: calc(var(--rpx) * 28); } [data-route="pages/checkin/checkin"] .field-input { flex: 1; font-size: calc(var(--rpx) * 28); } [data-route="pages/checkin/checkin"] /* v7.0.075（木哥令）：认领学员的提示行 —— 绿字一句话，说清「点评会直接发给他」 */ .cls-claim-tip { width: 100%; margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); line-height: 1.5; color: #0a7a3d; } [data-route="pages/checkin/checkin"] /* v4.86.420：字表输入（「这一页写了哪几个字」）—— 独立一条，不借 field-input 的 flex:1（field-col 是纵排，flex:1 会被纵向拉伸）。 */ .hw-chars-input { width: 100%; font-size: calc(var(--rpx) * 28); } [data-route="pages/checkin/checkin"] .field-area { /* v4.86.383（379 号令 · 木哥「可以处理一下下边输入框高度」）：固定两行高、 不再 auto-height —— 原来写多了框跟着长，把「按住说话」和提交键一路顶出屏， 一屏永远看不全。现在 calc(var(--rpx) * 90) 两行封顶、写多了框内滚动（wxml 已撤 auto-height）， 页面高度就定了下来；占位提示仍在框里。 */ width: 100%; height: calc(var(--rpx) * 90); margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); line-height: 1.5; box-sizing: border-box; } [data-route="pages/checkin/checkin"] .ph { color: #b2b2b2; font-size: calc(var(--rpx) * 28); } [data-route="pages/checkin/checkin"] .err { margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 24); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/checkin/checkin"] /* v4.86.86：提交进度条（阶段推进，宽度过渡交给 CSS，走起来是连续的） */ .up-wrap { margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 20); } [data-route="pages/checkin/checkin"] .up-bar { height: calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 999); background: #e8f7ee; overflow: hidden; } [data-route="pages/checkin/checkin"] .up-fill { height: 100%; border-radius: calc(var(--rpx) * 999); background: #07c160; transition: width 0.32s ease; } [data-route="pages/checkin/checkin"] .up-txt { margin-top: calc(var(--rpx) * 10); text-align: center; font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/checkin/checkin"] /* ===== v4.86.157：作业拍摄要求（常驻入口 + 图文弹层） ===== */ .card-title-row { display: flex; align-items: baseline; justify-content: space-between; } [data-route="pages/checkin/checkin"] .guide-link { font-size: calc(var(--rpx) * 24); color: #07c160; padding: calc(var(--rpx) * 4) 0 calc(var(--rpx) * 4) calc(var(--rpx) * 16); } [data-route="pages/checkin/checkin"] /* v4.86.242：旧「作业拍摄要求」图文弹层样式（guide-mask 一族）随弹层退役； 入口 .guide-link 保留，点开直接走「先学习」三步卡（样式复用 learn- 一族）。 ===== 拍照方法小测验弹窗（v4.86.160）===== */ .quiz-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 70; display: flex; align-items: flex-end; } [data-route="pages/checkin/checkin"] .quiz-sheet { width: 100%; background: #ffffff; border-radius: calc(var(--rpx) * 28) calc(var(--rpx) * 28) 0 0; padding: calc(var(--rpx) * 36) calc(var(--rpx) * 32) calc(calc(var(--rpx) * 28) + env(safe-area-inset-bottom)); box-sizing: border-box; /* v4.86.162：固定高度 —— swiper 靠 flex 撑高在没有确定高度的容器里会拿 0（弹窗空白的真凶） */ height: 84vh; display: flex; flex-direction: column; } [data-route="pages/checkin/checkin"] .quiz-title { font-size: calc(var(--rpx) * 32); font-weight: 700; color: #1f2937; text-align: center; margin-bottom: calc(var(--rpx) * 18); } [data-route="pages/checkin/checkin"] .quiz-scroll { flex: 1; min-height: 0; } [data-route="pages/checkin/checkin"] .quiz-hint { font-size: calc(var(--rpx) * 24); color: #8a6d1f; background: #fdf8e8; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); line-height: 1.5; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/checkin/checkin"] .quiz-q { margin-bottom: calc(var(--rpx) * 26); } [data-route="pages/checkin/checkin"] .quiz-qt { font-size: calc(var(--rpx) * 28); font-weight: 700; color: #1f2937; margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/checkin/checkin"] .quiz-opt { display: flex; align-items: center; background: #f5f6f8; border: calc(var(--rpx) * 2) solid #e5e7eb; border-radius: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20); margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/checkin/checkin"] .quiz-opt.picked { background: #e8f7ee; border-color: #07c160; } [data-route="pages/checkin/checkin"] .quiz-box { flex: none; width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); border-radius: 50%; border: calc(var(--rpx) * 2) solid #c0c4cc; color: #07c160; font-size: calc(var(--rpx) * 24); text-align: center; line-height: calc(var(--rpx) * 36); margin-right: calc(var(--rpx) * 16); box-sizing: border-box; } [data-route="pages/checkin/checkin"] .quiz-opt.picked .quiz-box { border-color: #07c160; } [data-route="pages/checkin/checkin"] .quiz-ot { flex: 1; font-size: calc(var(--rpx) * 28); color: #374151; line-height: 1.5; } [data-route="pages/checkin/checkin"] .quiz-btn { margin-top: calc(var(--rpx) * 26); background: #07c160; color: #ffffff; border-radius: calc(var(--rpx) * 10); text-align: center; padding: calc(var(--rpx) * 24) 0; font-size: calc(var(--rpx) * 32); } [data-route="pages/checkin/checkin"] .quiz-retry { background: #e0a038; border-radius: calc(var(--rpx) * 10); text-align: center; padding: calc(var(--rpx) * 24) 0; font-size: calc(var(--rpx) * 32); color: #ffffff; margin-top: calc(var(--rpx) * 16); } [data-route="pages/checkin/checkin"] /* v7.0.135（木哥令「测试部分加一个按键：跳过」）：不考也能过 —— 白底描边二级键（不是绿主键）：一眼看得出是个能点的按键，又不跟「交卷」抢眼； 做题屏与不过关屏都挂着，随时点得着。 */ .quiz-skip { margin-top: calc(var(--rpx) * 16); background: #ffffff; border: calc(var(--rpx) * 2) solid #d9dde3; border-radius: calc(var(--rpx) * 10); text-align: center; padding: calc(var(--rpx) * 20) 0; font-size: calc(var(--rpx) * 28); color: #6b7280; } [data-route="pages/checkin/checkin"] .quiz-score { margin-top: calc(var(--rpx) * 26); text-align: center; font-size: calc(var(--rpx) * 32); font-weight: 700; } [data-route="pages/checkin/checkin"] .quiz-score.pass { color: #07c160; } [data-route="pages/checkin/checkin"] .quiz-score.fail { color: #c43c32; } [data-route="pages/checkin/checkin"] /* 一题一屏 */ .quiz-emoji { text-align: center; font-size: calc(var(--rpx) * 40); margin-top: calc(var(--rpx) * 40); } [data-route="pages/checkin/checkin"] .quiz-swiper { flex: 1; min-height: 0; } [data-route="pages/checkin/checkin"] .quiz-swiper swiper-item { display: flex; flex-direction: column; box-sizing: border-box; padding-bottom: calc(var(--rpx) * 8); } [data-route="pages/checkin/checkin"] .quiz-swiper .quiz-scroll { flex: 1; min-height: 0; height: 100%; } [data-route="pages/checkin/checkin"] .quiz-swiper .quiz-btn { margin-top: calc(var(--rpx) * 16); } [data-route="pages/checkin/checkin"] /* ===== v4.86.161：三步轻卡片「先学习」 ===== */ .learn-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 80; display: flex; align-items: center; justify-content: center; padding: calc(var(--rpx) * 48); box-sizing: border-box; } [data-route="pages/checkin/checkin"] .learn-sheet { width: 100%; background: #fffdf6; border-radius: calc(var(--rpx) * 32); padding: calc(var(--rpx) * 40) calc(var(--rpx) * 36) calc(var(--rpx) * 32); box-sizing: border-box; display: flex; flex-direction: column; } [data-route="pages/checkin/checkin"] .learn-cat { text-align: center; font-size: calc(var(--rpx) * 40); margin-bottom: calc(var(--rpx) * 8); } [data-route="pages/checkin/checkin"] .learn-lead { text-align: center; font-size: calc(var(--rpx) * 32); font-weight: 700; color: #1f2937; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/checkin/checkin"] /* v4.86.162：图示要大到真能看明白 —— 侧面示意图占满卡片宽，比例 900:640 */ .learn-swiper { height: calc(var(--rpx) * 700); } [data-route="pages/checkin/checkin"] .learn-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; height: 100%; } [data-route="pages/checkin/checkin"] .learn-img { width: 100%; height: calc(var(--rpx) * 420); border-radius: calc(var(--rpx) * 20); background: #ffffff; } [data-route="pages/checkin/checkin"] .learn-h { font-size: calc(var(--rpx) * 32); font-weight: 700; color: #8a6d1f; margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 12); } [data-route="pages/checkin/checkin"] .learn-p { font-size: calc(var(--rpx) * 28); color: #374151; line-height: 1.8; } [data-route="pages/checkin/checkin"] .learn-dots { display: flex; justify-content: center; margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 4); } [data-route="pages/checkin/checkin"] .learn-dot { width: calc(var(--rpx) * 14); height: calc(var(--rpx) * 14); border-radius: 50%; background: #d8d2c0; margin: 0 calc(var(--rpx) * 8); } [data-route="pages/checkin/checkin"] .learn-dot.on { background: #07c160; } [data-route="pages/checkin/checkin"] .learn-btn { margin-top: calc(var(--rpx) * 24); background: #07c160; color: #ffffff; border-radius: calc(var(--rpx) * 10); text-align: center; padding: calc(var(--rpx) * 24) 0; font-size: calc(var(--rpx) * 32); } [data-route="pages/checkin/checkin"] .learn-skip { margin-top: calc(var(--rpx) * 18); text-align: center; font-size: calc(var(--rpx) * 24); color: #9aa0a6; padding: calc(var(--rpx) * 8) 0; } [data-route="pages/checkin/checkin"] /* ===== v4.86.383（379 号令 · 木哥「目的是在一屏就可以看见全部按键」）===== 本页专用收紧（只在本页覆盖 app.wxss，全站别处不受影响）： ① .card 内边距 28→22：两卡各省 calc(var(--rpx) * 12)； ② .page-wrap 底部留白 60→24：提交键下面不再空一大截，键本身抬进一屏。 配合：作业框 340×480→300×400、字段行高 26→16、想说的话框固定 calc(var(--rpx) * 90) （撤 auto-height，写多了框内滚动，不再把按键一路顶出屏）。 */ .card { position: relative; padding: calc(var(--rpx) * 22) calc(var(--rpx) * 28); margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/checkin/checkin"] .page-wrap { padding-bottom: calc(var(--rpx) * 24); } [data-route="pages/checkin/checkin"] /* v4.86.557（木哥 01:4x 令）：「先看示范，再动笔」两行提醒条取消，改成气泡 —— 悬浮在拍照框上方（absolute，不占版面）、60% 透明、渐入渐出，只有一句话。 渐变只动 opacity（0.6s）：进场 onLoad 挂节点 → 下一拍加 .show 淡入； 4 秒后摘 .show 淡出，淡完卸节点。点一下气泡仍看「为什么先看示范」。 颜色沿用旧条的那套暖金（底 255, [data-route="pages/checkin/checkin"] 251, [data-route="pages/checkin/checkin"] 240 / 边 216, [data-route="pages/checkin/checkin"] 178, [data-route="pages/checkin/checkin"] 106 / 字 6b4f22），只加了透明度。 */ .xue-tip-bubble { position: absolute; top: calc(var(--rpx) * 88); left: 50%; transform: translateX(-50%); z-index: 5; padding: calc(var(--rpx) * 14) calc(var(--rpx) * 28); background: rgba(255, 251, 240, 0.6); border: calc(var(--rpx) * 2) solid rgba(216, 178, 106, 0.6); border-radius: calc(var(--rpx) * 999); font-size: calc(var(--rpx) * 24); line-height: 1.5; color: #6b4f22; white-space: nowrap; opacity: 0; transition: opacity 0.6s ease; } [data-route="pages/checkin/checkin"] /* 气泡小尾巴：指向下面的拍照框 */ .xue-tip-bubble::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--rpx) * -10); margin-left: calc(var(--rpx) * -10); width: 0; height: 0; border-left: calc(var(--rpx) * 10) solid transparent; border-right: calc(var(--rpx) * 10) solid transparent; border-top: calc(var(--rpx) * 10) solid rgba(216, 178, 106, 0.6); } [data-route="pages/checkin/checkin"] .xue-tip-bubble.show { opacity: 1; } [data-route="pages/checkin/checkin"] /* 木哥 2026-10-23 15:0x：「我知道了」边上加「去查字搜老师示范」。 复用 .learn-mask / .learn-sheet 的遮罩与卡片（不新引一套），这里只补水印区与两颗按钮。 */ .why-sheet { padding: calc(var(--rpx) * 44) calc(var(--rpx) * 36) calc(var(--rpx) * 32); } [data-route="pages/checkin/checkin"] .why-t { text-align: center; font-size: calc(var(--rpx) * 32); font-weight: 700; color: #1f2937; margin-bottom: calc(var(--rpx) * 22); } [data-route="pages/checkin/checkin"] .why-p { font-size: calc(var(--rpx) * 28); line-height: 1.75; color: #374151; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/checkin/checkin"] .why-btns { display: flex; align-items: center; margin-top: calc(var(--rpx) * 8); } [data-route="pages/checkin/checkin"] .why-btn { flex: 1; text-align: center; padding: calc(var(--rpx) * 24) 0; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); } [data-route="pages/checkin/checkin"] .why-ghost { color: #6b7280; } [data-route="pages/checkin/checkin"] .why-main { margin-left: calc(var(--rpx) * 20); background: #07c160; color: #ffffff; } [data-route="pages/checkin/checkin"] /* v7.0.107（木哥令）：「去我的日历看看作业」撤下，.cal-btn 一并退役 */ /* v7.0.192（木哥令「点击提交作业，就到学员作业提交」）：作业提交模式的本次作业横幅 —— 作业名一行、最迟提交时间一行，进来就知道在交哪一份，不跟打卡页的标题打架 */ .hw-banner { background: #f2fbf5; border: calc(var(--rpx) * 1) solid #bfe8cd; } [data-route="pages/checkin/checkin"] .hw-banner-t { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #1a3d28; line-height: calc(var(--rpx) * 44); } [data-route="pages/checkin/checkin"] .hw-banner-d { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #d9534f; line-height: calc(var(--rpx) * 36); } /* ---- components/flash-guide/flash-guide.wxss ---- */ [data-comp="components/flash-guide/flash-guide"] /* v7.0.121（木哥令 11-01 20:2x）： * 「把黑色底图的罩起来的效果不要了。改成常态页面，就是有效区边缘框闪烁即可， * 气泡弹窗风格和整站统一即可。」 * 所以： * ① 暗罩不再压暗 —— 四块拦截层背景全透明（页面照常亮着，只挡误点，不改观感）； * ② 只剩有效区边缘一圈黄框在闪（细线 + 柔光，只动 opacity，真机不掉帧）； * ③ 气泡按站内弹窗口径（v7.0.121 二改，木哥「气泡的ui也太差劲了」）： * 白底 #fff / calc(var(--rpx) * 16) 圆角（同 .card）/ calc(var(--rpx) * 1) #e5e5e5 描边 / 0 calc(var(--rpx) * 8) calc(var(--rpx) * 24) .12 浮层阴影（白卡叠白卡 * 不投影会糊成一片）；内边距四边统一 calc(var(--rpx) * 24)；标题 calc(var(--rpx) * 28)/500 #191919，正文 calc(var(--rpx) * 28) #333333 * （跟弹窗正文 pp-text 同档）；小三角改成 45° 小方块带描边，跟卡片边框连成一体 * （旧的白三角像贴上去的缺口）；主键缩成 .btn-mini 尺寸的绿底小键，不再是大绿砖。 * 字号只走五档 20/24/28；字体不另设，跟 app.wxss 的 PingFang 走。 * 点击区仍 ≥ 44px（calc(var(--rpx) * 88)）：轻的是眼睛，不是手指。 */ .gm-top, [data-comp="components/flash-guide/flash-guide"] .gm-bot, [data-comp="components/flash-guide/flash-guide"] .gm-side { position: fixed; left: 0; right: 0; background: transparent; z-index: 9000; } [data-comp="components/flash-guide/flash-guide"] .gm-top { top: 0; } [data-comp="components/flash-guide/flash-guide"] .gm-bot { bottom: 0; } [data-comp="components/flash-guide/flash-guide"] .gm-side { left: 0; right: auto; width: 0; } [data-comp="components/flash-guide/flash-guide"] /* 有效区边缘框：贴着目标真轮廓的那一圈黄线在闪，别的什么都不压 * 圆角跟真身走（wxml 内联 border-radius），这里不写死 */ .gm-ring { position: fixed; z-index: 9001; pointer-events: none; border: calc(var(--rpx) * 3) solid #ffc61a; box-shadow: 0 0 0 calc(var(--rpx) * 1) rgba(255, 198, 26, 0.35), 0 0 calc(var(--rpx) * 16) calc(var(--rpx) * 2) rgba(255, 198, 26, 0.45); opacity: 0; } [data-comp="components/flash-guide/flash-guide"] .gm-ring.gm-in { opacity: 1; animation: gmGlow 1.4s ease-in-out infinite; } @keyframes gmGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } [data-comp="components/flash-guide/flash-guide"] /* 气泡：白卡，跟全站弹窗（白圆角卡 + 绿主键）一套；宽度由 js 按文案量（tip.l / tip.w） * 下内边距留 0 —— 底部那行按键自带 calc(var(--rpx) * 88) 触区，键在里面垂直居中，视觉上不贴边 */ .gm-tip { position: fixed; box-sizing: border-box; z-index: 9002; background: #ffffff; border: calc(var(--rpx) * 1) solid #e5e5e5; border-radius: calc(var(--rpx) * 16); box-shadow: 0 calc(var(--rpx) * 8) calc(var(--rpx) * 24) rgba(0, 0, 0, 0.12); padding: calc(var(--rpx) * 24) calc(var(--rpx) * 24) 0; opacity: 0; transform: translateY(calc(var(--rpx) * 4)); } [data-comp="components/flash-guide/flash-guide"] .gm-tip.gm-in { opacity: 1; transform: translateY(0); transition: opacity 0.16s, transform 0.16s; } [data-comp="components/flash-guide/flash-guide"] /* 小三角：45° 小方块，只留朝外的两条边，跟卡片边框连成一体 */ .gm-arrow { position: absolute; width: calc(var(--rpx) * 20); height: calc(var(--rpx) * 20); margin-left: calc(var(--rpx) * -10); background: #ffffff; border: calc(var(--rpx) * 1) solid #e5e5e5; transform: rotate(45deg); } [data-comp="components/flash-guide/flash-guide"] .gm-tip-down .gm-arrow { top: calc(var(--rpx) * -12); border-right: none; border-bottom: none; } [data-comp="components/flash-guide/flash-guide"] .gm-tip-up .gm-arrow { bottom: calc(var(--rpx) * -12); border-left: none; border-top: none; } [data-comp="components/flash-guide/flash-guide"] .gm-head { display: flex; align-items: baseline; margin-bottom: calc(var(--rpx) * 8); } [data-comp="components/flash-guide/flash-guide"] .gm-title { flex: 1; font-size: calc(var(--rpx) * 28); font-weight: 500; line-height: 1.4; color: #191919; } [data-comp="components/flash-guide/flash-guide"] .gm-no { font-size: calc(var(--rpx) * 20); color: #b2b2b2; margin-left: calc(var(--rpx) * 12); font-variant-numeric: tabular-nums; } [data-comp="components/flash-guide/flash-guide"] .gm-txt { font-size: calc(var(--rpx) * 28); line-height: 1.6; color: #333333; } [data-comp="components/flash-guide/flash-guide"] .gm-row { display: flex; align-items: center; justify-content: flex-end; min-height: calc(var(--rpx) * 88); } [data-comp="components/flash-guide/flash-guide"] /* 点击区一律 ≥ 44px 高（3.5 寸屏也稳），视觉上是站内常规小键 */ .gm-skip { display: flex; align-items: center; min-height: calc(var(--rpx) * 88); font-size: calc(var(--rpx) * 24); color: #888888; padding: 0 calc(var(--rpx) * 24) 0 0; } [data-comp="components/flash-guide/flash-guide"] /* 主键：外面 44px 的点击区是透明的，里面那枚绿键按 .btn-mini 的尺寸（方角 calc(var(--rpx) * 8) / calc(var(--rpx) * 24) 字） */ .gm-next { display: flex; align-items: center; justify-content: flex-end; min-height: calc(var(--rpx) * 88); margin-left: calc(var(--rpx) * 4); } [data-comp="components/flash-guide/flash-guide"] .gm-next-t { font-size: calc(var(--rpx) * 24); font-weight: 500; color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 28); line-height: 1.3; } [data-comp="components/flash-guide/flash-guide"] .gm-hover { opacity: 0.7; } /* ---- components/follow-pop/follow-pop.wxss ---- */ [data-comp="components/follow-pop/follow-pop"] /* v7.0.069：关注公众号领积分弹层 */ .fp-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(8, 18, 14, 0.55); z-index: 9200; display: flex; align-items: center; justify-content: center; } [data-comp="components/follow-pop/follow-pop"] .fp-card { width: calc(var(--rpx) * 600); background: #ffffff; border-radius: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 40) calc(var(--rpx) * 32) calc(var(--rpx) * 24); box-sizing: border-box; text-align: center; } [data-comp="components/follow-pop/follow-pop"] .fp-title { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #16281f; } [data-comp="components/follow-pop/follow-pop"] .fp-sub { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); color: #7b8a82; } [data-comp="components/follow-pop/follow-pop"] .fp-qr { width: calc(var(--rpx) * 320); height: calc(var(--rpx) * 320); margin: calc(var(--rpx) * 24) auto 0; display: block; } [data-comp="components/follow-pop/follow-pop"] .fp-way { margin-top: calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 24); color: #7b8a82; } [data-comp="components/follow-pop/follow-pop"] .fp-name { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 40); font-weight: 600; color: #16281f; letter-spacing: calc(var(--rpx) * 1); } [data-comp="components/follow-pop/follow-pop"] .fp-copy { display: inline-block; margin-top: calc(var(--rpx) * 16); padding: 0 calc(var(--rpx) * 24); height: calc(var(--rpx) * 56); line-height: calc(var(--rpx) * 56); font-size: calc(var(--rpx) * 24); color: #1f8a52; border: calc(var(--rpx) * 1) solid #b9e0c9; border-radius: calc(var(--rpx) * 28); } [data-comp="components/follow-pop/follow-pop"] .fp-tip { margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 20); color: #9aa7a1; line-height: 1.6; } [data-comp="components/follow-pop/follow-pop"] .fp-main { margin-top: calc(var(--rpx) * 24); height: calc(var(--rpx) * 88); line-height: calc(var(--rpx) * 88); border-radius: calc(var(--rpx) * 44); background: #1f8a52; color: #ffffff; font-size: calc(var(--rpx) * 28); font-weight: 600; } [data-comp="components/follow-pop/follow-pop"] .fp-busy { opacity: 0.7; } [data-comp="components/follow-pop/follow-pop"] .fp-ok { margin-top: calc(var(--rpx) * 32); font-size: calc(var(--rpx) * 28); color: #1f8a52; line-height: 1.7; } [data-comp="components/follow-pop/follow-pop"] .fp-later { margin-top: calc(var(--rpx) * 16); height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); font-size: calc(var(--rpx) * 24); color: #9aa7a1; } [data-comp="components/follow-pop/follow-pop"] .fp-hover { opacity: 0.85; } /* ---- pages/day/day.wxss ---- */ [data-route="pages/day/day"] .day-wrap { box-sizing: border-box; height: calc(var(--vh) * 100); display: flex; flex-direction: column; padding: 0 calc(var(--rpx) * 24) calc(var(--rpx) * 24); } [data-route="pages/day/day"] .day-head { padding: calc(var(--rpx) * 8) calc(var(--rpx) * 12) calc(var(--rpx) * 16); } [data-route="pages/day/day"] .day-title { font-size: calc(var(--rpx) * 40); font-weight: 600; color: #191919; line-height: 1.4; } [data-route="pages/day/day"] .day-sub { margin-top: calc(var(--rpx) * 6); margin-bottom: 0; } [data-route="pages/day/day"] /* v4.86.278（木哥令）：时间次数按钮 = 一行排在上方，超出屏宽左右滑（scroll-x）； 点一颗 = 两侧同时跳到这一次。珠子样式自持一套（此前裸奔没样式）。 v4.86.278 同令：旧「时间 + 状态」行列表撤下，样式一并清走。 */ .day-chips { margin: 0 calc(var(--rpx) * 12) calc(var(--rpx) * 12); white-space: nowrap; width: 100%; } [data-route="pages/day/day"] .day-chips-row { display: inline-flex; align-items: center; gap: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 4) 2px calc(var(--rpx) * 8); } [data-route="pages/day/day"] .day-chip { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--rpx) * 132); padding: calc(var(--rpx) * 14) calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 999); background: #ffffff; border: calc(var(--rpx) * 2) solid #e5e5e5; box-sizing: border-box; font-size: calc(var(--rpx) * 28); color: #1a1a1a; font-weight: 500; } [data-route="pages/day/day"] .day-chip-on { background: #07c160; border-color: #07c160; color: #ffffff; } [data-route="pages/day/day"] /* 未读红点：落在珠子右上角（列表撤下后未读标志不丢） */ .day-chip-dot { position: absolute; top: calc(var(--rpx) * -4); right: calc(var(--rpx) * -4); width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #fa5151; border: calc(var(--rpx) * 2) solid #ffffff; } [data-route="pages/day/day"] /* v4.86.288（木哥令）：时间签上直接标「未读」两个字 —— 红底白字小胶囊 */ .day-chip-unread { margin-left: calc(var(--rpx) * 10); padding: 0 calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 28); color: #ffffff; background: #fa5151; border-radius: calc(var(--rpx) * 10); font-weight: 500; } [data-route="pages/day/day"] .day-tabs { display: flex; margin: 0 calc(var(--rpx) * 12) calc(var(--rpx) * 12); background: #ffffff; border-radius: calc(var(--rpx) * 999); overflow: hidden; } [data-route="pages/day/day"] .day-tab { flex: 1; position: relative; text-align: center; padding: calc(var(--rpx) * 16) 0; font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/day/day"] /* v7.0.187（木哥令）：我交的作业 tab 未读角标 —— 有没确认的邀约、人没在这页时挂上； 藏在胶囊 tab 内侧（外层 .day-tabs overflow:hidden），不探出不裁切 */ .day-tab-dot { position: absolute; top: calc(var(--rpx) * 4); right: calc(var(--rpx) * 12); background: #fa5151; color: #ffffff; font-size: calc(var(--rpx) * 20); line-height: 1; padding: calc(var(--rpx) * 4) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 999); } [data-route="pages/day/day"] .day-tab-on { background: #07c160; color: #ffffff; } [data-route="pages/day/day"] .hw-note { margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #f7f7f7; border-radius: calc(var(--rpx) * 12); } [data-route="pages/day/day"] .hw-note-h { display: flex; align-items: center; } [data-route="pages/day/day"] .hw-note-no { font-size: calc(var(--rpx) * 24); color: #07c160; margin-right: calc(var(--rpx) * 12); } [data-route="pages/day/day"] .hw-note-pos { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/day/day"] .hw-note-dot { flex: none; width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #c8c8c8; } [data-route="pages/day/day"] .hw-dot-red { background: #fa5151; } [data-route="pages/day/day"] .hw-dot-blue { background: #10aeff; } [data-route="pages/day/day"] .hw-dot-green { background: #07c160; } [data-route="pages/day/day"] .hw-note-t { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); color: #191919; line-height: 1.6; } [data-route="pages/day/day"] .day-swiper { flex: 1; min-height: 0; } [data-route="pages/day/day"] .day-cell { height: 100%; } [data-route="pages/day/day"] .hw-page { background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 24) calc(var(--rpx) * 28) calc(var(--rpx) * 28); } [data-route="pages/day/day"] .hw-when { display: flex; align-items: baseline; } [data-route="pages/day/day"] .hw-name { font-size: calc(var(--rpx) * 32); color: #191919; font-weight: 500; margin-right: calc(var(--rpx) * 12); } [data-route="pages/day/day"] .hw-time { font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/day/day"] .hw-tags { display: flex; align-items: center; margin-top: calc(var(--rpx) * 8); } [data-route="pages/day/day"] .hw-tag { font-size: calc(var(--rpx) * 20); color: #888888; background: #f2f2f2; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 12); margin-right: calc(var(--rpx) * 10); } [data-route="pages/day/day"] .hw-tag-new { color: #07c160; background: #e8f7ee; } [data-route="pages/day/day"] .hw-tag-mentor { color: #ffffff; background: #07c160; } [data-route="pages/day/day"] .hw-tag-ai { color: #07c160; background: #e8f7ee; } [data-route="pages/day/day"] /* v4.86.293（木哥令）：「老师点评好了」旁的朗读小图标（与语音点评的 ♪ 同一符号） * 点了出声读点评；播放中变「⏹ 播放中」红字，再点停。 */ .hw-tag-sound { color: #07c160; background: #e8f7ee; margin-right: 0; } [data-route="pages/day/day"] .hw-tag-sound-on { color: #fa5151; background: #fdecec; } [data-route="pages/day/day"] .hw-block-t { margin-top: calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/day/day"] .hw-shot { margin-top: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 12); overflow: hidden; background: #f7f7f7; } [data-route="pages/day/day"] .hw-img-fix { width: 100%; height: calc(var(--rpx) * 520); display: block; } [data-route="pages/day/day"] .hw-shot-empty { height: calc(var(--rpx) * 200); line-height: calc(var(--rpx) * 200); text-align: center; font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/day/day"] .hw-line { display: flex; margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 28); line-height: 1.6; } [data-route="pages/day/day"] .hw-k { flex: none; margin-right: calc(var(--rpx) * 16); color: #888888; } [data-route="pages/day/day"] .hw-v { flex: 1; min-width: 0; color: #191919; word-break: break-all; } [data-route="pages/day/day"] .hw-review { margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #f7f7f7; border-radius: calc(var(--rpx) * 12); } [data-route="pages/day/day"] .hw-review-from { font-size: calc(var(--rpx) * 24); color: #07c160; margin-bottom: calc(var(--rpx) * 8); } [data-route="pages/day/day"] .hw-review-text { font-size: calc(var(--rpx) * 28); color: #191919; line-height: 1.7; word-break: break-all; } [data-route="pages/day/day"] /* #659（v4.86.400）：终审稿分段 —— 段间留白 calc(var(--rpx) * 26)；无序号无【】小标题 */ .hw-review-para { margin-bottom: calc(var(--rpx) * 26); } [data-route="pages/day/day"] .hw-review-para:last-child { margin-bottom: 0; } [data-route="pages/day/day"] .hw-none { margin-top: calc(var(--rpx) * 20); margin-bottom: 0; } [data-route="pages/day/day"] .hw-ops { margin-top: calc(var(--rpx) * 24); display: flex; gap: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .hw-op { width: 100%; margin: 0; } [data-route="pages/day/day"] .hw-ops .hw-op { flex: 1; width: auto; } [data-route="pages/day/day"] .share-canvas { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1; } [data-route="pages/day/day"] .hw-mhead { display: flex; align-items: center; } [data-route="pages/day/day"] .hw-mava { flex: none; width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); border-radius: 50%; margin-right: calc(var(--rpx) * 14); background: #f2f2f2; } [data-route="pages/day/day"] .hw-mava-txt { display: flex; align-items: center; justify-content: center; color: #576b95; font-size: calc(var(--rpx) * 28); } [data-route="pages/day/day"] /* v7.0.039（木哥发截图令）：头像右侧边缘的状态印章 —— 未点评红 / 已点评绿， * 仿印章双线框 + 微旋转 + 半透白底，压在头像右缘上一眼看清回没回 * v7.0.044（木哥 06:2x 令「移到这一行的页面的最左边，包括未点评」）： * 印章不再压在头像上，挪成这一行的第一个元素 —— 页面最左边、与头像同行居中 */ .hw-mava-wrap { position: relative; flex: none; } [data-route="pages/day/day"] .hw-stamp { flex: none; align-self: center; /* v7.0.048（木哥圈图令）：印章钉在老师这一行的最右端 —— margin-left:auto 推到行尾 */ margin-left: auto; transform: rotate(-8deg); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 8); border: calc(var(--rpx) * 3) solid currentColor; box-shadow: inset 0 0 0 calc(var(--rpx) * 1.5) currentColor; background: rgba(255, 255, 255, 0.88); font-size: calc(var(--rpx) * 20); font-weight: 700; letter-spacing: calc(var(--rpx) * 2); line-height: 1.2; white-space: nowrap; } [data-route="pages/day/day"] .hw-stamp-no { color: #d54b3f; } [data-route="pages/day/day"] .hw-stamp-ok { color: #1aad19; } [data-route="pages/day/day"] /* v4.86.184：头像右边那两行 —— 上行昵称 + 徽章（谁评的），下行身份（这是什么） */ .hw-mwho { flex: 1; min-width: 0; } [data-route="pages/day/day"] .hw-mname { display: flex; align-items: center; } [data-route="pages/day/day"] .hw-mname-t { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/day/day"] .hw-mtitle { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/day/day"] .hw-mrole { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/day/day"] /* 给老师留言（次按钮形态，尺寸走 app.wxss 的 .btn-ghost，这里只管排布） */ .hw-note { margin-top: calc(var(--rpx) * 24); } [data-route="pages/day/day"] .hw-badge { margin-left: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 8); background: #e8f7ee; color: #07c160; font-size: calc(var(--rpx) * 20); } [data-route="pages/day/day"] .hw-markbox { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20); background: #f7f7f7; border-radius: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .hw-marktitle { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/day/day"] .hw-markimg { width: 100%; border-radius: calc(var(--rpx) * 12); background: #ffffff; } [data-route="pages/day/day"] .hw-nlist { margin-top: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .hw-nhead { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/day/day"] .hw-nt { font-size: calc(var(--rpx) * 24); color: #576b95; font-weight: 500; } [data-route="pages/day/day"] .hw-nx { font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/day/day"] .hw-block-gap { margin-top: calc(var(--rpx) * 32); } [data-route="pages/day/day"] .hw-aitag { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); color: #b2b2b2; } [data-route="pages/day/day"] .hw-score { margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 22); background: #f7f7f7; border-radius: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .hw-score-head { display: flex; align-items: center; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .hw-score-lv { font-size: calc(var(--rpx) * 24); font-weight: 500; color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 18); } [data-route="pages/day/day"] .hw-lv-excellent { background: #fa9d3b; } [data-route="pages/day/day"] .hw-lv-good { background: #07c160; } [data-route="pages/day/day"] .hw-lv-pass { background: #576b95; } [data-route="pages/day/day"] .hw-lv-todo { background: #fa5151; } [data-route="pages/day/day"] .hw-score-note { margin-left: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); } [data-route="pages/day/day"] .hw-score-dims { display: flex; flex-direction: column; gap: calc(var(--rpx) * 12); } [data-route="pages/day/day"] .hw-score-dim { display: flex; align-items: center; } [data-route="pages/day/day"] .hw-score-name { width: calc(var(--rpx) * 150); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/day/day"] .hw-score-bar { flex: 1; height: calc(var(--rpx) * 16); background: #f2f2f2; border-radius: calc(var(--rpx) * 8); overflow: hidden; } [data-route="pages/day/day"] .hw-score-fill { height: 100%; background: #07c160; border-radius: calc(var(--rpx) * 8); } [data-route="pages/day/day"] .hw-score-val { width: calc(var(--rpx) * 60); text-align: right; font-size: calc(var(--rpx) * 24); color: #191919; } [data-route="pages/day/day"] .hw-score-best { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); } [data-route="pages/day/day"] .hw-best { color: #fa9d3b; font-weight: 500; } [data-route="pages/day/day"] .hw-voice { display: flex; align-items: center; margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); background: #eef7ef; border: calc(var(--rpx) * 2) solid #cde8d0; } [data-route="pages/day/day"] .hw-voice-on { background: #e2f4e5; } [data-route="pages/day/day"] .hw-voice-icon { flex: none; margin-right: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 32); } [data-route="pages/day/day"] .hw-voice-txt { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 24); color: #3f6b4a; } [data-route="pages/day/day"] .hw-markwrap { position: relative; } [data-route="pages/day/day"] .hw-vdot { position: absolute; transform: translate(-50%, -50%); width: calc(var(--rpx) * 76); height: calc(var(--rpx) * 76); border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 12) rgba(0, 0, 0, 0.28); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 40); z-index: 2; } [data-route="pages/day/day"] .hw-vdot-on { background: #e8f5e9; box-shadow: 0 0 0 calc(var(--rpx) * 6) rgba(76, 175, 80, 0.25); } [data-route="pages/day/day"] .hw-ndot { width: calc(var(--rpx) * 60); height: calc(var(--rpx) * 60); font-size: calc(var(--rpx) * 32); } [data-route="pages/day/day"] .hw-ndot-audio { /* v4.86.362（359 号令）：固定绿降为兜底色 —— wxml 内联已带该处圈点自己的颜色 */ color: #07c160; } [data-route="pages/day/day"] /* v4.86.362（359 号令）：有原音的 ♪ 常驻闪动；keyframes 全站共用 app.wxss 的 voice-flash */ .hw-ndot-flash { animation: voice-flash 1.4s ease-in-out infinite; } [data-route="pages/day/day"] .hw-ndot-text { color: #4a6fa5; } [data-route="pages/day/day"] .hw-nbubble { display: flex; align-items: flex-start; margin-top: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 10); background: #eef7ef; border: calc(var(--rpx) * 2) solid #cde8d0; } [data-route="pages/day/day"] .hw-nb-no { flex: none; margin-right: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #3f6b4a; } [data-route="pages/day/day"] .hw-nb-txt { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 24); color: #191919; line-height: 1.6; } [data-route="pages/day/day"] .hw-note-play { flex: none; margin-left: auto; font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/day/day"] .hw-note { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 4); border-radius: 0; background: transparent; margin-top: 0; } [data-route="pages/day/day"] .hw-note + .hw-note { border-top: calc(var(--rpx) * 1) solid #f0f0f0; } [data-route="pages/day/day"] .hw-notify { margin-top: calc(var(--rpx) * 24); } [data-route="pages/day/day"] .hw-share { margin-top: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .card-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; display: flex; align-items: center; justify-content: center; } [data-route="pages/day/day"] .card-sheet { width: 86vw; max-height: 86vh; background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 30); box-sizing: border-box; display: flex; flex-direction: column; } [data-route="pages/day/day"] .card-sheet-title { text-align: center; font-size: calc(var(--rpx) * 32); font-weight: 500; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/day/day"] .card-preview { width: 100%; border-radius: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .card-making { height: calc(var(--rpx) * 400); display: flex; align-items: center; justify-content: center; color: #888888; background: #f7f7f7; } [data-route="pages/day/day"] .card-sheet-actions { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 22); } [data-route="pages/day/day"] .card-sheet-actions button { flex: 1; font-size: calc(var(--rpx) * 28); } [data-route="pages/day/day"] .sheet-save { color: #ffffff; } [data-route="pages/day/day"] .card-sheet-tip { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/day/day"] .crop-hint { margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #888888; text-align: center; } [data-route="pages/day/day"] .crop-area { position: relative; margin: 0 auto calc(var(--rpx) * 24); background: #f7f7f7; border-radius: calc(var(--rpx) * 12); overflow: hidden; } [data-route="pages/day/day"] .crop-img { position: absolute; left: 0; top: 0; display: block; } [data-route="pages/day/day"] .crop-marea { position: absolute; left: 0; top: 0; background: transparent; } [data-route="pages/day/day"] .crop-box { border: calc(var(--rpx) * 1) solid #f2f2f2; background: rgba(7, 193, 96, 0.12); box-sizing: border-box; } [data-route="pages/day/day"] .zoom-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; /* v4.86.259（木哥令）：黑底与全站浅色 UI 不搭 —— 改成与页面同底的浅灰， 标题/关闭/提示同一套深字浅底，逐处点评列表本来就是浅色卡的字色。 */ background: #ededed; display: flex; flex-direction: column; } [data-route="pages/day/day"] .zoom-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 24) calc(var(--rpx) * 32); } [data-route="pages/day/day"] .zoom-title { color: #1a1a1a; font-size: calc(var(--rpx) * 28); } [data-route="pages/day/day"] .zoom-close { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); border-radius: 50%; background: #ffffff; color: #333333; font-size: calc(var(--rpx) * 32); display: flex; align-items: center; justify-content: center; } [data-route="pages/day/day"] .zoom-body { flex: 1; position: relative; overflow: hidden; } [data-route="pages/day/day"] .zoom-area { width: 100%; height: 100%; } [data-route="pages/day/day"] .zoom-wrap { position: relative; width: 100%; height: 100%; } [data-route="pages/day/day"] .zoom-img { display: block; } [data-route="pages/day/day"] .zoom-foot { flex: none; padding-bottom: env(safe-area-inset-bottom); } [data-route="pages/day/day"] .zoom-foot .hw-nbubble { margin: 0 calc(var(--rpx) * 24) calc(var(--rpx) * 8); } [data-route="pages/day/day"] .zoom-notes { max-height: 34vh; margin: 0 calc(var(--rpx) * 24); box-sizing: border-box; } [data-route="pages/day/day"] .zoom-tip { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 32) calc(var(--rpx) * 40); color: #8a8a8a; font-size: calc(var(--rpx) * 24); text-align: center; } [data-route="pages/day/day"] .hw-mkprog { padding: calc(var(--rpx) * 60) calc(var(--rpx) * 20) calc(var(--rpx) * 40); } [data-route="pages/day/day"] .hw-mkbar { height: calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 999); background: #e2ece5; overflow: hidden; } [data-route="pages/day/day"] .hw-mkfill { height: 100%; border-radius: calc(var(--rpx) * 999); background: #07c160; transition: width 0.24s linear; } [data-route="pages/day/day"] .hw-mktxt { display: block; margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #888888; text-align: center; } [data-route="pages/day/day"] /* v4.86.182：邀约老师（我交的作业侧 · 常驻） */ .hw-invite { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 22) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); background: #f7f8fa; } [data-route="pages/day/day"] .hw-invite-top { display: flex; align-items: flex-start; } [data-route="pages/day/day"] .hw-invite-ava { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); border-radius: 50%; margin-right: calc(var(--rpx) * 16); flex-shrink: 0; } [data-route="pages/day/day"] .hw-invite-ava-txt { display: flex; align-items: center; justify-content: center; background: #d9ecff; color: #576b95; font-size: calc(var(--rpx) * 28); } [data-route="pages/day/day"] .hw-invite-body { flex: 1; min-width: 0; } [data-route="pages/day/day"] .hw-invite-t { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #191919; } [data-route="pages/day/day"] .hw-invite-s { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); line-height: 1.5; color: #969799; } [data-route="pages/day/day"] .hw-invite-btn { margin-top: calc(var(--rpx) * 18); } [data-route="pages/day/day"] /* v7.0.039（木哥令）：邀约中把换老师规则说明白 —— 10 分钟没回复就能换 */ .hw-invite-hint { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #969799; text-align: center; } [data-route="pages/day/day"] /* v4.86.474：约成之后这颗键是「回执」不是「行动」—— 灰底灰字，不给点 */ .hw-invite-btn-done { background: #eef0f3 !important; color: #96989d !important; } [data-route="pages/day/day"] .picked-again { margin-left: calc(var(--rpx) * 6); color: #06ad56; text-decoration: underline; } [data-route="pages/day/day"] /* v4.86.185：再提交新作业 = 与「去练字打卡」同款大键（尺寸全走 app.wxss 的 .btn-ghost） v4.86.292（木哥令）：绿色线框 + 绿色文字 —— 次级入口，不再用大绿实心抢视觉 */ .day-again { margin: calc(var(--rpx) * 16) calc(var(--rpx) * 12) 0; } [data-route="pages/day/day"] .day-again-green { color: #06ad56; border-color: #06ad56; } [data-route="pages/day/day"] /* ---- v4.86.206 老师的视频动作纠正（§VCVIDEO§ 成品，detail 页 vc-box 同款） v4.86.250（木哥令）：卡片 UI 与「老师详细点评与标注」（hw-markbox）统一 —— 同灰底 #f7f7f7 / 同圆角 / 同标题字号字重颜色，两卡放在一起就是一套。 ---- */ .vc-box { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 16); background: #f7f7f7; } [data-route="pages/day/day"] .vc-box-title { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/day/day"] .vc-box-player { width: 100%; height: calc(var(--rpx) * 400); border-radius: calc(var(--rpx) * 12); background: #000000; } [data-route="pages/day/day"] /* v4.86.552：「我发的动作视频」框的三副面孔 —— 加载中 / 打不开可重试 / 底部那行状态 */ .vc-box-wait, [data-route="pages/day/day"] .vc-box-retry { width: 100%; height: calc(var(--rpx) * 400); border-radius: calc(var(--rpx) * 12); background: #eeeeee; color: #666666; font-size: calc(var(--rpx) * 24); display: flex; align-items: center; justify-content: center; } [data-route="pages/day/day"] .vc-box-retry { color: #576b95; } [data-route="pages/day/day"] .vc-box-sub { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/day/day"] /* ---- v4.86.229 木哥令：老师发起的视频示范（服务消息同意卡 + 示范视频卡） ---- */ .demo-box .demo-chat { margin-top: calc(var(--rpx) * 16); height: calc(var(--rpx) * 76); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 28); } [data-route="pages/day/day"] /* v4.86.302（木哥令③⑥）：老师刚发来的示范视频 —— 卡标题旁亮一枚「新」， 学员看到（渲染即记已读）后下次进来就没了；红点熄灭与这枚同步 */ .demo-new { flex: none; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); color: #ffffff; background: #fa5151; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); } [data-route="pages/day/day"] .demo-notice { margin-top: calc(var(--rpx) * 16); border: calc(var(--rpx) * 2) solid #d5f0df; border-radius: calc(var(--rpx) * 10); background: #e8f7ee; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); } [data-route="pages/day/day"] .demo-notice-head { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #191919; display: flex; align-items: center; } [data-route="pages/day/day"] .demo-notice-badge { flex: none; font-size: calc(var(--rpx) * 20); font-weight: 500; color: #07c160; border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); margin-right: calc(var(--rpx) * 12); } [data-route="pages/day/day"] .demo-notice-body { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); line-height: 1.6; color: #888888; } [data-route="pages/day/day"] .demo-agree { margin-top: calc(var(--rpx) * 16); height: calc(var(--rpx) * 80); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 28); } [data-route="pages/day/day"] .demo-notice-tip { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #888888; } [data-route="pages/day/day"] /* v4.86.233（木哥 16:2x 令）：邀约卡上方的「再发视频动作纠正给老师」—— 次按钮（btn-ghost），不抢下面邀约主键的戏；只补间距。 */ .hw-vredo { margin-top: calc(var(--rpx) * 24); } [data-route="pages/day/day"] /* ---------------- 学员确认老师的广场邀约（v4.86.254 木哥令） ---------------- */ .plaza-invite { margin-top: calc(var(--rpx) * 16); } [data-route="pages/day/day"] /* v4.86.483（木哥 20:4x）：老师名必须是能点的 —— 点进去看介绍，回来再决定同不同意 */ .plaza-name { color: #06ad56; font-weight: 600; text-decoration: underline; } [data-route="pages/day/day"] /* 「新」= 老师刚发起、我还没看过这条邀约（以前这条完全没提醒） */ .plaza-new { display: inline-block; margin-right: calc(var(--rpx) * 8); padding: 0 calc(var(--rpx) * 8); border-radius: calc(var(--rpx) * 8); background: #ff5a5a; color: #fff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 30); } [data-route="pages/day/day"] .plaza-invite-note { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); text-align: center; } [data-route="pages/day/day"] /* ---- v4.86.259：给老师打分（detail 页同款搬运） ---- */ .hw-rate { margin-top: calc(var(--rpx) * 22); padding: calc(var(--rpx) * 20); background: #f7f7f7; border-radius: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .star-row { margin: calc(var(--rpx) * 14) 0 calc(var(--rpx) * 10); } [data-route="pages/day/day"] .star { font-size: calc(var(--rpx) * 56); color: #b2b2b2; margin-right: calc(var(--rpx) * 18); } [data-route="pages/day/day"] .star:active { transform: scale(1.15); } [data-route="pages/day/day"] .star-busy { opacity: 0.5; } [data-route="pages/day/day"] .hw-rated { margin-top: calc(var(--rpx) * 18); font-size: calc(var(--rpx) * 24); } [data-route="pages/day/day"] /* ---- v4.86.260：老师模式时间线（未点评红点 + 状态徽） v4.86.277（木哥令）：整列照抄班级详情「作业记录」的 UI 模式 （对齐 pkgOps/pages/tclass/detail.wxss 的 .hw 行：灰绿圆角行块 + 加粗标题 + 灰色小字行 + 右侧状态字）—— day 页自持一套，不跨页借样式。 */ .m-task { display: flex; align-items: center; margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 12); background: #f4f8f5; } [data-route="pages/day/day"] .m-task-main { flex: 1; min-width: 0; } [data-route="pages/day/day"] .m-task-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #16301f; } [data-route="pages/day/day"] .m-task-sub { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #7d8f85; } [data-route="pages/day/day"] .m-task-dot { width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #fa5151; margin-right: calc(var(--rpx) * 16); flex-shrink: 0; } [data-route="pages/day/day"] .m-task-state { margin-left: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 999); background: #f2f2f2; color: #888888; font-size: calc(var(--rpx) * 20); line-height: 1.5; flex-shrink: 0; } [data-route="pages/day/day"] .m-task-state-pending { background: #fdecec; color: #fa5151; } [data-route="pages/day/day"] /* 已点评：右则绿色状态字（同「作业记录」右侧那枚绿字链接的口径） */ .m-task-go { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #0a7a3d; } [data-route="pages/day/day"] /* v4.86.319：示范视频三态（加载中 / 没加载出来可重试） */ .demo-video-wait { padding: calc(var(--rpx) * 44) 0; text-align: center; font-size: calc(var(--rpx) * 24); color: #7a8f85; } [data-route="pages/day/day"] .demo-video-retry { margin: calc(var(--rpx) * 12) 0; padding: calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 10); background: #fdf6ec; text-align: center; font-size: calc(var(--rpx) * 24); color: #b26a00; } [data-route="pages/day/day"] /* v4.86.336：滑到底自动弹作品卡的哨兵（透明占位，不占视觉） */ .poster-sentinel { height: 2px; } [data-route="pages/day/day"] /* v4.86.336：弹层里的「不再发了」—— 弱化样式，不抢分享主按钮 */ .card-mute { color: #999999; font-size: calc(var(--rpx) * 24); } [data-route="pages/day/day"] /* 成长报告入口（2026-10-23）：一行两块 —— 名字 + 一句它回答什么 */ .rp-entry { margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 18); padding: calc(var(--rpx) * 24) calc(var(--rpx) * 24); background: #fff; border-radius: calc(var(--rpx) * 20); box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 12) rgba(43, 38, 32, .05); } [data-route="pages/day/day"] /* v4.86.483（木哥 20:4x 令「四个字改成绿的颜色，说明是一个按键」）： 原来 #2b2620 与正文标题同色同字号，看不出来这是个入口 */ .rp-entry-t { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #06ad56; } [data-route="pages/day/day"] .rp-entry-s { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); color: #8d8477; } [data-route="pages/day/day"] /* v7.0.199（木哥令「成长报告有未读的，出来提示一下，3 秒自动消失；没有未读不显示」）： 绝对定位挂在入口卡下沿 —— 弹出/收起都不推版式（不闪不跳） */ .rp-entry { position: relative; } [data-route="pages/day/day"] .rp-hint { position: absolute; left: calc(var(--rpx) * 24); top: 100%; margin-top: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 10) calc(var(--rpx) * 20); background: #06ad56; color: #ffffff; font-size: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 999); box-shadow: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 14) rgba(6, 173, 86, .35); z-index: 5; } [data-route="pages/day/day"] /* v7.0.028：老师分享未收下的提醒卡 —— 两颗键并排 */ .hw-keep-card .row-btns { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 16); } [data-route="pages/day/day"] .hw-keep-card .row-btns button { flex: 1; } [data-route="pages/day/day"] /* v7.0.042：视频动作纠正单独成一项（与作业点评页 v7.0.039 同一张金卡） ====== */ .vc-hero { margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 4); padding: calc(var(--rpx) * 26) calc(var(--rpx) * 26) calc(var(--rpx) * 30); border-radius: calc(var(--rpx) * 20); background: linear-gradient(180deg, #fffef9 0%, #fdf3e0 100%); border: calc(var(--rpx) * 1) solid #eddfbd; } [data-route="pages/day/day"] .vc-hero-off { opacity: 0.55; } [data-route="pages/day/day"] .vc-hero-head { display: flex; align-items: center; font-size: calc(var(--rpx) * 32); font-weight: 700; color: #4a3208; } [data-route="pages/day/day"] .vc-hero-badge { margin-right: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 8); background: linear-gradient(135deg, #d8b25c 0%, #a8792c 100%); color: #fff; font-size: calc(var(--rpx) * 20); font-weight: 500; } [data-route="pages/day/day"] .vc-hero-pitch { margin: calc(var(--rpx) * 12) 0 calc(var(--rpx) * 22); font-size: calc(var(--rpx) * 24); color: #7a6a45; line-height: 1.5; } [data-route="pages/day/day"] .vc-hero .hw-video { margin-top: 0; } [data-route="pages/day/day"] /* v7.0.043：把这个字练一练（与分享落地页 v7.0.028 同一张卡、同一套口径） ====== */ .pr-card { margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 4); padding: calc(var(--rpx) * 26) calc(var(--rpx) * 26) calc(var(--rpx) * 30); border-radius: calc(var(--rpx) * 20); background: #fff; border: calc(var(--rpx) * 1) solid #e7ece8; } [data-route="pages/day/day"] .pr-t { font-size: calc(var(--rpx) * 32); font-weight: 700; color: #16301f; } [data-route="pages/day/day"] .pr-s { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #7d8a82; line-height: 1.5; } [data-route="pages/day/day"] .pr-tools { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 20); } [data-route="pages/day/day"] .pr-tool { flex: 1; padding: calc(var(--rpx) * 24) calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 10); background: #f4f8f5; text-align: center; } [data-route="pages/day/day"] .pr-tool-hover { background: #e9f3ec; } [data-route="pages/day/day"] .pr-tool-i { width: calc(var(--rpx) * 60); height: calc(var(--rpx) * 60); margin: 0 auto; border-radius: 50%; background: #e2f2e7; font-size: calc(var(--rpx) * 28); line-height: calc(var(--rpx) * 60); color: #0a7a3d; font-weight: 600; } [data-route="pages/day/day"] .pr-tool-t { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); font-weight: 500; color: #16301f; } [data-route="pages/day/day"] .pr-tool-d { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 20); color: #9aa8a0; } [data-route="pages/day/day"] /* v7.0.072（木哥令）：收下后的终态键 —— 灰底灰字不可再点，3 秒后随卡一起收起 */ .hw-keep-done { background: #f2f2f2 !important; color: #9b9b9b !important; } [data-route="pages/day/day"] /* ==================== v7.0.084 里程碑海报弹窗（每周一封信） ==================== */ .pp-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(12, 32, 22, 0.82); z-index: 3200; display: flex; align-items: center; justify-content: center; animation: pp-fade 0.28s ease both; } @keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } } [data-route="pages/day/day"] .pp-card { position: relative; width: calc(var(--rpx) * 640); max-height: 86vh; background: linear-gradient(180deg, #f2faf4 0%, #d6ede1 100%); border-radius: calc(var(--rpx) * 36); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: calc(var(--rpx) * 40) calc(var(--rpx) * 32) calc(var(--rpx) * 32); box-shadow: 0 calc(var(--rpx) * 24) calc(var(--rpx) * 80) rgba(10, 40, 24, 0.5); animation: pp-pop 0.46s cubic-bezier(0.18, 1.4, 0.4, 1) both; } @keyframes pp-pop { 0% { transform: scale(0.55) translateY(calc(var(--rpx) * 60)); opacity: 0; } 62% { transform: scale(1.05) translateY(calc(var(--rpx) * -8)); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } } [data-route="pages/day/day"] /* 顶部光带扫过：奖杯到手的那一道光 */ .pp-shine { position: absolute; left: -60%; top: 0; width: 40%; height: 100%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: pp-shine 1.6s ease-out 0.5s 2 both; pointer-events: none; z-index: 5; } @keyframes pp-shine { from { left: -60%; } to { left: 130%; } } [data-route="pages/day/day"] .pp-head { text-align: center; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/day/day"] .pp-kicker { display: block; font-size: calc(var(--rpx) * 24); color: #4f7a60; margin-bottom: calc(var(--rpx) * 6); animation: pp-fade 0.6s ease 0.2s both; } [data-route="pages/day/day"] .pp-title { display: block; font-size: calc(var(--rpx) * 40); font-weight: 700; color: #1f3d2b; animation: pp-pop 0.5s cubic-bezier(0.18, 1.4, 0.4, 1) 0.15s both; } [data-route="pages/day/day"] .pp-poster-wrap { position: relative; width: 100%; border-radius: calc(var(--rpx) * 24); overflow: hidden; background: #fff; min-height: calc(var(--rpx) * 420); display: flex; align-items: center; justify-content: center; } [data-route="pages/day/day"] .pp-poster { width: 100%; animation: pp-fade 0.5s ease both; } [data-route="pages/day/day"] .pp-loading { padding: calc(var(--rpx) * 60) 0; text-align: center; color: #4f7a60; font-size: calc(var(--rpx) * 24); } [data-route="pages/day/day"] .pp-loading-over { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #f2faf4; display: flex; flex-direction: column; align-items: center; justify-content: center; } [data-route="pages/day/day"] .pp-spinner { width: calc(var(--rpx) * 48); height: calc(var(--rpx) * 48); margin: 0 auto calc(var(--rpx) * 16); border: calc(var(--rpx) * 6) solid #cfe6d8; border-top-color: #2e7d4f; border-radius: 50%; animation: pp-spin 0.9s linear infinite; } @keyframes pp-spin { to { transform: rotate(360deg); } } [data-route="pages/day/day"] .pp-acts { display: flex; width: 100%; margin-top: calc(var(--rpx) * 28); gap: calc(var(--rpx) * 20); } [data-route="pages/day/day"] .pp-btn { flex: 1; text-align: center; line-height: 2.5; border-radius: calc(var(--rpx) * 999); font-size: calc(var(--rpx) * 32); font-weight: 700; animation: pp-fade 0.6s ease 0.35s both; } [data-route="pages/day/day"] .pp-btn::after { border: none; } [data-route="pages/day/day"] .pp-btn-main { background: linear-gradient(135deg, #ff9d4d 0%, #f27a33 100%); color: #fff; box-shadow: 0 calc(var(--rpx) * 10) calc(var(--rpx) * 24) rgba(242, 122, 51, 0.42); animation: pp-breathe 1.8s ease-in-out 1s infinite, pp-fade 0.6s ease 0.35s both; } @keyframes pp-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 calc(var(--rpx) * 10) calc(var(--rpx) * 24) rgba(242,122,51,0.42); } 50% { transform: scale(1.04); box-shadow: 0 calc(var(--rpx) * 14) calc(var(--rpx) * 34) rgba(242,122,51,0.58); } } [data-route="pages/day/day"] .pp-btn-sub { background: #fff; color: #2e7d4f; border: calc(var(--rpx) * 2) solid #bcd9c6; } [data-route="pages/day/day"] .pp-hint { margin-top: calc(var(--rpx) * 18); font-size: calc(var(--rpx) * 20); color: #5a7a66; text-align: center; animation: pp-fade 0.6s ease 0.5s both; } [data-route="pages/day/day"] .pp-close { position: absolute; right: calc(var(--rpx) * 18); top: calc(var(--rpx) * 14); width: calc(var(--rpx) * 56); height: calc(var(--rpx) * 56); line-height: calc(var(--rpx) * 52); text-align: center; font-size: calc(var(--rpx) * 40); color: #52705f; background: rgba(255,255,255,0.7); border-radius: 50%; } [data-route="pages/day/day"] /* ===== v7.0.181（木哥令「和老师预点评的进度条是一样的」）===== * 陪练点评中：与老师端等稿卡（v7.0.168 金焰流星）同一支条、同一套色值 —— * 夜色轨道 + 金焰条身 + 破格流星头（calc(var(--rpx) * 44) 大头 + 火舌），透明光晕溢出条上下 * 压在最上层；四段位（已接单/正在出批语/核验批语/发出点评）严格跟条走。 */ .cp-wait { padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 14); background: #f6f8f6; } [data-route="pages/day/day"] .cp-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/day/day"] .cp-name { font-size: calc(var(--rpx) * 24); font-weight: 600; color: #2f4a3c; } [data-route="pages/day/day"] .cp-time { font-size: calc(var(--rpx) * 20); color: #7d8a83; } [data-route="pages/day/day"] /* 轨道不裁切 —— 流星头光晕要溢出条上下以透明压在最上层（与 177 老师端同口径） */ .cp-track { position: relative; height: calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 7); background: linear-gradient(180deg, #232a36, #141a24); box-shadow: inset 0 calc(var(--rpx) * 2) calc(var(--rpx) * 6) rgba(0, 0, 0, 0.45); } [data-route="pages/day/day"] .cp-bar { position: relative; height: 100%; border-radius: calc(var(--rpx) * 7); background: linear-gradient(90deg, #d2570a, #ff9d00 30%, #ffc93c 55%, #ffe27a 80%, #fff3c4); box-shadow: 0 0 calc(var(--rpx) * 10) rgba(255, 157, 0, 0.55), 0 0 calc(var(--rpx) * 22) rgba(255, 119, 0, 0.3); transition: width 0.9s ease; overflow: hidden; } [data-route="pages/day/day"] .cp-head { position: absolute; top: 50%; width: 0; height: 0; z-index: 5; transition: left 0.9s ease; pointer-events: none; } [data-route="pages/day/day"] .cp-comet { position: absolute; left: calc(var(--rpx) * -22); top: calc(var(--rpx) * -22); width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe8, #ffd76a 60%, #ff9d00); box-shadow: 0 0 calc(var(--rpx) * 14) calc(var(--rpx) * 6) rgba(255, 244, 200, 0.95), 0 0 calc(var(--rpx) * 30) calc(var(--rpx) * 13) rgba(255, 170, 0, 0.7), 0 0 calc(var(--rpx) * 54) calc(var(--rpx) * 24) rgba(255, 110, 0, 0.35); animation: cp-comet 1.1s ease-in-out infinite; } [data-route="pages/day/day"] .cp-comet::before { content: ''; position: absolute; left: 50%; top: calc(var(--rpx) * -18); width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 26); margin-left: calc(var(--rpx) * -8); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(180deg, rgba(255, 244, 200, 0.95), rgba(255, 170, 0, 0.55) 62%, rgba(255, 110, 0, 0)); transform-origin: 50% 100%; animation: cp-flame 0.9s ease-in-out infinite; } @keyframes cp-comet { 0%, 100% { transform: scale(0.82); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } } @keyframes cp-flame { 0%, 100% { transform: scaleY(0.78) skewX(-6deg); opacity: 0.8; } 50% { transform: scaleY(1.16) skewX(5deg); opacity: 1; } } [data-route="pages/day/day"] /* 四段位：走到哪段哪段亮（点 #ff9d00 火焰脉冲、字 #b26a00），没到的灰着 */ .cp-steps { display: flex; justify-content: space-between; margin-top: calc(var(--rpx) * 16); padding: 0 calc(var(--rpx) * 4); } [data-route="pages/day/day"] .cp-step { display: flex; flex-direction: column; align-items: center; } [data-route="pages/day/day"] .cp-dot { width: calc(var(--rpx) * 14); height: calc(var(--rpx) * 14); border-radius: 50%; background: #cfd8d2; margin-bottom: calc(var(--rpx) * 6); } [data-route="pages/day/day"] .cp-step.is-on .cp-dot { background: #ff9d00; box-shadow: 0 0 calc(var(--rpx) * 8) rgba(255, 157, 0, 0.6); } [data-route="pages/day/day"] .cp-step.is-cur .cp-dot { animation: cp-dot-fire 1.1s ease-in-out infinite; } [data-route="pages/day/day"] .cp-step-t { font-size: calc(var(--rpx) * 20); color: #9aa5a0; } [data-route="pages/day/day"] .cp-step.is-on .cp-step-t { color: #7a5a1e; } [data-route="pages/day/day"] .cp-step.is-cur .cp-step-t { color: #b26a00; font-weight: 600; } @keyframes cp-dot-fire { 0%, 100% { transform: scale(1); box-shadow: 0 0 calc(var(--rpx) * 6) rgba(255, 157, 0, 0.5); } 50% { transform: scale(1.25); box-shadow: 0 0 calc(var(--rpx) * 14) rgba(255, 140, 0, 0.85); } } [data-route="pages/day/day"] .cp-msg { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); line-height: 1.6; color: #5b6a62; } [data-route="pages/day/day"] /* v7.0.184（木哥令）：常驻安心提示 —— 3-5 分钟 + 可离开可回来，琥珀色贴金焰条口吻 */ .cp-hint { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 20); line-height: 1.6; color: #b26a00; } [data-route="pages/day/day"] /* v7.0.185：逐字叠加图条 —— 与作业详情页（v7.0.110）同款同源 */ .gal-box { margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 8); padding: calc(var(--rpx) * 18) 0 calc(var(--rpx) * 14); border-top: calc(var(--rpx) * 2) solid #f0e6d8; } [data-route="pages/day/day"] .gal-head { display: flex; align-items: baseline; padding: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 12); } [data-route="pages/day/day"] .gal-title { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #5d4a2f; } [data-route="pages/day/day"] .gal-count { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #9b8a72; } [data-route="pages/day/day"] /* v7.0.200（木哥令）：图条 = 下图那张卡的语言 —— 暗卡、图居中、写得好徽章、图N·字说明； 常态高度 calc(var(--rpx) * 310)（下图 calc(var(--rpx) * 620) 的一半），点卡原地长到 calc(var(--rpx) * 620)，再点收回，全程不换页。 */ .gal-swiper { width: 100%; height: calc(var(--rpx) * 310); transition: height 0.28s ease; } [data-route="pages/day/day"] .gal-swiper-on { height: calc(var(--rpx) * 620); } [data-route="pages/day/day"] .gal-card { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0 calc(var(--rpx) * 6); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 8) calc(var(--rpx) * 6); overflow: hidden; border-radius: calc(var(--rpx) * 12); background: #ffffff; border: calc(var(--rpx) * 1) solid #f0e6d8; box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 8) rgba(93, 74, 47, 0.06); } [data-route="pages/day/day"] .gal-swiper-on .gal-card { margin: 0 calc(var(--rpx) * 14); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 16) calc(var(--rpx) * 12); border-color: #e8dcc8; box-shadow: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 16) rgba(93, 74, 47, 0.10); } [data-route="pages/day/day"] .gal-card-on { border-color: #e4d6bf; box-shadow: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 16) rgba(93, 74, 47, 0.12); } [data-route="pages/day/day"] .gal-img { flex: 1 1 0; height: 0; width: 100%; min-height: 0; } [data-route="pages/day/day"] .gal-card .gal-cap { flex-shrink: 0; margin-top: calc(var(--rpx) * 6); line-height: calc(var(--rpx) * 30); font-size: calc(var(--rpx) * 20); color: #8a7a66; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-route="pages/day/day"] .gal-swiper-on .gal-card .gal-cap { margin-top: calc(var(--rpx) * 10); line-height: calc(var(--rpx) * 34); font-size: calc(var(--rpx) * 24); } [data-route="pages/day/day"] .gal-badge { position: absolute; top: calc(var(--rpx) * 8); left: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 20); color: #3f7d52; background: rgba(76, 140, 92, 0.10); border: calc(var(--rpx) * 1) solid rgba(76, 140, 92, 0.22); } [data-route="pages/day/day"] .gal-swiper-on .gal-badge { top: calc(var(--rpx) * 24); left: calc(var(--rpx) * 24); } [data-route="pages/day/day"] .gal-badge-focus { color: #b4544f; background: rgba(200, 76, 72, 0.10); border-color: rgba(200, 76, 72, 0.22); } [data-route="pages/day/day"] /* v7.0.194（木哥令「因为有未提交作业，发现页的未读提醒呢？一连串的引导提醒」）： 这天还有作业没交 → 顶上引导卡（绿系，与「老师分享的作业没收下」卡区分开） */ .hw-todo-card { background: #f2fbf5; border: calc(var(--rpx) * 1) solid #bfe8cd; } [data-route="pages/day/day"] .hw-todo-t { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #1a3d28; line-height: calc(var(--rpx) * 44); } [data-route="pages/day/day"] .hw-todo-s { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #5b7a66; line-height: calc(var(--rpx) * 34); } /* ---- components/notify-center/notify-center.wxss ---- */ [data-comp="components/notify-center/notify-center"] /* 微信提醒 · 总览弹层 —— 全站绿色系，跟「去用/去赚」那一套同语言 */ .nc-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1200; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; } [data-comp="components/notify-center/notify-center"] .nc-sheet { width: calc(var(--rpx) * 600); box-sizing: border-box; padding: calc(var(--rpx) * 36) calc(var(--rpx) * 32) calc(var(--rpx) * 28); background: #ffffff; border-radius: calc(var(--rpx) * 24); } [data-comp="components/notify-center/notify-center"] .nc-title { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; text-align: center; } [data-comp="components/notify-center/notify-center"] .nc-sub { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #999999; text-align: center; } [data-comp="components/notify-center/notify-center"] .nc-item { display: flex; align-items: center; margin-top: calc(var(--rpx) * 22); padding: calc(var(--rpx) * 20); border: calc(var(--rpx) * 2) solid #eeeeee; border-radius: calc(var(--rpx) * 16); background: #fafafa; } [data-comp="components/notify-center/notify-center"] .nc-item-on { border-color: #bfe8cd; background: #f2fbf5; } [data-comp="components/notify-center/notify-center"] .nc-icon { font-size: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 18); flex-shrink: 0; } [data-comp="components/notify-center/notify-center"] .nc-main { flex: 1; min-width: 0; } [data-comp="components/notify-center/notify-center"] .nc-name { font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 500; } [data-comp="components/notify-center/notify-center"] .nc-desc { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #999999; } [data-comp="components/notify-center/notify-center"] .nc-state { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-comp="components/notify-center/notify-center"] .nc-state-on { color: #07c160; font-weight: 500; } [data-comp="components/notify-center/notify-center"] .nc-all { margin-top: calc(var(--rpx) * 30); height: calc(var(--rpx) * 88); line-height: calc(var(--rpx) * 88); text-align: center; border-radius: calc(var(--rpx) * 10); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 32); font-weight: 500; } [data-comp="components/notify-center/notify-center"] /* v4.86.151：全开之后那一条 —— 不可点，纯粹告诉人「已经好了」 */ .nc-alldone { margin-top: calc(var(--rpx) * 30); height: calc(var(--rpx) * 88); line-height: calc(var(--rpx) * 88); text-align: center; border-radius: calc(var(--rpx) * 10); background: #f2fbf5; border: calc(var(--rpx) * 2) solid #bfe8cd; color: #07c160; font-size: calc(var(--rpx) * 28); font-weight: 500; } [data-comp="components/notify-center/notify-center"] .nc-close { margin-top: calc(var(--rpx) * 18); height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); text-align: center; font-size: calc(var(--rpx) * 32); color: #576b95; } /* ---- components/cat-progress/cat-progress.wxss ---- */ [data-comp="components/cat-progress/cat-progress"] /* 猫走进度条 · 视频上传弹层（v4.86.224）—— 微信生态浅色：白卡 + 绿条 + 猫 */ .cp-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 400; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; } [data-comp="components/cat-progress/cat-progress"] .cp-card { width: calc(var(--rpx) * 560); background: #ffffff; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 52) calc(var(--rpx) * 48) calc(var(--rpx) * 44); } [data-comp="components/cat-progress/cat-progress"] .cp-title { text-align: center; font-size: calc(var(--rpx) * 28); color: #1a1a1a; } [data-comp="components/cat-progress/cat-progress"] .cp-pct { text-align: center; font-size: calc(var(--rpx) * 32); color: #07c160; font-weight: 600; margin-top: calc(var(--rpx) * 10); } [data-comp="components/cat-progress/cat-progress"] /* 轨道 + 绿色填充 + 猫：猫蹲在条头，left 与 pct 同步、同一条曲线 */ .cp-track { position: relative; height: calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 999); background: #ececec; margin-top: calc(var(--rpx) * 40); } [data-comp="components/cat-progress/cat-progress"] .cp-fill { height: 100%; border-radius: calc(var(--rpx) * 999); background: #07c160; transition: width 0.28s linear; } [data-comp="components/cat-progress/cat-progress"] .cp-cat { position: absolute; left: 6%; bottom: calc(var(--rpx) * 10); width: calc(var(--rpx) * 52); height: calc(var(--rpx) * 52); margin-left: calc(var(--rpx) * -26); transition: left 0.28s linear; } [data-comp="components/cat-progress/cat-progress"] .cp-sub { text-align: center; font-size: calc(var(--rpx) * 24); color: #b2b2b2; margin-top: calc(var(--rpx) * 32); } /* ---- components/video-quiz/video-quiz.wxss ---- */ [data-comp="components/video-quiz/video-quiz"] /* v4.86.229 木哥令：视频拍摄学习测验弹层（样式对齐 checkin 拍照小测验的墨韵白卡） */ .vq-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0, 0, 0, 0.72); display: flex; align-items: flex-end; } [data-comp="components/video-quiz/video-quiz"] .vq-sheet { width: 100%; background: #ffffff; border-radius: calc(var(--rpx) * 24) calc(var(--rpx) * 24) 0 0; padding: calc(var(--rpx) * 32) calc(var(--rpx) * 32) calc(calc(var(--rpx) * 32) + env(safe-area-inset-bottom)); box-sizing: border-box; max-height: 82vh; overflow-y: auto; } [data-comp="components/video-quiz/video-quiz"] .vq-title { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; text-align: center; padding-bottom: calc(var(--rpx) * 16); } [data-comp="components/video-quiz/video-quiz"] /* v4.86.327：swiper 只装图 —— 图 calc(var(--rpx) * 560) 宽、896×944 近方图 widthFix 要 calc(var(--rpx) * 590) 高， 原锁 calc(var(--rpx) * 560) 连图都裁 calc(var(--rpx) * 30)；留到 calc(var(--rpx) * 620) 图完整，标题/总说明在 swiper 外（wxml）。 */ .vq-swiper { height: calc(var(--rpx) * 620); } [data-comp="components/video-quiz/video-quiz"] .vq-learn { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } [data-comp="components/video-quiz/video-quiz"] .vq-img { width: calc(var(--rpx) * 560); border-radius: calc(var(--rpx) * 10); background: #f7f7f7; } [data-comp="components/video-quiz/video-quiz"] /* v4.86.327：标题/总说明搬到 swiper 外面按当前步渲染，永不被 swiper 裁剪 */ .vq-h { margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; text-align: center; } [data-comp="components/video-quiz/video-quiz"] .vq-p { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); line-height: 1.7; color: #888888; text-align: center; padding: 0 calc(var(--rpx) * 16); } [data-comp="components/video-quiz/video-quiz"] .vq-center { text-align: center; } [data-comp="components/video-quiz/video-quiz"] .vq-dots { display: flex; justify-content: center; gap: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 12) 0 calc(var(--rpx) * 4); } [data-comp="components/video-quiz/video-quiz"] .vq-dots text { width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #e5e5e5; } [data-comp="components/video-quiz/video-quiz"] .vq-dots text.on { background: #07c160; } [data-comp="components/video-quiz/video-quiz"] .vq-q { font-size: calc(var(--rpx) * 28); color: #191919; padding: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 16); line-height: 1.6; } [data-comp="components/video-quiz/video-quiz"] .vq-opt { border: calc(var(--rpx) * 2) solid #e5e5e5; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 28); color: #191919; margin-bottom: calc(var(--rpx) * 16); line-height: 1.5; } [data-comp="components/video-quiz/video-quiz"] .vq-opt-on { border-color: #07c160; background: #e8f7ee; color: #07c160; font-weight: 600; } [data-comp="components/video-quiz/video-quiz"] .vq-ans { border: calc(var(--rpx) * 2) solid #d5f0df; border-radius: calc(var(--rpx) * 10); background: #e8f7ee; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 28); color: #07c160; margin-bottom: calc(var(--rpx) * 12); line-height: 1.5; } [data-comp="components/video-quiz/video-quiz"] .vq-score { font-size: calc(var(--rpx) * 40); font-weight: 600; color: #07c160; text-align: center; padding: calc(var(--rpx) * 12) 0; } [data-comp="components/video-quiz/video-quiz"] .vq-score-low { color: #fa5151; } [data-comp="components/video-quiz/video-quiz"] .vq-btn { margin-top: calc(var(--rpx) * 16); height: calc(var(--rpx) * 88); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 32); font-weight: 600; } [data-comp="components/video-quiz/video-quiz"] .vq-btn-primary { background: #07c160; color: #ffffff; } [data-comp="components/video-quiz/video-quiz"] .vq-btn-ghost { background: #f7f7f7; color: #191919; } [data-comp="components/video-quiz/video-quiz"] /* v7.0.135（木哥令「测试部分加一个按键：跳过」）：白底描边二级键 —— 主键（交卷/重新做题）还是最显眼那个，跳过一看就知道能点、又不抢眼。 */ .vq-skip { margin-top: calc(var(--rpx) * 16); height: calc(var(--rpx) * 80); display: flex; align-items: center; justify-content: center; border: calc(var(--rpx) * 2) solid #d9dde3; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); color: #6b7280; } [data-comp="components/video-quiz/video-quiz"] .vq-hover { opacity: 0.8; } /* ---- components/pay-pop/pay-pop.wxss ---- */ [data-comp="components/pay-pop/pay-pop"] /* 价目弹层 · v4.86.540（木哥 2026-10-26 定稿「通体炫耀金」· 五套框里的框 A） * 金三档：金键 #fbeecd→#cfa64f / 深金带 #6d4b10→#6a480e / 卡片底 #fffdf8→#f8eac6。 * 结构：行档位（充墨宝/单次/券包）+ 会员横滑卡 + 权益明细（贴主键上方）+ 金主键。 * 一条规矩：这里不写任何价格，全部来自 utils/plans。 * 字号（v4.86.550 与 gold-dialog 同一张微信弹窗表）： * 标题 / 卡名 / 主键 = calc(var(--rpx) * 32) ｜ 行档名 / 权益正文 / 附注 = calc(var(--rpx) * 28) ｜ * 标签 / 单位 / 小注 / 分组小标 = calc(var(--rpx) * 24) ｜ 注脚 = calc(var(--rpx) * 20) ｜ 价目数字 = calc(var(--rpx) * 40)。 */ .pp-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.52); z-index: 999; display: flex; align-items: flex-end; } [data-comp="components/pay-pop/pay-pop"] .pp-sheet { width: 100%; max-height: 88vh; overflow-y: auto; border-radius: calc(var(--rpx) * 36) calc(var(--rpx) * 36) 0 0; background: linear-gradient(180deg, #fffdf8 0%, #fffaef 46%, #fdf4e2 100%); padding: 0 calc(var(--rpx) * 24) calc(var(--rpx) * 22); box-sizing: border-box; box-shadow: 0 calc(var(--rpx) * -20) calc(var(--rpx) * 60) rgba(90, 62, 10, 0.16); } [data-comp="components/pay-pop/pay-pop"] .pp-grip { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 8); border-radius: calc(var(--rpx) * 4); background: #e6d3a8; margin: calc(var(--rpx) * 16) auto 0; } [data-comp="components/pay-pop/pay-pop"] .pp-head { position: relative; padding: calc(var(--rpx) * 14) 0 calc(var(--rpx) * 16); } [data-comp="components/pay-pop/pay-pop"] /* 标题/副题给右上角 ✕ 让位：训练营名长时不能滑到关闭键底下（可换行，不吞字） */ .pp-title { padding-right: calc(var(--rpx) * 64); box-sizing: border-box; font-size: calc(var(--rpx) * 32); font-weight: 800; color: #4a3208; letter-spacing: calc(var(--rpx) * 0.5); line-height: 1.4; } [data-comp="components/pay-pop/pay-pop"] .pp-sub { padding-right: calc(var(--rpx) * 64); box-sizing: border-box; margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 28); color: #a37f3c; line-height: 1.5; } [data-comp="components/pay-pop/pay-pop"] .pp-x { position: absolute; right: 0; top: calc(var(--rpx) * 12); width: calc(var(--rpx) * 42); height: calc(var(--rpx) * 42); border-radius: 50%; background: rgba(168, 121, 44, 0.1); color: #a8792c; font-size: calc(var(--rpx) * 20); display: flex; align-items: center; justify-content: center; } [data-comp="components/pay-pop/pay-pop"] /* ---------- 档位行 ---------- */ .pp-row { border: calc(var(--rpx) * 1) solid #eddfbd; border-radius: calc(var(--rpx) * 20); background: #ffffff; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 18); margin-bottom: calc(var(--rpx) * 10); } [data-comp="components/pay-pop/pay-pop"] .pp-row-on { background: linear-gradient(135deg, #fffdf8 0%, #fdf5e0 58%, #f8eac6 100%); border-color: #dcbb7d; box-shadow: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 20) rgba(168, 121, 44, 0.14); } [data-comp="components/pay-pop/pay-pop"] .pp-row-off { opacity: 0.55; } [data-comp="components/pay-pop/pay-pop"] .pp-row-hover { opacity: 0.9; } [data-comp="components/pay-pop/pay-pop"] .pp-row-h { display: flex; align-items: center; justify-content: space-between; } [data-comp="components/pay-pop/pay-pop"] .pp-row-n { font-size: calc(var(--rpx) * 28); font-weight: 700; color: #3a2e12; display: flex; align-items: center; } [data-comp="components/pay-pop/pay-pop"] .pp-tag { margin-left: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); font-weight: 500; color: #9a7420; background: rgba(201, 151, 51, 0.14); border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 8); /* v7.0.136（木哥令「弹窗里会员的角标也显示不完整」）：小标一律不许被挤窄/折行 —— 行名挤的时候让名字换行，角标保证整条读得全。 */ flex: none; white-space: nowrap; } [data-comp="components/pay-pop/pay-pop"] .pp-row-r { font-size: calc(var(--rpx) * 24); color: #8a6b28; display: flex; align-items: center; white-space: nowrap; } [data-comp="components/pay-pop/pay-pop"] .pp-price { font-size: calc(var(--rpx) * 28); font-weight: 800; color: #a8791a; } [data-comp="components/pay-pop/pay-pop"] .pp-yuan { font-size: calc(var(--rpx) * 24); margin-left: calc(var(--rpx) * 2); } [data-comp="components/pay-pop/pay-pop"] .pp-caret { font-size: calc(var(--rpx) * 20); color: #c79733; margin-left: calc(var(--rpx) * 6); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); } [data-comp="components/pay-pop/pay-pop"] .pp-caret-on { transform: rotate(180deg); } [data-comp="components/pay-pop/pay-pop"] .pp-body { margin-top: calc(var(--rpx) * 12); padding-top: calc(var(--rpx) * 12); border-top: calc(var(--rpx) * 1) dashed #e8d6b0; } [data-comp="components/pay-pop/pay-pop"] /* ---------- 充墨宝四档面额（横滑） ---------- */ .pp-beans { width: 100%; white-space: nowrap; /* v7.0.058（木哥截图令「提醒标注显示不完整」）：「够这单」角标悬在档位卡顶外 * （top:calc(var(--rpx) * -12)），而 scroll-view 天生裁掉出界内容 —— 角标上半截永远被切。 * 给容器留出角标的高度，它就完整落在可视区里了。 */ padding-top: calc(var(--rpx) * 16); } [data-comp="components/pay-pop/pay-pop"] .pp-beanrow { display: inline-flex; } [data-comp="components/pay-pop/pay-pop"] .pp-bean { position: relative; width: calc(var(--rpx) * 148); margin-right: calc(var(--rpx) * 10); border: calc(var(--rpx) * 1) solid #eddfbd; border-radius: calc(var(--rpx) * 16); background: #ffffff; /* v7.0.048（木哥 10-30 午令「卡片上的提醒标注显示不完整」）：原来顶部只留 calc(var(--rpx) * 10)， * 「够这单」角标（top:calc(var(--rpx) * -12)、高约 calc(var(--rpx) * 36)）下缘正好压在大数字上，10 颗那档的 * 「10」被盖掉半截。顶部留到 calc(var(--rpx) * 30)，角标完整悬在卡沿外、数字完整。 */ padding: calc(var(--rpx) * 30) 0 calc(var(--rpx) * 10); text-align: center; } [data-comp="components/pay-pop/pay-pop"] .pp-bean-on { border-color: #c79733; background: linear-gradient(180deg, #fff8e4, #fdefcd); } [data-comp="components/pay-pop/pay-pop"] .pp-bean-n { font-size: calc(var(--rpx) * 28); font-weight: 800; color: #8a6320; } [data-comp="components/pay-pop/pay-pop"] .pp-bean-p { font-size: calc(var(--rpx) * 24); color: #a8853f; margin-top: calc(var(--rpx) * 2); } [data-comp="components/pay-pop/pay-pop"] .pp-bean-r { position: absolute; top: calc(var(--rpx) * -12); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d8b25c, #a8791a); color: #ffffff; font-size: calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 10); white-space: nowrap; /* v7.0.048：标注不许折行截断 */ padding: 0 calc(var(--rpx) * 8); } [data-comp="components/pay-pop/pay-pop"] /* ---------- 会员横滑卡 ---------- */ .pp-tierwrap { margin: calc(var(--rpx) * 4) 0 calc(var(--rpx) * 10); } [data-comp="components/pay-pop/pay-pop"] .pp-tierwrap-h { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--rpx) * 24); color: #a1834a; margin: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 10); } [data-comp="components/pay-pop/pay-pop"] .pp-tiers { width: 100%; white-space: nowrap; /* v7.0.139：与会员页同口径 —— 上留白搬到 .pp-tierrow（scroll-view 的 padding 在原生横滑容器里不一定进高度，会被裁）。 */ padding-top: 0; } [data-comp="components/pay-pop/pay-pop"] .pp-tierrow { display: inline-flex; align-items: flex-start; /* v7.0.139：calc(var(--rpx) * 26) 上留白接住悬出卡顶 calc(var(--rpx) * 12) 的角标（行是普通流，padding 必进高度） */ padding-top: calc(var(--rpx) * 26); } [data-comp="components/pay-pop/pay-pop"] .pp-tcard { position: relative; width: calc(var(--rpx) * 218); margin-right: calc(var(--rpx) * 12); border: calc(var(--rpx) * 1) solid #e6d3a8; border-radius: calc(var(--rpx) * 22); background: #ffffff; padding: calc(var(--rpx) * 14) calc(var(--rpx) * 16) calc(var(--rpx) * 12); } [data-comp="components/pay-pop/pay-pop"] .pp-tcard-on { background: linear-gradient(135deg, #fffdf8 0%, #fdf5e0 58%, #f8eac6 100%); border-color: #c79733; box-shadow: 0 calc(var(--rpx) * 6) calc(var(--rpx) * 20) rgba(168, 121, 44, 0.16); } [data-comp="components/pay-pop/pay-pop"] .pp-tn { font-size: calc(var(--rpx) * 32); font-weight: 800; color: #4a3a17; letter-spacing: calc(var(--rpx) * 0.4); } [data-comp="components/pay-pop/pay-pop"] .pp-tp { font-size: calc(var(--rpx) * 40); font-weight: 800; color: #a8791a; line-height: 1.25; margin-top: calc(var(--rpx) * 2); } [data-comp="components/pay-pop/pay-pop"] .pp-ty { font-size: calc(var(--rpx) * 24); font-weight: 600; margin-left: calc(var(--rpx) * 2); } [data-comp="components/pay-pop/pay-pop"] .pp-td { font-size: calc(var(--rpx) * 24); color: #a8853f; margin-top: calc(var(--rpx) * 2); line-height: 1.4; } [data-comp="components/pay-pop/pay-pop"] /* 弹窗会员卡角标（v7.0.137 定形态、v7.0.139 定颜色）：与会员页同一枚「炫耀金」角标， 骑在卡顶右角，不做横幅；字号 calc(var(--rpx) * 20) + nowrap，长标注一行读全、不压档名。 */ .pp-tbadge { position: absolute; top: calc(var(--rpx) * -12); right: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 3) calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 8); /* v7.0.139（木哥令「把角标的风格改为炫耀金的风格」）：红改金 —— 亮金渐变（左上吃光 → 右下压深）+ 白内高光 + 细金描边 + 深棕字， 与卡片的金边、金价目同一族，角标自己跳出来但不抢「全效」档名。 */ background: linear-gradient(135deg, #fdf3cd 0%, #eccd76 36%, #d4a93f 70%, #b8862a 100%); border: calc(var(--rpx) * 1) solid #f7e6b4; color: #4a3410; font-weight: 700; letter-spacing: calc(var(--rpx) * 0.6); font-size: calc(var(--rpx) * 20); line-height: 1.35; white-space: nowrap; box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 8) rgba(160, 112, 26, 0.35), inset 0 calc(var(--rpx) * 1) 0 rgba(255, 255, 255, 0.75); } [data-comp="components/pay-pop/pay-pop"] /* ---------- 权益明细（贴主键上方） ---------- */ .pp-perkbox { border: calc(var(--rpx) * 1) solid #e3cfa3; border-bottom: 0; border-radius: calc(var(--rpx) * 10) calc(var(--rpx) * 10) 0 0; background: linear-gradient(135deg, #fffdf8 0%, #fdf5e0 58%, #f8eac6 100%); margin-top: calc(var(--rpx) * 14); } [data-comp="components/pay-pop/pay-pop"] .pp-perkbox-h { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 10) calc(var(--rpx) * 10) 0 0; background: rgba(201, 151, 51, 0.14); font-size: calc(var(--rpx) * 24); color: #8a6b28; } [data-comp="components/pay-pop/pay-pop"] .pp-pb { font-size: calc(var(--rpx) * 28); font-weight: 800; color: #4a3208; } [data-comp="components/pay-pop/pay-pop"] .pp-perks { padding: calc(var(--rpx) * 8) calc(var(--rpx) * 20) 0; } [data-comp="components/pay-pop/pay-pop"] .pp-perk { display: flex; align-items: flex-start; line-height: 1.9; } [data-comp="components/pay-pop/pay-pop"] .pp-ck { font-size: calc(var(--rpx) * 24); color: #c79733; width: calc(var(--rpx) * 20); flex: 0 0 calc(var(--rpx) * 20); } [data-comp="components/pay-pop/pay-pop"] .pp-pk { font-size: calc(var(--rpx) * 28); color: #4a3a17; flex: 1; } [data-comp="components/pay-pop/pay-pop"] .pp-perkfine { padding: calc(var(--rpx) * 4) calc(var(--rpx) * 20) calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); color: #96907e; line-height: 1.5; } [data-comp="components/pay-pop/pay-pop"] /* ---------- 金色主键 ---------- */ .pp-buywrap { margin-top: calc(var(--rpx) * 14); } [data-comp="components/pay-pop/pay-pop"] .pp-btn { width: 100%; height: calc(var(--rpx) * 82); line-height: calc(var(--rpx) * 82); padding: 0; border-radius: calc(var(--rpx) * 10); background: linear-gradient(180deg, #fbeecd 0%, #eed79f 46%, #dcb96a 78%, #cfa64f 100%); color: #6b4a12; font-size: calc(var(--rpx) * 32); font-weight: 700; letter-spacing: calc(var(--rpx) * 0.4); box-shadow: inset 0 calc(var(--rpx) * 1) 0 rgba(255, 255, 255, 0.8), inset 0 0 0 calc(var(--rpx) * 1) rgba(255, 255, 255, 0.5), 0 calc(var(--rpx) * 8) calc(var(--rpx) * 24) rgba(150, 105, 25, 0.2); } [data-comp="components/pay-pop/pay-pop"] .pp-btn::after { border: none; } [data-comp="components/pay-pop/pay-pop"] /* 与权益块合成一个整体：上圆角归权益块，下圆角归主键 */ .pp-btn-attached { border-radius: 0; } [data-comp="components/pay-pop/pay-pop"] /* v7.0.110（T-041）：用券免单次键 —— 白底描边，压在金色主键上方，不抢主键 */ .pp-btn-coupon { margin-bottom: calc(var(--rpx) * 14); background: #fffdf6; color: #6b4a12; border: calc(var(--rpx) * 2) solid #d8c491; box-shadow: none; font-weight: 600; } [data-comp="components/pay-pop/pay-pop"] .pp-fine { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #96907e; line-height: 1.55; text-align: center; } [data-comp="components/pay-pop/pay-pop"] .pp-warn { color: #c25a2a; } [data-comp="components/pay-pop/pay-pop"] /* ---- v4.86.544：训练营的会员省钱条（摆在两档价上面那条）---- 540 撤掉的是「贴在主键上的旧会员条」，这一条是 A 线 536 那条令的原物： 先看见「会员 8 折 · 这单省 N 墨宝」，再看见两档价；点它翻到会员档。 类名 pp-cclub 而不是旧名 —— test-420 锁着「旧会员条零残留」。 */ .pp-cclub { display: flex; align-items: center; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); background: linear-gradient(135deg, #d8b25c, #a8792c); border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 14); } [data-comp="components/pay-pop/pay-pop"] .pp-cclub-hover { opacity: 0.88; } [data-comp="components/pay-pop/pay-pop"] /* 摆在价目上面那条：四角都圆（不贴主键，所以不做半圆角） */ .pp-cclub-top { border-radius: calc(var(--rpx) * 14); } [data-comp="components/pay-pop/pay-pop"] .pp-cclub-t { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 28); color: #ffffff; line-height: 1.4; } [data-comp="components/pay-pop/pay-pop"] .pp-cclub-btn { flex-shrink: 0; margin-left: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 999); background: #6b4d14; color: #ffffff; font-size: calc(var(--rpx) * 32); } [data-comp="components/pay-pop/pay-pop"] /* 从会员档退回训练营两档的那一行（金铜细字，不抢价目） */ .pp-back { padding: calc(var(--rpx) * 8) calc(var(--rpx) * 4) calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 28); color: #a8792c; } /* ---- pages/game/home/home.wxss ---- */ [data-route="pages/game/home/home"] /** * 猫咪乐园（v4.18） * 字号遵循微信规范：正文 calc(var(--rpx) * 28)(14px) / 次要 calc(var(--rpx) * 24)(12px) / 辅助最小 calc(var(--rpx) * 22)(11px) * 图标 40~calc(var(--rpx) * 48)(20~24px) */ .page-wrap { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24) calc(var(--rpx) * 60); box-sizing: border-box; } [data-route="pages/game/home/home"] .loading { padding: calc(var(--rpx) * 120) 0; text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); } [data-route="pages/game/home/home"] .login-card { margin-top: calc(var(--rpx) * 24); } [data-route="pages/game/home/home"] .login-title { font-size: calc(var(--rpx) * 32); color: #191919; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/game/home/home"] /* ================= ① 养猫（一只猫 + 四个动作 + 三条状态） ================= v4.86.67（木哥）：原「我的身份」头像卡整卡撤下（头像 / 昵称 / 勋章 / Lv 进度条都不再展示）； 卡里那句「还差多少成为下一级」挪到本卡标题行右侧（.scene-lv-hint）， 「我的猫 · 墨灵猫」那行搬进本卡（.cat-next-row，点它进猫咪升级详情页）。 */ .scene-head-top { display: flex; align-items: center; } [data-route="pages/game/home/home"] /* 标题行里的标题不吃通用卡的 margin，不然这一排会偏 */ .scene-head-top .card-title { margin-bottom: 0; flex-shrink: 0; } [data-route="pages/game/home/home"] /* 标题行右侧：还差多少成为下一级（原来在身份卡里）——右对齐小灰字，够长就折行 */ .scene-lv-hint { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 16); text-align: right; font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.4; } [data-route="pages/game/home/home"] /* 标题行第二排：展开/收起 ＋ 今天照顾了 X/4 */ .scene-head-sub { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--rpx) * 10); } [data-route="pages/game/home/home"] .scene-head-sub .scene-tip-toggle { margin-right: calc(var(--rpx) * 14); } [data-route="pages/game/home/home"] /* 我的猫 · 墨灵猫：猫名跟着等级长；点右边去猫咪升级详情页（全站唯一入口） */ .cat-next-row { display: flex; align-items: center; margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 18); border-radius: calc(var(--rpx) * 14); background: #e8f7ee; border: calc(var(--rpx) * 1) solid #d5f0df; } [data-route="pages/game/home/home"] .cat-next-face { width: calc(var(--rpx) * 34); height: calc(var(--rpx) * 34); margin-right: calc(var(--rpx) * 10); flex-shrink: 0; display: block; } [data-route="pages/game/home/home"] .cat-next-label { font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [data-route="pages/game/home/home"] .cat-next-go { flex-shrink: 0; max-width: calc(var(--rpx) * 300); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--rpx) * 24); color: #07c160; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 16); font-weight: 500; } [data-route="pages/game/home/home"] /* ================= ② 养猫场景 ================= */ .scene-card { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 20) calc(var(--rpx) * 24); } [data-route="pages/game/home/home"] .scene-head { margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/game/home/home"] .scene-cat-name { font-size: calc(var(--rpx) * 24); font-weight: 400; color: #888888; } [data-route="pages/game/home/home"] .scene { position: relative; height: calc(var(--rpx) * 480); border-radius: calc(var(--rpx) * 20); overflow: hidden; background: #eef9f1; } [data-route="pages/game/home/home"] .scene-wall { position: absolute; left: 0; top: 0; right: 0; height: calc(var(--rpx) * 340); background: linear-gradient(180deg, #ddf3e5, #c4ead2); } [data-route="pages/game/home/home"] .scene-floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--rpx) * 180); background: linear-gradient(180deg, #9ad7ac, #7fc394); border-top: calc(var(--rpx) * 6) solid #6cb383; } [data-route="pages/game/home/home"] /* v4.86.201（木哥）：原占位窗框（scene-window / sun / cloud）撤下，同位置换 「家庭」入口。三维感是画出来的：屋顶/房身两块渐变叠出受光面与侧面， 再压一道投影，点上去整座小屋轻轻下压（hover 态），像一枚立体的图标。 */ .scene-home { position: absolute; left: calc(var(--rpx) * 44); top: calc(var(--rpx) * 30); width: calc(var(--rpx) * 170); display: flex; flex-direction: column; align-items: center; } [data-route="pages/game/home/home"] .scene-home-hover { transform: translateY(calc(var(--rpx) * 4)) scale(0.97); opacity: 0.88; } [data-route="pages/game/home/home"] .scene-home-house { position: relative; width: calc(var(--rpx) * 130); height: calc(var(--rpx) * 104); filter: drop-shadow(0 calc(var(--rpx) * 10) calc(var(--rpx) * 12) rgba(23, 92, 55, 0.22)); } [data-route="pages/game/home/home"] /* v4.86.250（木哥令）：「家庭的图标做闪光效果。明显一些的」—— 金色光圈一明一暗循环 + 轻微放大呼吸，1.2s 一轮，一眼能看出这可以点。 只动 filter 与 opacity，不碰 transform（hover 态的按压位移不冲突）。 */ .scene-home-house { animation: home-shine 1.2s ease-in-out infinite; } @keyframes home-shine { 0%, 100% { filter: drop-shadow(0 calc(var(--rpx) * 10) calc(var(--rpx) * 12) rgba(23, 92, 55, 0.22)) drop-shadow(0 0 calc(var(--rpx) * 0) rgba(255, 199, 79, 0)); opacity: 1; } 50% { transform: scale(1.07); filter: drop-shadow(0 calc(var(--rpx) * 10) calc(var(--rpx) * 12) rgba(23, 92, 55, 0.22)) drop-shadow(0 0 calc(var(--rpx) * 22) rgba(255, 199, 79, 0.95)) drop-shadow(0 0 calc(var(--rpx) * 44) rgba(255, 236, 170, 0.6)); opacity: 0.96; } } [data-route="pages/game/home/home"] /* 屋顶：等腰梯形（左亮右暗两片渐变拼出立体切面） */ .scene-home-roof { position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: calc(var(--rpx) * 65) solid transparent; border-right: calc(var(--rpx) * 65) solid transparent; border-bottom: calc(var(--rpx) * 46) solid #e4684f; } [data-route="pages/game/home/home"] /* 房身：正面受光、右侧压暗 —— 用内嵌渐变造体积 */ .scene-home-body { position: absolute; left: calc(var(--rpx) * 14); top: calc(var(--rpx) * 46); width: calc(var(--rpx) * 102); height: calc(var(--rpx) * 58); border-radius: 0 0 calc(var(--rpx) * 8) calc(var(--rpx) * 8); background: linear-gradient(180deg, #fff4e2 0%, #ffe3c2 62%, #f3c99b 100%); border: calc(var(--rpx) * 3) solid #e8a06b; border-top: none; overflow: hidden; } [data-route="pages/game/home/home"] /* 门：拱形，深色 + 内阴影，玻璃上一点暖光 */ .scene-home-door { position: absolute; left: 50%; bottom: 0; width: calc(var(--rpx) * 26); height: calc(var(--rpx) * 36); margin-left: calc(var(--rpx) * -13); border-radius: calc(var(--rpx) * 13) calc(var(--rpx) * 13) 0 0; background: linear-gradient(180deg, #a4653d, #7c4526); box-shadow: inset 0 calc(var(--rpx) * 4) calc(var(--rpx) * 6) rgba(0, 0, 0, 0.25); } [data-route="pages/game/home/home"] .scene-home-window-l, [data-route="pages/game/home/home"] .scene-home-window-r { position: absolute; top: calc(var(--rpx) * 12); width: calc(var(--rpx) * 18); height: calc(var(--rpx) * 18); border-radius: calc(var(--rpx) * 5); background: linear-gradient(180deg, #bfe6f7, #8ecdea); border: calc(var(--rpx) * 2) solid #d89a68; } [data-route="pages/game/home/home"] .scene-home-window-l { left: calc(var(--rpx) * 10); } [data-route="pages/game/home/home"] .scene-home-window-r { right: calc(var(--rpx) * 10); } [data-route="pages/game/home/home"] .scene-home-text { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); color: #0a9e4d; font-weight: 600; letter-spacing: calc(var(--rpx) * 2); text-shadow: 0 calc(var(--rpx) * 2) 0 rgba(255, 255, 255, 0.8); } [data-route="pages/game/home/home"] /* v4.86.67（木哥）：原来是墙上一枚奖杯画框；奖杯撤下，同一个位置改成「进入乐园」门口 —— 点它进墨灵猫 · 十境飞升（原「乐园玩法」绿卡整卡并进这里，不再单独占一张卡）。 */ .scene-door { position: absolute; right: calc(var(--rpx) * 44); top: calc(var(--rpx) * 46); width: calc(var(--rpx) * 132); height: calc(var(--rpx) * 100); background: #ffffff; border: calc(var(--rpx) * 6) solid #8fd0a4; border-radius: calc(var(--rpx) * 16); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 calc(var(--rpx) * 8) calc(var(--rpx) * 18) rgba(23, 92, 55, 0.14); } [data-route="pages/game/home/home"] .scene-door-hover { opacity: 0.82; } [data-route="pages/game/home/home"] .scene-door-icon { font-size: calc(var(--rpx) * 40); line-height: 1; } [data-route="pages/game/home/home"] .scene-door-text { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 20); color: #0a9e4d; font-weight: 600; letter-spacing: calc(var(--rpx) * 1); } [data-route="pages/game/home/home"] .scene-rug { position: absolute; left: 50%; bottom: calc(var(--rpx) * 108); width: calc(var(--rpx) * 360); height: calc(var(--rpx) * 92); margin-left: calc(var(--rpx) * -180); background: #b9e5c6; border-radius: 50%; border: calc(var(--rpx) * 6) solid #9bd3ab; } [data-route="pages/game/home/home"] /* v4.86.326：猫语播报开关（场景左下角一枚圆键；关掉压暗+🔇，本地记住） */ .scene-voice { position: absolute; left: calc(var(--rpx) * 24); bottom: calc(var(--rpx) * 132); width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: calc(var(--rpx) * 2) solid #9bd3ab; display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 28); z-index: 5; } [data-route="pages/game/home/home"] .scene-voice-off { opacity: 0.55; } [data-route="pages/game/home/home"] /* 猫本体：外层负责"随等级长大"，内层负责呼吸 */ /* v4.84.1：木哥「猫再比现在大三分之一」——200×190 → 266×253（≈×1.333）。 底边锚点 bottom:calc(var(--rpx) * 152) 不动，所以是「原地长大」：脚还落在原来的地面线上， 只是整只猫高了一头（白圆片 ::before 按 96% 跟着放大）。 */ .pet-cat-wrap { position: absolute; left: 50%; bottom: calc(var(--rpx) * 152); width: calc(var(--rpx) * 266); height: calc(var(--rpx) * 253); margin-left: calc(var(--rpx) * -133); z-index: 2; } [data-route="pages/game/home/home"] .cat-level-1 { transform: scale(0.8); } [data-route="pages/game/home/home"] .cat-level-2 { transform: scale(0.9); } [data-route="pages/game/home/home"] .cat-level-3 { transform: scale(1); } [data-route="pages/game/home/home"] .cat-level-4 { transform: scale(1.1); } [data-route="pages/game/home/home"] .pet-cat { position: relative; width: 100%; height: 100%; animation: pet-breathe 3.2s ease-in-out infinite; } [data-route="pages/game/home/home"] /* 白色圆片垫底：绿线猫压在绿场景上会融掉（对比度不到 2:1）， 垫一个白圆像聚光灯，线还是那根线，但跳出来了 */ .pet-cat::before { content: ''; position: absolute; left: 50%; top: 50%; width: 96%; height: 96%; transform: translate(-50%, -50%); border-radius: 50%; background: #ffffff; box-shadow: 0 calc(var(--rpx) * 8) calc(var(--rpx) * 20) rgba(23, 92, 55, 0.12); } @keyframes pet-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--rpx) * -8)); } } [data-route="pages/game/home/home"] .pet-cat-img { position: relative; /* 压在白圆片上 */ width: 100%; height: 100%; display: block; } [data-route="pages/game/home/home"] /* ================= 刺刺毛（v4.27）：没照顾好时每 3 秒露一次丑脸 ================= 小猫的「最少照顾次数」没达到（喂饭 1 次/天、铲屎 1 次/天、两天梳毛、一周洗澡）， 就把猫画成灰扑扑、炸毛、瘪嘴的样子闪一下，同时叫一轮猫叫催主人去做任务。 v4.29 起：几件事没做好就几只猫一起叫，叫声高低长短跟着猫的成长形态走（见 utils/meow.js）。 */ .pet-cat.cat-sad { animation: cat-shiver 0.4s linear infinite; } @keyframes cat-shiver { 0%, 100% { transform: translateX(calc(var(--rpx) * -4)); } 50% { transform: translateX(calc(var(--rpx) * 4)); } } [data-route="pages/game/home/home"] /* v4.86.250（木哥令「猫的周围的图形效果，删除」）：原炸毛刺刺毛 （.cf-spikes / .cf-spike / .sp1~.sp6 六枚灰三角）整块撤下，样式一并清掉。 */ /* 生气的小符号 */ .cf-mad { position: absolute; left: calc(var(--rpx) * -26); top: calc(var(--rpx) * -32); font-size: calc(var(--rpx) * 40); animation: mad-pop 0.6s ease-in-out infinite alternate; } @keyframes mad-pop { from { transform: scale(0.86); } to { transform: scale(1.12); } } [data-route="pages/game/home/home"] /* v4.86.375（371 号令）：猫头顶的拟声气泡（.cf-meow / meow-float）整块撤下 （木哥令：那个字不要了，直接说事）；.cat-bubble（366 号令）承接猫的话。 */ /* v4.86.93（木哥）：「不要弹窗说明什么动作没有做，弹窗取消」—— 原「刺刺毛横幅」（.cat-cry / .cc-*）与「常驻提示条」（.sad-tip / .sad-tip-*）整块撤掉； 改成四个动作图标自己说话：需要做的闪动 + 亮起，没什么要做的不亮。 判定只有一处：item.taskDot（这件事还没做完），见 utils/growth.petTaskRows。 */ @keyframes obj-need-blink { 0%, 100% { border-color: #07c160; box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.45); } 50% { border-color: #ffb300; box-shadow: 0 0 0 calc(var(--rpx) * 12) rgba(255, 179, 0, 0); } } [data-route="pages/game/home/home"] /* 这件事还没做完 → 亮着 + 一直闪（绿金描边呼吸）；点一下：有票去用、没票去赚 */ .scene-obj.obj-need { opacity: 1; background: #ffffff; border-color: #07c160; animation: obj-need-blink 1.4s ease-in-out infinite; } [data-route="pages/game/home/home"] /* 没什么要做的 → 不亮（压暗），不跟"要做"的那几个抢眼睛 */ .scene-obj.obj-idle { opacity: 0.5; border-color: #eeeeee; } [data-route="pages/game/home/home"] /* 四个可点动作：底部一条，等宽排开（场景宽约 calc(var(--rpx) * 662)，4 格 calc(var(--rpx) * 92) + 间距刚好放下） */ .scene-objs { position: absolute; left: 0; right: 0; bottom: calc(var(--rpx) * 18); z-index: 4; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 calc(var(--rpx) * 10); box-sizing: border-box; } [data-route="pages/game/home/home"] .scene-obj { /* 相对定位是必须的：右上角的角标 / 小红点要贴在自己这一格的右上角（v4.29 补） */ position: relative; width: calc(var(--rpx) * 92); height: calc(var(--rpx) * 92); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.94); border: calc(var(--rpx) * 3) solid #e5e5e5; border-radius: calc(var(--rpx) * 20); } [data-route="pages/game/home/home"] .obj-emoji { font-size: calc(var(--rpx) * 40); line-height: 1; } [data-route="pages/game/home/home"] /* v4.74.12 四大件统一用游戏里的 pick 图（同图拷进主包 /images/pet/） */ .obj-img { width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); } [data-route="pages/game/home/home"] .obj-label { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); line-height: 1.1; color: #888888; font-weight: 600; } [data-route="pages/game/home/home"] .obj-done { opacity: 0.4; } [data-route="pages/game/home/home"] /* 右上角的次数角标：>0 才显示，0 不显示 */ .obj-badge { position: absolute; top: calc(var(--rpx) * -10); right: calc(var(--rpx) * -10); min-width: calc(var(--rpx) * 30); height: calc(var(--rpx) * 30); padding: 0 calc(var(--rpx) * 6); box-sizing: border-box; border-radius: calc(var(--rpx) * 999); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 30); text-align: center; font-weight: 700; } [data-route="pages/game/home/home"] /* 同时还有小红点时，角标往左让一让，别把小红点压住（v4.29） */ .obj-badge-shift { right: calc(var(--rpx) * 16); } [data-route="pages/game/home/home"] /* 右上角小红点（v4.26 起，v4.29 改口径）：这件事还没做完——今天的任务没做， 或者猫还没照顾好。样式对齐微信未读红点（小红点 + 白边）。 */ .obj-dot { position: absolute; top: calc(var(--rpx) * -6); right: calc(var(--rpx) * -6); z-index: 2; width: calc(var(--rpx) * 18); height: calc(var(--rpx) * 18); border-radius: 50%; background: #fa5151; border: calc(var(--rpx) * 3) solid #ffffff; } [data-route="pages/game/home/home"] .obj-locked { opacity: 0.62; border-style: dashed; } [data-route="pages/game/home/home"] /* ---- 四个动作 ＋ 今天的任务（v4.26 合并表） ---- */ .pt-list { margin-top: calc(var(--rpx) * 18); border-top: calc(var(--rpx) * 1) solid #f2f2f2; padding-top: calc(var(--rpx) * 6); } [data-route="pages/game/home/home"] .pt-row { display: flex; align-items: center; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 6); border-bottom: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/game/home/home"] .pt-row:last-child { border-bottom: none; } [data-route="pages/game/home/home"] .pt-row:active { background: #ececec; border-radius: calc(var(--rpx) * 14); } [data-route="pages/game/home/home"] .pt-off { opacity: 0.86; } [data-route="pages/game/home/home"] .pt-icon-wrap { position: relative; width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f7f7f7; border-radius: calc(var(--rpx) * 16); } [data-route="pages/game/home/home"] .pt-icon { font-size: calc(var(--rpx) * 40); line-height: 1; } [data-route="pages/game/home/home"] /* v4.74.12 四大件统一用游戏里的 pick 图 */ .pt-img { width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); } [data-route="pages/game/home/home"] .pt-badge { position: absolute; top: calc(var(--rpx) * -12); right: calc(var(--rpx) * -12); min-width: calc(var(--rpx) * 28); height: calc(var(--rpx) * 28); padding: 0 calc(var(--rpx) * 6); box-sizing: border-box; border-radius: calc(var(--rpx) * 999); background: #fa5151; color: #ffffff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 28); text-align: center; font-weight: 600; } [data-route="pages/game/home/home"] /* 同时还有小红点时，角标往左让一让（v4.29） */ .pt-badge-shift { right: calc(var(--rpx) * 16); } [data-route="pages/game/home/home"] /* 右上角小红点（v4.29 口径）：这件事还没做完 */ .pt-dot { position: absolute; top: calc(var(--rpx) * -8); right: calc(var(--rpx) * -8); z-index: 2; width: calc(var(--rpx) * 18); height: calc(var(--rpx) * 18); border-radius: 50%; background: #fa5151; border: calc(var(--rpx) * 3) solid #ffffff; } [data-route="pages/game/home/home"] .pt-main { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 18); } [data-route="pages/game/home/home"] .pt-line { display: flex; align-items: baseline; } [data-route="pages/game/home/home"] .pt-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; flex-shrink: 0; } [data-route="pages/game/home/home"] .pt-state { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #888888; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [data-route="pages/game/home/home"] .pt-state-on { color: #07c160; font-weight: 600; } [data-route="pages/game/home/home"] .pt-state-done { color: #07c160; } [data-route="pages/game/home/home"] .pt-task { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [data-route="pages/game/home/home"] /* 照顾进度：够了几次（灰）／没照顾够（红） */ .pt-care { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); flex-shrink: 0; } [data-route="pages/game/home/home"] .pt-care-ok { color: #888888; } [data-route="pages/game/home/home"] .pt-care-bad { color: #fa5151; font-weight: 600; } [data-route="pages/game/home/home"] .pt-task-warn { color: #fa9d3b; } [data-route="pages/game/home/home"] .pt-done .pt-task { color: #b2b2b2; } [data-route="pages/game/home/home"] .pt-go { flex-shrink: 0; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #07c160; font-weight: 600; } [data-route="pages/game/home/home"] /* 猫名 + 情绪 + 等级进度 */ .cat-head { display: flex; align-items: center; margin-top: calc(var(--rpx) * 22); } [data-route="pages/game/home/home"] .cat-head-name { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/game/home/home"] .cat-head-tag { margin-left: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); color: #07c160; background: #e8f7ee; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 12); } [data-route="pages/game/home/home"] .lv-bar { height: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 999); background: #f2f2f2; margin-top: calc(var(--rpx) * 16); overflow: hidden; } [data-route="pages/game/home/home"] .lv-bar-fill { height: 100%; border-radius: calc(var(--rpx) * 999); background: #07c160; transition: width 0.3s; } [data-route="pages/game/home/home"] .cat-hint { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/game/home/home"] .pet-stats { display: flex; gap: calc(var(--rpx) * 20); margin-top: calc(var(--rpx) * 20); } [data-route="pages/game/home/home"] .pet-stat { flex: 1; } [data-route="pages/game/home/home"] .pet-stat-k { font-size: calc(var(--rpx) * 24); color: #888888; margin-bottom: calc(var(--rpx) * 8); } [data-route="pages/game/home/home"] .pet-bar { height: calc(var(--rpx) * 14); background: #f2f2f2; border-radius: calc(var(--rpx) * 999); overflow: hidden; } [data-route="pages/game/home/home"] .pet-bar-fill { height: 100%; border-radius: calc(var(--rpx) * 999); transition: width 0.4s ease; } [data-route="pages/game/home/home"] .pet-bar-food { background: #07c160; } [data-route="pages/game/home/home"] .pet-bar-clean { background: #576b95; } [data-route="pages/game/home/home"] .pet-bar-mood { background: #07c160; } [data-route="pages/game/home/home"] .scene-tip { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/game/home/home"] /* v4.74.13 玩法说明默认折叠：「展开/收起」两字按钮在左侧，说明文字展开时跟在旁边 */ .scene-tip-row { display: flex; align-items: flex-start; margin-top: calc(var(--rpx) * 16); } [data-route="pages/game/home/home"] .scene-tip-toggle { flex-shrink: 0; margin-right: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 22); border: calc(var(--rpx) * 1) solid rgba(217, 182, 74, 0.55); border-radius: calc(var(--rpx) * 999); background: rgba(217, 182, 74, 0.12); font-size: calc(var(--rpx) * 20); color: #8a6d1f; line-height: 1.4; } [data-route="pages/game/home/home"] .scene-tip-toggle-hover { background: rgba(217, 182, 74, 0.28); } [data-route="pages/game/home/home"] .scene-tip-row .scene-tip { flex: 1; margin-top: 0; } [data-route="pages/game/home/home"] /* ================= ② 资源条 ================= */ .res-row { display: flex; gap: calc(var(--rpx) * 14); margin: 0 0 calc(var(--rpx) * 28); } [data-route="pages/game/home/home"] .res { flex: 1; background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 8) calc(var(--rpx) * 16); text-align: center; } [data-route="pages/game/home/home"] .res-num { font-size: calc(var(--rpx) * 40); font-weight: 600; color: #191919; } [data-route="pages/game/home/home"] .res-max { font-size: calc(var(--rpx) * 24); color: #b2b2b2; font-weight: 400; } [data-route="pages/game/home/home"] .res-label { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/game/home/home"] .res-tick { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/game/home/home"] /* ================= ④ 玩法网格 ================= */ .game-grid { display: flex; flex-wrap: wrap; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 8); } [data-route="pages/game/home/home"] .game-item { width: calc(50% - calc(var(--rpx) * 8)); box-sizing: border-box; background: #f7f7f7; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 16) calc(var(--rpx) * 18); } [data-route="pages/game/home/home"] .game-icon { font-size: calc(var(--rpx) * 48); line-height: 1; } [data-route="pages/game/home/home"] .game-name { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 500; } [data-route="pages/game/home/home"] .game-desc { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #b2b2b2; line-height: 1.5; min-height: calc(var(--rpx) * 66); } [data-route="pages/game/home/home"] .game-foot { margin-top: calc(var(--rpx) * 10); display: flex; align-items: center; gap: calc(var(--rpx) * 10); } [data-route="pages/game/home/home"] .game-cost { font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/game/home/home"] .game-used { font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/game/home/home"] .game-locktext { font-size: calc(var(--rpx) * 24); color: #fa9d3b; } [data-route="pages/game/home/home"] .game-locked { opacity: 0.55; } [data-route="pages/game/home/home"] .game-locked .game-icon { filter: grayscale(1); } [data-route="pages/game/home/home"] /* ================= ⑤ 跟猫说话 ================= */ .cat-talk { display: flex; align-items: center; margin-bottom: calc(var(--rpx) * 28); padding: calc(var(--rpx) * 24); background: #ffffff; border-radius: calc(var(--rpx) * 16); } [data-route="pages/game/home/home"] .cat-talk-icon { font-size: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 14); } [data-route="pages/game/home/home"] /* v4.74.16：说说话卡头像换成小程序的圆猫 logo */ .cat-talk-avatar { width: calc(var(--rpx) * 56); height: calc(var(--rpx) * 56); margin-right: calc(var(--rpx) * 14); border-radius: 50%; flex-shrink: 0; background: #f2f2f2; } [data-route="pages/game/home/home"] .cat-talk-text { flex: 1; font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 500; } [data-route="pages/game/home/home"] .cat-talk-go { font-size: calc(var(--rpx) * 40); font-weight: 300; line-height: 1; color: #c8c8cd; } [data-route="pages/game/home/home"] /* ================= ⑥ 我的家庭 ================= */ .pet-family-head { margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/game/home/home"] .pet-family-name { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/game/home/home"] .link-muted { font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/game/home/home"] .fam-row { display: flex; align-items: center; padding: calc(var(--rpx) * 18) 0; border-bottom: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/game/home/home"] .fam-row:last-of-type { border-bottom: none; } [data-route="pages/game/home/home"] .fam-main { flex: 1; min-width: 0; } [data-route="pages/game/home/home"] .fam-name { font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/game/home/home"] .pet-family-dot { width: calc(var(--rpx) * 18); height: calc(var(--rpx) * 18); border-radius: 50%; background: #b2b2b2; } [data-route="pages/game/home/home"] .pet-family-dot-on { background: #07c160; } [data-route="pages/game/home/home"] .pet-share-btn { margin-top: calc(var(--rpx) * 20); } [data-route="pages/game/home/home"] .pet-btn { margin-top: calc(var(--rpx) * 20); } [data-route="pages/game/home/home"] .pet-join-row { display: flex; gap: calc(var(--rpx) * 14); margin-top: calc(var(--rpx) * 20); } [data-route="pages/game/home/home"] .pet-join-input { flex: 1; background: #f7f7f7; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 14) calc(var(--rpx) * 26); font-size: calc(var(--rpx) * 28); } [data-route="pages/game/home/home"] .pet-join-btn { flex-shrink: 0; width: calc(var(--rpx) * 160); font-size: calc(var(--rpx) * 28); } [data-route="pages/game/home/home"] .err { margin-top: calc(var(--rpx) * 20); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/game/home/home"] /* 玩法卡右上角「全部玩法 ›」链接 */ .link { color: #576b95; font-size: calc(var(--rpx) * 24); } [data-route="pages/game/home/home"] /* ---------- 分享换灵力（B-4 / G-17：可选、低调、不逼分享） ---------- */ .share-energy { display: flex; flex-direction: column; gap: calc(var(--rpx) * 16); } [data-route="pages/game/home/home"] .share-energy-title { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/game/home/home"] .share-energy-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); color: #888888; line-height: 1.6; } [data-route="pages/game/home/home"] .share-energy-btn { margin: 0; background: #ffffff; color: #07c160; font-size: calc(var(--rpx) * 28); border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 10); line-height: 2.3; } [data-route="pages/game/home/home"] .share-energy-note { text-align: center; font-size: calc(var(--rpx) * 20); color: #b2b2b2; } [data-route="pages/game/home/home"] /* v4.86.234（木哥令）：展开里的「获得和使用方法」—— 小标题 + 一行一条口径。 字号只走本仓 5 档（20/24/28/32/40），颜色沿用说明那块灰。 */ .scene-tip-h { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/game/home/home"] .scene-tip-row2 { margin-top: calc(var(--rpx) * 8); } [data-route="pages/game/home/home"] .scene-tip-k { font-size: calc(var(--rpx) * 24); color: #555555; } [data-route="pages/game/home/home"] .scene-tip-v { display: block; font-size: calc(var(--rpx) * 20); color: #999999; line-height: 1.6; } [data-route="pages/game/home/home"] /* ---------------- v4.86.364（木哥 361 号令）：和猫说话 ---------------- 猫说完会主动开聆听窗（👂）；这里给用户主动开口的键（按住说话，松手猫回话）。 轻量、安静：不抢养猫卡的戏，listen 态轻呼吸提示现在可以直接开口。 */ .cat-talk { margin: calc(var(--rpx) * 16) calc(var(--rpx) * 24) 0; display: flex; align-items: center; } [data-route="pages/game/home/home"] .cat-talk-state { font-size: calc(var(--rpx) * 24); color: #07c160; margin-right: calc(var(--rpx) * 16); white-space: nowrap; } [data-route="pages/game/home/home"] .cat-talk-btn { flex: 1; display: flex; align-items: center; justify-content: center; height: calc(var(--rpx) * 72); text-align: center; font-size: calc(var(--rpx) * 28); color: #07c160; background: #eef9f2; border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 999); } [data-route="pages/game/home/home"] /* v4.86.538：全站统一的微信语音图标（圆圈+声波），这里是绿色版 */ .cat-talk-ico { width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); margin-right: calc(var(--rpx) * 8); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48Y2lyY2xlIGN4PSI0OCIgY3k9IjQ4IiByPSI0MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDdjMTYwIiBzdHJva2Utd2lkdGg9IjUiLz48Y2lyY2xlIGN4PSIzNyIgY3k9IjQ4IiByPSI1IiBmaWxsPSIjMDdjMTYwIi8+PHBhdGggZD0iTTQ5IDM5YTEyIDEyIDAgMCAxIDAgMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzA3YzE2MCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNNTcgMzBhMjQgMjQgMCAwIDEgMCAzNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDdjMTYwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg=="); } [data-route="pages/game/home/home"] .cat-talk-btn-hover { background: #07c160; color: #ffffff; } [data-route="pages/game/home/home"] .cat-talk-live { animation: voice-flash 1.4s ease-in-out infinite; } [data-route="pages/game/home/home"] /* v4.86.370（366 号令）：猫的话气泡 —— 猫说的每一句同步上屏（声音哑了字也在） */ .cat-bubble { position: absolute; left: 50%; top: calc(var(--rpx) * 16); transform: translateX(-50%); max-width: 82%; box-sizing: border-box; padding: calc(var(--rpx) * 14) calc(var(--rpx) * 24); background: #ffffff; border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); line-height: 1.5; color: #1f3d2b; z-index: 30; /* v4.86.411（木哥令「气泡文字做一个渐入渐出的动态，驻足屏幕 3 秒」）： 默认淡出态（透明、略低一点点），由 .cat-bubble-in 打开到全亮 —— 挂上→隔一帧打开，才有淡入；3 秒后撤掉 .cat-bubble-in，自动淡出。 */ opacity: 0; transform: translateX(-50%) translateY(calc(var(--rpx) * 10)); transition: opacity 0.35s ease, transform 0.35s ease; will-change: opacity, transform; } [data-route="pages/game/home/home"] /* 淡入到位（这一句正在看的时候） */ .cat-bubble-in { opacity: 1; transform: translateX(-50%) translateY(0); } [data-route="pages/game/home/home"] /* 淡出态（挂上时 / 3 秒到点后）：往下 calc(var(--rpx) * 10) 轻轻退场 */ .cat-bubble-out { opacity: 0; transform: translateX(-50%) translateY(calc(var(--rpx) * 10)); } [data-route="pages/game/home/home"] /* v4.86.370：麦克风没授权/通道不通时的看得见指引 */ .cat-talk-hint { font-size: calc(var(--rpx) * 24); color: #7a9a86; margin-top: calc(var(--rpx) * 12); } /* ---- pages/list/list.wxss ---- */ [data-route="pages/list/list"] /* ================================================================== * 作业记录页 · 微信生态皮肤（v4.70.0） * 白分组块 + 发丝线 + 灰箭头；日历格子压平、去虚线去米色。 * ================================================================== */ .login-btn { margin-top: calc(var(--rpx) * 28); } [data-route="pages/list/list"] /* 本页自用的小链接：微信蓝 */ .link { color: #576b95; font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] /* v4.86.454：弱化链接补样式 —— 「老师中心 ›」「看这一单 ›」「进入 ›」几处挂的是 * link-muted，本页只定义过 .link，那几行一直是正文黑字，看着不像能点。 */ .link-muted { font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/list/list"] /* ---------------- 日历 ---------------- */ .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--rpx) * 18); } [data-route="pages/list/list"] .cal-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/list/list"] .cal-nav { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); line-height: calc(var(--rpx) * 58); text-align: center; border-radius: 50%; background: #f7f7f7; color: #888888; font-size: calc(var(--rpx) * 40); } [data-route="pages/list/list"] .cal-nav-off { opacity: 0.34; } [data-route="pages/list/list"] .cal-week { display: flex; margin-bottom: calc(var(--rpx) * 6); } [data-route="pages/list/list"] .cal-week-item { flex: 1; text-align: center; font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/list/list"] .cal-grid { display: flex; flex-wrap: wrap; } [data-route="pages/list/list"] .cal-cell { position: relative; width: 14.28%; height: calc(var(--rpx) * 112); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: calc(var(--rpx) * 12); } [data-route="pages/list/list"] .cal-blank { visibility: hidden; } [data-route="pages/list/list"] /* v4.86.94（木哥 00:5x 第 2 条）：这一天那篇作业里老师留了言、我还没读。 钉在格子右上角 —— 不占 cal-marks 那行（那里已经被「作 / 计划点」用了）。 */ .cal-new { position: absolute; top: calc(var(--rpx) * 8); right: calc(var(--rpx) * 8); width: calc(var(--rpx) * 14); height: calc(var(--rpx) * 14); border-radius: 50%; background: #fa5151; } [data-route="pages/list/list"] /* v4.86.288（木哥令）：那一天有未读点评 → 格子左上角「未读」小胶囊（右上角已被 留言红点占了）。字号走 calc(var(--rpx) * 20) 档，红底白字与 day 页时间签同一支红。 */ .cal-unread { position: absolute; top: calc(var(--rpx) * 4); left: calc(var(--rpx) * 4); padding: 0 calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 24); color: #ffffff; background: #fa5151; border-radius: calc(var(--rpx) * 10); } [data-route="pages/list/list"] .cal-unread-sm { position: static; } [data-route="pages/list/list"] /* v7.0.187（木哥令）：邀约胶囊 —— 「未点评」占了左上角，这枚往下错一格， 同支红底白字；确认后就熄 */ .cal-unread.cal-invite { top: calc(var(--rpx) * 32); } [data-route="pages/list/list"] .cal-day { font-size: calc(var(--rpx) * 28); line-height: 1.1; color: #191919; } [data-route="pages/list/list"] .cal-lunar { margin-top: calc(var(--rpx) * 2); max-width: 100%; overflow: hidden; white-space: nowrap; font-size: calc(var(--rpx) * 24); line-height: 1.1; color: #b2b2b2; } [data-route="pages/list/list"] .cal-off .cal-day, [data-route="pages/list/list"] .cal-off .cal-lunar { color: #fa5151; } [data-route="pages/list/list"] .cal-work .cal-day, [data-route="pages/list/list"] .cal-work .cal-lunar { color: #b2b2b2; } [data-route="pages/list/list"] .cal-today { background: #e8f7ee; } [data-route="pages/list/list"] .cal-today .cal-day { color: #07c160; font-weight: 600; } [data-route="pages/list/list"] .cal-selected { background: #e8f7ee; box-shadow: inset 0 0 0 calc(var(--rpx) * 2) #07c160; } [data-route="pages/list/list"] /* 作业日标记：一个「作」字小图标（正常绿、灵力补卡橙） */ .cal-marks { display: flex; align-items: center; justify-content: center; height: calc(var(--rpx) * 32); margin-top: calc(var(--rpx) * 4); } [data-route="pages/list/list"] .cal-zuo { width: calc(var(--rpx) * 32); height: calc(var(--rpx) * 32); line-height: calc(var(--rpx) * 32); text-align: center; font-size: calc(var(--rpx) * 20); font-weight: 600; color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 6); } [data-route="pages/list/list"] .cal-zuo-makeup { background: #fa9d3b; } [data-route="pages/list/list"] .cal-zuo-sm { width: calc(var(--rpx) * 26); height: calc(var(--rpx) * 26); line-height: calc(var(--rpx) * 26); font-size: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 4); margin-right: calc(var(--rpx) * 8); } [data-route="pages/list/list"] .cal-dot { width: calc(var(--rpx) * 12); height: calc(var(--rpx) * 12); border-radius: 50%; background: #fa9d3b; } [data-route="pages/list/list"] .cal-foot { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--rpx) * 22); margin-top: calc(var(--rpx) * 14); } [data-route="pages/list/list"] .cal-foot-item { display: flex; align-items: center; font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/list/list"] .cal-note { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); line-height: 1.5; } [data-route="pages/list/list"] /* ---------------- 摘要 + 补卡说明 ---------------- */ .summary { text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/list/list"] .summary-sep { margin: 0 calc(var(--rpx) * 16); color: #c8c8cd; } [data-route="pages/list/list"] .make-card { border-left: calc(var(--rpx) * 6) solid #fa9d3b; } [data-route="pages/list/list"] .make-line { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/list/list"] /* ---------------- 那天的安排 ---------------- */ .sel-lunar { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] .plan-empty { padding: calc(var(--rpx) * 10) 0; font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] .plan-item { display: flex; align-items: center; padding: calc(var(--rpx) * 14) 0; } [data-route="pages/list/list"] .plan-dot { width: calc(var(--rpx) * 12); height: calc(var(--rpx) * 12); margin-right: calc(var(--rpx) * 14); flex-shrink: 0; border-radius: 50%; background: #fa9d3b; } [data-route="pages/list/list"] .plan-done .plan-dot { background: #07c160; } [data-route="pages/list/list"] .plan-title { flex: 1; font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/list/list"] .plan-done .plan-title { color: #b2b2b2; text-decoration: line-through; } [data-route="pages/list/list"] .plan-remind { font-size: calc(var(--rpx) * 24); color: #fa9d3b; } [data-route="pages/list/list"] .plan-more { display: block; margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] /* ---------------- 补卡说明：压平（去边框） ---------------- */ .makeup-box { margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 22); border-radius: calc(var(--rpx) * 12); background: #e8f7ee; } [data-route="pages/list/list"] .makeup-text { font-size: calc(var(--rpx) * 28); line-height: 1.6; color: #07c160; } [data-route="pages/list/list"] .makeup-btn { margin-top: calc(var(--rpx) * 18); font-size: calc(var(--rpx) * 28); } [data-route="pages/list/list"] /* ---------------- 作业列表 ---------------- */ .item { display: flex; align-items: center; padding: calc(var(--rpx) * 26) 0; border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/list/list"] .item-date { width: calc(var(--rpx) * 130); font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 500; } [data-route="pages/list/list"] .item-body { flex: 1; min-width: 0; } [data-route="pages/list/list"] .item-line { font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/list/list"] .item-tag { margin-left: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); } [data-route="pages/list/list"] .item-note { margin-top: calc(var(--rpx) * 6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--rpx) * 420); } [data-route="pages/list/list"] /* 微信灰箭头 */ .item-arrow { color: #c8c8cd; font-size: calc(var(--rpx) * 40); font-weight: 300; line-height: 1; } [data-route="pages/list/list"] .err { margin-top: calc(var(--rpx) * 24); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] /* ================================================================== * 点某天的弹窗 + 最新作业流动榜 * ================================================================== */ /* ---------------- 弹窗：白底圆角，无重阴影 ---------------- */ .modal-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 900; display: flex; align-items: center; justify-content: center; padding: calc(var(--rpx) * 40); box-sizing: border-box; } [data-route="pages/list/list"] .modal { width: 100%; max-width: calc(var(--rpx) * 640); max-height: 80vh; overflow-y: auto; background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 30) calc(var(--rpx) * 30) calc(var(--rpx) * 34); box-sizing: border-box; } [data-route="pages/list/list"] .modal-head { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/list/list"] .modal-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/list/list"] .modal-x { width: calc(var(--rpx) * 52); height: calc(var(--rpx) * 52); line-height: calc(var(--rpx) * 52); text-align: center; color: #b2b2b2; font-size: calc(var(--rpx) * 32); } [data-route="pages/list/list"] .modal-lunar { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] .modal-empty { padding: calc(var(--rpx) * 16) 0; font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] .mplan { display: flex; align-items: center; padding: calc(var(--rpx) * 14) 0; background: #f7f7f7; border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/list/list"] .mplan-dot { width: calc(var(--rpx) * 12); height: calc(var(--rpx) * 12); margin-right: calc(var(--rpx) * 14); flex-shrink: 0; border-radius: 50%; background: #fa9d3b; } [data-route="pages/list/list"] .mplan-done .mplan-dot { background: #07c160; } [data-route="pages/list/list"] .mplan-title { flex: 1; font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/list/list"] .mplan-done .mplan-title { color: #b2b2b2; text-decoration: line-through; } [data-route="pages/list/list"] .mplan-remind { font-size: calc(var(--rpx) * 24); color: #fa9d3b; } [data-route="pages/list/list"] .modal-add { display: block; margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 28); } [data-route="pages/list/list"] .modal-past { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] .modal-hw { display: flex; align-items: center; margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 22); border-radius: calc(var(--rpx) * 12); background: #f7f7f7; } [data-route="pages/list/list"] .modal-hw-body { flex: 1; min-width: 0; } [data-route="pages/list/list"] .modal-hw-title { font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/list/list"] .modal-hw-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/list/list"] .modal-more { display: block; margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] /* ---------------- 最新作业流动榜 ---------------- */ .feed-note { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); line-height: 1.5; } [data-route="pages/list/list"] .feed-item { display: flex; align-items: center; padding: calc(var(--rpx) * 22) 0; border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/list/list"] .feed-avatar { width: calc(var(--rpx) * 84); height: calc(var(--rpx) * 84); border-radius: 50%; flex-shrink: 0; background: #f2f2f2; } [data-route="pages/list/list"] .feed-avatar-empty { display: flex; align-items: center; justify-content: center; background: #e8f7ee; color: #07c160; font-size: calc(var(--rpx) * 40); font-weight: 600; } [data-route="pages/list/list"] .feed-main { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 20); } [data-route="pages/list/list"] .feed-line { display: flex; align-items: center; } [data-route="pages/list/list"] .feed-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; max-width: calc(var(--rpx) * 260); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/list/list"] .badge-mentor { margin-left: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #07c160; background: #e8f7ee; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); } [data-route="pages/list/list"] .feed-tag-mine { margin-left: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); } [data-route="pages/list/list"] .feed-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--rpx) * 360); } [data-route="pages/list/list"] .feed-meta { margin-top: calc(var(--rpx) * 6); } [data-route="pages/list/list"] .feed-score { font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/list/list"] .feed-score-none { color: #b2b2b2; } [data-route="pages/list/list"] .feed-ops { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--rpx) * 10); margin-left: calc(var(--rpx) * 12); } [data-route="pages/list/list"] .feed-op { font-size: calc(var(--rpx) * 24); color: #888888; padding: calc(var(--rpx) * 6) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 8); background: #f7f7f7; } [data-route="pages/list/list"] .feed-op-on { color: #fa5151; background: #feeceb; } [data-route="pages/list/list"] .feed-op-add { color: #07c160; background: #e8f7ee; } [data-route="pages/list/list"] .feed-op-done { color: #b2b2b2; background: transparent; padding-right: 0; } [data-route="pages/list/list"] /* ================================================================== * v4.86.196（木哥 18:0x）：流动榜折叠 —— 展开更多 / 已显示全部 * ================================================================== */ .feed-more { margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 18) 0; text-align: center; font-size: calc(var(--rpx) * 28); color: #07c160; background: #f7f7f7; border-radius: calc(var(--rpx) * 12); } [data-route="pages/list/list"] .feed-more-end { color: #b2b2b2; background: transparent; } [data-route="pages/list/list"] /* ================================================================== * v4.86.95（木哥 01:1x 第 4 条）：最近 7 天点阵 + 四周柱状 * 从「我的 → 分析」（pkgFamily/pages/family）原样搬来 —— * 样式一句不改地抄过来，两边看起来才是同一张卡。 * ================================================================== */ .days { display: flex; justify-content: space-between; } [data-route="pages/list/list"] .day { flex: 1; text-align: center; } [data-route="pages/list/list"] .day-dot { width: calc(var(--rpx) * 72); height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); border-radius: 50%; margin: 0 auto calc(var(--rpx) * 10); background: #f2f2f2; color: #b2b2b2; font-size: calc(var(--rpx) * 32); } [data-route="pages/list/list"] .day-on .day-dot { background: #07c160; color: #ffffff; } [data-route="pages/list/list"] .day-today .day-dot { box-shadow: 0 0 0 calc(var(--rpx) * 4) #a6e0be; } [data-route="pages/list/list"] .day-label { font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/list/list"] .bars { display: flex; align-items: flex-end; justify-content: space-around; height: calc(var(--rpx) * 240); } [data-route="pages/list/list"] .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; } [data-route="pages/list/list"] .bar-n { font-size: calc(var(--rpx) * 24); color: #888888; margin-bottom: calc(var(--rpx) * 8); } [data-route="pages/list/list"] .bar-track { flex: 1; width: calc(var(--rpx) * 56); background: #f2f2f2; border-radius: calc(var(--rpx) * 12); display: flex; align-items: flex-end; overflow: hidden; } [data-route="pages/list/list"] .bar-fill { width: 100%; background: #07c160; border-radius: calc(var(--rpx) * 12); min-height: calc(var(--rpx) * 8); transition: height 0.3s; } [data-route="pages/list/list"] .bar-label { font-size: calc(var(--rpx) * 24); color: #888888; margin-top: calc(var(--rpx) * 10); } [data-route="pages/list/list"] /* 弹窗里那篇作业上的「共 N 篇」（一天交不止一篇时才出现） */ .modal-hw-count { margin-left: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/list/list"] /* v4.86.234（木哥令）：老师身份下的点评数据日历 ——「评」标记 + 四格数值 + 最近完成。 字号只走本仓 5 档（20/24/28/32/40），颜色沿用这页既有那几支灰绿。 */ .cal-zuo-review { background: #07c160; color: #ffffff; position: relative; } [data-route="pages/list/list"] .cal-zuo-n { font-size: calc(var(--rpx) * 20); margin-left: calc(var(--rpx) * 2); } [data-route="pages/list/list"] .m-stats { display: flex; flex-wrap: wrap; } [data-route="pages/list/list"] .m-stat { width: 50%; margin-top: calc(var(--rpx) * 16); } [data-route="pages/list/list"] .m-stat-n { font-size: calc(var(--rpx) * 40); color: #191919; } [data-route="pages/list/list"] .m-stat-hot { color: #fa5151; } [data-route="pages/list/list"] .m-stat-t { font-size: calc(var(--rpx) * 24); } [data-route="pages/list/list"] .m-note { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 20); line-height: 1.6; } [data-route="pages/list/list"] .m-row { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 16) 0; border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/list/list"] .m-row-main { flex: 1; } [data-route="pages/list/list"] .m-row-t { font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/list/list"] .m-row-tag { margin-left: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 20); color: #07c160; } [data-route="pages/list/list"] .m-row-s { font-size: calc(var(--rpx) * 24); margin-top: calc(var(--rpx) * 4); } [data-route="pages/list/list"] /* v4.86.454：这里原本整份样式被复制了第二遍（第 802–1602 行，796 行，与文件开头逐字相同）。 两份内容一模一样，所以眼下没走形，但后一份会盖住前一份 —— 以后改前一份的样式不生效， 还得记住有两处要改。清掉重复的那一份，效果不变（选择器数量前后都是 232 个）。 */ /* v4.86.307（木哥 307 号令）：弹窗里未点评单的红字行 —— 灰底行块同款，右侧红字 */ .mplan-pending { border: calc(var(--rpx) * 2) solid #ffd4d4; } [data-route="pages/list/list"] .mplan-pending-t { margin-left: auto; font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 34); color: #fa5151; flex-shrink: 0; } [data-route="pages/list/list"] /* v4.86.317（木哥 317 号令）：未读明细入口行 —— 一行摆总数，点整行进明细页 */ .unread-entry { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 22) calc(var(--rpx) * 24); } [data-route="pages/list/list"] .unread-entry-main { flex: 1; min-width: 0; } [data-route="pages/list/list"] .unread-entry-t { display: block; font-size: calc(var(--rpx) * 28); color: #191919; line-height: calc(var(--rpx) * 40); } [data-route="pages/list/list"] .unread-entry-sub { display: block; font-size: calc(var(--rpx) * 24); color: #888888; line-height: calc(var(--rpx) * 36); } [data-route="pages/list/list"] .unread-entry-go { margin-left: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #07c160; flex-shrink: 0; } [data-route="pages/list/list"] /* ============================================================ * v4.86.441（A 组 r254 B1）· 一周一封信：日历头那枚「本周的信」 * ------------------------------------------------------------ * 未读时右上角一枚红点（#fa5151，与全站未读同一个红），读过即撤。 * 胶囊高度给死，避免 ✉ 与中文混排把日历头撑高、把下面的格子往下挤。 * ============================================================ */ .cal-title-wrap { display: flex; align-items: center; justify-content: center; } [data-route="pages/list/list"] .cal-title-wrap .cal-title { margin-right: calc(var(--rpx) * 12); } [data-route="pages/list/list"] .cal-letter { position: relative; display: flex; align-items: center; height: calc(var(--rpx) * 40); padding: 0 calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 999); background: #f1f8f3; border: calc(var(--rpx) * 1) solid #d9eee1; } [data-route="pages/list/list"] .cal-letter-ico { font-size: calc(var(--rpx) * 24); line-height: 1; color: #07c160; } [data-route="pages/list/list"] .cal-letter-txt { margin-left: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); line-height: 1; color: #07c160; } [data-route="pages/list/list"] .cal-letter-dot { position: absolute; top: calc(var(--rpx) * -6); right: calc(var(--rpx) * -6); width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #fa5151; border: calc(var(--rpx) * 2) solid #fff; } [data-route="pages/list/list"] /* v7.0.183（木哥令）：班级作业角标（学员+老师共用一套）—— * 挂格子右上角（左上留给「未点评」胶囊），橙＝有没交/未结束，绿＝全交/全结束 */ .cal-hw { position: absolute; top: calc(var(--rpx) * 4); right: calc(var(--rpx) * 4); padding: 0 calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 24); color: #ffffff; border-radius: calc(var(--rpx) * 8); } [data-route="pages/list/list"] .cal-hw-open { background: #e6a23c; } [data-route="pages/list/list"] .cal-hw-end { background: #07c160; } [data-route="pages/list/list"] .cal-hw-sm { position: static; display: inline-block; } [data-route="pages/list/list"] /* v7.0.194（木哥令「因为有未提交作业，发现页的未读提醒呢」）： 「作业」橙标下面那枚未读红点 —— 有作业还没交就亮，交上去才熄； 与左上「未点评/邀约」胶囊错开位置，一格能同时说清两三件事 */ .cal-hw-dot { position: absolute; top: calc(var(--rpx) * 30); right: calc(var(--rpx) * 8); width: calc(var(--rpx) * 14); height: calc(var(--rpx) * 14); border-radius: 50%; background: #fa5151; border: calc(var(--rpx) * 2) solid #ffffff; } [data-route="pages/list/list"] .cal-hw-dot-sm { position: static; display: inline-block; width: calc(var(--rpx) * 12); height: calc(var(--rpx) * 12); margin-right: calc(var(--rpx) * 4); vertical-align: middle; } [data-route="pages/list/list"] /* 弹窗里那行作业的状态字：未完成红（同 mplan-pending-t），完成/结束绿 */ .mplan-hw-st { margin-left: auto; font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 34); } [data-route="pages/list/list"] .mplan-hw-end { color: #07c160; } /* ---- pages/detail/detail.wxss ---- */ [data-route="pages/detail/detail"] .login-btn { margin-top: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .head { margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .shot { width: 100%; height: calc(var(--rpx) * 520); border-radius: calc(var(--rpx) * 16); background: #f7f7f7; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } [data-route="pages/detail/detail"] /* v4.86.330：审核中灰标 —— 压在照片左上角，不遮画面主体 */ .sec-chip { position: absolute; left: calc(var(--rpx) * 16); top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 18); border-radius: calc(var(--rpx) * 999); font-size: calc(var(--rpx) * 24); color: #ffffff; background: rgba(0, 0, 0, 0.55); } [data-route="pages/detail/detail"] .shot-img { width: 100%; height: 100%; } [data-route="pages/detail/detail"] /* v4.86.358（356 号令③）：批改回来的单 —— 顶部作业位直接摆合成批注图。 原图区固定 calc(var(--rpx) * 520) 高 + aspectFit，批注图照搬会把图压小还留大边； 定高的放开走 wxml 内联样式（hasImage && mentorMarkImage 时 height:auto， class="shot" 字面留给 UGC 举报锁），这里只管里层：widthFix 按宽撑满 （与老师端 shot-mark、学生端 mark-box 同一口径），叠层 ♪ 的百分比坐标 才与图片显示区对齐。 */ .mark-top-wrap { position: relative; width: 100%; } [data-route="pages/detail/detail"] .shot-img-wide { width: 100%; height: auto; display: block; } [data-route="pages/detail/detail"] .note { margin-top: calc(var(--rpx) * 26); padding-top: calc(var(--rpx) * 22); border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/detail/detail"] .note-label { font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/detail/detail"] .note-text { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .review { font-size: calc(var(--rpx) * 32); line-height: 1.9; white-space: pre-wrap; color: #191919; } [data-route="pages/detail/detail"] /* #659（v4.86.400）：终审池稿分段渲染 —— 段间 12–16px 口径取 calc(var(--rpx) * 26) 留白， * 段内行高 1.7；不做序号、不做【】小标题（表情就是序号）；单段不省略不折叠 */ .review-blocks { margin-top: calc(var(--rpx) * 8); } [data-route="pages/detail/detail"] .review-para { font-size: calc(var(--rpx) * 32); line-height: 1.7; color: #191919; margin-bottom: calc(var(--rpx) * 26); } [data-route="pages/detail/detail"] .review-para:last-child { margin-bottom: 0; } [data-route="pages/detail/detail"] /* v4.86.148（木哥）：打字时的「缩小的语音输入波形」——替掉原来那个 ▍ 黑光标。 三根小竖条上下跳，绿色（跟语音输入同一套语言），跟着文字走、不抢行。 */ .wave { display: inline-flex; align-items: flex-end; height: calc(var(--rpx) * 20); margin-left: calc(var(--rpx) * 6); vertical-align: middle; } [data-route="pages/detail/detail"] .wave-b { width: calc(var(--rpx) * 4); height: 100%; margin-right: calc(var(--rpx) * 3); border-radius: calc(var(--rpx) * 2); background: #07c160; animation: wave-jump 0.9s ease-in-out infinite; } [data-route="pages/detail/detail"] .wave-b:nth-child(2) { height: 62%; animation-delay: 0.15s; } [data-route="pages/detail/detail"] .wave-b:nth-child(3) { height: 86%; animation-delay: 0.3s; } @keyframes wave-jump { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } [data-route="pages/detail/detail"] /* 先生落款：手写体签名 + 朱砂印（去 AI 化的视觉一环，属人设内容，保留手写/印章观感） 字体走 wx.loadFontFace 注册的「HandSign」（子集内嵌 12KB）； 万一没加载上，退回默认字体的倾斜样式，观感仍成立。 */ .sign-row { display: flex; align-items: center; justify-content: flex-end; margin-top: calc(var(--rpx) * 18); padding-right: calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .sign-hand { font-family: 'HandSign', -apple-system, sans-serif; font-size: calc(var(--rpx) * 46); line-height: 1.2; color: #191919; letter-spacing: calc(var(--rpx) * 8); margin-right: calc(var(--rpx) * 20); transform: rotate(-4deg); transform-origin: right center; } [data-route="pages/detail/detail"] .sign-seal { width: calc(var(--rpx) * 86); height: calc(var(--rpx) * 86); border: calc(var(--rpx) * 4) solid #fa5151; border-radius: calc(var(--rpx) * 8); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-6deg); opacity: 0.88; } [data-route="pages/detail/detail"] .seal-char { font-family: 'HandSign', -apple-system, sans-serif; font-size: calc(var(--rpx) * 32); line-height: calc(var(--rpx) * 36); color: #fa5151; letter-spacing: calc(var(--rpx) * 2); } [data-route="pages/detail/detail"] .actions { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 32); } [data-route="pages/detail/detail"] /* v4.86.218（木哥 07:4x 第 1 条）：按键一行放下、不再折行 —— 字号 32→28（阶梯内）、竖padding 24→20、白名单 nowrap； 留言键单独亮出来：浅绿底 + 绿字（与「真人」徽章同一族），师生沟通的主入口 */ .actions button { flex: 1; font-size: calc(var(--rpx) * 28); padding: calc(var(--rpx) * 20) 0; white-space: nowrap; } [data-route="pages/detail/detail"] .chat-btn { color: #07c160; background: #f0faf3; border-color: #bfe8cd; font-weight: 500; } [data-route="pages/detail/detail"] .chat-btn.button-hover { background: #e2f4e8; color: #07c160; } [data-route="pages/detail/detail"] .danger { margin-top: calc(var(--rpx) * 30); text-align: center; color: #b2b2b2; font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] /* v4.86.278：底部「把作业分享给我的朋友/老师点评一下」（button 自带边距要清） */ .share-teacher-btn { margin-top: calc(var(--rpx) * 30); width: 100%; } [data-route="pages/detail/detail"] .share-teacher-btn::after { border: none; } [data-route="pages/detail/detail"] .cost-tip { margin-top: calc(var(--rpx) * 18); } [data-route="pages/detail/detail"] /* v4.86.480（木哥 18:53 第 3 条）：这张页的「点评会员」卡整卡撤了， .mem-* 十三个选择器跟着一起删 —— 留着就是下次有人照着样式表把它加回来 */ .req-meta { margin-top: calc(var(--rpx) * 14); } [data-route="pages/detail/detail"] /* v4.86.314：举报入口 —— 一行小字，颜色压到最弱（合规要它、但不能抢点评的注意力） */ .rep-row { margin-top: calc(var(--rpx) * 12); display: flex; justify-content: flex-end; } [data-route="pages/detail/detail"] .rep-link { font-size: calc(var(--rpx) * 20); color: #b0b4ba; padding: calc(var(--rpx) * 6) calc(var(--rpx) * 4) calc(var(--rpx) * 2); } [data-route="pages/detail/detail"] .ai-btn { color: #07c160; font-weight: 500; } [data-route="pages/detail/detail"] .badge-mentor { background: #e8f7ee; color: #07c160; margin-left: calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .err { margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #fa5151; } [data-route="pages/detail/detail"] /* v4.86.86：音色选择的样式（.voice-row/-label/-scroll/-chips/-chip/-chip-on）随功能一起删， 不再留没人用的样式。 */ .speak-btn { color: #576b95; font-weight: 500; } [data-route="pages/detail/detail"] .speak-on { color: #fa5151; background: #feeceb; } [data-route="pages/detail/detail"] .badge-quality { background: #e8f7ee; color: #07c160; margin-left: calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .rate-box { margin-top: calc(var(--rpx) * 22); padding: calc(var(--rpx) * 20); background: #f7f7f7; border-radius: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .star-row { margin: calc(var(--rpx) * 14) 0 calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .star { font-size: calc(var(--rpx) * 56); color: #b2b2b2; margin-right: calc(var(--rpx) * 18); } [data-route="pages/detail/detail"] .star:active { transform: scale(1.15); } [data-route="pages/detail/detail"] .star-busy { opacity: 0.5; } [data-route="pages/detail/detail"] /* ---- 作品卡（v4.5） ---- */ .card-btn { margin-top: calc(var(--rpx) * 22); width: 100%; color: #07c160; font-weight: 500; } [data-route="pages/detail/detail"] .card-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; display: flex; align-items: center; justify-content: center; } [data-route="pages/detail/detail"] .card-sheet { width: 86vw; max-height: 86vh; background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 30); box-sizing: border-box; display: flex; flex-direction: column; } [data-route="pages/detail/detail"] .card-sheet-title { text-align: center; font-size: calc(var(--rpx) * 32); font-weight: 500; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .card-preview { width: 100%; border-radius: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .card-making { height: calc(var(--rpx) * 400); display: flex; align-items: center; justify-content: center; color: #888888; background: #f7f7f7; } [data-route="pages/detail/detail"] .card-sheet-actions { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 22); } [data-route="pages/detail/detail"] .card-sheet-actions button { flex: 1; font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .sheet-save { color: #ffffff; } [data-route="pages/detail/detail"] .card-sheet-tip { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/detail/detail"] /* v4.69.2：离屏画布收进屏内。 原来用 position:fixed + left:-9999px 藏到屏幕外，iOS 会把这种负偏移的 fixed 盒子算进页面可滚动宽度 —— 整页因此能被左右拖（「我的」页晃、打卡/记录页没有 这块画布所以不晃）。现在锚在屏内左上、缩到 1px、透明、不挡点击。 画布出图只认 canvas.width/height（share-card.js / detail.js 都是这么写的）， CSS 尺寸只影响显示，改小不影响分享图质量。 */ .share-canvas { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1; } [data-route="pages/detail/detail"] /* 最佳单字截图裁剪（v4.7） */ .crop-hint { margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #888888; text-align: center; } [data-route="pages/detail/detail"] .crop-area { position: relative; margin: 0 auto calc(var(--rpx) * 24); background: #f7f7f7; border-radius: calc(var(--rpx) * 12); overflow: hidden; } [data-route="pages/detail/detail"] .crop-img { position: absolute; left: 0; top: 0; display: block; } [data-route="pages/detail/detail"] .crop-marea { position: absolute; left: 0; top: 0; background: transparent; } [data-route="pages/detail/detail"] /* 裁剪选框：去掉彩色描边，改用底色区分（calc(var(--rpx) * 1) 发丝线 + 主色浅底） */ .crop-box { border: calc(var(--rpx) * 1) solid #f2f2f2; background: rgba(7, 193, 96, 0.12); box-sizing: border-box; } [data-route="pages/detail/detail"] /* 点评维度评分卡（标准体系 v1.0） */ .score-box { margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 22); background: #f7f7f7; border-radius: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .score-head { display: flex; align-items: center; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .score-level { font-size: calc(var(--rpx) * 24); font-weight: 500; color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 18); } [data-route="pages/detail/detail"] /* 等级色：类名必须用英文（中文类名会被微信编译器拒绝，报 -80056） */ .score-lv-excellent { background: #fa9d3b; } [data-route="pages/detail/detail"] .score-lv-good { background: #07c160; } [data-route="pages/detail/detail"] .score-lv-pass { background: #576b95; } [data-route="pages/detail/detail"] .score-lv-todo { background: #fa5151; } [data-route="pages/detail/detail"] .score-note { margin-left: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .score-dims { display: flex; flex-direction: column; gap: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .score-dim { display: flex; align-items: center; } [data-route="pages/detail/detail"] .score-dim-name { width: calc(var(--rpx) * 150); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/detail/detail"] .score-bar { flex: 1; height: calc(var(--rpx) * 16); background: #f2f2f2; border-radius: calc(var(--rpx) * 8); overflow: hidden; } [data-route="pages/detail/detail"] .score-bar-fill { height: 100%; background: #07c160; border-radius: calc(var(--rpx) * 8); } [data-route="pages/detail/detail"] .score-dim-val { width: calc(var(--rpx) * 70); text-align: right; font-size: calc(var(--rpx) * 24); font-weight: 500; color: #07c160; } [data-route="pages/detail/detail"] .score-best { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .score-best-char { font-weight: 500; color: #fa5151; } [data-route="pages/detail/detail"] /* 批注图：文字点评 + 三色圈点标注（图内三色为内容语义，保留） */ .mark-box { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20); background: #f7f7f7; border-radius: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .mark-title { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/detail/detail"] .mark-img { width: 100%; border-radius: calc(var(--rpx) * 12); background: #ffffff; } [data-route="pages/detail/detail"] /* v4.86.62：声音标志 —— 叠在老师圈画的原位置上，点了直接听原音 */ .mark-img-wrap { position: relative; } [data-route="pages/detail/detail"] /* v4.86.63：语音点评独立入口（圈画区外面，一定看得见） */ .voice-strip { display: flex; align-items: center; margin-bottom: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); background: #eef7ef; border: calc(var(--rpx) * 2) solid #cde8d0; } [data-route="pages/detail/detail"] .voice-strip-on { background: #e2f3e5; border-color: #7cc47f; } [data-route="pages/detail/detail"] .vs-icon { font-size: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .vs-text { font-size: calc(var(--rpx) * 28); color: #35733a; } [data-route="pages/detail/detail"] /* v4.86.70：老师逐处写的点评（序号与图上「第 N 处」标签对应） */ .note-list { margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 10); background: #faf8f2; border: calc(var(--rpx) * 2) solid #f0e6cf; } [data-route="pages/detail/detail"] .note-item { display: flex; align-items: flex-start; margin-bottom: calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .note-item:last-child { margin-bottom: 0; } [data-route="pages/detail/detail"] .note-no { flex: none; margin-right: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #b07b28; } [data-route="pages/detail/detail"] .note-txt { flex: 1; font-size: calc(var(--rpx) * 28); line-height: 1.6; color: #191919; } [data-route="pages/detail/detail"] /* v4.86.72：这一处留了原音 —— 行尾「🔊 听原音」，点了听原声（播放中变「⏹ 播放中」） */ .note-play { flex: none; margin-left: calc(var(--rpx) * 12); color: #07c160; font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .note-play-on { color: #fa9d3b; } [data-route="pages/detail/detail"] /* v4.86.79：点了图标才浮出来的那一处文字（在图片下方，不在图上） */ .note-bubble { display: flex; align-items: flex-start; margin-top: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 10); background: #eef7ef; border: calc(var(--rpx) * 2) solid #cde8d0; } [data-route="pages/detail/detail"] .nb-no { flex: none; margin-right: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #35733a; } [data-route="pages/detail/detail"] .nb-txt { flex: 1; font-size: calc(var(--rpx) * 28); line-height: 1.6; color: #191919; } [data-route="pages/detail/detail"] /* v4.86.79：逐处点评的标题行 —— 默认收起，点它展开 */ .note-head { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/detail/detail"] .nh-t { font-size: calc(var(--rpx) * 28); color: #b07b28; } [data-route="pages/detail/detail"] .nh-x { font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/detail/detail"] /* v4.86.79：图上小图标分两种 —— ♪ 有老师原音 / 💬 只有文字（点了转语音读出来） */ .note-dot-audio { /* v4.86.362（359 号令）：固定绿降为兜底色 —— wxml 内联已带该处圈点自己的颜色 */ color: #07c160; } [data-route="pages/detail/detail"] /* v4.86.362（359 号令）：有原音的 ♪ 常驻闪动；keyframes 全站共用 app.wxss 的 voice-flash */ .note-dot-flash { animation: voice-flash 1.4s ease-in-out infinite; } [data-route="pages/detail/detail"] .note-dot-text { color: #4a6fa5; } [data-route="pages/detail/detail"] /* v4.86.79：**页内**放大层 —— 图片与图标同一套百分比定位，放大后图标跟着走、照样能点 * v4.86.259（木哥令）：黑底改全站浅色（与 day 页同款）—— 页底浅灰、深字、白关闭钮 */ .zoom-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background: #ededed; display: flex; flex-direction: column; } [data-route="pages/detail/detail"] .zoom-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 24) calc(var(--rpx) * 32); } [data-route="pages/detail/detail"] .zoom-title { color: #1a1a1a; font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .zoom-close { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); border-radius: 50%; background: #ffffff; color: #333333; font-size: calc(var(--rpx) * 32); display: flex; align-items: center; justify-content: center; } [data-route="pages/detail/detail"] /* v4.86.81：双指捏合缩放 —— movable-area 吃手势，movable-view 扛图片+图标 */ .zoom-body { flex: 1; position: relative; overflow: hidden; } [data-route="pages/detail/detail"] .zoom-area { width: 100%; height: 100%; } [data-route="pages/detail/detail"] .zoom-wrap { position: relative; width: 100%; height: 100%; } [data-route="pages/detail/detail"] .zoom-img { display: block; } [data-route="pages/detail/detail"] .zoom-foot { flex: none; padding-bottom: env(safe-area-inset-bottom); } [data-route="pages/detail/detail"] .zoom-foot .note-bubble { margin: 0 calc(var(--rpx) * 24) calc(var(--rpx) * 8); } [data-route="pages/detail/detail"] .zoom-tip { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 32) calc(var(--rpx) * 40); color: #8a8a8a; font-size: calc(var(--rpx) * 24); text-align: center; } [data-route="pages/detail/detail"] .voice-dot { position: absolute; transform: translate(-50%, -50%); width: calc(var(--rpx) * 76); height: calc(var(--rpx) * 76); border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 12) rgba(0, 0, 0, 0.28); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 40); z-index: 2; /* v4.86.228（木哥令）：所有点评的标记点都 60% 透明度 —— 图上这些 ♪/💬 圆点 也是标记点，一并压到 0.4，少盖作业；正在播的那处恢复不透明（找得着、听得清）。 */ opacity: 0.4; } [data-route="pages/detail/detail"] .voice-dot-on { background: #e8f5e9; box-shadow: 0 0 0 calc(var(--rpx) * 6) rgba(76, 175, 80, 0.25); opacity: 1; } [data-route="pages/detail/detail"] /* v4.86.72：留了原音的那一处，图上原位置的 ♪ 圆点（小一号，和整体原音的 🔊 分开） */ .note-dot { width: calc(var(--rpx) * 60); height: calc(var(--rpx) * 60); color: #07c160; font-size: calc(var(--rpx) * 32); } [data-route="pages/detail/detail"] .mark-making { font-size: calc(var(--rpx) * 28); color: #888888; padding: calc(var(--rpx) * 40) 0; text-align: center; } [data-route="pages/detail/detail"] .mark-legend { display: flex; flex-wrap: wrap; margin-top: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .mark-legend-item { display: flex; align-items: center; font-size: calc(var(--rpx) * 24); color: #888888; margin: 0 calc(var(--rpx) * 24) calc(var(--rpx) * 8) 0; } [data-route="pages/detail/detail"] .mark-dot { width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; margin-right: calc(var(--rpx) * 8); } [data-route="pages/detail/detail"] .mark-dot-green { background: #07c160; } [data-route="pages/detail/detail"] .mark-dot-blue { background: #576b95; } [data-route="pages/detail/detail"] .mark-dot-red { background: #fa5151; } [data-route="pages/detail/detail"] /* v4.60 合规：AI 生成内容标注（保留「先生」人设，但必须让用户知道这是 AI 写的） */ .ai-tag { font-size: calc(var(--rpx) * 20); color: #b2b2b2; line-height: 1.4; margin-top: calc(var(--rpx) * 6); } [data-route="pages/detail/detail"] /* ---------------- 点评进度条（v4.83.7） ---------------- 木哥：「AI点评要点击之后，出来一个进度条，控制在10秒以内」。 9 秒内冲到 95%，之后停在 95% 等真结果 —— 结果出来才补满 100%。 节奏由 JS 每 120ms 推一次 revProg，这里只管画。 */ .rev-progress { margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 22); } [data-route="pages/detail/detail"] .rev-progress-track { height: calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 999); background: #ededed; overflow: hidden; } [data-route="pages/detail/detail"] .rev-progress-fill { height: 100%; border-radius: calc(var(--rpx) * 999); background: linear-gradient(90deg, #07c160, #07c160); transition: width 0.14s linear; } [data-route="pages/detail/detail"] .rev-progress-meta { margin-top: calc(var(--rpx) * 12); display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/detail/detail"] .rev-progress-pct { color: #07c160; font-weight: 500; } [data-route="pages/detail/detail"] /* ---------------- 订阅入口（v4.83.7） ---------------- 一次性订阅消息一次授权只能发一条，自动弹窗只在刚交完作业那次出现， 所以给一个常驻的、用户自己点的口子（点它直接弹微信授权框）。 */ /* v4.86.11 老师邀约卡（点评区 pending 期间的头像+时间+留言） */ .card-title-row { display: flex; align-items: center; } [data-route="pages/detail/detail"] .mentor-ava { flex: none; width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); border-radius: 50%; margin-right: calc(var(--rpx) * 14); background: #f2f2f2; } [data-route="pages/detail/detail"] .mentor-ava-txt { display: flex; align-items: center; justify-content: center; color: #576b95; font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] /* v4.86.184：头像右边两行 —— 上行昵称 + 徽章（谁评的），下行身份（这是什么） */ .mw-who { flex: 1; min-width: 0; } [data-route="pages/detail/detail"] .mw-name { display: flex; align-items: center; } [data-route="pages/detail/detail"] .mw-name-t { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/detail/detail"] .mw-role { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/detail/detail"] .invite-card { display: flex; align-items: flex-start; padding: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 16); background: #f7f8fa; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .invite-ava { width: calc(var(--rpx) * 88); height: calc(var(--rpx) * 88); border-radius: 50%; margin-right: calc(var(--rpx) * 20); flex-shrink: 0; background: #eef1f6; } [data-route="pages/detail/detail"] .invite-ava-txt { display: flex; align-items: center; justify-content: center; color: #576b95; font-size: calc(var(--rpx) * 32); } [data-route="pages/detail/detail"] .invite-body { flex: 1; min-width: 0; } [data-route="pages/detail/detail"] .invite-line { font-size: calc(var(--rpx) * 28); color: #1a1a1a; margin-bottom: calc(var(--rpx) * 6); } [data-route="pages/detail/detail"] .invite-sub { font-size: calc(var(--rpx) * 24); margin-top: calc(var(--rpx) * 4); } [data-route="pages/detail/detail"] /* v4.86.13 回看建议（点评卡下方，按字给课时片段） */ .clip-box { margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); background: #f7f8fa; } [data-route="pages/detail/detail"] .clip-title { font-size: calc(var(--rpx) * 24); color: #888888; margin-bottom: calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .clip-item { display: flex; align-items: baseline; justify-content: space-between; padding: calc(var(--rpx) * 6) 0; } [data-route="pages/detail/detail"] .clip-label { font-size: calc(var(--rpx) * 28); color: #1a1a1a; } [data-route="pages/detail/detail"] .clip-where { font-size: calc(var(--rpx) * 24); color: #576b95; } [data-route="pages/detail/detail"] /* v4.86.35：老师原音（听 / 转文字） */ .voice-note { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .voice-note .vn-play { flex: none; } [data-route="pages/detail/detail"] .voice-note-text { margin-top: calc(var(--rpx) * 12); color: #576b95; font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] /* v4.86.94（木哥 00:5x 第 2 条）：老师留言未读 —— 挂在「💬 联系老师」右上角。 与老师页「和家长交流」那颗同一套做法（.chat-parent 放开裁切 + 角标往回收）。 */ .chat-parent { position: relative; overflow: visible; } [data-route="pages/detail/detail"] .chat-unread { position: absolute; top: calc(var(--rpx) * -10); right: calc(var(--rpx) * -10); flex: none; min-width: calc(var(--rpx) * 34); height: calc(var(--rpx) * 34); padding: 0 calc(var(--rpx) * 8); box-sizing: border-box; border-radius: calc(var(--rpx) * 20); background: #fa5151; color: #ffffff; font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 34); text-align: center; } [data-route="pages/detail/detail"] /* ---- v4.86.195 视频动作纠正成品（老师的视频纠正） ---- */ .vc-box { margin-bottom: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); background: #eef7ef; border: calc(var(--rpx) * 2) solid #cde8d0; } [data-route="pages/detail/detail"] .vc-title { font-size: calc(var(--rpx) * 24); font-weight: 600; color: #1f7a35; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .vc-player { width: 100%; height: calc(var(--rpx) * 400); border-radius: calc(var(--rpx) * 12); background: #000000; } [data-route="pages/detail/detail"] /* v4.86.306（305 自测修复）：302 的「老师的示范视频」卡在 wxml 里用的是 * vc-box-title / vc-box-player（与 day 页示范卡同名），这里此前只有 * vc-title / vc-player（195 视频纠正卡），示范卡标题无样式、video 无宽高 * 约束（默认 300×150px 居中小窗）。补上与 day 页同款两条。 */ .vc-box-title { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/detail/detail"] .vc-box-player { width: 100%; height: calc(var(--rpx) * 400); border-radius: calc(var(--rpx) * 12); background: #000000; } [data-route="pages/detail/detail"] /* v4.86.571：「我发的动作视频」框三态（加载中 / 点此重试 / 状态行）—— day 页同款 */ .vc-box-wait, [data-route="pages/detail/detail"] .vc-box-retry { width: 100%; height: calc(var(--rpx) * 400); border-radius: calc(var(--rpx) * 12); background: #eeeeee; color: #666666; font-size: calc(var(--rpx) * 24); display: flex; align-items: center; justify-content: center; } [data-route="pages/detail/detail"] .vc-box-retry { color: #576b95; } [data-route="pages/detail/detail"] .vc-box-sub { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/detail/detail"] /* ---------------- v4.86.222（木哥 08:2x）：邀请老师点评作业整卡改版 ---------------- */ /* ① 系统推荐键：浅绿底大按钮 + 「荐」标 + 两行说明 */ .rec-btn { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 22) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 10); background: #e8f7ee; border: calc(var(--rpx) * 1) solid #c9ecd7; } [data-route="pages/detail/detail"] .rec-btn-hover { background: #dcf2e5; } [data-route="pages/detail/detail"] .rec-btn-main { display: flex; align-items: center; } [data-route="pages/detail/detail"] .rec-btn-t { flex: 1; color: #07c160; font-size: calc(var(--rpx) * 28); font-weight: 500; } [data-route="pages/detail/detail"] .rec-badge { margin-right: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 8); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .rec-arrow { color: #07c160; font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .rec-btn-sub { margin-top: calc(var(--rpx) * 10); color: #5b8a6d; font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/detail/detail"] /* ② 自主邀请：与原 actions 同一行距，键名改口 */ .invite-actions { margin-top: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] /* ---- v4.86.240（木哥令）：挑老师的两颗键并成一行 ---- 自主邀请与指定老师属同一类按键，统一成自主邀请那颗的样式（btn-ghost 绿字）； 两颗等宽成一行（flex 等分），键面文字显示不全走滚动字幕（duo-mq）， 不折行不截断 —— 键面在放「（上次：×老师）」这类长尾巴时照样完整可读。 */ .invite-duo { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .invite-duo .duo-btn { flex: 1; min-width: 0; margin: 0; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 12); line-height: 1.2; overflow: hidden; } [data-route="pages/detail/detail"] .duo-clip { max-width: 100%; overflow: hidden; } [data-route="pages/detail/detail"] .duo-t { display: inline-block; white-space: nowrap; } [data-route="pages/detail/detail"] .duo-mq { padding-left: 100%; animation: duo-marquee 9s linear infinite; } @keyframes duo-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } [data-route="pages/detail/detail"] /* 指定老师弹层：复用 card-mask / card-sheet 骨架 */ .appoint-sheet { display: flex; flex-direction: column; max-height: 80vh; } [data-route="pages/detail/detail"] .appoint-search { display: flex; align-items: center; margin-top: calc(var(--rpx) * 18); padding: calc(var(--rpx) * 14) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 12); background: #f7f7f7; } [data-route="pages/detail/detail"] .appoint-input { flex: 1; font-size: calc(var(--rpx) * 28); color: #1a1a1a; } [data-route="pages/detail/detail"] .appoint-placeholder { color: #999999; } [data-route="pages/detail/detail"] .appoint-clear { padding: 0 calc(var(--rpx) * 8); color: #999999; font-size: calc(var(--rpx) * 32); } [data-route="pages/detail/detail"] .appoint-list { flex: 1; max-height: 46vh; margin-top: calc(var(--rpx) * 8); } [data-route="pages/detail/detail"] .appoint-row { display: flex; align-items: center; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 8); background: #f7f7f7; border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .appoint-row-hover { background: #ececec; } [data-route="pages/detail/detail"] .appoint-row-off { opacity: 0.45; } [data-route="pages/detail/detail"] .appoint-rec-flag { margin-right: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 8); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .appoint-info { flex: 1; } [data-route="pages/detail/detail"] .appoint-name { color: #1a1a1a; font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .appoint-rec-t { margin-left: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 8); border-radius: calc(var(--rpx) * 6); background: #e8f7ee; color: #07c160; font-size: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .appoint-pause { margin-left: calc(var(--rpx) * 12); color: #fa5151; font-size: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .appoint-meta { margin-top: calc(var(--rpx) * 4); color: #999999; font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .appoint-circle { width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); border-radius: 50%; border: calc(var(--rpx) * 2) solid #dcdcdc; box-sizing: border-box; } [data-route="pages/detail/detail"] .appoint-circle-on { border-color: #07c160; background: #07c160; } [data-route="pages/detail/detail"] .appoint-empty { padding: calc(var(--rpx) * 48) 0; } [data-route="pages/detail/detail"] .appoint-foot { margin-top: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .appoint-go-off { opacity: 0.45; } [data-route="pages/detail/detail"] .appoint-hint { margin-top: calc(var(--rpx) * 12); text-align: center; font-size: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] /* v4.86.225（木哥 12:0x）：推荐变按键（跟在标题后）+ 推荐原则说明 + 选定老师展示区 */ .invite-title { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/detail/detail"] .rec-pill { display: flex; align-items: center; border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 999); background: #f0faf3; padding: calc(var(--rpx) * 8) calc(var(--rpx) * 20); flex-shrink: 0; } [data-route="pages/detail/detail"] .rec-pill-on { background: #07c160; } [data-route="pages/detail/detail"] .rec-pill-hover { opacity: 0.8; } [data-route="pages/detail/detail"] .rec-pill-badge { font-size: calc(var(--rpx) * 20); color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); margin-right: calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .rec-pill-t { font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/detail/detail"] .rec-pill-on .rec-pill-t { color: #ffffff; } [data-route="pages/detail/detail"] .rec-rule { display: flex; align-items: flex-start; background: #f7f7f7; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .rec-rule-badge { font-size: calc(var(--rpx) * 20); color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); margin-right: calc(var(--rpx) * 12); margin-top: calc(var(--rpx) * 4); flex-shrink: 0; } [data-route="pages/detail/detail"] .rec-rule-body { flex: 1; min-width: 0; } [data-route="pages/detail/detail"] .rec-rule-t { font-size: calc(var(--rpx) * 24); color: #07c160; font-weight: 600; } [data-route="pages/detail/detail"] .rec-rule-d { font-size: calc(var(--rpx) * 24); color: #999999; margin-top: calc(var(--rpx) * 4); } [data-route="pages/detail/detail"] .invite-empty { padding: calc(var(--rpx) * 30) 0 calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] /* v4.86.464：老师身份看自己的打卡时，邀请位只剩这一句（不再摆空壳） */ .invite-mentor-only { padding: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); line-height: 1.6; color: #999999; } [data-route="pages/detail/detail"] .sel-card { display: flex; align-items: center; border: calc(var(--rpx) * 2) solid #bfe8cd; border-radius: calc(var(--rpx) * 10); background: #ffffff; padding: calc(var(--rpx) * 20); margin: calc(var(--rpx) * 10) 0 calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] /* v4.86.240（木哥令）：卡内左侧信息区负责「进主页细看」，右侧是就地拍板的「确认」 */ .sel-info { flex: 1; min-width: 0; display: flex; align-items: center; } [data-route="pages/detail/detail"] .sel-card-hover { background: #f7f7f7; } [data-route="pages/detail/detail"] .sel-confirm { flex-shrink: 0; margin: 0 0 0 calc(var(--rpx) * 16); padding: calc(var(--rpx) * 14) calc(var(--rpx) * 32); line-height: 1.2; font-size: calc(var(--rpx) * 28); font-weight: 600; color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 10); } [data-route="pages/detail/detail"] .sel-ava { width: calc(var(--rpx) * 88); height: calc(var(--rpx) * 88); border-radius: 50%; margin-right: calc(var(--rpx) * 20); flex-shrink: 0; background: #f0faf3; color: #07c160; font-size: calc(var(--rpx) * 32); display: flex; align-items: center; justify-content: center; } [data-route="pages/detail/detail"] .sel-main { flex: 1; min-width: 0; } [data-route="pages/detail/detail"] .sel-name { font-size: calc(var(--rpx) * 28); color: #1a1a1a; display: flex; align-items: center; } [data-route="pages/detail/detail"] .sel-meta { font-size: calc(var(--rpx) * 24); color: #999999; margin-top: calc(var(--rpx) * 4); } [data-route="pages/detail/detail"] .sel-go { font-size: calc(var(--rpx) * 24); color: #07c160; font-weight: 600; margin-top: calc(var(--rpx) * 8); } [data-route="pages/detail/detail"] /* ---- v4.86.229 木哥令：老师发起的视频示范（确认通知卡 + 示范视频卡） ---- */ .demo-box .demo-chat { margin-top: calc(var(--rpx) * 16); height: calc(var(--rpx) * 76); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .demo-notice { margin-top: calc(var(--rpx) * 16); border: calc(var(--rpx) * 2) solid #d5f0df; border-radius: calc(var(--rpx) * 10); background: #e8f7ee; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .demo-notice-head { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #191919; display: flex; align-items: center; } [data-route="pages/detail/detail"] .demo-notice-badge { flex: none; font-size: calc(var(--rpx) * 20); font-weight: 500; color: #07c160; border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); margin-right: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .demo-notice-body { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); line-height: 1.6; color: #888888; } [data-route="pages/detail/detail"] .demo-agree { margin-top: calc(var(--rpx) * 16); height: calc(var(--rpx) * 80); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 28); } [data-route="pages/detail/detail"] .demo-notice-tip { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #888888; } [data-route="pages/detail/detail"] /* v4.86.282（木哥令③）：全渠道邀约清单（分享/自主邀请/指定老师一锅端，可单独取消） */ .inv-box { margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #ffffff; border-radius: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .inv-title { font-size: calc(var(--rpx) * 24); font-weight: 600; color: #333333; } [data-route="pages/detail/detail"] .inv-li { display: flex; align-items: center; margin-top: calc(var(--rpx) * 16); } [data-route="pages/detail/detail"] .inv-main { flex: 1; min-width: 0; } [data-route="pages/detail/detail"] .inv-label { font-size: calc(var(--rpx) * 24); color: #666666; } [data-route="pages/detail/detail"] .inv-label.on { color: #07c160; } [data-route="pages/detail/detail"] .inv-time { font-size: calc(var(--rpx) * 20); color: #999999; margin-top: calc(var(--rpx) * 4); } [data-route="pages/detail/detail"] .inv-cancel { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 24); color: #e64340; border: calc(var(--rpx) * 1) solid #e64340; border-radius: calc(var(--rpx) * 999); } [data-route="pages/detail/detail"] /* v4.86.336：弹层里的「不再发了」—— 弱化样式，不抢分享主按钮 */ .card-mute { color: #999999; font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .badge-coach { color: #0a7d43; background: #e5f5ec; } [data-route="pages/detail/detail"] /* v4.86.403（A 组派单 · 作业等级四档）：点评里的等级卡。 四档唯一口径在 utils/grade.js；这里只管样子（金铜系，和会员卡同色）。 */ /* v4.86.420：逐字卡（学生详情页主位）—— 一字一块：字 + 最好~最差 + 均分 + 人话标签 */ .hw-card { margin: calc(var(--rpx) * 16) 0 calc(var(--rpx) * 8); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20); border: calc(var(--rpx) * 2) solid #e3efe6; border-radius: calc(var(--rpx) * 10); background: #f8fcf9; } [data-route="pages/detail/detail"] .hw-card-sum { font-size: calc(var(--rpx) * 24); color: #4a7a5c; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .hw-card-grid { display: flex; flex-wrap: wrap; } [data-route="pages/detail/detail"] .hw-char { width: calc(33.33% - calc(var(--rpx) * 12)); margin: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 8); border: calc(var(--rpx) * 2) solid #dfe9e2; border-radius: calc(var(--rpx) * 8); background: #ffffff; text-align: center; } [data-route="pages/detail/detail"] .hw-char-c { font-size: calc(var(--rpx) * 40); color: #223a2c; } [data-route="pages/detail/detail"] .hw-char-n { font-size: calc(var(--rpx) * 20); color: #5d7a68; margin-top: calc(var(--rpx) * 4); } [data-route="pages/detail/detail"] .hw-char-l { margin-top: calc(var(--rpx) * 6); } [data-route="pages/detail/detail"] .hw-char-tag { display: inline-block; font-size: calc(var(--rpx) * 20); color: #a05a2c; background: #fdf3e7; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 8); margin: calc(var(--rpx) * 2); } [data-route="pages/detail/detail"] .grade-card { margin: calc(var(--rpx) * 16) 0 calc(var(--rpx) * 8); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20); border: calc(var(--rpx) * 2) solid #efe3cf; border-radius: calc(var(--rpx) * 10); background: #fffdf8; } [data-route="pages/detail/detail"] .grade-badge { display: flex; align-items: baseline; } [data-route="pages/detail/detail"] .grade-icon { font-size: calc(var(--rpx) * 32); margin-right: calc(var(--rpx) * 8); } [data-route="pages/detail/detail"] .grade-name { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #a8792c; } [data-route="pages/detail/detail"] .grade-alias { margin-left: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #b39058; } [data-route="pages/detail/detail"] .grade-score { margin-left: auto; font-size: calc(var(--rpx) * 24); color: #8a7a63; } [data-route="pages/detail/detail"] .grade-desc { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #6b5c48; } [data-route="pages/detail/detail"] .grade-reason { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); color: #8a7a63; } [data-route="pages/detail/detail"] /* v4.86.448：陪练单卡的名字（不借 mw-name-t —— 那是老师点评卡的类名， * 借了会让「老师卡头像行被拆」这类判据抓不准） */ .coach-req { margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .coach-req-name { font-size: calc(var(--rpx) * 32); font-weight: bold; color: #111111; } [data-route="pages/detail/detail"] /* v4.86.468：照片三腿全倒时的诊断行（路径原文 / 试过几条），点一下复制 */ .photo-diag { display: block; margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 28); color: #9a9a9a; word-break: break-all; } [data-route="pages/detail/detail"] /* v4.86.496 毛笔示范（点评卡内）：小格 + 出处小签 + 一句口径。 两个格并排是因为「同字多版」在详情页只取第一版，两个格＝两个字；三列会把卡撑高。 */ .brush-demo { margin: calc(var(--rpx) * 22) 0 calc(var(--rpx) * 6); padding-top: calc(var(--rpx) * 18); border-top: calc(var(--rpx) * 1) solid #f0eeea; } [data-route="pages/detail/detail"] .brush-demo-title { font-size: calc(var(--rpx) * 24); color: #7a7268; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .brush-demo-row { display: flex; gap: calc(var(--rpx) * 14); } [data-route="pages/detail/detail"] .brush-cell { flex: 1; min-width: 0; } [data-route="pages/detail/detail"] .brush-player { width: 100%; height: calc(var(--rpx) * 220); border-radius: calc(var(--rpx) * 16); background: #f6f4f0; overflow: hidden; } [data-route="pages/detail/detail"] .brush-tag { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); color: #9a938a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } [data-route="pages/detail/detail"] .brush-note { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #b0a89e; line-height: 1.5; } [data-route="pages/detail/detail"] /* v4.86.523：付费动作键（视频动作纠正，按颗扣墨宝）统一微信小店风格—— 压掉全局 .btn-primary 的规范绿，改纯色小店橙胶囊；off 态仍是禁用绿不显眼，不动 */ .btn-primary.hw-video { background: #ff6146; border-radius: calc(var(--rpx) * 999); } [data-route="pages/detail/detail"] .btn-primary.hw-video.button-hover, [data-route="pages/detail/detail"] .btn-primary.hw-video[disabled].button-hover { background: #e84c30; } [data-route="pages/detail/detail"] /* v7.0.039（木哥发截图令）：视频动作纠正独立成卡 —— 金卡独占一块、突出重要性 */ .vc-hero { margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 4); padding: calc(var(--rpx) * 26) calc(var(--rpx) * 26) calc(var(--rpx) * 30); border-radius: calc(var(--rpx) * 20); background: linear-gradient(180deg, #fffef9 0%, #fdf3e0 100%); border: calc(var(--rpx) * 1) solid #eddfbd; } [data-route="pages/detail/detail"] .vc-hero-off { opacity: 0.55; } [data-route="pages/detail/detail"] .vc-hero-head { display: flex; align-items: center; font-size: calc(var(--rpx) * 32); font-weight: 700; color: #4a3208; } [data-route="pages/detail/detail"] .vc-hero-badge { margin-right: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 8); background: linear-gradient(135deg, #d8b25c 0%, #a8792c 100%); color: #fff; font-size: calc(var(--rpx) * 20); font-weight: 500; } [data-route="pages/detail/detail"] .vc-hero-pitch { margin: calc(var(--rpx) * 12) 0 calc(var(--rpx) * 22); font-size: calc(var(--rpx) * 24); color: #7a6a45; line-height: 1.5; } [data-route="pages/detail/detail"] .vc-hero .hw-video { margin-top: 0; } [data-route="pages/detail/detail"] /* v7.0.028（木哥五问②③④）：把这个字练一练（老师点评页） ============ */ .practice-box { margin-top: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .practice-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #6b7a6e; } [data-route="pages/detail/detail"] .practice-tools { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .practice-tool { flex: 1; padding: calc(var(--rpx) * 24) calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 10); background: #f4f8f5; text-align: center; } [data-route="pages/detail/detail"] .practice-tool-hover { background: #e9f3ec; } [data-route="pages/detail/detail"] .pt-i { width: calc(var(--rpx) * 60); height: calc(var(--rpx) * 60); margin: 0 auto; border-radius: 50%; background: #e2f2e7; font-size: calc(var(--rpx) * 28); line-height: calc(var(--rpx) * 60); color: #0a7a3d; font-weight: 600; } [data-route="pages/detail/detail"] .pt-t { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); font-weight: 500; color: #16301f; } [data-route="pages/detail/detail"] .pt-d { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); color: #8b9a91; } [data-route="pages/detail/detail"] /* 点评单字叠加图横滑条（A 组 2026-11-01 对接单 §二）：一行横滑，主攻角标在前 */ .review-gallery { display: flex; margin-top: calc(var(--rpx) * 16); white-space: nowrap; } [data-route="pages/detail/detail"] .rg-item { position: relative; display: inline-block; width: calc(var(--rpx) * 200); margin-right: calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .rg-img { width: calc(var(--rpx) * 200); height: calc(var(--rpx) * 200); border-radius: calc(var(--rpx) * 12); background: #f5f2ec; } [data-route="pages/detail/detail"] .rg-tag { position: absolute; top: calc(var(--rpx) * 8); left: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 8); background: rgba(90, 90, 90, 0.75); color: #fff; font-size: calc(var(--rpx) * 20); } [data-route="pages/detail/detail"] .rg-tag.rg-hot { background: #d9534f; } [data-route="pages/detail/detail"] .rg-cell { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #8a7a66; text-align: center; } [data-route="pages/detail/detail"] /* ===== v7.0.110（木哥 2026-11-01 令）：逐字叠加图条 ===== 点评文字下面一条横滑小图，点开全屏看大图，大小图都能左右滑。 小图上角标：写得好/要主攻 + 「字 · 第几行第几个」+ 重叠/占格两项（图小，先给最要紧的两个数）； 全屏图上四项指标全给（重叠、占格、格心偏、大小），与工位出图底栏同一份数。 */ .gal-box { margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 8); padding: calc(var(--rpx) * 18) 0 calc(var(--rpx) * 14); border-top: calc(var(--rpx) * 2) solid #f0e6d8; } [data-route="pages/detail/detail"] .gal-head { display: flex; align-items: baseline; padding: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 12); } [data-route="pages/detail/detail"] .gal-title { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #5d4a2f; } [data-route="pages/detail/detail"] .gal-count { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #9b8a72; } [data-route="pages/detail/detail"] .gal-swiper { width: 100%; height: calc(var(--rpx) * 310); transition: height 0.28s ease; } [data-route="pages/detail/detail"] .gal-swiper-on { height: calc(var(--rpx) * 620); } [data-route="pages/detail/detail"] .gal-card { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0 calc(var(--rpx) * 6); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 8) calc(var(--rpx) * 6); overflow: hidden; border-radius: calc(var(--rpx) * 12); background: #ffffff; border: calc(var(--rpx) * 1) solid #f0e6d8; box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 8) rgba(93, 74, 47, 0.06); } [data-route="pages/detail/detail"] .gal-swiper-on .gal-card { margin: 0 calc(var(--rpx) * 14); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 16) calc(var(--rpx) * 12); border-color: #e8dcc8; box-shadow: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 16) rgba(93, 74, 47, 0.10); } [data-route="pages/detail/detail"] .gal-card-on { border-color: #e4d6bf; box-shadow: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 16) rgba(93, 74, 47, 0.12); } [data-route="pages/detail/detail"] .gal-img { flex: 1 1 0; height: 0; width: 100%; min-height: 0; } [data-route="pages/detail/detail"] .gal-card .gal-cap { flex-shrink: 0; margin-top: calc(var(--rpx) * 6); line-height: calc(var(--rpx) * 30); font-size: calc(var(--rpx) * 20); color: #8a7a66; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-route="pages/detail/detail"] .gal-swiper-on .gal-card .gal-cap { margin-top: calc(var(--rpx) * 10); line-height: calc(var(--rpx) * 34); font-size: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .gal-badge { position: absolute; top: calc(var(--rpx) * 8); left: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 20); color: #3f7d52; background: rgba(76, 140, 92, 0.10); border: calc(var(--rpx) * 1) solid rgba(76, 140, 92, 0.22); } [data-route="pages/detail/detail"] .gal-swiper-on .gal-badge { top: calc(var(--rpx) * 24); left: calc(var(--rpx) * 24); } [data-route="pages/detail/detail"] .gal-badge-focus { color: #b4544f; background: rgba(200, 76, 72, 0.10); border-color: rgba(200, 76, 72, 0.22); } /* v7.0.162：旧的全屏平铺层样式整组退役 —— 全屏看大图统一走 components/card-viewer（华为钱包卡片式：两侧露边/远小近大/跟手缩放）。 */ /* ---- components/pay-wall/pay-wall.wxss ---- */ [data-comp="components/pay-wall/pay-wall"] /* 框 C · 开通弹窗（v4.86.540 木哥 2026-10-26 定稿） * 整屏软墙 → 居中弹窗；去图标；与 B/E 同一套金壳（深金带 / 金主键 / 文字链退路）。 * 木哥 2026-10-26 改口：主键是「开通会员」，退路「下周再来」降为文字链（原来相反）。 * 字号（v4.86.550）：与 gold-dialog 同一张微信弹窗表 —— * 带 / 标题 / 主键 / 文字链 = calc(var(--rpx) * 32) ｜ 副题与权益每行 = calc(var(--rpx) * 28) ｜ 勾号 = calc(var(--rpx) * 24) ｜ 注脚 = calc(var(--rpx) * 20)。 */ .pw-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.52); z-index: 999; display: flex; align-items: center; justify-content: center; } [data-comp="components/pay-wall/pay-wall"] .pw-dlg { width: calc(var(--rpx) * 480); border-radius: calc(var(--rpx) * 30); overflow: hidden; background: linear-gradient(180deg, #fffdf8 0%, #fffaef 58%, #fdf4e2 100%); box-shadow: 0 calc(var(--rpx) * 36) calc(var(--rpx) * 100) rgba(80, 55, 10, 0.28), 0 0 0 calc(var(--rpx) * 1) rgba(214, 186, 124, 0.55); } [data-comp="components/pay-wall/pay-wall"] .pw-band { height: calc(var(--rpx) * 72); background: linear-gradient(135deg, #6d4b10, #8d6620 52%, #6a480e); color: #ffe9b8; font-size: calc(var(--rpx) * 32); font-weight: 700; letter-spacing: calc(var(--rpx) * 6); display: flex; align-items: center; justify-content: center; } [data-comp="components/pay-wall/pay-wall"] .pw-bd { padding: calc(var(--rpx) * 26) calc(var(--rpx) * 30) calc(var(--rpx) * 22); } [data-comp="components/pay-wall/pay-wall"] .pw-title { font-size: calc(var(--rpx) * 32); font-weight: 800; color: #4a3208; text-align: center; line-height: 1.45; } [data-comp="components/pay-wall/pay-wall"] .pw-sub { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); color: #a1834a; text-align: center; line-height: 1.6; } [data-comp="components/pay-wall/pay-wall"] .pw-keep { margin-top: calc(var(--rpx) * 20); padding-top: calc(var(--rpx) * 18); border-top: calc(var(--rpx) * 1) solid #f0e3c4; } [data-comp="components/pay-wall/pay-wall"] .pw-keep-i { display: flex; align-items: flex-start; line-height: 1.85; } [data-comp="components/pay-wall/pay-wall"] .pw-ck { font-size: calc(var(--rpx) * 24); color: #c79733; width: calc(var(--rpx) * 24); flex: 0 0 calc(var(--rpx) * 24); } [data-comp="components/pay-wall/pay-wall"] .pw-kt { font-size: calc(var(--rpx) * 28); color: #4a3a17; flex: 1; } [data-comp="components/pay-wall/pay-wall"] .pw-fine { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 20); color: #a2937a; text-align: center; line-height: 1.5; } [data-comp="components/pay-wall/pay-wall"] .pw-acts { padding: 0 calc(var(--rpx) * 30) calc(var(--rpx) * 26); } [data-comp="components/pay-wall/pay-wall"] .pw-primary { height: calc(var(--rpx) * 82); border-radius: calc(var(--rpx) * 10); background: linear-gradient(180deg, #fbeecd 0%, #eed79f 46%, #dcb96a 78%, #cfa64f 100%); color: #6b4a12; font-size: calc(var(--rpx) * 32); font-weight: 700; letter-spacing: calc(var(--rpx) * 0.4); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 calc(var(--rpx) * 1) 0 rgba(255, 255, 255, 0.8), inset 0 0 0 calc(var(--rpx) * 1) rgba(255, 255, 255, 0.5), 0 calc(var(--rpx) * 8) calc(var(--rpx) * 24) rgba(150, 105, 25, 0.2); } [data-comp="components/pay-wall/pay-wall"] .pw-primary-hover { opacity: 0.92; } [data-comp="components/pay-wall/pay-wall"] .pw-link { margin-top: calc(var(--rpx) * 12); height: calc(var(--rpx) * 64); display: flex; align-items: center; justify-content: center; font-size: calc(var(--rpx) * 32); color: #8a7340; } /* ---- pages/mine/mine.wxss ---- */ [data-route="pages/mine/mine"] /* ================================================================== * 「我的」页 · 微信生态皮肤（v4.70.0） * 只换皮：白分组块 + 发丝线 + 灰箭头，去掉渐变/阴影/虚线/药丸。 * 分组顺序、功能位置、字段一概不动。 * ================================================================== */ .login-btn { margin-top: calc(var(--rpx) * 28); } [data-route="pages/mine/mine"] /* ---- ① 身份 hero：微信"我"页的白块 ---- */ .hero { position: relative; background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 32) calc(var(--rpx) * 32) calc(var(--rpx) * 26); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] .hero-gear { position: absolute; top: calc(var(--rpx) * 20); right: calc(var(--rpx) * 24); width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f7f7f7; font-size: calc(var(--rpx) * 32); color: #888888; } [data-route="pages/mine/mine"] /* v7.0.074（木哥令）：齿轮位不再用 ⚙ 字符，换意见反馈原来的那张真图（gear.png） */ .hero-gear-img { width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); } [data-route="pages/mine/mine"] .hero-gear-icon { font-size: calc(var(--rpx) * 40); line-height: 1; } [data-route="pages/mine/mine"] .hero-top { display: flex; align-items: center; padding-right: calc(var(--rpx) * 60); } [data-route="pages/mine/mine"] /* 头像这一坨包一层：头像 calc(var(--rpx) * 112) 的圆，右下角挂**勋章角标**（v4.86.478）。 原先这里是换头像的小笔（✎），木哥令把位置让给勋章/荣誉章 —— 换头像收到「设置 → 头像」那一行去，这里有更值得露的东西。 */ .hero-avatar-wrap { position: relative; width: calc(var(--rpx) * 112); height: calc(var(--rpx) * 112); flex-shrink: 0; } [data-route="pages/mine/mine"] /* 角标：白底金圈，里头是已点亮勋章里最靠后的那枚（越靠后越高档）； 一枚都还没点亮时显示灰的奖牌，点进去看怎么点亮 —— 不做成「什么都没有」。 */ .hero-avatar-badge { position: absolute; right: calc(var(--rpx) * -6); bottom: calc(var(--rpx) * -6); width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); border-radius: 50%; background: #ffffff; border: calc(var(--rpx) * 2) solid #f3d19e; font-size: calc(var(--rpx) * 24); line-height: calc(var(--rpx) * 40); text-align: center; box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 6) rgba(0, 0, 0, 0.12); } [data-route="pages/mine/mine"] .hero-avatar-badge-empty { border-color: #e6e6e6; filter: grayscale(1); opacity: 0.7; } [data-route="pages/mine/mine"] .hero-avatar { width: calc(var(--rpx) * 112); height: calc(var(--rpx) * 112); border-radius: 50%; flex-shrink: 0; } [data-route="pages/mine/mine"] .hero-avatar-text { background: #e8f7ee; color: #07c160; font-size: calc(var(--rpx) * 48); font-weight: 600; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } [data-route="pages/mine/mine"] .hero-main { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 24); } [data-route="pages/mine/mine"] /* v4.86.266（木哥令）：名字行 = 名字（最多 6 字）+ 积分胶囊。 胶囊在名字行右侧、小齿轮左边（齿轮绝对定位在卡片右上，hero-top 的 padding-right: calc(var(--rpx) * 60) 已经让开它，所以这里只跟名字抢宽度）。 */ .hero-name-row { display: flex; align-items: center; } [data-route="pages/mine/mine"] .hero-name { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 40); font-weight: 600; color: #191919; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/mine/mine"] .hero-score { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); display: flex; align-items: baseline; gap: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 999); background: #fbf3dd; border: calc(var(--rpx) * 1) solid rgba(217, 168, 58, 0.35); } [data-route="pages/mine/mine"] .hs-num { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #a8791b; } [data-route="pages/mine/mine"] .hs-unit { font-size: calc(var(--rpx) * 20); color: #a8791b; opacity: 0.8; } [data-route="pages/mine/mine"] .hero-lv-row { display: flex; align-items: baseline; margin-top: calc(var(--rpx) * 10); } [data-route="pages/mine/mine"] .hero-lv { font-size: calc(var(--rpx) * 24); font-weight: 500; color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 14); margin-right: calc(var(--rpx) * 12); } [data-route="pages/mine/mine"] .hero-title { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/mine/mine"] .hero-days { font-size: calc(var(--rpx) * 24); color: #888888; margin-left: calc(var(--rpx) * 12); } [data-route="pages/mine/mine"] /* 升级进度条：扁平，无内阴影 */ .hero-progress { display: flex; align-items: center; margin-top: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] .hero-bar { flex: 1; height: calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 999); background: #f2f2f2; overflow: hidden; } [data-route="pages/mine/mine"] .hero-bar-fill { height: 100%; border-radius: calc(var(--rpx) * 999); background: #07c160; transition: width 0.3s; } [data-route="pages/mine/mine"] .hero-bar-num { margin-left: calc(var(--rpx) * 14); flex-shrink: 0; font-size: calc(var(--rpx) * 24); font-weight: 500; color: #07c160; } [data-route="pages/mine/mine"] .hero-bar-tip { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/mine/mine"] /* 四格统计：黑数字（微信不拿彩色填数字），灰标签，实线分隔 */ /* v4.86.66：.hero-stats/.hero-stat*（打卡四数值）随数值一起挪去打卡页（index 的 .checkin-stats） */ .main-btn { margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] /* 卡标题右侧的「去看看 ›」链接（好友通讯录等；v4.86.64 财富卡撤后这仍是通用样式） */ .link { color: #576b95; font-size: calc(var(--rpx) * 24); } [data-route="pages/mine/mine"] /* ---- 互动次数 ---- */ .interact-block { margin-top: calc(var(--rpx) * 18); padding-top: calc(var(--rpx) * 16); border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/mine/mine"] .interact-head { display: flex; align-items: baseline; justify-content: space-between; } [data-route="pages/mine/mine"] .interact-title { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/mine/mine"] .interact-sub { font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/mine/mine"] .interact-row { display: flex; margin-top: calc(var(--rpx) * 14); } [data-route="pages/mine/mine"] .interact-cell { flex: 1; margin: 0 calc(var(--rpx) * 6); padding: calc(var(--rpx) * 14) 0 calc(var(--rpx) * 12); text-align: center; border-radius: calc(var(--rpx) * 12); background: #f7f7f7; } [data-route="pages/mine/mine"] .interact-cell:first-child { margin-left: 0; } [data-route="pages/mine/mine"] .interact-cell:last-child { margin-right: 0; } [data-route="pages/mine/mine"] .interact-on { background: #e8f7ee; } [data-route="pages/mine/mine"] .interact-off { opacity: 0.55; } [data-route="pages/mine/mine"] .ic-icon { font-size: calc(var(--rpx) * 32); line-height: 1; } [data-route="pages/mine/mine"] .ic-num { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; line-height: 1.2; } [data-route="pages/mine/mine"] .ic-unit { margin-left: calc(var(--rpx) * 2); font-size: calc(var(--rpx) * 20); font-weight: 400; color: #b2b2b2; } [data-route="pages/mine/mine"] .ic-name { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/mine/mine"] .interact-tip { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/mine/mine"] /* ---- ③ 我的猫 ---- */ .cat-card { display: flex; align-items: center; } [data-route="pages/mine/mine"] .cat-face { width: calc(var(--rpx) * 56); height: calc(var(--rpx) * 56); margin-right: calc(var(--rpx) * 20); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } [data-route="pages/mine/mine"] /* 常态是单线绿猫 logo，刺刺毛时仍是 😾（状态不能丢） */ .cat-face-img { width: 100%; height: 100%; display: block; } [data-route="pages/mine/mine"] .cat-face-sad { font-size: calc(var(--rpx) * 52); line-height: 1; } [data-route="pages/mine/mine"] .cat-main { flex: 1; min-width: 0; } [data-route="pages/mine/mine"] .cat-name { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/mine/mine"] .cat-tag { font-size: calc(var(--rpx) * 24); color: #07c160; background: #e8f7ee; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 14); margin-left: calc(var(--rpx) * 12); } [data-route="pages/mine/mine"] .cat-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); } [data-route="pages/mine/mine"] /* 刺刺毛：卡片整体转红调，扁平 */ .cat-card-sad { background: #feeceb; } [data-route="pages/mine/mine"] .cat-tag-sad { color: #ffffff; background: #fa5151; } [data-route="pages/mine/mine"] /* 微信灰箭头 */ .cat-arrow { font-size: calc(var(--rpx) * 40); font-weight: 300; line-height: 1; color: #c8c8cd; } [data-route="pages/mine/mine"] /* ---- ④ 勋章墙 ---- */ .medal-grid { display: flex; flex-wrap: wrap; gap: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] .medal { width: calc(var(--rpx) * 190); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 6) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 12); text-align: center; box-sizing: border-box; } [data-route="pages/mine/mine"] .medal-got { background: #f7f7f7; } [data-route="pages/mine/mine"] .medal-lock { background: #f7f7f7; opacity: 0.55; } [data-route="pages/mine/mine"] .medal-icon { font-size: calc(var(--rpx) * 48); line-height: 1.1; } [data-route="pages/mine/mine"] .medal-name { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); font-weight: 500; color: #191919; } [data-route="pages/mine/mine"] .medal-hint { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #b2b2b2; line-height: 1.4; } [data-route="pages/mine/mine"] .medal-got .medal-hint { color: #07c160; } [data-route="pages/mine/mine"] /* ---- ⑤ 战力榜（v4.85 榜单方案 A；v4.86.60 木哥：只铺冠军，其余折叠） ---- */ .board-row { display: flex; align-items: center; padding: calc(var(--rpx) * 20) 0; background: #f7f7f7; border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] /* 冠军行（木哥：战力榜只展示冠军）—— 金色高亮，一眼看到第一名 */ .board-champ { display: flex; align-items: center; margin-top: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20); background: #fff8e6; border: calc(var(--rpx) * 2) solid #f2d79b; border-radius: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] /* 名次徽标：1 冠军 / 2 亚军 / 3 季军 / 其余就是数字 */ .board-medal { flex-shrink: 0; width: calc(var(--rpx) * 76); margin-right: calc(var(--rpx) * 14); text-align: center; font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/mine/mine"] .board-medal-1 { color: #b06a00; font-weight: 600; } [data-route="pages/mine/mine"] .board-medal-top { color: #07c160; font-weight: 600; } [data-route="pages/mine/mine"] .board-name { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 28); color: #191919; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/mine/mine"] /* 战力称号（墨童/墨士/…）：小标签，跟在名字后面 */ .board-title { flex-shrink: 0; margin-left: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); background: #e9f8ef; color: #0a7a3d; font-size: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 8); } [data-route="pages/mine/mine"] .board-total { flex-shrink: 0; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/mine/mine"] .board-tip { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); } [data-route="pages/mine/mine"] /* 「展开其余 N 名 / 收起」（v4.86.60）—— 默认只铺冠军，点这里看全部名次 */ .board-fold { margin-top: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 12) 0; text-align: center; font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/mine/mine"] .board-fold:active { opacity: 0.6; } [data-route="pages/mine/mine"] /* ---- ⑥ 常用功能（v4.86.60 木哥：「变成二行然后左右活动的多页」） ---- 每页 2 行 × 4 列（一页 8 格），左右滑动翻页；16 格正好两页。 ⚠️ swiper **必须给死高度**，不给就是 0 高、整块看不见（这里就是最容易踩的坑）： 一行 ≈ 上下留白 20+20 + 底片 92 + 名字上边距 10 + 名字行高 ~29 = calc(var(--rpx) * 171)； 两行 ≈ calc(var(--rpx) * 342)，再给底部那排小圆点留出位置 → calc(var(--rpx) * 380)。 */ .fn-swiper { height: calc(var(--rpx) * 380); margin-top: calc(var(--rpx) * 4); } [data-route="pages/mine/mine"] .fn-page { display: flex; flex-wrap: wrap; } [data-route="pages/mine/mine"] .fn { width: 25%; padding: calc(var(--rpx) * 20) 0; text-align: center; box-sizing: border-box; } [data-route="pages/mine/mine"] .fn:active { opacity: 0.6; } [data-route="pages/mine/mine"] /* 养猫格：右上角小红点 */ .fn-rel { position: relative; } [data-route="pages/mine/mine"] .fn-dot { position: absolute; top: calc(var(--rpx) * 12); right: 50%; margin-right: calc(var(--rpx) * -42); width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #fa5151; } [data-route="pages/mine/mine"] /* v4.86.65（木哥）：未读数字角标 —— 取代各入口原来的小红点： 所有未读提醒直接标注具体数，>99 折 99+（口径在 utils/unread-badge.js）。 位置与 .fn-dot 同一挂点（fn-rel 相对定位），宽度按内容自适应。 */ .fn-badge { position: absolute; top: calc(var(--rpx) * 6); right: 50%; margin-right: calc(var(--rpx) * -56); min-width: calc(var(--rpx) * 28); height: calc(var(--rpx) * 30); padding: 0 calc(var(--rpx) * 8); box-sizing: border-box; border-radius: calc(var(--rpx) * 16); background: #fa5151; color: #fff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 30); text-align: center; font-weight: 600; } [data-route="pages/mine/mine"] /* v4.86.395（木哥令）：查字格「推荐」标 —— 角标挂在 fn-rel 右上（与 .fn-badge 同挂点）， 不占格子位，版式仍 2×4。 v4.86.436（木哥令：「颜色不对，不醒目；苹果手机还显示不全」）两处都改： ① 配色 —— 原来是品牌绿 #07c160 底白字，压在白卡 + 浅绿底片上跟周围的绿糊成一片， 等于没标。改成暖橙 #ff6a00 实心 + 白字 + 白描边：这是全站唯一一支暖橙， 跟绿色（品牌/主按钮）、红色（未读角标 #fa5151）都分得开，一眼就能找到。 ② 位置 —— 原来 top:calc(var(--rpx) * -8)，第一行那格的角标正好顶到 swiper 的裁剪框**外面**， iOS 严格裁（安卓有时能漏出来）⇒ 木哥看到的「显示不全 / 缺半个字」。 现在收回格内 top:calc(var(--rpx) * 4)，压在图标底片右上角，任何机型都不会被裁。 ③ 尺寸 —— 高度给死 calc(var(--rpx) * 30)（含 calc(var(--rpx) * 2) 白描边，border-box），行高 calc(var(--rpx) * 30)， calc(var(--rpx) * 20) 的字在里面有 calc(var(--rpx) * 2) 上下余量，不再挤到边。 */ .fn-rec { position: absolute; top: calc(var(--rpx) * 4); right: 50%; margin-right: calc(var(--rpx) * -52); height: calc(var(--rpx) * 30); padding: 0 calc(var(--rpx) * 10); box-sizing: border-box; border: calc(var(--rpx) * 2) solid #ffffff; border-radius: calc(var(--rpx) * 999); background: #ff6a00; box-shadow: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 8) rgba(255, 106, 0, 0.3); color: #ffffff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 26); text-align: center; font-weight: 600; } [data-route="pages/mine/mine"] /* v4.86.436（木哥令）：查字整格上暖底 —— 角标是「点一下才发现」，底色是「扫一眼就看到」。 只作用于 .fn-hot 这一格（图标底片 #e8f7ee → 暖砂 #fff0e0，名字 #191919 → 砖红 #d9480f）， 其余 15 格保持原样，版式（calc(var(--rpx) * 92) 底片 / 2×4 / 一页 8 格）一格不动。 */ .fn-hot .fn-icon { background: #fff0e0; box-shadow: 0 0 0 calc(var(--rpx) * 2) rgba(255, 106, 0, 0.18); } [data-route="pages/mine/mine"] .fn-hot .fn-name { color: #d9480f; font-weight: 600; } [data-route="pages/mine/mine"] /* 「猫咪乐园 ›」链接前的小红点 */ .link-dot { display: flex; align-items: center; } [data-route="pages/mine/mine"] .link-dot-mark { width: calc(var(--rpx) * 14); height: calc(var(--rpx) * 14); border-radius: 50%; background: #fa5151; margin-right: calc(var(--rpx) * 8); } [data-route="pages/mine/mine"] /* v4.86.65：好友通讯录标题行的未读数字（= 全部好友聊天未读之和），样式与 friends 页行尾角标同款 */ .link-badge { min-width: calc(var(--rpx) * 28); height: calc(var(--rpx) * 30); padding: 0 calc(var(--rpx) * 8); box-sizing: border-box; border-radius: calc(var(--rpx) * 16); background: #fa5151; color: #fff; font-size: calc(var(--rpx) * 20); line-height: calc(var(--rpx) * 30); text-align: center; font-weight: 600; margin-right: calc(var(--rpx) * 8); } [data-route="pages/mine/mine"] /* 图标底片：46px（calc(var(--rpx) * 92)）圆角方块 + 浅绿，微信「服务」页同款做法； 图标本体 29px —— PNG 画布里图形占 83.2/132，所以铺满 calc(var(--rpx) * 92) 正好 */ .fn-icon { width: calc(var(--rpx) * 92); height: calc(var(--rpx) * 92); margin: 0 auto; border-radius: calc(var(--rpx) * 26); background: #e8f7ee; overflow: hidden; } [data-route="pages/mine/mine"] .fn-glyph { display: block; width: 100%; height: 100%; } [data-route="pages/mine/mine"] .fn-name { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #191919; } [data-route="pages/mine/mine"] /* 网格里的分享按钮：抹掉 button 默认外观 */ .fn-btn { background: transparent; border: none; line-height: normal; font-size: inherit; padding: calc(var(--rpx) * 20) 0; margin: 0; border-radius: 0; } [data-route="pages/mine/mine"] .fn-btn::after { border: none; } [data-route="pages/mine/mine"] .fn-tip { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); } [data-route="pages/mine/mine"] /* ---- ⑥½ 常态入口底版（v4.86 / 2026-10-10 木哥） 视觉效果：不占常用功能格子，也不受说话页那两张卡的 dismiss 影响。 ★ v4.86.57（木哥）：「把「墨灵猫」加到微信」那条入口从「我的」页撤了，但这套类名留着 —— 下面 .mentor-row（加老师微信）的版式就是复用它（class="kefu-row mentor-row"）。 别再当它是「客服专用样式」而顺手清理：删了 mentor-row 会散架。 视觉按「绿底卡」规范：浅绿底 + 绿描边 + 深绿标题（mentor-row 另外覆写成橙色）。 */ .kefu-row { display: flex; align-items: center; margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 22) calc(var(--rpx) * 24); background: #e9f8ef; border: calc(var(--rpx) * 2) solid #a6e0be; border-radius: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] /* v7.0.061（木哥令）：新手引导重看一行 —— 与客服行同款，但不叫 kefu-row （我的页只留 mentor-row 那一条客服入口，test-mine-mentor-qr 明令） */ .guide-row { display: flex; align-items: center; margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 22) calc(var(--rpx) * 24); background: #f4f7ff; border: calc(var(--rpx) * 2) solid #c8d8f5; border-radius: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] .kefu-ico { width: calc(var(--rpx) * 40); height: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 14); flex-shrink: 0; } [data-route="pages/mine/mine"] .kefu-t { flex: 1; font-size: calc(var(--rpx) * 28); color: #0a7a3d; font-weight: 600; } [data-route="pages/mine/mine"] .kefu-x { font-size: calc(var(--rpx) * 24); color: #4c8f68; } [data-route="pages/mine/mine"] /* ---- ⑦ 关于 ---- */ .about { margin-top: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] .model-note { margin-top: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] /* 合规入口：微信蓝，不加下划线 */ .link { color: #576b95; text-decoration: none; } [data-route="pages/mine/mine"] /* 退出登录：微信式白底红字整块按钮 */ .signout { margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 26) 0; text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 32); background: #ffffff; border-radius: calc(var(--rpx) * 16); } [data-route="pages/mine/mine"] .signout:active { background: #ececec; } [data-route="pages/mine/mine"] .err { margin-top: calc(var(--rpx) * 24); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/mine/mine"] /* ---- 勋章条（头像下方，点进「我的勋章」页） ---- */ .hero-medal-bar { display: flex; align-items: center; margin-top: calc(var(--rpx) * 22); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 18); border-radius: calc(var(--rpx) * 12); background: #f7f7f7; } [data-route="pages/mine/mine"] .hmb-label { flex-shrink: 0; font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/mine/mine"] .hmb-list { flex: 1; display: flex; align-items: center; margin-left: calc(var(--rpx) * 14); overflow: hidden; } [data-route="pages/mine/mine"] .hmb-item { font-size: calc(var(--rpx) * 32); margin-right: calc(var(--rpx) * 6); } [data-route="pages/mine/mine"] .hmb-empty { font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/mine/mine"] .hmb-more { margin-left: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/mine/mine"] .hmb-count { flex-shrink: 0; font-size: calc(var(--rpx) * 24); font-weight: 500; color: #07c160; } [data-route="pages/mine/mine"] .hmb-go { margin-left: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 40); font-weight: 300; line-height: 1; color: #c8c8cd; } [data-route="pages/mine/mine"] /* v4.69.2：离屏画布收进屏内。 原来用 position:fixed + left:-9999px 藏到屏幕外，iOS 会把这种负偏移的 fixed 盒子算进页面可滚动宽度 —— 整页因此能被左右拖（「我的」页晃、打卡/记录页没有 这块画布所以不晃）。现在锚在屏内左上、缩到 1px、透明、不挡点击。 画布出图只认 canvas.width/height（share-card.js / detail.js 都是这么写的）， CSS 尺寸只影响显示，改小不影响分享图质量。 */ .share-canvas { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1; } [data-route="pages/mine/mine"] /* ---- ④ 好友通讯录 ---- */ .fr-note { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); line-height: 1.5; } [data-route="pages/mine/mine"] .fr-peek { display: flex; flex-wrap: wrap; margin-top: calc(var(--rpx) * 16); gap: calc(var(--rpx) * 20) 0; } [data-route="pages/mine/mine"] .fr-peek-item { width: 25%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: 0 calc(var(--rpx) * 6); } [data-route="pages/mine/mine"] .fr-peek-avatar { width: calc(var(--rpx) * 88); height: calc(var(--rpx) * 88); border-radius: 50%; background: #f2f2f2; } [data-route="pages/mine/mine"] .fr-peek-empty { display: flex; align-items: center; justify-content: center; background: #e8f7ee; color: #07c160; font-size: calc(var(--rpx) * 40); font-weight: 600; } [data-route="pages/mine/mine"] .fr-peek-name { margin-top: calc(var(--rpx) * 8); max-width: 100%; font-size: calc(var(--rpx) * 24); color: #191919; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-route="pages/mine/mine"] .fr-peek-badge { margin-top: calc(var(--rpx) * 2); font-size: calc(var(--rpx) * 20); color: #07c160; background: #e8f7ee; border-radius: calc(var(--rpx) * 4); padding: 0 calc(var(--rpx) * 8); } [data-route="pages/mine/mine"] .fr-peek-empty-tip { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); } [data-route="pages/mine/mine"] /* ========= 练字好物（v4.86.398 木哥令「5个商品直接移到商城」）========= 微信小店商品卡下线后，这里只剩两条 .cell（商城直购 + 收货地址）， 全部用全局样式，本段不再有自己的选择器。 */ /* 页脚：合规入口与版本（居中小灰字，v4.74.5 从「关于点评」卡里挪出来） */ .page-foot { margin-top: calc(var(--rpx) * 32); padding: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 48); text-align: center; } [data-route="pages/mine/mine"] .pf-link { font-size: calc(var(--rpx) * 24); color: #576b95; } [data-route="pages/mine/mine"] .pf-line { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); color: #b2b2b2; } [data-route="pages/mine/mine"] /* v4.74.20：我的猫卡绿底，视觉突出 */ .cat-card-green { background: #e9f8ef; border: calc(var(--rpx) * 1) solid rgba(7, 193, 96, 0.22); } [data-route="pages/mine/mine"] /* v4.83.2：邀请提醒入口（微信服务通知订阅）的小链接 */ /* ========= v4.86.49：加老师微信（企业微信一对一入口 + 二维码弹层） ========= */ /* v4.86.57：我的页只剩这一条私域入口（客服会话那条已按木哥要求撤掉）—— 底版仍是 kefu-row（复用 .kefu-row/.kefu-ico/.kefu-t/.kefu-x），色系换成橙， 和别处（说话页/银行页）的客服会话入口区分开。 */ .mentor-row { background: #fff4e8; border-color: #f5cb9c; } [data-route="pages/mine/mine"] .mentor-row .kefu-x { color: #e08a2e; } [data-route="pages/mine/mine"] .qr-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: calc(var(--rpx) * 40); } [data-route="pages/mine/mine"] .qr-box { width: 100%; max-width: calc(var(--rpx) * 560); padding: calc(var(--rpx) * 36) calc(var(--rpx) * 32) calc(var(--rpx) * 28); background: #fff; border-radius: calc(var(--rpx) * 24); display: flex; flex-direction: column; align-items: center; } [data-route="pages/mine/mine"] .qr-title { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #2b2b2b; } [data-route="pages/mine/mine"] .qr-img { width: calc(var(--rpx) * 400); height: calc(var(--rpx) * 400); margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 16); background: #f6f6f6; } [data-route="pages/mine/mine"] .qr-tip { font-size: calc(var(--rpx) * 28); color: #e08a2e; font-weight: 500; } [data-route="pages/mine/mine"] .qr-note { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); line-height: 1.6; color: #8a8a8a; } [data-route="pages/mine/mine"] .qr-btn { margin-top: calc(var(--rpx) * 28); width: 100%; } [data-route="pages/mine/mine"] /* ============================================================ * v4.86.441（A 组 r254 B1）· 一周一封信：「本周的信还没看」那一行 * ------------------------------------------------------------ * 只有未读时才出现（wx:if），所以样式里不做隐藏 —— 消失靠 state，不靠 CSS。 * ============================================================ */ .letter-line { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/mine/mine"] .letter-line-main { display: flex; align-items: center; } [data-route="pages/mine/mine"] .letter-line-ico { font-size: calc(var(--rpx) * 32); color: #07c160; margin-right: calc(var(--rpx) * 12); line-height: 1; } [data-route="pages/mine/mine"] .letter-line-txt { font-size: calc(var(--rpx) * 32); color: #191919; } [data-route="pages/mine/mine"] .letter-line-arrow { font-size: calc(var(--rpx) * 32); color: #c8c8c8; line-height: 1; } /* ---- pages/wallet/wallet.wxss ---- */ [data-route="pages/wallet/wallet"] .login-btn { margin-top: calc(var(--rpx) * 28); } [data-route="pages/wallet/wallet"] /* ---- ① 我的财富（v4.86.64：从 pages/mine 搬来，样式同款） ---- */ /* 右上角「猫咪乐园 ›」链接 * v4.86.481（木哥 2026-10-24）：「把财富页面和充值页面的 ui 都设计成这个金色风格」 * —— 本页主色一律换成金铜系（与 components/pay-pop 同一套色）： * 主金 #a8792c / 亮金 #d8b25c / 底 #fdf8ec / 边 #c9a15c / 深棕字 #6b4d14 * 原来这里是微信蓝、数字是品牌绿，与「财富」这件事不是一套语言。 */ .link { color: #a8792c; font-size: calc(var(--rpx) * 24); } [data-route="pages/wallet/wallet"] /* 「猫咪乐园 ›」链接前的小红点 */ .link-dot { display: flex; align-items: center; } [data-route="pages/wallet/wallet"] .link-dot-mark { width: calc(var(--rpx) * 14); height: calc(var(--rpx) * 14); border-radius: 50%; background: #fa5151; margin-right: calc(var(--rpx) * 8); } [data-route="pages/wallet/wallet"] .wh-tag { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); font-weight: 400; color: #ffffff; background: #a8792c; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); } [data-route="pages/wallet/wallet"] .wealth-row { display: flex; margin-top: calc(var(--rpx) * 18); padding-top: calc(var(--rpx) * 18); border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/wallet/wallet"] /* 一行 5 个数字：灵力 / 猫粮 / 梳毛 / 洗澡 / 铲屎 */ .wealth-item { position: relative; flex: 1; min-width: 0; text-align: center; padding: calc(var(--rpx) * 8) 0; border-radius: calc(var(--rpx) * 12); } [data-route="pages/wallet/wallet"] /* 右上角小红点 */ .wi-dot { position: absolute; top: calc(var(--rpx) * 2); right: 50%; margin-right: calc(var(--rpx) * -44); width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #fa5151; } [data-route="pages/wallet/wallet"] .wealth-item:active { background: #f7f7f7; } [data-route="pages/wallet/wallet"] .wi-num { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; line-height: 1.2; white-space: nowrap; } [data-route="pages/wallet/wallet"] .wi-max { font-size: calc(var(--rpx) * 20); font-weight: 400; color: #b2b2b2; } [data-route="pages/wallet/wallet"] .wi-label { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); color: #888888; white-space: nowrap; } [data-route="pages/wallet/wallet"] .res-tip { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/wallet/wallet"] /* 小字说明折叠（原「我的」页 v4.74.20 同款：两字按钮在左边） */ .tip-fold-row { display: flex; align-items: flex-start; margin-top: calc(var(--rpx) * 16); } [data-route="pages/wallet/wallet"] .tip-fold-toggle { flex-shrink: 0; margin-right: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 22); border: calc(var(--rpx) * 1) solid rgba(217, 182, 74, 0.55); border-radius: calc(var(--rpx) * 999); background: rgba(217, 182, 74, 0.12); font-size: calc(var(--rpx) * 20); color: #fa9d3b; line-height: 1.4; } [data-route="pages/wallet/wallet"] .tip-fold-toggle-hover { background: rgba(217, 182, 74, 0.28); } [data-route="pages/wallet/wallet"] .tip-fold-row .res-tip { flex: 1; margin-top: 0; } [data-route="pages/wallet/wallet"] /* 墨宝卡片：白底 + 一层极淡金雾（金铜系，金额用主金强调） */ .wallet-card { background: linear-gradient(180deg, #fffdf6, #ffffff calc(var(--rpx) * 240)); border: calc(var(--rpx) * 2) solid #f0e6d2; } [data-route="pages/wallet/wallet"] .wallet-card .muted { color: #888888; } [data-route="pages/wallet/wallet"] .balance { margin: calc(var(--rpx) * 18) 0 calc(var(--rpx) * 10); display: flex; align-items: baseline; } [data-route="pages/wallet/wallet"] .balance-num { font-size: calc(var(--rpx) * 40); font-weight: 600; line-height: 1.1; color: #a8792c; } [data-route="pages/wallet/wallet"] .balance-unit { font-size: calc(var(--rpx) * 28); margin-left: calc(var(--rpx) * 12); color: #888888; } [data-route="pages/wallet/wallet"] .wallet-line { font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/wallet/wallet"] .rule { font-size: calc(var(--rpx) * 28); color: #888888; padding: calc(var(--rpx) * 10) 0; } [data-route="pages/wallet/wallet"] .err { margin-top: calc(var(--rpx) * 20); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/wallet/wallet"] /* v4.86.506（木哥 07:52 令）：一行左右滑动，不许折行 */ .pack-row { white-space: nowrap; margin-top: calc(var(--rpx) * 22); } [data-route="pages/wallet/wallet"] .pack { display: inline-block; vertical-align: top; width: calc(var(--rpx) * 150); margin-right: calc(var(--rpx) * 18); text-align: center; padding: calc(var(--rpx) * 24) 0; border-radius: calc(var(--rpx) * 10); /* v4.86.523：充值面额片随收费键统一微信小店橙（原金皮） */ background: #fffdf8; border: calc(var(--rpx) * 2) solid #ffd9d1; } [data-route="pages/wallet/wallet"] .pack-num { font-size: calc(var(--rpx) * 40); font-weight: 600; color: #ff6146; } [data-route="pages/wallet/wallet"] .pack-price { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #e88a76; } [data-route="pages/wallet/wallet"] .pack-busy { opacity: 0.55; } [data-route="pages/wallet/wallet"] .cost-tip { margin-top: calc(var(--rpx) * 18); } [data-route="pages/wallet/wallet"] /* ---- 攒墨宝换好礼（v4.5） ---- */ .prize { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 12); background: #f7f7f7; margin-top: calc(var(--rpx) * 16); } [data-route="pages/wallet/wallet"] .prize-busy { opacity: 0.55; } [data-route="pages/wallet/wallet"] /* v4.86.454：兑换行是「左名右价」的 flex（.prize 用 space-between），中间的 .prize-main * 一直没写样式。奖品名一长，右侧「N 积分 / 去兑换」就被顶出卡片外或挤成两行 —— 补 flex:1 * 让它吃满中间，min-width:0 让长名字老实换行而不是撑破。 */ .prize-main { flex: 1; min-width: 0; } [data-route="pages/wallet/wallet"] .prize-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/wallet/wallet"] .prize-desc { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); } [data-route="pages/wallet/wallet"] .prize-cost { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); text-align: center; color: #a8792c; font-weight: 500; font-size: calc(var(--rpx) * 28); line-height: 1.5; } [data-route="pages/wallet/wallet"] .redeem-list { margin-top: calc(var(--rpx) * 18); border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/wallet/wallet"] .redeem-row { display: flex; justify-content: space-between; padding: calc(var(--rpx) * 14) calc(var(--rpx) * 4) 0; font-size: calc(var(--rpx) * 24); } [data-route="pages/wallet/wallet"] .redeem-name { color: #191919; } [data-route="pages/wallet/wallet"] /* ================================================================== * v4.86.266 · 积分（平台第二本财富账）+ 墨宝弹层 * 卡内分行一律灰底圆角单元格（#f7f7f7 / calc(var(--rpx) * 10) / padding calc(var(--rpx) * 20) / 块距 calc(var(--rpx) * 16)）， * 见 docs/UI工作规范-卡片内分行.md —— 这里不出现任何细线分行。 * ================================================================== */ /* 墨宝数值旁边的「充值 / 提现 ›」：给不知道数字能点的家长一条明路 */ .balance-more { margin-left: auto; align-self: center; flex-shrink: 0; font-size: calc(var(--rpx) * 24); color: #a8792c; } [data-route="pages/wallet/wallet"] .point-num { color: #a8792c; } [data-route="pages/wallet/wallet"] /* 积分卡：标题行右侧的「明细 · 全部方式 ›」沿用 .link */ .pt-sec { margin: calc(var(--rpx) * 22) 0 calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); font-weight: 500; color: #888888; } [data-route="pages/wallet/wallet"] .pt-item { display: flex; align-items: center; background: #f7f7f7; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 20); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/wallet/wallet"] .pt-ico { flex-shrink: 0; width: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 20); text-align: center; font-size: calc(var(--rpx) * 32); line-height: 1.2; color: #d9a83a; font-weight: 600; } [data-route="pages/wallet/wallet"] .pt-main { flex: 1; min-width: 0; } [data-route="pages/wallet/wallet"] .pt-n { font-size: calc(var(--rpx) * 28); color: #1a1a1a; font-weight: 500; } [data-route="pages/wallet/wallet"] .pt-v { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); font-weight: 400; color: #d9a83a; background: #fbf3dd; border-radius: calc(var(--rpx) * 999); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); } [data-route="pages/wallet/wallet"] .pt-d { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.5; } [data-route="pages/wallet/wallet"] .pt-act { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 18); border-radius: calc(var(--rpx) * 999); border: calc(var(--rpx) * 1) solid rgba(201, 161, 92, 0.55); background: rgba(216, 178, 92, 0.12); font-size: calc(var(--rpx) * 20); color: #a8792c; white-space: nowrap; } [data-route="pages/wallet/wallet"] .pt-act:active { background: rgba(216, 178, 92, 0.3); } [data-route="pages/wallet/wallet"] /* ---------------- 底部弹层（充值 / 提现 · 换积分） ---------------- */ .sheet-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 900; display: flex; align-items: flex-end; } [data-route="pages/wallet/wallet"] .sheet { width: 100%; box-sizing: border-box; background: #fffdf6; border-radius: calc(var(--rpx) * 24) calc(var(--rpx) * 24) 0 0; border-top: calc(var(--rpx) * 4) solid #d8b25c; padding: calc(var(--rpx) * 28) calc(var(--rpx) * 32) calc(calc(var(--rpx) * 28) + env(safe-area-inset-bottom)); max-height: 86vh; overflow-y: auto; } [data-route="pages/wallet/wallet"] .sheet-head { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/wallet/wallet"] .sheet-t { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #6b4d14; } [data-route="pages/wallet/wallet"] .sheet-x { padding: calc(var(--rpx) * 4) calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 32); color: #b2b2b2; } [data-route="pages/wallet/wallet"] .sheet-bal { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/wallet/wallet"] .sheet-bal-n { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #a8792c; } [data-route="pages/wallet/wallet"] .sheet-sec { margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); font-weight: 500; color: #888888; } [data-route="pages/wallet/wallet"] .sheet-note { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.5; } [data-route="pages/wallet/wallet"] .withdraw-cell { display: flex; align-items: center; background: #f7f7f7; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 20); } [data-route="pages/wallet/wallet"] .wc-main { flex: 1; min-width: 0; } [data-route="pages/wallet/wallet"] .wc-n { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/wallet/wallet"] .wc-d { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); line-height: 1.5; } [data-route="pages/wallet/wallet"] .wc-act { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 10) calc(var(--rpx) * 22); border-radius: calc(var(--rpx) * 999); background: linear-gradient(135deg, #d8b25c, #a8792c); font-size: calc(var(--rpx) * 24); color: #ffffff; } [data-route="pages/wallet/wallet"] .sheet-conv { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 22); border-radius: calc(var(--rpx) * 10); background: #fbf3dd; text-align: center; font-size: calc(var(--rpx) * 28); color: #a8791b; } [data-route="pages/wallet/wallet"] /* ---------------- 换积分档位 ---------------- */ /* v4.86.506（木哥 07:52 令）：一行左右滑动，不许折行 */ .conv-row { white-space: nowrap; margin-top: calc(var(--rpx) * 22); } [data-route="pages/wallet/wallet"] .conv { display: inline-block; vertical-align: top; width: calc(var(--rpx) * 150); margin-right: calc(var(--rpx) * 18); text-align: center; padding: calc(var(--rpx) * 22) 0; border-radius: calc(var(--rpx) * 10); background: #fffdf8; border: calc(var(--rpx) * 2) solid #ece3cf; } [data-route="pages/wallet/wallet"] .conv-on { background: #fbf3dd; border-color: #d9a83a; } [data-route="pages/wallet/wallet"] .conv-off { opacity: 0.4; } [data-route="pages/wallet/wallet"] .conv-b { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; } [data-route="pages/wallet/wallet"] .conv-p { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/wallet/wallet"] .convert-btn { margin-top: calc(var(--rpx) * 26); padding: calc(var(--rpx) * 24) 0; border-radius: calc(var(--rpx) * 999); background: linear-gradient(135deg, #d8b25c, #a8792c); text-align: center; font-size: calc(var(--rpx) * 32); font-weight: 500; color: #ffffff; } [data-route="pages/wallet/wallet"] .convert-btn-off { opacity: 0.45; } [data-route="pages/wallet/wallet"] /* v4.86.481：积分卡与墨宝卡同一条金边 —— 整页一套语言 * （v7.0.057⑦：「攒积分换好礼」整卡拆成积分卡里的一颗键，.prize-card 已无节点） */ .point-card { border: calc(var(--rpx) * 2) solid #f0e6d2; } [data-route="pages/wallet/wallet"] /* v4.86.540：充值入口（金色行，点开统一价目弹层） */ .recharge-entry { display: flex; align-items: center; justify-content: space-between; border: calc(var(--rpx) * 1) solid #eddfbd; border-radius: calc(var(--rpx) * 20); background: linear-gradient(135deg, #fffdf8 0%, #fdf5e0 58%, #f8eac6 100%); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 22); margin-top: calc(var(--rpx) * 12); } [data-route="pages/wallet/wallet"] .recharge-entry-hover { opacity: 0.92; } [data-route="pages/wallet/wallet"] .re-n { font-size: calc(var(--rpx) * 24); font-weight: 800; color: #4a3208; } [data-route="pages/wallet/wallet"] .re-s { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); font-weight: 500; color: #9a7420; } [data-route="pages/wallet/wallet"] .re-d { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); } [data-route="pages/wallet/wallet"] .re-go { font-size: calc(var(--rpx) * 24); font-weight: 700; color: #8a6320; white-space: nowrap; } /* ---- pages/mentor/apply.wxss ---- */ [data-route="pages/mentor/apply"] .login-btn { margin-top: calc(var(--rpx) * 28); } [data-route="pages/mentor/apply"] .intro-tip { margin-bottom: calc(var(--rpx) * 24); line-height: 1.8; } [data-route="pages/mentor/apply"] .reject-note { background: #feeceb; color: #fa5151; font-size: calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 22); margin-bottom: calc(var(--rpx) * 24); } [data-route="pages/mentor/apply"] .err { margin-top: calc(var(--rpx) * 20); color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/mentor/apply"] .err:last-child { text-align: center; } [data-route="pages/mentor/apply"] .cert-tip { margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 14); } [data-route="pages/mentor/apply"] .cert-grid { display: flex; flex-wrap: wrap; gap: calc(var(--rpx) * 16); } [data-route="pages/mentor/apply"] .cert-item { position: relative; width: calc(var(--rpx) * 180); height: calc(var(--rpx) * 180); border-radius: calc(var(--rpx) * 16); overflow: hidden; } [data-route="pages/mentor/apply"] .cert-img { width: 100%; height: 100%; } [data-route="pages/mentor/apply"] .cert-del { position: absolute; top: 0; right: 0; width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 44); line-height: calc(var(--rpx) * 40); text-align: center; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: calc(var(--rpx) * 32); border-radius: 0 0 0 calc(var(--rpx) * 16); } [data-route="pages/mentor/apply"] .cert-add { display: flex; flex-direction: column; align-items: center; justify-content: center; border: calc(var(--rpx) * 1) solid #f2f2f2; background: #f7f7f7; color: #b2b2b2; } [data-route="pages/mentor/apply"] .cert-add-icon { font-size: calc(var(--rpx) * 48); line-height: 1.1; } [data-route="pages/mentor/apply"] .cert-add-text { font-size: calc(var(--rpx) * 24); margin-top: calc(var(--rpx) * 6); } [data-route="pages/mentor/apply"] .cert-busy { opacity: 0.55; } [data-route="pages/mentor/apply"] /* v4.83.5：字段名 + 🎤说话 同一行 */ .field-label-row { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/mentor/apply"] /* v4.86.292（木哥令「名字字号和引导说明字号颠倒了」）： 字段名放大（28），框内模拟填写（placeholder）缩小（24）—— 只翻本页， 全站表单的 24/28 口径不动。页面 wxss 晚于 app.wxss 装，同权重覆盖生效。 */ .field-label { font-size: calc(var(--rpx) * 28); color: #1a1a1a; } [data-route="pages/mentor/apply"] .field-block .input, [data-route="pages/mentor/apply"] .field-block .area { font-size: calc(var(--rpx) * 24); } [data-route="pages/mentor/apply"] /* v4.86.292（木哥令「按住说话按键前移」）：麦克风整组在字段名前面 */ .field-label-row { justify-content: flex-start; } [data-route="pages/mentor/apply"] .field-label-row > text { margin-left: calc(var(--rpx) * 16); } [data-route="pages/mentor/apply"] /* v4.86.11 老师服务规范弹层 */ .rules-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; align-items: center; justify-content: center; } [data-route="pages/mentor/apply"] .rules-panel { width: 86vw; background: #ffffff; border-radius: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 32) calc(var(--rpx) * 28); display: flex; flex-direction: column; } [data-route="pages/mentor/apply"] .rules-title { font-size: calc(var(--rpx) * 32); font-weight: 600; text-align: center; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/mentor/apply"] .rules-body { max-height: 52vh; } [data-route="pages/mentor/apply"] .rules-sec { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #1a1a1a; margin: calc(var(--rpx) * 16) 0 calc(var(--rpx) * 8); } [data-route="pages/mentor/apply"] .rules-p { font-size: calc(var(--rpx) * 24); color: #444444; line-height: 1.7; } [data-route="pages/mentor/apply"] .rules-key { color: #b26a00; background: #fff8ec; border-radius: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 12); margin: calc(var(--rpx) * 6) 0; } [data-route="pages/mentor/apply"] .rules-end { text-align: center; color: #bbbbbb; font-size: calc(var(--rpx) * 20); margin: calc(var(--rpx) * 20) 0; } [data-route="pages/mentor/apply"] .rules-foot { display: flex; margin-top: calc(var(--rpx) * 20); } [data-route="pages/mentor/apply"] .rules-btn { flex: 1; margin: 0 calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); } [data-route="pages/mentor/apply"] /* v4.86.394：必选项字数标注（挂在字段名旁，小一号不抢戏） */ .field-req { font-size: calc(var(--rpx) * 20); color: #999999; } [data-route="pages/mentor/apply"] /* v4.86.477 手机号 + 短信验证码（木哥「要验手机号权属」） 一行两块：左边验证码输入框伸缩、右边「获取验证码」按钮定宽， 按钮在倒计时里显示秒数、验证通过后变「已验证」并置灰。 */ .code-row { display: flex; align-items: center; margin-top: calc(var(--rpx) * 12); } [data-route="pages/mentor/apply"] .code-input { flex: 1; min-width: 0; } [data-route="pages/mentor/apply"] .code-input-ok { background: #f7f7f7; color: #999999; } [data-route="pages/mentor/apply"] .code-btn { margin-left: calc(var(--rpx) * 16); min-width: calc(var(--rpx) * 200); height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #07c160; background: #ffffff; border: calc(var(--rpx) * 1) solid #07c160; border-radius: calc(var(--rpx) * 10); } [data-route="pages/mentor/apply"] .code-btn::after { border: none; } [data-route="pages/mentor/apply"] .code-btn-ok { color: #999999; background: #f2f2f2; border-color: #e6e6e6; } [data-route="pages/mentor/apply"] .code-tip { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); line-height: 1.6; } /* ---- components/opt-chips/opt-chips.wxss ---- */ [data-comp="components/opt-chips/opt-chips"] /* v4.86.506（木哥 07:52 令）：一行左右滑动，不许折行 */ .oc-wrap { white-space: nowrap; margin-top: calc(var(--rpx) * 12); } [data-comp="components/opt-chips/opt-chips"] .oc-chip { display: inline-flex; vertical-align: top; margin-right: calc(var(--rpx) * 14); align-items: center; gap: calc(var(--rpx) * 8); padding: calc(var(--rpx) * 10) calc(var(--rpx) * 20); border: calc(var(--rpx) * 2) solid #e5e5e5; border-radius: calc(var(--rpx) * 999); background: #fafafa; } [data-comp="components/opt-chips/opt-chips"] .oc-on { border-color: #07c160; background: #eafaf1; } [data-comp="components/opt-chips/opt-chips"] .oc-name { font-size: calc(var(--rpx) * 24); color: #333333; } [data-comp="components/opt-chips/opt-chips"] .oc-on .oc-name { color: #07c160; font-weight: bold; } [data-comp="components/opt-chips/opt-chips"] .oc-sub { font-size: calc(var(--rpx) * 20); color: #999999; } /* ---- pages/mentor/list.wxss ---- */ [data-route="pages/mentor/list"] .login-btn { margin-top: calc(var(--rpx) * 28); } [data-route="pages/mentor/list"] .balance-strip { padding-bottom: calc(var(--rpx) * 28); } [data-route="pages/mentor/list"] .mentor-card { border: calc(var(--rpx) * 2) solid transparent; transition: background-color 0.08s; } [data-route="pages/mentor/list"] .mentor-card:active { background: #ececec; } [data-route="pages/mentor/list"] /* v4.86.227 木哥令：成行成列严格对齐 —— 姓名行/价格行/数据行各占一行，超长不出行 */ .mentor-name { font-size: calc(var(--rpx) * 32); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-route="pages/mentor/list"] .mentor-price { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); font-weight: 500; color: #07c160; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-route="pages/mentor/list"] .mentor-bio { margin-top: calc(var(--rpx) * 14); line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-route="pages/mentor/list"] .mentor-meta { margin-top: calc(var(--rpx) * 10); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-route="pages/mentor/list"] .err { margin-top: calc(var(--rpx) * 20); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/mentor/list"] .mentor-row { display: flex; align-items: flex-start; } [data-route="pages/mentor/list"] .mentor-avatar { width: calc(var(--rpx) * 84); height: calc(var(--rpx) * 84); border-radius: 50%; margin-right: calc(var(--rpx) * 20); flex-shrink: 0; background: #ffffff; } [data-route="pages/mentor/list"] .mentor-avatar-empty { display: flex; align-items: center; justify-content: center; background: #e8f7ee; color: #07c160; font-size: calc(var(--rpx) * 32); font-weight: 600; } [data-route="pages/mentor/list"] .mentor-info { flex: 1; min-width: 0; } [data-route="pages/mentor/list"] /* ---- v4.86.47：约单留言（选填） ---- */ /* 底子复用全局 .area（#f7f7f7 + calc(var(--rpx) * 12) 圆角），这里只压高度、调提示色 */ .invite-note-area { min-height: calc(var(--rpx) * 120); } [data-route="pages/mentor/list"] .invite-note-ph { color: #b2b2b2; } [data-route="pages/mentor/list"] .invite-note-tip { margin-top: calc(var(--rpx) * 12); line-height: 1.6; } [data-route="pages/mentor/list"] /* ---- v4.86.48：本机台账提示条（这一篇已经约过谁） ---- */ .local-req-tip { background: #fffbe8; border: calc(var(--rpx) * 1) solid #ffe7a3; } [data-route="pages/mentor/list"] .local-req-line { font-size: calc(var(--rpx) * 28); font-weight: 600; color: #8a6d1f; } [data-route="pages/mentor/list"] .local-req-sub { margin-top: calc(var(--rpx) * 8); line-height: 1.6; } [data-route="pages/mentor/list"] /* v4.86.216 木哥令①：不能接单的排最后，卡片也降一档灰度，不再冒充在岗 */ .mentor-card-off { opacity: 0.55; } [data-route="pages/mentor/list"] /* ---------------- v4.86.222：推荐模式（rec=1） ---------------- */ .rec-tip-line { display: flex; align-items: center; color: #1a1a1a; font-size: calc(var(--rpx) * 28); } [data-route="pages/mentor/list"] .rec-tip-badge { margin-right: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); border-radius: calc(var(--rpx) * 8); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 20); } [data-route="pages/mentor/list"] .rec-tip-sub { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/mentor/list"] .badge-coach { color: #0a7d43; background: #e5f5ec; } [data-route="pages/mentor/list"] .badge-rec { background: #07c160; color: #ffffff; margin-right: calc(var(--rpx) * 8); } [data-route="pages/mentor/list"] /* v4.86.454：评价徽标补底色 —— wxml 里挂了 badge-quality，这一页却没有这条样式， * 「🏅 口碑王 98分」就跟名字挤成一串同色文字（profile 页同一个毛病，一起补的）。 */ .badge-quality { background: #e8f7ee; color: #07c160; margin-left: calc(var(--rpx) * 10); } [data-route="pages/mentor/list"] /* ---------------- v4.86.223：筛选条（微信生态下拉筛选同款） ---------------- */ .filter-wrap { position: relative; z-index: 20; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/mentor/list"] /* 白条：五个筛项均分，选中项转微信绿 */ .filter-bar { display: flex; align-items: center; background: #ffffff; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 4) calc(var(--rpx) * 8); } [data-route="pages/mentor/list"] .filter-tab { flex: 1; display: flex; align-items: center; justify-content: center; padding: calc(var(--rpx) * 20) 0; color: #1a1a1a; font-size: calc(var(--rpx) * 28); transition: color 0.08s; } [data-route="pages/mentor/list"] .filter-tab-on, [data-route="pages/mentor/list"] .filter-tab-set { color: #07c160; } [data-route="pages/mentor/list"] .filter-tab:active { opacity: 0.7; } [data-route="pages/mentor/list"] /* 下拉小三角（展开时翻转向上） */ .filter-caret { width: 0; height: 0; margin-left: calc(var(--rpx) * 8); border-left: calc(var(--rpx) * 8) solid transparent; border-right: calc(var(--rpx) * 8) solid transparent; border-top: calc(var(--rpx) * 10) solid #b2b2b2; transition: transform 0.12s; } [data-route="pages/mentor/list"] .filter-tab-on .filter-caret, [data-route="pages/mentor/list"] .filter-tab-set .filter-caret { border-top-color: #07c160; } [data-route="pages/mentor/list"] .filter-caret-up { transform: rotate(180deg); } [data-route="pages/mentor/list"] /* 有条件时才亮的「重置」 */ .filter-reset { flex-shrink: 0; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 20) calc(var(--rpx) * 20) calc(var(--rpx) * 12); color: #07c160; font-size: calc(var(--rpx) * 28); } [data-route="pages/mentor/list"] /* 下拉面板：贴在筛选条正下方，浮在名单上（真下拉，不把名单挤下去） */ .filter-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: 60vh; overflow-y: auto; background: #ffffff; border-radius: 0 0 calc(var(--rpx) * 10) calc(var(--rpx) * 10); box-shadow: 0 calc(var(--rpx) * 12) calc(var(--rpx) * 24) rgba(0, 0, 0, 0.08); } [data-route="pages/mentor/list"] .filter-opt { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 26) calc(var(--rpx) * 32); color: #1a1a1a; font-size: calc(var(--rpx) * 28); } [data-route="pages/mentor/list"] .filter-opt:active { background: #f7f7f7; } [data-route="pages/mentor/list"] .filter-opt-on { color: #07c160; font-weight: 600; } [data-route="pages/mentor/list"] .filter-opt-check { color: #07c160; font-weight: 600; } [data-route="pages/mentor/list"] /* 遮罩：盖住面板以外的一切，点了就收起 */ .filter-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 19; background: rgba(0, 0, 0, 0.4); } [data-route="pages/mentor/list"] /* 筛完一位不剩的空态卡 */ .f-empty-card { text-align: center; } [data-route="pages/mentor/list"] .f-empty-btn { margin-top: calc(var(--rpx) * 24); } [data-route="pages/mentor/list"] /* v4.86.225 木哥令：每张名片两个按键 —— 看介绍（进主页）/ 邀请（选定回上一页） v4.86.227 木哥令：按键定尺寸（高 calc(var(--rpx) * 84) 定死、整行禁折）——一个按键不能变行； 键内文字超长不出键，在键内流动（横向可滑看全，短文案照旧居中）。 */ .mentor-acts { display: flex; flex-wrap: nowrap; border-top: calc(var(--rpx) * 2) solid #f0f0f0; padding-top: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 16); } [data-route="pages/mentor/list"] .m-act { flex: 1; min-width: 0; height: calc(var(--rpx) * 84); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 10); } [data-route="pages/mentor/list"] .m-act-text { max-width: 100%; width: max-content; margin: 0 auto; padding: 0 calc(var(--rpx) * 12); white-space: nowrap; overflow-x: auto; } [data-route="pages/mentor/list"] .m-act-intro { background: #f7f7f7; color: #1a1a1a; margin-right: calc(var(--rpx) * 16); } [data-route="pages/mentor/list"] .m-act-invite { background: #07c160; color: #ffffff; } [data-route="pages/mentor/list"] .m-act-off { background: #f7f7f7; color: #999999; } [data-route="pages/mentor/list"] .m-act-hover { opacity: 0.85; } [data-route="pages/mentor/list"] /* v4.86.267：请自己的老师点评 —— 分享入口卡 */ .share-teacher { border: calc(var(--rpx) * 2) solid #d8ece0; } [data-route="pages/mentor/list"] .share-teacher-head { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/mentor/list"] .share-teacher-btn { margin-top: calc(var(--rpx) * 18); background: #e2f2e7; color: #0a7a3d; font-weight: 500; } [data-route="pages/mentor/list"] .share-teacher-err { margin-top: calc(var(--rpx) * 10); color: #c0392b; } [data-route="pages/mentor/list"] .share-teacher-tip { margin-top: calc(var(--rpx) * 10); color: #a08a55; } [data-route="pages/mentor/list"] .badge-bound { background: #fbf3dd; color: #a8791b; } /* ---- pages/profile/profile.wxss ---- */ [data-route="pages/profile/profile"] /* ================================================================== * 个人资料页 · v4.86.203 整页换壳：仿微信「个人信息」页 * ------------------------------------------------------------------ * 木哥 21:4x：「把这个我的里面的设置 ui，完全仿照下图的微信里的页面 ui。」 * 视觉主张就三条（对齐微信原页）： * ① 灰底（#ededed）+ 白分组块，组与组之间留灰缝； * ② 每行「左标签 / 右值」，值一律浅灰，行尾一枚细箭头； * ③ 组下配小字说明（微信的「组脚注」），能解释的都在行外解释。 * 行壳统一 .wc-row：头像 / 名字 / ID / 手机号 / 城市 / 学校 / 年级共用。 * 授权卡（.auth-*）与学校弹层（.pick-*）是锁过的（test-auth-center / * test-keyboard），样式原样保留，只给它们换了白底容器。 * * v7.0.037（木哥 20:0x「设置页所有图标参考发现页的图标，统一风格，再结合 * 微信生态的 ui 设计，等同于发现页的列表设计」）： * 行壳从「灰底圆角格子」换成发现页那张表 —— 白卡（calc(var(--rpx) * 16) 圆角、无外边距内衬） * + 一行一条 calc(var(--rpx) * 1) 细线 + 行首 calc(var(--rpx) * 56) 彩底白线图标（app.wxss 的 .ico-tile-s / * .ico-gl-*，与发现页同一份）+ 标签 calc(var(--rpx) * 32) 黑 + 右侧值 calc(var(--rpx) * 28) 灰 + 细箭头。 * 头像行不另画图标：头像本身就是那一格（微信个人信息页也是这么办的）。 * 类名一个没改（wc-row / wc-k / wc-end / auth-row 全留着），只换皮。 * ================================================================== */ .wc-page { /* 底色跟发现页同一块灰（#f7f7f7），两页并排看不再一深一浅 */ background: #f7f7f7; min-height: calc(var(--vh) * 100); } [data-route="pages/profile/profile"] /* ---------- 白分组与行壳 ---------- */ .wc-group { background: #ffffff; border-radius: calc(var(--rpx) * 16); /* v7.0.037：白卡自己装行，行与行之间只留一条细线（发现页同款）。 外面 calc(var(--rpx) * 24) 的缝由 page-wrap 的 padding 管，这里不再叠内衬， 否则图标会从行首缩进两次、右侧值和箭头也对不齐。 */ padding: 0; margin-bottom: calc(var(--rpx) * 24); overflow: hidden; } [data-route="pages/profile/profile"] .wc-row { display: flex; align-items: center; justify-content: flex-start; min-height: calc(var(--rpx) * 108); background: #ffffff; border-bottom: calc(var(--rpx) * 1) solid #f0f0f0; /* 行内边距与发现页 .dc-row 同一档（calc(var(--rpx) * 26) 上下 / calc(var(--rpx) * 28) 左右）， 细线一条从头贯到尾，微信列表就是这么分的。 */ padding: calc(var(--rpx) * 24) calc(var(--rpx) * 28); box-sizing: border-box; } [data-route="pages/profile/profile"] /* 末行收线：白卡自己收圆角，末行不再画一条悬空细线 */ .wc-row:last-child { border-bottom: none; } [data-route="pages/profile/profile"] /* 行本体是 button 的场合（头像 / 手机号）：按微信的样子把按钮壳剥干净 */ .wc-row-btn { width: 100%; margin: 0; padding: calc(var(--rpx) * 24) calc(var(--rpx) * 28); /* 按钮行与普通行同一条白底 + 同一条细线，不再「白行 / 灰行」交替 */ background: #ffffff; border-radius: 0; border-bottom: calc(var(--rpx) * 1) solid #f0f0f0; box-sizing: border-box; text-align: left; font-weight: normal; line-height: inherit; } [data-route="pages/profile/profile"] .wc-row-btn:last-child { border-bottom: none; } [data-route="pages/profile/profile"] .wc-row-btn::after { border: none; } [data-route="pages/profile/profile"] .wc-k { flex-shrink: 0; font-size: calc(var(--rpx) * 32); color: #191919; } [data-route="pages/profile/profile"] /* 图标与标签之间 calc(var(--rpx) * 24)（发现页 .dc-name 的 margin-left 同档）。 只给 .wc-row 里的标签加 —— 开关行里由 .auth-main 的 margin-left 管，不叠双层。 */ .wc-row .wc-k { margin-left: calc(var(--rpx) * 24); } [data-route="pages/profile/profile"] /* v4.86.478：行内小提示（目前只用在「头像」那一行 —— 换头像全站只剩这一个入口， 标题旁直说「点这一行换」，别让人猜。字号与 .wc-avatar-alt 同档） */ .wc-k-tip { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/profile/profile"] /* 右侧聚合：值 + 可选小动作 + 箭头 */ .wc-end { display: flex; align-items: center; min-width: 0; margin-left: auto; padding-left: calc(var(--rpx) * 20); } [data-route="pages/profile/profile"] .wc-v { font-size: calc(var(--rpx) * 28); color: #808080; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--rpx) * 420); } [data-route="pages/profile/profile"] .wc-v-empty { color: #b2b2b2; } [data-route="pages/profile/profile"] /* v4.86.493：还没授权的那一项 —— 不摆一个空框让人猜，直说「还没用微信头像 / 名字」 */ .wc-v-warn { color: #fa9d3b; } [data-route="pages/profile/profile"] /* 行尾细箭头：css 画，不引图 */ .wc-arrow { flex-shrink: 0; width: calc(var(--rpx) * 18); height: calc(var(--rpx) * 18); margin-left: calc(var(--rpx) * 14); border-top: calc(var(--rpx) * 4) solid #c8c8c8; border-right: calc(var(--rpx) * 4) solid #c8c8c8; transform: rotate(45deg); } [data-route="pages/profile/profile"] /* 名字行：微信同款右对齐输入 */ .wc-input { flex: 1; min-width: 0; text-align: right; font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/profile/profile"] .wc-ph { color: #b2b2b2; } [data-route="pages/profile/profile"] /* 头像：微信是圆角方块（不是圆的），压在行右侧 v4.86.250（木哥令）：「头像图标小三分之一」—— 112 → calc(var(--rpx) * 74)（约 2/3）， 圆角与字号跟着缩，行高不塌 */ .wc-avatar { flex-shrink: 0; width: calc(var(--rpx) * 56); height: calc(var(--rpx) * 56); border-radius: calc(var(--rpx) * 12); background: #f2f2f2; } [data-route="pages/profile/profile"] /* v4.86.452（木哥 01:37）：原来这 calc(var(--rpx) * 74) 方块里只塞一个 calc(var(--rpx) * 20) 的「选」字， 远看像一块坏掉的按钮碎片 —— 这是「头像那格最别扭」的直接原因。 改成人像剪影，纯 css 画（圆头 + 肩），不引图、不占主包。 */ .wc-avatar-empty { position: relative; overflow: hidden; } [data-route="pages/profile/profile"] .wc-avatar-empty::before { content: ''; position: absolute; left: 50%; top: calc(var(--rpx) * 10); width: calc(var(--rpx) * 18); height: calc(var(--rpx) * 18); margin-left: calc(var(--rpx) * -9); border-radius: 50%; background: #c8c8c8; } [data-route="pages/profile/profile"] .wc-avatar-empty::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--rpx) * -2); width: calc(var(--rpx) * 34); height: calc(var(--rpx) * 20); margin-left: calc(var(--rpx) * -17); border-radius: calc(var(--rpx) * 17) calc(var(--rpx) * 17) 0 0; background: #c8c8c8; } [data-route="pages/profile/profile"] /* 头像行下面那行小字：相册入口摆在明面上（点它直接开相册） */ .wc-avatar-alt { padding: calc(var(--rpx) * 14) calc(var(--rpx) * 28) calc(var(--rpx) * 16) calc(var(--rpx) * 108); border-bottom: calc(var(--rpx) * 1) solid #f0f0f0; font-size: calc(var(--rpx) * 24); color: #576b95; } [data-route="pages/profile/profile"] /* 行内小动作（清空学校 / 清空年级）：catchtap 挡住冒泡，不触发行本身 */ .wc-clear { flex-shrink: 0; margin-right: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/profile/profile"] /* ---------- 组脚注与分组标题 ---------- */ .wc-foot { padding: calc(var(--rpx) * 12) calc(var(--rpx) * 8) calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #999999; line-height: 1.6; } [data-route="pages/profile/profile"] /* 分组标题：与发现页的分卡片节奏对齐 —— 卡上留 calc(var(--rpx) * 34)、卡下留 calc(var(--rpx) * 12) */ .wc-section { padding: calc(var(--rpx) * 34) calc(var(--rpx) * 8) calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #808080; } [data-route="pages/profile/profile"] .wc-auth-gap { margin-top: calc(var(--rpx) * 6); } [data-route="pages/profile/profile"] /* ---------- 保存 ---------- */ .wc-save-group { margin-top: calc(var(--rpx) * 32); padding: calc(var(--rpx) * 24) calc(var(--rpx) * 32); } [data-route="pages/profile/profile"] .wc-save { width: 100%; font-size: calc(var(--rpx) * 32); } [data-route="pages/profile/profile"] .login-btn { width: 100%; font-size: calc(var(--rpx) * 32); } [data-route="pages/profile/profile"] .err { margin: calc(var(--rpx) * 20) calc(var(--rpx) * 32) 0; font-size: calc(var(--rpx) * 24); color: #fa5151; text-align: center; } [data-route="pages/profile/profile"] /* ===== 沿用的说明文字样式（弹层 / 授权卡还在用）===== */ /* 组内说明行：左右缩进与行内边距对齐（calc(var(--rpx) * 28)），不再顶着卡片边 */ .section-tip { margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 8); padding: 0 calc(var(--rpx) * 28); line-height: 1.6; } [data-route="pages/profile/profile"] .wc-group .section-tip { margin: calc(var(--rpx) * 18) 0 calc(var(--rpx) * 10); } [data-route="pages/profile/profile"] .wc-auth-gap { margin-top: calc(var(--rpx) * 6); } [data-route="pages/profile/profile"] .field-hint { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); line-height: 1.5; } [data-route="pages/profile/profile"] .mini-btn { padding: calc(var(--rpx) * 6) calc(var(--rpx) * 22); margin-left: calc(var(--rpx) * 12); border-radius: calc(var(--rpx) * 8); border: calc(var(--rpx) * 1) solid #d5f0df; background: #ffffff; color: #07c160; font-size: calc(var(--rpx) * 24); line-height: 1.6; } [data-route="pages/profile/profile"] .mini-btn-primary { border-color: #07c160; color: #ffffff; background: #07c160 } [data-route="pages/profile/profile"] /* ===== v4.86.36：弹出的地图上搜 → 点选（学校 / 单位）===== 两条铁律落在样式上也没得商量： ① 面板里**没有我们给的名单**（只回圆心），所以这里只有「搜索结果」一种列表； ② 名字只能由 confirmPick 从搜索结果里点出来 —— 面板里那个输入框是**搜索词**， 不是值，它永远不会被当成结果。 v4.86.44 木哥实测「找到了但选不上、点了没反应」⇒ 面板重排： · **结果列表往上提**，紧挨搜索框（手指路径最短，第一屏第一眼就能点）； · 地图缩到 calc(var(--rpx) * 260) 且**一有结果就整块撤掉**（`wx:if`），挑结果时不留原生组件； · 少了「就选它」那一行按钮（改成点一条即选中）。 */ .pick-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; } [data-route="pages/profile/profile"] .pick-panel { width: 100%; height: 82vh; padding: calc(var(--rpx) * 24) calc(var(--rpx) * 28) calc(var(--rpx) * 32); box-sizing: border-box; background: #ffffff; border-radius: calc(var(--rpx) * 24) calc(var(--rpx) * 24) 0 0; display: flex; flex-direction: column; } [data-route="pages/profile/profile"] .pick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--rpx) * 18); } [data-route="pages/profile/profile"] .pick-title { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #191919; } [data-route="pages/profile/profile"] .pick-close { font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/profile/profile"] .pick-search { display: flex; align-items: center; } [data-route="pages/profile/profile"] .pick-input { flex: 1; height: calc(var(--rpx) * 76); padding: 0 calc(var(--rpx) * 22); box-sizing: border-box; background: #f7f7f7; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 28); } [data-route="pages/profile/profile"] .pick-search .mini-btn { flex-shrink: 0; margin-left: calc(var(--rpx) * 14); } [data-route="pages/profile/profile"] .pick-map { width: 100%; height: calc(var(--rpx) * 260); margin-top: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 12); } [data-route="pages/profile/profile"] /* scroll-view 给一个确定的高度（flex 撑出来的也算），别让它塌成 0 —— 塌了的话手指落不到列表上，表现就是「点不动」。 */ .pick-list { flex: 1; min-height: calc(var(--rpx) * 240); margin-top: calc(var(--rpx) * 16); } [data-route="pages/profile/profile"] /* 行要**实底**：透明行在真机上偶尔会出现"看着在、点不到"的错觉， 而且 hover-class 也需要一个底色才看得出按下了。 */ .pick-item { padding: calc(var(--rpx) * 22) calc(var(--rpx) * 18); background: #f7f7f7; border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/profile/profile"] /* 按下去立刻变绿：木哥说"点了没反应"，一半是没感觉 —— 先给回馈。 */ .pick-item-hover { background: #e9f8ef; } [data-route="pages/profile/profile"] .pick-item-name { font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/profile/profile"] .pick-item-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.5; } [data-route="pages/profile/profile"] .pick-empty { padding: calc(var(--rpx) * 60) 0; text-align: center; } [data-route="pages/profile/profile"] .pick-foot { flex-shrink: 0; padding: calc(var(--rpx) * 14) 0 calc(var(--rpx) * 4); text-align: center; } [data-route="pages/profile/profile"] /* ===== 授权中心（v4.86.179）：一行 = 左边文字 / 右边开关 ===== 不设字号（继承 .wc-k / .field-hint 的既有档位），避免多一套字号。 */ /* 开关行：与上面的 wc-row 同一条白底细线，只是右边坐的是 switch，不是箭头 */ .auth-row { display: flex; align-items: center; justify-content: flex-start; /* 行高留够，开关与上一行的开关不挨着（防误碰） */ padding: calc(var(--rpx) * 26) calc(var(--rpx) * 28); background: #ffffff; border-bottom: calc(var(--rpx) * 1) solid #f0f0f0; } [data-route="pages/profile/profile"] .auth-row .ico-tile { align-self: center; } [data-route="pages/profile/profile"] /* v4.86.238：线退场 —— 相邻行改用单元格自身的间距区分，这个类只剩间距 */ .auth-row-line { margin-top: 0; } [data-route="pages/profile/profile"] /* v4.86.452：组内末行不留额外缝，底部白边统一由 .wc-group 的下内边距兜 */ .auth-row:last-child { border-bottom: none; } [data-route="pages/profile/profile"] .auth-row switch { flex-shrink: 0; margin-left: auto; } [data-route="pages/profile/profile"] .auth-main { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 24); padding-right: calc(var(--rpx) * 16); } [data-route="pages/profile/profile"] /* 「重新识别」文字链（手选城市的回头路，v4.86.203 起从行内小按钮挪进组脚注） */ .wc-relocate { color: #07c160; font-size: calc(var(--rpx) * 24); } /* ---- pages/annotate/annotate.wxss ---- */ [data-route="pages/annotate/annotate"] /* 圈画批注页（v4.86.11） * v4.86.218（木哥 07:4x 第 2 条）：整页换微信生态浅色 —— 不要大面积黑。 * 画布本体仍由 redraw() 自铺白底；页面底、工具条、点评面板、引导气泡、 * 取图遮罩全部归到微信色板：#ededed 页底 / 白条 + #e5e5e5 分隔线 / * 主色 #07c160 / 正文 #1a1a1a。笔迹颜色不动（那是内容不是皮肤）。 */ page { background: #ededed; } [data-route="pages/annotate/annotate"] .an-wrap { width: 100vw; height: calc(var(--vh) * 100); display: flex; flex-direction: column; } [data-route="pages/annotate/annotate"] .an-stage { flex: 1; position: relative; overflow: hidden; } [data-route="pages/annotate/annotate"] /* v4.86.31：canvas 用**绝对定位四边贴合**撑开，不再靠 height:100%。 父级 .an-stage 是 flex:1（高度来自 flex 分配），真机上百分比高度对 flex 子项可能解析不出（量到 0）⇒ canvas 0×0 ⇒ 画布是黑的、白底也画不出来。 abs + 四边 0 只依赖父级**实际盒子**，不依赖百分比解析。 */ .an-canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; } [data-route="pages/annotate/annotate"] /* 标注右上角的喇叭：写了点评变红；点一下出输入面板（v4.86.190：♪ = 写点评的唯一入口） */ .an-spk { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #ffffff; border: 2px solid #999999; color: #999999; font-size: 15px; line-height: 26px; text-align: center; z-index: 5; box-sizing: border-box; /* v4.86.142（木哥 19:3x）：声音符号压到 66% 透明 —— 它标的是「这里有话」, 不该跟笔迹抢眼。选中/脉动那两态照旧（an-spk-has / an-spk-live）。 v4.86.228（木哥令「所有点评的标记点都改成 60% 透明度」）：0.66 → 0.4； 正在编辑的那处（an-spk-live）恢复不透明 —— 手指正按着它，要看得清。 */ opacity: 0.4; } [data-route="pages/annotate/annotate"] /* v4.86.190（木哥）：第一次用点评的分步引导 —— 一条小气泡浮在照片顶部， * 不挡中间的作业区（该画照画），点气泡任意处收起。cover-view 才盖得住 canvas。 */ .an-coach { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; align-items: center; background: #ffffff; border-radius: 10px; padding: 12px 14px; z-index: 9; box-shadow: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 16) rgba(0, 0, 0, 0.08); } [data-route="pages/annotate/annotate"] .an-coach-t { flex: 1; color: #1a1a1a; font-size: 14px; line-height: 1.5; } [data-route="pages/annotate/annotate"] .an-coach-ok { color: #07c160; font-size: 14px; padding-left: 12px; } [data-route="pages/annotate/annotate"] .an-spk-has { /* v4.86.362（359 号令）：固定红降为兜底色 —— 内联 style 已带这一笔圈点自己的颜色 */ border-color: #fa5151; color: #fa5151; } [data-route="pages/annotate/annotate"] /* v4.86.362（359 号令）：有原音的 ♪ 常驻闪动（任何时候、页面内都在闪）； keyframes 全站共用 app.wxss 的 voice-flash（只动 opacity 不碰 transform） */ .an-spk-flash { animation: voice-flash 1.4s ease-in-out infinite; } [data-route="pages/annotate/annotate"] .an-spk-live { border-color: #fa5151; color: #fa5151; animation: an-pulse 1.2s ease-in-out infinite; opacity: 1; } @keyframes an-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250, 81, 81, 0.45); } 55% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(250, 81, 81, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250, 81, 81, 0); } } [data-route="pages/annotate/annotate"] .an-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 24); background: #f7f7f7; border-top: calc(var(--rpx) * 1) solid #e5e5e5; } [data-route="pages/annotate/annotate"] .an-colors { display: flex; align-items: center; } [data-route="pages/annotate/annotate"] .an-dot { width: calc(var(--rpx) * 48); height: calc(var(--rpx) * 48); border-radius: 50%; /* v4.86.142：calc(var(--rpx) * 16) → calc(var(--rpx) * 12)，一行要放 4 色点 + 5 工具（工具改单行不换行） */ margin-right: calc(var(--rpx) * 12); border: calc(var(--rpx) * 4) solid transparent; box-sizing: border-box; } [data-route="pages/annotate/annotate"] .an-dot-on { border-color: #07c160; transform: scale(1.15); } [data-route="pages/annotate/annotate"] .an-tools { display: flex; align-items: center; } [data-route="pages/annotate/annotate"] /* 工具条按钮（v4.86.218 换浅色）：白底胶囊 + 正文黑字，全圆胶囊（calc(var(--rpx) * 999)）， * 点一下加深一档（hover-class，见 wxml）；选中态用主色 #07c160。 * 一行要塞 4 色点 + 5 工具，字号仍走阶梯的 calc(var(--rpx) * 24)、内边距 calc(var(--rpx) * 16)。 */ .an-btn { color: #1a1a1a; font-size: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 999); background: #ffffff; border: calc(var(--rpx) * 1) solid #dcdcdc; box-sizing: border-box; margin-left: calc(var(--rpx) * 8); transition: background 0.12s ease; /* v4.86.142（木哥 19:3x 截图）：文字居中 —— 原来靠 padding 撑，窄屏上「直线/方框」 被挤成两行且左偏。改成 flex 居中 + 不换行 + 不参与压缩：字永远在胶囊正中一行。 同时内边距 20→calc(var(--rpx) * 16)、间距 12→calc(var(--rpx) * 8)，把 4 色点 + 5 工具的整行压回 calc(var(--rpx) * 702) 以内。 */ display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; white-space: nowrap; flex-shrink: 0; } [data-route="pages/annotate/annotate"] .an-btn-hover { background: #f0f0f0; } [data-route="pages/annotate/annotate"] .an-btn-on { background: #07c160; border-color: #07c160; color: #ffffff; } [data-route="pages/annotate/annotate"] .an-btn-on.an-btn-hover { background: #06ad56; } [data-route="pages/annotate/annotate"] /* v4.86.81：大小滑条永久去掉（木哥 20:4x）—— 拖动就是真实大小，滑条没有存在意义 */ .an-actions { display: flex; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 24) calc(calc(var(--rpx) * 16) + env(safe-area-inset-bottom)); background: #f7f7f7; border-top: calc(var(--rpx) * 1) solid #e5e5e5; } [data-route="pages/annotate/annotate"] .an-act { flex: 1; margin: 0 calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); } [data-route="pages/annotate/annotate"] /* v4.86.218：页底条回到浅色，btn-ghost 全站默认（白底黑字）就是对的， 深色特例整块撤掉 —— 只保留选中/按压反馈不额外造色。 */ /* 取图遮罩 / 失败态重试（木哥 2026-10-11 第 1 条：没图不许静默留白）。 z-index 6 压过喇叭的 5 —— 图都没上来，不该让人先在白板上圈点。 */ .an-photo-tip { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 6; /* v4.86.31：整块是 cover-view（要盖住原生 canvas，见 wxml 注释）。 cover-view 的 CSS 支持面比 view 窄，只用最稳的那几样：绝对定位铺满 + 纵向 flex 居中 + 不透明的纯色底。 */ display: flex; flex-direction: column; align-items: center; justify-content: center; background: #ededed; } [data-route="pages/annotate/annotate"] .an-photo-wait { color: #666666; font-size: calc(var(--rpx) * 28); } [data-route="pages/annotate/annotate"] .an-photo-fail-t { color: #1a1a1a; font-size: calc(var(--rpx) * 32); } [data-route="pages/annotate/annotate"] .an-photo-fail-s { margin-top: calc(var(--rpx) * 16); color: #07c160; font-size: calc(var(--rpx) * 28); } [data-route="pages/annotate/annotate"] /* 真机诊断行：只在走了兜底/失败时出现，正常出图时整块遮罩都不在 */ .an-photo-diag { margin-top: calc(var(--rpx) * 20); color: #999999; font-size: calc(var(--rpx) * 20); } [data-route="pages/annotate/annotate"] /* v4.86.276（木哥 00:4x「点声音符号不要调换页面」）：输入面板改成**内联两行**， 放在圈点工具行上边（文档流里，不盖 canvas —— v4.86.31 教训照旧）。 一行按住说话、一行单行输入框（行尾「保存」）。画布变矮由 annotate.js#resizeCanvas() 重新量尺寸 + 重画来兜。 */ .an-note { /* v4.86.136：键盘弹出时整块上移（translateY），加个过渡别瞬移 */ transition: transform 0.22s ease-out; background: #ffffff; border-top: calc(var(--rpx) * 1) solid #e5e5e5; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 24) calc(calc(var(--rpx) * 16) + env(safe-area-inset-bottom)); } [data-route="pages/annotate/annotate"] /* 第一行：按住说话（+ 留过原音时的「删除」+ 右端「第 N 处」指示） */ /* v7.0.062：闪光引导要量「按住说话」的位置 —— 包一层锚点 view，布局保持原样 */ .an-note-voice-gd { display: inline-block; vertical-align: middle; } [data-route="pages/annotate/annotate"] .an-note-voice { display: flex; align-items: center; } [data-route="pages/annotate/annotate"] .an-note-which { margin-left: auto; color: #999999; font-size: calc(var(--rpx) * 24); flex: none; } [data-route="pages/annotate/annotate"] /* v4.86.81：删除按钮就在「说话/重录」按键边上（独立大按钮已拆） v4.86.91：统一字号 calc(var(--rpx) * 28) + 给足点击热区（微信里删除=红字轻操作） */ .an-note-recdel { flex: none; margin-left: calc(var(--rpx) * 16); color: #fa5151; font-size: calc(var(--rpx) * 28); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 8); border-radius: calc(var(--rpx) * 8); } [data-route="pages/annotate/annotate"] /* v4.86.296：面板里的原音试听（▶ 听 / ⏹ 停） */ .an-note-play { flex: none; margin-left: calc(var(--rpx) * 16); color: #06ad56; font-size: calc(var(--rpx) * 28); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 8); border-radius: calc(var(--rpx) * 8); } [data-route="pages/annotate/annotate"] /* 第二行：单行输入框 + 行尾「保存」（v4.86.276：一行够用，写着省事） */ .an-note-line { display: flex; align-items: center; margin-top: calc(var(--rpx) * 14); } [data-route="pages/annotate/annotate"] .an-note-area { box-sizing: border-box; border-radius: calc(var(--rpx) * 36); background: #f7f7f7; color: #1a1a1a; font-size: calc(var(--rpx) * 28); } [data-route="pages/annotate/annotate"] .an-note-input { flex: 1; min-width: 0; height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 24); } [data-route="pages/annotate/annotate"] .an-note-hover { background: #f0f0f0; } [data-route="pages/annotate/annotate"] /* 行尾「保存」胶囊（微信主色，按压加深一档） */ .an-note-save { flex: none; margin-left: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 36); border-radius: calc(var(--rpx) * 999); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 28); font-weight: 500; transition: background 0.12s ease; } [data-route="pages/annotate/annotate"] .an-note-save.an-note-hover { background: #06ad56; } /* ---- pages/pet/pet.wxss ---- */ [data-route="pages/pet/pet"] /* v4.18：养猫页已并入猫咪乐园，本页只做跳转过渡 */ .loading { padding: calc(var(--rpx) * 160) 0; text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); } /* ---- pages/medal/medal.wxss ---- */ [data-route="pages/medal/medal"] /** * 我的勋章（v4.20） * 字号守微信规范：正文 calc(var(--rpx) * 28) / 次要 calc(var(--rpx) * 24) / 辅助最小 calc(var(--rpx) * 22) */ .page-wrap { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24) calc(var(--rpx) * 60); box-sizing: border-box; } [data-route="pages/medal/medal"] .loading { padding: calc(var(--rpx) * 120) 0; text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); } [data-route="pages/medal/medal"] /* ---------- 顶部：已点亮多少枚 ---------- */ .medal-head-card { display: flex; align-items: center; } [data-route="pages/medal/medal"] .medal-big { width: calc(var(--rpx) * 150); text-align: center; flex-shrink: 0; } [data-route="pages/medal/medal"] .medal-big-num { font-size: calc(var(--rpx) * 64); font-weight: 600; color: #07c160; line-height: 1; } [data-route="pages/medal/medal"] .medal-big-total { font-size: calc(var(--rpx) * 28); color: #b2b2b2; } [data-route="pages/medal/medal"] .medal-head-text { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 12); } [data-route="pages/medal/medal"] .medal-head-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; } [data-route="pages/medal/medal"] .medal-head-text .muted { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); } [data-route="pages/medal/medal"] /* ---------- 勋章墙 ---------- */ .medal-grid { display: flex; flex-wrap: wrap; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 8); } [data-route="pages/medal/medal"] .medal { width: calc(var(--rpx) * 190); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 6) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 16); text-align: center; box-sizing: border-box; } [data-route="pages/medal/medal"] .medal-got { background: #e8f7ee; } [data-route="pages/medal/medal"] .medal-lock { background: #f7f7f7; opacity: 0.66; } [data-route="pages/medal/medal"] .medal-icon { font-size: calc(var(--rpx) * 48); line-height: 1.1; } [data-route="pages/medal/medal"] .medal-name { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); font-weight: 500; color: #191919; } [data-route="pages/medal/medal"] .medal-hint { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #b2b2b2; line-height: 1.4; } [data-route="pages/medal/medal"] .medal-got .medal-hint { color: #07c160; } [data-route="pages/medal/medal"] .medal-rule { margin-top: calc(var(--rpx) * 28); } [data-route="pages/medal/medal"] .medal-rule .muted { margin-top: calc(var(--rpx) * 10); line-height: 1.7; } [data-route="pages/medal/medal"] .err { margin-top: calc(var(--rpx) * 20); text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 24); } [data-route="pages/medal/medal"] /* 成就卡（B-5 / G-21）：存相册 + 转发 */ .honor-card { margin-top: calc(var(--rpx) * 28); } [data-route="pages/medal/medal"] .honor-card .muted { margin-top: calc(var(--rpx) * 10); line-height: 1.7; } [data-route="pages/medal/medal"] .honor-actions { display: flex; gap: calc(var(--rpx) * 20); margin-top: calc(var(--rpx) * 24); } [data-route="pages/medal/medal"] .honor-btn { flex: 1; height: calc(var(--rpx) * 88); line-height: calc(var(--rpx) * 88); text-align: center; border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 32); color: #ffffff; background: #07c160; padding: 0; margin: 0; } [data-route="pages/medal/medal"] .honor-btn-ghost { color: #07c160; background: #e8f7ee; border: calc(var(--rpx) * 1) solid #07c160; } [data-route="pages/medal/medal"] button.honor-btn-ghost::after { border: none; } [data-route="pages/medal/medal"] .honor-tip { margin-top: calc(var(--rpx) * 16); } [data-route="pages/medal/medal"] /* 屏外画布：离屏摆在不挡路的地方，别用 display:none */ .poster-canvas { position: fixed; left: calc(var(--rpx) * -9999); top: 0; width: 600px; height: 800px; } /* ---- pages/cat/cat.wxss ---- */ [data-route="pages/cat/cat"] /** * 猫咪升级详情（v4.24） * 字号遵循微信规范：正文 calc(var(--rpx) * 28)(14px) / 次要 calc(var(--rpx) * 24)(12px) / 辅助最小 calc(var(--rpx) * 22)(11px) * v4.70.0 换皮：白分组块 + 发丝线，渐变/阴影/彩边退场 */ .page-wrap { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24) calc(var(--rpx) * 60); box-sizing: border-box; } [data-route="pages/cat/cat"] .loading { padding: calc(var(--rpx) * 120) 0; text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); } [data-route="pages/cat/cat"] .err { margin-top: calc(var(--rpx) * 20); color: #fa5151; font-size: calc(var(--rpx) * 24); text-align: center; } [data-route="pages/cat/cat"] /* ---------------- ① 我现在的猫 ---------------- */ .cat-hero { display: flex; align-items: center; padding: calc(var(--rpx) * 30) calc(var(--rpx) * 28); margin-bottom: calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); background: #ffffff; } [data-route="pages/cat/cat"] .ch-face { font-size: calc(var(--rpx) * 96); line-height: 1; margin-right: calc(var(--rpx) * 24); flex-shrink: 0; } [data-route="pages/cat/cat"] .cat-level-2 .ch-face { font-size: calc(var(--rpx) * 104); } [data-route="pages/cat/cat"] .cat-level-3 .ch-face { font-size: calc(var(--rpx) * 112); } [data-route="pages/cat/cat"] .cat-level-4 .ch-face { font-size: calc(var(--rpx) * 120); } [data-route="pages/cat/cat"] .ch-main { flex: 1; min-width: 0; } [data-route="pages/cat/cat"] .ch-name { font-size: calc(var(--rpx) * 40); font-weight: 500; color: #191919; } [data-route="pages/cat/cat"] .ch-desc { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.5; } [data-route="pages/cat/cat"] .ch-lv { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/cat/cat"] /* ---------------- ② 升级路线 ---------------- */ .route-tip { font-size: calc(var(--rpx) * 24); line-height: 1.6; margin-bottom: calc(var(--rpx) * 14); } [data-route="pages/cat/cat"] .route-list { margin-top: calc(var(--rpx) * 6); } [data-route="pages/cat/cat"] .route-row { display: flex; align-items: center; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 16); margin-bottom: calc(var(--rpx) * 12); background: #ffffff; } [data-route="pages/cat/cat"] .route-cur { background: #e8f7ee; } [data-route="pages/cat/cat"] .route-todo { opacity: 0.72; } [data-route="pages/cat/cat"] .rr-icon { font-size: calc(var(--rpx) * 52); line-height: 1; margin-right: calc(var(--rpx) * 18); flex-shrink: 0; } [data-route="pages/cat/cat"] .rr-main { flex: 1; min-width: 0; } [data-route="pages/cat/cat"] .rr-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/cat/cat"] .rr-badge { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); font-weight: 400; color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); } [data-route="pages/cat/cat"] .rr-badge-past { background: #b2b2b2; } [data-route="pages/cat/cat"] .rr-desc { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.5; } [data-route="pages/cat/cat"] .rr-need { flex-shrink: 0; margin-left: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/cat/cat"] .route-hint { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #07c160; font-weight: 500; } [data-route="pages/cat/cat"] .lv-now { margin-top: calc(var(--rpx) * 18); padding-top: calc(var(--rpx) * 16); border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/cat/cat"] .lv-bar { height: calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 999); background: #f2f2f2; overflow: hidden; } [data-route="pages/cat/cat"] .lv-bar-fill { height: 100%; border-radius: calc(var(--rpx) * 999); background: #07c160; } [data-route="pages/cat/cat"] .lv-hint { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/cat/cat"] /* ---------------- ③ 互动次数 ---------------- */ .act-list { margin-top: calc(var(--rpx) * 6); } [data-route="pages/cat/cat"] .act-row { display: flex; align-items: center; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 14); border-radius: calc(var(--rpx) * 16); margin-bottom: calc(var(--rpx) * 12); background: #ffffff; } [data-route="pages/cat/cat"] .ar-icon-wrap { position: relative; flex-shrink: 0; margin-right: calc(var(--rpx) * 18); width: calc(var(--rpx) * 56); height: calc(var(--rpx) * 56); display: flex; align-items: center; justify-content: center; } [data-route="pages/cat/cat"] .ar-icon { font-size: calc(var(--rpx) * 40); line-height: 1; } [data-route="pages/cat/cat"] /* 右上角小红点（v4.26）：这个动作没次数了、但还赚得动 → 去做任务 */ .ar-dot { position: absolute; top: calc(var(--rpx) * -4); right: calc(var(--rpx) * -4); width: calc(var(--rpx) * 16); height: calc(var(--rpx) * 16); border-radius: 50%; background: #fa5151; border: calc(var(--rpx) * 3) solid #ffffff; } [data-route="pages/cat/cat"] .ar-main { flex: 1; min-width: 0; } [data-route="pages/cat/cat"] .ar-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/cat/cat"] .ar-count { margin-left: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); font-weight: 500; color: #fa5151; } [data-route="pages/cat/cat"] .ar-hint { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); } [data-route="pages/cat/cat"] .ar-earn { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/cat/cat"] .ar-go { flex-shrink: 0; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #07c160; font-weight: 500; } [data-route="pages/cat/cat"] .ar-ready { flex-shrink: 0; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/cat/cat"] /* ================= 刺刺毛（v4.27）：没照顾好 ================= */ .ch-sad-tag { margin-left: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); font-weight: 500; color: #ffffff; background: #fa5151; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); } [data-route="pages/cat/cat"] .cat-hero-sad { background: #feeceb; } [data-route="pages/cat/cat"] .sad-bar { display: flex; align-items: center; margin-top: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20); background: #feeceb; border-radius: calc(var(--rpx) * 16); } [data-route="pages/cat/cat"] .sb-icon { font-size: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 16); } [data-route="pages/cat/cat"] .sb-body { flex: 1; min-width: 0; } [data-route="pages/cat/cat"] .sb-title { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #fa5151; } [data-route="pages/cat/cat"] .sb-text { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.4; } [data-route="pages/cat/cat"] .sb-go { flex-shrink: 0; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #07c160; font-weight: 500; } [data-route="pages/cat/cat"] .care-list { margin-top: calc(var(--rpx) * 12); } [data-route="pages/cat/cat"] .care-row { display: flex; align-items: center; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 8); background: #f7f7f7; border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/cat/cat"] .care-row:active { background: #ececec; border-radius: calc(var(--rpx) * 14); } [data-route="pages/cat/cat"] .cr-icon { font-size: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 16); flex-shrink: 0; } [data-route="pages/cat/cat"] .cr-main { flex: 1; min-width: 0; } [data-route="pages/cat/cat"] .cr-name { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; } [data-route="pages/cat/cat"] .cr-rule { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); font-weight: 400; color: #888888; } [data-route="pages/cat/cat"] .cr-now { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/cat/cat"] .care-bad .cr-now { color: #fa5151; font-weight: 500; } [data-route="pages/cat/cat"] .care-bad .cr-icon { filter: grayscale(0.3); } [data-route="pages/cat/cat"] .cr-go { flex-shrink: 0; margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #07c160; font-weight: 500; } [data-route="pages/cat/cat"] .care-bad .cr-go { color: #fa9d3b; } /* ---- pages/power/power.wxss ---- */ [data-route="pages/power/power"] /* v4.70.0 换皮：战力值深色卡 → 白底黑数字 + 绿进度条（对齐 index.wxss 的 .power-card） */ .pw-page { min-height: calc(var(--vh) * 100); background: #ededed; padding: 0 calc(var(--rpx) * 24) calc(var(--rpx) * 60); } [data-route="pages/power/power"] .pw-hero { margin: calc(var(--rpx) * 16) 0; padding: calc(var(--rpx) * 28) calc(var(--rpx) * 32); background: #ffffff; border-radius: calc(var(--rpx) * 16); text-align: center; } [data-route="pages/power/power"] .pw-hero-cap { font-size: calc(var(--rpx) * 24); color: #888888; letter-spacing: calc(var(--rpx) * 4); } [data-route="pages/power/power"] .pw-num { font-size: calc(var(--rpx) * 96); font-weight: 600; line-height: 1.1; margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 4); color: #191919; } [data-route="pages/power/power"] .pw-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; letter-spacing: calc(var(--rpx) * 2); } [data-route="pages/power/power"] .pw-bar { margin: calc(var(--rpx) * 22) calc(var(--rpx) * 40) calc(var(--rpx) * 10); height: calc(var(--rpx) * 12); background: #f2f2f2; border-radius: calc(var(--rpx) * 999); overflow: hidden; } [data-route="pages/power/power"] .pw-bar-in { height: 100%; background: #07c160; border-radius: calc(var(--rpx) * 999); } [data-route="pages/power/power"] .pw-next { font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/power/power"] .pw-delta { display: inline-block; margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 20); background: #e8f7ee; border-radius: calc(var(--rpx) * 6); color: #07c160; font-size: calc(var(--rpx) * 28); font-weight: 500; } [data-route="pages/power/power"] .pw-tabs { display: flex; margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 16); background: #f2f2f2; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 6); } [data-route="pages/power/power"] .pw-tab { flex: 1; text-align: center; padding: calc(var(--rpx) * 16) 0; font-size: calc(var(--rpx) * 28); color: #888888; border-radius: calc(var(--rpx) * 12); } [data-route="pages/power/power"] .pw-tab.on { background: #ffffff; color: #191919; font-weight: 500; } [data-route="pages/power/power"] .pw-card { background: #ffffff; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 26) calc(var(--rpx) * 24); margin-bottom: calc(var(--rpx) * 18); } [data-route="pages/power/power"] .pw-h3 { font-size: calc(var(--rpx) * 28); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/power/power"] .pw-row { display: flex; align-items: flex-start; } [data-route="pages/power/power"] .pw-ico { font-size: calc(var(--rpx) * 40); margin-right: calc(var(--rpx) * 18); } [data-route="pages/power/power"] .pw-row-body { flex: 1; } [data-route="pages/power/power"] .pw-row-top { display: flex; justify-content: space-between; align-items: baseline; } [data-route="pages/power/power"] .pw-name { font-size: calc(var(--rpx) * 32); color: #191919; font-weight: 500; } [data-route="pages/power/power"] .pw-val { font-size: calc(var(--rpx) * 32); color: #191919; font-weight: 600; } [data-route="pages/power/power"] .pw-mini { height: calc(var(--rpx) * 8); background: #f2f2f2; border-radius: calc(var(--rpx) * 999); margin: calc(var(--rpx) * 10) 0 calc(var(--rpx) * 8); overflow: hidden; } [data-route="pages/power/power"] .pw-mini-in { height: 100%; background: #07c160; border-radius: calc(var(--rpx) * 999); } [data-route="pages/power/power"] .pw-sub { font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/power/power"] .pw-tip { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); color: #888888; background: #f7f7f7; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 12) calc(var(--rpx) * 16); } [data-route="pages/power/power"] .pw-chart { display: flex; align-items: flex-end; justify-content: space-between; height: calc(var(--rpx) * 140); padding-top: calc(var(--rpx) * 10); } [data-route="pages/power/power"] .pw-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } [data-route="pages/power/power"] .pw-col-bar { width: calc(var(--rpx) * 18); background: #e5e5e5; border-radius: calc(var(--rpx) * 6) calc(var(--rpx) * 6) 0 0; } [data-route="pages/power/power"] .pw-col-bar.up { background: #07c160; } [data-route="pages/power/power"] .pw-col-day { font-size: calc(var(--rpx) * 20); color: #b2b2b2; margin-top: calc(var(--rpx) * 8); } [data-route="pages/power/power"] .pw-line { font-size: calc(var(--rpx) * 28); color: #191919; padding: calc(var(--rpx) * 16) 0; border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/power/power"] .pw-line:first-of-type { border-top: none; } [data-route="pages/power/power"] .pw-rank-me { display: flex; align-items: baseline; justify-content: space-between; } [data-route="pages/power/power"] .pw-rank-me-no { font-size: calc(var(--rpx) * 40); font-weight: 600; color: #191919; } [data-route="pages/power/power"] .pw-rank-me-sub { font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/power/power"] .pw-rank-row { display: flex; align-items: center; padding: calc(var(--rpx) * 18) 0; border-top: calc(var(--rpx) * 1) solid #f2f2f2; } [data-route="pages/power/power"] .pw-rank-row.me { background: #f7f7f7; border-radius: calc(var(--rpx) * 12); padding-left: calc(var(--rpx) * 12); padding-right: calc(var(--rpx) * 12); } [data-route="pages/power/power"] .pw-rank-no { width: calc(var(--rpx) * 70); font-size: calc(var(--rpx) * 28); color: #b2b2b2; font-weight: 500; } [data-route="pages/power/power"] .pw-rank-t { flex: 1; font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/power/power"] .pw-rank-v { font-size: calc(var(--rpx) * 32); color: #191919; font-weight: 600; } [data-route="pages/power/power"] .pw-rank-me-tag { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); background: #07c160; color: #ffffff; border-radius: calc(var(--rpx) * 6); padding: calc(var(--rpx) * 2) calc(var(--rpx) * 10); } [data-route="pages/power/power"] .pw-empty { font-size: calc(var(--rpx) * 24); color: #b2b2b2; text-align: center; padding: calc(var(--rpx) * 20) 0; } [data-route="pages/power/power"] .pw-audit { background: #f7f7f7; border-radius: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 24); } [data-route="pages/power/power"] .pw-audit-line { font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.7; } [data-route="pages/power/power"] .pw-login { padding: calc(var(--rpx) * 40) 0; } [data-route="pages/power/power"] .pw-btn { background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 32); border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 22) 0; } [data-route="pages/power/power"] .pw-err { text-align: center; color: #fa5151; font-size: calc(var(--rpx) * 28); padding: calc(var(--rpx) * 20) 0; } [data-route="pages/power/power"] /* 榜单口径说明（v4.85 榜单方案 A） */ .pw-note { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 20); color: #888888; line-height: 1.6; } /* ---- pages/invite/invite.wxss ---- */ [data-route="pages/invite/invite"] /** * 邀请家长（v4.85 · B-3 / G-13） * 字号守微信规范：正文 calc(var(--rpx) * 28) / 次要 calc(var(--rpx) * 24) / 辅助最小 calc(var(--rpx) * 22) */ .page-wrap { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24) calc(var(--rpx) * 60); box-sizing: border-box; } [data-route="pages/invite/invite"] .loading { padding: calc(var(--rpx) * 120) 0; text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); } [data-route="pages/invite/invite"] /* 屏外画布：不能用 display:none，否则拿不到 canvas 节点 */ .poster-canvas { position: fixed; left: calc(var(--rpx) * -2000); top: 0; width: 600px; height: 800px; z-index: -1; } [data-route="pages/invite/invite"] /* ---------- 登录 ---------- */ .login-card { text-align: center; } [data-route="pages/invite/invite"] .login-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/invite/invite"] .login-card .btn-primary { margin-top: calc(var(--rpx) * 28); } [data-route="pages/invite/invite"] /* ---------- ① 专属码 ---------- */ .code-card { text-align: center; } [data-route="pages/invite/invite"] .code-title { font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/invite/invite"] .code-num { margin: calc(var(--rpx) * 16) 0 calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 56); font-weight: 600; color: #07c160; letter-spacing: calc(var(--rpx) * 2); line-height: 1.2; word-break: break-all; } [data-route="pages/invite/invite"] .code-hint { font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.6; } [data-route="pages/invite/invite"] .code-btns { display: flex; gap: calc(var(--rpx) * 20); margin-top: calc(var(--rpx) * 28); } [data-route="pages/invite/invite"] .code-btns button { flex: 1; margin: 0; } [data-route="pages/invite/invite"] /* v4.86.192：海报主按钮下的次行操作（朋友圈引导 / 保存到相册）。 朋友圈没有程序拉起的转发口子（微信只许右上角 ··· 进）⇒ 做成小键 + 弹窗引导； 保存到相册从主键降到这里（主键位让给「分享给朋友」）。 */ .poster-sub-btns { margin-top: calc(var(--rpx) * 20); display: flex; align-items: center; justify-content: center; gap: calc(var(--rpx) * 8); } [data-route="pages/invite/invite"] .poster-sub-btn { padding: calc(var(--rpx) * 10) calc(var(--rpx) * 28); font-size: calc(var(--rpx) * 24); color: #666666; } [data-route="pages/invite/invite"] .poster-sub-hover { color: #07c160; } [data-route="pages/invite/invite"] .poster-sub-sep { width: calc(var(--rpx) * 2); height: calc(var(--rpx) * 26); background: #e0e0e0; } [data-route="pages/invite/invite"] /* ---------- ② 海报 ---------- */ .poster-wrap { margin-top: calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 16); overflow: hidden; background: #f7f7f7; } [data-route="pages/invite/invite"] .poster-img { width: 100%; display: block; } [data-route="pages/invite/invite"] .poster-empty { margin-top: calc(var(--rpx) * 24); height: calc(var(--rpx) * 320); border-radius: calc(var(--rpx) * 16); background: #f7f7f7; border: calc(var(--rpx) * 2) dashed #e5e5e5; display: flex; flex-direction: column; align-items: center; justify-content: center; } [data-route="pages/invite/invite"] .poster-empty-icon { font-size: calc(var(--rpx) * 64); line-height: 1; } [data-route="pages/invite/invite"] .poster-empty-text { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/invite/invite"] .poster-btns { display: flex; gap: calc(var(--rpx) * 20); margin-top: calc(var(--rpx) * 24); } [data-route="pages/invite/invite"] .poster-btns button { flex: 1; margin: 0; } [data-route="pages/invite/invite"] /* ---------- ③ 进度 ---------- */ .invite-head { display: flex; align-items: baseline; margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 4); } [data-route="pages/invite/invite"] .invite-num { font-size: calc(var(--rpx) * 64); font-weight: 600; color: #07c160; line-height: 1; } [data-route="pages/invite/invite"] .invite-unit { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/invite/invite"] .tier-list { margin-top: calc(var(--rpx) * 20); } [data-route="pages/invite/invite"] .tier { padding: calc(var(--rpx) * 20) 0; border-top: calc(var(--rpx) * 2) solid #f2f2f2; } [data-route="pages/invite/invite"] .tier:first-child { border-top: none; } [data-route="pages/invite/invite"] .tier-head { display: flex; align-items: center; } [data-route="pages/invite/invite"] .tier-badge { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); flex-shrink: 0; border-radius: 50%; background: #f2f2f2; color: #888888; font-size: calc(var(--rpx) * 28); font-weight: 600; display: flex; align-items: center; justify-content: center; } [data-route="pages/invite/invite"] .tier-got .tier-badge { background: #e9f8ef; color: #0a7a3d; } [data-route="pages/invite/invite"] .tier-text { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 20); } [data-route="pages/invite/invite"] .tier-name { font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 500; } [data-route="pages/invite/invite"] .tier-got .tier-name { color: #0a7a3d; } [data-route="pages/invite/invite"] .tier-desc { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/invite/invite"] .tier-grants { margin: calc(var(--rpx) * 12) 0 0 calc(var(--rpx) * 84); } [data-route="pages/invite/invite"] .tier-grant { display: flex; align-items: flex-start; margin-top: calc(var(--rpx) * 6); } [data-route="pages/invite/invite"] .tier-grant-dot { flex-shrink: 0; width: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #b2b2b2; line-height: 1.6; } [data-route="pages/invite/invite"] .tier-grant-text { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 24); color: #4c8f68; line-height: 1.6; } [data-route="pages/invite/invite"] /* ---------- 进度条 ---------- */ .bar-wrap { margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 8); } [data-route="pages/invite/invite"] .bar-bg { height: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 8); background: #f2f2f2; overflow: hidden; } [data-route="pages/invite/invite"] .bar-fill { height: 100%; border-radius: calc(var(--rpx) * 8); background: #07c160; transition: width 240ms ease; } [data-route="pages/invite/invite"] .bar-tip { display: block; margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #4c8f68; } [data-route="pages/invite/invite"] /* ---------- ④ 双边助力 ---------- */ .assist-stat { display: flex; margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 8); } [data-route="pages/invite/invite"] .assist-cell { flex: 1; text-align: center; padding: calc(var(--rpx) * 16) 0; background: #f7f7f7; border-radius: calc(var(--rpx) * 12); } [data-route="pages/invite/invite"] .assist-cell + .assist-cell { margin-left: calc(var(--rpx) * 20); } [data-route="pages/invite/invite"] .assist-num { display: block; font-size: calc(var(--rpx) * 40); font-weight: 600; color: #07c160; line-height: 1.1; } [data-route="pages/invite/invite"] .assist-label { display: block; margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); color: #888888; } [data-route="pages/invite/invite"] .assist-list { margin-top: calc(var(--rpx) * 20); } [data-route="pages/invite/invite"] .assist-row { display: flex; align-items: center; padding: calc(var(--rpx) * 20) 0; border-top: calc(var(--rpx) * 2) solid #f2f2f2; } [data-route="pages/invite/invite"] .assist-row:first-child { border-top: none; } [data-route="pages/invite/invite"] .assist-avatar { width: calc(var(--rpx) * 72); height: calc(var(--rpx) * 72); flex-shrink: 0; border-radius: 50%; background: #f2f2f2; } [data-route="pages/invite/invite"] .assist-info { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 20); } [data-route="pages/invite/invite"] .assist-name { font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/invite/invite"] .assist-tip { margin-top: calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 20); color: #888888; } [data-route="pages/invite/invite"] .assist-btn { flex-shrink: 0; margin: 0 0 0 calc(var(--rpx) * 16); padding: 0 calc(var(--rpx) * 28); background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 28); line-height: 2.2; border-radius: calc(var(--rpx) * 10); } [data-route="pages/invite/invite"] .assist-btn-done { background: #f2f2f2; color: #b2b2b2; } [data-route="pages/invite/invite"] /* ---------- ⑤ 码台账 ---------- */ .qr-row { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 18) 0; border-top: calc(var(--rpx) * 2) solid #f2f2f2; } [data-route="pages/invite/invite"] .qr-row:first-child { border-top: none; } [data-route="pages/invite/invite"] .qr-scene { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 28); color: #191919; word-break: break-all; } [data-route="pages/invite/invite"] .qr-stat { flex-shrink: 0; margin-left: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/invite/invite"] /* ---------- ⑤ 规则 ---------- */ .rule-card .muted { line-height: 1.7; } [data-route="pages/invite/invite"] /* ---------- 通用 ---------- */ .card-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/invite/invite"] .muted { font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.6; } [data-route="pages/invite/invite"] .err { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #feeceb; color: #fa5151; font-size: calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 12); } [data-route="pages/invite/invite"] /* ---------- v4.86.193：邀请名单弹窗（谁进来了） ---------- */ .invited-head { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/invite/invite"] .invited-open { font-size: calc(var(--rpx) * 24); color: #07c160; padding: calc(var(--rpx) * 8) 0; } [data-route="pages/invite/invite"] .invited-open-hover { opacity: 0.7; } [data-route="pages/invite/invite"] .inv-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 60; display: flex; align-items: center; justify-content: center; } [data-route="pages/invite/invite"] .inv-box { width: calc(var(--rpx) * 620); max-height: 76vh; background: #ffffff; border-radius: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 32) calc(var(--rpx) * 28) calc(var(--rpx) * 24); box-sizing: border-box; display: flex; flex-direction: column; } [data-route="pages/invite/invite"] .inv-title { font-size: calc(var(--rpx) * 32); font-weight: 700; color: #191919; text-align: center; margin-bottom: calc(var(--rpx) * 20); } [data-route="pages/invite/invite"] .inv-count { font-weight: 400; color: #888888; font-size: calc(var(--rpx) * 24); } [data-route="pages/invite/invite"] .inv-list { flex: 1; max-height: 52vh; min-height: calc(var(--rpx) * 160); } [data-route="pages/invite/invite"] .inv-row { display: flex; align-items: center; gap: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 20) 0; background: #f7f7f7; border-radius: calc(var(--rpx) * 10); margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/invite/invite"] .inv-avatar { width: calc(var(--rpx) * 84); height: calc(var(--rpx) * 84); border-radius: 50%; background: #f2f2f2; flex-shrink: 0; } [data-route="pages/invite/invite"] .inv-main { flex: 1; min-width: 0; } [data-route="pages/invite/invite"] .inv-name-t { font-size: calc(var(--rpx) * 28); color: #191919; font-weight: 500; } [data-route="pages/invite/invite"] .inv-no { font-size: calc(var(--rpx) * 20); color: #b2b2b2; margin-left: calc(var(--rpx) * 12); } [data-route="pages/invite/invite"] .inv-sub { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/invite/invite"] .inv-lv { color: #4a7c59; } [data-route="pages/invite/invite"] .inv-paid { flex-shrink: 0; font-size: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 18); border-radius: calc(var(--rpx) * 999); background: #f2f2f2; color: #999999; } [data-route="pages/invite/invite"] .inv-paid-on { background: #e8f7ee; color: #07c160; } [data-route="pages/invite/invite"] .inv-empty { padding: calc(var(--rpx) * 60) 0; text-align: center; font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/invite/invite"] .inv-close { margin-top: calc(var(--rpx) * 24); } /* ---- pages/benefit/benefit.wxss ---- */ [data-route="pages/benefit/benefit"] /** * 阶梯权益（v4.85 · B-4 / G-17） * 字号守微信规范：正文 calc(var(--rpx) * 28) / 次要 calc(var(--rpx) * 24) / 辅助最小 calc(var(--rpx) * 22) */ .page-wrap { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24) calc(var(--rpx) * 60); box-sizing: border-box; } [data-route="pages/benefit/benefit"] .loading { padding: calc(var(--rpx) * 120) 0; text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); } [data-route="pages/benefit/benefit"] /* ---------- 登录 ---------- */ .login-card { text-align: center; } [data-route="pages/benefit/benefit"] .login-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/benefit/benefit"] .login-card .btn-primary { margin-top: calc(var(--rpx) * 28); } [data-route="pages/benefit/benefit"] /* ---------- 进度 ---------- */ .invite-head { display: flex; align-items: baseline; margin: calc(var(--rpx) * 8) 0 calc(var(--rpx) * 4); } [data-route="pages/benefit/benefit"] .invite-num { font-size: calc(var(--rpx) * 64); font-weight: 600; color: #07c160; line-height: 1; } [data-route="pages/benefit/benefit"] .invite-unit { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/benefit/benefit"] .bar-wrap { margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 8); } [data-route="pages/benefit/benefit"] .bar-bg { height: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 8); background: #f2f2f2; overflow: hidden; } [data-route="pages/benefit/benefit"] .bar-fill { height: 100%; border-radius: calc(var(--rpx) * 8); background: #07c160; transition: width 240ms ease; } [data-route="pages/benefit/benefit"] .bar-tip { display: block; margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #4c8f68; } [data-route="pages/benefit/benefit"] /* ---------- 档位卡 ---------- */ .tier-head { display: flex; align-items: center; } [data-route="pages/benefit/benefit"] .tier-badge { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); flex-shrink: 0; border-radius: 50%; background: #f2f2f2; color: #888888; font-size: calc(var(--rpx) * 28); font-weight: 600; display: flex; align-items: center; justify-content: center; } [data-route="pages/benefit/benefit"] .tier-badge-got { background: #e9f8ef; color: #0a7a3d; } [data-route="pages/benefit/benefit"] .tier-text { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 20); } [data-route="pages/benefit/benefit"] .tier-name { font-size: calc(var(--rpx) * 32); color: #191919; font-weight: 500; } [data-route="pages/benefit/benefit"] .tier-name-got { color: #0a7a3d; } [data-route="pages/benefit/benefit"] .tier-desc { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.6; } [data-route="pages/benefit/benefit"] .tier-state { flex-shrink: 0; margin-left: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/benefit/benefit"] .tier-state.on { color: #0a7a3d; } [data-route="pages/benefit/benefit"] .grant-list { margin: calc(var(--rpx) * 20) 0 0 calc(var(--rpx) * 84); padding-top: calc(var(--rpx) * 16); border-top: calc(var(--rpx) * 2) solid #f2f2f2; } [data-route="pages/benefit/benefit"] .grant-row { display: flex; align-items: flex-start; margin-top: calc(var(--rpx) * 10); } [data-route="pages/benefit/benefit"] .grant-dot { flex-shrink: 0; width: calc(var(--rpx) * 28); font-size: calc(var(--rpx) * 24); color: #07c160; line-height: 1.6; } [data-route="pages/benefit/benefit"] .grant-text { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 28); color: #4c8f68; line-height: 1.6; } [data-route="pages/benefit/benefit"] /* ---------- 规则 ---------- */ .rule-card .muted { line-height: 1.7; } [data-route="pages/benefit/benefit"] /* ---------- 通用 ---------- */ .card-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/benefit/benefit"] .muted { font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.6; } [data-route="pages/benefit/benefit"] .code-btns { display: flex; gap: calc(var(--rpx) * 20); margin-top: calc(var(--rpx) * 28); } [data-route="pages/benefit/benefit"] .code-btns button { flex: 1; margin: 0; } [data-route="pages/benefit/benefit"] .err { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #feeceb; color: #fa5151; font-size: calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 12); } /* ---- pages/team/team.wxss ---- */ [data-route="pages/team/team"] /** * 组队打卡（v4.85 · B-4 / G-17） * 字号守微信规范：正文 calc(var(--rpx) * 28) / 次要 calc(var(--rpx) * 24) / 辅助最小 calc(var(--rpx) * 22) */ .page-wrap { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24) calc(var(--rpx) * 60); box-sizing: border-box; } [data-route="pages/team/team"] .loading { padding: calc(var(--rpx) * 120) 0; text-align: center; color: #888888; font-size: calc(var(--rpx) * 28); } [data-route="pages/team/team"] /* ---------- 登录 ---------- */ .login-card { text-align: center; } [data-route="pages/team/team"] .login-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/team/team"] .login-card .btn-primary { margin-top: calc(var(--rpx) * 28); } [data-route="pages/team/team"] /* ---------- 队伍头 ---------- */ .team-head { margin-bottom: calc(var(--rpx) * 24); } [data-route="pages/team/team"] .team-name { font-size: calc(var(--rpx) * 40); font-weight: 600; color: #191919; } [data-route="pages/team/team"] .team-code { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/team/team"] /* ---------- 目标 ---------- */ .goal-line { display: flex; align-items: baseline; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/team/team"] .goal-num { font-size: calc(var(--rpx) * 64); font-weight: 600; color: #07c160; line-height: 1; } [data-route="pages/team/team"] .goal-of { margin-left: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 28); color: #888888; } [data-route="pages/team/team"] .goal-label { margin-left: auto; font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/team/team"] .bar-bg { height: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 8); background: #f2f2f2; overflow: hidden; } [data-route="pages/team/team"] .bar-fill { height: 100%; border-radius: calc(var(--rpx) * 8); background: #07c160; transition: width 240ms ease; } [data-route="pages/team/team"] .bar-tip { display: block; margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #4c8f68; line-height: 1.6; } [data-route="pages/team/team"] /* ---------- 队友 ---------- */ .mate-row { display: flex; align-items: center; padding: calc(var(--rpx) * 20) 0; border-top: calc(var(--rpx) * 2) solid #f2f2f2; } [data-route="pages/team/team"] .mate-row:first-of-type { border-top: none; } [data-route="pages/team/team"] .mate-avatar { width: calc(var(--rpx) * 72); height: calc(var(--rpx) * 72); flex-shrink: 0; border-radius: 50%; background: #f2f2f2; } [data-route="pages/team/team"] .mate-name { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/team/team"] .mate-days { flex-shrink: 0; font-size: calc(var(--rpx) * 24); color: #07c160; } [data-route="pages/team/team"] /* ---------- 输入 ---------- */ .inp { margin: calc(var(--rpx) * 16) 0 calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #f7f7f7; border-radius: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); color: #191919; } [data-route="pages/team/team"] /* ---------- 退出 ---------- */ .quit-link { margin-top: calc(var(--rpx) * 40); text-align: center; font-size: calc(var(--rpx) * 24); color: #b2b2b2; } [data-route="pages/team/team"] /* ---------- 规则 ---------- */ .rule-card .muted { line-height: 1.7; } [data-route="pages/team/team"] /* ---------- 通用 ---------- */ .card-title { font-size: calc(var(--rpx) * 32); font-weight: 500; color: #191919; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/team/team"] .muted { font-size: calc(var(--rpx) * 24); color: #888888; line-height: 1.6; } [data-route="pages/team/team"] .code-btns { display: flex; gap: calc(var(--rpx) * 20); margin-top: calc(var(--rpx) * 28); } [data-route="pages/team/team"] .code-btns button { flex: 1; margin: 0; } [data-route="pages/team/team"] button.btn-primary { background: #07c160; color: #ffffff; font-size: calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 12); line-height: 2.4; } [data-route="pages/team/team"] button.btn-primary[disabled] { background: #a6e0be; color: #ffffff; } [data-route="pages/team/team"] button.btn-ghost { background: #ffffff; color: #07c160; font-size: calc(var(--rpx) * 28); border: calc(var(--rpx) * 2) solid #07c160; border-radius: calc(var(--rpx) * 12); line-height: 2.4; } [data-route="pages/team/team"] button.btn-ghost[disabled] { color: #a6e0be; border-color: #a6e0be; } [data-route="pages/team/team"] .err { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #feeceb; color: #fa5151; font-size: calc(var(--rpx) * 28); border-radius: calc(var(--rpx) * 12); } /* ---- pages/redeem/redeem.wxss ---- */ [data-route="pages/redeem/redeem"] /* 兑换点评卡（G-19）· A 层字号只走 20/24/28/32/40 五档 */ .rc-card { text-align: center; padding: calc(var(--rpx) * 40) calc(var(--rpx) * 32); } [data-route="pages/redeem/redeem"] .rc-badge { font-size: calc(var(--rpx) * 28); color: #07c160; font-weight: 600; } [data-route="pages/redeem/redeem"] .rc-code { font-size: calc(var(--rpx) * 32); color: #222; letter-spacing: calc(var(--rpx) * 2); margin: calc(var(--rpx) * 20) 0 calc(var(--rpx) * 24); } [data-route="pages/redeem/redeem"] .rc-tip { display: block; margin-bottom: calc(var(--rpx) * 28); line-height: 1.6; } [data-route="pages/redeem/redeem"] .rc-btn { width: 100%; } [data-route="pages/redeem/redeem"] /* v7.0.096 兑换前权益预览（云库 104 号）：面额/有效期/来源，字号只走 24/28/32 三档 */ .rc-prev { margin: 0 0 calc(var(--rpx) * 24); padding: calc(var(--rpx) * 24); background: #f0f9eb; border-radius: calc(var(--rpx) * 10); text-align: left; } [data-route="pages/redeem/redeem"] .rc-prev-bad { background: #f7f7f7; } [data-route="pages/redeem/redeem"] .rc-prev-head { font-size: calc(var(--rpx) * 28); color: #07c160; font-weight: 600; margin-bottom: calc(var(--rpx) * 12); } [data-route="pages/redeem/redeem"] .rc-prev-bad .rc-prev-head { color: #888; } [data-route="pages/redeem/redeem"] .rc-prev-row { display: flex; justify-content: space-between; line-height: 1.8; } [data-route="pages/redeem/redeem"] .rc-prev-k { font-size: calc(var(--rpx) * 24); color: #888; } [data-route="pages/redeem/redeem"] .rc-prev-v { font-size: calc(var(--rpx) * 28); color: #222; } [data-route="pages/redeem/redeem"] .rc-prev-img { width: calc(var(--rpx) * 240); height: calc(var(--rpx) * 240); margin: calc(var(--rpx) * 16) auto 0; display: block; border-radius: calc(var(--rpx) * 8); } [data-route="pages/redeem/redeem"] .rc-result { font-size: calc(var(--rpx) * 32); color: #222; margin-bottom: calc(var(--rpx) * 16); } [data-route="pages/redeem/redeem"] .rc-result-ok { color: #07c160; font-weight: 600; } [data-route="pages/redeem/redeem"] .rc-actions { display: flex; justify-content: center; gap: calc(var(--rpx) * 40); margin-top: calc(var(--rpx) * 24); } [data-route="pages/redeem/redeem"] .rc-link { min-height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 24); font-size: calc(var(--rpx) * 28); color: #576b95; } [data-route="pages/redeem/redeem"] .rc-manual { display: flex; align-items: center; margin-top: calc(var(--rpx) * 28); } [data-route="pages/redeem/redeem"] .rc-input { flex: 1; height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 28); background: #f5f5f5; border-radius: calc(var(--rpx) * 8); } [data-route="pages/redeem/redeem"] .rc-manual-btn { min-width: calc(var(--rpx) * 140); height: calc(var(--rpx) * 72); line-height: calc(var(--rpx) * 72); margin-left: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 28); color: #fff; background: #07c160; border-radius: calc(var(--rpx) * 8); } [data-route="pages/redeem/redeem"] .rc-help { text-align: left; } [data-route="pages/redeem/redeem"] .rc-help .muted { line-height: 1.7; } [data-route="pages/redeem/redeem"] /* v4.86.454：失败提示补样式。 * .err —— 卡号不对 / 卡已领过 / 扫码失败都往这里写。原来全站没给它样式， * 它跟正文同一个字号同一个色，用户扫一眼根本看不出这是一条失败提示。 */ .err { margin: calc(var(--rpx) * 20) 0 0; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); border-radius: calc(var(--rpx) * 10); background: #feeceb; color: #fa5151; font-size: calc(var(--rpx) * 24); line-height: 1.6; } /* ---- pages/voice/voice.wxss ---- */ [data-route="pages/voice/voice"] /* 语音陪练（学生端） * 规矩：A 层字号只有 20/24/28/32/40（≥46 是展示级），颜色用 app.wxss 那套。 * 这一页是「孩子不看屏」的练字，所以屏上不放台词： * 猫在说什么 → 靠脉冲的节奏和颜色；该孩子了 → 靠一个键 + 一下震动。 * * 底色：全屏黑（老板 2026-10-24 截图后的定稿）。 * 理由不是好看：黑底在台灯下不刺眼、不反光，孩子抬眼扫一下也不会被亮白屏 * 抓走注意力。所以这一页所有区块都从「白卡」改成「黑卡」， * 亮色只剩三样：猫、绿色（在说/在听）、以及那一个该按的键。 */ page { background: #000000; } [data-route="pages/voice/voice"] .page-wrap { min-height: calc(var(--vh) * 100); padding: calc(var(--rpx) * 24) calc(var(--rpx) * 32) calc(var(--rpx) * 60); box-sizing: border-box; background: #000000; } [data-route="pages/voice/voice"] .note { margin-top: calc(var(--rpx) * 160); text-align: center; font-size: calc(var(--rpx) * 28); color: #8c8c8c; } [data-route="pages/voice/voice"] /* ---------- 打不开（这一态必须出字） ---------- */ .stopcard { margin-top: calc(var(--rpx) * 120); background: #141414; border-radius: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 36) calc(var(--rpx) * 28); } [data-route="pages/voice/voice"] .stoptext { font-size: calc(var(--rpx) * 28); color: #ededed; line-height: 1.8; } [data-route="pages/voice/voice"] /* ---------- 开始前：只有一句口号 ---------- */ .gate { position: relative; padding-top: calc(var(--rpx) * 140); text-align: center; } [data-route="pages/voice/voice"] .halo { position: absolute; top: calc(var(--rpx) * 100); left: 50%; width: calc(var(--rpx) * 400); height: calc(var(--rpx) * 400); margin-left: calc(var(--rpx) * -200); border-radius: 50%; background: #0d2318; } [data-route="pages/voice/voice"] .gate .cat { position: relative; z-index: 2; width: calc(var(--rpx) * 240); height: calc(var(--rpx) * 240); border-radius: 50%; background: #141414; } [data-route="pages/voice/voice"] .slogan { margin-top: calc(var(--rpx) * 56); font-size: calc(var(--rpx) * 40); color: #f5f5f5; letter-spacing: calc(var(--rpx) * 2); line-height: 1.6; } [data-route="pages/voice/voice"] .btn-start { margin: calc(var(--rpx) * 96) auto 0; width: calc(var(--rpx) * 360); padding: calc(var(--rpx) * 26) 0; text-align: center; font-size: calc(var(--rpx) * 32); color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 999); } [data-route="pages/voice/voice"] /* ---------- 猫的状态（说话 / 在听 / 等写 / 等拍） ---------- */ .stage { position: relative; height: calc(var(--rpx) * 520); display: flex; align-items: center; justify-content: center; } [data-route="pages/voice/voice"] .stage .cat { position: relative; z-index: 3; width: calc(var(--rpx) * 260); height: calc(var(--rpx) * 260); border-radius: 50%; background: #141414; } [data-route="pages/voice/voice"] /* 进度：一条细线，不写百分比 —— 看得见「往前走了」就够，不用读 */ .trace { position: absolute; top: calc(var(--rpx) * 8); left: calc(var(--rpx) * 60); right: calc(var(--rpx) * 60); height: calc(var(--rpx) * 4); border-radius: calc(var(--rpx) * 999); background: #262626; overflow: hidden; } [data-route="pages/voice/voice"] .trace-fill { height: calc(var(--rpx) * 4); border-radius: calc(var(--rpx) * 999); background: #07c160; } [data-route="pages/voice/voice"] .ring { position: absolute; z-index: 1; width: calc(var(--rpx) * 260); height: calc(var(--rpx) * 260); border-radius: 50%; border: calc(var(--rpx) * 4) solid #07c160; opacity: 0; } [data-route="pages/voice/voice"] /* 猫在说：一圈一圈往外走，慢一点，像呼吸 */ .talk .ring { border-color: #07c160; animation: pulse 2.6s ease-out infinite; } [data-route="pages/voice/voice"] .talk .r2 { animation-delay: 1.3s; } [data-route="pages/voice/voice"] .talk .cat { animation: breath 2.6s ease-in-out infinite; } [data-route="pages/voice/voice"] /* 在听：换绿，快一拍，再叠四根声波 */ .listen .ring { border-color: #07c160; animation: pulse 1.6s ease-out infinite; } [data-route="pages/voice/voice"] .listen .r2 { animation-delay: 0.8s; } [data-route="pages/voice/voice"] /* 等你写：虚线一格，停住不动 —— 动的东西会招人看 */ .write .ring { border-color: #4d4d4d; border-style: dashed; opacity: 1; animation: none; } [data-route="pages/voice/voice"] .write .r1 { width: calc(var(--rpx) * 300); height: calc(var(--rpx) * 300); border-radius: calc(var(--rpx) * 24); } [data-route="pages/voice/voice"] .write .r2 { display: none; } [data-route="pages/voice/voice"] /* 等你拍：取景框的四个角 */ .photo .ring { border-color: #6d84b6; border-radius: calc(var(--rpx) * 24); opacity: 1; animation: none; } [data-route="pages/voice/voice"] .photo .r1 { width: calc(var(--rpx) * 320); height: calc(var(--rpx) * 240); } [data-route="pages/voice/voice"] .photo .r2 { display: none; } [data-route="pages/voice/voice"] /* 声波：只在「在听」的时候出现 */ .bars { position: absolute; top: 50%; left: 50%; z-index: 4; display: flex; align-items: flex-end; height: calc(var(--rpx) * 60); margin: calc(var(--rpx) * -30) 0 0 calc(var(--rpx) * -46); } [data-route="pages/voice/voice"] .bar { width: calc(var(--rpx) * 8); margin: 0 calc(var(--rpx) * 4); border-radius: calc(var(--rpx) * 999); background: #07c160; height: calc(var(--rpx) * 16); animation: wave 1s ease-in-out infinite; } [data-route="pages/voice/voice"] .b2 { animation-delay: 0.15s; } [data-route="pages/voice/voice"] .b3 { animation-delay: 0.3s; } [data-route="pages/voice/voice"] .b4 { animation-delay: 0.45s; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { opacity: 0.08; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes breath { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes wave { 0% { height: calc(var(--rpx) * 14); } 50% { height: calc(var(--rpx) * 52); } 100% { height: calc(var(--rpx) * 14); } } [data-route="pages/voice/voice"] /* ---------- 孩子的键 ---------- */ .ctl { margin-top: calc(var(--rpx) * 8); } [data-route="pages/voice/voice"] .choices { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 24); } [data-route="pages/voice/voice"] .choice { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 40); font-size: calc(var(--rpx) * 32); color: #ededed; background: #1f1f1f; border-radius: calc(var(--rpx) * 999); } [data-route="pages/voice/voice"] .acts { margin-top: calc(var(--rpx) * 24); } [data-route="pages/voice/voice"] .actbtn { margin-top: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 24) 0; text-align: center; font-size: calc(var(--rpx) * 32); color: #4ecb8b; background: #0f2419; border-radius: calc(var(--rpx) * 10); } [data-route="pages/voice/voice"] .actbtn:first-child { margin-top: 0; } [data-route="pages/voice/voice"] .btn-main { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 30) 0; text-align: center; font-size: calc(var(--rpx) * 40); color: #ffffff; background: #07c160; border-radius: calc(var(--rpx) * 999); } [data-route="pages/voice/voice"] .btn-ghost { margin-top: calc(var(--rpx) * 16); padding: calc(var(--rpx) * 24) 0; text-align: center; font-size: calc(var(--rpx) * 32); color: #a9bde0; background: #171b22; border-radius: calc(var(--rpx) * 999); } [data-route="pages/voice/voice"] .btn-quiet { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 24) 0; text-align: center; font-size: calc(var(--rpx) * 28); color: #8c8c8c; background: #1a1a1a; border-radius: calc(var(--rpx) * 999); } [data-route="pages/voice/voice"] /* ---------- 收尾 / 例外 ---------- */ .card { background: #141414; border-radius: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 28) calc(var(--rpx) * 24); margin-top: calc(var(--rpx) * 24); } [data-route="pages/voice/voice"] .title { font-size: calc(var(--rpx) * 32); color: #f5f5f5; font-weight: 500; } [data-route="pages/voice/voice"] .body { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); color: #8c8c8c; line-height: 1.7; } [data-route="pages/voice/voice"] .muted { font-size: calc(var(--rpx) * 24); color: #8c8c8c; } [data-route="pages/voice/voice"] .report { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 28); color: #ededed; line-height: 1.8; } [data-route="pages/voice/voice"] .row { display: flex; gap: calc(var(--rpx) * 16); margin-top: calc(var(--rpx) * 24); } [data-route="pages/voice/voice"] /* 猫真的出不了声时才出字：这里是最后一格，平时空着 */ .silent { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24); background: #1a1a1a; border-radius: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 32); color: #f0f0f0; line-height: 1.8; } [data-route="pages/voice/voice"] .gap { margin-top: calc(var(--rpx) * 24); padding: calc(var(--rpx) * 16) calc(var(--rpx) * 20); background: #241d10; border-radius: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 24); color: #d8a850; line-height: 1.6; } [data-route="pages/voice/voice"] .foot { margin-top: calc(var(--rpx) * 28); text-align: center; } [data-route="pages/voice/voice"] .footlink { font-size: calc(var(--rpx) * 24); color: #6b6b6b; } [data-route="pages/voice/voice"] .footdot { margin: 0 calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #3a3a3a; } [data-route="pages/voice/voice"] .footnote { font-size: calc(var(--rpx) * 24); color: #3a3a3a; } [data-route="pages/voice/voice"] .err { margin-top: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #ff7b6b; line-height: 1.6; } [data-route="pages/voice/voice"] /* ------------------------------------------------ 镜头（看手和纸） * 木哥 2026-10-24 22:0x：「你的摄像头要能够看到学员的手部和作业纸的全部」。 * 放在右上角一小块：只是让孩子把手机架好时有个参照，不是让他盯着看。 * 半透明压暗、圆角、不描边 —— 屏上唯一亮的东西仍然是那只猫。 */ .cam { position: fixed; top: calc(var(--rpx) * 24); right: calc(var(--rpx) * 24); width: calc(var(--rpx) * 168); height: calc(var(--rpx) * 168); border-radius: calc(var(--rpx) * 24); overflow: hidden; opacity: 0.34; z-index: 5; } [data-route="pages/voice/voice"] .camnote { position: fixed; bottom: calc(var(--rpx) * 120); left: 0; right: 0; text-align: center; font-size: calc(var(--rpx) * 24); color: #6b6b6b; } [data-route="pages/voice/voice"] /* 开镜头时的常驻说明（合规 02 #6） */ .camline { text-align: center; font-size: calc(var(--rpx) * 24); color: rgba(0, 0, 0, 0.42); margin: calc(var(--rpx) * 8) 0 0; } /* ---- pages/msg/msg.wxss ---- */ [data-route="pages/msg/msg"] /* 消息 · tab 第 2 页（v4.86.533 起仿微信主页；v4.86.535 加平台通知行； v4.86.554 撤掉「木老师双身份」两栏 —— 客服就是墨灵猫，一页到底）—— 白底、头像圆角方、行高 104、灰分隔；字号只用五档（20/24/28/32/40） */ .page { min-height: calc(var(--vh) * 100); background: #f7f7f7; padding: 0 0 calc(var(--rpx) * 40); box-sizing: border-box; } [data-route="pages/msg/msg"] /* 顶栏 logo 行：直接用全局 .app-header（与打卡/我的完全一致，练字猫咪锁死，见 test-533）*/ .msg-loading { padding: calc(var(--rpx) * 60) calc(var(--rpx) * 32); text-align: center; font-size: calc(var(--rpx) * 28); color: #999999; } [data-route="pages/msg/msg"] /* 加载条（v4.86.533）：全站口径是「条」不是「正在…」文字（见 tools/test-loading297） */ .msg-loadbar { width: calc(var(--rpx) * 180); height: calc(var(--rpx) * 8); margin: 0 auto; border-radius: calc(var(--rpx) * 999); background: linear-gradient(90deg, #ededed, #dcdcdc, #ededed); } [data-route="pages/msg/msg"] .msg-group-label { font-size: calc(var(--rpx) * 24); color: #8a8a8a; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 32) calc(var(--rpx) * 8); } [data-route="pages/msg/msg"] .msg-list { background: #ffffff; border-radius: calc(var(--rpx) * 16); margin: 0 calc(var(--rpx) * 24); overflow: hidden; } [data-route="pages/msg/msg"] .msg-row { display: flex; align-items: center; padding: calc(var(--rpx) * 24) calc(var(--rpx) * 28); border-bottom: calc(var(--rpx) * 1) solid #f0f0f0; } [data-route="pages/msg/msg"] .msg-row:last-child { border-bottom: none; } [data-route="pages/msg/msg"] .msg-row-hover { background: #f2f2f2; } [data-route="pages/msg/msg"] /* v4.86.547（木哥令「其他都使用自己的头像，把我的页面的头像默认过来即可」）： 头像位从「名字首字 + 彩底」改成真头像图 —— 有对方头像就用对方的，没有就用 「我的」页那张默认猫头（logo-circle.png）。四种彩底（客服绿/老师蓝/同学橙/系统灰蓝） 随之撤掉：底色由图片自己给，缺图时这里兜一层浅灰，不闪白块。 */ .msg-avatar { width: calc(var(--rpx) * 92); height: calc(var(--rpx) * 92); border-radius: calc(var(--rpx) * 16); flex-shrink: 0; display: block; background: #f2f2f2; } [data-route="pages/msg/msg"] /* 平台通知（系统那条线）—— 发现页同款图标块：底色直接取发现页「提醒」那一格的天蓝 （本来画的就是同一枚铃铛），不抢客服的绿，也不再用原来那块灰蓝 */ .msg-sys-tile { background: #10aeff; } [data-route="pages/msg/msg"] /* v7.0.081（木哥令「管理员·信息反馈单独一条」）：管理员线的图标块 —— 暖橙底 + 白线对话气泡（.ico-gl-fb，app.wxss 全站一份）， 与平台通知的天蓝、客服的猫标各是一色，三行一眼分得清 */ .msg-fb-tile { background: #fa9d3b; } [data-route="pages/msg/msg"] .msg-main { flex: 1; min-width: 0; margin-left: calc(var(--rpx) * 24); } [data-route="pages/msg/msg"] .msg-row-top { display: flex; align-items: center; justify-content: space-between; } [data-route="pages/msg/msg"] .msg-row-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--rpx) * 8); } [data-route="pages/msg/msg"] .msg-name { font-size: calc(var(--rpx) * 32); font-weight: 600; color: #1a1a1a; } [data-route="pages/msg/msg"] .msg-desc { font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/msg/msg"] .msg-time { font-size: calc(var(--rpx) * 20); color: #b2b2b2; } [data-route="pages/msg/msg"] .msg-sub { font-size: calc(var(--rpx) * 24); color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(var(--rpx) * 480); } [data-route="pages/msg/msg"] .msg-badge { min-width: calc(var(--rpx) * 32); height: calc(var(--rpx) * 32); line-height: calc(var(--rpx) * 32); padding: 0 calc(var(--rpx) * 8); border-radius: calc(var(--rpx) * 999); background: #fa5151; color: #ffffff; font-size: calc(var(--rpx) * 20); text-align: center; box-sizing: border-box; } [data-route="pages/msg/msg"] .msg-arrow { font-size: calc(var(--rpx) * 32); color: #c8c8c8; margin-left: calc(var(--rpx) * 12); } [data-route="pages/msg/msg"] .msg-empty { margin: calc(var(--rpx) * 40) calc(var(--rpx) * 24); padding: calc(var(--rpx) * 40) calc(var(--rpx) * 32); background: #ffffff; border-radius: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 24); color: #999999; line-height: 1.7; } [data-route="pages/msg/msg"] /* v7.0.089（木哥令「好友列表式大栏目」）：栏目全空时的提示行 */ .msg-empty { padding: calc(var(--rpx) * 28) calc(var(--rpx) * 30); color: #9a9a9a; font-size: calc(var(--rpx) * 24); } [data-route="pages/msg/msg"] /* ---- v7.0.177（木哥令，附微信截图两张）：左拉控制件 —— 蓝标未读/已读 · 橙不显示 · 红删除，仿微信主页同款。三颗钮绝对定位垫底，行 transform 拉开 calc(var(--rpx) * 390) 露出来； 竖滑不抢（手势判定在 js），transition 只挂 transform 不卡滚动。 ---- */ .msg-swipe { position: relative; overflow: hidden; } [data-route="pages/msg/msg"] .msg-swipe-acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; } [data-route="pages/msg/msg"] .msg-act { width: calc(var(--rpx) * 130); height: 100%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: calc(var(--rpx) * 24); font-weight: 600; } [data-route="pages/msg/msg"] .msg-act-read { background: #576b95; } [data-route="pages/msg/msg"] .msg-act-hide { background: #e6a23c; } [data-route="pages/msg/msg"] .msg-act-del { background: #fa5151; } [data-route="pages/msg/msg"] .msg-swipe-row { position: relative; background: #ffffff; transition: transform 0.2s ease; } [data-route="pages/msg/msg"] .msg-swiped { transform: translateX(calc(var(--rpx) * -390)); } /* ---- pages/msgchat/msgchat.wxss ---- */ [data-route="pages/msgchat/msgchat"] /* 聊天页（v4.86.537 微信化）—— 灰底 #ededed、时间居中灰字、头像贴气泡外侧（calc(var(--rpx) * 80) 圆角方）、 左白右绿气泡（带小三角）、底部输入条 + 表情/加号面板、语音/图片/位置/红包/转账卡。 字号只用五档：20 / 24 / 28 / 32 / 40（lint-style 硬口径）。 */ page { height: 100%; } [data-route="pages/msgchat/msgchat"] .mc-page { height: calc(var(--vh) * 100); display: flex; flex-direction: column; background: #ededed; box-sizing: border-box; } [data-route="pages/msgchat/msgchat"] .mc-flow { flex: 1; min-height: 0; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 24) 0; box-sizing: border-box; } [data-route="pages/msgchat/msgchat"] .mc-tip { text-align: center; padding: calc(var(--rpx) * 60) 0; font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/msgchat/msgchat"] /* v4.86.549：点评页认单失败的退路（改用微信客服说），样式与旧点评页同款 */ .mc-tip-go { margin-top: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 28); color: #8a6320; } [data-route="pages/msgchat/msgchat"] .mc-loadbar { width: calc(var(--rpx) * 180); height: calc(var(--rpx) * 8); margin: 0 auto; border-radius: calc(var(--rpx) * 999); background: linear-gradient(90deg, #d9d9d9, #f0f0f0, #d9d9d9); animation: mc-load 1.1s linear infinite; } @keyframes mc-load { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } [data-route="pages/msgchat/msgchat"] /* 时间条：居中、灰、无气泡（微信口径） */ .mc-bar-time { text-align: center; margin: calc(var(--rpx) * 24) 0 calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #999999; } [data-route="pages/msgchat/msgchat"] /* 一行消息：头像 + 气泡，顶对齐 */ .mc-line { display: flex; align-items: flex-start; margin-bottom: calc(var(--rpx) * 24); } [data-route="pages/msgchat/msgchat"] .mc-line-mine { /* 自己的行：内容在前、头像在后（微信口径）—— 不能用 row-reverse， 那会把头像排到气泡左边去（木哥 2026-10-26 20:1x 截图点名的那处） */ flex-direction: row; justify-content: flex-end; } [data-route="pages/msgchat/msgchat"] /* 头像：微信是圆角方（不是正圆） */ .mc-ava { flex-shrink: 0; width: calc(var(--rpx) * 80); height: calc(var(--rpx) * 80); line-height: calc(var(--rpx) * 80); border-radius: calc(var(--rpx) * 8); background: #5b7ea8; color: #ffffff; font-size: calc(var(--rpx) * 32); text-align: center; overflow: hidden; } [data-route="pages/msgchat/msgchat"] .mc-ava-mine { background: #07c160; } [data-route="pages/msgchat/msgchat"] /* 头像可点（v4.86.578：任何一条会话都能点进对方的个人主页），给一点按压反馈 */ .mc-ava-tap:active { opacity: 0.7; } [data-route="pages/msgchat/msgchat"] /* 发失败的红点（v4.86.578）：点一下重发 */ .mc-fail { flex-shrink: 0; width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); line-height: calc(var(--rpx) * 36); margin: 0 calc(var(--rpx) * 4); border-radius: 50%; background: #fa5151; color: #ffffff; font-size: calc(var(--rpx) * 24); text-align: center; } [data-route="pages/msgchat/msgchat"] /* 发送中的气泡：淡一点，落定后回正（不是转圈，等也不耽误接着说） */ .mc-bubble-pending { opacity: 0.65; } [data-route="pages/msgchat/msgchat"] /* 两态常挂只切显隐（v4.86.578）：按住说话 / 输入框共用这一条 */ .mc-hide { display: none; } [data-route="pages/msgchat/msgchat"] /* 气泡 */ .mc-bubble { position: relative; max-width: 62%; margin: 0 calc(var(--rpx) * 16); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 22); border-radius: calc(var(--rpx) * 8); background: #ffffff; box-sizing: border-box; } [data-route="pages/msgchat/msgchat"] /* 小三角：微信那个尖，用边框拼 */ .mc-bubble::after { content: ''; position: absolute; top: calc(var(--rpx) * 26); left: calc(var(--rpx) * -10); width: 0; height: 0; border-top: calc(var(--rpx) * 10) solid transparent; border-bottom: calc(var(--rpx) * 10) solid transparent; border-right: calc(var(--rpx) * 10) solid #ffffff; } [data-route="pages/msgchat/msgchat"] .mc-bubble-mine { background: #95ec69; } [data-route="pages/msgchat/msgchat"] .mc-bubble-mine::after { left: auto; right: calc(var(--rpx) * -10); border-right: 0; border-left: calc(var(--rpx) * 10) solid #95ec69; } [data-route="pages/msgchat/msgchat"] .mc-text { font-size: calc(var(--rpx) * 32); line-height: 1.45; color: #111111; word-break: break-all; } [data-route="pages/msgchat/msgchat"] .mc-who { display: block; margin-bottom: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 20); color: #999999; } [data-route="pages/msgchat/msgchat"] /* 图片气泡 */ .mc-img { max-width: calc(var(--rpx) * 400); margin: 0 calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 8); /* v7.0.199（木哥令「交流时一直有一个闪屏」）：图还没解码时给一块占位浅底 + 最小高度， 解码完成不再把下面整排消息推下去 —— 列表不再一屏一屏地跳 */ background: #f2f3f5; min-height: calc(var(--rpx) * 120); } [data-route="pages/msgchat/msgchat"] /* 语音气泡：宽度按时长（js 算），点一下播 */ .mc-voice { display: flex; align-items: center; justify-content: flex-start; height: calc(var(--rpx) * 72); margin: 0 calc(var(--rpx) * 16); padding: 0 calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 8); background: #ffffff; box-sizing: border-box; } [data-route="pages/msgchat/msgchat"] .mc-voice-mine { background: #95ec69; justify-content: flex-end; } [data-route="pages/msgchat/msgchat"] .mc-voice-on { opacity: 0.75; } [data-route="pages/msgchat/msgchat"] .mc-voice-wave { font-size: calc(var(--rpx) * 24); color: #333333; } [data-route="pages/msgchat/msgchat"] .mc-voice-dur { margin-left: calc(var(--rpx) * 12); font-size: calc(var(--rpx) * 24); color: #666666; } [data-route="pages/msgchat/msgchat"] .mc-voice-mine .mc-voice-dur { margin-left: 0; margin-right: calc(var(--rpx) * 12); } [data-route="pages/msgchat/msgchat"] /* 卡片（位置 / 红包 / 转账） */ .mc-card { width: calc(var(--rpx) * 420); margin: 0 calc(var(--rpx) * 16); padding: calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 10); background: #ffffff; box-sizing: border-box; } [data-route="pages/msgchat/msgchat"] .mc-card-t { font-size: calc(var(--rpx) * 32); color: #111111; } [data-route="pages/msgchat/msgchat"] .mc-card-s { margin-top: calc(var(--rpx) * 6); font-size: calc(var(--rpx) * 24); color: #888888; } [data-route="pages/msgchat/msgchat"] .mc-card-f { margin-top: calc(var(--rpx) * 12); padding-top: calc(var(--rpx) * 10); border-top: calc(var(--rpx) * 1) solid #f0f0f0; font-size: calc(var(--rpx) * 20); color: #999999; } [data-route="pages/msgchat/msgchat"] /* 位置卡 */ .mc-loc { border: calc(var(--rpx) * 1) solid #e6e6e6; } [data-route="pages/msgchat/msgchat"] /* v4.86.579 聊天视频：深底 + 播放键（点开全屏播，页面里不挂