Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
boz
/
vue-manage-system
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

Merge branch 'dev'

lin-xin 7 rokov pred
rodič
c6e9ee77e7 8b9aca0665
commit
23235f33bc
29 zmenil súbory, kde vykonal 736 pridanie a 348 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 1 0
      .gitignore
  2. 16 8
      README.md
  3. 3 1
      README_EN.md
  4. 2 1
      build/utils.js
  5. 0 29
      build/webpack.dll.conf.js
  6. 2 14
      index.html
  7. 225 186
      package-lock.json
  8. 3 4
      package.json
  9. BIN
      screenshots/wms1.png
  10. BIN
      screenshots/wms2.png
  11. BIN
      screenshots/wms3.png
  12. BIN
      src/assets/login-bg.jpg
  13. 46 22
      src/components/common/Sidebar.vue
  14. 11 5
      src/components/common/Tags.vue
  15. 1 2
      src/components/page/BaseCharts.vue
  16. 1 1
      src/components/page/BaseForm.vue
  17. 14 7
      src/components/page/BaseTable.vue
  18. 127 37
      src/components/page/Dashboard.vue
  19. 225 0
      src/components/page/Icon.vue
  20. 27 15
      src/components/page/Login.vue
  21. 1 1
      src/components/page/Markdown.vue
  22. 1 1
      src/components/page/Permission.vue
  23. 1 1
      src/components/page/Tabs.vue
  24. 1 1
      src/components/page/Upload.vue
  25. 1 1
      src/components/page/VueEditor.vue
  26. 1 0
      src/main.js
  27. 15 8
      src/router/index.js
  28. 4 0
      static/css/icon.css
  29. 7 3
      static/css/main.css

+ 1 - 0
.gitignore
Zobraziť súbor 

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

+ 16 - 8
README.md
Zobraziť súbor 

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

+ 3 - 1
README_EN.md
Zobraziť súbor 

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

+ 2 - 1
build/utils.js
Zobraziť súbor 

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

+ 0 - 29
build/webpack.dll.conf.js
Zobraziť súbor 

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

-      }

-    })

-  ]

-};

+ 2 - 14
index.html
Zobraziť súbor 

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

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 225 - 186
package-lock.json


+ 3 - 4
package.json
Zobraziť súbor 

@@ -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
Zobraziť súbor


BIN
screenshots/wms2.png
Zobraziť súbor


BIN
screenshots/wms3.png
Zobraziť súbor


BIN
src/assets/login-bg.jpg
Zobraziť súbor


+ 46 - 22
src/components/common/Sidebar.vue
Zobraziť súbor 

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

+                            }

+                        ]

                     }

                 ]

             }

+ 11 - 5
src/components/common/Tags.vue
Zobraziť súbor 

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

+ 1 - 2
src/components/page/BaseCharts.vue
Zobraziť súbor 

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

+ 1 - 1
src/components/page/BaseForm.vue
Zobraziť súbor 

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

+ 14 - 7
src/components/page/BaseTable.vue
Zobraziť súbor 

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

+ 127 - 37
src/components/page/Dashboard.vue
Zobraziť súbor 

@@ -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 - 0
src/components/page/Icon.vue
Zobraziť súbor 

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

+ 27 - 15
src/components/page/Login.vue
Zobraziť súbor 

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

+ 1 - 1
src/components/page/Markdown.vue
Zobraziť súbor 

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

+ 1 - 1
src/components/page/Permission.vue
Zobraziť súbor 

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

+ 1 - 1
src/components/page/Tabs.vue
Zobraziť súbor 

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

+ 1 - 1
src/components/page/Upload.vue
Zobraziť súbor 

@@ -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 - 1
src/components/page/VueEditor.vue
Zobraziť súbor 

@@ -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 - 0
src/main.js
Zobraziť súbor 

@@ -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' });

+ 15 - 8
src/router/index.js
Zobraziť súbor 

@@ -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 - 0
static/css/icon.css
Zobraziť súbor 

@@ -0,0 +1,4 @@
 
+

+    [class*=" el-icon-lx"], [class^=el-icon-lx] {

+        font-family: lx-iconfont!important;

+    }

+ 7 - 3
static/css/main.css
Zobraziť súbor 

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

Niektoré súbory nie sú zobrazené, pretože je v týchto rozdielových dátach zmenené mnoho súborov