102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<template>
|
|
<!-- <section id="con_lf_top_div" :class="key==='/index'?'h100vh':''" class="app-main">-->
|
|
<section id="con_lf_top_div" class="app-main">
|
|
<transition mode="out-in" name="fade-transform">
|
|
<keep-alive :include="cachedViews">
|
|
<router-view :key="key" />
|
|
</keep-alive>
|
|
</transition>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AppMain",
|
|
computed: {
|
|
cachedViews() {
|
|
return this.$store.state.tagsView.cachedViews;
|
|
},
|
|
key() {
|
|
return this.$route.path;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-main {
|
|
/* 50= navbar 50 */
|
|
min-height: calc(100vh - 50px);
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: auto;
|
|
height: calc(100vh - 84px);
|
|
min-height: calc(100vh - 84px);
|
|
background: #F0F2F5;
|
|
}
|
|
|
|
.fixed-header + .app-main {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.hasTagsView {
|
|
.app-main {
|
|
/* 84 = navbar + tags-view = 50 + 34 */
|
|
min-height: calc(100vh - 84px);
|
|
}
|
|
|
|
.fixed-header + .app-main {
|
|
padding-top: 84px;
|
|
}
|
|
}
|
|
.app-main::-webkit-scrollbar {
|
|
/*滚动条整体样式*/
|
|
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
height: 5px;
|
|
}
|
|
.app-main::-webkit-scrollbar-thumb {
|
|
/*滚动条里面小方块*/
|
|
border-radius: 10px;
|
|
// box-shadow: inset 0 0 5px #c4c4c4;
|
|
background: #929292a6;
|
|
}
|
|
.app-main::-webkit-scrollbar-track {
|
|
/*滚动条里面轨道*/
|
|
// -webkit-box-shadow:
|
|
box-shadow: inset 0 0 5px #f6f6f6;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
// fix css style bug in open el-dialog
|
|
.el-popup-parent--hidden {
|
|
.fixed-header {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
// ::-webkit-scrollbar {
|
|
// /*滚动条整体样式*/
|
|
// width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
// height: 5px;
|
|
// }
|
|
// ::-webkit-scrollbar-thumb {
|
|
// /*滚动条里面小方块*/
|
|
// border-radius: 10px;
|
|
// // box-shadow: inset 0 0 5px #c4c4c4;
|
|
// background: #929292a6;
|
|
// }
|
|
// ::-webkit-scrollbar-track {
|
|
// /*滚动条里面轨道*/
|
|
// // -webkit-box-shadow:
|
|
// box-shadow: inset 0 0 5px #f6f6f6;
|
|
// border-radius: 10px;
|
|
// background: #ffffff;
|
|
// }
|
|
|
|
.h100vh {
|
|
height: 100vh !important;
|
|
}
|
|
</style>
|