预警通知 滚动条样式

mes-ui/mes-ui-admin-vue3/src/views/Home/Index.vue

@@ -10,13 +10,15 @@
             <CloseBold />
           </el-icon></span>
       </div>
-      <div class="warncenter" v-for="item in 5" :key="item">
+      <div class="warncenter">
+        <div class="warntext" v-for="item in 5" :key="item">
           <span><img :src="warnimg" alt="" /></span>
-        <div class="warntext">
+          <div class="warnnr">
             <span>铸造工艺设计负责人: <span class="warnname">薛小宝</span> 请注意!</span>
             <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
           </div>
         </div>
+      </div>
 
     </div>
 
@@ -421,7 +423,7 @@ const closeWran = () => {
   showWarning.value = false
 }
 onMounted(() => {
-  // showWarning.value = true
+  showWarning.value = true
   // openwarn()
 })
 </script>
@@ -451,13 +453,16 @@ onMounted(() => {
     height: 250px;
     background-color: #fff;
     padding: 10px;
+    overflow-y: auto;
+    max-height: 250px;
+    .warntext {
       display: flex;
       justify-content: space-between;
-    .warntext {
+      color: #54595e;
+      .warnnr {
         margin-left: 10px;
         display: flex;
         flex-direction: column;
-      color: #54595e;
         .warnname {
           color: #409eff;
         }
@@ -468,6 +473,7 @@ onMounted(() => {
       }
     }
   }
+}
 .my-notification {
   width: 380px;
   .el-notification__group {
@@ -478,4 +484,28 @@ onMounted(() => {
     }
   }
 }
+
+//滚动条整体部分
+.warncenter::-webkit-scrollbar {
+  width: 10px; /* 水平滚动条宽度 */
+  height: 10px; /* 垂直滚动条高度 */
+} 
+//滚动条两端的按钮
+.warncenter::-webkit-scrollbar-button {
+  display: none;
+} 
+// 外层轨道
+.warncenter::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+  border-radius: 6px; 
+} 
+
+//滚动条里面可以拖动的那个
+.warncenter::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 6px;
+} 
+
 </style>
+
+