901 lines
20 KiB
Plaintext
901 lines
20 KiB
Plaintext
<!-- 机构端 - AI问诊页面 -->
|
||
<template>
|
||
<view class="ai-page">
|
||
<!-- ===== 顶部固定区 ===== -->
|
||
<view class="top-fixed">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="detail-navbar">
|
||
<view class="detail-navbar-back" @click="uni.navigateBack()">
|
||
<text class="back-arrow">‹</text>
|
||
<text class="back-text">返回</text>
|
||
</view>
|
||
<text class="detail-navbar-title">AI问诊</text>
|
||
<view style="width: 120rpx;"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- 高风险提示横幅（始终显示） -->
|
||
<view class="risk-banner">
|
||
<text class="risk-banner-icon">⚠️</text>
|
||
<text class="risk-banner-text">AI问诊仅供参考，不能代替专业医生诊断，紧急情况请立即拨打120</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ===== 中间自适应聊天区 ===== -->
|
||
<view class="middle-flex">
|
||
<scroll-view
|
||
class="chat-scroll"
|
||
direction="vertical"
|
||
:scroll-into-view="lastMsgId"
|
||
:scroll-with-animation="true"
|
||
>
|
||
<!-- 症状快捷选择（在聊天区顶部，随聊天区滚动） -->
|
||
<view v-if="!hasConversation" class="quick-select-area">
|
||
<text class="qs-title">请选择主要症状（可多选）</text>
|
||
<view class="qs-tags">
|
||
<view
|
||
v-for="sym in symptomOptions"
|
||
:key="sym"
|
||
class="qs-tag"
|
||
:class="selectedSymptoms.includes(sym) ? 'qs-tag-selected' : ''"
|
||
@click="toggleSymptom(sym)"
|
||
>
|
||
{{ sym }}
|
||
</view>
|
||
</view>
|
||
<view v-if="selectedSymptoms.length > 0" class="qs-confirm-row">
|
||
<view class="qs-confirm-btn" @click="startWithSymptoms">开始问诊</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 欢迎提示 -->
|
||
<view class="welcome-msg" v-if="messages.length === 0 && !hasConversation">
|
||
<view class="welcome-avatar">🤖</view>
|
||
<view class="welcome-bubble">
|
||
<text class="welcome-title">您好！我是医养AI助手</text>
|
||
<text class="welcome-desc">我可以帮助您初步了解用户症状、进行健康风险评估，以及提供护理建议。请选择上方症状或直接输入描述。</text>
|
||
<text class="welcome-disclaimer">⚠ 本工具仅供辅助参考，最终诊疗请遵循医嘱。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 消息列表 -->
|
||
<view
|
||
v-for="(msg, idx) in messages"
|
||
:key="idx"
|
||
:id="'msg-' + idx"
|
||
class="msg-row"
|
||
:class="msg.role === 'user' ? 'msg-row-right' : 'msg-row-left'"
|
||
>
|
||
<!-- AI头像 -->
|
||
<view v-if="msg.role === 'ai'" class="msg-avatar ai-avatar">🤖</view>
|
||
|
||
<view class="msg-bubble-wrap" :class="msg.role === 'user' ? 'mbw-right' : 'mbw-left'">
|
||
<!-- 高风险提醒卡片 -->
|
||
<view v-if="msg.riskLevel === 'high'" class="risk-card">
|
||
<view class="risk-card-header">
|
||
<text class="risk-card-icon">🚨</text>
|
||
<text class="risk-card-title">高风险提示</text>
|
||
</view>
|
||
<text class="risk-card-body">{{ msg.content }}</text>
|
||
<view class="risk-card-actions">
|
||
<view class="risk-action-btn rca-call" @click="callEmergency">一键拨打120</view>
|
||
<view class="risk-action-btn rca-notify" @click="notifyFamily">通知家属</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 普通气泡 -->
|
||
<view v-else class="msg-bubble" :class="msg.role === 'user' ? 'bubble-user' : 'bubble-ai'">
|
||
<text class="msg-text">{{ msg.content }}</text>
|
||
</view>
|
||
|
||
<!-- 建议操作列表（AI回复带操作） -->
|
||
<view v-if="msg.suggestions && msg.suggestions.length > 0" class="suggestion-list">
|
||
<view
|
||
v-for="sug in msg.suggestions"
|
||
:key="sug"
|
||
class="suggestion-item"
|
||
@click="sendMessage(sug)"
|
||
>
|
||
{{ sug }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用户头像 -->
|
||
<view v-if="msg.role === 'user'" class="msg-avatar user-avatar">👩⚕️</view>
|
||
</view>
|
||
|
||
<!-- AI加载中 -->
|
||
<view v-if="isLoading" class="msg-row msg-row-left">
|
||
<view class="msg-avatar ai-avatar">🤖</view>
|
||
<view class="loading-bubble">
|
||
<view class="loading-dot"></view>
|
||
<view class="loading-dot"></view>
|
||
<view class="loading-dot"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view id="msg-bottom" style="height: 20rpx;"></view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- ===== 底部固定区 ===== -->
|
||
<view class="bottom-fixed">
|
||
<!-- 快捷问题模块 -->
|
||
<view v-if="quickReplies.length > 0" class="quick-replies">
|
||
<view class="quick-replies-header" @click="toggleQuickReplies">
|
||
<view class="qr-header-left">
|
||
<text class="qr-header-icon">💬</text>
|
||
<text class="qr-title">快捷问题</text>
|
||
</view>
|
||
<view class="qr-toggle">
|
||
<text class="qr-toggle-text">{{ quickRepliesExpanded ? '收起' : '展开' }}</text>
|
||
<text class="qr-toggle-icon">{{ quickRepliesExpanded ? '▾' : '▸' }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="quickRepliesExpanded" class="quick-replies-body">
|
||
<scroll-view class="qr-scroll" :scroll-x="true" :scroll-y="false">
|
||
<view class="qr-scroll-inner">
|
||
<view
|
||
v-for="qr in quickReplies"
|
||
:key="qr"
|
||
class="qr-chip"
|
||
@click="sendMessage(qr)"
|
||
>
|
||
{{ qr }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 输入区 -->
|
||
<view class="input-bar">
|
||
<view class="input-bar-inner">
|
||
<input
|
||
class="chat-input"
|
||
v-model="inputText"
|
||
placeholder="描述症状或询问护理建议..."
|
||
:confirm-type="'send'"
|
||
@confirm="onSend"
|
||
:maxlength="200"
|
||
/>
|
||
<view class="send-btn" :class="inputText.trim() ? 'send-btn-active' : ''" @click="onSend">
|
||
发送
|
||
</view>
|
||
</view>
|
||
<view class="input-actions">
|
||
<view class="ia-btn" @click="clearConversation">清空对话</view>
|
||
<view class="ia-btn" @click="exportRecord">导出记录</view>
|
||
<view class="ia-btn ia-btn-primary" @click="referToDoctor">转诊医生</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
type MessageType = {
|
||
role: string
|
||
content: string
|
||
riskLevel: string
|
||
suggestions: string[]
|
||
}
|
||
|
||
// 模拟AI回复知识库（实际接入大模型API）
|
||
const AI_RESPONSES : UTSJSONObject = {
|
||
'头晕': {
|
||
content: '头晕可能与血压波动、低血糖、颈椎问题等有关。\n\n建议：\n1. 立即测量血压\n2. 询问是否有进食\n3. 让老人平躺休息\n\n如出现突发剧烈头晕伴言语不清，请立即就医！',
|
||
riskLevel: 'medium',
|
||
suggestions: ['血压偏高怎么办', '低血糖症状有哪些', '需要叫救护车吗']
|
||
},
|
||
'胸痛': {
|
||
content: '胸痛是高度危险的症状！\n\n可能原因：心绞痛、心肌梗死、气胸等。\n\n⚠ 建议立即评估：\n· 是否伴随出汗、恶心\n· 是否放射至左臂或下颌\n· 疼痛是否持续超过5分钟\n\n如有以上情况，属于急危症，请立即拨打120！',
|
||
riskLevel: 'high',
|
||
suggestions: ['心肌梗死急救步骤', '如何拨打120']
|
||
},
|
||
'发烧': {
|
||
content: '发热（体温>37.3°C）在老年人中需要特别关注，因为老年人感染反应可能不典型。\n\n建议：\n1. 测量实际体温\n2. 补充水分\n3. 体温>38.5°C 给予退热处理\n4. 持续高热或伴随寒战，建议就医检查血常规',
|
||
riskLevel: 'medium',
|
||
suggestions: ['退烧药怎么用', '老年人发烧危险信号']
|
||
},
|
||
'default': {
|
||
content: '感谢您的描述。作为AI助手，我可以提供初步护理建议，但无法替代医生的专业诊断。\n\n请详细描述：\n· 症状持续时间\n· 症状严重程度（1-10分）\n· 是否有用药变化\n\n如情况紧急请立即联系医生或拨打120。',
|
||
riskLevel: 'low',
|
||
suggestions: ['当前用药有哪些', '如何联系值班医生', '需要上门服务吗']
|
||
}
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
inputText: '' as string,
|
||
messages: [] as MessageType[],
|
||
isLoading: false as boolean,
|
||
hasConversation: false as boolean,
|
||
lastMsgId: '' as string,
|
||
selectedSymptoms: [] as string[],
|
||
symptomOptions: ['头晕', '胸痛', '发烧', '呼吸困难', '腹痛', '跌倒', '意识模糊', '血压异常', '血糖异常', '情绪异常'] as string[],
|
||
quickReplies: ['症状加重了', '需要上门服务', '联系家属', '转诊医生', '今日用药'] as string[],
|
||
quickRepliesExpanded: false as boolean
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
toggleSymptom(sym: string) {
|
||
const idx = this.selectedSymptoms.indexOf(sym)
|
||
if (idx >= 0) {
|
||
this.selectedSymptoms.splice(idx, 1)
|
||
} else {
|
||
this.selectedSymptoms.push(sym)
|
||
}
|
||
},
|
||
|
||
startWithSymptoms() {
|
||
const text = this.selectedSymptoms.join('、')
|
||
this.selectedSymptoms = []
|
||
this.hasConversation = true
|
||
this.sendMessage(`用户主诉：${text}`)
|
||
},
|
||
|
||
onSend() {
|
||
const text = this.inputText.trim()
|
||
if (!text) return
|
||
this.inputText = ''
|
||
this.hasConversation = true
|
||
this.sendMessage(text)
|
||
},
|
||
|
||
sendMessage(text: string) {
|
||
this.messages.push({
|
||
role: 'user',
|
||
content: text,
|
||
riskLevel: 'none',
|
||
suggestions: []
|
||
} as MessageType)
|
||
this.lastMsgId = 'msg-' + (this.messages.length - 1)
|
||
this.isLoading = true
|
||
|
||
// 模拟AI响应延迟（实际需接入大模型API）
|
||
setTimeout(() => {
|
||
this.generateAIResponse(text)
|
||
}, 1200)
|
||
},
|
||
|
||
generateAIResponse(userText: string) {
|
||
let responseData : UTSJSONObject | null = null
|
||
|
||
// 关键词匹配
|
||
if (userText.includes('头晕')) {
|
||
responseData = AI_RESPONSES['头晕'] as UTSJSONObject
|
||
} else if (userText.includes('胸痛') || userText.includes('心脏')) {
|
||
responseData = AI_RESPONSES['胸痛'] as UTSJSONObject
|
||
} else if (userText.includes('发烧') || userText.includes('发热')) {
|
||
responseData = AI_RESPONSES['发烧'] as UTSJSONObject
|
||
} else {
|
||
responseData = AI_RESPONSES['default'] as UTSJSONObject
|
||
}
|
||
|
||
const content = String(responseData['content'] ?? '') || ''
|
||
const riskLevel = String(responseData['riskLevel'] ?? 'low') || 'low'
|
||
const sugsRaw = responseData.getArray('suggestions')
|
||
const sugs : string[] = []
|
||
if (sugsRaw != null) {
|
||
for (let i = 0; i < sugsRaw.length; i++) {
|
||
sugs.push(String(sugsRaw[i]) || '')
|
||
}
|
||
}
|
||
|
||
this.isLoading = false
|
||
this.messages.push({
|
||
role: 'ai',
|
||
content: content,
|
||
riskLevel: riskLevel,
|
||
suggestions: sugs
|
||
} as MessageType)
|
||
this.lastMsgId = 'msg-bottom'
|
||
},
|
||
|
||
clearConversation() {
|
||
uni.showModal({
|
||
title: '清空对话',
|
||
content: '确定要清空当前对话记录吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.messages = []
|
||
this.hasConversation = false
|
||
this.lastMsgId = ''
|
||
this.quickRepliesExpanded = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
toggleQuickReplies() {
|
||
this.quickRepliesExpanded = !this.quickRepliesExpanded
|
||
},
|
||
|
||
exportRecord() {
|
||
uni.showToast({ title: '导出功能开发中', icon: 'none' })
|
||
},
|
||
|
||
referToDoctor() {
|
||
uni.showToast({ title: '转诊功能开发中', icon: 'none' })
|
||
},
|
||
|
||
callEmergency() {
|
||
uni.makePhoneCall({ phoneNumber: '120' })
|
||
},
|
||
|
||
notifyFamily() {
|
||
uni.showToast({ title: '通知家属功能开发中', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.ai-page {
|
||
background-color: #f0f2f7;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ===== 三段式布局容器 ===== */
|
||
.top-fixed {
|
||
flex: none;
|
||
z-index: 10;
|
||
background-color: #f0f2f7;
|
||
}
|
||
|
||
.middle-flex {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.bottom-fixed {
|
||
flex: none;
|
||
z-index: 10;
|
||
background-color: #ffffff;
|
||
border-top-width: 1rpx;
|
||
border-top-style: solid;
|
||
border-top-color: #eeeeee;
|
||
}
|
||
|
||
/* ===== 导航栏 ===== */
|
||
.detail-navbar {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
background-color: #ffffff;
|
||
border-bottom-width: 1rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #eeeeee;
|
||
box-sizing: border-box;
|
||
padding-top: var(--status-bar-height);
|
||
height: calc(88rpx + var(--status-bar-height));
|
||
}
|
||
|
||
.detail-navbar-back {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
height: 88rpx;
|
||
width: 120rpx;
|
||
}
|
||
|
||
.back-arrow {
|
||
font-size: 44rpx;
|
||
color: #333333;
|
||
line-height: 1;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.back-text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.detail-navbar-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
/* ===== 高风险横幅 ===== */
|
||
.risk-banner {
|
||
background-color: #E64A19;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 16rpx 24rpx;
|
||
}
|
||
|
||
.risk-banner-icon {
|
||
font-size: 28rpx;
|
||
margin-right: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.risk-banner-text {
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
}
|
||
|
||
/* ===== 症状快选 ===== */
|
||
.quick-select-area {
|
||
background-color: #ffffff;
|
||
padding: 24rpx 30rpx 20rpx 30rpx;
|
||
border-bottom-width: 8rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #f0f2f7;
|
||
}
|
||
|
||
.qs-title {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.qs-tags {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.qs-tag {
|
||
font-size: 24rpx;
|
||
color: #555;
|
||
background-color: #f5f5f5;
|
||
border-radius: 30rpx;
|
||
padding: 10rpx 24rpx;
|
||
margin-right: 14rpx;
|
||
margin-bottom: 14rpx;
|
||
border-width: 1rpx;
|
||
border-style: solid;
|
||
border-color: #e5e5e5;
|
||
}
|
||
|
||
.qs-tag-selected {
|
||
background-color: #E3F7ED;
|
||
border-color: #09C39D;
|
||
color: #09C39D;
|
||
}
|
||
|
||
.qs-confirm-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.qs-confirm-btn {
|
||
background-color: #09C39D;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
padding: 0 40rpx;
|
||
border-radius: 36rpx;
|
||
}
|
||
|
||
/* ===== 聊天滚动区 ===== */
|
||
.chat-scroll {
|
||
flex: 1;
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ===== 欢迎消息 ===== */
|
||
.welcome-msg {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
padding: 20rpx 24rpx;
|
||
}
|
||
|
||
.welcome-avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 36rpx;
|
||
background-color: #E3F7ED;
|
||
font-size: 36rpx;
|
||
line-height: 72rpx;
|
||
text-align: center;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.welcome-bubble {
|
||
flex: 1;
|
||
background-color: #ffffff;
|
||
border-radius: 4rpx 16rpx 16rpx 16rpx;
|
||
padding: 20rpx 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.welcome-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.welcome-desc {
|
||
font-size: 24rpx;
|
||
color: #555;
|
||
line-height: 1.6;
|
||
display: block;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.welcome-disclaimer {
|
||
font-size: 20rpx;
|
||
color: #E64A19;
|
||
background-color: #fff5f0;
|
||
padding: 8rpx 14rpx;
|
||
border-radius: 4rpx;
|
||
display: block;
|
||
}
|
||
|
||
/* ===== 消息行 ===== */
|
||
.msg-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
padding: 12rpx 24rpx;
|
||
}
|
||
|
||
.msg-row-left {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.msg-row-right {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.msg-avatar {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 32rpx;
|
||
font-size: 32rpx;
|
||
line-height: 64rpx;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ai-avatar {
|
||
background-color: #E3F7ED;
|
||
}
|
||
|
||
.user-avatar {
|
||
background-color: #e8f5e9;
|
||
}
|
||
|
||
.msg-bubble-wrap {
|
||
max-width: 75%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.mbw-left {
|
||
margin-left: 12rpx;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.mbw-right {
|
||
margin-right: 12rpx;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.msg-bubble {
|
||
border-radius: 16rpx;
|
||
padding: 18rpx 22rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.bubble-ai {
|
||
background-color: #ffffff;
|
||
border-top-left-radius: 4rpx;
|
||
}
|
||
|
||
.bubble-user {
|
||
background-color: #09C39D;
|
||
border-top-right-radius: 4rpx;
|
||
}
|
||
|
||
.msg-text {
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.bubble-ai .msg-text {
|
||
color: #333;
|
||
}
|
||
|
||
.bubble-user .msg-text {
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* ===== 高风险卡片 ===== */
|
||
.risk-card {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
border-top-left-radius: 4rpx;
|
||
border-top-width: 4rpx;
|
||
border-top-style: solid;
|
||
border-top-color: #E64A19;
|
||
padding: 20rpx 24rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(230,74,25,0.15);
|
||
}
|
||
|
||
.risk-card-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.risk-card-icon {
|
||
font-size: 30rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.risk-card-title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #E64A19;
|
||
}
|
||
|
||
.risk-card-body {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
line-height: 1.7;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.risk-card-actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.risk-action-btn {
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 28rpx;
|
||
border-radius: 32rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.rca-call {
|
||
background-color: #E64A19;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.rca-notify {
|
||
background-color: #fff5f0;
|
||
color: #E64A19;
|
||
border-width: 1rpx;
|
||
border-style: solid;
|
||
border-color: #E64A19;
|
||
}
|
||
|
||
/* ===== 建议操作列表 ===== */
|
||
.suggestion-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.suggestion-item {
|
||
font-size: 22rpx;
|
||
color: #09C39D;
|
||
border-width: 1rpx;
|
||
border-style: solid;
|
||
border-color: #09C39D;
|
||
border-radius: 20rpx;
|
||
padding: 6rpx 18rpx;
|
||
margin-right: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
background-color: #E3F7ED;
|
||
}
|
||
|
||
/* ===== 加载中气泡 ===== */
|
||
.loading-bubble {
|
||
background-color: #ffffff;
|
||
border-radius: 4rpx 16rpx 16rpx 16rpx;
|
||
padding: 18rpx 28rpx;
|
||
margin-left: 12rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.loading-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 6rpx;
|
||
background-color: #bbb;
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
/* ===== 快捷问题模块 ===== */
|
||
.quick-replies {
|
||
flex: none;
|
||
background-color: #f8f9ff;
|
||
border-top-width: 1rpx;
|
||
border-top-style: solid;
|
||
border-top-color: #D8EFE6;
|
||
}
|
||
|
||
.quick-replies-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 24rpx;
|
||
}
|
||
|
||
.qr-header-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.qr-header-icon {
|
||
font-size: 26rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.qr-title {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #444444;
|
||
}
|
||
|
||
.qr-toggle {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
background-color: #09C39D;
|
||
border-radius: 24rpx;
|
||
padding: 8rpx 20rpx;
|
||
}
|
||
|
||
.qr-toggle-text {
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.qr-toggle-icon {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
line-height: 1;
|
||
}
|
||
|
||
.quick-replies-body {
|
||
padding-bottom: 12rpx;
|
||
}
|
||
|
||
.qr-scroll {
|
||
width: 100%;
|
||
}
|
||
|
||
.qr-scroll-inner {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
padding: 0 16rpx;
|
||
}
|
||
|
||
.qr-chip {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
font-size: 24rpx;
|
||
color: #09C39D;
|
||
background-color: #ffffff;
|
||
border-width: 1rpx;
|
||
border-style: solid;
|
||
border-color: #09C39D;
|
||
border-radius: 24rpx;
|
||
padding: 10rpx 28rpx;
|
||
margin: 0 8rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
/* ===== 输入区 ===== */
|
||
.input-bar {
|
||
background-color: #ffffff;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.input-bar-inner {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 16rpx 20rpx 12rpx 20rpx;
|
||
}
|
||
|
||
.chat-input {
|
||
flex: 1;
|
||
height: 72rpx;
|
||
border-width: 1rpx;
|
||
border-style: solid;
|
||
border-color: #e5e5e5;
|
||
border-radius: 36rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.send-btn {
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
padding: 0 28rpx;
|
||
border-radius: 36rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
margin-left: 16rpx;
|
||
color: #bbb;
|
||
background-color: #f0f0f0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.send-btn-active {
|
||
background-color: #09C39D;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.input-actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
padding: 0 20rpx 12rpx 20rpx;
|
||
}
|
||
|
||
.ia-btn {
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
border-width: 1rpx;
|
||
border-style: solid;
|
||
border-color: #ddd;
|
||
border-radius: 20rpx;
|
||
padding: 8rpx 20rpx;
|
||
margin-left: 12rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.ia-btn-primary {
|
||
color: #09C39D;
|
||
border-color: #09C39D;
|
||
background-color: #E3F7ED;
|
||
}
|
||
</style>
|