| | |
|---|
| | | <section class="app-main">
|
|---|
| | | <transition name="fade-transform" mode="out-in">
|
|---|
| | | <keep-alive :include="cachedViews">
|
|---|
| | | <router-view :key="key" />
|
|---|
| | | <router-view v-if="!$route.meta.link" :key="key" />
|
|---|
| | | </keep-alive>
|
|---|
| | | </transition>
|
|---|
| | | <iframe-toggle />
|
|---|
| | | <copyright />
|
|---|
| | | </section>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | import copyright from "./Copyright/index"
|
|---|
| | | import iframeToggle from "./IframeToggle/index"
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | name: 'AppMain',
|
|---|
| | | components: { iframeToggle, copyright },
|
|---|
| | | computed: {
|
|---|
| | | cachedViews() {
|
|---|
| | | return this.$store.state.tagsView.cachedViews
|
|---|
| | | },
|
|---|
| | | key() {
|
|---|
| | | return this.$route.path
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | $route() {
|
|---|
| | | this.addIframe()
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | this.addIframe()
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | addIframe() {
|
|---|
| | | const { name } = this.$route
|
|---|
| | | if (name && this.$route.meta.link) {
|
|---|
| | | this.$store.dispatch('tagsView/addIframeView', this.$route)
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|---|
| | | overflow: hidden;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .fixed-header+.app-main {
|
|---|
| | | padding-top: 50px;
|
|---|
| | | .fixed-header + .app-main {
|
|---|
| | | overflow-y: auto;
|
|---|
| | | scrollbar-gutter: auto;
|
|---|
| | | height: calc(100vh - 50px);
|
|---|
| | | min-height: 0px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .app-main:has(.copyright) {
|
|---|
| | | padding-bottom: 36px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .fixed-header + .app-main {
|
|---|
| | | margin-top: 50px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .hasTagsView {
|
|---|
| | |
|---|
| | | min-height: calc(100vh - 84px);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .fixed-header+.app-main {
|
|---|
| | | padding-top: 84px;
|
|---|
| | | .fixed-header + .app-main {
|
|---|
| | | margin-top: 84px;
|
|---|
| | | height: calc(100vh - 84px);
|
|---|
| | | min-height: 0px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | /* 移动端fixed-header优化 */
|
|---|
| | | @media screen and (max-width: 991px) {
|
|---|
| | | .fixed-header + .app-main {
|
|---|
| | | padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
|
|---|
| | | padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
|
|---|
| | | overscroll-behavior-y: none;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .hasTagsView .fixed-header + .app-main {
|
|---|
| | | padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 40px));
|
|---|
| | | padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px));
|
|---|
| | | overscroll-behavior-y: none;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | @supports (-webkit-touch-callout: none) {
|
|---|
| | | @media screen and (max-width: 991px) {
|
|---|
| | | .fixed-header + .app-main {
|
|---|
| | | padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
|
|---|
| | | padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
|
|---|
| | | height: calc(100svh - 50px);
|
|---|
| | | height: calc(100dvh - 50px);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .hasTagsView .fixed-header + .app-main {
|
|---|
| | | padding-bottom: max(17px, calc(constant(safe-area-inset-bottom) + 10px));
|
|---|
| | | padding-bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px));
|
|---|
| | | height: calc(100svh - 84px);
|
|---|
| | | height: calc(100dvh - 84px);
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | |
|
|---|
| | | <style lang="scss">
|
|---|
| | | // fix css style bug in open el-dialog
|
|---|
| | | .el-popup-parent--hidden {
|
|---|
| | | .fixed-header {
|
|---|
| | | padding-right: 15px;
|
|---|
| | | }
|
|---|
| | | ::-webkit-scrollbar {
|
|---|
| | | width: 6px;
|
|---|
| | | height: 6px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | ::-webkit-scrollbar-track {
|
|---|
| | | background-color: #f1f1f1;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | ::-webkit-scrollbar-thumb {
|
|---|
| | | background-color: #c0c0c0;
|
|---|
| | | border-radius: 3px;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
