129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
<template>
|
||
<section class="app-main">
|
||
<transition name="fade-transform" mode="out-in">
|
||
<keep-alive :include="keepAliveInclude">
|
||
<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
|
||
},
|
||
// cachedViews 为空时勿传 []：Vue2 keep-alive 的 include 为 [] 会匹配不到任何组件，部分环境下首屏空白
|
||
keepAliveInclude() {
|
||
const list = this.cachedViews
|
||
return list && list.length ? list : undefined
|
||
},
|
||
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)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-main {
|
||
/* 50= navbar 50 */
|
||
min-height: calc(100vh - 50px);
|
||
width: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
@media (max-width: 768px) {
|
||
min-height: calc(100vh - 48px - 60px); // 减去头部和底部导航
|
||
overflow-x: hidden;
|
||
overflow-y: visible;
|
||
-webkit-overflow-scrolling: touch;
|
||
height: auto;
|
||
max-height: none;
|
||
position: static;
|
||
}
|
||
}
|
||
|
||
.app-main:has(.copyright) {
|
||
padding-bottom: 36px;
|
||
|
||
@media (max-width: 768px) {
|
||
padding-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
.fixed-header + .app-main {
|
||
padding-top: 50px;
|
||
|
||
@media (max-width: 768px) {
|
||
padding-top: 48px;
|
||
}
|
||
}
|
||
|
||
.hasTagsView {
|
||
.app-main {
|
||
/* 84 = navbar + tags-view = 50 + 34 */
|
||
min-height: calc(100vh - 84px);
|
||
|
||
@media (max-width: 768px) {
|
||
min-height: calc(100vh - 48px);
|
||
}
|
||
}
|
||
|
||
.fixed-header + .app-main {
|
||
padding-top: 84px;
|
||
|
||
@media (max-width: 768px) {
|
||
padding-top: 48px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
// fix css style bug in open el-dialog
|
||
.el-popup-parent--hidden {
|
||
.fixed-header {
|
||
padding-right: 6px;
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background-color: #f1f1f1;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #c0c0c0;
|
||
border-radius: 3px;
|
||
}
|
||
</style>
|