开发: push

2023-04-11 15:29:40 +08:00
parent 5834254a8f
commit ce3d942371
27 changed files with 1507 additions and 796 deletions
--- a/src/pages/ChatLogs/components/index.module.scss
+++ b/src/pages/ChatLogs/components/index.module.scss
@@ -0,0 +1,111 @@
+.chatLeft {
+  display: flex;
+  margin-bottom: 12px;
+
+  .chatContentBox {
+    display: inline-flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    max-width: 60%;
+    margin-left: 16px;
+  }
+}
+
+.chatAvatar {
+
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    background-color: #fff;
+    border-radius: 2px;
+  }
+}
+
+.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;
+  margin-bottom: 12px;
+
+  .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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 176px;
+  height: 144px;
+  background-color: #333;
+  border-radius: 4px;
+  cursor: pointer;
+
+  .videoTime {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    color: #fff;
+  }
+}