/* flex 列 + 整页 overflow:hidden:页面本身不滚,列表在内层 scroll-view 里滚。 这样聚焦时 adjust-position 只能均匀上移整屏,不会过度上滚露出大空白 */ page{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg)} .cm-scroll{flex:1;min-height:0;padding:0 var(--sp-5)} .cm-count-head{ padding:var(--sp-3) 0;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:160rpx 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)} /* 评论行 */ .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)} .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); } /* 底部输入条:flex 列里最后一行,不 fixed。整屏靠 adjust-position 均匀上移避让键盘 */ .cm-bar{ flex:none;background:#fff;border-top:1rpx solid var(--line); padding:var(--sp-3) var(--sp-5) calc(16rpx + env(safe-area-inset-bottom)); } .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-bar-row{display:flex;align-items:flex-end;gap:var(--sp-3)} .cm-ta{ flex:1;min-width:0;box-sizing:border-box;min-height:72rpx;max-height:300rpx;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-pic{flex:none;display:flex;align-items:center;color:var(--muted);height:72rpx} .cm-pic.disabled{opacity:.35} .cm-send{ flex:none;height:72rpx;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-tip{margin-top:var(--sp-2);color:var(--muted2);font-size:var(--fs-cap);line-height:1.5} /* 配图预览 */ .img-picker{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-2)} .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); }