You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
2.7 KiB
117 lines
2.7 KiB
<template>
|
|
<div id="app">
|
|
<!-- <nav>
|
|
<router-link to="/">Home</router-link> |
|
|
<router-link to="/about">About</router-link> |
|
|
<router-link to="/ui">组件示例文件</router-link>
|
|
</nav> -->
|
|
<!-- <router-view/> -->
|
|
<el-container>
|
|
<el-header style="height: 62px;" v-if="showHeader">
|
|
<Header ></Header>
|
|
</el-header>
|
|
<el-container :class="(showHeader ? 'short-container': '')">
|
|
<SliderMenu v-if="showSidebar"></SliderMenu>
|
|
<el-container>
|
|
<!-- 面包屑导航 -->
|
|
<Breadcrumb />
|
|
<el-main>
|
|
<router-view/>
|
|
</el-main>
|
|
<!-- <el-footer v-if="showFooter">
|
|
<Footer></Footer>
|
|
</el-footer> -->
|
|
|
|
</el-container>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import SliderMenu from '@/components/SliderMenu.vue';
|
|
// import Footer from '@/components/Footer.vue';
|
|
import { mapState } from 'vuex';
|
|
import Header from './components/Header.vue';
|
|
import Breadcrumb from './components/Breadcrumb.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
isCollapse: true,
|
|
menuData: [
|
|
{
|
|
index: '1',
|
|
title: '父级菜单1',
|
|
icon: 'el-icon-location',
|
|
children: [
|
|
{ index: '1-1', title: '子级菜单1-1', path: '/' },
|
|
{ index: '1-2', title: 'ui页面', path: '/ui' }
|
|
]
|
|
},
|
|
{
|
|
index: '2',
|
|
title: '父级菜单2',
|
|
icon: 'el-icon-menu',
|
|
children: [
|
|
{ index: '2-1', title: '子级菜单2-1', path: '/about' },
|
|
{ index: '2-2', title: '加盟耶main', path: '/franchise' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
},
|
|
components: {
|
|
SliderMenu,
|
|
// Footer,
|
|
Header,
|
|
Breadcrumb
|
|
},
|
|
computed: {
|
|
...mapState(['showSidebar','showFooter','showHeader']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
methods: {
|
|
handleOpen(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
},
|
|
handleClose(key, keyPath) {
|
|
console.log(key, keyPath);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
font-family: Microsoft YaHei UI;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
height: 100%;
|
|
background: #F5F7FA;
|
|
}
|
|
.short-container{
|
|
height: calc(100vh - 62px);
|
|
}
|
|
::v-deep .el-container .el-main{
|
|
// padding: 12px;
|
|
}
|
|
::v-deep .el-header{
|
|
height:62px;
|
|
padding: 8px 32px;
|
|
background: linear-gradient(270deg, #4EA4F3 0%, #3D85EA 100%);
|
|
}
|
|
|
|
nav {
|
|
padding: 30px;
|
|
|
|
a {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
|
|
&.router-link-exact-active {
|
|
color: #42b983;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|