enter.vue
1.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script setup lang="ts">
import { ref, computed } from "vue";
import Header from "./header.vue";
import Menu from "./menu.vue";
import * as store from "@/pinia/index";
let key = ref("/")
</script>
<template>
<!-- TIP 页面头部，含logo、功能按钮（用户信息、退出登录、帮助） -->
<Header />
<!-- TIP 页面头部，含logo、功能按钮（用户信息、退出登录、帮助）结束 -->
<div class="main-container">
<!-- TIP 左侧菜单 -->
<div class="sidebar-container">
<Menu />
</div>
<!-- TIP 左侧菜单结束 -->
<!-- TIP 右侧具体页面内容 -->
<div class="page-container" :class="store.family.appStore().isCollapse? 'thinMenu': 'fatMenu'">
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transitionName">
<keep-alive v-if="route.meta.keepAlive">
<component :is="Component" />
</keep-alive>
<component :is="Component" v-else />
</transition>
</router-view>
</div>
<!-- TIP 右侧具体页面内容结束 -->
</div>
</template>
<style scoped lang="scss">
.fatMenu {
margin-left: $sideBarWidth!important;
}
.thinMenu {
margin-left: $sideBarWidthThin!important;
}
</style>