提交 b1bd7b24 编写于 作者: zhentian.jia's avatar zhentian.jia

添加新建项目页面

...@@ -6,3 +6,4 @@ dist/ ...@@ -6,3 +6,4 @@ dist/
/yqy/ /yqy/
node_modules/ node_modules/
.DS_Store .DS_Store
.vscode
<template> <template>
<div> <div>
<transition name="router-fade" mode="out-in"> <v-header></v-header>
<keep-alive> <v-slidebar></v-slidebar>
<router-view v-if="$route.meta.keepAlive"></router-view> <el-container>
</keep-alive> <div class="content" id="body-content">
</transition> <transition name="router-fade" mode="out-in">
<transition name="router-fade" mode="out-in"> <keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> <router-view v-if="$route.meta.keepAlive"></router-view>
</transition> </keep-alive>
<!-- <svg-icon></svg-icon> --> </transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
</div>
</el-container>
</div> </div>
</template> </template>
<script> <script>
// import svgIcon from './components/common/svg'; import VHeader from './views/layout/header.vue'
import VSlidebar from './views/layout/slidebar.vue'
export default { export default {
components:{ components:{
// svgIcon VHeader,
}, VSlidebar
},
data() {
return {
}
}
} }
</script> </script>
...@@ -32,4 +44,19 @@ ...@@ -32,4 +44,19 @@
.router-fade-enter, .router-fade-leave-active { .router-fade-enter, .router-fade-leave-active {
opacity: 0; opacity: 0;
} }
.el-container {
margin-left: 225px;
overflow: hidden;
.content {
background: none repeat scroll 0 0 #fff;
position: absolute;
left: 225px;
right: 0;
top: 70px;
bottom: 0;
width: auto;
box-sizing: border-box;
overflow-y: scroll;
}
}
</style> </style>
<template>
<div class="bread-crumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>{{curmbFirst}}</el-breadcrumb-item>
<el-breadcrumb-item>{{curmbSecond}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
props: {
curmbFirst: {
type: String
},
curmbSecond: {
type: String
}
}
}
</script>
<style lang="scss">
.bread-crumb {
background: #F4F5F6;
height: 50px;
padding: 20px 0 0 25px;
.el-breadcrumb__inner {
font-size: 12px;
}
}
</style>
import App from '../App' import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'index') const home = r => require.ensure([], () => r(require('../views/home')), 'home')
const projectManage = r => require.ensure([], () => r(require('../views/projectManage')), 'projectManage') const itemManager = r => require.ensure([], () => r(require('../views/education/item-manager.vue')), 'item-manager')
const addProject = r => require.ensure([], () => r(require('../views/addProject')), 'addProject') const itemComponent = r => require.ensure([], () => r(require('../views/education/item-component.vue')), 'item-component')
const roleManager = r => require.ensure([], () => r(require('../views/system/role.vue')),'role')
const addManager = r => require.ensure([], () => r(require('../views/education/add-manager.vue')), 'add-manager')
export default [{ export default [{
path: '/', path: '/',
component: App, component: App,
children: [ children: [
{ {
path: '', path: '',
redirect: '/index' redirect: '/home'
}, },{
{
path: '/index', path: '/index',
component: index component: home
}, },{
{
path: '/home', path: '/home',
component: index component: home
}, },{
{ path: '/item-manager',
path: '/project-manage', component: itemManager
component: projectManage },{
}, path: '/add-manager',
{ component: addManager
path: '/add-project', },{
component: addProject path: '/item-component',
component: itemComponent
},{
path: '/role',
component: roleManager
} }
] ]
}] }]
\ No newline at end of file
...@@ -12,9 +12,9 @@ module.exports = { ...@@ -12,9 +12,9 @@ module.exports = {
} }
}, },
created: function () { created: function () {
let query = this.$router.query // let query = this.$router.query
// this.token = this.getUrlSearch(location.href, 'token') || (query && query.token) || null // this.token = this.getUrlSearch(location.href, 'token') || (query && query.token) || null
this.token = this.getUrlKey('token') || (query && query.token) || null // this.token = this.getUrlKey('token') || (query && query.token) || null
}, },
mounted() { mounted() {
...@@ -34,10 +34,6 @@ module.exports = { ...@@ -34,10 +34,6 @@ module.exports = {
} }
return '' return ''
}, },
// 埋点
pageBurialPoin(options){
rocNative.appBuryingPointEntrust(options)
},
setRouterParm(paramList){ setRouterParm(paramList){
let parm = {}; let parm = {};
......
<template> <template>
<el-container style="height: 100%; border: 1px solid #eee"> <div class="main-container">
<v-header></v-header> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<v-slidebar></v-slidebar> <el-main>
<div class="main-container"> <el-row>
<el-main> <el-col :span="14">
<!-- <el-row> <el-steps
<el-col :span="14"> :active="active"
<el-steps finish-status="success"
:active="active" simple
finish-status="success" style="margin-bottom: 30px; background: #fff;"
simple >
style="margin-bottom: 30px; background: #fff;" <el-step title="基础信息"></el-step>
> <el-step title="选择范围"></el-step>
<el-step title="基础信息"></el-step> <el-step title="选择项目组件"></el-step>
<el-step title="选择范围"></el-step> </el-steps>
<el-step title="选择项目组件"></el-step> </el-col>
</el-steps> <el-col :span="5" :offset="5">
<el-button>暂存</el-button>
<el-button type="primary" @click="next">下一步</el-button>
</el-col>
</el-row>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="项目名称">
<el-col :span="13">
<el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
</el-col> </el-col>
<el-col :span="5" :offset="5"> </el-form-item>
<el-button>暂存</el-button> <el-form-item label="项目简介">
<el-button type="primary" @click="next">下一步</el-button> <el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item label="项目时间">
<el-col :span="6">
<el-date-picker
type="date"
placeholder="请选择项目时间"
v-model="form.date1"
style="width: 100%;"
></el-date-picker>
</el-col> </el-col>
</el-row> --> <el-col class="line" :span="1">~</el-col>
<el-form ref="form" :model="sizeForm" label-width="80px" size="mini"> <el-col :span="6">
<el-form-item label="活动名称"> <el-time-picker
<el-input v-model="sizeForm.name"></el-input> type="fixed-time"
</el-form-item> placeholder="请选择项目时间"
<el-form-item label="活动区域"> v-model="form.date2"
<el-select v-model="sizeForm.region" placeholder="请选择活动区域"> style="width: 100%;"
<el-option label="区域一" value="shanghai"></el-option> ></el-time-picker>
<el-option label="区域二" value="beijing"></el-option> </el-col>
</el-select> </el-form-item>
</el-form-item>
<el-form-item label="活动时间"> <el-form-item label="封面类型">
<el-col :span="11"> <el-radio-group v-model="form.resource">
<el-date-picker <el-radio label="图片"></el-radio>
type="date" <el-radio label="视频"></el-radio>
placeholder="选择日期" </el-radio-group>
v-model="sizeForm.date1" </el-form-item>
style="width: 100%;" </el-form>
></el-date-picker> </el-main>
</el-col> </div>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker
type="fixed-time"
placeholder="选择时间"
v-model="sizeForm.date2"
style="width: 100%;"
></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="sizeForm.type">
<el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
<el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
<el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio border label="线上品牌商赞助"></el-radio>
<el-radio border label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-main>
</div>
</el-container>
</template> </template>
<script> <script>
import VHeader from "./layout/header.vue"; import BreadCrumb from "../../components/breadcrumb.vue";
import VSlidebar from "./layout/slidebar.vue"; import { create } from "domain";
export default { export default {
components: { components: {
VHeader, BreadCrumb
VSlidebar
}, },
data() { data() {
const item = { const item = {
...@@ -92,15 +77,13 @@ export default { ...@@ -92,15 +77,13 @@ export default {
endTime: "2018-12-15 15:39:23", endTime: "2018-12-15 15:39:23",
state: "草稿" state: "草稿"
}; };
// form = {
// name: '',
// };
return { return {
curmbFirst: "教培项目",
curmbSecond: "新建项目",
tableData: Array(10).fill(item), tableData: Array(10).fill(item),
timingTime: "", timingTime: "",
currentPage: 1, currentPage: 1,
sizeForm: { form: {
name: "", name: "",
region: "", region: "",
date1: "", date1: "",
...@@ -156,37 +139,4 @@ export default { ...@@ -156,37 +139,4 @@ export default {
}; };
</script> </script>
<style> <style>
.label-row {
padding-top: 10px;
}
.main-container {
/* width: 100%; */
margin-left: 200px;
margin-top: 80px;
}
.title {
color: #409eff;
}
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.table-option span {
color: #409eff;
}
.el-form-item__content {
float: right;
}
/* .el-table tr>.el-table_1_column_2 .cell {
color: #409eff
} */
.el-table .cell {
color: #929292;
}
.el-table th > .cell {
font-weight: bold;
color: #000;
}
</style> </style>
\ No newline at end of file
<template>
<div class="create-item">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
项目组件
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: '教培项目',
curmbSecond: '项目组件'
}
}
}
</script>
<style>
</style>
<template> <template>
<el-container style="height: 100%; border: 1px solid #eee"> <div class="main-container">
<v-header></v-header> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<v-slidebar></v-slidebar> <el-main>
<div class="main-container"> <el-header
<el-main> style="text-align: left; font-size: 12px; background-color:#fff; border-bottom: 1px solid #fff;"
<el-header >
style="text-align: left; font-size: 12px; background-color:#fff; border-bottom: 1px solid #fff;" <h3 class="title">项目管理</h3>
> </el-header>
<h3 class="title">项目管理</h3> <el-form :inline="true" :model="formInline" class="demo-form-inline">
</el-header> <el-form-item label="项目名称:">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-input v-model="formInline.name" placeholder="审批人"></el-input>
<el-form-item label="项目名称:"> </el-form-item>
<el-input v-model="formInline.name" placeholder="审批人"></el-input> <el-form-item label="项目时间:">
</el-form-item> <el-date-picker
<el-form-item label="项目时间:"> v-model="formInline.date"
<el-date-picker type="daterange"
v-model="formInline.date" unlink-panels
type="daterange" range-separator="~"
unlink-panels start-placeholder="请选择开始时间"
range-separator="~" end-placeholder="请选择结束时间"
start-placeholder="请选择开始时间" :picker-options="pickerOptions"
end-placeholder="请选择结束时间" value-format="yyyy-MM-dd hh:mm:ss"
:picker-options="pickerOptions" ></el-date-picker>
value-format="yyyy-MM-dd hh:mm:ss" </el-form-item>
></el-date-picker> <el-form-item>
</el-form-item> <el-button type="primary">查询</el-button>
<el-form-item> </el-form-item>
<el-button type="primary">查询</el-button> <el-form-item>
</el-form-item> <el-button type="primary" plain>重置</el-button>
<el-form-item> </el-form-item>
<el-button type="primary" plain>重置</el-button> </el-form>
</el-form-item> <el-form :inline="true" :model="formInline" class="demo-form-inline">
</el-form> <el-form-item label="发布状态:">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-select v-model="formInline.type" placeholder="请选择发布状态">
<el-form-item label="发布状态:"> <el-option label="状态1" value="shanghai"></el-option>
<el-select v-model="formInline.type" placeholder="请选择发布状态"> <el-option label="状态2" value="beijing"></el-option>
<el-option label="状态1" value="shanghai"></el-option> </el-select>
<el-option label="状态2" value="beijing"></el-option> </el-form-item>
</el-select> </el-form>
</el-form-item> <el-form :model="formInline" class="demo-form-inline">
</el-form> <el-form-item>
<el-form :model="formInline" class="demo-form-inline"> <el-button type="primary">新建项目</el-button>
<el-form-item> </el-form-item>
<el-button type="primary">新建项目</el-button> </el-form>
</el-form-item> <el-table :data="tableData" :header-cell-style="{background:'#FAFAFA',color:'#000'}">
</el-form> <el-table-column prop="id" label="ID编号" width="140"></el-table-column>
<el-table :data="tableData" :header-cell-style="{background:'#FAFAFA',color:'#000'}"> <el-table-column prop="projectName" label="项目名称" width="120"></el-table-column>
<el-table-column prop="id" label="ID编号" width="140"></el-table-column> <el-table-column prop="createName" label="创建人"></el-table-column>
<el-table-column prop="projectName" label="项目名称" width="120"></el-table-column> <el-table-column prop="projectBrief" label="项目简介"></el-table-column>
<el-table-column prop="createName" label="创建人"></el-table-column> <el-table-column prop="address" label="所属地区"></el-table-column>
<el-table-column prop="projectBrief" label="项目简介"></el-table-column> <el-table-column prop="startTime" label="项目开始时间"></el-table-column>
<el-table-column prop="address" label="所属地区"></el-table-column> <el-table-column prop="endTime" label="项目结束时间"></el-table-column>
<el-table-column prop="startTime" label="项目开始时间"></el-table-column> <el-table-column prop="state" label="状态"></el-table-column>
<el-table-column prop="endTime" label="项目结束时间"></el-table-column> <el-table-column fixed="right" label="操作" width="200">
<el-table-column prop="state" label="状态"></el-table-column> <template slot-scope="scope">
<el-table-column fixed="right" label="操作" width="200"> <el-button class="title" type="text" size="small">编辑</el-button>
<template slot-scope="scope"> <el-button class="title" type="text" size="small">发布</el-button>
<el-button class="title" type="text" size="small">编辑</el-button> <el-button class="title" type="text" size="small">删除</el-button>
<el-button class="title" type="text" size="small">发布</el-button> </template>
<el-button class="title" type="text" size="small">删除</el-button> </el-table-column>
</template> </el-table>
</el-table-column> <el-pagination
</el-table> @size-change="handleSizeChange"
<el-pagination @current-change="handleCurrentChange"
@size-change="handleSizeChange" :current-page="currentPage"
@current-change="handleCurrentChange" :page-sizes="[100, 200, 300, 400]"
:current-page="currentPage" :page-size="100"
:page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
:page-size="100" :total="400"
layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
:total="400" </el-main>
></el-pagination> </div>
</el-main>
</div>
</el-container>
</template> </template>
<script> <script>
import VHeader from "./layout/header.vue"; import BreadCrumb from "../../components/breadcrumb.vue";
import VSlidebar from "./layout/slidebar.vue";
import { create } from "domain"; import { create } from "domain";
export default { export default {
components: { components: {
VHeader, BreadCrumb
VSlidebar
}, },
data() { data() {
const item = { const item = {
...@@ -95,11 +90,9 @@ export default { ...@@ -95,11 +90,9 @@ export default {
endTime: "2018-12-15 15:39:23", endTime: "2018-12-15 15:39:23",
state: "草稿" state: "草稿"
}; };
// form = {
// name: '',
// };
return { return {
curmbFirst: "教培项目",
curmbSecond: "项目管理",
tableData: Array(10).fill(item), tableData: Array(10).fill(item),
timingTime: "", timingTime: "",
currentPage: 1, currentPage: 1,
...@@ -178,8 +171,6 @@ export default { ...@@ -178,8 +171,6 @@ export default {
.main-container { .main-container {
width: 100%; width: 100%;
margin-left: 200px;
margin-top: 80px;
} }
.title { .title {
color: #409eff; color: #409eff;
......
<template>
<div class="home-container">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="home-table">
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140"></el-table-column>
<el-table-column prop="name" label="Name" width="120"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import BreadCrumb from '../components/breadcrumb.vue'
export default {
components: {
BreadCrumb
},
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(10).fill(item),
curmbFirst: '首页',
curmbSecond: '首页'
}
}
};
</script>
<style lang="scss">
.home-container {
width: 100%;
.home-table {
padding-left: 20px;
}
}
</style>
<template>
<el-container style="height: 100%; border: 1px solid #eee">
<v-header></v-header>
<v-slidebar></v-slidebar>
<div class="main-container">
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</div>
</el-container>
</template>
<script>
import VHeader from './layout/header.vue'
import VSlidebar from './layout/slidebar.vue'
export default {
components: {
VHeader,
VSlidebar
},
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.main-container {
width: 100%;
margin-left: 200px;
margin-top: 80px;
}
</style>
<template> <template>
<div class="header-container"> <div class="header-container">
<div class="logo">内容管理系统</div> <div class="logo"><img src="../../assets/image/index_logoicon.png"/>内容管理系统</div>
<div class="user-info"> <div class="user-info">
<el-dropdown trigger="click" @command="handleCommand"> <div class="el-dropdown-link">
<span class="el-dropdown-link"> <img class="user-logo" src="../../assets/image/img.jpg">
<img class="user-logo" src="../../assets/image/img.jpg"> <span id="headName">{{name}},您好</span>
<span id="headName">{{name}}</span><i class="el-icon-arrow-down el-icon--right"></i> <span class="line">|</span>
</span> <span id="login-out">退出</span>
<el-dropdown-menu slot="dropdown"> </div>
<el-dropdown-item command="logout">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
<!--导航--> <!--导航-->
<div class="user-info"> <div class="user-info">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{'系统切换'}}<i class="el-icon-arrow-down el-icon--right"></i> {{'系统切换'}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in systemInfoList" :key="item.id"> <el-dropdown-item v-for="item in systemInfoList" :key="item.id">
<span class="menu-item" @click="forward(item)">{{item.systemName}}</span> <span class="menu-item" @click="forward(item)">{{item.systemName}}</span>
<!--<el-tag type="warning" @click="forward(item)">{{item.system_name}}</el-tag>-->
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
...@@ -32,21 +29,14 @@ ...@@ -32,21 +29,14 @@
export default { export default {
data() { data() {
return { return {
name: '', name: 'hws',
systemInfoList: [] systemInfoList: []
} }
}, },
created() {
//获取导航项目
this.getSystemType()
},
computed: {}, computed: {},
methods: { methods: {
handleCommand() { handleCommand() {
},
getSystemType() {
}, },
forward() { forward() {
...@@ -56,7 +46,7 @@ export default { ...@@ -56,7 +46,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.header-container { .header-container {
position: fixed; position: relative;
left: 0; left: 0;
top: 0; top: 0;
box-sizing: border-box; box-sizing: border-box;
...@@ -72,6 +62,12 @@ export default { ...@@ -72,6 +62,12 @@ export default {
width: 250px; width: 250px;
text-align: center; text-align: center;
color: #fff; color: #fff;
img{
width: 30px;
float: left;
margin-left: 60px;
margin-top: 20px;
}
} }
.user-info { .user-info {
float: right; float: right;
...@@ -94,6 +90,14 @@ export default { ...@@ -94,6 +90,14 @@ export default {
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
} }
.el-icon--right, #headName,.line, #login-out{
color: #fff;
font-size: 14px;
}
.line {
display: inline-block;
padding: 0 10px;
}
} }
} }
......
<template> <template>
<div class="slidebar-container"> <div class="slidebar-container">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
<el-menu :default-openeds="['1', '3']"> <template v-for="(item,_index) in items">
<el-submenu index="1"> <template v-if="item.subs">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template> <el-submenu :index=" 'index_' + _index" :key="item.index">
<el-menu-item-group> <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
<template slot="title">Group 1</template> <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
<el-menu-item index="1-1">Option 1</el-menu-item> <i class="sub-icon" :class="subItem.icon"></i>
<el-menu-item index="1-2">Option 2</el-menu-item> {{subItem.title}}
</el-menu-item-group> </el-menu-item>
<el-menu-item-group title="Group 2"> </el-submenu>
<el-menu-item index="1-3">Option 3</el-menu-item> </template>
</el-menu-item-group> <template v-else>
<el-submenu index="1-4"> <el-menu-item :index="item.index" :key="item.index">
<template slot="title">Option4</template> <i :class="item.icon"></i>{{ item.title }}
<el-menu-item index="1-4-1">Option 4-1</el-menu-item> </el-menu-item>
</el-submenu> </template>
</el-submenu> </template>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu> </el-menu>
</el-aside>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
items: [
{
title: '教培项目',
icon: 'el-icon-message',
index: '1',
subs: [
{
title: '项目组件',
icon: 'el-icon-setting',
index: 'item-component',
subs: []
},
{
title: '项目管理',
icon: 'el-icon-setting',
index: 'item-manager',
subs: []
}
]
},{
title: '系统管理',
icon: 'el-icon-menu',
index: '2',
subs: [
{
title: '基础数据管理',
icon: 'el-icon-setting',
index: 'role',
subs: []
},
{
title: '角色管理',
icon: 'el-icon-setting',
index: 'role',
subs: []
}
]
}
]
}
},
computed: {
onRoutes() {
return this.$route.path.replace('/', '');
}
}
} }
</script> </script>
<style> <style lang="scss">
.slidebar-container { .slidebar-container {
position: fixed; display: block;
position: absolute;
left: 0; left: 0;
top: 80px; top: 70px;
bottom: 0;
width: 225px;
background: #EAEEF5;
.el-menu {
background: #EAEEF5;
.sub-icon {
font-size: 12px;
}
}
} }
</style> </style>
......
<template>
<div class="create-item">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
角色管理
</div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: '系统管理',
curmbSecond: '角色管理'
}
}
}
</script>
<style>
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册