122 lines
2.4 KiB
Vue
122 lines
2.4 KiB
Vue
<template>
|
|
<div :class="['app-wrapper', { 'sidebar-close': !sidebar.opened }]">
|
|
<Sidebar />
|
|
<div class="main-container">
|
|
<Navbar />
|
|
<TagsView />
|
|
<Breadcrumb />
|
|
<main class="app-main">
|
|
<transition name="fade-transform" mode="out-in">
|
|
<router-view v-slot="{ Component }">
|
|
<keep-alive :include="cachedViews">
|
|
<component :is="Component" :key="route.fullPath" />
|
|
</keep-alive>
|
|
</router-view>
|
|
</transition>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useStore } from 'vuex'
|
|
import Sidebar from './components/Sidebar/index.vue'
|
|
import Navbar from './components/Navbar/index.vue'
|
|
import Breadcrumb from './components/Breadcrumb/index.vue'
|
|
import TagsView from './components/TagsView/index.vue'
|
|
|
|
const route = useRoute()
|
|
const store = useStore()
|
|
|
|
const sidebar = computed(() => store.state.app.sidebar)
|
|
const cachedViews = computed(() => store.state.tagsView?.cachedViews || [])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body, #app {
|
|
height: 100%;
|
|
font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.app-wrapper {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.main-container {
|
|
min-height: 100vh;
|
|
transition: padding-left 0.28s ease;
|
|
padding-left: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-wrapper.sidebar-close {
|
|
.main-container {
|
|
padding-left: 54px;
|
|
}
|
|
}
|
|
|
|
.app-main {
|
|
flex: 1;
|
|
padding: 20px;
|
|
min-height: calc(100vh - 180px);
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.app-container {
|
|
padding: 20px;
|
|
min-height: calc(100vh - 230px);
|
|
}
|
|
|
|
.components-container {
|
|
margin: 30px 50px;
|
|
}
|
|
|
|
.pagination-container {
|
|
margin-top: 30px;
|
|
text-align: right;
|
|
}
|
|
|
|
.fade-transform-enter-active,
|
|
.fade-transform-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.fade-transform-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
.fade-transform-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.main-container {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.app-wrapper.sidebar-close .main-container {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.app-wrapper.sidebar-opened .main-container {
|
|
padding-left: 200px;
|
|
}
|
|
}
|
|
</style>
|