From 2f72cf1a3a30b665619e7fcaa2657e225598554e Mon Sep 17 00:00:00 2001
From: flowstocktrading <tsm1258011@proton.me>
Date: Thu, 03 Nov 2022 18:22:54 +0800
Subject: [PATCH] 备份

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

diff --git a/src/App.vue b/src/App.vue
index 5c49152..5aeea6b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,21 +13,21 @@
     </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>
     </div>
+    <foot></foot>
   </div>
 </template>
 
 <script>
+  import foot from "@/components/foot.vue";
 export default {
+  components: {
+    foot,
+    },
   name: "App",
   created() {
     let title = this.$route.meta.title || "首页";
@@ -46,19 +46,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 +73,8 @@
     return {
       title: "首页",
       hasHeader: false,
-      iconRight: "default"
+      iconRight: "default",
+      transitionName: ''
     };
   }
 };
@@ -83,7 +91,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 +128,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