机器人样式失效问题

src/components/customerService/modalDialog.vue

@@ -99,8 +99,8 @@ export default {
       // 获取当前视口高度
       // 这里直接获取消息体高度
       this.$nextTick(() => {
-          const scrollView = this.$refs.scrollView;
-          scrollView.scrollTop = scrollView.scrollHeight;
+        const scrollView = this.$refs.scrollView;
+        scrollView.scrollTop = scrollView.scrollHeight;
       });
     },
     msgKf(msg) {
@@ -154,12 +154,12 @@ export default {
 <style lang='scss' scoped>
 /deep/ {
   .el-drawer {
-    height: 600px;
-    border-radius: 8px;
-    position: fixed;
-    bottom: 8%;
-    right: 5%;
-    top: initial;
+    border-radius: 8px !important;
+    position: fixed !important;
+    bottom: 5% !important;
+    right: 5% !important;
+    height: 700px !important;
+    top: initial !important;
     background: linear-gradient(90deg, #FFFFFF 0%, #EDF3FE 100%);
   }
 
@@ -186,9 +186,9 @@ export default {
     padding: 20px;
     overflow-y: auto;
     /* 允许垂直滚动 */
-    height: calc(600px - 113px);
+    height: calc(700px - 113px);
     box-sizing: border-box;
-    padding-bottom: 50px;
+    padding-bottom: 40px;
     /* 适应消息区和底部导航栏 */
     cursor: pointer;
 
@@ -247,6 +247,9 @@ export default {
       box-sizing: border-box;
 
     }
+
+    /* 滚动条的整体部分，可自定义宽度、颜色等 */
+
   }
 
   .outerLayer {
@@ -273,6 +276,39 @@ export default {
       }
     }
   }
+  .scroll-view::-webkit-scrollbar {
+    width: 10px;
+    /* 或者更宽 */
+    background-color: #EDF3FE;
+    /* 滚动条的背景色 */
+  }
+
+  /* 滚动条上的“滑块” */
+  .scroll-view::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    /* 圆角 */
+    background-color: #d1d1e0;
+    /* 滑块的背景色 */
+    border: 3px solid #f9f9fd;
+    /* 滑块边框 */
+  }
 
+  /* 滚动条上的“滑道” */
+  .scroll-view::-webkit-scrollbar-track {
+    border-radius: 6px;
+    /* 圆角 */
+    // box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    /* 滑道的阴影效果 */
+  }
+
+  /* 当鼠标悬停在滚动条上时，改变滑块的颜色 */
+  .scroll-view::-webkit-scrollbar-thumb:hover {
+    background-color: #888;
+  }
+
+  /* 当滚动条在点击状态时，改变滑块的颜色 */
+  .scroll-view::-webkit-scrollbar-thumb:active {
+    background-color: #d1d1e0;
+  }
 }
 </style>