/* ---历史消息--- */ #service-list .mobile-page pre{ white-space: pre-wrap; word-wrap: break-word; } .mobile-page{ margin-bottom: 2.5rem; } .mobile-page .admin-img, .mobile-page .user-img{ width: 45px; height: 45px; } i.triangle-admin,i.triangle-user{ width: 0; height: 0; position: absolute; top: 10px; display: inline-block; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .mobile-page i.triangle-admin{ left: 4px; border-right: 12px solid rgb(248, 248, 248); } .mobile-page i.triangle-user{ right: 4px; border-left: 12px solid #9EEA6A; } .mobile-page .admin-group, .mobile-page .user-group{ padding: 6px; display: flex; display: -webkit-flex; } .mobile-page .admin-group{ justify-content: flex-start; -webkit-justify-content: flex-start; } .mobile-page .user-group{ justify-content: flex-end; -webkit-justify-content: flex-end; } .mobile-page .admin-reply, .mobile-page .user-reply{ display: inline-block; padding: 13px; border-radius: 4px; background-color: #fff; margin:0 15px 12px; font-size: .8rem; white-space: pre-wrap; } .mobile-page .admin-reply{ box-shadow: 0px 0px 2px #ddd; } .mobile-page .user-reply{ text-align: left; background-color: #9EEA6A; box-shadow: 0px 0px 2px #bbb; } .mobile-page .user-msg, .mobile-page .admin-msg{ width: 75%; position: relative; } .mobile-page .user-msg{ text-align: right; } /*--- 消息输入框--- */ .footer { padding: .5rem; position: fixed; bottom: 60px; left: 0; right: 0; } .chat-container { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: #f5f5f5; } .chat-input { flex-grow: 1; padding: 8px; border: none; border-radius: 5px; font-size: 16px; background-color: #fff; } .send-button { margin-left: 10px; padding: 8px 16px; border: none; border-radius: 5px; font-size: 16px; color: #fff; background-color: #007bff; cursor: pointer; } /* 可以根据需要自定义样式,例如调整颜色、边框等 */