/* 内置品牌字体：阿里妈妈方圆体（可变字体，wght 200~700） */ @font-face { font-family: "FangYuanTi"; src: url("https://cdn.uileo.com/assets/fonts/AlimamaFangYuanTiVF.ttf") format("truetype-variations"); font-weight: 200 700; font-display: swap; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } /* 输入类控件仍需可选中/可编辑，单独放开 */ input, textarea, [contenteditable="true"], [contenteditable=""] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } html, body { margin: 0; height: 100%; font-family: "FangYuanTi", -apple-system, "PingFang SC", sans-serif; overflow: hidden; } /* 固定设计基准 1280×800，整体等比缩放适配实际窗口； #viewport 带 transform → 内部 position:fixed 面板以它为包含块，无需逐个改 */ body { background: #000; } /* 全局统一自定义光标：所有元素（含按钮/输入框/可点击区）都用同一个，!important 防止被局部样式覆盖回系统光标。 热点设在 2 2（箭头尖端）；不支持 url 光标时回退 auto。 */ *, *::before, *::after { cursor: url("https://cdn.uileo.com/assets/cursor.png") 2 2, auto !important; } /* video 及其 Shadow DOM 媒体控件层不受普通 * 选择器约束，单独覆盖， 否则鼠标移到开场视频上会退回系统默认光标 */ video, video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-enclosure { cursor: url("https://cdn.uileo.com/assets/cursor.png") 2 2, auto !important; } #viewport { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; overflow: hidden; transform-origin: top left; } /* 全局点击反馈：可点击元素按下时整体缩到 96%、带过渡弹回。 已有自定义 :active（translateY / 背景态 / 拖拽态）的元素不在此列，避免冲突。 */ button:active, .chip:active, .swatch:active, .scene-card:active, .kid-card:active, .pick-card:active { transform: scale(.96); } button, .chip, .swatch, .scene-card, .kid-card, .pick-card, .entry, .pa, .home-user, .flow-btn, .pc-btn, .mr-opt, .fp-opt, .q-card, .q-row, .q-gender-btn { transition: transform .08s ease; } #app { display: none; height: 800px; } #app.show { display: flex; } /* 左侧场景列表 */ #scenes { width: 220px; flex: none; background: #1f2a44; color: #fff; padding: 18px; overflow-y: auto; } #scenes h2 { font-size: 22px; margin: 0 0 14px; } .scene-card { padding: 16px; margin-bottom: 14px; border-radius: 14px; background: #2e3c5e; cursor: pointer; transition: .15s; } .scene-card.active { background: #4a7bff; } .scene-card .name { font-size: 20px; font-weight: 600; } .scene-card .task { font-size: 14px; opacity: .8; margin-top: 5px; line-height: 1.4; } /* 中间画布 */ #stage { flex: 1; position: relative; background: #cfe8ff; overflow: hidden; } #bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #canvas { position: absolute; inset: 0; } .item { position: absolute; width: 130px; height: 130px; cursor: grab; touch-action: none; user-select: none; transform-origin: center center; } /* 选中虚线框：用独立子元素 .sel-frame，通过反向缩放抵消 .item 的 scale， 使虚线粗细/间距不随素材放大而变粗变大（保持视觉恒定）。 */ .item .sel-frame { position: absolute; inset: -6px; border: 2px dashed #ffd23f; border-radius: 12px; display: none; pointer-events: none; z-index: 9; transform-origin: center center; } .item.selected .sel-frame { display: block; } .item.scaling .sel-frame { border-color: #ffec8a; } .item.scaling { filter: drop-shadow(0 0 6px rgba(255,210,63,.55)); } .item svg { width: 100%; height: 100%; pointer-events: none; } /* PC 端变换手柄：四角缩放 + 顶部旋转。仅非触摸端(body.pc)且选中时显示。 手柄是 .item 的子元素，会随 .item 的 transform(scale/rotate) 一起变换—— 用 counter-scale 抵消缩放，保证手柄视觉大小恒定、且仍贴在四角。 */ .item .xf-handle { position: absolute; display: none; z-index: 10; pointer-events: auto; transform-origin: center center; } body.pc .item.selected .xf-handle { display: block; } /* 手柄外扩透明热区：用 ::before 撑大可点范围，视觉圆点不变 */ .item .xf-corner::before, .item .xf-rotate::before { content: ""; position: absolute; inset: -14px; } .item .xf-corner { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 2px solid #ffb13f; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .item .xf-corner.tl { top: 0; left: 0; cursor: nwse-resize; } .item .xf-corner.tr { top: 0; left: 100%; cursor: nesw-resize; } .item .xf-corner.bl { top: 100%; left: 0; cursor: nesw-resize; } .item .xf-corner.br { top: 100%; left: 100%; cursor: nwse-resize; } .item .xf-rotate { top: -40px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; border: 2px solid #ffb13f; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: grab; } .item .xf-rotate-stem { top: -26px; left: 50%; width: 2px; height: 26px; margin-left: -1px; background: #5ad15a; } /* 底部 / 右侧操作 —— 小度横屏触摸：大按钮大字、无 hover 依赖 */ #toolbar { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: rgba(255,255,255,.94); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } #toolbar input[type=text] { flex: 1; min-width: 200px; font-size: 20px; padding: 14px 16px; border: 2px solid #c3d0e8; border-radius: 14px; } button { font-size: 19px; padding: 14px 22px; border: none; border-radius: 14px; background: #4a7bff; color: #fff; cursor: pointer; min-height: 52px; } button.ghost { background: #e8eefc; color: #2e3c5e; } button:active { filter: brightness(0.92); } /* 语音按钮是唯一主操作：醒目、大。三态在下方 on-duer 与通用样式里 */ #hintPinch { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.5); color:#fff; padding: 6px 16px; border-radius: 16px; font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; } #hintPinch.show { opacity: 1; } /* 拖拽放下后的「摆好了」确认按钮：拖拽中 UI 隐藏，松手浮出此按钮，点它才恢复全部 UI。 z-index 高于素材(.item z 默认低)，保证隐藏 UI 期间仍可见可点。 */ #dropConfirm { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: none; z-index: 20; padding: 16px 44px; border: none; border-radius: 26px; background: linear-gradient(90deg, #feba26, #fe8426); color: #fff; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .04em; cursor: pointer; box-shadow: inset 0 3px 0 #ffd400, 0 6px 18px rgba(254,132,38,.45), inset 0 -6px 0 #ff7b00; } #dropConfirm.show { display: flex; align-items: center; justify-content: center; } #dropConfirm:active { transform: translateX(-50%) scale(.96); } /* 小度真机：靠语音驱动，隐藏调试输入框与发送，居中放大语音按钮 */ body.on-duer #textInput, body.on-duer #addBtn { display: none; } body.on-duer #toolbar { justify-content: center; } #tip { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; padding: 10px 20px; border-radius: 22px; font-size: 17px; opacity: 0; transition: .2s; pointer-events: none; max-width: 80%; } #tip.show { opacity: 1; } /* ===== 创作页 Frame85 玩法外壳：卷轴标题 + 木牌头像 + 右上三按钮 + 左下IP鹦鹉气泡 + 底部推荐卡 ===== */ /* 木牌用户头像（左上 top23/left19，244.4×120） */ #playUser { position: absolute; top: 23px; left: 19px; width: 244px; height: 120px; z-index: 6; background: url("https://cdn.uileo.com/assets/play/playcard.webp") no-repeat center / contain; display: flex; align-items: center; } #playUser .pu-avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; margin-left: 38px; } #playUser .pu-name { margin-left: 14px; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 22px; color: #f8e8cb; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 顶部卷轴场景标题（top24/left488，304.8×117.6） */ #playTitle { position: absolute; top: 25px; left: 488px; width: 305px; height: 118px; z-index: 6; background: url("https://cdn.uileo.com/assets/play/scroll.webp") no-repeat center / contain; display: flex; align-items: center; justify-content: center; } #playTitle span { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; color: #53230c; letter-spacing: .04em; padding-bottom: 6px; } /* 右上按钮竖排（首页/设置 + 底部隐藏界面眼睛），90×90，间距 11。 顶部留一个占位空格：原眼睛位置空出来给小度系统退出按钮让位 */ #playActions { position: absolute; top: 23px; right: 23px; z-index: 6; display: flex; flex-direction: column; gap: 11px; } #playActions .pa { width: 90px; height: 90px; cursor: pointer; -webkit-user-drag: none; } #playActions .pa:active { transform: scale(.94); } #playActions .pa-spacer { pointer-events: none; cursor: default; } /* 隐藏界面态：除「眼睛」按钮外，所有 UI 浮层淡出隐藏，露出全场景。再点眼睛恢复 */ #stage.ui-hidden #playUser, #stage.ui-hidden #playTitle, #stage.ui-hidden #playParrot, #stage.ui-hidden #playBubble, #stage.ui-hidden #playShelf, #stage.ui-hidden #recBar, #stage.ui-hidden #playHome, #stage.ui-hidden #playSave { opacity: 0; pointer-events: none; transition: opacity .25s ease; } /* 卡片显式设了 pointer-events:auto，会盖过父级 #recBar 的 none； UI 隐藏 / 拖拽摆放态下必须把卡片本身也强制设为 none，否则隐藏 UI 后卡片仍可拖。 */ #stage.ui-hidden #recBar .rec-card, #stage.dragging-card #recBar .rec-card { pointer-events: none; } #stage #playUser, #stage #playTitle, #stage #playParrot, #stage #playBubble, #stage #playShelf, #stage #recBar, #stage #playHome, #stage #playSave { transition: opacity .25s ease; } /* 左下 IP 鹦鹉 + 对话气泡。鹦鹉=语音入口，可点击；点击/监听态有缩放反馈 */ #playParrot { position: absolute; top: 358px; left: 14px; width: 410px; height: 410px; z-index: 5; cursor: pointer; -webkit-user-drag: none; transform-origin: 50% 90%; transition: transform .15s ease; } #playParrot:active { transform: scale(.94); } /* 麦克风选择下拉（PC 端，鹦鹉下方）：仅在有多个真实设备时由 JS 显示 */ #micPicker { position: absolute; top: 772px; left: 14px; width: 410px; max-width: 410px; z-index: 6; height: 30px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(141,80,42,.5); background: rgba(255,255,255,.88); color: #6b4a2a; font-size: 13px; font-family: inherit; cursor: pointer; } /* 监听中：持续轻微呼吸缩放，提示"我在听" */ #playParrot.listening { animation: parrotListen 1s ease-in-out infinite; } @keyframes parrotListen { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* 气泡：原用整图背景，文案变长会被纵向拉伸导致圆角/尾巴变形。 改为「CSS 圆角矩形主体（高度随文案自适应）+ 独立 SVG 尾巴（固定尺寸不拉伸）」。 设计稿 Group6：底 #F8E8CB / 描边 #815636 / 顶部内阴影。 */ #playBubble { position: absolute; bottom: 293px; left: 246px; width: 319px; min-height: 135px; z-index: 5; background: #f8e8cb; border: 2px solid #815636; border-radius: 45px; box-shadow: inset 4px -7px 0 0 #d3af8f; display: flex; align-items: center; justify-content: flex-start; padding: 20px 33px 22px; box-sizing: border-box; } /* 左下尾巴：用设计稿抠出的原始 SVG 路径，固定尺寸贴在气泡左下角外侧， 气泡高度变化时不变形。顶边与气泡底边重叠几像素，遮住描边接缝连成一体 */ #playBubble .bubble-tail { position: absolute; left: 40px; bottom: -27px; width: 68px; height: 27px; pointer-events: none; display: block; } /* 文案严格按设计稿：24px 方圆体 #713e18，允许换行，气泡随文字纵向自适应不溢出 */ #playBubble span { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.35; color: #713e18; width: 100%; text-align: left; word-break: break-word; overflow-wrap: anywhere; } /* 底部素材推荐栏：木架 + 一排 4 张卡（拖拽源）。卡片按设计稿 Frame87 坐标： 卡 156×181，top547；4 张 left 389/585/781/977（间距 196=卡宽156+gap40） */ #playShelf { position: absolute; left: 0; bottom: 0; width: 1280px; height: 200px; z-index: 3; pointer-events: none; -webkit-user-drag: none; } #recBar { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; z-index: 4; pointer-events: none; } #recBar .rec-card { position: absolute; top: 547px; width: 156px; height: 181px; cursor: grab; pointer-events: auto; touch-action: none; -webkit-user-drag: none; transition: transform .12s; } #recBar .rec-card:nth-child(1) { left: 389px; } #recBar .rec-card:nth-child(2) { left: 585px; } #recBar .rec-card:nth-child(3) { left: 781px; } #recBar .rec-card:nth-child(4) { left: 977px; } #recBar .rec-card:active { transform: scale(.96); cursor: grabbing; } /* 首次出卡片时，第一张卡上下跳动若干秒引导拖拽（.rec-hint-bounce 由 JS 加，几秒后移除） */ @keyframes recCardBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } #recBar .rec-card.rec-hint-bounce { animation: recCardBounce 0.9s ease-in-out infinite; } /* 拖拽（卡片 / 画布素材）时隐藏下方 UI（IP鹦鹉/气泡/卡片栏/装饰木板），露出场景方便放置。 松手后【不】自动恢复，而是浮出 #dropConfirm「摆好了」按钮，点它才恢复（见 commitDropConfirm）。 注意：被拖动的卡是 body 上的 ghost 克隆，不在 #recBar 内，所以隐藏卡片栏不影响拖拽预览 */ #stage.dragging-card #playParrot, #stage.dragging-card #playBubble, #stage.dragging-card #recBar, #stage.dragging-card #playShelf { opacity: 0; pointer-events: none; transition: opacity .15s ease; } /* 拖拽态：顶部卷轴标题换成「删除按钮」（木色），素材拖到其上方时变红色（.delete-armed）。 标题文字隐藏，背景图换成删除按钮图。松手在其上即删除（见 makeDraggable / bindRecCardDrag）。 删除按钮比卷轴标题略小，居中显示。 */ #stage.dragging-card #playTitle { background-image: url("https://cdn.uileo.com/assets/play/delete-btn-wood.webp"); background-size: 200px auto; } #stage.dragging-card #playTitle.delete-armed { background-image: url("https://cdn.uileo.com/assets/play/delete-btn-red.webp"); background-size: 212px auto; } #stage.dragging-card #playTitle span { opacity: 0; } #playTitle { transition: transform .12s ease; } /* PC 端语音字幕条：位于地图名称卷轴正下方，木质暖色风（米黄底+棕描边），居中。 默认隐藏；仅非小度端(body.pc)且有内容时显示。小度端不展示。 */ #speechCaption { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: 620px; min-width: 200px; display: none; background: linear-gradient(180deg,#fff9ee,#fdeecb); border: 3px solid #d3af8f; border-radius: 22px; box-shadow: 0 6px 18px rgba(120,70,30,.22), inset 0 -5px 0 0 rgba(211,175,143,.5); padding: 12px 26px; box-sizing: border-box; } #speechCaption.show { display: block; } #speechCaption #speechCaptionText { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 22px; color: #53230c; letter-spacing: .03em; text-align: center; line-height: 1.4; white-space: normal; word-break: break-word; display: block; } /* 录音中：字幕条左侧加一个跳动的小麦克风状态点 */ #speechCaption.listening #speechCaptionText::before { content: "🎙 "; } #stage #playParrot, #stage #playBubble, #stage #recBar, #stage #playShelf { transition: opacity .15s ease; } #recBar .rec-card .rc-base { position: absolute; inset: 0; border-radius: 24px; border: 1px solid rgba(141,80,42,1); box-shadow: inset 0 -6px 0 0 rgba(227,174,121,1); background: rgba(253,237,204,1); } #recBar .rec-card .rc-thumb { position: absolute; top: 12px; left: 11px; width: 134px; height: 115px; border-radius: 24px; background: rgba(230,195,153,1); overflow: hidden; display: flex; align-items: center; justify-content: center; } #recBar .rec-card .rc-thumb img { width: 115px; height: 115px; object-fit: contain; pointer-events: none; } #recBar .rec-card .rc-thumb svg { width: 100px; height: 100px; pointer-events: none; } #recBar .rec-card .rc-name { position: absolute; top: 136px; left: 16px; width: 124px; text-align: center; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 22px; color: rgba(171,93,46,1); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 创作页：调试 toolbar 在真机隐藏（语音入口已是点击 IP 鹦鹉）。 */ /* 调试输入框：默认任何端都隐藏，避免出现在正式界面（语音/点鹦鹉是唯一入口）。 仅当 body 带 .debug（URL ?debug=1）时显示，方便 PC 调试。 */ #toolbar { display: none; } body.debug #toolbar { display: flex; } body.play-mode #toolbar { background: transparent; justify-content: center; bottom: auto; top: 712px; pointer-events: none; } body.on-duer.play-mode #toolbar { display: none; } body.play-mode #tip { top: 150px; } .item-tools { position: absolute; display: none; gap: 8px; } .item-tools.show { display: flex; } .swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; } /* ===== 完成创作流程：完成页 → 收藏页 → 报告页（木质卡通风，弹窗，线性无分叉）===== */ /* 加载态：与流程页一致——蒙层 + 居中弹窗（不再全屏铺底），作品画面透出来当背景 */ #flowLoading { position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; } #flowLoading.show { display: flex; } #flowLoading .fl-mask { position: absolute; inset: 0; background: rgba(40,24,8,.42); } #flowLoading .fl-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 420px; max-width: 86%; padding: 40px 36px; background: linear-gradient(180deg,#fff9ee,#fdeecb); border: 4px solid #d3af8f; border-radius: 32px; box-shadow: 0 12px 40px rgba(120,70,30,.28), inset 0 -8px 0 0 rgba(211,175,143,.5); } #flowLoading .fl-ip { width: 150px; height: 150px; animation: flBreath 1.1s ease-in-out infinite; } @keyframes flBreath { 0%,100% { transform: scale(1) } 50% { transform: scale(1.08) } } #flowLoading .fl-text { margin-top: 16px; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 24px; color: #a05a1e; letter-spacing: .04em; } #flowLoading .fl-dots { margin-top: 8px; font-size: 28px; color: #feba26; letter-spacing: 6px; animation: flDots 1.2s steps(4) infinite; width: 0; overflow: hidden; } @keyframes flDots { to { width: 56px } } /* 流程弹窗：叠在游戏页之上，作品画面透过蒙层透出来当背景（不再用整图背景） */ .flow-screen { position: fixed; inset: 0; z-index: 310; display: none; align-items: center; justify-content: center; } .flow-screen.show { display: flex; } /* 暖色半透明蒙层：既能看见底下作品，又保证弹窗文字清晰；拦截底层画布交互 */ .flow-screen .fs-mask { position: absolute; inset: 0; background: rgba(40,24,8,.42); } /* 木质大卡片 */ .flow-card { position: relative; z-index: 2; width: 1000px; max-width: 94%; height: 760px; max-height: 96vh; overflow: hidden; background: linear-gradient(180deg,#fff9ee,#fdeecb); border: 4px solid #d3af8f; border-radius: 32px; box-shadow: 0 12px 40px rgba(120,70,30,.28), inset 0 -8px 0 0 rgba(211,175,143,.5); padding: 44px 56px 28px; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; } /* 内容区：可滚动、占满剩余空间，从顶部开始（不居中，保证能滚回顶端） */ .flow-card .fc-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .flow-card .fc-badge { font-size: 38px; line-height: 1; margin-bottom: 6px; } .flow-card h2 { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 34px; color: #53230c; margin: 6px 0 4px; letter-spacing: .04em; } .flow-card .fc-title { font-size: 30px; color: #a05a1e; margin: 0 0 14px; font-weight: 700; font-family: 'Alimama FangYuanTi VF', sans-serif; } .flow-card .fc-story { font-size: 18px; line-height: 1.7; color: #6b4a2a; text-align: left; background: rgba(255,255,255,.55); border-radius: 18px; padding: 16px 20px; margin: 0 0 18px; } .flow-card .fc-sub { font-size: 18px; color: #8a5a2a; margin: 0 0 16px; font-weight: 600; font-family: 'Alimama FangYuanTi VF', sans-serif; } /* 按钮组 */ .flow-actions { display: flex; gap: 16px; justify-content: center; margin-top: 16px; flex: 0 0 auto; padding-top: 8px; } .flow-btn { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 22px; padding: 16px 36px; border: none; border-radius: 22px; cursor: pointer; letter-spacing: .04em; box-shadow: 0 5px 0 0 rgba(0,0,0,.12); transition: transform .1s; } .flow-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 0 rgba(0,0,0,.12); } .flow-btn.primary { background: linear-gradient(90deg,#feba26,#fe8426); color: #fff; } .flow-btn.ghost { background: rgba(255,255,255,.85); color: #a05a1e; border: 2px solid #e6c399; } /* 首页通用弹窗（成长报告/家长中心/藏宝世界/查看作品）：沿用游戏结束弹窗的木质暖色风 */ #modal .modal-mask { position: absolute; inset: 0; background: rgba(40,24,8,.42); } #modal .modal-card { position: relative; z-index: 2; width: 1000px; max-width: 94%; height: 760px; max-height: 96vh; overflow: hidden; background: linear-gradient(180deg,#fff9ee,#fdeecb); border: 4px solid #d3af8f; border-radius: 32px; box-shadow: 0 12px 40px rgba(120,70,30,.28), inset 0 -8px 0 0 rgba(211,175,143,.5); padding: 44px 56px 36px; box-sizing: border-box; display: flex; flex-direction: column; } /* 内容区可滚动，按钮区固定贴底 */ #modal #modalBody { flex: 1 1 auto; overflow-y: auto; min-height: 0; } #modal .modal-actions { flex: 0 0 auto; display: flex; gap: 16px; justify-content: center; margin-top: 22px; } /* 弹窗内通用排版：标题/列表沿用木质色系，覆盖旧的蓝灰内联色 */ #modalBody h2 { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; color: #53230c; margin: 0 0 16px; text-align: center; letter-spacing: .04em; } #modalBody h3 { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 20px; color: #a05a1e; margin: 14px 0 8px; } #modalBody p, #modalBody li { color: #6b4a2a; } /* 列表项卡片（作品集/藏宝）统一木质卡：米白底 + 棕描边 */ #modalBody .m-item { background: rgba(255,255,255,.6); border: 2px solid #e6c399; border-radius: 16px; padding: 14px 18px; margin-bottom: 12px; cursor: pointer; transition: transform .1s, background .15s; } #modalBody .m-item:active { transform: scale(.98); } #modalBody .m-item .m-t { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 19px; color: #53230c; } #modalBody .m-item .m-sub { font-size: 14px; color: #a98864; margin-top: 4px; } /* 藏宝素材小卡：木质暖色 */ #modalBody .m-treasure { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } #modalBody .m-treasure .m-chip { width: 132px; padding: 14px 10px; border: 2px solid #f0d8b4; border-radius: 16px; background: #fff7ec; font-family: 'Alimama FangYuanTi VF', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s, border-color .12s, box-shadow .12s; } #modalBody .m-treasure .m-chip.picked { border-color: #fe8426; box-shadow: 0 0 0 3px rgba(254,132,38,.25); transform: scale(1.04); } /* 藏宝卡：展示真实素材图，居中 */ #modalBody .m-treasure .tr-thumb { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; } #modalBody .m-treasure .tr-thumb img { max-width: 92px; max-height: 92px; width: auto; height: auto; object-fit: contain; display: block; } #modalBody .m-treasure .tr-thumb .tr-emoji { font-size: 40px; line-height: 1; } #modalBody .m-treasure .tr-name { margin-top: 6px; font-weight: 700; font-size: 15px; color: #7a4a00; text-align: center; } #modalBody .m-empty { color: #a98864; text-align: center; padding: 24px 0; font-size: 18px; } /* ===== 成长报告全屏静态页（设计稿 Frame 107，1280×800 基准）===== */ #growthReport { position: absolute; inset: 0; z-index: 200; display: none; background: #ffead5; overflow: hidden; } #growthReport.show { display: block; } #growthReport .gr-back { position: absolute; top: 50px; left: 33px; width: 96.4px; height: 66.4px; border: none; border-radius: 54px; background: rgba(129,86,54,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; } #growthReport .gr-back .gr-back-ic { width: 36.23px; height: 32.18px; display: block; } #growthReport .gr-back:active { background: rgba(129,86,54,0.18); } #growthReport .gr-head { position: absolute; top: 50px; left: 159px; height: 66px; display: flex; align-items: center; } #growthReport .gr-title { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; color: #713e18; letter-spacing: .04em; line-height: 1; } #growthReport .gr-sub { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; color: #713e18; letter-spacing: .04em; line-height: 1; margin-left: 114px; white-space: nowrap; } #growthReport .gr-board { position: absolute; top: 165px; left: 81px; width: 1118px; height: 608px; box-sizing: border-box; border: 4px solid #815636; border-radius: 27px; box-shadow: inset 0 -16px 0 0 rgba(129,86,54,0.2); background: #ffdfbc; padding: 30px 36px; } #growthReport .gr-row { display: flex; gap: 19px; } #growthReport .gr-card { background: #fcf4ea; border-radius: 21px; box-sizing: border-box; } #growthReport .gr-card-h { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .04em; } #growthReport .gr-radar { width: 332px; padding: 20px 22px; } #growthReport .gr-radar img { width: 259px; height: auto; display: block; margin: 14px auto 0; } #growthReport .gr-key { flex: 1; padding: 16px 22px; } #growthReport .gr-key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 12px; } #growthReport .gr-kitem { display: flex; gap: 8px; border-radius: 14px; padding: 11px; box-sizing: border-box; } #growthReport .gr-kitem img { width: 54px; height: 54px; flex: 0 0 54px; } #growthReport .gr-kt { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 5px; letter-spacing: .04em; } #growthReport .gr-kd { font-size: 14px; color: #000; line-height: 1.35; } #growthReport .gr-advice { margin-top: 19px; padding: 16px 22px; } #growthReport .gr-adv-row { display: flex; gap: 40px; margin-top: 12px; } #growthReport .gr-adv { flex: 1; display: flex; gap: 14px; align-items: center; } #growthReport .gr-adv-ic { width: 45px; height: 45px; flex: 0 0 45px; border-radius: 15px; display: flex; align-items: center; justify-content: center; } #growthReport .gr-adv-ic img { width: 37px; height: 37px; } #growthReport .gr-adv-t { font-size: 14px; color: #000; line-height: 1.4; } #growthReport .gr-summary { font-size: 14px; color: #724199; margin-top: 9px; } /* ===== 查看作品全屏静态页（设计稿 Frame 108，1280×800 基准）===== */ #worksGallery { position: absolute; inset: 0; z-index: 200; display: none; background: #ffead5; overflow: hidden; } #worksGallery.show { display: block; } #worksGallery .gr-back { position: absolute; top: 53px; left: 33px; width: 96.4px; height: 66.4px; border: none; border-radius: 54px; background: rgba(129,86,54,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; } #worksGallery .gr-back .gr-back-ic { width: 36.23px; height: 32.18px; display: block; } #worksGallery .gr-back:active { background: rgba(129,86,54,0.18); } #worksGallery .wg-head { position: absolute; top: 69px; left: 159px; height: 30px; display: flex; align-items: center; } #worksGallery .wg-title { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; color: #713e18; letter-spacing: .04em; line-height: 1; white-space: nowrap; } #worksGallery .wg-sub { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; color: #713e18; letter-spacing: .04em; line-height: 1; margin-left: 248px; white-space: nowrap; } #worksGallery .wg-grid { position: absolute; top: 160px; left: 79px; width: 1120px; display: grid; grid-template-columns: repeat(3, 349.33px); gap: 24px 36px; } #worksGallery .wg-item { width: 349.33px; height: 295.8px; box-sizing: border-box; border: 4px solid #815636; border-radius: 27px; box-shadow: inset 0 -16px 0 0 rgba(129,86,54,0.2); background: #ffdfbc; padding: 20px 20px 30px; display: flex; flex-direction: column; } #worksGallery .wg-thumb { width: 309.33px; height: 172.8px; border-radius: 20px; overflow: hidden; background: #fff; margin-bottom: 10px; } #worksGallery .wg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #worksGallery .wg-name { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 24px; color: #815636; letter-spacing: .04em; line-height: 1; margin-bottom: 10px; } #worksGallery .wg-date { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 500; font-size: 20px; color: #815636; opacity: .6; letter-spacing: .04em; line-height: 1; } /* ===== 家长中心全屏静态页（设计稿 Frame 105，1280×800 基准）===== */ #parentCenter { position: absolute; inset: 0; z-index: 200; display: none; background: #ffead5; overflow: hidden; } #parentCenter.show { display: block; } #parentCenter .gr-back { position: absolute; top: 53px; left: 33px; width: 96.4px; height: 66.4px; border: none; border-radius: 54px; background: rgba(129,86,54,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; } #parentCenter .gr-back .gr-back-ic { width: 36.23px; height: 32.18px; display: block; } #parentCenter .gr-back:active { background: rgba(129,86,54,0.18); } #parentCenter .pc-title { position: absolute; top: 69px; left: 159px; line-height: 1; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; font-variation-settings: "wght" 700, "BEVL" 100; color: #713e18; letter-spacing: .04em; white-space: nowrap; } /* 右上角家长插画 */ #parentCenter .pc-deco { position: absolute; top: 17px; left: 817px; width: 519.6px; height: 360px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; } /* 设置项列表 */ #parentCenter .pc-list { position: absolute; top: 177px; left: 81px; width: 1116px; display: flex; flex-direction: column; gap: 30px; } #parentCenter .pc-row { height: 58px; display: flex; align-items: center; justify-content: space-between; } #parentCenter .pc-label { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 32px; font-variation-settings: "wght" 700, "BEVL" 100; color: #53230d; letter-spacing: .04em; } #parentCenter .pc-check { position: relative; width: 37.2px; height: 37.2px; cursor: pointer; } #parentCenter .pc-check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } #parentCenter .pc-check-box { display: block; width: 37.2px; height: 37.2px; border-radius: 8.4px; border: 3.6px solid #53230d; box-sizing: border-box; } #parentCenter .pc-check input:checked + .pc-check-box { background: #53230d; } #parentCenter .pc-select { position: relative; width: 207px; height: 58px; border-radius: 16px; background: #f8d0ab; box-sizing: border-box; padding: 0 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } #parentCenter .pc-select span { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 500; font-size: 28px; color: #000; letter-spacing: .04em; } /* 透明原生 select 叠满整个胶囊：保留设计稿外观，点击弹原生选项 */ #parentCenter .pc-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; -webkit-appearance: none; appearance: none; } #parentCenter .pc-arrow { width: 12px; height: 12px; border-right: 3px solid #000; border-bottom: 3px solid #000; transform: rotate(45deg) translate(-2px,-2px); flex: none; } /* 底部三按钮 */ #parentCenter .pc-actions { position: absolute; top: 655px; left: 81px; width: 1116px; display: flex; gap: 24px; } #parentCenter .pc-btn { width: 356px; height: 92px; box-sizing: border-box; cursor: pointer; border: 4px solid #815636; border-radius: 27px; background: #fffefa; box-shadow: inset 0 -16px 0 0 rgba(129,86,54,0.2); display: flex; align-items: center; justify-content: center; padding-bottom: 5px; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; font-variation-settings: "wght" 700, "BEVL" 100; color: #a05b1e; letter-spacing: .04em; transition: transform .1s; } #parentCenter .pc-btn:active { transform: translateY(2px); } #parentCenter .pc-btn-primary { border-color: #c36f21; background: #feb026; color: #fff; box-shadow: inset 0 -16px 0 0 rgba(168,88,14,0.2); } /* ===== 藏宝世界全屏静态页（设计稿 Frame 106，1280x800 绝对定位）===== */ #treasureWorld { position: absolute; inset: 0; z-index: 200; display: none; background: #fff; overflow: hidden; } #treasureWorld.show { display: block; } #treasureWorld .tw-bg { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; } #treasureWorld .gr-back { position: absolute; top: 53px; left: 33px; width: 96.4px; height: 66.4px; border: none; border-radius: 54px; background: rgba(129,86,54,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; } #treasureWorld .gr-back .gr-back-ic { width: 36.23px; height: 32.18px; display: block; } #treasureWorld .gr-back:active { background: rgba(129,86,54,0.18); } #treasureWorld .tw-title { position: absolute; top: 69px; left: 159px; z-index: 3; line-height: normal; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 1.2px; color: #713e18; white-space: nowrap; } #treasureWorld .tw-sub { position: absolute; top: 69px; left: 730px; z-index: 3; line-height: normal; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 1.2px; color: #713e18; white-space: nowrap; } #treasureWorld .tw-board { position: absolute; top: 165px; left: 79px; width: 1118px; height: 582px; box-sizing: border-box; border-radius: 26.97px; border: 4px solid #815636; background: #ffdfbc; box-shadow: inset 0 -16.18px 0 0 rgba(129,86,54,0.2); } #treasureWorld .tw-hero { position: absolute; top: 197.6px; left: 107.65px; width: 425.7px; height: 514.8px; z-index: 2; } #treasureWorld .tw-grid { position: absolute; top: 227px; left: 541px; width: 604px; z-index: 2; display: flex; flex-wrap: wrap; gap: 27px 10.52px; } #treasureWorld .tw-card { width: 288px; display: flex; flex-direction: column; align-items: center; } #treasureWorld .tw-card img { width: 256.75px; height: 175.73px; margin-bottom: 14.73px; object-fit: cover; } #treasureWorld .tw-card-name { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 21.05px; letter-spacing: 0.84px; color: #815636; text-align: center; white-space: nowrap; } #modalBody .mr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* 变成实物：选中宝贝的大预览图 */ #modalBody .mr-preview { display: flex; justify-content: center; margin: 0 0 14px; } #modalBody .mr-preview-thumb { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border: 2px solid #f0d8b4; border-radius: 20px; } #modalBody .mr-preview-thumb img { max-width: 104px; max-height: 104px; object-fit: contain; } #modalBody .mr-preview-thumb .tr-emoji { font-size: 56px; line-height: 1; } #modalBody .mr-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; background: rgba(255,255,255,.6); border: 2px solid #e6c399; border-radius: 18px; transition: transform .1s, border-color .12s, box-shadow .12s; } #modalBody .mr-opt:active { transform: scale(.98); } #modalBody .mr-opt.picked { border-color: #fe8426; box-shadow: 0 0 0 3px rgba(254,132,38,.22); background: #fff7ec; } #modalBody .mr-opt .mr-opt-icon { font-size: 38px; line-height: 1; flex: 0 0 auto; } #modalBody .mr-opt .mr-opt-name { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 20px; color: #53230c; } #modalBody .mr-opt .mr-opt-desc { font-size: 14px; color: #a98864; margin-top: 3px; } #modalBody .mr-done { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 22px; padding: 26px 0 6px; } #modalBody .mr-done-thumb { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border: 2px solid #f0d8b4; border-radius: 18px; } #modalBody .mr-done-thumb img { max-width: 84px; max-height: 84px; object-fit: contain; } #modalBody .mr-done-thumb .tr-emoji { font-size: 48px; } #modalBody .mr-done-arrow { font-size: 40px; color: #fe8426; font-weight: 700; } #modalBody .mr-done-icon { font-size: 72px; line-height: 1; } #modalBody .mr-done-text { font-size: 19px; color: #6b4a2a; line-height: 1.8; text-align: center; } #modalBody .mr-done-text b { color: #a05a1e; } /* 弹窗主按钮禁用态 */ #modal .modal-actions .flow-btn:disabled { opacity: .5; cursor: default; filter: grayscale(.2); } /* 收藏页素材选项 */ #flowPickGrid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 6px 0 20px; } #flowPickGrid .fp-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 130px; padding: 12px; border-radius: 20px; border: 3px solid #f0d8b4; background: #fff7ec; cursor: pointer; transition: .15s; } #flowPickGrid .fp-opt:active { transform: scale(.96); } #flowPickGrid .fp-opt.picked { border-color: #fe8426; background: #ffe9cf; box-shadow: 0 0 0 3px rgba(254,132,38,.25); } #flowPickGrid .fp-opt .fp-thumb { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; } #flowPickGrid .fp-opt .fp-thumb img { width: 96px; height: 96px; object-fit: contain; } #flowPickGrid .fp-opt .fp-thumb svg { width: 84px; height: 84px; } #flowPickGrid .fp-opt .fp-name { font-size: 16px; font-weight: 700; color: #7a4a18; font-family: 'Alimama FangYuanTi VF', sans-serif; } /* 报告页：五维 / 闪光 / 建议 */ .flow-card .rp-sec { text-align: left; margin: 0 0 16px; } .flow-card .rp-sec h3 { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 20px; color: #a05a1e; margin: 0 0 8px; } .flow-card .rp-sec ul { margin: 0; padding-left: 22px; color: #6b4a2a; font-size: 16px; line-height: 1.7; } /* ===== 成长报告新框架（沿用木质暖色风）===== */ .rp { text-align: left; } /* 顶部副标题 */ .rp .rp-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; } .rp .rp-head .rp-name { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 26px; color: #53230c; letter-spacing: .03em; } .rp .rp-head .rp-period { font-size: 16px; color: #a05a1e; font-weight: 600; } /* 概览统计卡条 */ .rp .rp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; } .rp .rp-stat { flex: 1 1 0; min-width: 120px; background: #fff7ec; border: 2px solid #f0d8b4; border-radius: 16px; padding: 12px 14px; text-align: center; } .rp .rp-stat .rp-stat-v { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 26px; color: #fe8426; line-height: 1.1; } .rp .rp-stat .rp-stat-l { font-size: 13px; color: #8a5a2a; margin-top: 4px; } .rp .rp-stat.rp-stat-wide { flex: 2 1 0; } .rp .rp-stat.rp-stat-wide .rp-stat-v { font-size: 16px; line-height: 1.4; color: #a05a1e; } /* 区块标题 */ .rp .rp-block { margin: 0 0 18px; } /* 五维雷达 + 关键发现：左右两栏布局 */ .rp .rp-row { display: flex; gap: 24px; align-items: flex-start; margin: 0 0 18px; } .rp .rp-row .rp-col { min-width: 0; } .rp .rp-row .rp-col-radar { flex: 0 0 360px; } .rp .rp-row .rp-col-find { flex: 1 1 0; } .rp .rp-row .rp-block { margin: 0; } .rp .rp-row .rp-col-radar svg { width: 100%; height: auto; } .rp .rp-block-h { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 20px; color: #53230c; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .rp .rp-block-h .rp-block-sub { font-size: 13px; color: #a98864; font-weight: 600; } /* 关键发现卡片 */ .rp .rp-find { display: flex; gap: 12px; background: #fff7ec; border: 2px solid #f0d8b4; border-radius: 16px; padding: 14px 16px; margin: 0 0 10px; } .rp .rp-find .rp-find-no { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#feba26,#fe8426); color: #fff; font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; } .rp .rp-find .rp-find-body { flex: 1; } .rp .rp-find .rp-find-t { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 17px; color: #a05a1e; margin: 0 0 4px; } .rp .rp-find .rp-find-d { font-size: 15px; color: #6b4a2a; line-height: 1.6; } /* 建议 / 总结卡 */ .rp .rp-tip { background: linear-gradient(180deg,#fff3da,#ffe6c2); border: 2px solid #f0c98a; border-radius: 16px; padding: 14px 16px; margin: 0 0 12px; } .rp .rp-tip .rp-tip-h { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 17px; color: #a05a1e; margin: 0 0 6px; } .rp .rp-tip .rp-tip-d { font-size: 15px; color: #6b4a2a; line-height: 1.7; } .rp .rp-tip ul { margin: 0; padding-left: 20px; color: #6b4a2a; font-size: 15px; line-height: 1.7; } .rp .rp-summary { background: linear-gradient(135deg,#fe8426,#feba26); border-radius: 16px; padding: 16px 18px; color: #fff; } .rp .rp-summary .rp-sum-h { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 6px; opacity: .92; } .rp .rp-summary .rp-sum-d { font-family: 'Alimama FangYuanTi VF', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.6; } /* 家长建档层 */ #onboard { position: fixed; inset: 0; z-index: 120; background: #000; display: none; align-items: center; justify-content: center; } #onboard.show { display: flex; } /* 进入页：开场背景图（Frame 58）+ 开始按钮，点击后才播放开场视频 */ #obStepStart { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; gap: 0; padding: 0; background: #000 url("https://cdn.uileo.com/assets/start-bg.webp") no-repeat center / cover; } #obStepStart #introStartBtn { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 2; width: 345px; height: 84px; padding: 0 2px 0 0; box-sizing: border-box; border-radius: 20px; border: none; cursor: pointer; background: linear-gradient(90deg, #feba26, #fe8426); box-shadow: inset 0 3px 0 #ffd400, 0 4px 14px rgba(254,169,38,.4), inset 0 -6px 0 #ff7b00; font-size: 28px; font-weight: 700; color: #fff; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; } /* 进场视频步骤：全屏铺满。双 video 元素叠放做双缓冲，切换段落时不黑屏 */ #obStepVideo { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; gap: 0; padding: 0; background: #000; } #obStepVideo .intro-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .15s linear; z-index: 1; } #obStepVideo .intro-vid.show { opacity: 1; z-index: 1; } #obStepVideo #introNextBtn { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 2; display: none; width: 345px; height: 84px; padding: 0 2px 0 0; box-sizing: border-box; border-radius: 20px; border: none; background: linear-gradient(90deg, #feba26, #fe8426); box-shadow: inset 0 3px 0 #ffd400, 0 4px 14px rgba(254,169,38,.4), inset 0 -6px 0 #ff7b00; display: none; font-size: 28px; font-weight: 700; color: #fff; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; letter-spacing: 0.04em; align-items: center; justify-content: center; } #obStepVideo #introNextBtn.show { display: flex; } .ob-card { background: #fff; width: 88%; max-width: 640px; max-height: 86vh; overflow: auto; border-radius: 20px; padding: 28px 30px; } .ob-card h1 { font-size: 26px; margin: 0 0 4px; color: #1f2a44; } .ob-card .sub { color: #6b7693; font-size: 15px; margin-bottom: 18px; } /* —— 新建档分步流（占位框架，UI 待替换）—— */ .ob-flow { width: 92%; max-width: 720px; } .ob-step { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 380px; color: #fff; text-align: center; } .ob-step.show { display: flex; } .ob-stage { width: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border-radius: 24px; font-size: 60px; } .ob-bubble { color: #713e18; position: relative; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-align: center; width: fit-content; max-width: 620px; padding: 6px 24px 16px; border-style: solid; border-width: 34px 52px 56px 52px; border-image: url("https://cdn.uileo.com/assets/bubble.png") 34 52 56 52 fill stretch; } .ob-bubble::after { content: none; } .ob-cta { padding: 14px 40px; font-size: 19px; border-radius: 26px; background: #ff9b3f; color: #fff; border: none; min-width: 200px; } .ob-cta.ghost-cta { background: rgba(255,255,255,.85); color: #2e3c5e; } .ob-cta.cta-grad { width: 345px; height: 84px; padding: 0; border-radius: 20px; font-size: 28px; font-weight: 700; color: #fff; background: linear-gradient(90deg, rgba(254,186,38,1) 0%, rgba(254,132,38,1) 100%); } #obStepIntro3 .ob-bubble { position: relative; width: 328px; max-width: 328px; height: 120px; max-height: 120px; padding: 0; overflow: visible; background: none; border: none; border-image: none; display: block; } #obStepIntro3 .ob-bubble-box { position: absolute; top: 0; left: 0; width: 328px; height: 101px; box-sizing: border-box; background: rgba(248,232,203,1); border: 2px solid rgba(129,86,54,1); border-radius: 45px; box-shadow: inset 4px -7px 0 0 rgba(211,175,143,1), inset 2px -4px 0 0 rgba(129,86,54,1); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } #obStepIntro3 .ob-bubble-text { width: 268px; font-size: 34px; font-weight: 700; color: rgba(113,62,24,1); line-height: normal; letter-spacing: 0.04em; white-space: nowrap; } #obStepIntro3 .ob-bubble-tail-wrap { position: absolute; left: 50px; top: 85px; width: 42px; height: 26px; line-height: 0; } #obStepIntro3 .ob-bubble-tail { width: 42px; height: 26px; display: block; } /* intro3 自我介绍：YaYa 立绘 + 影子 */ .ob-mascot { position: relative; width: 502px; height: 502px; background: none; min-height: 0; display: flex; align-items: flex-end; justify-content: center; } .ob-mascot img.figure { position: relative; z-index: 2; width: 502px; height: 502px; object-fit: contain; } .ob-mascot img.shadow { position: absolute; z-index: 1; bottom: 6px; left: 50%; transform: translateX(-50%); width: 360px; height: auto; } /* —— 6 题问答页（Frame 30 设计稿）—— */ #obStepQuestion { display: none; position: absolute; inset: 0; width: 1280px; height: 800px; background: rgba(250,234,212,1); padding: 0; margin: 0; min-height: 0; color: rgba(113,62,24,1); } #obStepQuestion.show { display: block; } #obStepQuestion .q-bg-left { position: absolute; top: 1px; left: 0; width: 682px; height: 801px; background: url("https://cdn.uileo.com/assets/q/bg-left.webp") no-repeat left top / 682px 801px; pointer-events: none; } #obStepQuestion .q-bg-right { position: absolute; top: 1px; left: 598px; width: 682px; height: 801px; background: url("https://cdn.uileo.com/assets/q/bg-right.webp") no-repeat left top / 682px 801px; pointer-events: none; } #obStepQuestion .q-mascot { position: absolute; top: 25.1px; left: 113.1px; width: 192.77px; height: 192.77px; z-index: 5; background: url("https://cdn.uileo.com/assets/q/yaya-mascot.webp") no-repeat center / contain; } #obStepQuestion .q-title-wrap { position: absolute; top: 58px; left: 311px; height: 101px; display: flex; flex-direction: row; align-items: center; } #obStepQuestion .q-title-tail { width: 26px; height: 42px; margin-right: -6px; background: url("https://cdn.uileo.com/assets/bubble-tail.png") no-repeat center / contain; transform: scaleX(-1); flex-shrink: 0; } #obStepQuestion .q-title-box { height: 101px; box-sizing: border-box; padding: 0 48px; border-radius: 45px; border: 2px solid rgba(129,86,54,1); background: rgba(248,232,203,1); box-shadow: inset 4px -7px 0 0 rgba(211,175,143,1), inset 2px -4px 0 0 rgba(129,86,54,1); display: flex; align-items: center; justify-content: center; } #obStepQuestion .q-title-text { font-size: 34px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; } #obStepQuestion .q-progress { position: absolute; top: 109px; left: 1117px; font-size: 34px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; } #obStepQuestion .q-panel { position: absolute; top: 184px; left: 106px; width: 1067px; height: 554px; box-sizing: border-box; z-index: 1; border-radius: 39px; background: rgba(255,255,255,0.6); padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } /* obQBody 固定占据按钮以上的区域，按钮固定贴底，保证各题切换时按钮位置不跳动 */ #obStepQuestion #obQBody { width: 987px; height: 390px; display: flex; align-items: center; justify-content: center; } #obStepQuestion .q-cards { width: 987px; height: 360px; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 20px; } #obStepQuestion .q-card { width: 315.67px; height: 360px; box-sizing: border-box; border-radius: 20px; border: 1px solid rgba(113,62,24,1); background: rgba(241,235,223,1); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s, border-color .15s; } #obStepQuestion .q-card:active { transform: scale(.98); } #obStepQuestion .q-card.on { border: 3px solid rgba(254,132,38,1); background: rgba(255,245,224,1); } #obStepQuestion .q-card img { width: 245.76px; height: 245.76px; object-fit: contain; margin-bottom: 10px; pointer-events: none; } #obStepQuestion .q-card-label { font-size: 28px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; text-align: center; } /* 纯文字选项：竖向整宽选项条（设计稿 Frame 38：987×78 圆角条，棕描边米底，选中橙描边）*/ #obStepQuestion .q-list { width: 987px; height: 372px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 20px; } #obStepQuestion .q-row { width: 987px; height: 78px; box-sizing: border-box; border-radius: 20px; border: 1px solid rgba(113,62,24,1); background: rgba(241,235,223,1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; } #obStepQuestion .q-row:active { transform: scale(.99); } #obStepQuestion .q-row.on { border: 3px solid rgba(254,132,38,1); background: rgba(255,245,224,1); } #obStepQuestion .q-row .q-row-label { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 28px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; text-align: center; } #obStepQuestion .q-input-area { width: 987px; height: 360px; display: flex; align-items: center; justify-content: center; } #obStepQuestion .q-text-input { width: 987px; height: 360px; box-sizing: border-box; padding: 0; text-align: center; font-size: 108px; font-weight: 700; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; color: rgba(113,62,24,1); letter-spacing: 0.04em; border: none; background: transparent; outline: none; white-space: nowrap; overflow: hidden; } #obStepQuestion .q-text-input::placeholder { color: rgba(113,62,24,1); opacity: 0.2; } /* 名字题下方性别选择：参考关联网盘按钮样式（米黄底 + 棕描边 + 内阴影）。 名字题有性别时，body 改为上下布局（名字在上、性别在下），输入框收窄给性别按钮让位。 用 JS 加 .has-gender 类控制（不用 :has()，兼容小度端较旧 Chromium 内核）。 */ #obStepQuestion #obQBody.has-gender { flex-direction: column; justify-content: center; gap: 18px; } #obStepQuestion #obQBody.has-gender .q-text-input { height: 230px; } #obStepQuestion .q-gender { display: flex; flex-direction: row; gap: 30px; align-items: center; justify-content: center; width: 987px; } #obStepQuestion .q-gender-btn { flex: 1 1 0; min-width: 0; height: 84px; box-sizing: border-box; border-radius: 20px; border: 6px solid rgba(129,86,54,1); box-shadow: inset 0 -12px 0 0 rgba(129,86,54,0.2); background: rgba(255,230,192,1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 30px; font-weight: 700; color: rgba(129,86,54,1); letter-spacing: 0.04em; transition: transform .12s, background .12s; } #obStepQuestion .q-gender-btn:active { transform: scale(.97); } #obStepQuestion .q-gender-btn.on { background: rgba(254,186,38,1); color: #fff; border-color: rgba(254,132,38,1); } #obStepQuestion .q-continue { width: 987px; height: 84px; box-sizing: border-box; border-radius: 20px; border: none; padding-right: 2px; background: linear-gradient(90deg, rgba(254,186,38,1) 0%, rgba(254,132,38,1) 100%); box-shadow: inset 0 3px 0 #ffd400, 0 4px 14px rgba(254,169,38,.4), inset 0 -6px 0 #ff7b00; font-size: 28px; font-weight: 700; color: #fff; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; letter-spacing: 0.04em; cursor: pointer; display: flex; align-items: center; justify-content: center; } #obStepQuestion .q-continue.waiting { background: linear-gradient(90deg, rgba(244,223,176,1) 0%, rgba(255,203,163,1) 100%); box-shadow: none; cursor: default; } /* ===== 招募页（Frame 33）：1280×800，米黄底 + 装饰背景 + 三位轮播角色 + 文案 ===== */ #obStepLoading { position: absolute; inset: 0; width: 1280px; height: 800px; overflow: hidden; background: rgba(250,234,212,1); padding: 0; margin: 0; min-height: 0; } #obStepLoading.show { display: block; } #obStepLoading .rc-bg-left { position: absolute; top: 1px; left: 0; width: 682px; height: 801px; background: url("https://cdn.uileo.com/assets/q/bg-left.webp") no-repeat left top / 682px 801px; pointer-events: none; } #obStepLoading .rc-bg-right { position: absolute; top: 1px; left: 598px; width: 682px; height: 801px; background: url("https://cdn.uileo.com/assets/q/bg-right.webp") no-repeat left top / 682px 801px; pointer-events: none; } /* 轮播角色：每个角色是常驻 DOM，靠切换位置类实现真实位移动画。 C 位 368.64×368.64 不透明；两侧 256×256 且 40% 透明；进出场槽位在屏外淡出 */ #obStepLoading .rc-slot { position: absolute; object-fit: contain; pointer-events: none; width: 256px; height: 256px; top: 262px; left: 512px; opacity: 0; transform: translateX(-50%); transition: left .6s cubic-bezier(.22,.61,.36,1), top .6s cubic-bezier(.22,.61,.36,1), width .6s cubic-bezier(.22,.61,.36,1), height .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease; } /* 三个可见槽位（left 用元素中心点定位，配合 translateX(-50%)） */ #obStepLoading .rc-slot.pos-center { width: 368.64px; height: 368.64px; top: 164px; left: 640px; opacity: 1; z-index: 2; } #obStepLoading .rc-slot.pos-left { width: 256px; height: 256px; top: 262px; left: 384px; opacity: .4; z-index: 1; } #obStepLoading .rc-slot.pos-right { width: 256px; height: 256px; top: 262px; left: 896px; opacity: .4; z-index: 1; } /* 屏外进出场槽位（透明） */ #obStepLoading .rc-slot.pos-hideL { width: 256px; height: 256px; top: 262px; left: 80px; opacity: 0; z-index: 0; } #obStepLoading .rc-slot.pos-hideR { width: 256px; height: 256px; top: 262px; left: 1200px; opacity: 0; z-index: 0; } #obStepLoading .rc-text { position: absolute; top: 567px; left: 0; width: 1280px; text-align: center; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 34px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; } /* ===== 团队展示页（Frame 34）：1280×800 米黄底 + 星空全幅背景 + 5 位导师 + 标题 + 继续按钮 ===== */ #obStepTeam { position: absolute; inset: 0; width: 1280px; height: 800px; overflow: hidden; background: rgba(40,48,96,1); padding: 0; margin: 0; min-height: 0; } #obStepTeam.show { display: block; } #obStepTeam .tm-bg { position: absolute; top: 0; left: -197px; width: 1522px; height: 849px; pointer-events: none; } #obStepTeam .tm-title { position: absolute; top: 84px; left: 0; width: 1280px; text-align: center; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 54px; font-weight: 700; color: #fff; letter-spacing: 0.04em; white-space: nowrap; z-index: 2; } #obStepTeam .tm-stage { position: absolute; top: 186px; left: 107.2px; width: 1065.6px; height: 380.46px; z-index: 2; } #obStepTeam .tm-mem { position: absolute; display: flex; flex-direction: column; align-items: center; } #obStepTeam .tm-mem .tm-name { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 0.04em; white-space: nowrap; text-align: center; } #obStepTeam .tm-mem .tm-role { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 18px; font-weight: 500; color: #fff; letter-spacing: 0.24em; white-space: nowrap; text-align: center; } /* roro 导演策划：左外，201.6 */ #obStepTeam .tm-roro { top: 102.2px; left: 0; width: 201.6px; } #obStepTeam .tm-roro img { width: 201.6px; height: 201.6px; margin-bottom: 8px; } #obStepTeam .tm-roro .tm-name { width: 201.6px; margin-bottom: 8px; } #obStepTeam .tm-roro .tm-role { width: 201.6px; } /* toto 场景生成：左内，252 */ #obStepTeam .tm-toto { top: 57.16px; left: 170.8px; width: 252px; } #obStepTeam .tm-toto img { width: 252px; height: 252px; margin-bottom: 5px; } #obStepTeam .tm-toto .tm-name { width: 252px; margin-bottom: 5px; } #obStepTeam .tm-toto .tm-role { width: 252px; } /* yaya 创作灵感：C 位，310.46 */ #obStepTeam .tm-yaya { top: 0; left: 418.8px; width: 252px; } #obStepTeam .tm-yaya img { width: 310.46px; height: 310.46px; margin-bottom: 5px; } #obStepTeam .tm-yaya .tm-name { width: 252px; margin-bottom: 5px; } #obStepTeam .tm-yaya .tm-role { width: 252px; } /* lala 精修编辑：右内，252 */ #obStepTeam .tm-lala { top: 57.16px; left: 642.8px; width: 252px; } #obStepTeam .tm-lala img { width: 252px; height: 252px; margin-bottom: 5px; } #obStepTeam .tm-lala .tm-name { width: 252px; margin-bottom: 5px; } #obStepTeam .tm-lala .tm-role { width: 252px; } /* momo 天赋分析：右外，201.6 */ #obStepTeam .tm-momo { top: 102.36px; left: 864px; width: 201.6px; } #obStepTeam .tm-momo img { width: 201.6px; height: 201.6px; margin-bottom: 8px; } #obStepTeam .tm-momo .tm-name { width: 201.6px; margin-bottom: 8px; } #obStepTeam .tm-momo .tm-role { width: 201.6px; } #obStepTeam .tm-continue { position: absolute; top: 634px; left: 146.5px; width: 987px; height: 84px; box-sizing: border-box; border-radius: 20px; border: none; padding-right: 2px; background: linear-gradient(90deg, rgba(254,186,38,1) 0%, rgba(254,132,38,1) 100%); box-shadow: inset 0 3px 0 #ffd400, 0 4px 14px rgba(254,169,38,.4), inset 0 -6px 0 #ff7b00; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 28px; font-weight: 700; color: #fff; letter-spacing: 0.04em; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; } .ob-album-pick { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; } .ob-album-pick .opt { background: #fff; color: #1f2a44; border-radius: 14px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; } .ob-album-pick .opt .icon { font-size: 24px; } .ob-album-pick .opt.primary { background: linear-gradient(135deg,#4a7bff,#6f5bff); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(74,123,255,.35); } .ob-album-lead { color: #fff; opacity: .9; font-size: 13px; line-height: 1.5; max-width: 560px; text-align: center; margin-bottom: 12px; } .ob-album-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 560px; margin-bottom: 14px; } .ob-album-features .feat { background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; } .ob-album-features .feat .icon { font-size: 22px; line-height: 1.2; } .ob-album-features .feat .feat-t { color: #fff; font-size: 15px; font-weight: 600; } .ob-album-features .feat .feat-d { color: #fff; opacity: .8; font-size: 12px; margin-top: 3px; line-height: 1.45; } .album-box { background: #f5f7fc; border-radius: 14px; padding: 14px 16px; } .album-box .album-hint { font-size: 13px; color: #8a93ad; margin-top: 8px; line-height: 1.5; } .album-box .album-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .album-box .album-tags .tag { background: #e5ecff; color: #4a7bff; border-radius: 12px; padding: 5px 12px; font-size: 13px; } .album-box button { width: 100%; } .ob-field { margin-bottom: 16px; } .ob-field label { display: block; font-size: 17px; font-weight: 600; color: #2e3c5e; margin-bottom: 8px; } .ob-field input[type=text], .ob-field input[type=number] { width: 100%; font-size: 18px; padding: 12px 14px; border: 2px solid #c3d0e8; border-radius: 12px; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { padding: 10px 16px; border-radius: 20px; background: #eef2fb; color: #2e3c5e; font-size: 16px; cursor: pointer; border: 2px solid transparent; } .chip.on { background: #4a7bff; color: #fff; border-color: #4a7bff; } .ob-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; } .ob-actions button { font-size: 19px; } /* ===== 关联百度网盘页（Frame 35 严格还原）：1280×800 米黄底 + 左 IP + 右文案/卡片 + 双按钮 ===== */ #obStepAlbum { display: none; position: absolute; inset: 0; width: 1280px; height: 800px; background: rgba(250,234,212,1); padding: 0; margin: 0; min-height: 0; color: rgba(113,62,24,1); } #obStepAlbum.show { display: block; } #obStepAlbum .al-bg-left { position: absolute; top: 1px; left: 0; width: 682px; height: 801px; background: url("https://cdn.uileo.com/assets/q/bg-left.webp") no-repeat left top / 682px 801px; pointer-events: none; } #obStepAlbum .al-bg-right { position: absolute; top: 1px; left: 598px; width: 682px; height: 801px; background: url("https://cdn.uileo.com/assets/q/bg-right.webp") no-repeat left top / 682px 801px; pointer-events: none; } /* 左侧 IP（含投影）：容器 467.48×467.48 @ top109/left71 */ #obStepAlbum .al-yaya-wrap { position: absolute; top: 109px; left: 71px; width: 467.48px; height: 467.48px; z-index: 2; } #obStepAlbum .al-yaya { position: absolute; top: 0; left: 0; width: 467.48px; height: 467.48px; } #obStepAlbum .al-yaya-shadow { position: absolute; top: 403.36px; left: 122.51px; width: 235.77px; height: 45.07px; } /* 右侧标题区 @ top120/left473 */ #obStepAlbum .al-head { position: absolute; top: 120px; left: 473px; width: 728px; z-index: 2; text-align: left; } #obStepAlbum .al-title { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 49px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; margin-bottom: 17px; text-align: left; } #obStepAlbum .al-sub { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 30px; font-weight: 400; color: rgba(113,62,24,1); letter-spacing: 0.04em; line-height: 45px; white-space: nowrap; text-align: left; } /* 四个功能卡片：2×2，单卡 339.5×123，gap 19，两行 @ top269 / top408，left473 */ #obStepAlbum .al-feats { position: absolute; left: 473px; width: 698px; z-index: 2; display: grid; grid-template-columns: 339.5px 339.5px; gap: 16px 19px; } #obStepAlbum .al-feats.row1 { top: 269px; } #obStepAlbum .al-feat { width: 339.5px; height: 123px; box-sizing: border-box; border-radius: 20px; background: rgba(129,86,54,0.1); padding: 17px 14px; display: flex; flex-direction: column; align-items: flex-start; } #obStepAlbum .al-feat .feat-t { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 24px; font-weight: 600; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; margin-bottom: 10px; } #obStepAlbum .al-feat .feat-d { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 16px; font-weight: 400; color: rgba(113,62,24,1); letter-spacing: 0.04em; line-height: 25px; text-align: left; width: 100%; } /* 底部双按钮：486×115.2，棕色描边 + 内阴影，米黄底，左图标右文字 */ #obStepAlbum .al-btn { position: absolute; top: 599px; width: 486px; height: 115.2px; box-sizing: border-box; border-radius: 20px; border: 6px solid rgba(129,86,54,1); box-shadow: inset 0 -12px 0 0 rgba(129,86,54,0.2); background: rgba(255,230,192,1); cursor: pointer; z-index: 3; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 40px; } #obStepAlbum .al-btn img { width: 64px; height: 64px; margin-right: 26px; flex-shrink: 0; } #obStepAlbum .al-btn span { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 34px; font-weight: 700; color: rgba(129,86,54,1); letter-spacing: 0.04em; white-space: nowrap; } #obStepAlbum .al-btn.netdisk { left: 154px; overflow: hidden; position: absolute; } #obStepAlbum .al-btn.later { left: 682px; } /* 「关联百度网盘」按钮扫光：每 2s 一轮，斜向白色高光从左到右扫过，露出按钮内即可，不影响点击 */ #obStepAlbum .al-btn.netdisk::after { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%); transform: translateX(-120%); pointer-events: none; animation: alNetdiskSheen 2s linear infinite; } @keyframes alNetdiskSheen { 0% { transform: translateX(-120%); } 60% { transform: translateX(280%); } 100% { transform: translateX(280%); } } /* 提示文字：默认放在「关联百度网盘」按钮（窄按钮 left154/width486）下方居中 */ #obStepAlbum .al-hint { position: absolute; top: 728px; left: 154px; width: 486px; text-align: center; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 18px; color: rgba(113,62,24,.85); z-index: 4; min-height: 24px; white-space: nowrap; } /* 进入「解析照片」大按钮态：提示对齐到解析按钮（left133/width854）下方，单行 */ #obStepAlbum.parse-stage .al-hint { left: 133px; width: 854px; white-space: nowrap; } #obStepAlbum .al-tags { position: absolute; top: 730px; left: 133px; width: 1014px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; z-index: 4; } #obStepAlbum .al-tags .tag { background: rgba(255,230,192,1); border: 1px solid rgba(129,86,54,.6); color: rgba(113,62,24,1); border-radius: 14px; padding: 4px 14px; font-size: 15px; } /* 「进入世界」按钮：UI 与「关联百度网盘」按钮一致（米黄底 + 棕描边 + 内阴影 + 棕字）， 沿用填充画面的宽度（left133 / width1014） */ #obStepAlbum .al-done { position: absolute; top: 599px; left: 133px; width: 1014px; height: 115.2px; box-sizing: border-box; border-radius: 20px; border: 6px solid rgba(129,86,54,1); box-shadow: inset 0 -12px 0 0 rgba(129,86,54,0.2); background: rgba(255,230,192,1); font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 34px; font-weight: 700; color: rgba(129,86,54,1); letter-spacing: 0.04em; cursor: pointer; z-index: 5; display: none; align-items: center; justify-content: center; } /* 「解析照片」按钮：与「进入世界」同款样式，授权建好文件夹后显示。 右侧留出小「跳过」按钮的位置，所以宽度收窄到 854（1014 - 跳过140 - 间距20） */ #obStepAlbum #obAlbumParse { position: absolute; top: 599px; left: 133px; width: 854px; height: 115.2px; box-sizing: border-box; border-radius: 20px; border: 6px solid rgba(129,86,54,1); box-shadow: inset 0 -12px 0 0 rgba(129,86,54,0.2); background: rgba(255,230,192,1); font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 34px; font-weight: 700; color: rgba(129,86,54,1); letter-spacing: 0.04em; cursor: pointer; z-index: 5; display: none; align-items: center; justify-content: center; } #obStepAlbum #obAlbumParse:disabled { opacity: .7; cursor: default; font-size: 30px; } /* 右侧小「跳过」按钮：与解析按钮同高，描边/底色一致但更窄、字更小 */ #obStepAlbum #obAlbumParseSkip { position: absolute; top: 599px; left: 1007px; width: 140px; height: 115.2px; box-sizing: border-box; border-radius: 20px; border: 6px solid rgba(129,86,54,1); box-shadow: inset 0 -12px 0 0 rgba(129,86,54,0.2); background: rgba(255,230,192,1); font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 26px; font-weight: 700; color: rgba(129,86,54,1); letter-spacing: 0.04em; cursor: pointer; z-index: 5; display: none; align-items: center; justify-content: center; } /* ===== 首页 home（Frame 55 严格还原）：1280×800 草原窗景 + 顶栏 + IP + 5 入口卡 ===== */ #home { position: fixed; inset: 0; z-index: 110; width: 1280px; height: 800px; overflow: hidden; background: rgba(255,255,255,1); display: none; color: rgba(113,62,24,1); text-align: left; } #home.show { display: block; } /* 循环播放的背景视频，铺满首页、置于最底层 */ #home .home-bg-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* 背景图与操作组件之间的蒙层（设计稿 bg_meadow_dawn 2，183:547）： 上至下从暖橙白渐隐到透明，约 0~70% 高度有可见 alpha。位于背景图之上、其它元素之下（z:1） */ #home .home-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,236,213,1.00) 0%, rgba(255,238,218,0.86) 10%, rgba(255,241,224,0.72) 20%, rgba(255,245,231,0.57) 30%, rgba(255,248,236,0.43) 40%, rgba(255,248,245,0.29) 50%, rgba(255,255,248,0.15) 60%, rgba(255,255,255,0.01) 70%, rgba(255,255,255,0) 80%); } /* 顶部：左侧头像 + 名字 + 状态文案 */ #home .home-user { position: absolute; top: 48px; left: 32.53px; display: flex; align-items: flex-start; z-index: 3; cursor: pointer; } #home .home-user:active { transform: scale(.98); } #home .home-user .avatar { width: 74.54px; height: 74.54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } #home .home-user .u-txt { margin: 5.27px 0 0 18.73px; display: flex; flex-direction: column; } #home .home-user .u-name { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 30px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; margin-bottom: 5px; } #home .home-user .u-sub { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 20px; font-weight: 400; color: rgba(146,107,79,1); letter-spacing: 0.04em; white-space: nowrap; } /* 顶部右侧三个圆形按钮 */ #home .home-top-actions { position: absolute; top: 53px; left: 905px; display: flex; flex-direction: row; align-items: center; z-index: 3; } #home .home-top-actions .ta { width: 94px; height: 64px; border-radius: 54px; background: rgba(129,86,54,0.1); margin-right: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #home .home-top-actions .ta:last-child { margin-right: 0; } #home .home-top-actions .ta img { width: 36px; height: 36px; object-fit: contain; } #home .home-top-actions .ta .vol-icon, #home .home-top-actions .ta .ta-icon { width: 36px; height: 36px; display: block; } #home .home-top-actions .ta .vol { font-size: 30px; line-height: 1; } /* 左侧 IP 立绘（含投影）@ top273/left7，容器 437.34 */ #home .home-yaya-wrap { position: absolute; top: 273px; left: 7px; width: 437.34px; height: 437.34px; z-index: 2; } #home .home-yaya { position: absolute; top: 0; left: 0; width: 437.34px; height: 437.34px; } #home .home-yaya-shadow { position: absolute; top: 379.84px; left: 105.87px; width: 222.16px; height: 34.85px; } /* 右侧卡片舞台（新设计稿 Frame78：在 1280×800 内整体 left348/top183，整图 903×505） */ #home .home-stage { position: absolute; top: 183px; left: 348px; width: 903px; height: 505px; z-index: 2; } /* 五个入口卡（Frame75-79，整图含卡底/缩略图/文字/箭头），按设计稿原始尺寸/坐标绝对定位（相对 stage） */ #home .entry { position: absolute; cursor: pointer; z-index: 2; -webkit-user-drag: none; } #home .entry:active { transform: scale(.97); } #home .entry-create { left: 0; top: 15px; width: 402px; height: 490px; } #home .entry-report { left: 382px; top: 5px; width: 271px; height: 269px; } #home .entry-parent { left: 632px; top: 0; width: 271px; height: 274px; } #home .entry-treasure { left: 333px; top: 260px; width: 271px; height: 245px; } #home .entry-works { left: 583px; top: 266px; width: 271px; height: 239px; } /* 四个入口：默认/hover 两态切换，做淡入淡出过渡 */ #home .entry.has-hover { transition: opacity .25s ease; } /* 开始创作：容器叠放两张帧图，做 1→5 循环交叉渐变 */ #home .entry-create { overflow: hidden; } #home .entry-create .ec-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; -webkit-user-drag: none; pointer-events: none; } #home .entry-create .ec-frame.ec-active { opacity: 1; } /* 移走缓慢回默认态：回首帧的淡入更慢 */ #home .entry-create.ec-resetting .ec-frame { transition: opacity 1s ease; } /* 屏内回退/首页键（建档层、创作页通用） */ /* ②a 场景推荐加载页：背景视频（加载循环 → 完成一遍定格）+ 底部「探险家正在探索」。 z-index 取 121：加载阶段高于建档页 #onboard(120) 盖住它；渐显场景页时低于 #pick(122)， 让定格视频作为 #pick 的背景透出，而场景选择卡片浮在其上。 */ #waitScreen { position: fixed; inset: 0; z-index: 121; width: 1280px; height: 800px; overflow: hidden; background: #000; display: none; } #waitScreen.show { display: block; } /* 两层视频叠放：loading 循环在底，done 完成视频在上，靠 .show 透明度切换避免换源闪屏 */ #waitScreen .wait-vid { position: absolute; inset: 0; width: 1280px; height: 800px; object-fit: cover; opacity: 0; transition: opacity .45s ease; } #waitScreen .wait-vid.show { opacity: 1; } #waitScreen .wait-text { position: absolute; top: 615.8px; left: 0; width: 100%; text-align: center; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 34px; font-weight: 700; color: rgba(113,62,24,1); letter-spacing: 0.04em; white-space: nowrap; z-index: 2; opacity: 1; transition: opacity .5s ease; } /* 等待点：固定 3 个位，等宽，隐藏的点用 visibility 仍占位，保证文字不左右抖动 */ #waitScreen .wait-text .wt-dots { display: inline-block; margin-left: 6px; } #waitScreen .wait-text .wt-dot { display: inline-block; width: 0.6em; text-align: center; } #waitScreen .wait-text.fade { opacity: 0; } /* ② 进入世界·场景选择页（设计稿 Frame 81，196:675）。z-index 高于 #onboard(120)/#home(110)/ 加载页 #waitScreen(121)，使定格视频作背景透出、卡片浮于其上；背景透明不污染。 */ #pick { position: fixed; inset: 0; z-index: 122; background: transparent; display: none; color: #fff; overflow: hidden; opacity: 1; transition: opacity .5s ease; } #pick.show { display: block; } #pick.fade-in { opacity: 0; } /* 标题：设计稿 top47.8/left254，41.76px 白色粗体 */ #pick #pickTitle { position: absolute; top: 47.8px; left: 254px; margin: 0; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 41.76px; font-weight: 700; color: #fff; letter-spacing: 0.04em; white-space: nowrap; } /* 副标题：top111/left254，26.4px */ #pick .pick-sub { position: absolute; top: 111px; left: 254px; margin: 0; font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 26.4px; font-weight: 500; color: #fff; letter-spacing: 0.04em; white-space: nowrap; text-align: left; } /* 换一批世界：右上胶囊，top59/left961，273.6×77.6，半透明白底 */ #pick .pick-shuffle { position: absolute; top: 59px; left: 961px; width: 273.6px; height: 77.6px; border: none; border-radius: 72px; background: rgba(255,255,255,0.2); cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 0; } #pick .pick-shuffle:active { transform: scale(.97); } #pick .pick-shuffle .ps-ico { font-size: 34px; color: #fff; line-height: 1; } #pick .pick-shuffle .ps-txt { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 0.04em; white-space: nowrap; } /* 卡片行：top292/left45，1190×369，三张 369×369 圆形卡居中排布 */ #pickCards { position: absolute; top: 292px; left: 45px; width: 1190px; height: 369px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 42px; } /* 圆形场景卡（设计稿 Frame84 严格还原）：369 外框无背景；内嵌 325 缩略图圆 + 0.2 黑蒙层； 最外层 369 白色 2px 细描边圆环 + 两颗白点装饰。整体 left22 起内嵌缩略图（369-325)/2=22。 */ .pick-card { position: relative; width: 369px; height: 369px; flex: 0 0 369px; cursor: pointer; transition: transform .15s; } .pick-card:active { transform: scale(.96); } /* 325 缩略图圆：居中（top/left 22），圆形裁切 */ .pick-card .thumb { position: absolute; top: 22px; left: 22px; width: 325px; height: 325px; object-fit: cover; display: block; border-radius: 50%; } /* 325 黑色 0.2 蒙层，盖在缩略图上压暗、托文字 */ .pick-card .veil { position: absolute; top: 22px; left: 22px; width: 325px; height: 325px; border-radius: 50%; background: rgba(0,0,0,0.2); z-index: 1; } /* 369 白色 2px 细描边圆环（设计稿 image_1 的 circle r183.5 stroke white 2） */ .pick-card .ring { position: absolute; inset: 0; width: 369px; height: 369px; border-radius: 50%; border: 2px solid rgba(255,255,255,1); box-sizing: border-box; z-index: 3; pointer-events: none; } /* 两颗白点装饰（设计稿：r6 / r7.2），沿 369 白描边圆环缓慢转动。 实现：点固定贴在环顶端（top 居环线、left 居中），外层 orbit 容器绕卡片中心匀速旋转， 点便沿圆环移动。两点用不同初始相位（o1 从 0°、o2 从 180°）错开分布。 */ .pick-card .dot-orbit { position: absolute; inset: 0; width: 369px; height: 369px; z-index: 3; pointer-events: none; transform-origin: 50% 50%; } .pick-card .dot-orbit.o1 { animation: dotSpin 16s linear infinite; } .pick-card .dot-orbit.o2 { animation: dotSpin2 16s linear infinite; } /* 点贴在环顶（top:-? 让点中心落在 2px 描边线上：环线在 top≈1px 处，点中心对齐之） */ .pick-card .dot { position: absolute; left: 50%; border-radius: 50%; background: #fff; } .pick-card .dot.d1 { width: 12px; height: 12px; top: -5px; transform: translateX(-50%); } .pick-card .dot.d2 { width: 14.4px; height: 14.4px; top: -6.2px; transform: translateX(-50%); } @keyframes dotSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dotSpin2 { from { transform: rotate(180deg); } to { transform: rotate(540deg); } } /* 文案叠在缩略图上，居中略偏下（设计稿：325 内 top128 起 → 相对 369 约 top146） */ .pick-card .body { position: absolute; top: 146px; left: 22px; width: 325px; text-align: center; z-index: 2; text-shadow: 0 2px 6px rgba(0,0,0,.45); } .pick-card .name { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 0.04em; margin-bottom: 5px; white-space: nowrap; } /* 推荐理由：最多两行，超出省略。padding 收窄避免贴圆边 */ .pick-card .reason { font-family: 'Alimama FangYuanTi VF', "FangYuanTi", sans-serif; font-size: 22px; font-weight: 400; color: #fff; letter-spacing: 0.04em; padding: 0 36px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } /* 选择孩子页（多存档） */ #kids { position: fixed; inset: 0; z-index: 116; background: linear-gradient(135deg,#1f2a44,#2e3c5e); display: none; flex-direction: column; align-items: center; color: #fff; padding: 40px 24px; overflow: auto; } #kids.show { display: flex; } #kids h1 { font-size: 28px; margin: 0 0 6px; } #kids .kids-sub { color: #c7cdf0; font-size: 16px; margin-bottom: 28px; } #kidsList { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 900px; } .kid-card { width: 230px; background: #fff; color: #1f2a44; border-radius: 18px; padding: 20px; cursor: pointer; border: 3px solid transparent; transition: .15s; box-shadow: 0 6px 18px rgba(0,0,0,.22); position: relative; } .kid-card:active { transform: scale(.97); } .kid-card .kid-ip { font-size: 46px; } .kid-card .kid-name { font-size: 23px; font-weight: 700; margin-top: 8px; } .kid-card .kid-meta { font-size: 14px; color: #6b7693; margin-top: 6px; line-height: 1.5; } .kid-card .kid-edit { position: absolute; top: 12px; right: 12px; font-size: 13px; padding: 6px 12px; border-radius: 14px; background: #eef2fb; color: #4a7bff; border: none; } .kid-card .kid-del { position: absolute; top: 12px; left: 12px; font-size: 13px; padding: 6px 12px; border-radius: 14px; background: #fdecec; color: #e0584b; border: none; } .kid-card.add { background: rgba(255,255,255,.12); color: #fff; border: 2px dashed rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; } .kid-card.add .plus { font-size: 40px; }