You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
2.7 KiB
34 lines
2.7 KiB
.chat-page { display:flex; flex-direction:column; height:100vh; background:#f5f5f5; }
|
|
.chat-topbar { display:flex; align-items:center; justify-content:center; position:sticky; top:0; z-index:10; height:88rpx; background:linear-gradient(90deg,#7B1FA2,#E91E63); color:#fff; box-shadow:0 6rpx 12rpx rgba(0,0,0,0.1); }
|
|
.chat-topbar .back { position:absolute; left:20rpx; font-size:28rpx; opacity:0.9; }
|
|
.chat-topbar .title { font-size:32rpx; font-weight:700; }
|
|
.avatar { width:64rpx; height:64rpx; border-radius:50%; margin-right:16rpx; }
|
|
.sys-info { display:flex; align-items:center; background:#fff; padding:20rpx; box-shadow:0 4rpx 12rpx rgba(0,0,0,0.05); border-radius:16rpx; margin:20rpx 0; }
|
|
.peer-info .name { font-size:28rpx; color:#333; font-weight:600; }
|
|
.peer-info .tip { font-size:22rpx; color:#999; }
|
|
.messages { flex:1; padding:20rpx; }
|
|
.load-more { text-align:center; padding:10rpx; color:#666; }
|
|
.time-line { text-align:center; color:#999; font-size:22rpx; margin:10rpx 0; }
|
|
.sys-row { display:flex; justify-content:center; margin:12rpx 0; }
|
|
.sys-tip { max-width:80%; background:#e0e0e0; color:#333; border-radius:20rpx; padding:10rpx 16rpx; font-size:24rpx; box-shadow:0 2rpx 6rpx rgba(0,0,0,0.05); }
|
|
.sys-tip.revoked { background:#eee; color:#666; }
|
|
.sys-tip.error { background:#ffe9e9; color:#d93025; }
|
|
.msg { display:flex; align-items:flex-end; margin-bottom:20rpx; }
|
|
.msg.other { flex-direction:row; }
|
|
.msg.mine { flex-direction:row-reverse; }
|
|
.msg-avatar { width:48rpx; height:48rpx; border-radius:50%; margin:0 10rpx; }
|
|
.bubble { max-width:60%; border-radius:16rpx; padding:12rpx 16rpx; box-shadow:0 2rpx 8rpx rgba(0,0,0,0.08); background:#fff; }
|
|
.msg.mine .bubble { background:#2ecc71; color:#fff; }
|
|
.text { font-size:26rpx; color:inherit; }
|
|
.image { width:360rpx; height:240rpx; border-radius:12rpx; }
|
|
.time { font-size:20rpx; color:#999; margin:0 8rpx; }
|
|
.input-bar { display:flex; flex-direction:column; gap:12rpx; background:#fff; padding:12rpx 16rpx; border-top:1rpx solid #eee; }
|
|
.input-top { display:flex; }
|
|
.input-bottom { display:flex; align-items:center; justify-content:space-between; }
|
|
.circle-btn { width:48rpx; height:48rpx; border-radius:50%; border:2rpx solid #333; background:#fff; display:flex; align-items:center; justify-content:center; font-size:22rpx; }
|
|
.left-btn { margin-right:0; }
|
|
.right-btn { margin-left:0; }
|
|
.text-input { flex:1; width:100%; background:#f7f7f7; border-radius:20rpx; padding:16rpx 20rpx; font-size:30rpx; min-height:64rpx; height:64rpx; }
|
|
.send-circle { border-color:#00c853; color:#00c853; }
|
|
.draft-row { display:flex; justify-content:center; background:#f5f5f5; }
|
|
.draft-tip { max-width:90%; background:#e0e0e0; color:#333; border-radius:20rpx; padding:12rpx 18rpx; font-size:26rpx; margin:12rpx; } |