<template>
|
<div class="contentPage">
|
<div class="headerBox">数字教材平台</div>
|
<div class="contentBox">
|
<div class="leftBox">
|
<menuView />
|
</div>
|
<div class="rightBox">
|
<router-view />
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
|
import { ref, onMounted } from 'vue'
|
import menuView from '@/views/components/menuView.vue'
|
const router = useRouter()
|
const routerVal = router.currentRoute.value
|
const path = ref(routerVal.path)
|
onBeforeRouteUpdate(async (to, from) => {
|
path.value = to.fullPath
|
})
|
onMounted(() => {})
|
|
const goRouter = (item) => {
|
if (!localStorage.getItem('token')) {
|
return router.push({
|
path: '/home',
|
query: {
|
showLogin: '1'
|
}
|
})
|
}
|
router.push({ path: item.path })
|
}
|
</script>
|
|
<style lang="less">
|
.contentPage {
|
height: 100%;
|
width: 100%;
|
font-size:14px;
|
}
|
.headerBox {
|
height: 48px;
|
width: 100%;
|
background: #fff;
|
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.07);
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 2;
|
|
font-size: 24px;
|
padding:0 20px;
|
line-height:48px;
|
color: #87CCFF;
|
font-family: Alibaba;
|
}
|
.contentBox {
|
height:100%;
|
display: flex;
|
background: #f1f1f1;
|
padding-top: 48px;
|
.leftBox {
|
background: #fff;
|
width:80px;
|
flex-shrink: 0;
|
box-sizing: border-box;
|
}
|
.rightBox{
|
width:100%;
|
height:100%;
|
flex:1;
|
}
|
}
|
</style>
|
