消息

TUIKit/components/TUISearch/search-result/style/h5.scss

@@ -0,0 +1,67 @@
+.tui-search-result-h5 {
+  background-color: #f4f4f4;
+
+  .tui-search-result-main {
+    background-color: #f4f4f4;
+
+    .tui-search-result-list {
+      .tui-search-result-list-item {
+        background-color: #fff;
+        padding: 0 10px 10px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .tui-search-result-detail {
+    background-color: #f4f4f4;
+    border: none;
+
+    .list-item {
+      margin: 0 10px;
+      width: calc(100% - 20px);
+    }
+
+    .list-group-date {
+      padding: 10px;
+    }
+
+    .list-group-image {
+      .list-group-item {
+        .search-result-list-item-h5 {
+          padding: 0;
+        }
+      }
+    }
+
+    .list-group-file {
+      .list-group-item {
+        background-color: #fff;
+        padding: 0 10px;
+        border-bottom: 1px solid #f4f4f4;
+
+        .search-result-list-item-h5 {
+          padding: 0 0 10px;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+.search-result-loading,
+.search-result-default {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-h5 {
+    background-color: #f4f4f4;
+  }
+}

TUIKit/components/TUISearch/search-result/style/index.scss

@@ -0,0 +1,3 @@
+@import '../../../../assets/styles/common';
+@import './web';
+@import './h5';

TUIKit/components/TUISearch/search-result/style/web.scss

@@ -0,0 +1,180 @@
+.tui-search-result {
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  box-sizing: border-box;
+
+  &-with-border {
+    border-top: 1px solid rgba(0,0,0,0.1);
+  }
+
+  &-detail {
+    width: 360px;
+    overflow-y: hidden;
+    border-left: 1px solid rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .tui-search-message-header {
+      padding: 10px;
+      display: flex;
+      flex-direction: row;
+      place-content: space-between space-between;
+      font-size: 14px;
+      align-items: center;
+
+      .header-content {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1;
+        overflow: hidden;
+        color: #666;
+        white-space: nowrap;
+
+        .header-content-count {
+          width: fit-content;
+          white-space: nowrap;
+        }
+
+        .header-content-keyword {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .header-content-type {
+          width: 110px;
+          white-space: nowrap;
+        }
+
+        .normal {
+          color: #666;
+        }
+
+        .highlight {
+          color: #007aff;
+        }
+      }
+
+      .header-enter {
+        margin-left: 10px;
+        width: 70px;
+        color: #666;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+      }
+    }
+
+    .tui-search-message-list {
+      overflow-y: auto;
+
+      .list-item {
+        width: 100%;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .list-group {
+        &.list-group-image {
+          display: flex;
+          flex-flow: row wrap;
+
+          .list-group-item {
+            width: 111px;
+            height: 111px;
+          }
+        }
+
+        .list-group-date {
+          width: 100%;
+          box-sizing: border-box;
+          font-family: "PingFang SC", sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          letter-spacing: 0;
+          text-align: left;
+          padding: 10px 10px 2px;
+        }
+      }
+
+      .more {
+        display: flex;
+        flex-direction: row;
+        font-size: 14px;
+        padding: 8px 0;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+
+        .more-text {
+          padding-left: 8px;
+          font-size: 12px;
+          color: #007aff;
+          user-select: none;
+        }
+      }
+    }
+  }
+
+  &-main {
+    width: 350px;
+    padding: 10px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .tui-search-result-list {
+      &-item {
+        .header {
+          font-size: 14px;
+          padding: 4px 0;
+        }
+
+        .list {
+          display: flex;
+          flex-direction: column;
+
+          .list-item {
+            cursor: pointer;
+          }
+
+          .list-item-selected {
+            background: #f2f2f2;
+            border-radius: 5px;
+          }
+        }
+
+        .more {
+          display: flex;
+          flex-direction: row;
+          font-size: 14px;
+
+          // padding: 8px 0;
+          padding-top: 10px;
+          user-select: none;
+          cursor: pointer;
+
+          .more-text {
+            padding-left: 8px;
+            font-size: 12px;
+            color: #007aff;
+            user-select: none;
+          }
+        }
+      }
+    }
+  }
+
+  .tui-search-result-in-conversation {
+    border: none;
+  }
+}