AI和Mine页面的样式改成新样式了。
This commit is contained in:
+66
-84
@@ -1,93 +1,82 @@
|
||||
<view class="chat-container">
|
||||
<!-- 消息列表区域 -->
|
||||
<scroll-view
|
||||
class="message-list {{messages.length > 0 ? 'has-messages' : ''}}"
|
||||
scroll-y
|
||||
<scroll-view
|
||||
class="message-list"
|
||||
scroll-y
|
||||
scroll-into-view="{{scrollToMessage}}"
|
||||
enhanced
|
||||
show-scrollbar
|
||||
>
|
||||
<!-- 欢迎消息 -->
|
||||
<!-- 欢迎区：空会话时的落点 -->
|
||||
<view class="welcome-area" wx:if="{{messages.length === 0}}">
|
||||
<view class="welcome-icon">
|
||||
<t-icon name="chat" size="80rpx" color="#FF9B33" />
|
||||
<t-icon name="chat" size="72rpx" color="#9B4508" />
|
||||
</view>
|
||||
<text class="welcome-title">AI陪诊助手</text>
|
||||
<text class="welcome-desc">我是您的智能陪诊助手，可以为您解答陪诊相关问题</text>
|
||||
<view class="quick-questions">
|
||||
<view
|
||||
class="quick-item"
|
||||
wx:for="{{quickQuestions}}"
|
||||
<view
|
||||
class="quick-item"
|
||||
wx:for="{{quickQuestions}}"
|
||||
wx:key="index"
|
||||
bindtap="onQuickQuestionTap"
|
||||
data-question="{{item}}"
|
||||
>
|
||||
<text>{{item}}</text>
|
||||
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 消息气泡 -->
|
||||
<!-- 消息：头像在上、气泡在下，时间紧跟头像右侧；用户消息整条靠右 -->
|
||||
<view
|
||||
class="message-item {{item.type}}"
|
||||
wx:for="{{messages}}"
|
||||
wx:key="id"
|
||||
id="msg-{{item.id}}"
|
||||
>
|
||||
<!-- AI消息：头像在上，内容在下 -->
|
||||
<block wx:if="{{item.type === 'ai'}}">
|
||||
<image class="avatar ai-avatar" src="/images/home-w.png" mode="aspectFill" />
|
||||
<view class="message-content">
|
||||
<view class="message-bubble">
|
||||
<t-chat-markdown
|
||||
wx:if="{{item.contentType === 'text' && item.type === 'ai'}}"
|
||||
class="message-markdown"
|
||||
content="{{item.content}}"
|
||||
/>
|
||||
<text class="message-text" wx:elif="{{item.contentType === 'text'}}">{{item.content}}</text>
|
||||
<image
|
||||
wx:if="{{item.contentType === 'image'}}"
|
||||
class="message-image"
|
||||
src="{{item.content}}"
|
||||
mode="widthFix"
|
||||
bindtap="previewImage"
|
||||
data-src="{{item.content}}"
|
||||
/>
|
||||
</view>
|
||||
<text class="message-time">{{item.time}}</text>
|
||||
<view class="message-head">
|
||||
<!-- AI：品牌标记（暖墨线稿）；底色与用户侧同构，身份只由图形区分 -->
|
||||
<view wx:if="{{item.type === 'ai'}}" class="avatar">
|
||||
<image class="avatar-img" src="/images/home-ink.png" mode="aspectFit" />
|
||||
</view>
|
||||
</block>
|
||||
<!-- 用户：人像图标（暖陶土） -->
|
||||
<view wx:else class="avatar">
|
||||
<t-icon name="user-1" size="36rpx" color="#9B4508" />
|
||||
</view>
|
||||
<text class="message-time">{{item.time}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 用户消息：头像在上，内容在下 -->
|
||||
<block wx:if="{{item.type === 'user'}}">
|
||||
<view class="avatar user-avatar">
|
||||
<t-icon name="user-1" size="40rpx" color="#FFFFFF" />
|
||||
<view class="message-content">
|
||||
<view class="message-bubble">
|
||||
<t-chat-markdown
|
||||
wx:if="{{item.type === 'ai' && item.contentType === 'text'}}"
|
||||
class="message-markdown"
|
||||
content="{{item.content}}"
|
||||
/>
|
||||
<text wx:elif="{{item.contentType === 'text'}}" class="message-text">{{item.content}}</text>
|
||||
<image
|
||||
wx:if="{{item.contentType === 'image'}}"
|
||||
class="message-image"
|
||||
src="{{item.content}}"
|
||||
mode="widthFix"
|
||||
bindtap="previewImage"
|
||||
data-src="{{item.content}}"
|
||||
/>
|
||||
</view>
|
||||
<view class="message-content">
|
||||
<view class="message-bubble">
|
||||
<t-chat-markdown
|
||||
wx:if="{{item.contentType === 'text' && item.type === 'ai'}}"
|
||||
class="message-markdown"
|
||||
content="{{item.content}}"
|
||||
/>
|
||||
<text class="message-text" wx:elif="{{item.contentType === 'text'}}">{{item.content}}</text>
|
||||
<image
|
||||
wx:if="{{item.contentType === 'image'}}"
|
||||
class="message-image"
|
||||
src="{{item.content}}"
|
||||
mode="widthFix"
|
||||
bindtap="previewImage"
|
||||
data-src="{{item.content}}"
|
||||
/>
|
||||
</view>
|
||||
<text class="message-time">{{item.time}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<!-- AI 声明：挂在每条 AI 回复的气泡正下方，替掉原来页面底部那行常驻声明
|
||||
（它太占底部空间）。放在 .message-content 内，与气泡同宽同左边缘 -->
|
||||
<text wx:if="{{item.type === 'ai'}}" class="message-note">内容由AI生成，仅供参考</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- AI正在输入提示 -->
|
||||
<!-- AI 正在输入 -->
|
||||
<view class="message-item ai" wx:if="{{isTyping}}">
|
||||
<image class="avatar ai-avatar" src="/images/home-yellow.png" mode="aspectFill" />
|
||||
<view class="message-head">
|
||||
<view class="avatar">
|
||||
<image class="avatar-img" src="/images/home-ink.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="message-content">
|
||||
<view class="message-bubble typing-bubble">
|
||||
<view class="typing-indicator">
|
||||
@@ -103,36 +92,29 @@
|
||||
<view style="height: 40rpx;"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 清空按钮 -->
|
||||
<view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearChat">
|
||||
<t-icon name="delete" size="28rpx" color="#999999" />
|
||||
<text class="clear-text">清空聊天</text>
|
||||
</view>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<!-- 输入区 -->
|
||||
<view class="input-area">
|
||||
<view class="input-wrapper">
|
||||
<input
|
||||
class="message-input"
|
||||
type="text"
|
||||
value="{{inputValue}}"
|
||||
placeholder="请输入您的问题..."
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="send"
|
||||
bindinput="onInputChange"
|
||||
bindconfirm="sendMessage"
|
||||
focus="{{inputFocus}}"
|
||||
/>
|
||||
<view class="input-actions">
|
||||
<view class="action-btn send-btn {{inputValue ? 'active' : ''}}" bindtap="sendMessage">
|
||||
<t-icon name="send" size="40rpx" color="{{inputValue ? '#FFFFFF' : '#CCCCCC'}}" />
|
||||
</view>
|
||||
</view>
|
||||
<input
|
||||
class="message-input"
|
||||
type="text"
|
||||
value="{{inputValue}}"
|
||||
placeholder="请输入您的问题..."
|
||||
placeholder-class="input-placeholder"
|
||||
confirm-type="send"
|
||||
bindinput="onInputChange"
|
||||
bindconfirm="sendMessage"
|
||||
focus="{{inputFocus}}"
|
||||
/>
|
||||
<view class="action-btn send-btn {{inputValue ? 'active' : ''}}" bindtap="sendMessage">
|
||||
<t-icon name="send" size="40rpx" color="{{inputValue ? '#FFFFFF' : '#6F655C'}}" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- AI声明 -->
|
||||
<view class="ai-disclaimer">
|
||||
<text>本服务为AI生成内容，结果仅供参考。</text>
|
||||
<!-- 清空入口：紧贴输入区下方——拇指最容易够到的位置，操作方便。
|
||||
低频但破坏性，故做成只描边不填充的暖橙小按钮（圆角与输入框同为 20rpx），
|
||||
与输入区右侧浅橙底的发送键区分开，不做成裸文字链 -->
|
||||
<view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearChat">
|
||||
<t-icon name="delete" size="26rpx" color="#9B4508" />
|
||||
<text class="clear-btn-text">清空聊天</text>
|
||||
</view>
|
||||
</view>
|
||||
+170
-124
@@ -1,45 +1,65 @@
|
||||
/* 配色令牌来自 app.wxss（全站唯一来源），本页不留副本。
|
||||
整体沿用首页的「暖白纸面 + 白卡 + 浅橙衬底」语言：
|
||||
AI 气泡走白卡（白面 + 2rpx 发丝边），用户气泡走浅橙衬底，避免实心橙泛滥。 */
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
/* 给 fixed 的自定义 tabBar 留位；安全区由这里统一承担，输入区不再重复加 */
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||||
background-color: #F5F5F5;
|
||||
position: relative;
|
||||
/* 页面自身不滚，滚动只交给中间的消息区；
|
||||
overflow: hidden 是兜底，避免任何子项溢出到视口外变成"看得见滑不到" */
|
||||
overflow: hidden;
|
||||
/* 给 fixed 的自定义 tabBar 留位；安全区由这里统一承担，输入区不再重复加。
|
||||
tabBar 实测高度 = 12+12 内距 + 44 图标 + 6 间距 + 24 文字 + 2 边框 = 100rpx(+安全区)。
|
||||
140 → 120 → 112rpx：按钮下边只剩 12rpx(6px) 空隙，已贴近下限——
|
||||
再往下（<100rpx）胶囊就会被 tabBar 盖住；这 12rpx 同时是防微信字体放大
|
||||
把 tabBar 撑高的缓冲，不宜再压 */
|
||||
padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
|
||||
background-color: var(--paper);
|
||||
}
|
||||
|
||||
/* 清空按钮 */
|
||||
/* ===== 清空入口（在输入区下方）===== */
|
||||
/* 空心描边小按钮：2rpx 暖橙描边、无填充。
|
||||
清空是低频破坏性动作，用"只描边"与输入区右侧那个浅橙底发送键区分开；
|
||||
描边在纸面上 4.66:1、文字 6.10:1，均过线。
|
||||
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形，不再有胶囊
|
||||
容器是 column，靠 align-self: flex-end 右对齐，不必再套一层行容器 */
|
||||
.clear-btn {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
gap: 8rpx;
|
||||
flex-shrink: 0;
|
||||
/* 上 12 贴住输入区，右 32 对齐页面页边距；下不留边距，底部空气统一交给容器 */
|
||||
margin: 12rpx 32rpx 0;
|
||||
padding: 10rpx 26rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid var(--brand-strong);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.clear-btn:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.clear-text {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
.clear-btn-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--brand-ink);
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* 消息列表区域 */
|
||||
/* ===== 消息列表 ===== */
|
||||
.message-list {
|
||||
flex: 1;
|
||||
/* 关键：flex 子项的自动最小高度是「内容高度」，消息多于一屏后它就不肯收缩，
|
||||
会把 100vh 的容器撑破、把下方输入区顶出视口（且因容器锁死高度而滑不回来）。
|
||||
置 0 后它才能正确收缩到剩余空间，并触发 scroll-view 自身滚动 */
|
||||
min-height: 0;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.message-list.has-messages {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 欢迎区域 */
|
||||
/* ===== 欢迎区 ===== */
|
||||
.welcome-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -48,30 +68,31 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 空态图标：浅橙衬底 + 暖陶土图标，替代原橙/绿渐变与彩色辉光 */
|
||||
.welcome-icon {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin-bottom: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(255, 155, 51, 0.3);
|
||||
border-radius: 40rpx;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.welcome-desc {
|
||||
margin-bottom: 56rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 60rpx;
|
||||
line-height: 1.6;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.quick-questions {
|
||||
@@ -81,113 +102,142 @@
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
/* 常见问题：首页白卡语言 + 右侧 chevron 做点击暗示 */
|
||||
.quick-item {
|
||||
background-color: #FFFFFF;
|
||||
padding: 28rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
padding: 28rpx 28rpx 28rpx 32rpx;
|
||||
background: var(--white);
|
||||
border: 2rpx solid var(--line);
|
||||
border-radius: 20rpx;
|
||||
box-shadow: var(--shadow-card);
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
color: var(--ink-2);
|
||||
text-align: left;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.2s ease;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.quick-item:active {
|
||||
transform: scale(0.98);
|
||||
background-color: #FFF8F0;
|
||||
background: var(--brand-soft);
|
||||
}
|
||||
|
||||
/* 消息项 */
|
||||
/* ===== 消息项 ===== */
|
||||
/* 头像在上、气泡在下；用户消息整条靠右 */
|
||||
.message-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.message-item.ai {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.message-item.user {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
/* 头像行：头像在左，时间紧跟其右 */
|
||||
.message-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 用户侧镜像为「时间 → 头像」：整行仍贴右边缘，于是头像正好落在气泡右边缘上，
|
||||
与 AI 侧头像对齐气泡左边缘形成对称；时间退到头像左侧，不再顶在最右 */
|
||||
.message-item.user .message-head {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* 头像底座：AI 与用户同构——浅橙衬底 + 2rpx 暖橙描边
|
||||
（浅橙块落在纸面上只有约 1.03:1，必须靠描边托形）。
|
||||
身份只由图形区分：AI 是品牌标记，用户是人像图标；
|
||||
左右位置本来就把两者分开了，不必再用"实心橙 vs 浅橙"区分，
|
||||
否则同一列里两种底板并排出现会读成没做完 */
|
||||
.avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 40%;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ai-avatar {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
|
||||
margin-bottom: 12rpx;
|
||||
padding: 16rpx;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
/* AI 的品牌标记用暖墨版 home-ink.png：白色版 home-w.png 只能压在实心色块上，
|
||||
落在浅橙底会看不见。
|
||||
36rpx 与用户侧的 t-icon 同尺寸（两个图形的笔画都约占画布 95%），视觉齐平 */
|
||||
.avatar-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
|
||||
margin-bottom: 12rpx;
|
||||
/* 头像行里的时间：放头像右侧 */
|
||||
.message-time {
|
||||
font-size: 22rpx;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* 消息内容 */
|
||||
/* 头像已移到气泡上方，气泡不再被头像占位挤压，版心随之放宽：
|
||||
84% → 92%（约 646rpx），仍留一档余量不顶到屏幕边缘 */
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 95%;
|
||||
min-width: 0;
|
||||
max-width: 92%;
|
||||
}
|
||||
|
||||
.message-item.user .message-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-item.ai .message-content {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* 消息气泡 */
|
||||
/* ===== 气泡 ===== */
|
||||
.message-bubble {
|
||||
padding: 20rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* AI：白卡（白面 + 发丝边），安静、不与用户消息争色 */
|
||||
.message-item.ai .message-bubble {
|
||||
background-color: #FFFFFF;
|
||||
border-top-left-radius: 4rpx;
|
||||
background: var(--white);
|
||||
border: 2rpx solid var(--line);
|
||||
border-top-left-radius: 6rpx;
|
||||
}
|
||||
|
||||
/* 用户：浅橙衬底 + 暖陶土字，避免一排实心橙（浅橙底 5.96:1，过 AA）。
|
||||
气泡落在纸面上，浅橙底与纸面明度差仅约 1.03:1，必须靠 2rpx --brand-line 描边托形 */
|
||||
.message-item.user .message-bubble {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
|
||||
border-top-right-radius: 4rpx;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
border-top-right-radius: 6rpx;
|
||||
}
|
||||
|
||||
/* 气泡正文 28 → 30rpx（15px）：长回答连续阅读时 14px 偏吃力，上调一号。
|
||||
markdown 与纯文本两条路径同步，避免同一气泡里两种字号 */
|
||||
.message-text {
|
||||
font-size: 28rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.message-item.ai .message-text {
|
||||
color: #333333;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.message-item.user .message-text {
|
||||
color: #FFFFFF;
|
||||
color: var(--brand-ink);
|
||||
}
|
||||
|
||||
/* Markdown 渲染区域 */
|
||||
/* Markdown 渲染区：字号与 .message-text 对齐（30rpx） */
|
||||
.message-markdown {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.6;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* 表格在聊天气泡中的样式覆盖 */
|
||||
@@ -196,7 +246,7 @@
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border: 1rpx solid #E5E5E5;
|
||||
border: 2rpx solid var(--line);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
@@ -223,16 +273,16 @@
|
||||
}
|
||||
|
||||
.message-markdown .t-chat-markdown-table__th {
|
||||
background-color: #F5F5F5;
|
||||
background-color: var(--brand-soft);
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.message-markdown .t-chat-markdown-table__tr:nth-child(2n) {
|
||||
background-color: #FAFAFA;
|
||||
background-color: var(--paper);
|
||||
}
|
||||
|
||||
/* 代码块样式覆盖 */
|
||||
/* 代码块 */
|
||||
.message-markdown .t-chat-markdown-codespan,
|
||||
.message-markdown .t-chat-markdown-code {
|
||||
font-size: 24rpx;
|
||||
@@ -241,16 +291,10 @@
|
||||
|
||||
.message-image {
|
||||
max-width: 400rpx;
|
||||
border-radius: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
/* 正在输入指示器 */
|
||||
/* ===== 正在输入 ===== */
|
||||
.typing-bubble {
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
@@ -262,10 +306,10 @@
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #CCCCCC;
|
||||
background-color: var(--brand-ink);
|
||||
animation: typing 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
@@ -288,62 +332,64 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 输入区域 */
|
||||
/* ===== 输入区 ===== */
|
||||
.input-area {
|
||||
background-color: #FFFFFF;
|
||||
padding: 20rpx 24rpx;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
/* 钉在容器底部，不被消息区挤压 */
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 24rpx;
|
||||
background: var(--white);
|
||||
border-top: 2rpx solid var(--line);
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 16rpx;
|
||||
height: 76rpx;
|
||||
padding: 0 28rpx;
|
||||
background: var(--paper);
|
||||
border: 2rpx solid var(--line);
|
||||
/* 20rpx = 10px：与气泡、常见问题卡、用户徽记的统一圆角档，
|
||||
比原 999rpx 胶囊更贴合"输入条"的体量（76rpx 高≈38px，10px 圆角约占四分之一） */
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* 发送按钮：默认浅橙底 + 描边，有内容时转实心暖橙（全页唯一的实心橙块）。
|
||||
默认态落在白面输入区上，浅橙底同样靠 --brand-line 描边托形。
|
||||
圆角由正圆（50%）改为 20rpx，与左侧输入框、上方气泡同档，成对出现 */
|
||||
.action-btn {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #F5F5F5;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 20rpx;
|
||||
background: var(--brand-soft);
|
||||
border: 2rpx solid var(--brand-line);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.send-btn.active {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF7A33 100%);
|
||||
background: var(--brand-strong);
|
||||
border-color: var(--brand-strong);
|
||||
}
|
||||
|
||||
/* AI声明 */
|
||||
.ai-disclaimer {
|
||||
padding: 12rpx 24rpx;
|
||||
text-align: center;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.ai-disclaimer text {
|
||||
font-size: 22rpx;
|
||||
color: #CCCCCC;
|
||||
/* ===== AI 声明注释 ===== */
|
||||
/* 原为页面底部一行常驻声明，改为挂在每条 AI 回复的气泡正下方：
|
||||
既省下底部固定高度，又让声明紧贴它要限定的内容。
|
||||
无背景无边框，靠 muted 小字安静收尾；
|
||||
24rpx 是中文最小可用字号下限（12px），不能再小 */
|
||||
.message-note {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
color: var(--muted);
|
||||
}
|
||||
Reference in New Issue
Block a user