205af48cb6
1. 在App.vue中统一添加padding-bottom: 80px 2. 移除各列表页面重复的padding-bottom设置 - expense/List.vue - requirement/List.vue - receivable/List.vue
48 lines
841 B
Vue
48 lines
841 B
Vue
<template>
|
|
<div class="app-container">
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</router-view>
|
|
<Tabbar v-if="showTabbar" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import Tabbar from '@/components/Tabbar.vue'
|
|
|
|
const route = useRoute()
|
|
|
|
const showTabbar = computed(() => {
|
|
return route.path !== '/login'
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--mac-bg);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.app-container {
|
|
min-height: 100vh;
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
/* 页面切换动画 */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|