899 lines
23 KiB
Text
899 lines
23 KiB
Text
/* 🎨 现代化聊天页面样式 - 深色主题 2025 */
|
||
|
||
/* 🎨 CSS变量定义 - 黑色主题（本文件局部覆盖） */
|
||
page {
|
||
--primary-color: #0A84FF; /* accent */
|
||
--primary-light: #3EA8FF;
|
||
--primary-dark: #0056CC;
|
||
--background-color: #070709; /* 页面背景主色（几乎黑） */
|
||
--surface-color: #0F0F11; /* 气泡/卡片背景 */
|
||
--text-primary: #ECECEC; /* 主要文字-浅色 */
|
||
--text-secondary: #A8A8A8; /* 次要文字 */
|
||
--text-tertiary: #7A7A7A;
|
||
--border-color: rgba(255,255,255,0.06);
|
||
--shadow-light: 0 1rpx 6rpx rgba(0, 0, 0, 0.6);
|
||
--shadow-medium: 0 6rpx 18rpx rgba(0, 0, 0, 0.7);
|
||
--radius-small: 8rpx;
|
||
--radius-medium: 12rpx;
|
||
--radius-large: 20rpx;
|
||
/* 确保page占满可用高度 */
|
||
height: 100%;
|
||
background-color: var(--background-color);
|
||
|
||
}
|
||
|
||
/* 固定深色主题容器样式 */
|
||
.chat-container.theme-dark {
|
||
box-sizing: border-box;
|
||
/* border: 10px solid red; */
|
||
background: linear-gradient(130deg, #111623,#054B58);
|
||
color: var(--text-primary);
|
||
height: 100vh;
|
||
}
|
||
|
||
/* 简化：去除主题切换过渡 */
|
||
.chat-container { transition: background 0s, color 0s; }
|
||
|
||
/* 消息气泡、输入区等关键区域同步过渡，避免突变 */
|
||
.message-content,
|
||
.input-area,
|
||
.emoji-panel,
|
||
.more-panel,
|
||
.time-text,
|
||
.tool-btn,
|
||
.message-wrapper.self .message-content,
|
||
.message-wrapper.other .message-content {
|
||
transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
|
||
}
|
||
|
||
/* 现代化导航栏（chat.wxml 未使用，相关样式移除；保留通用图标尺寸变量） */
|
||
.icon-search, .icon-more {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-medium);
|
||
transition: all 0.3s ease;
|
||
/* when used as <image>, size via width/height; when used as <text>, below font props are ignored */
|
||
font-size: 32rpx;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.icon-search:active, .icon-more:active {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.message-item {
|
||
margin-bottom: 32rpx;
|
||
padding: 0 32rpx;
|
||
animation: messageSlideIn 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes messageSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 现代化时间分隔线 */
|
||
.time-divider {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 40rpx 0 32rpx 0;
|
||
}
|
||
|
||
.time-text {
|
||
background: rgba(255,255,255,0.03);
|
||
color: var(--text-secondary);
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 999rpx;
|
||
letter-spacing: 0.5rpx;
|
||
box-shadow: none;
|
||
backdrop-filter: blur(6rpx);
|
||
}
|
||
|
||
/* 消息容器 - 布局 */
|
||
.message-wrapper {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
width: 100%;
|
||
/* border: 1px solid red; */
|
||
}
|
||
|
||
/* 对方消息：头像在左 */
|
||
.message-wrapper.other {
|
||
flex-direction: row !important;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* 我的消息：头像在右 */
|
||
.message-wrapper.self {
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 头像样式 */
|
||
.avatar {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.message-wrapper.other .avatar {
|
||
margin: 0 32rpx 0 0;
|
||
}
|
||
|
||
.message-wrapper.self .avatar {
|
||
margin: 0 0 0 20rpx;
|
||
}
|
||
|
||
.avatar-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatar-image image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg,#1B1B1D 0%, #101012 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.message-wrapper.self .avatar-placeholder {
|
||
background: linear-gradient(135deg,#0A274E 0%, #05203A 100%);
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
/* 消息主体 */
|
||
.message-body {
|
||
/* flex: 1; */
|
||
/* height: 200rpx; */
|
||
max-width: 500rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
flex-direction: column;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.message-line{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
width: 100%;
|
||
min-width: 0;
|
||
flex-shrink: 0;
|
||
/* height: 90rpx; */
|
||
/* border: 1px solid rgb(12, 235, 98); */
|
||
}
|
||
|
||
.message-wrapper.self .message-line {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.message-wrapper.other .message-line {
|
||
justify-content: flex-start !important;
|
||
}
|
||
|
||
/* 图片消息的 message-line 需要允许内容自适应 */
|
||
.message-line .message-content.image {
|
||
width: auto;
|
||
max-width: 420rpx;
|
||
min-width: 200rpx;
|
||
flex-shrink: 0;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.message-line .message-content.video {
|
||
width: auto;
|
||
max-width: 400rpx;
|
||
min-width: 160rpx;
|
||
flex-shrink: 0;
|
||
padding: 0;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
/* 图片消息外层容器 - 确保有正确的布局 */
|
||
.message-content.image > view {
|
||
display: block;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
.message-wrapper.other .message-body {
|
||
align-items: flex-start;
|
||
margin-left: 0rpx;
|
||
}
|
||
|
||
.message-wrapper.self .message-body {
|
||
align-items: flex-end;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
/* 发送者名称（群聊） */
|
||
.sender-name {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 8rpx;
|
||
padding: 0 16rpx;
|
||
}
|
||
|
||
/* 消息气泡 */
|
||
.message-content {
|
||
border-radius: var(--radius-large);
|
||
padding: 20rpx 28rpx 36rpx 28rpx; /* 为气泡内时间预留底部空间 */
|
||
position: relative;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
/* 让气泡宽度跟随容器铺满（在 message-body 容器内） */
|
||
max-width: 100%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
/* line-height: 1.6; */
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
box-shadow: none;
|
||
backdrop-filter: blur(6rpx);
|
||
transition: all 0.15s ease;
|
||
color: black;
|
||
|
||
}
|
||
.self .message-content:not(.image):not(.video)::after{
|
||
content: "";
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 100%;
|
||
margin-left: -10rpx;
|
||
border: 25rpx solid transparent;
|
||
border-left: 15px solid #4DD1A1;
|
||
}
|
||
.other .message-content:not(.image):not(.video)::before{
|
||
content: "";
|
||
top: 20rpx;
|
||
position: absolute;
|
||
right: 100%;
|
||
margin-right: -10rpx;
|
||
border: 25rpx solid transparent;
|
||
border-right: 15px solid #D9D9D9;
|
||
}
|
||
|
||
/* 对方消息气泡（深色） */
|
||
.message-wrapper.other .message-content {
|
||
background: #D9D9D9;
|
||
/* color: var(--text-primary); */
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
border-top-left-radius: var(--radius-small);
|
||
}
|
||
|
||
.message-wrapper.other .message-content:not(.image):not(.video):hover {
|
||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
/* 对方的图片消息：无气泡 */
|
||
.message-wrapper.other .message-content.image {
|
||
background: transparent;
|
||
padding: 0;
|
||
width: auto;
|
||
max-width: 420rpx;
|
||
margin: 0;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.message-wrapper.other .message-content.image:hover {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 对方的视频消息：无气泡 */
|
||
.message-wrapper.other .message-content.video {
|
||
background: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
position: relative;
|
||
display: block;
|
||
border-radius: 0;
|
||
backdrop-filter: none;
|
||
width: auto;
|
||
max-width: 420rpx;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.message-wrapper.other .message-content.video:hover {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 我的消息气泡（偏蓝） */
|
||
.message-wrapper.self .message-content {
|
||
/* background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); */
|
||
background-color: #4DD1A1;
|
||
/* color: #FFFFFF; */
|
||
border-top-right-radius: var(--radius-small);
|
||
box-shadow: 0 6rpx 20rpx rgba(10,132,255,0.18);
|
||
}
|
||
|
||
.message-wrapper.self .message-content:not(.image):not(.video):hover {
|
||
box-shadow: 0 8rpx 28rpx rgba(10,132,255,0.14);
|
||
}
|
||
|
||
/* 我的图片消息：无气泡 */
|
||
.message-wrapper.self .message-content.image {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
border-top-right-radius: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
position: relative;
|
||
display: block;
|
||
border-radius: 0;
|
||
backdrop-filter: none;
|
||
width: auto;
|
||
max-width: 420rpx;
|
||
align-self: flex-end;
|
||
}
|
||
|
||
.message-wrapper.self .message-content.image:hover {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 我的视频消息：无气泡 */
|
||
.message-wrapper.self .message-content.video {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
border-top-right-radius: 0;
|
||
padding: 0;
|
||
margin-right: 0;
|
||
position: relative;
|
||
display: block;
|
||
border-radius: 0;
|
||
backdrop-filter: none;
|
||
width: auto;
|
||
max-width: 420rpx;
|
||
align-self: flex-end;
|
||
}
|
||
|
||
.message-wrapper.self .message-content.video:hover {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 为气泡内时间/状态预留右侧空间（收窄，避免出现一列明显空白） */
|
||
.message-wrapper.self .message-content:not(.image):not(.video) { padding-right: 70rpx; }
|
||
.message-wrapper.other .message-content:not(.image):not(.video) { padding-right: 70rpx; }
|
||
|
||
/* 语音消息在气泡中的宽度约束，确保不会超出屏幕 */
|
||
.message-content.voice, .message-content.audio {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.message-content.voice .voice-message-container,
|
||
.message-content.audio .voice-message-container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* 气泡内时间与状态（右下角） */
|
||
.bubble-meta {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
bottom: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
opacity: 0.75;
|
||
}
|
||
.bubble-meta { white-space: nowrap; }
|
||
|
||
/* 图片和视频消息不显示时间/状态 */
|
||
.message-content.image .bubble-meta,
|
||
.message-content.video .bubble-meta {
|
||
display: none;
|
||
}
|
||
|
||
.bubble-time {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.75);
|
||
}
|
||
.message-wrapper.other .bubble-time { color: var(--text-secondary); }
|
||
|
||
.meta-status { font-size: 22rpx; line-height: 1; }
|
||
.meta-read { color: #B2E5FF; }
|
||
.meta-delivered { color: rgba(255,255,255,0.9); }
|
||
.meta-sending { color: var(--text-tertiary); animation: pulse 1.5s ease-in-out infinite; }
|
||
.meta-failed { color: #ff6b6b; font-weight: 700; }
|
||
|
||
/* 失败重发行：显示在自己消息气泡下方靠右 */
|
||
.resend-row {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: flex-end;
|
||
margin-top: 8rpx;
|
||
}
|
||
.resend-action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
padding: 8rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
color: #ff6b6b;
|
||
background: rgba(255,107,107,0.1);
|
||
border: 1rpx solid rgba(255,107,107,0.2);
|
||
}
|
||
.resend-action:active { transform: scale(0.98); background: rgba(255,107,107,0.14); }
|
||
.resend-icon { font-size: 22rpx; font-weight: 700; }
|
||
.resend-text { font-size: 24rpx; color: #ff7b7b; }
|
||
|
||
|
||
/* 文本、图片等样式保持，但颜色适配深色 */
|
||
.text-content {
|
||
font-size: 32rpx;
|
||
line-height: 1.6;
|
||
font-weight: 400;
|
||
letter-spacing: 0.5rpx;
|
||
color: inherit;
|
||
}
|
||
|
||
/* 撤回消息样式 */
|
||
.recalled-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
font-size: 28rpx;
|
||
color: var(--text-tertiary);
|
||
text-align: center;
|
||
padding: 20rpx 30rpx;
|
||
background: transparent;
|
||
border: 1rpx dashed var(--border-color);
|
||
border-radius: var(--radius-medium);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 上传进度条样式 */
|
||
.upload-progress {
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
.upload-progress-bar {
|
||
width: 240rpx;
|
||
height: 8rpx;
|
||
background: rgba(255,255,255,0.1);
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
.upload-progress-fill {
|
||
height: 100%;
|
||
background: var(--primary-color);
|
||
}
|
||
.upload-progress-text {
|
||
font-size: 22rpx;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.recalled-icon {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.recalled-text {
|
||
font-style: italic;
|
||
}
|
||
|
||
.message-content.recalled {
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border: none !important;
|
||
min-width: 240rpx;
|
||
}
|
||
|
||
.theme-light .recalled-content {
|
||
color: var(--text-secondary);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
.image-content {
|
||
width: 420rpx;
|
||
max-width: 420rpx;
|
||
height: auto;
|
||
display: block;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.image-content:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.error-content {
|
||
padding: 20rpx;
|
||
background: rgba(255, 60, 60, 0.08);
|
||
border: 1px solid rgba(255,60,60,0.12);
|
||
border-radius: 12rpx;
|
||
max-width: 400rpx;
|
||
}
|
||
|
||
.error-text { color: #ff6b6b; }
|
||
.error-detail { color: #ffb86b; }
|
||
.error-original { color: var(--text-secondary); }
|
||
|
||
/* 文件消息 */
|
||
.file-content {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 240rpx;
|
||
padding: 20rpx;
|
||
background: rgba(255,255,255,0.02);
|
||
border-radius: var(--radius-medium);
|
||
backdrop-filter: blur(6rpx);
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.file-content:active {
|
||
transform: scale(0.98);
|
||
background: rgba(255,255,255,0.03);
|
||
}
|
||
|
||
/* 卡片、贴纸等 */
|
||
.card-content { background: rgba(255,255,255,0.02); }
|
||
.card-name, .file-name { color: var(--text-primary); }
|
||
.card-phone, .file-size { color: var(--text-secondary); }
|
||
|
||
.system-content { background: rgba(255,255,255,0.02); color: var(--text-secondary); }
|
||
|
||
.video-content {
|
||
width: 100%;
|
||
height: auto;
|
||
max-width: 420rpx;
|
||
max-height: 820rpx;
|
||
min-width: 160rpx;
|
||
min-height: 360rpx;
|
||
border-radius: 16rpx;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
display: block;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
}
|
||
/* 音频、视频、位置等适配 */
|
||
.location-content { background: rgba(255,255,255,0.02); border: 1rpx solid rgba(255,255,255,0.03); }
|
||
/* icon images inside message content */
|
||
.location-icon, .file-icon { width: 36rpx; height: 36rpx; margin-right: 12rpx; display: inline-block; }
|
||
|
||
@keyframes pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.05)} }
|
||
|
||
.load-more-top {
|
||
text-align: center;
|
||
padding: 18rpx 28rpx;
|
||
background: rgba(255,255,255,0.02);
|
||
margin-bottom: 18rpx;
|
||
border-radius: 12rpx;
|
||
margin: 0 16rpx 18rpx 16rpx;
|
||
}
|
||
|
||
.load-more-text { color: var(--text-secondary); font-size: 26rpx; }
|
||
|
||
/* 输入区域 - 使用 fixed 定位固定在底部 */
|
||
.input-area {
|
||
background: linear-gradient(180deg, rgba(12,12,14,0.98) 0%, rgba(10,10,12,0.98) 100%);
|
||
border-top: 1rpx solid rgba(255,255,255,0.03);
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
transition: bottom 0.3s ease;
|
||
backdrop-filter: blur(10rpx);
|
||
box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.7);
|
||
/* max-height: 30vh; */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.input-row {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 16rpx 24rpx;
|
||
min-height: 80rpx;
|
||
max-height: 200rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tool-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
min-height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
border-radius: var(--radius-medium);
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
transition: all 0.2s ease;
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
}
|
||
|
||
.tool-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.02); }
|
||
|
||
.text-input-wrapper {
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
min-width: 0; /* 确保能够收缩 */
|
||
max-width: calc(100% - 160rpx); /* 为左右按钮预留空间 */
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.text-input {
|
||
background: rgba(255,255,255,0.02);
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
border-radius: var(--radius-large);
|
||
padding: 16rpx 24rpx;
|
||
font-size: 32rpx;
|
||
min-height: 48rpx;
|
||
max-height: 120rpx;
|
||
width: 100%;
|
||
color: var(--text-primary);
|
||
transition: all 0.18s ease;
|
||
resize: none;
|
||
line-height: 1.4;
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
white-space: pre-wrap;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
box-sizing: border-box;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.text-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06); }
|
||
|
||
/* 语音输入容器与文本输入保持同样的伸展规则 */
|
||
.voice-input-wrapper {
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
min-width: 0; /* 允许收缩，避免被按钮挤出 */
|
||
max-width: calc(100% - 160rpx); /* 为左右按钮预留空间，和 text-input-wrapper 保持一致 */
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.voice-btn {
|
||
background: rgba(255,255,255,0.02);
|
||
color: var(--text-primary);
|
||
flex-shrink: 0;
|
||
min-height: 48rpx;
|
||
border-radius: var(--radius-large);
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
font-size: 28rpx;
|
||
align-self: flex-end;
|
||
width: 100%; /* 占满容器宽度 */
|
||
box-sizing: border-box;
|
||
padding: 16rpx 24rpx; /* 与文本输入视觉统一 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 1.4;
|
||
}
|
||
.voice-btn.recording { background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%); color: white; }
|
||
|
||
.send-btn {
|
||
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
|
||
color: white;
|
||
padding: 16rpx 28rpx;
|
||
border-radius: var(--radius-large);
|
||
border: none;
|
||
font-size: 28rpx;
|
||
align-self: flex-end;
|
||
flex-shrink: 0;
|
||
min-height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 表情面板 */
|
||
.emoji-panel {
|
||
background: linear-gradient(180deg, rgba(16,16,18,0.98) 0%, rgba(12,12,14,0.98) 100%);
|
||
border-top: 1rpx solid rgba(255,255,255,0.03);
|
||
padding: 24rpx 20rpx;
|
||
max-height: 400rpx;
|
||
backdrop-filter: blur(12rpx);
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.emoji-scroll {
|
||
height: 100%;
|
||
max-height: 352rpx; /* 400rpx - 48rpx padding */
|
||
}
|
||
|
||
.emoji-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
gap: 16rpx;
|
||
padding: 8rpx 0 calc(env(safe-area-inset-bottom) + 20rpx) 0; /* 为底部安全区留白，避免被遮挡 */
|
||
}
|
||
|
||
.emoji-item {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 52rpx;
|
||
border-radius: var(--radius-medium);
|
||
background: rgba(255,255,255,0.02);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.emoji-item:active {
|
||
background: rgba(255,255,255,0.08);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 表情滚动底部占位，提供安全区滚动空间 */
|
||
.emoji-bottom-spacer { height: env(safe-area-inset-bottom); }
|
||
|
||
/* 更多面板 */
|
||
.more-panel-overlay {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: flex-end; /* panel at bottom */
|
||
justify-content: center;
|
||
background: rgba(0,0,0,0.6);
|
||
z-index: 2300; /* above input-area (1000) and other floating widgets */
|
||
}
|
||
|
||
.more-panel {
|
||
background: var(--surface-color, #0B0B0D);
|
||
color: var(--text-primary);
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 12rpx 0 24rpx 0;
|
||
width: 100%;
|
||
max-height: 60vh;
|
||
box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.6);
|
||
z-index: 2400; /* ensure panel sits above overlay and any page floats */
|
||
}
|
||
|
||
/* theme-light overrides for panel */
|
||
.theme-light .more-panel-overlay { background: rgba(0,0,0,0.35); }
|
||
.theme-light .more-panel { background: linear-gradient(180deg, var(--background-color) 0%, #F8F8F8 100%); color: var(--text-primary); box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.08); }
|
||
.more-panel-header { display:flex; justify-content:space-between; align-items:center; padding:24rpx 28rpx; border-bottom:1rpx solid rgba(255,255,255,0.03); }
|
||
.more-panel-title { font-size:36rpx; font-weight:600; color:var(--text-primary); }
|
||
.more-panel-header { position: relative; }
|
||
.more-panel-close { width:56rpx; height:56rpx; position:absolute; right:16rpx; top:12rpx; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.12); border-radius:28rpx; font-size:28rpx; color:var(--text-secondary); }
|
||
.more-panel-close:active { background: rgba(0,0,0,0.16); transform:scale(0.96); }
|
||
|
||
/* more panel content layout */
|
||
.more-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx 24rpx;
|
||
padding: 8rpx 20rpx 12rpx 20rpx;
|
||
justify-content: space-around; /* center items evenly */
|
||
align-items: center;
|
||
}
|
||
|
||
.more-item {
|
||
min-width: 84rpx;
|
||
width: 22%;
|
||
max-width: 120rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255,255,255,0.02);
|
||
border-radius: 16rpx;
|
||
box-shadow: var(--shadow-light);
|
||
color: var(--text-primary);
|
||
text-align: center;
|
||
padding: 6rpx;
|
||
}
|
||
|
||
.more-item:active { transform: scale(0.96); background: rgba(255,255,255,0.03); }
|
||
|
||
.more-icon { width: 64rpx; height: 64rpx; margin-bottom: 6rpx; display: block; }
|
||
.more-text { font-size: 22rpx; color: var(--text-secondary); line-height: 1.1; }
|
||
|
||
/* ensure panel respects safe-area at bottom */
|
||
.more-panel { padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx); }
|
||
|
||
/* 录音提示 */
|
||
.recording-tips { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background: rgba(0,0,0,0.85); color:var(--text-primary); padding:28rpx 36rpx; border-radius:12rpx; font-size:30rpx; z-index:2000; }
|
||
|
||
/* 加载 */
|
||
.loading-container { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2000; background: rgba(0,0,0,0.75); border-radius:16rpx; padding:28rpx; box-shadow:0 12rpx 36rpx rgba(0,0,0,0.7); backdrop-filter: blur(12rpx); }
|
||
.loading-spinner { width:56rpx; height:56rpx; border:4rpx solid rgba(255,255,255,0.08); border-top:4rpx solid var(--primary-color); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:12rpx; }
|
||
.loading-text { font-size:26rpx; color:var(--text-secondary); font-weight:500; }
|
||
|
||
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
|
||
|
||
/* 滚动到底部按钮 */
|
||
|
||
/* 移除主题切换遮罩动画相关样式 */
|
||
.scroll-to-bottom-btn { position:fixed; right:32rpx; bottom:240rpx; width:88rpx; height:88rpx; background: rgba(255,255,255,0.06); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; transform:translateY(20rpx) scale(0.8); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); backdrop-filter: blur(10rpx); box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.6); }
|
||
.scroll-to-bottom-btn.show { opacity:1; transform:translateY(0) scale(1); }
|
||
.scroll-to-bottom-btn:active { transform: translateY(0) scale(0.95); background: rgba(255,255,255,0.08); }
|
||
.btn-icon { color: var(--text-primary); font-size:36rpx; font-weight:bold; text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.6); }
|
||
|
||
/* 其他小节样式保持原逻辑，颜色使用变量或深色背景 */
|
||
|
||
/* ===== 兼容性修正：避免底部白色撕裂条 ===== */
|
||
/* 将容器改为 column flex，使 scroll-view 能正确填满剩余高度（避免 calc(100vh - px) 的子像素或安全区差异） */
|
||
.chat-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%; /* 改为 100% 以适应页面内容区域，而非整个视口 */
|
||
position: relative; /* make absolute children position relative to this container */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* message-list 使用 fixed 定位固定在视口，不受键盘影响 */
|
||
.message-list {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 100px; /* 默认值，会被动态 style 覆盖 */
|
||
width: 100%;
|
||
overflow: hidden;
|
||
padding: 0 0 0 0; /* 增加底部内边距 */
|
||
margin: 0;
|
||
background: transparent;
|
||
box-sizing: border-box;
|
||
z-index: 1;
|
||
transition: bottom 0.3s ease; /* 平滑过渡 */
|
||
}
|
||
|
||
/* 输入区按钮图标基类（与 wxml 中动态类匹配） */
|
||
.icon-emoji, .icon-mic, .icon-keyboard {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: block;
|
||
}
|
||
|
||
/* ensure the 'more' tool icon matches size */
|
||
.tool-btn .icon-more { width: 48rpx; height: 48rpx; display: block; }
|
||
|
||
/* inline icon inside voice button label */
|
||
.inline-icon { width: 32rpx; height: 32rpx; margin-right: 8rpx; vertical-align: middle; display: inline-block; }
|