IM

im/src/assets/css/global.less

@@ -0,0 +1,238 @@
+@import './reset.css';
+
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.avatar-box {
+  height: 35px;
+  width: 35px;
+  flex-shrink: 0;
+  background-color: #508afe;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: white;
+  user-select: none;
+  transition: ease 1s;
+  position: relative;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    border-radius: 3px;
+  }
+
+  .top-mask {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(22, 25, 29, 0.6);
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: white;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+  }
+
+  &:hover .top-mask {
+    display: flex;
+  }
+}
+
+.no-border {
+  border: 0;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.border-radius0 {
+  border-radius: 0;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.talk-height {
+  height: 80%;
+  width: 80%;
+}
+
+.ov-hidden {
+  overflow: hidden;
+}
+
+// 滚动条样式
+.lum-scrollbar {
+  &::-webkit-scrollbar {
+    width: 3px;
+    background-color: #e4e4e5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: #c0bebc;
+  }
+}
+
+.larkc-tag {
+  font-size: 12px;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  height: 20px;
+  border-radius: 2px;
+  cursor: default;
+  user-select: none;
+  background-color: #dee0e3;
+  transform: scale(0.83);
+  transform-origin: left;
+  flex-shrink: 0;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 自定义 dialog 样式
+// lum-dialog -- start
+.lum-dialog-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: @maskBagColor;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .lum-dialog-box {
+    min-width: 200px;
+    min-height: 200px;
+    background-color: white;
+    border-radius: 3px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.2);
+    margin: 0 10px;
+
+    .container {
+      height: 100%;
+    }
+
+    .header {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #f5eeee;
+
+      >p:first-child {
+        text-indent: 20px;
+      }
+
+      .tools {
+        height: 100%;
+        width: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 20px;
+
+        i {
+          font-size: 20px;
+          cursor: pointer;
+          margin-left: 8px;
+        }
+      }
+    }
+
+    .main {
+      /deep/.el-input__inner {
+        border-radius: 1px !important;
+      }
+
+      .submit-btn {
+        border-radius: 2px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+// lum-dialog -- end
+
+.talk-notify {
+  .el-notification__title {
+    font-weight: 300;
+    font-size: 16px;
+    color: #f44336;
+  }
+
+  p {
+    max-height: 65px;
+    overflow: hidden;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-indent: -7px;
+    word-break: break-all;
+  }
+}
+
+.im-notify {
+  padding: 14px 26px 8px 0px;
+
+  .el-notification__closeBtn {
+    position: absolute;
+    top: 12px;
+  }
+
+  .el-notification__group {
+    margin-left: 5px;
+  }
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-2 {
+  flex: 2;
+}
+
+.flex-8 {
+  flex: 8;
+}
+
+.flex-4 {
+  flex: 4;
+}
+
+.flex-10 {
+  flex: 10;
+}