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.
111 lines
2.0 KiB
111 lines
2.0 KiB
.background {
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
height: 75%;
|
|
top: 4%;
|
|
z-index: -3;
|
|
}
|
|
|
|
.chat {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 10%;
|
|
height: 79%;
|
|
z-index: -1;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
display: flex;
|
|
flex-direction: column; /* 消息从上往下显示 */
|
|
|
|
}
|
|
|
|
.chat_area {
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border-radius: 15px;
|
|
max-width: 75%;
|
|
word-wrap: break-word;
|
|
display: flex;
|
|
flex-direction: row; /* 头像和消息水平排列 */
|
|
align-items: center; /* 内容垂直居中 */
|
|
}
|
|
|
|
.user_message {
|
|
background-color: #7879F1; /* 用户消息气泡背景色 */
|
|
|
|
color: white;
|
|
margin-top: 22%; /* 让用户的消息气泡靠右 */
|
|
margin-right: 5%; /* AI消息靠左 */
|
|
margin-left: auto; /* 让AI的消息气泡靠右 */
|
|
text-align: left;
|
|
word-break: break-word; /* 自动换行 */
|
|
}
|
|
|
|
.ai_message {
|
|
background-color: #e5e5ea; /* AI消息气泡背景色 */
|
|
color: black;
|
|
margin-left: 2%; /* 用户消息靠右 */
|
|
margin-right: auto; /* 让用户的消息气泡靠左 */
|
|
text-align: left;
|
|
word-break: break-word; /* 自动换行 */
|
|
}
|
|
|
|
.avatar_container {
|
|
display: flex;
|
|
right: 10%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.ai_avatar_container {
|
|
margin-right: 10px; /* AI头像与气泡的间距 */
|
|
}
|
|
|
|
.user_avatar_container {
|
|
margin-left: 10px; /* 用户头像与气泡的间距 */
|
|
}
|
|
|
|
.ai_avatar, .user_avatar {
|
|
right: 5%;
|
|
width: 40px; /* 头像的大小 */
|
|
height: 40px; /* 头像的大小 */
|
|
border-radius: 50%; /* 头像圆形 */
|
|
}
|
|
|
|
.message_content {
|
|
max-width: 80%; /* 限制消息气泡的最大宽度 */
|
|
}
|
|
|
|
.input_box {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 9%;
|
|
top: 79%;
|
|
}
|
|
|
|
.input_box_background {
|
|
position: absolute;
|
|
width: 98%;
|
|
height: 90%;
|
|
left: 1%;
|
|
top: 5%;
|
|
}
|
|
|
|
.input_words {
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 80%;
|
|
left: 5%;
|
|
top: 10%;
|
|
}
|
|
|
|
.send_button {
|
|
position: absolute;
|
|
width: 12%;
|
|
height: 70%;
|
|
left: 84%;
|
|
top: 15%;
|
|
}
|