You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.7 KiB
108 lines
2.7 KiB
/* 全局容器样式 */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 106vh;
|
|
background-color: #ffffff; /* 背景为纯白色 */
|
|
color: #333333; /* 深色文本，和白色背景形成对比 */
|
|
margin-top: -100px;
|
|
margin-bottom: -60px;
|
|
}
|
|
/* 标题区域 */
|
|
.header {
|
|
padding: 10px; /* 调整内边距 */
|
|
text-align: center; /* 标题左对齐 */
|
|
border-bottom: 1px solid #e0e0e0; /* 边框为浅灰色 */
|
|
}
|
|
|
|
.title {
|
|
color: black; /* 深灰色标题 */
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-transform: uppercase; /* 大写标题 */
|
|
}
|
|
|
|
/* 聊天区域 */
|
|
.chat-area {
|
|
flex: 1;
|
|
background-color: #ffffff; /* 白色背景 */
|
|
overflow-y: auto; /* 允许滚动 */
|
|
border-top: 1px solid #e0e0e0; /* 边框线 */
|
|
}
|
|
|
|
/* 消息气泡 */
|
|
.message {
|
|
margin: 10px 10px;
|
|
display: flex;
|
|
flex-direction: row; /* 水平排列 */
|
|
}
|
|
|
|
.user-message, .assistant-message {
|
|
padding: 10px;
|
|
border-radius: 15px;
|
|
border: 1px solid #dddddd;
|
|
color: #333333;
|
|
word-wrap: break-word; /* 自动换行 */
|
|
word-break: break-all; /* 长单词自动拆分换行 */
|
|
white-space: pre-wrap; /* 保留空白符并换行 */
|
|
max-width: 80%; /* 最大宽度为70% */
|
|
font-family: 'Arial', sans-serif;
|
|
}
|
|
|
|
.user-message {
|
|
margin-left: auto;
|
|
background-color: #f0f0f0; /* 用户消息为浅灰色背景 */
|
|
border-radius: 15px 15px 0 15px; /* 圆角气泡 */
|
|
}
|
|
|
|
.assistant-message {
|
|
margin-right: auto;
|
|
background-color: #e8e8e8; /* AI消息背景色为稍深灰色 */
|
|
border-radius: 15px 15px 15px 0; /* 圆角气泡 */
|
|
}
|
|
|
|
/* 输入区域 */
|
|
.input-area {
|
|
display: flex;
|
|
padding: 10px 15px;
|
|
background-color: white; /* 输入区为浅灰色背景 */
|
|
border-top: 1px solid #dddddd; /* 上方的分隔线 */
|
|
position: sticky; /* 固定输入框在底部 */
|
|
bottom: 0;
|
|
}
|
|
|
|
.input-box {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: 1px solid #cccccc; /* 边框为浅灰色 */
|
|
border-radius: 5px; /* 圆角输入框 */
|
|
background-color: #ffffff; /* 输入框为白色 */
|
|
color: #333333;
|
|
margin-right: 10px;
|
|
font-family: 'Arial', sans-serif;
|
|
word-wrap: break-word; /* 输入框内长内容自动换行 */
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* 发送按钮样式 */
|
|
.send-btn {
|
|
padding: 6px 12px; /* 调整为更小的内边距 */
|
|
background-color: #4a90e2; /* 亮蓝色 */
|
|
color: #ffffff;
|
|
border-radius: 5px; /* 保持圆角 */
|
|
border: none;
|
|
font-weight: bold;
|
|
font-size: 14px; /* 缩小字体大小 */
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.send-btn:hover {
|
|
background-color: #357ABD; /* 悬停时颜色加深 */
|
|
}
|
|
|
|
/* 图标颜色和输入框样式 */
|
|
input::placeholder {
|
|
color: #aaaaaa; /* 输入框提示符为浅灰色 */
|
|
}
|