feat(fe): 评论改小红书式展开输入面板;FAB 统一暖橘;顶部去冗余入口
- 评论:底部平时一条细「说点什么」,点开才展开大写评论面板 (大输入框+工具栏+发送,浮在键盘上方)。失焦时有草稿保持展开, 避免点发送因面板收起而丢点击 - FAB 主题色统一:社区发帖 FAB 从深色改成和首页肉垫一致的暖橘圆钮 - 报告页顶部筛选去掉「添加」(报告页不需要建档入口) - 社区去掉顶部「发布」按钮,发帖统一走右下角悬浮按钮 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -136,22 +136,35 @@
|
||||
background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-cap);
|
||||
}
|
||||
.cm-cancel{display:flex;align-items:center}
|
||||
/* 相机 + 输入框 + 发送 合成一条圆角输入栏,像聊天输入条;
|
||||
textarea 撑开时相机和发送贴着底部 */
|
||||
.cm-inputrow{
|
||||
display:flex;align-items:flex-end;gap:var(--sp-2);
|
||||
background:var(--surface-2);border:1rpx solid var(--line);
|
||||
border-radius:32rpx;padding:10rpx var(--sp-2) 10rpx var(--sp-3);
|
||||
/* 收起态:底部一条细条,点了才展开成大面板(小红书那套) */
|
||||
.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-pic{flex:none;display:flex;align-items:center;height:64rpx;color:var(--muted)}
|
||||
.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{
|
||||
flex:1;min-width:0;min-height:64rpx;max-height:280rpx;height:auto;
|
||||
padding:16rpx 0;background:transparent;font-size:var(--fs-md);line-height:1.4;
|
||||
width:100%;box-sizing:border-box;min-height:200rpx;max-height:520rpx;height:auto;
|
||||
padding:var(--sp-4);background:var(--surface-2);border-radius:var(--r-md);
|
||||
font-size:var(--fs-lg);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:64rpx;padding:0 var(--sp-4);border-radius:var(--r-full);
|
||||
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-sm);font-weight:var(--fw-b);transition:.16s ease;
|
||||
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-count{display:block;text-align:right;margin-top:6rpx;color:var(--muted2);font-size:var(--fs-cap)}
|
||||
|
||||
Reference in New Issue
Block a user