更新了AI页和我的页,一级页面都重构完成。
This commit is contained in:
+44
-19
@@ -18,31 +18,37 @@
|
||||
background-color: var(--paper);
|
||||
}
|
||||
|
||||
/* ===== 清空入口(在输入区下方)===== */
|
||||
/* ===== 辅助入口(在输入区下方:常见问题 + 清空聊天)===== */
|
||||
/* 空心描边小按钮:2rpx 暖橙描边、无填充。
|
||||
清空是低频破坏性动作,用"只描边"与输入区右侧那个浅橙底发送键区分开;
|
||||
两者都是低频辅助动作,用"只描边"与输入区右侧那个浅橙底发送键区分开;
|
||||
描边在纸面上 4.66:1、文字 6.10:1,均过线。
|
||||
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形,不再有胶囊
|
||||
容器是 column,靠 align-self: flex-end 右对齐,不必再套一层行容器 */
|
||||
.clear-btn {
|
||||
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形,不再有胶囊。
|
||||
容器是 column,靠 align-self: flex-end 把整行右对齐 */
|
||||
.tool-bar {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
gap: 16rpx;
|
||||
flex-shrink: 0;
|
||||
/* 上 12 贴住输入区,右 32 对齐页面页边距;下不留边距,底部空气统一交给容器 */
|
||||
margin: 12rpx 32rpx 0;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 10rpx 26rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid var(--brand-strong);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.clear-btn:active {
|
||||
.tool-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.clear-btn-text {
|
||||
.tool-btn-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: var(--brand-ink);
|
||||
@@ -64,7 +70,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 40rpx;
|
||||
/* 上方留白收小:消息区本身已有 20rpx 内距,这里 80rpx 会显得图标吊得太低 */
|
||||
padding: 40rpx 40rpx 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -81,6 +88,14 @@
|
||||
border: 2rpx solid var(--brand-line);
|
||||
}
|
||||
|
||||
/* 空态图标改为 ai-ink.png(暖墨线稿的 AI 气泡):与头像区的 home-ink.png 同源,
|
||||
落在浅橙衬底上仍清晰(暖陶土线稿约 6.8:1)。
|
||||
88rpx 略大于原 t-icon 的 72rpx,因为该图是满画布的气泡轮廓,缩小会显弱 */
|
||||
.welcome-icon-img {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 40rpx;
|
||||
@@ -95,32 +110,42 @@
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.quick-questions {
|
||||
/* 常见问题清单:整块收成一张白卡,行与行之间只用横线分隔、不留间隙。
|
||||
空会话的欢迎区与会话流里由「常见问题」按钮唤起的清单共用同一套语言——
|
||||
都是一份"可点的清单",不该一处是散卡、一处才收成块 */
|
||||
.question-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
background: var(--white);
|
||||
border: 2rpx solid var(--line);
|
||||
border-radius: 20rpx;
|
||||
box-shadow: var(--shadow-card);
|
||||
/* 裁掉行的直角与点按底色,保住卡片自身的圆角 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 常见问题:首页白卡语言 + 右侧 chevron 做点击暗示 */
|
||||
/* 清单行:文字 + 右侧 chevron 做点击暗示 */
|
||||
.quick-item {
|
||||
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);
|
||||
padding: 26rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--ink-2);
|
||||
text-align: left;
|
||||
transition: transform 0.15s ease;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
/* 行分隔线用 --sep(比 --line 深一档,白面上才看得见) */
|
||||
.quick-item + .quick-item {
|
||||
border-top: 2rpx solid var(--sep);
|
||||
}
|
||||
|
||||
/* 行嵌在整块里,不能像独立卡那样整体缩放(会撕裂分隔线),
|
||||
点按反馈改由底色承担 */
|
||||
.quick-item:active {
|
||||
transform: scale(0.98);
|
||||
background: var(--brand-soft);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user