400 lines
7.2 KiB
Plaintext
400 lines
7.2 KiB
Plaintext
/* chat styles */
|
|
/* 顶部栏 */
|
|
.chat-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background: #fafbfc;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-bar {
|
|
height: 120rpx;
|
|
background: linear-gradient(90deg, #2196f3, #3f51b5);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.header-avatar {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 36rpx;
|
|
background: #fff;
|
|
margin-right: 18rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08)
|
|
}
|
|
|
|
.header-title {
|
|
color: #fff;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 消息区 */
|
|
.messages {
|
|
flex: 1;
|
|
padding: 0 10rpx 10px 10px;
|
|
overflow: auto;
|
|
background: #fafbfc;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.msg-time {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #b0b4bc;
|
|
font-size: 26rpx;
|
|
margin: 32rpx 0 16rpx 0;
|
|
}
|
|
|
|
.message {
|
|
/* margin-bottom: 18rpx; */
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.message.user {
|
|
justify-content: flex-end;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.message.service {
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.message.user .bubble {
|
|
order: 1;
|
|
background: #e6f0fe;
|
|
color: #222;
|
|
border-top-right-radius: 8rpx;
|
|
border-bottom-right-radius: 18rpx;
|
|
border-top-left-radius: 18rpx;
|
|
border-bottom-left-radius: 18rpx;
|
|
margin-right: 8rpx;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.message.user .avatar-wrap {
|
|
order: 2;
|
|
margin-left: 8rpx;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.message.service .bubble {
|
|
order: 2;
|
|
background: #fff;
|
|
color: #222;
|
|
border-top-left-radius: 8rpx;
|
|
border-bottom-left-radius: 18rpx;
|
|
border-top-right-radius: 18rpx;
|
|
border-bottom-right-radius: 18rpx;
|
|
margin-left: 8rpx;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.message.service .avatar-wrap {
|
|
order: 1;
|
|
margin-right: 8rpx;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.avatar-wrap {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* bubble-wrap stacks bubble above the timestamp */
|
|
.bubble-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start; /* will be overridden for .user */
|
|
}
|
|
|
|
/* For user messages, bubble-wrap should align to the right */
|
|
.message.user .bubble-wrap {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/* For service messages, bubble-wrap aligns to the left */
|
|
.message.service .bubble-wrap {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background: #fff;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.bubble {
|
|
/* ...existing code... */
|
|
min-height: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bubble {
|
|
max-width: 60vw;
|
|
min-width: 80rpx;
|
|
word-break: break-all;
|
|
padding: 18rpx 22rpx;
|
|
border-radius: 18rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
font-size: 30rpx;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.msg-text {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.msg-image {
|
|
width: 200rpx;
|
|
height: 140rpx;
|
|
border-radius: 10rpx;
|
|
display: block;
|
|
}
|
|
|
|
/* 发送时间样式（气泡下方） */
|
|
.send-time {
|
|
font-size: 22rpx;
|
|
color: #9aa0a6;
|
|
margin-top: 6rpx;
|
|
/* keep the timestamp small and unobtrusive */
|
|
}
|
|
|
|
/* 不同发送方时间对齐 */
|
|
.message.user .send-time {
|
|
text-align: right;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.message.service .send-time {
|
|
text-align: left;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
/* 输入栏 */
|
|
.input-area {
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16rpx 16rpx 0 8rpx;
|
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.btn-image {
|
|
background: none;
|
|
border: none;
|
|
padding: 0 4rpx 0 4rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 32rpx;
|
|
color: #8a8a8a;
|
|
}
|
|
|
|
.btn-image-img {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
margin-right: 8rpx;
|
|
margin-left: 4rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
height: 68rpx;
|
|
border-radius: 12rpx;
|
|
border: 0;
|
|
padding: 0 24rpx;
|
|
font-size: 30rpx;
|
|
background: #eff1f2;
|
|
margin: 0 10rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.btn-send {
|
|
background: #2196f3;
|
|
color: #fff;
|
|
padding: 0 32rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 30rpx;
|
|
border: none;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
/* 获取用户信息弹窗 */
|
|
.overlay {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999
|
|
}
|
|
|
|
.popup {
|
|
width: 80%;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 40rpx 24rpx;
|
|
text-align: center
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
margin-bottom: 12rpx;
|
|
color: #333;
|
|
display: block;
|
|
}
|
|
|
|
.popup-desc {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-bottom: 18rpx
|
|
}
|
|
|
|
.popup-actions {
|
|
display: flex;
|
|
justify-content: space-around
|
|
}
|
|
|
|
.btn-primary {
|
|
margin-top: 40rpx;
|
|
background: #2196f3;
|
|
color: #fff;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
border: none;
|
|
width: 90%;
|
|
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #fff;
|
|
color: #666;
|
|
padding: 12rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
border: 1px solid #eee
|
|
}
|
|
|
|
/* Keep bubble-wrap in the same order/place as the original bubble
|
|
so we don't change the horizontal layout. Only adjust order and
|
|
tiny margins - do not change existing bubble/avatar styles. */
|
|
.message.user .bubble-wrap {
|
|
order: 1; /* same as previous .bubble order for user */
|
|
margin-right: 8rpx; /* match bubble spacing */
|
|
margin-left: 0;
|
|
}
|
|
|
|
.message.service .bubble-wrap {
|
|
order: 2; /* same as previous .bubble order for service */
|
|
margin-left: 8rpx; /* match bubble spacing */
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* 新消息提醒样式 */
|
|
.new-message-tip {
|
|
position: fixed;
|
|
bottom: 200rpx;
|
|
right: 30rpx;
|
|
z-index: 1000;
|
|
animation: tipFadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
.tip-content {
|
|
background: #07c160;
|
|
color: white;
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.tip-text {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.tip-arrow {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
animation: bounce 1s infinite;
|
|
}
|
|
|
|
@keyframes tipFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
transform: translateY(-6rpx);
|
|
}
|
|
60% {
|
|
transform: translateY(-3rpx);
|
|
}
|
|
}
|
|
|
|
/* 订阅按钮样式 */
|
|
.subscribe-btn {
|
|
align-items: center;
|
|
backdrop-filter: blur(10rpx);
|
|
background: rgba(0, 0, 0, .15);
|
|
border-radius: 50%;
|
|
bottom: 180rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, .1);
|
|
display: flex;
|
|
height: 88rpx;
|
|
justify-content: center;
|
|
position: fixed;
|
|
right: 40rpx;
|
|
width: 88rpx;
|
|
z-index: 999;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.subscribe-btn:active {
|
|
transform: scale(.95);
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.subscribe-btn .subscribe-text {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
} |