perf:滚动条缓动

src/App.vue

@@ -459,7 +459,27 @@ body > .el-container {
     transform: rotate(45deg) scale(0.25);
   }
 }
-
+::-webkit-scrollbar {
+  width: 10px;
+  /* height:5px; */
+  /* display: none; */
+}
+::-webkit-scrollbar-track {
+  background: rgba(226, 247, 255, 0.5);
+  border-radius: 2px;
+  /* display: none; */
+}
+::-webkit-scrollbar-track-piece {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  /* display: none; */
+}
+::-webkit-scrollbar-thumb {
+  background: #ff995e;
+  height: 2px;
+  border-radius: 2px;
+  /* display: none; */
+}
 @keyframes backdiv {
   50% {
     background: #ffe6f2;

src/components/Article.vue

@@ -22,7 +22,7 @@
           </ul>
         </div>
         <!-- 分页 -->
-        <div class="block">
+        <div class="pagenation-block">
           <!-- <span class="demonstration">完整功能</span> -->
           <el-pagination
             :current-page="currentPage"
@@ -102,7 +102,7 @@
       </el-card>
     </div>
     <!-- 中间 markdown-->
-    <div class="midclass">
+    <div class="midclass" ref="mark-down-ref">
       <a name="home" id="hometitle" style="transition: 1s"></a>
       <el-card shadow="hover" style="line-height: 10px">
         <div class="block" style="line-height: 20px">
@@ -431,8 +431,27 @@ export default {
         },
 
         toTop: function () {
-            location.href = '#home' // 定位
+            const dom = this.$refs['mark-down-ref']
+            if (!dom) {
+                return 0
+            }
+            const speedValue = Math.floor(dom.scrollTop / 20)
+            const second = 20
+            const diffTop = function (speed, time) {
+                let top = Math.ceil(dom.scrollTop)
+                if (top > 0) {
+                    dom.scrollTop = top - speed > 0 ? top - speed : 0
+                }
+                if (dom.scrollTop > 0) {
+                    setTimeout(() => {
+                        return diffTop(speed, time)
+                    }, 10)
+                }
+            }
+            diffTop(speedValue, second)
+            if (document.getElementById('mainappid') && document.getElementById('mainappid').scrollTop > 0) {
                 document.getElementById('mainappid').scrollTop = 0
+            }
         }, // 返回天气相当于返回顶部
         getCommentsFromArticle (id) {
             this.$refs.commentRef.getComments(id) // 触发子组件的方法
@@ -591,7 +610,9 @@ el-col::-webkit-scrollbar {
 
   /* scrollbar-track-color: darkslategrey; */
 }
-
+.pagenation-block{
+  overflow: auto;
+}
 .midclass::-webkit-scrollbar {
   width: 10px;
   /* height:5px; */

src/main.js

@@ -5,6 +5,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import axios from 'axios'
 import hljs from 'highlight.js'
+import * as echarts from 'echarts'
 import importElementComponents from './importElement'
 import importEchartsComponents from './importEchartsComponents'
 // 样式cnd
@@ -15,8 +16,6 @@ import useRouter from './router'
 import cookies from 'vue-cookies'
 import App from './App'
 import 'highlight.js/styles/github.css'
-import * as echarts from 'echarts/core'
-
 
 const env = process.env.NODE_ENV
 // 生产环境
@@ -41,6 +40,7 @@ if (env === 'production') {
         Vue.prototype.$axios = axios
         window.$axios_w = axios
         Vue.prototype.$echarts = echarts
+        window.$echarts_w = echarts
 
         Vue.prototype.$cookies.set('user_session', 'null')