路由切换改为先出后进

src/components/cardTwo.vue

@@ -9,7 +9,8 @@
     }"
     }"
   >
   >
     <div class="custom-card-two-image">
     <div class="custom-card-two-image">
-      <img :src="img" alt="" />
+      <img alt="" :src="img" />
+      <!-- <img alt="" v-lazy="img" /> -->
       <div v-show="showHover" :class="['hover']">
       <div v-show="showHover" :class="['hover']">
         <slot name="hover"></slot>
         <slot name="hover"></slot>
       </div>
       </div>
@@ -27,6 +28,7 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ref } from 'vue';
 import ChangeName from '@/components/changeName.vue';
 import ChangeName from '@/components/changeName.vue';
+import { vLazy } from '@/utils/command';
 const props = withDefaults(
 const props = withDefaults(
   defineProps<{
   defineProps<{
     id: string | number;
     id: string | number;

src/layouts/components/Content.vue

 <template>
 <template>
   <router-view v-slot="{ Component }">
   <router-view v-slot="{ Component }">
-    <transition name="fade">
+    <transition name="fade" mode="out-in">
       <component :is="Component" />
       <component :is="Component" />
     </transition>
     </transition>
   </router-view>
   </router-view>
@@ -13,7 +13,7 @@
 
 
 .fade-leave-active,
 .fade-leave-active,
 .fade-enter-active {
 .fade-enter-active {
-  transition: opacity @anim-duration-slow @anim-time-fn-easing;
+  transition: opacity 0.3s;
 }
 }
 .fade-enter,
 .fade-enter,
 .fade-leave-to {
 .fade-leave-to {

src/layouts/components/ToolBar.vue

@@ -36,28 +36,28 @@ const imgs = {
   close: new URL('../../assets/svg/home/close.svg', import.meta.url).href,
   close: new URL('../../assets/svg/home/close.svg', import.meta.url).href,
 };
 };
 
 
-const navigatorList = [
-  {
-    icon: imgs.live,
-    label: '直播创建',
-    path: routerConfig.createLive.path,
-  },
-  {
-    icon: imgs.person,
-    label: '形象定制',
-    path: routerConfig.ImageCustomization.path,
-  },
-  {
-    icon: imgs.speak,
-    label: '声音定制',
-    path: routerConfig.VocalCustomization.path,
-  },
-  {
-    icon: imgs.interaction,
-    label: '互动回答',
-    path: routerConfig.createInteract.path,
-  },
-];
+// const navigatorList = [
+//   {
+//     icon: imgs.live,
+//     label: '直播创建',
+//     path: routerConfig.createLive.path,
+//   },
+//   {
+//     icon: imgs.person,
+//     label: '形象定制',
+//     path: routerConfig.ImageCustomization.path,
+//   },
+//   {
+//     icon: imgs.speak,
+//     label: '声音定制',
+//     path: routerConfig.VocalCustomization.path,
+//   },
+//   {
+//     icon: imgs.interaction,
+//     label: '互动回答',
+//     path: routerConfig.createInteract.path,
+//   },
+// ];
 
 
 const goHome = () => {
 const goHome = () => {
   router.push({
   router.push({

src/router/index.ts

 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { getSiteRouter } from '../config/site';
 import { getSiteRouter } from '../config/site';
-import store from '@/store';
 
 
 const routerList = getSiteRouter();
 const routerList = getSiteRouter();
 
 

src/utils/command.ts

+export const vLazy = (el: HTMLImageElement, image: any) => {
+  el.src = 'https://cdn.staticaly.com/gh/1024huijia/QingChunMeizi@master/loading.5e3wpezjapc0.gif';
+  // 使用obaesrve监听图片是否在可视区域内
+  const observe = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        el.src = image.value;
+        // 注销
+        observe.unobserve(el);
+      }
+    });
+  });
+  observe.observe(el);
+};