12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- // ion-header {
- // --min-height: 80px !important; /* 设置 header 的最小高度为 80px,你可以根据需要调整高度 */
- // }
- .chat-content {
- padding: 10px;
- }
-
- ion-item.message-item {
-
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin-bottom: 10px;
- max-width: 80%; /* 控制消息框的最大宽度 */
- }
-
- .message-container {
- padding: 8px 12px;
- display: inline-block;
- max-width: 80%; /* 控制消息内容的最大宽度 */
- }
-
- .sent {
- justify-content: flex-end; /* 将发送的消息右对齐 */
- }
-
- .received {
- justify-content: flex-start; /* 将接收的消息左对齐 */
- }
-
- .sent-message-container {
- background-color: #dcf8c6; /* 发送消息的背景颜色 */
- align-self: flex-end;
- border-radius: 10px;
- padding: 10px;
- margin-bottom: 4px;
- max-width: 70%; /* 适当调整最大宽度 */
- text-align: right; /* 文本右对齐 */
- }
-
- .received-message-container {
- background-color: #f0f0f0; /* 接收消息的背景颜色 */
- align-self: flex-start;
- border-radius: 10px;
- padding: 10px;
- margin-bottom: 4px;
- max-width: 70%; /* 适当调整最大宽度 */
- text-align: left; /* 文本左对齐 */
- }
- .sent-message-container[_ngcontent-ng-c914708361]{
- max-width: 100%;
- }
- ion-avatar[_ngcontent-ng-c914708361]{
- margin-top:28px;
- }
- .list-md{
- width: 123%;
- }
- .received-message-container[_ngcontent-ng-c914708361]{
- max-width: 100%;
- }
-
- .sent-message, .received-message {
- color: #333; /* 消息文本颜色 */
- }
-
- .message-time {
- font-size: 12px;
- color: #888; /* 时间文本颜色 */
- margin-top: 4px;
- }
-
- .message-details {
- display: flex;
- flex-direction: column;
- }
-
- ion-avatar {
- width: 32px;
- height: 32px;
- margin-left: 8px;
- margin-right: 8px;
- }
-
|