|
|
@@ -142,10 +142,35 @@ data(){
|
|
|
.menu-bar-width {
|
|
|
width: 220px;
|
|
|
overflow-y: auto;
|
|
|
-
|
|
|
}
|
|
|
.menu-bar-collapse-width {
|
|
|
width: 65px;
|
|
|
}
|
|
|
+ /* 滚动条的整体部分，可自定义宽度、颜色等 */
|
|
|
+ .menu-bar-width::-webkit-scrollbar {
|
|
|
+ width: 10px; /* 或者更宽 */
|
|
|
+ background-color: #f9f9fd; /* 滚动条的背景色 */
|
|
|
+}
|
|
|
+/* 滚动条上的“滑块” */
|
|
|
+.menu-bar-width::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 6px; /* 圆角 */
|
|
|
+ background-color: #d1d1e0; /* 滑块的背景色 */
|
|
|
+ border: 3px solid #f9f9fd; /* 滑块边框 */
|
|
|
+}
|
|
|
+/* 滚动条上的“滑道” */
|
|
|
+.menu-bar-width::-webkit-scrollbar-track {
|
|
|
+ border-radius: 6px; /* 圆角 */
|
|
|
+ box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滑道的阴影效果 */
|
|
|
+}
|
|
|
+/* 当鼠标悬停在滚动条上时，改变滑块的颜色 */
|
|
|
+.menu-bar-width::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: #a0a0a5;
|
|
|
}
|
|
|
+
|
|
|
+/* 当滚动条在点击状态时，改变滑块的颜色 */
|
|
|
+.menu-bar-width::-webkit-scrollbar-thumb:active {
|
|
|
+ background-color: #888;
|
|
|
+}
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
