Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
cd96319f
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
cd96319f
编写于
9月 10, 2018
作者:
L
lin-xin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
'添加自定义图标'
上级
90f44405
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
195 addition
and
11 deletion
+195
-11
README.md
README.md
+3
-1
README_EN.md
README_EN.md
+3
-1
src/App.vue
src/App.vue
+1
-0
src/components/common/Sidebar.vue
src/components/common/Sidebar.vue
+11
-6
src/components/page/Dashboard.vue
src/components/page/Dashboard.vue
+3
-3
src/components/page/Icon.vue
src/components/page/Icon.vue
+166
-0
src/router/index.js
src/router/index.js
+5
-0
static/css/main.css
static/css/main.css
+3
-0
未找到文件。
README.md
浏览文件 @
cd96319f
# manage-system #
#
vue-
manage-system #
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。
[
线上地址
](
http://blog.gdfengshuo.com/example/work/
)
[
English document
](
https://github.com/lin-xin/manage-system/blob/master/README_EN.md
)
...
...
@@ -31,6 +31,7 @@
-
[x] 权限测试
-
[x] 404 / 403
-
[x] 三级菜单
-
[x] 自定义图标
## 目录结构介绍 ##
...
...
@@ -53,6 +54,7 @@
| |-- BaseTable.vue // 基础表格
| |-- DashBoard.vue // 系统首页
| |-- DragList.vue // 拖拽列表组件
| |-- Icon.vue // 自定义图标组件
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Premission.vue // 权限测试组件
...
...
README_EN.md
浏览文件 @
cd96319f
# 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 ##
...
...
src/App.vue
浏览文件 @
cd96319f
...
...
@@ -4,6 +4,7 @@
</div>
</
template
>
<
style
>
@import
'http://at.alicdn.com/t/font_830376_95kzqdmphss.css'
;
@import
"../static/css/main.css"
;
@import
"../static/css/color-dark.css"
;
/*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; 浅绿色主题*/
...
...
src/components/common/Sidebar.vue
浏览文件 @
cd96319f
...
...
@@ -39,22 +39,22 @@
collapse
:
false
,
items
:
[
{
icon
:
'
el-icon-
setting
'
,
icon
:
'
el-icon-
lx-home
'
,
index
:
'
dashboard
'
,
title
:
'
系统首页
'
},
{
icon
:
'
el-icon-
ticket
s
'
,
icon
:
'
el-icon-
lx-cascade
s
'
,
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
:
[
...
...
@@ -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,7 +98,7 @@
title
:
'
拖拽列表
'
},
{
icon
:
'
el-icon-
error
'
,
icon
:
'
el-icon-
lx-warn
'
,
index
:
'
6
'
,
title
:
'
错误处理
'
,
subs
:
[
...
...
src/components/page/Dashboard.vue
浏览文件 @
cd96319f
...
...
@@ -36,7 +36,7 @@
<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 +47,7 @@
<el-col
:span=
"8"
>
<el-card
shadow=
"hover"
:body-style=
"
{padding: '0px'}">
<div
class=
"grid-content grid-con-2"
>
<i
class=
"el-icon-
messag
e grid-con-icon"
></i>
<i
class=
"el-icon-
lx-notic
e grid-con-icon"
></i>
<div
class=
"grid-cont-right"
>
<div
class=
"grid-num"
>
321
</div>
<div>
系统消息
</div>
...
...
@@ -58,7 +58,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>
...
...
src/components/page/Icon.vue
0 → 100644
浏览文件 @
cd96319f
<
template
>
<div>
<div
class=
"crumbs"
>
<el-breadcrumb
separator=
"/"
>
<el-breadcrumb-item><i
class=
"el-icon-warning"
></i>
自定义图标
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div
class=
"container"
>
<h2>
使用方法
</h2>
<p>
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如:
</p>
<p
class=
"example-p"
>
<i
class=
"el-icon-lx-delete"
style=
"font-size: 30px;"
></i>
<span>
<
i class=
"
el-icon-lx-delete
"><
/i
>
</span>
</p>
<p
class=
"example-p"
>
<i
class=
"el-icon-lx-weibo"
style=
"font-size: 30px;color: red"
></i>
<span>
<
i class=
"
el-icon-lx-weibo
"><
/i
>
</span>
</p>
<p
class=
"example-p"
>
<i
class=
"el-icon-lx-favorfill"
style=
"font-size: 30px;color: #ffc300"
></i>
<span>
<
i class=
"
el-icon-lx-favorfill
"><
/i
>
</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
'
,
'
full
'
,
'
text
'
,
'
group
'
,
'
friend
'
,
'
profile
'
,
'
addressbook
'
,
'
calendar
'
,
'
apps
'
,
'
copy
'
,
'
share
'
,
'
wifi
'
,
'
vipcard
'
,
'
goods
'
,
'
weibo
'
,
'
message
'
,
'
remind
'
,
'
qrcode
'
,
'
cart
'
,
'
refresh
'
,
'
top
'
,
'
filter
'
,
'
pic
'
,
'
settings
'
,
'
scan
'
,
'
cascades
'
,
'
search
'
,
'
emoji
'
,
'
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
>
\ No newline at end of file
src/router/index.js
浏览文件 @
cd96319f
...
...
@@ -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
),
...
...
static/css/main.css
浏览文件 @
cd96319f
...
...
@@ -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
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录