滚动条样式

src/views/IM/search-message/detail.vue

@@ -56,7 +56,7 @@ import BreadCrumb from "@/components/breadcrumb.vue";
 import { doUpload, getFilePath } from "@/utils/qiniu-util";
 import { openLoading, closeLoading, betaHandle, timeHandle } from "@/utils/utils";
 import { getPicaKFAccid } from "@/utils";
-import * as commonUtil from "@/utils/utils";
+// import * as commonUtil from "@/utils/utils";
 export default {
   components: {
     BreadCrumb
@@ -228,22 +228,27 @@ export default {
 			}
 			this.POST(url, req).then((res) => {
 				if(res.code == '000000') {
+					let arr = [], sortArr = [];
 					if(res.data.length > 0) {
-						this.historyTime = res.data[0].timestamp;
 						this.hasHistoryData = true;
-						let arr = res.data;
+						this.historyTime = res.data[0].timestamp;
+						arr = this.dataconcatHandle(res.data.reverse());
 						this.detailData.unshift(...arr);
-						this.detailData = this.dataconcatHandle(this.detailData);
-						setTimeout(() => {
-							const scrollBoxDom = document.getElementById("scroll-set");
-							scrollBoxDom.scrollTop = 200;
-						},100);
+						let el = this.getElmByID('scroll-set');
+						el.scrollTop = 500;
 					}else {
 						this.hasHistoryData = false;
 					}
 				}
 			})
 		},
+		// 按照时间大小排序
+		timeSort(arrList) {
+			arrList.sort((a, b) => {
+				return a.timestamp - b.timestamp;
+			});
+			return arrList
+		},
 		// 数据合并转换
 		dataconcatHandle(data) {
 			let currentTaskId = '';
@@ -282,10 +287,11 @@ export default {
 <style lang="scss" scoped>
 .search-msg-detail {
 	.detail-content {
-		margin: 80px 20px 0;
-		padding: 0 20px;
+		margin: 80px 20px 0 20px;
+		padding: 0 0px 0 20px;
 		background: #fff;
 		#scroll-set {
+			overflow-x: hidden;
 			overflow: scroll;
 		}
 		.split-line {
@@ -293,22 +299,22 @@ export default {
           display: flex;
           flex-direction: row;
           align-items: center;
-          margin: 15px 0;
+        //   margin: 15px 0;
           font-size: 14px;
-          color: #999999;
+          color: #333;
           &::before {
             flex: 1;
             content: '';
             height: 1px;
             margin-right: 18px;
-            background: #f0f1f2;
+            background:#C7C8C9;
           }
           &::after {
             flex: 1;
             content: '';
             height: 1px;
             margin-left: 18px;
-            background: #f0f1f2;
+            background:#C7C8C9;
           }
         }
 		.msg-container {
@@ -401,5 +407,13 @@ export default {
 			border-top: 1px solid #F0F1F2;
 		}
 	}
+	#scroll-set::-webkit-scrollbar {  
+		width: 10px;  
+		height: 5px;  
+		background-color: #F0F1F2 !important;  
+	}
+	#scroll-set::-webkit-scrollbar-thumb {
+		background-color: #F0F1F2 !important; 
+	}
 }
 </style>
\ No newline at end of file