预警通知 滚动条样式

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

@@ -10,11 +10,13 @@
             <CloseBold />
           </el-icon></span>
       </div>
-      <div class="warncenter" v-for="item in 5" :key="item">
+      <div class="warncenter">
-        <span><img :src="warnimg" alt="" /></span>
+        <div class="warntext" v-for="item in 5" :key="item">
-        <div class="warntext">
+          <span><img :src="warnimg" alt="" /></span>
-          <span>铸造工艺设计负责人: <span class="warnname">薛小宝</span> 请注意!</span>
+          <div class="warnnr">
-          <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
+            <span>铸造工艺设计负责人: <span class="warnname">薛小宝</span> 请注意!</span>
+            <span class="warnbh">项目编号【{{ item}}】的图纸设计即将超时，请及时完成。</span>
+          </div>
         </div>
       </div>
 
@@ -421,7 +423,7 @@ const closeWran = () => {
   showWarning.value = false
 }
 onMounted(() => {
-  // showWarning.value = true
+  showWarning.value = true
   // openwarn()
 })
 </script>
@@ -451,19 +453,23 @@ onMounted(() => {
     height: 250px;
     background-color: #fff;
     padding: 10px;
-    display: flex;
+    overflow-y: auto;
-    justify-content: space-between;
+    max-height: 250px;
     .warntext {
-      margin-left: 10px;
       display: flex;
-      flex-direction: column;
+      justify-content: space-between;
       color: #54595e;
-      .warnname {
+      .warnnr {
-        color: #409eff;
+        margin-left: 10px;
-      }
+        display: flex;
-      .warnbh {
+        flex-direction: column;
-        margin-top: 5px;
+        .warnname {
-        color: rgba(84, 89, 94, 0.6);
+          color: #409eff;
+        }
+        .warnbh {
+          margin-top: 5px;
+          color: rgba(84, 89, 94, 0.6);
+        }
       }
     }
   }
@@ -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>
+
+