222 lines
3.6 KiB
CSS
222 lines
3.6 KiB
CSS
.main {
|
|
width: 900px;
|
|
height: 650px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 17px #e7e5e5;
|
|
background: #fff;
|
|
}
|
|
.main_header {
|
|
height: 55px;
|
|
background: #e7e6e6;
|
|
width: 100%;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 0 15px;
|
|
}
|
|
.main_header img{
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 100%;
|
|
margin-left: 10px;
|
|
}
|
|
.main_header span{}
|
|
|
|
.main_header {}
|
|
.main_content {
|
|
display: flex;
|
|
height: calc(650px - 55px - 100px);
|
|
}
|
|
.left_chat {
|
|
width: 80%;
|
|
padding: 10px 15px 0 10px;
|
|
overflow-y: scroll;
|
|
}
|
|
.left_chat li {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 30px;
|
|
}
|
|
.left_chat li .tx{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 100%;
|
|
margin-right: 10px;
|
|
}
|
|
.c_text img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.left_chat li .r_text p{
|
|
color: #777;
|
|
margin-bottom: 8px;
|
|
}
|
|
.c_text {
|
|
font-size: #000;
|
|
background: #f3f3f3;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.right_list {
|
|
width: 20%;
|
|
background: #f6f7f9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
overflow-y: scroll;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.right_list li {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
.right_list li span{
|
|
color: #777;
|
|
}
|
|
.right_list img {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 100%;
|
|
}
|
|
.main_input {
|
|
height: calc(100% - 55px - 495px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tools {
|
|
height: 30px;
|
|
background: white;
|
|
border-top: 1px solid #f3eded;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 11px;
|
|
justify-content: flex-start;
|
|
}
|
|
.tools i {
|
|
margin-right: 15px;
|
|
position: relative;
|
|
}
|
|
.icon-smile .emoji,
|
|
.gif {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
background: #fff;
|
|
top: -213px;
|
|
left: 0;
|
|
overflow-y: scroll;
|
|
padding: 5px;
|
|
padding-right: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-shadow: 0px 0px 17px #e7e5e5;
|
|
border-radius: 4px;
|
|
}
|
|
.gif {
|
|
width: 0;
|
|
height: 0;
|
|
display: inline-block !important;
|
|
font-size: 0;
|
|
}
|
|
.gif img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.emoji span {
|
|
width: 22px;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
}
|
|
.font,
|
|
.qipao{
|
|
line-height: 40px;
|
|
position: absolute;
|
|
width: 710px;
|
|
left: -71px;
|
|
top: -49px;
|
|
background: #f5f4f4;
|
|
height: 40px;
|
|
align-items: center;
|
|
padding-left: 7px;
|
|
display: none;
|
|
}
|
|
.qipao {
|
|
left: -129px;
|
|
top: -48px;
|
|
}
|
|
.font select {
|
|
height: 23px;
|
|
margin-right: 10px;
|
|
font-size: 12px;
|
|
}
|
|
.tools .icon-zhendong {
|
|
font-size: 14px;
|
|
}
|
|
.main_input textarea {
|
|
flex: 1;
|
|
resize: none;
|
|
border: none;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
outline: none;
|
|
padding-left: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.system p {
|
|
margin: 0 auto;
|
|
padding: 3px 10px;
|
|
background: #f3f3f3;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
color: #a9a5a5;
|
|
}
|
|
.me_message {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.me_message img {
|
|
order: 1
|
|
}
|
|
.me_message .r_text {
|
|
order: -1
|
|
}
|
|
.me_message .r_text p{
|
|
text-align: right;
|
|
}
|
|
.me_message .c_text{
|
|
background: #dff3fd;
|
|
}
|
|
|
|
.startAn {
|
|
animation: doudong 0.01s infinite reverse;
|
|
}
|
|
@keyframes doudong
|
|
{
|
|
0% {
|
|
left: 50%;
|
|
}
|
|
25% {
|
|
left: 45%;
|
|
}
|
|
50% {
|
|
left: 50%;
|
|
}
|
|
100% {
|
|
left: 55%;
|
|
}
|
|
}
|
|
.clearQiPao {
|
|
background: rgb(223 243 253 / 0%) !important;
|
|
}
|
|
.qipao_select {
|
|
display: none;
|
|
} |