67 lines
4.6 KiB
Plaintext
67 lines
4.6 KiB
Plaintext
.chat-page { width:100%; height:100vh; background:#f5f5f5; }
|
|
.msg-list { position:absolute; left:0; right:0; padding:0 20rpx; box-sizing:border-box; overflow-y:auto; }
|
|
.loading-more { text-align:center; font-size:24rpx; color:#999; padding:20rpx 0; }
|
|
.time-tag { text-align:center; margin:28rpx 0; font-size:24rpx; color:#b0b0b0; }
|
|
.msg-wrapper { margin-bottom:12rpx; }
|
|
.msg-row { display:flex; align-items:flex-start; margin-bottom:4rpx; }
|
|
.right { justify-content:flex-end; }
|
|
.left { justify-content:flex-start; }
|
|
.avatar { width:76rpx; height:76rpx; border-radius:50%; background:#e0e0e0; margin:0 12rpx; flex-shrink:0; }
|
|
.bubble { max-width:70%; padding:16rpx 20rpx; border-radius:16rpx; position:relative; word-break:break-all; font-size:30rpx; line-height:1.5; }
|
|
.bubble-left { background:#fff; border-top-left-radius:4rpx; }
|
|
.bubble-right { background:#00aaff; color:#fff; border-top-right-radius:4rpx; }
|
|
.msg-text { color:inherit; }
|
|
.msg-image { max-width:240rpx; border-radius:10rpx; }
|
|
|
|
/* 已读/未读标签：靠右显示 */
|
|
.read-tag {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 20rpx;
|
|
color: #888;
|
|
padding: 4rpx 12rpx 0 0;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
/* 订单气泡 */
|
|
.order-bubble { background:#fff7e0; padding:12rpx; border-radius:8rpx; }
|
|
.order-label { font-size:24rpx; color:#e6a23c; font-weight:600; margin-bottom:8rpx; }
|
|
.order-brief { font-size:24rpx; color:#333; line-height:1.6; }
|
|
.order-price { color:#e6a23c; font-weight:bold; }
|
|
.order-detail-btn { margin-top:10rpx; background:#e6a23c; color:#fff; border-radius:8rpx; }
|
|
|
|
/* 订单详情弹窗 */
|
|
.order-detail-mask { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:999; display:flex; justify-content:center; align-items:center; }
|
|
.order-detail-panel { width:80%; background:#fff; border-radius:20rpx; padding:30rpx; }
|
|
.order-detail-title { font-size:34rpx; font-weight:bold; margin-bottom:20rpx; color:#333; }
|
|
.order-detail-item { font-size:28rpx; margin:16rpx 0; color:#555; }
|
|
.order-detail-close-btn { width:100%; height:80rpx; background:#00aaff; color:#fff; border-radius:12rpx; margin-top:30rpx; font-size:30rpx; }
|
|
|
|
/* 底部输入区域 */
|
|
.input-area { position:fixed; left:0; right:0; background:#f7f7f7; border-top:1rpx solid #ddd; z-index:10; }
|
|
.plus-panel { position:absolute; bottom:100%; left:0; right:0; background:#fff; border-top:1rpx solid #e0e0e0; padding:20rpx; transform:translateY(100%); opacity:0; transition:0.3s; pointer-events:none; z-index:9; }
|
|
.plus-panel.show { transform:translateY(0); opacity:1; pointer-events:auto; }
|
|
.plus-grid { display:flex; justify-content:space-around; }
|
|
.plus-item { display:flex; flex-direction:column; align-items:center; width:120rpx; }
|
|
.plus-icon { font-size:60rpx; }
|
|
.plus-label { font-size:24rpx; color:#666; margin-top:8rpx; }
|
|
.emoji-mask { position:fixed; top:0; left:0; right:0; bottom:0; background:transparent; z-index:8; }
|
|
.emoji-panel { position:absolute; bottom:100%; left:0; right:0; background:#fff; border-top:1rpx solid #e0e0e0; height:380rpx; transform:translateY(100%); opacity:0; transition:0.3s; pointer-events:none; z-index:9; }
|
|
.emoji-panel.show { transform:translateY(0); opacity:1; pointer-events:auto; }
|
|
.emoji-scroll { height:100%; }
|
|
.emoji-grid { display:flex; flex-wrap:wrap; padding:20rpx 10rpx; }
|
|
.emoji-item { width:14.28%; text-align:center; padding:16rpx 0; font-size:44rpx; }
|
|
.pending-image { display:flex; align-items:center; padding:10rpx 20rpx; background:#fff; }
|
|
.pending-thumb { width:80rpx; height:80rpx; border-radius:8rpx; }
|
|
.pending-remove { font-size:30rpx; color:#999; margin-left:10rpx; }
|
|
.write-row { display:flex; padding:0 20rpx 10rpx; align-items:center; }
|
|
.text-input { flex:1; height:76rpx; background:#fff; border-radius:12rpx; padding:0 20rpx; font-size:30rpx; margin-right:12rpx; }
|
|
.send-btn { width:120rpx; height:76rpx; background:#00aaff; color:#fff; font-size:28rpx; font-weight:500; border-radius:12rpx; display:flex; align-items:center; justify-content:center; }
|
|
.plus-btn { width:56rpx; height:56rpx; display:flex; align-items:center; justify-content:center; margin-left:10rpx; }
|
|
.plus-icon-single { font-size:46rpx; color:#00aaff; }
|
|
|
|
/* 双击放大文本弹窗 */
|
|
.detail-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:999; display:flex; align-items:center; justify-content:center; }
|
|
.detail-content { width:80%; max-height:80%; background:#fff; border-radius:16rpx; padding:40rpx; }
|
|
.detail-text { font-size:32rpx; line-height:1.6; word-break:break-all; overflow-y:auto; }
|
|
.copy-btn { width:100%; height:80rpx; background:#00aaff; color:#fff; border-radius:12rpx; margin-top:20rpx; font-size:30rpx; } |