style(fe): 评论弹窗重做——空态加图标、输入区合成圆角输入栏
- 空态从一行飘字改成 图标+两行文案 居中 - 相机/输入框/发送合成一条聊天式圆角输入栏,字数只在输入时显示 - 头部标题加粗 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -61,7 +61,11 @@ module.exports.sel = function (map, key, index, def) {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view wx:if="{{!comments.length}}" class="empty lg">还没有评论,来抢个沙发</view>
|
<view wx:if="{{!comments.length}}" class="cmp-empty">
|
||||||
|
<view class="cmp-empty-ic"><pt-icon name="comment" size="{{72}}"></pt-icon></view>
|
||||||
|
<view class="cmp-empty-t">还没有评论</view>
|
||||||
|
<view class="cmp-empty-p">来抢个沙发,说点什么吧~</view>
|
||||||
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<view class="cmp-dock" style="padding-bottom:{{kbHeight ? kbHeight + 'px' : 'calc(20rpx + env(safe-area-inset-bottom))'}}">
|
<view class="cmp-dock" style="padding-bottom:{{kbHeight ? kbHeight + 'px' : 'calc(20rpx + env(safe-area-inset-bottom))'}}">
|
||||||
@@ -75,18 +79,18 @@ module.exports.sel = function (map, key, index, def) {
|
|||||||
<view class="img-del" catchtap="onRemoveCommentImage" data-index="{{index}}"><pt-icon name="close" size="{{24}}"></pt-icon></view>
|
<view class="img-del" catchtap="onRemoveCommentImage" data-index="{{index}}"><pt-icon name="close" size="{{24}}"></pt-icon></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<textarea class="textarea cm-ta" placeholder="{{replyTo.name ? '回复 @' + replyTo.name : '有话要说,快来评论'}}"
|
<view class="cm-inputrow">
|
||||||
placeholder-class="placeholder" value="{{commentText}}" bindinput="onCommentInput"
|
|
||||||
focus="{{cmFocus}}" bindfocus="onCommentFocus" bindblur="onCommentBlur"
|
|
||||||
maxlength="500" auto-height="{{true}}" show-confirm-bar="{{false}}"
|
|
||||||
adjust-position="{{false}}" cursor-spacing="12"></textarea>
|
|
||||||
<view class="cm-bar">
|
|
||||||
<view class="cm-pic" catchtap="onPickCommentImages">
|
<view class="cm-pic" catchtap="onPickCommentImages">
|
||||||
<pt-icon name="photo" size="{{36}}"></pt-icon>
|
<pt-icon name="photo" size="{{40}}"></pt-icon>
|
||||||
</view>
|
</view>
|
||||||
<text class="cm-count">{{commentText.length}}/500</text>
|
<textarea class="cm-ta" placeholder="{{replyTo.name ? '回复 @' + replyTo.name : '有话要说,快来评论'}}"
|
||||||
|
placeholder-class="placeholder" value="{{commentText}}" bindinput="onCommentInput"
|
||||||
|
focus="{{cmFocus}}" bindfocus="onCommentFocus" bindblur="onCommentBlur"
|
||||||
|
maxlength="500" auto-height="{{true}}" show-confirm-bar="{{false}}"
|
||||||
|
adjust-position="{{false}}" cursor-spacing="12"></textarea>
|
||||||
<view class="cm-send {{commentText ? 'on' : ''}}" catchtap="onSendComment">发送</view>
|
<view class="cm-send {{commentText ? 'on' : ''}}" catchtap="onSendComment">发送</view>
|
||||||
</view>
|
</view>
|
||||||
|
<text wx:if="{{commentText.length}}" class="cm-count">{{commentText.length}}/500</text>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
|
|||||||
@@ -87,8 +87,20 @@
|
|||||||
.sheet.sheet-cmp{display:flex;flex-direction:column;height:82vh;padding-bottom:0}
|
.sheet.sheet-cmp{display:flex;flex-direction:column;height:82vh;padding-bottom:0}
|
||||||
.cmp-head{
|
.cmp-head{
|
||||||
flex:none;text-align:center;padding:0 0 var(--sp-3);
|
flex:none;text-align:center;padding:0 0 var(--sp-3);
|
||||||
font-size:var(--fs-sm);color:var(--muted);border-bottom:1rpx solid var(--line);
|
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-list{flex:1;min-height:0;padding:var(--sp-3) var(--sp-5) 0}
|
||||||
.cmp-dock{
|
.cmp-dock{
|
||||||
flex:none;background:#fff;border-top:1rpx solid var(--line);
|
flex:none;background:#fff;border-top:1rpx solid var(--line);
|
||||||
@@ -124,13 +136,22 @@
|
|||||||
background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-cap);
|
background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-cap);
|
||||||
}
|
}
|
||||||
.cm-cancel{display:flex;align-items:center}
|
.cm-cancel{display:flex;align-items:center}
|
||||||
.cm-ta{min-height:120rpx;height:auto;background:var(--surface-2)}
|
/* 相机 + 输入框 + 发送 合成一条圆角输入栏,像聊天输入条;
|
||||||
.cm-bar{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
|
textarea 撑开时相机和发送贴着底部 */
|
||||||
.cm-pic{display:flex;align-items:center;color:var(--muted)}
|
.cm-inputrow{
|
||||||
.cm-count{margin-left:auto;color:var(--muted2);font-size:var(--fs-cap)}
|
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-pic{flex:none;display:flex;align-items:center;height:64rpx;color:var(--muted)}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
.cm-send{
|
.cm-send{
|
||||||
flex:none;height:72rpx;padding:0 var(--sp-5);border-radius:var(--r-full);
|
flex:none;height:64rpx;padding:0 var(--sp-4);border-radius:var(--r-full);
|
||||||
display:flex;align-items:center;justify-content:center;
|
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-sm);font-weight:var(--fw-b);transition:.16s ease;
|
||||||
}
|
}
|
||||||
.cm-send.on{background:var(--cta)}
|
.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