Ana Sayfa Keşfet Yardım
Giriş Yap
boz
/
vue-manage-system
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

Merge pull request #124 from lin-xin/dev

更新V3.2.0版本
林鑫 7 yıl önce
ebeveyn
bc4a63f72f c1d7c1a1b2
işleme
10c33fc587
24 değiştirilmiş dosya ile 458 ekleme ve 108 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 1 0
      .gitignore
  2. 3 1
      README.md
  3. 3 1
      README_EN.md
  4. 1 14
      index.html
  5. 1 1
      package.json
  6. BIN
      screenshots/wms1.png
  7. BIN
      screenshots/wms2.png
  8. BIN
      screenshots/wms3.png
  9. 1 0
      src/App.vue
  10. 24 14
      src/components/common/Sidebar.vue
  11. 1 2
      src/components/page/BaseCharts.vue
  12. 1 1
      src/components/page/BaseForm.vue
  13. 14 7
      src/components/page/BaseTable.vue
  14. 127 37
      src/components/page/Dashboard.vue
  15. 228 0
      src/components/page/Icon.vue
  16. 27 15
      src/components/page/Login.vue
  17. 1 1
      src/components/page/Markdown.vue
  18. 1 1
      src/components/page/Permission.vue
  19. 1 1
      src/components/page/Tabs.vue
  20. 1 1
      src/components/page/Upload.vue
  21. 1 1
      src/components/page/VueEditor.vue
  22. 15 8
      src/router/index.js
  23. 6 2
      static/css/main.css
  24. BIN
      static/img/login-bg.jpg

+ 1 - 0
.gitignore
Dosyayı Görüntüle 

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

+ 3 - 1
README.md
Dosyayı Görüntüle 

@@ -1,4 +1,4 @@
 
-# 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       // 权限测试组件

+ 3 - 1
README_EN.md
Dosyayı Görüntüle 

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

+ 1 - 14
index.html
Dosyayı Görüntüle 

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

+ 1 - 1
package.json
Dosyayı Görüntüle 

@@ -1,6 +1,6 @@
 
 {
 
   "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,

BIN
screenshots/wms1.png
Dosyayı Görüntüle


BIN
screenshots/wms2.png
Dosyayı Görüntüle


BIN
screenshots/wms3.png
Dosyayı Görüntüle


+ 1 - 0
src/App.vue
Dosyayı Görüntüle 

@@ -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";   浅绿色主题*/

+ 24 - 14
src/components/common/Sidebar.vue
Dosyayı Görüntüle 

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

+                            }

+                        ]

                     }

                 ]

             }

+ 1 - 2
src/components/page/BaseCharts.vue
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

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

+ 228 - 0
src/components/page/Icon.vue
Dosyayı Görüntüle 

@@ -0,0 +1,228 @@
 
+<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>

+ 27 - 15
src/components/page/Login.vue
Dosyayı Görüntüle 

@@ -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(../../../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>

+ 1 - 1
src/components/page/Markdown.vue
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

@@ -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
Dosyayı Görüntüle 

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

+ 15 - 8
src/router/index.js
Dosyayı Görüntüle 

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

+ 6 - 2
static/css/main.css
Dosyayı Görüntüle 

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

BIN
static/img/login-bg.jpg
Dosyayı Görüntüle