forgetest5
/
vue-manage-system1
mirror of https://mirror.trustie.net/testforgeroot/vue-manage-system1.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'dev'

This commit is contained in:
lin-xin 2018-09-11 16:45:43 +08:00
parent c6e9ee77e7 8b9aca0665
commit 23235f33bc
29 changed files with 1525 additions and 1340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
node_modules/
dist/
npm-debug.log
example.html

24
README.md
View File

@ -1,11 +1,13 @@
# 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)
[更新日志](https://github.com/lin-xin/vue-manage-system/releases)
## 捐赠
## 赞赏
请作者喝杯咖啡吧！
![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
## 前言 ##
@ -28,6 +30,8 @@
- [x] 列表拖拽排序
- [x] 权限测试
- [x] 404 / 403
- [x] 三级菜单
- [x] 自定义图标
## 目录结构介绍 ##
@ -50,6 +54,7 @@
| |-- BaseTable.vue // 基础表格
| |-- DashBoard.vue // 系统首页
| |-- DragList.vue // 拖拽列表组件
| |-- Icon.vue // 自定义图标组件
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Premission.vue // 权限测试组件
@ -87,13 +92,12 @@
vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
```JavaScript
```html
<template>
<div>
<schart :canvasId="canvasId"
<schart class="wrapper"
:canvasId="canvasId"
:type="type"
:width="width"
:height="height"
:data="data"
:options="options"
></schart>
@ -107,8 +111,6 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
return {
canvasId: 'myCanvas', // canvas的id
type: 'bar', // 图表类型
width: 500,
height: 400,
data: [
{name: '2014', value: 1342},
{name: '2015', value: 2123},
@ -125,6 +127,12 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
}
}
</script>
<style>
.wrapper{
width: 7rem;
height: 5rem;
}
</style>
```
### element-ui ###

4
README_EN.md
View File

@ -1,4 +1,4 @@
# 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 ##

3
build/utils.js
View File

@ -47,7 +47,8 @@ exports.cssLoaders = function (options) {
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)

29
build/webpack.dll.conf.js
View File

@ -1,29 +0,0 @@
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['vue/dist/vue.common.js','vue-router', 'babel-polyfill','axios']
},
output: {
path: path.join(__dirname, '../static/js'),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
]
};

16
index.html
View File

@ -2,23 +2,11 @@
<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 的后台管理系统解决方案" />
<link rel="stylesheet" href="http://at.alicdn.com/t/font_830376_qzecyukz0s.css">
</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>

2192
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -1,18 +1,17 @@
{
"name": "vue-manage-system",
"version": "3.1.0",
"version": "3.2.0",
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
"author": "lin-xin <2981207131@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js"
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "^6.23.0",
"element-ui": "2.3.3",
"element-ui": "^2.4.5",
"mavon-editor": "^2.5.4",
"vue": "^2.5.16",
"vue-cropperjs": "^2.2.0",

BIN
screenshots/wms1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
screenshots/wms2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
screenshots/wms3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
src/assets/login-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

68
src/components/common/Sidebar.vue
View File

@ -8,9 +8,17 @@
<template slot="title">
<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
</template>
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
{{ subItem.title }}
</el-menu-item>
<template v-for="subItem in item.subs">
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
<template slot="title">{{ subItem.title }}</template>
<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
{{ threeItem.title }}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
{{ subItem.title }}
</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
@ -31,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: [
@ -55,12 +63,18 @@
title: '基本表单'
},
{
index: 'editor',
title: '富文本编辑器'
},
{
index: 'markdown',
title: 'markdown编辑器'
index: '3-2',
title: '三级菜单',
subs: [
{
index: 'editor',
title: '富文本编辑器'
},
{
index: 'markdown',
title: 'markdown编辑器'
},
]
},
{
index: 'upload',
@ -69,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图表'
},
@ -79,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页面'
}
]
}
]
}

16
src/components/common/Tags.vue
View File

@ -61,11 +61,16 @@
const isExist = this.tagsList.some(item => {
return item.path === route.fullPath;
})
!isExist && this.tagsList.push({
title: route.meta.title,
path: route.fullPath,
name: route.matched[1].components.default.name
})
if(!isExist){
if(this.tagsList.length >= 8){
this.tagsList.shift();
}
this.tagsList.push({
title: route.meta.title,
path: route.fullPath,
name: route.matched[1].components.default.name
})
}
bus.$emit('tags', this.tagsList);
},
handleTags(command){
@ -97,6 +102,7 @@
overflow: hidden;
background: #fff;
padding-right: 120px;
box-shadow: 0 5px 10px #ddd;
}
.tags ul {

3
src/components/page/BaseCharts.vue
View File

@ -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">

2
src/components/page/BaseForm.vue
View File

@ -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>

21
src/components/page/BaseTable.vue
View File

@ -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>

164
src/components/page/Dashboard.vue
View File

@ -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>

225
src/components/page/Icon.vue Normal file
View File

@ -0,0 +1,225 @@
<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;
})
}
}
}
</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>

42
src/components/page/Login.vue
View File

@ -1,18 +1,22 @@
<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(../../assets/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>

2
src/components/page/Markdown.vue
View File

@ -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>

2
src/components/page/Permission.vue
View File

@ -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">

2
src/components/page/Tabs.vue
View File

@ -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">

2
src/components/page/Upload.vue
View File

@ -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>

2
src/components/page/VueEditor.vue
View File

@ -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>

1
src/main.js
View File

@ -5,6 +5,7 @@ import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题
import '../static/css/icon.css';
import "babel-polyfill";
Vue.use(ElementUI, { size: 'small' });

23
src/router/index.js
View File

@ -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'

4
static/css/icon.css Normal file
View File

@ -0,0 +1,4 @@
[class*=" el-icon-lx"], [class^=el-icon-lx] {
font-family: lx-iconfont!important;
}

10
static/css/main.css
View File

@ -20,13 +20,14 @@ a {
text-decoration: none
}
.content-box {
position: absolute;
left: 250px;
right: 0;
top: 70px;
bottom: 0;
overflow-y: scroll;
padding-bottom: 30px;
-webkit-transition: left .3s ease-in-out;
transition: left .3s ease-in-out;
background: #f0f0f0;
@ -34,7 +35,10 @@ a {
.content {
width: auto;
padding: 40px;
height: 100%;
padding: 10px;
overflow-y: scroll;
box-sizing: border-box;
}
.content-collapse {
@ -49,7 +53,7 @@ a {
}
.crumbs {
margin-bottom: 20px;
margin: 10px 0;
}
.pagination {