.overlay{ position:fixed;inset:0;z-index:200; background:rgba(26,18,12,.30); opacity:0;pointer-events:none;transition:.2s ease; backdrop-filter:blur(6rpx);-webkit-backdrop-filter:blur(6rpx); } .overlay.show{opacity:1;pointer-events:auto} .sheet{ position:absolute;left:0;right:0;bottom:0; background:#fff;border-radius:48rpx 48rpx 0 0; padding:var(--sp-5) 0 0; transform:translateY(106%);transition:.24s ease; box-shadow:var(--sd-3); } .overlay.show .sheet{transform:translateY(0)} .sheet-scroll{ box-sizing:border-box; /* exportData / manageTasks / comments 是最长的三型,圆角间距变化后靠这个上限内滚 */ max-height:80vh; padding:0 var(--sp-5) calc(120rpx + env(safe-area-inset-bottom)); } .sheet-scroll::-webkit-scrollbar,.plan-chat::-webkit-scrollbar{width:0;height:0;display:none} .sheetbar{width:80rpx;height:8rpx;border-radius:var(--r-full);background:#E1D8CF;margin:0 auto var(--sp-4)} .sheet-h3{font-size:var(--fs-xl);font-weight:var(--fw-b);margin-bottom:var(--sp-3)} .sheet-p{font-size:var(--fs-md);color:var(--text-2);line-height:1.65;margin-bottom:var(--sp-4)} .sheet-p.pre,.poster-list.pre{white-space:pre-line} .poster-h3{font-size:var(--fs-xl);font-weight:var(--fw-b);margin-bottom:var(--sp-3)} .ai-input-row{display:flex;gap:var(--sp-3);align-items:center} .ai-input-row .input{flex:1} .ai-send{height:88rpx;line-height:88rpx;padding:0 var(--sp-4)} /* 弹层内的日期选择器展示 */ .picker-box{color:var(--text)} .del-btn{background:var(--red-soft);color:var(--red-ink)} /* 管理任务 / 管理宠物 */ .mtask-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1rpx solid var(--line)} .mtask-body{flex:1;min-width:0} .mtask-b{font-size:var(--fs-md);font-weight:var(--fw-b)} .mtask-pri{ margin-left:var(--sp-2);font-size:var(--fs-cap);font-weight:var(--fw-b); color:var(--primary-ink);background:var(--primary-soft);padding:2rpx var(--sp-2);border-radius:var(--r-full); } .mtask-p{margin-top:6rpx;font-size:var(--fs-sm);color:var(--muted)} .mtask-op{ flex:none;font-size:var(--fs-sm);font-weight:var(--fw-b);color:var(--primary-dark); padding:var(--sp-1) var(--sp-3);background:var(--surface-2);border-radius:var(--r-xs); } .mtask-op.del{color:var(--red-ink)} .mtask-form-row{display:flex;align-items:center;gap:var(--sp-3)} /* 这条覆写了全局 .seg-btn 的高度,全局值变化时要一起看 */ .mtask-form-row .seg-btn{flex:none;padding:0 var(--sp-4);height:var(--h-sm);line-height:var(--h-sm)} .mtask-form-row .picker-box{flex:1} /* 图片选择器 */ .img-picker{display:flex;flex-wrap:wrap;gap:var(--sp-3)} .img-thumb{position:relative;width:160rpx;height:160rpx;border-radius:var(--r-sm);overflow:hidden} .img-thumb image{width:100%;height:100%} .img-del{ position:absolute;top:0;right:0;width:44rpx;height:44rpx; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.55);color:#fff;border-radius:0 var(--r-sm) 0 var(--r-sm); } .img-add{ width:160rpx;height:160rpx;border-radius:var(--r-sm);border:2rpx dashed #D8CFC4; display:flex;align-items:center;justify-content:center;color:var(--muted2);background:var(--surface-2); } /* 导出健康档案 */ .export-box{ max-height:560rpx;overflow-y:auto;background:var(--surface-2);border-radius:var(--r-md); padding:var(--sp-4);font-size:var(--fs-sm);line-height:1.7;color:var(--text-2);white-space:pre-line; border:1rpx solid var(--line);margin-bottom:var(--sp-4); } .export-box::-webkit-scrollbar{width:0;height:0;display:none} .mine-tag{ margin-left:var(--sp-1);font-size:var(--fs-cap);font-weight:var(--fw-b); color:var(--primary-ink);background:var(--primary-soft);padding:2rpx var(--sp-1);border-radius:var(--r-full); } /* 离屏画布:挪到可视区外而不是 display:none,否则 selectorQuery 取不到节点 */ .poster-canvas{position:fixed;left:-9999rpx;top:0;width:600rpx;height:840rpx} /* ── 评论:头 + 滚动列表 + 常驻输入栏 ── */ .sheet.sheet-cmp{display:flex;flex-direction:column;height:82vh;padding-bottom:0} .cmp-head{ flex:none;text-align:center;padding:0 0 var(--sp-3); font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);border-bottom:1rpx solid var(--line); } /* 空态:图标 + 两行字,居中在列表区,不再是一行字飘在大片留白里 */ .cmp-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:120rpx 0;color:var(--muted); } .cmp-empty-ic{ width:140rpx;height:140rpx;border-radius:50%;margin-bottom:var(--sp-4); display:flex;align-items:center;justify-content:center; background:var(--primary-soft);color:var(--primary); } .cmp-empty-t{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text-2)} .cmp-empty-p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--muted2)} .cmp-list{flex:1;min-height:0;padding:var(--sp-3) var(--sp-5) 0} .cmp-dock{ flex:none;background:#fff;border-top:1rpx solid var(--line); padding:var(--sp-3) var(--sp-5) calc(20rpx + env(safe-area-inset-bottom)); transition:padding-bottom .2s ease; } /* 展开态:给顶部一点投影,和列表分层 */ .cmp-dock.open{box-shadow:0 -8rpx 24rpx rgba(0,0,0,.05)} .cm{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0} .cm-av{ width:64rpx;height:64rpx;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; background:var(--primary-soft);color:var(--primary-ink); font-size:var(--fs-md);font-weight:var(--fw-b); } .cm-av-sm{width:48rpx;height:48rpx;font-size:var(--fs-sm)} .cm-body{flex:1;min-width:0} .cm-name{font-size:var(--fs-sm);color:var(--muted)} .cm-at{color:var(--muted2)} .cm-text{margin-top:6rpx;font-size:var(--fs-md);line-height:1.55;word-break:break-word} .cm-imgs{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)} .cm-img{width:150rpx;height:150rpx;border-radius:var(--r-sm)} .cm-meta{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-cap);color:var(--muted2)} .cm-reply-btn{color:var(--muted)} .cm-del{color:var(--red-ink)} .cm-replies{margin-top:var(--sp-2)} .cm-reply{display:flex;gap:var(--sp-2);padding:var(--sp-2) 0} .cm-more{margin-top:4rpx;font-size:var(--fs-cap);color:var(--muted)} /* 「回复 @xxx」的提示条 */ .cm-replying{ display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2); padding:4rpx var(--sp-3);border-radius:var(--r-full); background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-cap); } .cm-cancel{display:flex;align-items:center} /* 收起态:底部一条细条,点了才展开成大面板(小红书那套) */ .cm-collapsed{ flex:none;display:flex;align-items:center;gap:var(--sp-3); background:#fff;border-top:1rpx solid var(--line); padding:var(--sp-3) var(--sp-5) calc(20rpx + env(safe-area-inset-bottom)); } .cm-collapsed-pill{ flex:1;min-width:0;height:76rpx;line-height:76rpx;padding:0 var(--sp-5); border-radius:var(--r-full);background:var(--surface-2);color:var(--muted2); font-size:var(--fs-md);overflow:hidden;white-space:nowrap;text-overflow:ellipsis; } .cm-collapsed-pill.has{color:var(--text)} .cm-collapsed-ic{flex:none;display:flex;align-items:center;color:var(--muted)} /* 展开态:大写评论面板 */ .cm-dock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)} .cm-dock-title{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)} .cm-dock-close{display:flex;align-items:center;color:var(--muted);padding:var(--sp-1)} .cm-ta{ width:100%;box-sizing:border-box;min-height:96rpx;max-height:360rpx;height:auto; padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border-radius:var(--r-md); font-size:var(--fs-md);line-height:1.5; } .cm-toolbar{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)} .cm-pic{flex:none;display:flex;align-items:center;color:var(--muted)} .cm-count{margin-left:auto;color:var(--muted2);font-size:var(--fs-cap)} .cm-send{ flex:none;height:76rpx;padding:0 var(--sp-6);border-radius:var(--r-full); display:flex;align-items:center;justify-content:center; background:var(--line);color:#fff;font-size:var(--fs-md);font-weight:var(--fw-b);transition:.16s ease; } .cm-send.on{background:var(--cta)} .cm-pic.disabled{opacity:.35} .cm-tip{margin-top:var(--sp-2);color:var(--muted2);font-size:var(--fs-cap);line-height:1.5}