diff --git a/babel.config.js b/babel.config.js
index e9558405fdcc02f12d757acb308e02937a7444f1..a1b8d9788c68d343d6166311b53c2c0251cf93d4 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  compact: false,
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]
diff --git a/package.json b/package.json
index 7f5b5b19d9760d79747fe632dcaac53c2cab28c3..9a27a0557a46adfae8ffb0f5865a8d011908c76a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "echarts": "^5.5.0",
     "element-ui": "^2.15.14",
     "moment": "^2.30.1",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.14",
     "vue-router": "3"
   },
@@ -43,7 +44,6 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions",
-    "not dead"
+    "last 2 versions"
   ]
 }
diff --git a/src/components/layout/dynamicRoute.vue b/src/components/layout/dynamicRoute.vue
index 74dc783ba247cb382504c0a1e1d095c8b08d8ade..a2c958011f685a4212f82baa34477cd4c446d6f2 100644
--- a/src/components/layout/dynamicRoute.vue
+++ b/src/components/layout/dynamicRoute.vue
@@ -1,27 +1,71 @@
 <template>
-    <div>
+    <transition name="fade" mode="out-in">
         <router-view></router-view>
-    </div>
+    </transition>
 </template>
 <script>
-    export default{
-        name:'DynamicRoute',
-        data(){
-            return {
+export default {
+    name: 'DynamicRoute',
+    data() {
+        return {
 
-            }
-        },
+        }
+    },
 
-        mounted(){
+    mounted() {
 
-        },
+    },
 
-        methods:{
+    methods: {
 
-        },
+    },
 
-    }
+}
 </script>
 <style scoped>
+.wrapper {
+    width: 100%;
+    min-height: 100vh;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+    transition: all 0.75s ease-out;
+}
+
+
+.slide-enter-to {
+    position: absolute;
+    right: 0;
+}
+
+
+.slide-enter-from {
+    position: absolute;
+    right: -100%;
+}
+
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+
+.slide-leave-to {
+    position: absolute;
+    left: -100%;
+}
+
+
+.slide-leave-from {
+    position: absolute;
+    left: 0;
+}
 
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index bfd66988fb8773630a7b3a3d49667a27c20478bc..b4d266386ddc89e6e3182bb5ac56f1e61e647fd4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,21 @@
 import Vue from 'vue';
 import VueRouter from "vue-router"
+//引入nprogress 进度条插件
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
 import routes from './routes'
+import nProgress from 'nprogress';
 Vue.use(VueRouter)
-export default new VueRouter({
+const router = new VueRouter({
     mode:'history',
     routes
-})
\ No newline at end of file
+})
+router.beforeEach(async (to, from, next)=>{
+    NProgress.start()
+    next()
+})
+router.afterEach(()=>{
+    NProgress.done()
+})
+
+export default router;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 8d6e331fdef1af91e0040609ed1b1ad2b039156d..fc25a39648b1bcb33d3311b8fdf82126c18b3a3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4702,6 +4702,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"