update

package.json

@@ -10,7 +10,7 @@
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
-    "vbest-ui": "^0.2.4",
+    "vbest-ui": "^0.2.7",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/components/common/scroll/Scroll.vue

@@ -2,17 +2,17 @@
   <div class="scroll">
     <b-scroll
       ref="scroll"
+      class="b-scroll"
       :theme="getTheme"
       :speed="speed"
       :disable-bar="disableBar"
-      class="b-scroll"
-      @pullingUp="pullingUp"
       :height="height"
       :disable-wheel="disableWheel"
-      :bar-color="barColor"
-      :load-color="loadColor"
+      :track-color="trackColor"
+      :thumb-color="thumbColor"
       @moveStart="moveStart"
       @moveEnd="moveEnd"
+      @pullingUp="pullingUp"
     >
       <slot></slot>
     </b-scroll>
@@ -40,14 +40,14 @@ export default {
       type: Boolean,
       default: false,
     },
-    barColor:{
-      type:String,
-      default:"",
+    trackColor: {
+      type: String,
+      default: "",
+    },
+    thumbColor: {
+      type: String,
+      default: "",
     },
-    loadColor:{
-            type:String,
-      default:"",
-    }
   },
   methods: {
     refresh() {
@@ -61,13 +61,13 @@ export default {
       this.$emit("pullingUp");
     },
     /**鼠标按下进度条小球 */
-    moveStart(){
-      this.$emit('moveStart');
+    moveStart() {
+      this.$emit("moveStart");
     },
     /**鼠标释放进度条小球 */
-    moveEnd(){
-      this.$emit('moveEnd');
-    }
+    moveEnd() {
+      this.$emit("moveEnd");
+    },
   },
 };
 </script>

src/layout/Aside.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="asideClass">
-    <div class="menu">
+    <div class="menu" ref="menu">
       <b-menu
         :menu="menuList"
         vertical
@@ -126,13 +126,13 @@ export default {
   }
 }
 .menu {
-  height: 300px;
+  height:50%;
 }
 .aside-scroll {
-  height: calc(100% - 300px -60px);
+  height: calc(50% -60px);
 }
 .my-music-list {
-  height: calc(100% - 300px -60px);
+  height: calc(50% -60px);
   padding: 10px 0px;
   .title {
     font-size: 13px;

src/main.js

@@ -13,7 +13,7 @@ Vue.use(VbestUi)
 
 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad,{
-  loading: './assets/img/loading.png',
+  loading: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
 })
 
 import global from './utils/global'

src/player/Player.vue

@@ -55,10 +55,10 @@
       <div class="player-progress-main">
         <b-progress
           :percent.sync="percent"
-          pro-width="4px"
-          :base-color="getProgressBaseColor"
-          :stroke-color="iconActiveColor"
-          show-loadbar
+          :stroke-width="4"
+          :track-base-color="getProgressBaseColor"
+          :track-color="iconActiveColor"
+          show-thumb
           allow-click
           allow-drag
           is-active
@@ -78,10 +78,10 @@
       <div class="player-volumn-progress">
         <b-progress
           :percent.sync="volumnPercent"
-          pro-width="3px"
-          :base-color="getProgressBaseColor"
-          :stroke-color="iconActiveColor"
-          show-loadbar
+          :stroke-width="3"
+          :track-base-color="getProgressBaseColor"
+          :track-color="iconActiveColor"
+          show-thumb
           allow-click
           allow-drag
           is-active

src/styles/theme.css

@@ -64,15 +64,15 @@ h4 {
 }
 
 ::-webkit-scrollbar {
-    width: 16px;
+    width: 12px;
     height: 16px;
     background-color: #f5f5f5;
 }
 
 ::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-bgcolor);
+    background-color: var(--scrollbar-track-color);
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-color);
+    background-color: var(--scrollbar-thumb-color);
 }

src/styles/variables/variable-dark.js

@@ -1,4 +1,4 @@
 export default {
-    ['--scrollbar-bgcolor']: '#16181c',
-    ['--scrollbar-color']: '#4f4f4f',
+    ['--scrollbar-track-color']: '#16181c',
+    ['--scrollbar-thumb-color']: '#4f4f4f',
 }

src/styles/variables/variable-green.js

@@ -1,4 +1,4 @@
 export default {
-    ['--scrollbar-bgcolor']: '#f1f1f1',
-    ['--scrollbar-color']: '#cdcdcd',
+    ['--scrollbar-track-color']: '#f1f1f1',
+    ['--scrollbar-thumb-color']: '#cdcdcd',
 }

src/styles/variables/variable-white.js

@@ -3,6 +3,6 @@
  * --scrollbar-color 滚动条小球颜色
  */
 export default {
-    ['--scrollbar-bgcolor']: '#f1f1f1',
-    ['--scrollbar-color']: '#cdcdcd',
+    ['--scrollbar-track-color']: '#f1f1f1',
+    ['--scrollbar-thumb-color']: '#cdcdcd',
 }

src/utils/global.js

@@ -1,12 +1,9 @@
 import { Carousel, CarouselItem ,Pagination} from 'element-ui'
 
-import BMask from 'common/mask/BMask'
-
 const components = [
     Carousel,
     CarouselItem,
     Pagination,
-    BMask
 ];
 
 export default {

src/utils/tool.js

@@ -9,7 +9,7 @@ export function debounce(fn,delay){
     },delay)
   }
 }
-// 时间戳方案
+// 时间戳方案--节流
 export function throttle(fn,wait){
   var pre = Date.now();
   return function(){