开发: push

This commit is contained in:
zhengw
2023-04-11 15:29:40 +08:00
parent 5834254a8f
commit ce3d942371
27 changed files with 1507 additions and 796 deletions

View File

@@ -1,109 +1,114 @@
.chatLeft {
.box {
display: flex;
.chatContentBox {
display: inline-flex;
flex-direction: column;
flex-shrink: 0;
max-width: 60%;
margin-left: 16px;
}
border: 1px solid #ddd;
}
.chatAvatar {
.personnelBox {
position: relative;
flex-shrink: 0;
width: 34px;
height: 34px;
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
background-color: #fff;
border-radius: 2px;
}
width: 251px;
height: calc(100vh - 212px);
border-right: 1px solid #ddd;
}
.name {
margin-bottom: 8px;
color: #999;
}
.content {
position: relative;
display: flex;
justify-content: center;
padding: 12px;
word-break: break-all;
background-color: #fff;
border-radius: 4px;
&::before {
position: absolute;
top: 12px;
left: -6px;
width: 12px;
height: 12px;
background-color: #fff;
transform: rotate(45deg);
content: '';
}
&:hover,
&:hover::before {
background-color: #ebebeb;
}
}
.chatRight {
display: flex;
justify-content: end;
.name {
text-align: right;
}
.chatContentBox {
display: inline-flex;
flex-direction: column;
flex-shrink: 0;
justify-content: end;
max-width: 60%;
margin-right: 16px;
}
.content {
background-color: #95ec69;
&::before {
right: -6px;
left: initial;
background-color: #95ec69;
}
&:hover,
&:hover::before {
background-color: #89d961;
}
}
}
.video {
position: relative;
.chatA,
.chatB {
display: flex;
align-items: center;
justify-content: center;
width: 176px;
height: 144px;
background-color: #333;
border-radius: 4px;
justify-content: flex-start;
height: 65px;
margin-bottom: 12px;
padding: 0 12px;
border-bottom: 1px solid #ddd;
cursor: pointer;
.videoTime {
position: absolute;
right: 8px;
bottom: 8px;
color: #fff;
&:hover {
background-color: #d6d6d7;
}
&.active {
background-color: #c5c4c4;
}
}
.chatB {
margin-bottom: 0;
border-bottom: none;
}
.chatAMsg {
display: flex;
flex: 1;
align-items: flex-start;
min-width: 0;
height: 40px;
padding-left: 12px;
.chatAName {
flex: 1;
flex-shrink: 0;
min-width: 0;
overflow: hidden;
font-size: 16px;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.avatar {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
line-height: 1;
background-color: #fff;
border-radius: 4px;
}
.chatBBox {
height: calc(100vh - 212px - 164px);
overflow: auto;
}
.chatLogBox {
height: calc(100vh - 212px - 66px);
padding: 12px;
overflow: auto;
}
.logTop {
display: flex;
align-items: center;
width: 100%;
height: 65px;
padding: 0 12px;
border-bottom: 1px solid #ddd;
}
.flolowsBox {
position: absolute;
top: 65px;
left: 0;
z-index: 1;
width: 100%;
max-height: 50vh;
overflow: auto;
background-color: #fff;
transform: translateY(20px);
visibility: hidden;
cursor: pointer;
opacity: 0;
transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
pointer-events: none;
&.show {
z-index: 1;
transform: translateY(0px);
visibility: visible;
opacity: 1;
pointer-events: all;
}
}