采购详情滚动条

precision-effect-web/src/views/purchase/components/PurchaseDetail.vue

 <template>
-
-  <div>
+  <div class="detail">
     <CommonInfo :purchaseData="purchaseData"/>
     <div v-if="purchaseData.purchaseStatus > 0">
       <div style="margin: 11px 30px;color: #1890ff;">部门长审核</div>
@@ -46,6 +45,31 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .detail{
+    height: 460px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+       /* 设置滚动条宽度 */
+       width: 4px;
+       /* 设置滚动条背景色 */
+     //background: black;
+     }
+
+    //滚动条轨道
+      &::-webkit-scrollbar-track {
+        background-color:transparent;
+        -webkit-border-radius: 2em;
+        -moz-border-radius: 2em;
+        border-radius:2em;
+      }
 
+    //滚动条滑块
+      &::-webkit-scrollbar-thumb {
+        background-color: rgb(147,147,153,0.5);
+        -webkit-border-radius: 2em;
+        -moz-border-radius: 2em;
+        border-radius:2em;
+      }
+  }
 </style>