fix scrollbar
This commit is contained in:
10
src/App.vue
10
src/App.vue
@@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 启动屏专属过渡 -->
|
|
||||||
<transition name="layout-fade">
|
<transition name="layout-fade">
|
||||||
<SplashScreen v-if="!store.isInitialized" :status-text="store.initStatus" />
|
<SplashScreen v-if="!store.isInitialized" :status-text="store.initStatus" />
|
||||||
</transition>
|
</transition>
|
||||||
@@ -9,7 +8,6 @@
|
|||||||
<Sidebar />
|
<Sidebar />
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<!-- 页面切换专属过渡:极简、快速 -->
|
|
||||||
<transition name="page-fade" mode="out-in">
|
<transition name="page-fade" mode="out-in">
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
</transition>
|
</transition>
|
||||||
@@ -72,11 +70,13 @@ body {
|
|||||||
.main-content {
|
.main-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow-y: auto;
|
display: flex; /* 让子元素(页面)能撑满高度 */
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden; /* 禁用全局容器滚动 */
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 1. 布局级别过渡 (Splash -> App): 优雅、大气 */
|
/* 1. 布局级别过渡 (Splash -> App) */
|
||||||
.layout-fade-enter-active,
|
.layout-fade-enter-active,
|
||||||
.layout-fade-leave-active {
|
.layout-fade-leave-active {
|
||||||
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
@@ -87,7 +87,7 @@ body {
|
|||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 2. 页面级别过渡 (Essentials <-> Updates): 快速、响应灵敏 */
|
/* 2. 页面级别过渡 */
|
||||||
.page-fade-enter-active,
|
.page-fade-enter-active,
|
||||||
.page-fade-leave-active {
|
.page-fade-leave-active {
|
||||||
transition: opacity 0.15s ease;
|
transition: opacity 0.15s ease;
|
||||||
|
|||||||
Reference in New Issue
Block a user