From 9382eab44c3be56e5517dad86cfd26257ea03a98 Mon Sep 17 00:00:00 2001
From: XT-202209211744\Administrator <623844246@qq.com>
Date: Wed, 02 Nov 2022 22:41:36 +0800
Subject: [PATCH] 最新

---
 src/App.vue |   35 ++++++++++++++++++++---------------
 1 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5c49152..565493a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,7 @@
     </div>
     <div class="body-box">
       <transition
-        :duration="1000"
-        mode="out-in"
-        appear
-        enter-active-class="animated fadeInRight"
-        leave-active-class="animated fadeOut"
-        appear-active-class="animated zoomInDown"
+      :name="transitionName"
       >
         <router-view></router-view>
       </transition>
@@ -46,19 +41,26 @@
     // this.$store.state.className = window.localStorage.getItem('styleName')?window.localStorage.getItem('styleName'):'red'
   },
   watch: {
-    $route(val) {
-      let title = val.meta.title || "首页";
+    $route(to, from) {
+      let title = to.meta.title || "首页";
       this.title = title;
-
-      if (val.meta.iconRight) {
-        this.iconRight = val.meta.iconRight;
+      if (to.meta.iconRight) {
+        this.iconRight = to.meta.iconRight;
       } else {
         this.iconRight = "default";
       }
-      if (val.meta.hasHeader) {
+      if (to.meta.hasHeader) {
         this.hasHeader = true;
       } else {
         this.hasHeader = false;
+      }
+      if (to.meta.index > from.meta.index) {
+        console.log("slide-left");
+        //设置动画名称
+        this.transitionName = "slide-left";
+      } else {
+        console.log("slide-right");
+        this.transitionName = "slide-right";
       }
     }
   },
@@ -66,7 +68,8 @@
     return {
       title: "首页",
       hasHeader: false,
-      iconRight: "default"
+      iconRight: "default",
+      transitionName: ''
     };
   }
 };
@@ -83,7 +86,8 @@
     height: 1rem;
     /deep/.mint-header {
       height: 100%;
-      background-color: rgba(20, 45, 55, 0.3);
+      background-color: #16171d;
+      // background-color: rgba(20, 45, 55, 0.3);
       .is-left {
         .mintui {
           font-size: 20px;
@@ -119,7 +123,8 @@
   }
   &.black-theme {
     // background: #16171d;
-    background: rgb(14, 14, 15);
+    // background: rgb(14, 14, 15);
+    background: rgb(33, 33, 43);
   }
 }
 .search-right {

--
Gitblit v1.9.3