From f801f4fb11ff8ca08417a9ddf0231fb570fa26e3 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 24 七月 2023 16:47:51 +0800 Subject: [PATCH] fix 修复 固定页面header穿模问题 --- src/layout/components/AppMain.vue | 49 ++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 5b51fcf..8a73232 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -1,9 +1,9 @@ <template> <section class="app-main"> <router-view v-slot="{ Component, route }"> - <transition name="fade-transform" mode="out-in"> + <transition :enter-active-class="animante" mode="out-in"> <keep-alive :include="tagsViewStore.cachedViews"> - <component v-if="!route.meta.link" :is="Component" :key="route.path"/> + <component v-if="!route.meta.link" :is="Component" :key="route.path" /> </keep-alive> </transition> </router-view> @@ -11,11 +11,25 @@ </section> </template> -<script setup> -import iframeToggle from "./IframeToggle/index" -import useTagsViewStore from '@/store/modules/tagsView' +<script setup name="AppMain" lang="ts"> +import useTagsViewStore from '@/store/modules/tagsView'; +import useSettingsStore from '@/store/modules/settings'; +import IframeToggle from './IframeToggle/index.vue' +import { ComponentInternalInstance } from "vue"; +const { proxy } = getCurrentInstance() as ComponentInternalInstance; +const tagsViewStore = useTagsViewStore(); -const tagsViewStore = useTagsViewStore() +// 闅忔満鍔ㄧ敾闆嗗悎 +const animante = ref<string>(''); +const animationEnable = ref(useSettingsStore().animationEnable); +watch(()=> useSettingsStore().animationEnable, (val) => { + animationEnable.value = val; + if (val) { + animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string; + } else { + animante.value = proxy?.animate.defaultAnimate as string; + } +}, { immediate: true }); </script> <style lang="scss" scoped> @@ -27,7 +41,7 @@ overflow: hidden; } -.fixed-header + .app-main { +.fixed-header+.app-main { padding-top: 50px; } @@ -37,17 +51,30 @@ min-height: calc(100vh - 84px); } - .fixed-header + .app-main { + .fixed-header+.app-main { padding-top: 84px; } } </style> - <style lang="scss"> // fix css style bug in open el-dialog .el-popup-parent--hidden { .fixed-header { - padding-right: 17px; + padding-right: 6px; } } -</style> \ No newline at end of file + +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background-color: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background-color: #c0c0c0; + border-radius: 3px; +} +</style> -- Gitblit v1.9.3