473 lines
10 KiB
Plaintext
473 lines
10 KiB
Plaintext
|
/**
|
|||
|
|
* 自定义底部导航栏 - 公众号客服交互模式
|
|||
|
|
*
|
|||
|
|
* 两种状态：
|
|||
|
|
* 状态1（普通）：[首页] [设备] [任务] [⌨]
|
|||
|
|
* 状态2（聊天）：[☰] [🔊/⌨] [输入框........] [🎤] [😀] [+]
|
|||
|
|
*
|
|||
|
|
* 统一配色方案：
|
|||
|
|
* 主题色：#1677FF（蓝），用于高亮、选中态、交互反馈
|
|||
|
|
* 背景：#FFFFFF（白）/ #1A1A1A（深黑）
|
|||
|
|
* 边框：#E8E8E8（浅灰）/ #2E2E2E（深灰）
|
|||
|
|
* 文字：#333333（深灰）/ #999999（灰）/ #E8E8E8（浅白）
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/* ============================================================
|
|||
|
|
一、设计令牌（统一颜色变量）
|
|||
|
|
============================================================ */
|
|||
|
|
|
|||
|
|
/* 状态1（普通模式）*/
|
|||
|
|
.tab-bar {
|
|||
|
|
/* 背景与边框 */
|
|||
|
|
--bg-primary: #ffffff;
|
|||
|
|
--border-primary: #e8e8e8;
|
|||
|
|
/* Tab 文字 */
|
|||
|
|
--tab-inactive: #999999;
|
|||
|
|
--tab-active: #333333;
|
|||
|
|
/* 键盘按钮 */
|
|||
|
|
--kb-border: #bbbbbb;
|
|||
|
|
--kb-icon: #666666;
|
|||
|
|
--kb-border-left: #f0f0f0;
|
|||
|
|
/* 聊天模式工具按钮（浅色背景用深色图标） */
|
|||
|
|
--tool-bg: #f5f5f5;
|
|||
|
|
--tool-icon: #555555;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 聊天模式下：导航栏保持白色不变，工具按钮区用浅灰底色区分 */
|
|||
|
|
.tab-bar.chat-mode {
|
|||
|
|
/* 背景与边框 — 导航栏保持白色，与整体布局统一 */
|
|||
|
|
--bg-primary: #ffffff;
|
|||
|
|
--border-primary: #e8e8e8;
|
|||
|
|
/* Tab 文字 */
|
|||
|
|
--tab-inactive: #999999;
|
|||
|
|
--tab-active: #333333;
|
|||
|
|
/* 键盘按钮 */
|
|||
|
|
--kb-border: #bbbbbb;
|
|||
|
|
--kb-icon: #666666;
|
|||
|
|
--kb-border-left: #f0f0f0;
|
|||
|
|
/* 聊天工具按钮 — 浅灰底色，与白色导航栏融合但不突兀 */
|
|||
|
|
--tool-bg: #f0f0f0;
|
|||
|
|
--tool-icon: #555555;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 全局统一色值 */
|
|||
|
|
page {
|
|||
|
|
/* 主题蓝（唯一品牌色） */
|
|||
|
|
--brand-blue: #1677FF;
|
|||
|
|
--brand-blue-dark: #0958D9;
|
|||
|
|
--brand-blue-light: #73ADFF;
|
|||
|
|
--brand-blue-glow: rgba(22, 119, 255, 0.8);
|
|||
|
|
/* 深色面板 */
|
|||
|
|
--bg-dark: #0d0d0d;
|
|||
|
|
--bg-dark-2: #1e1e1e;
|
|||
|
|
--bg-dark-3: #2e2e2e;
|
|||
|
|
/* 文字（深色模式） */
|
|||
|
|
--text-dark: #e8e8e8;
|
|||
|
|
--text-dark-secondary: #cccccc;
|
|||
|
|
--text-dark-muted: #888888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================================
|
|||
|
|
二、底部导航栏容器（固定在底部）
|
|||
|
|
============================================================ */
|
|||
|
|
.tab-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
height: 100rpx;
|
|||
|
|
background-color: var(--bg-primary);
|
|||
|
|
border-top: 1rpx solid var(--border-primary);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
z-index: 99999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 聊天模式下切换为深色背景 */
|
|||
|
|
.tab-bar.chat-mode {
|
|||
|
|
background-color: var(--bg-primary);
|
|||
|
|
border-top: 1rpx solid var(--border-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ============================================================
|
|||
|
|
二、状态1：普通导航模式
|
|||
|
|
============================================================ */
|
|||
|
|
|
|||
|
|
/* ---- Tab菜单项（3个平分剩余空间）---- */
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item:active {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: var(--tab-inactive);
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item.active .tab-text {
|
|||
|
|
color: var(--tab-active);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---- 右侧键盘按钮（固定窄宽度）---- */
|
|||
|
|
.keyboard-btn {
|
|||
|
|
width: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
border-left: 1rpx solid var(--kb-border-left);
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.keyboard-btn:active {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
background-color: var(--border-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kb-circle {
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2rpx solid var(--kb-border);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.kb-icon {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: var(--kb-icon);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ============================================================
|
|||
|
|
三、状态2：聊天输入模式
|
|||
|
|
============================================================ */
|
|||
|
|
|
|||
|
|
/* ---- 工具按钮（通用：菜单/语音/表情/更多等）---- */
|
|||
|
|
.chat-tool-btn {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
/* 浅灰底色，融入白色导航栏 */
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-tool-btn:active {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
background-color: rgba(0,0,0,0.08) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tool-icon {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
color: var(--tool-icon);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-area .tool-icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: var(--tool-icon);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-area.disabled {
|
|||
|
|
opacity: 0.25;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---- 🎤 语音转文字激活状态（高亮）---- */
|
|||
|
|
.send-icon {
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-icon-active {
|
|||
|
|
animation: voice-pulse 1.5s ease-in-out infinite;
|
|||
|
|
filter: drop-shadow(0 0 8px var(--brand-blue-glow));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes voice-pulse {
|
|||
|
|
0%, 100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
filter: drop-shadow(0 0 6px var(--brand-blue-glow));
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
transform: scale(1.15);
|
|||
|
|
filter: drop-shadow(0 0 14px var(--brand-blue));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 🎤激活时按钮高亮（浅色背景下的蓝色边框） */
|
|||
|
|
.voice-active {
|
|||
|
|
background: rgba(22, 119, 255, 0.1) !important;
|
|||
|
|
border: 1.5px solid rgba(22, 119, 255, 0.6) !important;
|
|||
|
|
border-radius: 12rpx !important;
|
|||
|
|
box-shadow: 0 0 10px rgba(22, 119, 255, 0.25) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---- 发送按钮（替换+号） ---- */
|
|||
|
|
.send-action-btn {
|
|||
|
|
background: #1677FF !important;
|
|||
|
|
border-radius: 16rpx !important;
|
|||
|
|
width: 96rpx !important;
|
|||
|
|
box-shadow: 0 4rpx 14rpx rgba(22, 119, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-action-btn:active {
|
|||
|
|
opacity: 0.85;
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-icon-img {
|
|||
|
|
width: 42rpx;
|
|||
|
|
height: 42rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-arrow-icon {
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-label {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #ffffff;
|
|||
|
|
letter-spacing: 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---- 输入框 ---- */
|
|||
|
|
.chat-input {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 68rpx;
|
|||
|
|
min-width: 0;
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin: 0 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.placeholder-style {
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---- 语音录制按钮 ---- */
|
|||
|
|
.voice-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 68rpx;
|
|||
|
|
min-width: 0;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: 0 4rpx;
|
|||
|
|
transition: all 0.15s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.voice-btn:active,
|
|||
|
|
.voice-btn.recording {
|
|||
|
|
background-color: var(--brand-blue);
|
|||
|
|
box-shadow: 0 2rpx 16rpx rgba(22, 119, 255, 0.35);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.voice-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
letter-spacing: 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.voice-btn.recording .voice-text {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 录音波纹动画 */
|
|||
|
|
.record-wave {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wave {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 3rpx solid rgba(22, 119, 255, 0.3);
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
animation: waveExpand 1.5s ease-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wave2 { animation-delay: 0.5s; }
|
|||
|
|
.wave3 { animation-delay: 1s; }
|
|||
|
|
|
|||
|
|
@keyframes waveExpand {
|
|||
|
|
from { width: 60rpx; height: 60rpx; opacity: 1; border-width: 4rpx; }
|
|||
|
|
to { width: 200rpx; height: 200rpx; opacity: 0; border-width: 1rpx; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ============================================================
|
|||
|
|
四、聊天消息面板（覆盖在页面内容上方）
|
|||
|
|
============================================================ */
|
|||
|
|
|
|||
|
|
.chat-overlay {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: calc(100rpx + env(safe-area-inset-bottom));
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 99998;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 消息列表 */
|
|||
|
|
.chat-msg-list {
|
|||
|
|
flex: 1;
|
|||
|
|
background-color: var(--bg-dark);
|
|||
|
|
padding: 24rpx;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.msg-bottom-pad {
|
|||
|
|
height: 20rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---- 单行消息 ---- */
|
|||
|
|
.msg-row {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.msg-user {
|
|||
|
|
flex-direction: row-reverse;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 头像 */
|
|||
|
|
.msg-avatar {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin: 0 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bot-avatar {
|
|||
|
|
background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-avatar {
|
|||
|
|
background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 消息气泡 */
|
|||
|
|
.msg-bubble {
|
|||
|
|
max-width: 65%;
|
|||
|
|
padding: 18rpx 22rpx;
|
|||
|
|
border-radius: 18rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bot-bubble {
|
|||
|
|
background-color: var(--bg-dark-2);
|
|||
|
|
border: 2rpx solid rgba(255,255,255,0.06);
|
|||
|
|
border-radius: 4rpx 18rpx 18rpx 18rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-bubble {
|
|||
|
|
background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
|
|||
|
|
border-radius: 18rpx 4rpx 18rpx 18rpx;
|
|||
|
|
box-shadow: 0 4rpx 14rpx rgba(22, 119, 255, 0.22);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.msg-text {
|
|||
|
|
font-size: 27rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bot-bubble .msg-text { color: var(--text-dark); }
|
|||
|
|
.user-bubble .msg-text { color: #ffffff; }
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* ============================================================
|
|||
|
|
五、语音播放中提示
|
|||
|
|
============================================================ */
|
|||
|
|
|
|||
|
|
.voice-playing-toast {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 160rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
background-color: rgba(0,0,0,0.85);
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 22rpx 36rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
z-index: 20000;
|
|||
|
|
backdrop-filter: blur(10rpx);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.playing-wave {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4rpx;
|
|||
|
|
height: 38rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.p-bar {
|
|||
|
|
width: 6rpx;
|
|||
|
|
background-color: var(--brand-blue);
|
|||
|
|
border-radius: 3rpx;
|
|||
|
|
animation: barBounce 0.6s ease-in-out infinite alternate;
|
|||
|
|
}
|
|||
|
|
.p1{height:16rpx;animation-delay:0s} .p2{height:28rpx;animation-delay:.1s}
|
|||
|
|
.p3{height:38rpx;animation-delay:.2s} .p4{height:26rpx;animation-delay:.3s}
|
|||
|
|
.p5{height:18rpx;animation-delay:.4s}
|
|||
|
|
|
|||
|
|
@keyframes barBounce {
|
|||
|
|
from{transform:scaleY(.4)} to{transform:scaleY(1)}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.playing-text {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: var(--text-dark-secondary);
|
|||
|
|
}
|