/** * Chicago Stock Exchange 客服前台 — 高级品牌化 UI（Route A 纯样式皮肤） * 品牌: 亮色科技感 + 品牌青绿 #06C38D * 注入方式: 全局 override (非scoped), 放在 H5 index.html * 只作用于客服相关 class, 不影响其它页面 * 上线时间: 2026-08-20 */ /* ========== 整体背景: 柔和品牌渐变 ========== */ .kefu_container { background: linear-gradient(180deg, #f6fbf9 0%, #edf5f1 100%) !important; } /* ========== 会话区 ========== */ .chat_wrapper { background: transparent !important; color: #1a1a2e !important; } .chat_wrapper scroll-view { padding: 24rpx 20rpx 16rpx !important; box-sizing: border-box !important; } /* ========== 时间标签: 高级磨砂胶囊 ========== */ .chat_wrapper .status { margin-bottom: 24rpx !important; height: 56rpx !important; line-height: 56rpx !important; } .chat_wrapper .status text { background: rgba(26, 26, 46, 0.05) !important; color: #6b7280 !important; border-radius: 999rpx !important; padding: 8rpx 24rpx !important; font-size: 22rpx !important; backdrop-filter: blur(8rpx); box-shadow: 0 2rpx 8rpx rgba(26, 26, 46, 0.04) !important; } /* ========== 气泡: 圆角 + 阴影 + 精致 ========== */ .chat_wrapper .bubble { max-width: 78% !important; font-size: 30rpx !important; line-height: 1.55 !important; padding: 24rpx 28rpx !important; border-radius: 24rpx !important; letter-spacing: 0.2rpx; } /* 我方气泡: 品牌青绿渐变 + 绿色柔影 */ .chat_wrapper .bubble.me { float: right !important; margin-right: 24rpx !important; margin-left: 32rpx !important; color: #ffffff !important; background: linear-gradient(135deg, #06c38d 0%, #00b08a 100%) !important; box-shadow: 0 8rpx 24rpx rgba(6, 195, 141, 0.28) !important; border-bottom-right-radius: 8rpx !important; } /* 对方气泡: 白色磨砂卡片 + 柔和中性影 */ .chat_wrapper .bubble.you { float: left !important; margin-right: 32rpx !important; margin-left: 24rpx !important; color: #1a1a2e !important; background: #ffffff !important; border: 1rpx solid rgba(26, 26, 46, 0.06) !important; box-shadow: 0 6rpx 22rpx rgba(15, 23, 42, 0.06) !important; border-bottom-left-radius: 8rpx !important; } /* 气泡小尾巴 */ .chat_wrapper .bubble.me:before { background-color: #00b08a !important; } .chat_wrapper .bubble.you:before { background-color: #ffffff !important; } /* 消息图片圆角 */ .chat_wrapper .bubble image { border-radius: 16rpx !important; } /* 富文本链接色 */ .chat_wrapper .bubble a { color: #06c38d !important; text-decoration: underline; } /* ========== 输入区: 白色悬浮栏 ========== */ .kefu_container .write { background: #ffffff !important; border-top: 1rpx solid rgba(26, 26, 46, 0.06) !important; box-shadow: 0 -6rpx 24rpx rgba(15, 23, 42, 0.05) !important; padding: 18rpx 16rpx !important; } /* 输入框: 磨砂圆角 */ .kefu_container .widget_textarea { background: #f4f7f6 !important; border-radius: 20rpx !important; padding: 4rpx 10rpx !important; border: 1rpx solid rgba(6, 195, 141, 0.12) !important; } .kefu_message { color: #1a1a2e !important; font-size: 30rpx !important; line-height: 44rpx !important; padding: 8rpx 12rpx !important; } /* 发送按钮: 品牌青绿渐变胶囊 */ .kefu_container .send_btn { background: linear-gradient(135deg, #06c38d 0%, #00b08a 100%) !important; color: #ffffff !important; border: none !important; border-radius: 999rpx !important; padding: 14rpx 40rpx !important; font-size: 26rpx !important; line-height: 1.4 !important; box-shadow: 0 6rpx 18rpx rgba(6, 195, 141, 0.30) !important; font-weight: 500; margin-left: 20rpx !important; } .kefu_container .send_btn_hover { background: linear-gradient(135deg, #00b08a 0%, #009e79 100%) !important; } /* 工具栏图标区 */ .kefu_container .toolbar_icon { border-radius: 12rpx !important; } /* ========== 表情/更多 弹层: 白色高级 ========== */ .footer_div { background: #ffffff !important; box-shadow: 0 -8rpx 30rpx rgba(15, 23, 42, 0.08) !important; border-top-left-radius: 24rpx !important; border-top-right-radius: 24rpx !important; } /* ========== 订单/商品选择弹层: 圆角卡片 ========== */ .select_model { background: #f6faf8 !important; border-top-left-radius: 32rpx !important; border-top-right-radius: 32rpx !important; box-shadow: 0 -10rpx 40rpx rgba(15, 23, 42, 0.10) !important; } .select_model .project_item { background: #ffffff !important; border-radius: 20rpx !important; margin: 16rpx 20rpx !important; box-shadow: 0 6rpx 20rpx rgba(15, 23, 42, 0.05) !important; border: 1rpx solid rgba(26, 26, 46, 0.04) !important; } .select_model .project_item image { border-radius: 16rpx !important; } .select_model .project_item_title { color: #1a1a2e !important; font-weight: 500; } .select_model .project_item_price text:first-child { color: #06c38d !important; } .close_select { color: #06c38d !important; font-weight: 500; } /* ========== 留言板表单: 白色卡片 ========== */ .leave_message .form-control { background: #ffffff !important; border: 1rpx solid rgba(26, 26, 46, 0.10) !important; border-radius: 16rpx !important; box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04) !important; color: #1a1a2e !important; } .leave_message .leave_success { background: linear-gradient(135deg, #06c38d 0%, #00b08a 100%) !important; border: none !important; border-radius: 999rpx !important; box-shadow: 0 6rpx 18rpx rgba(6, 195, 141, 0.30) !important; font-weight: 500; } /* ========== 系统消息 (type3): 居中胶囊 ========== */ .chat_wrapper .bubble[style*="text-align"], .chat_wrapper .status { /* 保持 */ } /* system message (message_type==3 用 .status) 已覆盖 */