update

user_web/src/view/student/main/Main.vue

@@ -192,15 +192,8 @@ const menuListEvent = (json, index) => {
     </div>
 </template>
 
-<style lang="scss" >
-* {
-    box-sizing:border-box;
-    -moz-box-sizing:border-box; /* Firefox */
-    -webkit-box-sizing:border-box; /* Safari */
-}
-</style>
-
 <style lang="scss" scoped>
+@import "./css/commonsScrollbar.scss";
 
 $myScale: 0.9;
 
@@ -210,6 +203,9 @@ $myScale: 0.9;
     -ms-user-select: none;
     -khtml-user-select: none;
     user-select: none;
+    box-sizing:border-box;
+    -moz-box-sizing:border-box; /* Firefox */
+    -webkit-box-sizing:border-box; /* Safari */
 }
 
 .main {

user_web/src/view/student/main/css/commonsScrollbar.scss

@@ -0,0 +1,144 @@
+
+/* 滚动 */
+.commonsScrollbar {
+    overflow-y: scroll;
+    overflow-x: visible;
+}
+
+/* 滚动条整体样式 */
+.commonsScrollbar::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::scrollbar {
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-moz-scrollbar {
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-ms-scrollbar {
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-o-scrollbar {
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+/* 滚动条里面小方块 */
+.commonsScrollbar::-webkit-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::-moz-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::-ms-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+.commonsScrollbar::-o-scrollbar-thumb {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-height: 1px;
+}
+
+/* 滚动条里面轨道 */
+.commonsScrollbar::-webkit-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-moz-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-ms-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.commonsScrollbar::-o-scrollbar-thumb:hover {
+    /* background-color: #EAEAEA;*/
+    background-color: #1E96C8;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+
+
+
+