|
|
@@ -0,0 +1,197 @@
|
|
|
+<!-- vue 页面模板 -->
|
|
|
+<template>
|
|
|
+ <div class="layout">
|
|
|
+ <Layout>
|
|
|
+ <Header>
|
|
|
+ <Menu mode="horizontal" theme="dark" active-name="1">
|
|
|
+ <div class="layout-logo"></div>
|
|
|
+ <div class="layout-nav">
|
|
|
+ <MenuItem name="1">
|
|
|
+ <Icon type="ios-navigate"></Icon>
|
|
|
+ Item 1
|
|
|
+ </MenuItem>
|
|
|
+ <MenuItem name="2">
|
|
|
+ <Icon type="ios-keypad"></Icon>
|
|
|
+ Item 2
|
|
|
+ </MenuItem>
|
|
|
+ <MenuItem name="3">
|
|
|
+ <Icon type="ios-analytics"></Icon>
|
|
|
+ Item 3
|
|
|
+ </MenuItem>
|
|
|
+ </div>
|
|
|
+ </Menu>
|
|
|
+ </Header>
|
|
|
+ <Layout>
|
|
|
+ <Sider hide-trigger :style="{ background: '#fff' }">
|
|
|
+ <Menu
|
|
|
+ :active-name="active_name"
|
|
|
+ theme="primary"
|
|
|
+ width="auto"
|
|
|
+ :open-names="['home']"
|
|
|
+ @on-select="changePage"
|
|
|
+ accordion
|
|
|
+ >
|
|
|
+ <div v-for="(item, i) in menu_list" :key="i">
|
|
|
+ <Submenu v-if="item.children" :name="item.name">
|
|
|
+ <template #title>
|
|
|
+ <Icon :type="item.icon" />
|
|
|
+ {{ item.title }}
|
|
|
+ </template>
|
|
|
+ <MenuItem
|
|
|
+ v-for="v in item.children"
|
|
|
+ :key="v.name"
|
|
|
+ :name="v.name"
|
|
|
+ >
|
|
|
+ {{ v.title }}
|
|
|
+ </MenuItem>
|
|
|
+ </Submenu>
|
|
|
+ <MenuItem v-else :name="item.name">
|
|
|
+ <Icon v-if="item.icon" :type="item.icon" />
|
|
|
+ {{ item.title }}
|
|
|
+ </MenuItem>
|
|
|
+ </div>
|
|
|
+ </Menu>
|
|
|
+ </Sider>
|
|
|
+ <Layout :style="{ padding: '24px' }">
|
|
|
+ <Content
|
|
|
+ :style="{
|
|
|
+ padding: '24px',
|
|
|
+ height: content_height + 'px',
|
|
|
+ background: '#fff',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <router-view></router-view>
|
|
|
+ </Content>
|
|
|
+ </Layout>
|
|
|
+ </Layout>
|
|
|
+ </Layout>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ content_height: 0,
|
|
|
+ active_name: '',
|
|
|
+ menu_list: [
|
|
|
+ {
|
|
|
+ name: 'home',
|
|
|
+ title: '人员管理',
|
|
|
+ icon: 'ios-person',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '/home/personnelMatters',
|
|
|
+ title: '管理员',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '/home/personnelMatters/user',
|
|
|
+ title: '用户',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'limitsAuthority',
|
|
|
+ title: '权限配置',
|
|
|
+ icon: 'ios-key',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '/home/limitsAuthority/role',
|
|
|
+ title: '角色管理',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '/home/limitsAuthority/permission',
|
|
|
+ title: '权限管理',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'belong',
|
|
|
+ title: '归属配置',
|
|
|
+ icon: 'ios-locate',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '/home/belong/organization',
|
|
|
+ title: '机构管理',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '/home/belong/area',
|
|
|
+ title: '地域管理',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'governmentAffairs',
|
|
|
+ title: '政务库管理',
|
|
|
+ icon: 'ios-cloud-download',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: '/home/governmentAffairs/administration',
|
|
|
+ title: '行政领导配置',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '/home/administration',
|
|
|
+ icon: 'ios-document',
|
|
|
+ title: '稿件管理',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '/home/medium',
|
|
|
+ icon: 'ios-film',
|
|
|
+ title: '媒体管理',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '/home/broadcast',
|
|
|
+ icon: 'ios-desktop',
|
|
|
+ title: '电视广播管理',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '/home/lifeService',
|
|
|
+ icon: 'ios-hammer',
|
|
|
+ title: '生活服务管理',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 计算内容区域高度
|
|
|
+ this.content_height = document.documentElement.clientHeight - 120;
|
|
|
+ this.active_name = this.$route.path;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changePage(p) {
|
|
|
+ this.$router.replace(p);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.layout {
|
|
|
+ border: 1px solid #d7dde4;
|
|
|
+ background: #f5f7f9;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .layout-logo {
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ background: #5b6270;
|
|
|
+ border-radius: 3px;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ top: 15px;
|
|
|
+ left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layout-nav {
|
|
|
+ width: 420px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liyongli