From 654e36506398466df65b69595d87457654472656 Mon Sep 17 00:00:00 2001
From: ltlzx <942659938@qq.com>
Date: Thu, 21 Apr 2022 11:53:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                | 28 ++++++++++++++++-----
 src/components/Home.vue    | 50 ++++++++++++++++++++++++++++++++++++--
 src/components/Sidebar.vue |  2 +-
 src/router/index.js        |  6 +++--
 4 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 450d9fa..5fa0375 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <a-locale-provider :locale="zh_CN">
-    <div id="app">
-      <router-view/>
-    </div>
-  </a-locale-provider>
+    <a-locale-provider :locale="zh_CN">
+      <div id="app">
+        <router-view/>
+      </div>
+    </a-locale-provider>
 </template>
 
 <script>
@@ -15,7 +15,21 @@ export default {
   name: 'App',
   data(){
     return{
-      zh_CN
+      zh_CN,
+      transitionName: "turn-on",
+    }
+  },
+  watch: {
+    $route (to, from) {
+        // 切换动画
+        // 页面之间的跳转一般由路由中的level来实现
+        let level = this.$route.meta.level // 监听路由的层级
+        console.log(level)
+        if (level === 1) {
+          this.transitionName = 'turn-on'
+        } else {
+          this.transitionName = 'turn-off'
+      }
     }
   }
 }
@@ -23,4 +37,6 @@ export default {
 
 <style>
   @import "./assets/css/main.css";
+
+
 </style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 2efc007..4f326a5 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -6,7 +6,7 @@
       <!-- <div> -->
         <div class="content-box">
           <div class="content">
-            <transition name="move" mode="out-in">
+            <transition name="turn-on" >
               <router-view></router-view>
             </transition>
           </div>
@@ -48,7 +48,7 @@ export default {
   methods:{
     getUserData(){
       getUserData().then(res=>{
-        console.info(res)
+        // console.info(res)
         if(res.code==200){
           this.data=res.data
         }else{
@@ -97,4 +97,50 @@ export default {
     /* min-height:903px; */
     background: #F0F2F5;
   }
+
+  .turn-on-enter {
+      opacity: 0;
+      transform: translate3d(100%, 0, 0);
+  }
+
+  .turn-on-leave-to {
+      opacity: 0;
+      transform: translate3d(0, 0, 0);
+  }
+
+  .turn-on-enter-active,
+  .turn-on-leave-active {
+    will-change: transform;
+    transition: all 500ms;
+    position: absolute;
+    top: 65px;
+    left: 200px;
+    bottom: 0;
+    right: 0;
+  }
+
+  .turn-off-enter {
+      opacity: 0;
+      transform: translate3d(100%, 0, 0);
+  }
+
+  .turn-off-leave-to {
+      opacity: 0;
+      transform: translate3d(0, 0, 0);
+  }
+
+  .turn-off-enter-active,
+  .turn-off-leave-active {
+    will-change: transform;
+    transition: all 500ms;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .turn-off-leave-active {
+      z-index: 9999;
+  }
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 47ab3cd..4c2d5ce 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -122,7 +122,7 @@ export default {
       }
     },
     showMenu(){
-      console.info(this.auth1)
+      // console.info(this.auth1)
       if(this.auth1.length==0){
         this.items=[]
       }else{
diff --git a/src/router/index.js b/src/router/index.js
index a5c4d0a..60f58c1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,13 +17,15 @@ export default new Router({
       children: [
         {
           path: '/Home',
+          name:'Home',
           component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Home/index.vue'),
-          meta: { title: '系统首页' }
+          meta: { title: '系统首页',level: 1 }
         },
         {
           path: '/DataQuery',
+          name:'DataQuery',
           component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/classification/DataQuery.vue'),
-          meta: { title: '全部文化数据查询' }
+          meta: { title: '全部文化数据查询',level: 2 }
         },
         {
           path: '/Category',