app/app.vue

@@ -14,68 +14,27 @@ const mode = computed(() => {
   return color.value
 })
 
-// 添加路由中间件来处理过渡方向
-const router = useRouter()
-const route = useRoute()
-const slideDirection = ref('slide-left')
-
-// 记录路由历史
-const routeHistory = ref([])
-
-router.beforeEach((to, from) => {
-  // 记录路由历史
-  routeHistory.value.push(from.path)
-  
-  // 如果是返回操作（在历史记录中找到目标路由）
-  if (routeHistory.value.includes(to.path)) {
-    slideDirection.value = 'slide-right'
-    // 清除历史记录到返回的位置
-    const index = routeHistory.value.indexOf(to.path)
-    routeHistory.value = routeHistory.value.slice(0, index)
-  } else {
-    slideDirection.value = 'slide-left'
-  }
-})
-
-// 提供过渡名称给页面组件
-provide('slideDirection', slideDirection)
 </script>
 
 <template>
-  <VanConfigProvider :theme="mode">
+  <VanConfigProvider :theme="mode" >
     <NuxtLoadingIndicator
       color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
     <NuxtLayout>
-      <NuxtPage :transition="{
-        name: slideDirection
-      }" />
+      <NuxtPage/>
     </NuxtLayout>
   </VanConfigProvider>
 </template>
 
 <style>
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: absolute;
-  width: 100%;
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.2s;
 }
 
-.slide-left-enter-from {
-  transform: translateX(100%);
-}
-
-.slide-left-leave-to {
-  transform: translateX(-100%);
-}
-
-.slide-right-enter-from {
-  transform: translateX(-100%);
-}
-
-.slide-right-leave-to {
-  transform: translateX(100%);
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
 }
 </style>

app/pages/home/components/ItemList/index.vue

@@ -1,81 +0,0 @@
-<script setup>
-
-import Column from "@/pages/home/components/Column/index.vue";
-import {artworkList} from "@/api/goods/index.js";
-import {homeStore} from "~/stores/goods/index.js";
-const loading = ref(false);
-const finished = ref(false);
-const {fullLive,actionDetails,itemList} = homeStore();
-const list = ref([{
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: 'RMB 10,000',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: '',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: 'RMB 10,000',
-}, {
-  image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
-  title: '张天赐 | 日出而作，日落而息',
-  startingPrice: 'RMB 1,000',
-  transactionPrice: 'RMB 10,000',
-}])
-const columns = computed(() => {
-  const result = [[], []];
-  // 确保 itemList 有值
-  if (itemList.value && itemList.value.length > 0) {
-    itemList.value.forEach((item, index) => {
-      result[index % 2].push(item);
-    });
-  }
-  return result;
-});
-const loadData = async () => {
-  // 加载数据逻辑...
-
-};
-
-</script>
-
-<template>
-  <div class="px-[16px] pt-[16px]">
-    <van-pull-refresh>
-      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
-        <div class="w-full flex gap-[16px]">
-          <Column v-for="(column, colIndex) in columns" :key="colIndex" :items="column" />
-        </div>
-      </van-list>
-    </van-pull-refresh>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

nuxt.config.js

@@ -90,9 +90,9 @@ export default defineNuxtConfig({
   },
 
   app: {
-    layoutTransition: { 
-      name: 'layout',
-      mode: 'out-in'
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
     },
     head: {
       viewport: 'width=device-width,initial-scale=1,viewport-fit=cover',