Skip to content

Vue Manage System
Vue Manage System

绝世唐门三哥 / Vue Manage System

通知 3
Star 0
Fork 0
Vue Manage System
Vue Manage System

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 10c33fc5 编写于 作者: 林 林鑫 提交者： GitHub
浏览文件
操作

Merge pull request #124 from lin-xin/dev 

更新V3.2.0版本
上级 bc4a63f7 c1d7c1a1
隐藏空白更改
内联 并排
Showing with 458 addition and 108 deletion
.gitignore
浏览文件 @ 10c33fc5
......@@ -2,3 +2,4 @@
node_modules/
dist/
npm-debug.log
example.html
README.md
浏览文件 @ 10c33fc5
# manage-system #
# vue-manage-system #
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
......@@ -31,6 +31,7 @@
- [x] 权限测试
- [x] 404 / 403
- [x] 三级菜单
- [x] 自定义图标
## 目录结构介绍 ##
......@@ -53,6 +54,7 @@
| |-- BaseTable.vue // 基础表格
| |-- DashBoard.vue // 系统首页
| |-- DragList.vue // 拖拽列表组件
| |-- Icon.vue // 自定义图标组件
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Premission.vue // 权限测试组件
......
README_EN.md
浏览文件 @ 10c33fc5
# manage-system #
# vue-manage-system #
The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
## Donation
......@@ -22,6 +22,8 @@ The scheme as a set of multi-function background frame templates, suitable for m
- [x] List drag sort
- [x] Permission
- [x] 404 / 403
- [x] Three level menu
- [x] Custom icon
## Directory structure ##
......
index.html
浏览文件 @ 10c33fc5
......@@ -2,23 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<title>vue-manage-system | 基于Vue的后台管理系统</title>
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="vue, vue-manage-system, manage-system, 后台管理系统, element" />
<meta name="description" content="基于Vue2 + Element UI 的后台管理系统解决方案" />
</head>
<body>
<div id="app"></div>
<!--<script src="./static/js/vendor.dll.js"></script>-->
<!-- <script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?b455f7e1c6ca6e239edaccf0e6aa11fb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script> -->
</body>
</html>
package.json
浏览文件 @ 10c33fc5
{
"name": "vue-manage-system",
"version": "3.1.1",
"version": "3.2.0",
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
"author": "lin-xin <2981207131@qq.com>",
"private": true,
......
screenshots/wms1.png
查看替换文件 @ bc4a63f7 浏览文件 @ 10c33fc5
screenshots/wms1.png

16.0 KB | W: | H:

screenshots/wms1.png

21.3 KB | W: | H:

screenshots/wms1.png
screenshots/wms1.png
screenshots/wms1.png
screenshots/wms1.png
  • 2-up
  • Swipe
  • Onion skin
screenshots/wms2.png
查看替换文件 @ bc4a63f7 浏览文件 @ 10c33fc5
screenshots/wms2.png

12.9 KB | W: | H:

screenshots/wms2.png

21.1 KB | W: | H:

screenshots/wms2.png
screenshots/wms2.png
screenshots/wms2.png
screenshots/wms2.png
  • 2-up
  • Swipe
  • Onion skin
src/App.vue
浏览文件 @ 10c33fc5
......@@ -4,6 +4,7 @@
</div>
</template>
<style>
@import 'http://at.alicdn.com/t/font_830376_qzecyukz0s.css';
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; 浅绿色主题*/
......
src/components/common/Sidebar.vue
浏览文件 @ 10c33fc5
......@@ -39,22 +39,22 @@
collapse: false,
items: [
{
icon: 'el-icon-setting',
icon: 'el-icon-lx-home',
index: 'dashboard',
title: '系统首页'
},
{
icon: 'el-icon-tickets',
icon: 'el-icon-lx-cascades',
index: 'table',
title: '基础表格'
},
{
icon: 'el-icon-message',
icon: 'el-icon-lx-copy',
index: 'tabs',
title: 'tab选项卡'
},
{
icon: 'el-icon-date',
icon: 'el-icon-lx-calendar',
index: '3',
title: '表单相关',
subs: [
......@@ -64,7 +64,7 @@
},
{
index: '3-2',
title: '编辑器',
title: '三级菜单',
subs: [
{
index: 'editor',
......@@ -83,7 +83,12 @@
]
},
{
icon: 'el-icon-star-on',
icon: 'el-icon-lx-emoji',
index: 'icon',
title: '自定义图标'
},
{
icon: 'el-icon-lx-favor',
index: 'charts',
title: 'schart图表'
},
......@@ -93,14 +98,19 @@
title: '拖拽列表'
},
{
icon: 'el-icon-warning',
index: 'permission',
title: '权限测试'
},
{
icon: 'el-icon-error',
index: '404',
title: '404页面'
icon: 'el-icon-lx-warn',
index: '6',
title: '错误处理',
subs: [
{
index: 'permission',
title: '权限测试'
},
{
index: '404',
title: '404页面'
}
]
}
]
}
......
src/components/page/BaseCharts.vue
浏览文件 @ 10c33fc5
......@@ -2,8 +2,7 @@
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-favor"></i> schart图表</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
......
src/components/page/BaseForm.vue
浏览文件 @ 10c33fc5
......@@ -2,7 +2,7 @@
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>基本表单</el-breadcrumb-item>
</el-breadcrumb>
</div>
......
src/components/page/BaseTable.vue
浏览文件 @ 10c33fc5
......@@ -2,7 +2,7 @@
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-tickets"></i> 基础表格</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 基础表格</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
......@@ -15,23 +15,23 @@
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
<el-button type="primary" icon="search" @click="search">搜索</el-button>
</div>
<el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="date" label="日期" sortable width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" :formatter="formatter">
</el-table-column>
<el-table-column label="操作" width="180">
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</div>
......@@ -202,4 +202,11 @@
font-size: 16px;
text-align: center
}
.table{
width: 100%;
font-size: 14px;
}
.red{
color: #ff0000;
}
</style>
src/components/page/Dashboard.vue
浏览文件 @ 10c33fc5
......@@ -2,41 +2,37 @@
<div>
<el-row :gutter="20">
<el-col :span="8">
<el-row>
<el-col>
<el-card shadow="hover" class="mgb20">
<div class="user-info">
<img src="static/img/img.jpg" class="user-avator" alt="">
<div class="user-info-cont">
<div class="user-info-name">{{name}}</div>
<div>{{role}}</div>
</div>
</div>
<div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
<div class="user-info-list">上次登录地点：<span>东莞</span></div>
</el-card>
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>语言详情</span>
</div>
Vue
<el-progress :percentage="57.2" color="#42b983"></el-progress>
JavaScript
<el-progress :percentage="29.8" color="#f1e05a"></el-progress>
CSS
<el-progress :percentage="11.9"></el-progress>
HTML
<el-progress :percentage="1.1" color="#f56c6c"></el-progress>
</el-card>
</el-col>
</el-row>
<el-card shadow="hover" class="mgb20" style="height:252px;">
<div class="user-info">
<img src="static/img/img.jpg" class="user-avator" alt="">
<div class="user-info-cont">
<div class="user-info-name">{{name}}</div>
<div>{{role}}</div>
</div>
</div>
<div class="user-info-list">上次登录时间：<span>2018-01-01</span></div>
<div class="user-info-list">上次登录地点：<span>东莞</span></div>
</el-card>
<el-card shadow="hover" style="height:252px;">
<div slot="header" class="clearfix">
<span>语言详情</span>
</div>
Vue
<el-progress :percentage="71.3" color="#42b983"></el-progress>
JavaScript
<el-progress :percentage="24.1" color="#f1e05a"></el-progress>
CSS
<el-progress :percentage="3.7"></el-progress>
HTML
<el-progress :percentage="0.9" color="#f56c6c"></el-progress>
</el-card>
</el-col>
<el-col :span="16">
<el-row :gutter="20" class="mgb20">
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-1">
<i class="el-icon-view grid-con-icon"></i>
<i class="el-icon-lx-people grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">1234</div>
<div>用户访问量</div>
......@@ -47,7 +43,7 @@
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-2">
<i class="el-icon-message grid-con-icon"></i>
<i class="el-icon-lx-notice grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">321</div>
<div>系统消息</div>
......@@ -58,7 +54,7 @@
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-3">
<i class="el-icon-goods grid-con-icon"></i>
<i class="el-icon-lx-goods grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">5000</div>
<div>数量</div>
......@@ -67,7 +63,7 @@
</el-card>
</el-col>
</el-row>
<el-card shadow="hover" :body-style="{ height: '304px'}">
<el-card shadow="hover" style="height:403px;">
<div slot="header" class="clearfix">
<span>待办事项</span>
<el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
......@@ -91,20 +87,32 @@
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="hover">
<schart ref="bar" class="schart" canvasId="bar" :data="data" type="bar" :options="options"></schart>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<schart ref="line" class="schart" canvasId="line" :data="data" type="line" :options="options2"></schart>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
name: 'dashboard',
data() {
return {
name: localStorage.getItem('ms_username'),
todoList: [
{
todoList: [{
title: '今天要修复100个bug',
status: false,
},
......@@ -127,13 +135,90 @@
title: '今天要写100行代码加几个bug吧',
status: true,
}
]
],
data: [{
name: '2018/09/04',
value: 1083
},
{
name: '2018/09/05',
value: 941
},
{
name: '2018/09/06',
value: 1139
},
{
name: '2018/09/07',
value: 816
},
{
name: '2018/09/08',
value: 327
},
{
name: '2018/09/09',
value: 228
},
{
name: '2018/09/10',
value: 1065
}
],
options: {
title: '最近七天每天的用户访问量',
showValue: false,
fillColor: 'rgb(45, 140, 240)',
bottomPadding: 30,
topPadding: 30
},
options2: {
title: '最近七天用户访问趋势',
fillColor: '#FC6FA1',
axisColor: '#008ACD',
contentColor: '#EEEEEE',
bgColor: '#F5F8FD',
bottomPadding: 30,
topPadding: 30
},
collapse: false
}
},
components: {
Schart
},
computed: {
role() {
return this.name === 'admin' ? '超级管理员' : '普通用户';
}
},
created(){
bus.$on('collapse', msg => {
this.collapse = msg;
});
// 调用renderChart方法对图表进行重新渲染
window.addEventListener('resize', ()=>{
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
})
this.changeDate();
},
watch: {
collapse(){
setTimeout(() => {
this.$refs.bar.renderChart();
this.$refs.line.renderChart();
}, 300);
}
},
methods: {
changeDate(){
const now = new Date().getTime();
this.data.forEach((item, index) => {
const date = new Date(now - (6 - index) * 86400000);
item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
})
}
}
}
......@@ -154,7 +239,7 @@
.grid-cont-right {
flex: 1;
text-align: center;
font-size: 12px;
font-size: 14px;
color: #999;
}
......@@ -245,4 +330,9 @@
color: #999;
}
.schart {
width: 100%;
height: 300px;
}
</style>
src/components/page/Icon.vue 0 → 100644
浏览文件 @ 10c33fc5
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<h2>使用方法</h2>
<p style="line-height: 50px;">
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
</p>
<p class="example-p">
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
<span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
</p>
<p class="example-p">
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
<span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
</p>
<p class="example-p">
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
<span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
</p>
<br>
<h2>图标</h2>
<div class="search-box">
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
</div>
<ul>
<li class="icon-li" v-for="(item,index) in list" :key="index">
<div class="icon-li-content">
<i :class="`el-icon-lx-${item}`"></i>
<span>{{item}}</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data: function(){
return {
keyword: '',
iconList: [
'attentionforbid',
'attentionforbidfill',
'attention',
'attentionfill',
'tag',
'tagfill',
'people',
'peoplefill',
'notice',
'noticefill',
'mobile',
'mobilefill',
'voice',
'voicefill',
'unlock',
'lock',
'home',
'homefill',
'delete',
'deletefill',
'notification',
'notificationfill',
'notificationforbidfill',
'like',
'likefill',
'comment',
'commentfill',
'camera',
'camerafill',
'warn',
'warnfill',
'time',
'timefill',
'location',
'locationfill',
'favor',
'favorfill',
'skin',
'skinfill',
'news',
'newsfill',
'record',
'recordfill',
'emoji',
'emojifill',
'message',
'messagefill',
'goods',
'goodsfill',
'crown',
'crownfill',
'move',
'add',
'hot',
'hotfill',
'service',
'servicefill',
'present',
'presentfill',
'pic',
'picfill',
'rank',
'rankfill',
'male',
'female',
'down',
'top',
'recharge',
'rechargefill',
'forward',
'forwardfill',
'info',
'infofill',
'redpacket',
'redpacket_fill',
'roundadd',
'roundaddfill',
'friendadd',
'friendaddfill',
'cart',
'cartfill',
'more',
'moreandroid',
'back',
'right',
'shop',
'shopfill',
'question',
'questionfill',
'roundclose',
'roundclosefill',
'roundcheck',
'roundcheckfill',
'global',
'mail',
'punch',
'exit',
'upload',
'read',
'file',
'link',
'full',
'group',
'friend',
'profile',
'addressbook',
'calendar',
'text',
'copy',
'share',
'wifi',
'vipcard',
'weibo',
'remind',
'refresh',
'filter',
'settings',
'scan',
'qrcode',
'cascades',
'apps',
'sort',
'searchlist',
'search',
'edit'
]
}
},
computed: {
list(){
return this.iconList.filter((item) => {
return item.indexOf(this.keyword) !== -1;
})
}
},
created(){
console.log(this.iconList.length);
}
}
</script>
<style scoped>
.example-p{
height: 45px;
display: flex;
align-items: center;
}
.search-box{
text-align: center;
margin-top: 10px;
}
.search{
width: 300px;
}
ul,li{
list-style: none;
}
.icon-li{
display: inline-block;
padding: 10px;
width: 120px;
height: 120px;
}
.icon-li-content{
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.icon-li-content i{
font-size: 36px;
color: #606266;
}
.icon-li-content span{
margin-top: 10px;
color: #787878;
}
</style>
\ No newline at end of file
src/components/page/Login.vue
浏览文件 @ 10c33fc5
<template>
<div class="login-wrap">
<div class="ms-title">后台管理系统</div>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<div class="ms-title">后台管理系统</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="username"></el-input>
<el-input v-model="ruleForm.username" placeholder="username">
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
</el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</div>
<p style="font-size:12px;line-height:30px;color:#999;">Tips : 用户名和密码随便填。</p>
<p class="login-tips">Tips : 用户名和密码随便填。</p>
</el-form>
</div>
</div>
......@@ -57,27 +61,29 @@
position: relative;
width:100%;
height:100%;
background-image: url(../../../static/img/login-bg.jpg);
background-size: 100%;
}
.ms-title{
position: absolute;
top:50%;
width:100%;
margin-top: -230px;
line-height: 50px;
text-align: center;
font-size:30px;
font-size:20px;
color: #fff;
border-bottom: 1px solid #ddd;
}
.ms-login{
position: absolute;
left:50%;
top:50%;
width:300px;
height:160px;
margin:-150px 0 0 -190px;
padding:40px;
width:350px;
margin:-190px 0 0 -175px;
border-radius: 5px;
background: #fff;
background: rgba(255,255,255, 0.3);
overflow: hidden;
}
.ms-content{
padding: 30px 30px;
}
.login-btn{
text-align: center;
......@@ -85,5 +91,11 @@
.login-btn button{
width:100%;
height:36px;
margin-bottom: 10px;
}
.login-tips{
font-size:12px;
line-height:30px;
color:#fff;
}
</style>
\ No newline at end of file
src/components/page/Markdown.vue
浏览文件 @ 10c33fc5
......@@ -2,7 +2,7 @@
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>markdown编辑器</el-breadcrumb-item>
</el-breadcrumb>
</div>
......
src/components/page/Permission.vue
浏览文件 @ 10c33fc5
......@@ -2,7 +2,7 @@
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-warning"></i> 权限测试</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限测试</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
......
src/components/page/Tabs.vue
浏览文件 @ 10c33fc5
......@@ -2,7 +2,7 @@
<div class="">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-message"></i> tab选项卡</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
......
src/components/page/Upload.vue
浏览文件 @ 10c33fc5
......@@ -2,7 +2,7 @@
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>图片上传</el-breadcrumb-item>
</el-breadcrumb>
</div>
......
src/components/page/VueEditor.vue
浏览文件 @ 10c33fc5
......@@ -2,7 +2,7 @@
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
<el-breadcrumb-item>编辑器</el-breadcrumb-item>
</el-breadcrumb>
</div>
......
src/router/index.js
浏览文件 @ 10c33fc5
......@@ -19,6 +19,11 @@ export default new Router({
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系统首页' }
},
{
path: '/icon',
component: resolve => require(['../components/page/Icon.vue'], resolve),
meta: { title: '自定义图标' }
},
{
path: '/table',
component: resolve => require(['../components/page/BaseTable.vue'], resolve),
......@@ -69,6 +74,16 @@ export default new Router({
path: '/permission',
component: resolve => require(['../components/page/Permission.vue'], resolve),
meta: { title: '权限测试', permission: true }
},
{
path: '/404',
component: resolve => require(['../components/page/404.vue'], resolve),
meta: { title: '404' }
},
{
path: '/403',
component: resolve => require(['../components/page/403.vue'], resolve),
meta: { title: '403' }
}
]
},
......@@ -76,14 +91,6 @@ export default new Router({
path: '/login',
component: resolve => require(['../components/page/Login.vue'], resolve)
},
{
path: '/404',
component: resolve => require(['../components/page/404.vue'], resolve)
},
{
path: '/403',
component: resolve => require(['../components/page/403.vue'], resolve)
},
{
path: '*',
redirect: '/404'
......
static/css/main.css
浏览文件 @ 10c33fc5
......@@ -19,6 +19,9 @@ body {
a {
text-decoration: none
}
[class*=" el-icon-lx"], [class^=el-icon-lx] {
font-family: lx-iconfont!important;
}
.content-box {
position: absolute;
......@@ -26,6 +29,7 @@ a {
right: 0;
top: 70px;
bottom: 0;
padding-bottom: 30px;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
background: #f0f0f0;
......@@ -34,7 +38,7 @@ a {
.content {
width: auto;
height: 100%;
padding: 40px;
padding: 10px;
overflow-y: scroll;
box-sizing: border-box;
}
......@@ -51,7 +55,7 @@ a {
}
.crumbs {
margin-bottom: 20px;
margin: 10px 0;
}
.pagination {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或