100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<script setup>
|
|
import {useI18n} from 'vue-i18n'
|
|
import {hideMinWindow1} from "@/components/floatingBubble/floating.js";
|
|
import AppSkeleton from '@/components/app-skeleton/index.vue'
|
|
const {t} = useI18n()
|
|
useHead({
|
|
title: t('appSetting.appName'),
|
|
meta: [
|
|
{name: 'description', content: t('appSetting.appDescription')},
|
|
{name: 'keywords', content: t('appSetting.appKeyWords')},
|
|
],
|
|
})
|
|
|
|
const route = useRoute()
|
|
// 添加路由中间件来处理过渡方向
|
|
const router = useRouter()
|
|
const slideDirection = ref('slide-left')
|
|
// 记录路由历史
|
|
const routeHistory = ref([])
|
|
|
|
router.beforeEach((to, from) => {
|
|
// 记录路由历史
|
|
routeHistory.value.push(from.path)
|
|
if (to.path==='/'){
|
|
hideMinWindow1()
|
|
}
|
|
// 如果是返回操作（在历史记录中找到目标路由）
|
|
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>
|
|
<client-only>
|
|
<!-- 骨架屏组件 -->
|
|
|
|
<VanConfigProvider>
|
|
<NuxtLoadingIndicator
|
|
color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)"/>
|
|
<NuxtLayout>
|
|
<NuxtPage :transition="{
|
|
name: slideDirection
|
|
}" />
|
|
</NuxtLayout>
|
|
</VanConfigProvider>
|
|
</client-only>
|
|
</template>
|
|
|
|
<style>
|
|
.van-popup.van-toast{
|
|
background: var(--van-toast-background)!important;
|
|
}
|
|
.van-popup.van-popup--center.van-image-preview{
|
|
background-color: transparent!important;
|
|
max-width: 100%!important;
|
|
}
|
|
:root:root {
|
|
--van-dialog-radius: 8px
|
|
}
|
|
.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%;
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
:root {
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.van-cell.van-field .van-cell__title, .van-cell__value{
|
|
flex: initial;
|
|
}
|
|
</style> |