小程序修改
This commit is contained in:
347
urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
Normal file
347
urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
Normal file
@@ -0,0 +1,347 @@
|
||||
// 主容器
|
||||
.chat-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #E8F4FD 0%, #F5FAFF 25%, #FAFCFE 50%, #FFFFFF 100%);
|
||||
position: relative;
|
||||
// 多种安全区域适配方式
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-top: constant(safe-area-inset-top); /* 兼容iOS < 11.2 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 顶部标题栏
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
// background: linear-gradient(180deg, rgba(235, 245, 255, 0.8) 0%, rgba(255, 255, 255, 0.95) 100%);
|
||||
// backdrop-filter: blur(10px);
|
||||
z-index: 100;
|
||||
box-sizing: border-box;
|
||||
// paddingTop和height通过JS动态设置
|
||||
|
||||
// 小程序需要为右侧胶囊按钮留出空间
|
||||
/* #ifdef MP-WEIXIN */
|
||||
padding-right: 100px; // 为胶囊按钮留出空间
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px; // 调整字体大小以适配胶囊按钮高度
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.workcase-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0; // 防止按钮被压缩
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 聊天消息区域
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
// background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 16px;
|
||||
padding-bottom: 120px;
|
||||
position: relative;
|
||||
// 为固定定位的header留出空间
|
||||
margin-top: 76px; // 默认header高度
|
||||
}
|
||||
|
||||
// 欢迎界面
|
||||
.welcome-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.welcome-image {
|
||||
width: 90%; // 增大图片尺寸以适应PNG图标+文字气泡
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.welcome-text-primary {
|
||||
font-size: 22px; // 增大主标题字体
|
||||
font-weight: 600;
|
||||
color: #1A1A1A; // 更深的文字颜色
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.welcome-text-secondary {
|
||||
font-size: 16px; // 增大副标题字体
|
||||
color: #4A4A4A; // 调整副标题颜色
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// 消息列表
|
||||
.messages-list {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-message-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bot-message-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
background: #5B8FF9;
|
||||
}
|
||||
|
||||
.bot-avatar {
|
||||
background: #FF6B6B;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: 240px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-bubble {
|
||||
background: #5B8FF9;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.bot-bubble {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.user-bubble .message-text {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.bot-bubble .message-text {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.user-message .message-time {
|
||||
text-align: right;
|
||||
padding-right: 48px;
|
||||
}
|
||||
|
||||
.bot-message .message-time {
|
||||
text-align: left;
|
||||
padding-left: 48px;
|
||||
}
|
||||
|
||||
// 底部操作区域
|
||||
.bottom-area {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
// background: #FFFFFF;
|
||||
padding: 12px 16px;
|
||||
padding-bottom: calc(12px + env(safe-area-inset-bottom));
|
||||
// box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
// 第一行容器
|
||||
.top-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// 主要操作按钮
|
||||
.main-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 30px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: #5B8FF9;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
background: #F7F8FA;
|
||||
color: #1F2329;
|
||||
border: 1px solid #E5E6EB;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 竖向分隔线
|
||||
.divider-line {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background: #E5E6EB;
|
||||
margin: 0 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 快速问题区域
|
||||
.quick-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
// width: 100%;
|
||||
height: 30px;
|
||||
background: #F7F8FA;
|
||||
border: 1px solid #E5E6EB;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quick-text {
|
||||
font-size: 13px;
|
||||
color: #646A73;
|
||||
}
|
||||
|
||||
// 输入区域
|
||||
.input-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
padding: 0 50px 0 16px;
|
||||
background: #F7F8FA;
|
||||
border: 1px solid #E5E6EB;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
color: #1F2329;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-input::placeholder {
|
||||
color: #8F959E;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
border: 2px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
line-height: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user