Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
dd9ef514
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
dd9ef514
编写于
7月 24, 2017
作者:
P
Pan
提交者:
花裤衩
7月 28, 2017
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refine sidebar
上级
ae44d0b8
变更
7
显示空白变更内容
内联
并排
Showing
7 changed file
with
194 addition
and
121 deletion
+194
-121
src/styles/element-ui.scss
src/styles/element-ui.scss
+72
-73
src/styles/index.scss
src/styles/index.scss
+3
-1
src/styles/sidebar.scss
src/styles/sidebar.scss
+72
-0
src/views/layout/Layout.vue
src/views/layout/Layout.vue
+21
-27
src/views/layout/Levelbar.vue
src/views/layout/Levelbar.vue
+1
-1
src/views/layout/Sidebar.vue
src/views/layout/Sidebar.vue
+10
-4
src/views/layout/SidebarItem.vue
src/views/layout/SidebarItem.vue
+15
-15
未找到文件。
src/styles/element-ui.scss
浏览文件 @
dd9ef514
//覆盖一些element-ui样式
//覆盖一些element-ui样式
.block-checkbox
{
.block-checkbox
{
display
:
block
;
display
:
block
;
}
}
.operation-container
{
.operation-container
{
.cell
{
.cell
{
padding
:
10px
!
important
;
padding
:
10px
!
important
;
}
}
...
@@ -16,32 +16,32 @@
...
@@ -16,32 +16,32 @@
margin-top
:
10px
;
margin-top
:
10px
;
}
}
}
}
}
}
.el-upload
{
.el-upload
{
input
[
type
=
"file"
]
{
input
[
type
=
"file"
]
{
display
:
none
!
important
;
display
:
none
!
important
;
}
}
}
}
.el-upload__input
{
.el-upload__input
{
display
:
none
;
display
:
none
;
}
}
.cell
{
.cell
{
.el-tag
{
.el-tag
{
margin-right
:
8px
;
margin-right
:
8px
;
}
}
}
}
.small-padding
{
.small-padding
{
.cell
{
.cell
{
padding-left
:
8px
;
padding-left
:
8px
;
padding-right
:
8px
;
padding-right
:
8px
;
}
}
}
}
.status-col
{
.status-col
{
.cell
{
.cell
{
padding
:
0
10px
;
padding
:
0
10px
;
text-align
:
center
;
text-align
:
center
;
...
@@ -49,19 +49,18 @@
...
@@ -49,19 +49,18 @@
margin-right
:
0px
;
margin-right
:
0px
;
}
}
}
}
}
}
//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
.el-dialog
{
.el-dialog
{
transform
:
none
;
transform
:
none
;
left
:
0
;
left
:
0
;
position
:
relative
;
position
:
relative
;
margin
:
0
auto
;
margin
:
0
auto
;
}
}
//文章页textarea修改样式
//文章页textarea修改样式
.article-textarea
{
.article-textarea
{
textarea
{
textarea
{
padding-right
:
40px
;
padding-right
:
40px
;
resize
:
none
;
resize
:
none
;
...
@@ -69,10 +68,10 @@
...
@@ -69,10 +68,10 @@
border-radius
:
0px
;
border-radius
:
0px
;
border-bottom
:
1px
solid
#bfcbd9
;
border-bottom
:
1px
solid
#bfcbd9
;
}
}
}
}
//element ui upload
//element ui upload
.upload-container
{
.upload-container
{
.el-upload
{
.el-upload
{
width
:
100%
;
width
:
100%
;
.el-upload-dragger
{
.el-upload-dragger
{
...
@@ -80,4 +79,4 @@
...
@@ -80,4 +79,4 @@
height
:
200px
;
height
:
200px
;
}
}
}
}
}
}
src/styles/index.scss
浏览文件 @
dd9ef514
@import
'./mixin.scss'
;
@import
'./btn.scss'
;
@import
'./btn.scss'
;
@import
'./element-ui.scss'
;
@import
'./element-ui.scss'
;
@import
'./mixin.scss'
;
@import
'./sidebar.scss'
;
body
{
body
{
-moz-osx-font-smoothing
:
grayscale
;
-moz-osx-font-smoothing
:
grayscale
;
-webkit-font-smoothing
:
antialiased
;
-webkit-font-smoothing
:
antialiased
;
...
...
src/styles/sidebar.scss
0 → 100644
浏览文件 @
dd9ef514
// 侧边栏
.sidebar-container
>
.el-menu
{
width
:
100%
!
important
;
}
.sidebar-container
.svg-icon
{
margin-right
:
16px
;
}
.hideSidebar
.svg-icon
{
margin-right
:
0
;
}
.hideSidebar
.submenu-title-noDropdown
span
,
.hideSidebar
.el-submenu
>
.el-submenu__title
span
{
height
:
0
;
width
:
0
;
overflow
:
hidden
;
visibility
:
hidden
;
display
:
inline-block
;
}
.hideSidebar
.nest-menu
.el-submenu__title
{
text-align
:
initial
!
important
;
span
{
height
:
auto
;
width
:
auto
;
visibility
:
visible
;
}
.el-submenu__icon-arrow
{
display
:
block
!
important
;
}
}
.hideSidebar
.menu-wrapper
>
.el-menu-item
,
.hideSidebar
.submenu-title-noDropdown
,
.hideSidebar
.menu-wrapper
>
.el-submenu
.el-submenu__title
{
text-align
:
center
;
}
.hideSidebar
.el-menu-item
.el-submenu__icon-arrow
,
.hideSidebar
.el-submenu
.el-submenu__title
.el-submenu__icon-arrow
{
display
:
none
;
}
.hideSidebar
.submenu-title-noDropdown
{
position
:
relative
;
span
{
transition
:
opacity
.3s
cubic-bezier
(
.55
,
0
,
.1
,
1
);
opacity
:
0
;
}
&
:hover
{
span
{
display
:
block
;
border-radius
:
3px
;
z-index
:
1002
;
width
:
140px
;
height
:
56px
;
visibility
:
visible
;
position
:
absolute
;
right
:
-145px
;
top
:
0px
;
background-color
:
#1f2d3d
;
opacity
:
1
;
}
}
}
.el-submenu
.el-menu-item
{
min-width
:
180px
!
important
;
}
src/views/layout/Layout.vue
浏览文件 @
dd9ef514
<
template
>
<
template
>
<div
class=
"app-wrapper"
:class=
"
{hideSidebar:!sidebar.opened}">
<div
class=
"app-wrapper"
:class=
"
{hideSidebar:!sidebar.opened}">
<div
class=
"sidebar-wrapper"
>
<sidebar
class=
"sidebar-container"
></sidebar>
<sidebar
class=
"sidebar-container"
></sidebar>
</div>
<div
class=
"main-container"
>
<div
class=
"main-container"
>
<navbar></navbar>
<navbar></navbar>
<app-main></app-main>
<app-main></app-main>
...
@@ -36,40 +34,36 @@
...
@@ -36,40 +34,36 @@
height
:
100%
;
height
:
100%
;
width
:
100%
;
width
:
100%
;
&
.hideSidebar
{
&
.hideSidebar
{
.sidebar-wrapper
{
.sidebar-container
{
transform
:
translate
(
-140px
,
0
);
width
:
56px
;
.sidebar-container
{
transform
:
translate
(
132px
,
0
);
}
&
:hover
{
transform
:
translate
(
0
,
0
);
.sidebar-container
{
transform
:
translate
(
0
,
0
);
}
}
}
}
.main-container
{
.main-container
{
margin-left
:
40
px
;
margin-left
:
56
px
;
}
}
// .sidebar-wrapper {
// transform: translate(-140px, 0);
// .sidebar-container {
// transform: translate(132px, 0);
// }
// &:hover {
// transform: translate(0, 0);
// .sidebar-container {
// transform: translate(0, 0);
// }
// }
// }
}
}
.sidebar-wrapper
{
.sidebar-container
{
transition
:
all
.28s
ease-out
;
width
:
180px
;
width
:
180px
;
height
:
1000px
;
position
:
fixed
;
position
:
fixed
;
top
:
0
;
top
:
0
;
bottom
:
0
;
bottom
:
0
;
left
:
0
;
left
:
0
;
z-index
:
1001
;
z-index
:
1001
;
overflow
:
hidden
;
background
:
red
;
transition
:
all
.28s
ease-out
;
}
.sidebar-container
{
transition
:
all
.28s
ease-out
;
position
:
absolute
;
top
:
0
;
bottom
:
0
;
left
:
0
;
right
:
-17px
;
overflow-y
:
scroll
;
}
}
.main-container
{
.main-container
{
min-height
:
100%
;
min-height
:
100%
;
...
...
src/views/layout/Levelbar.vue
浏览文件 @
dd9ef514
<
template
>
<
template
>
<el-breadcrumb
class=
"app-levelbar"
separator=
"/"
>
<el-breadcrumb
class=
"app-levelbar"
separator=
"/"
>
<el-breadcrumb-item
v-for=
"(item,index) in levelList"
:key=
"item"
>
<el-breadcrumb-item
v-for=
"(item,index) in levelList"
:key=
"item
.path
"
>
<router-link
v-if=
'item.redirect==="noredirect"||index==levelList.length-1'
to=
""
class=
"no-redirect"
>
{{
item
.
name
}}
</router-link>
<router-link
v-if=
'item.redirect==="noredirect"||index==levelList.length-1'
to=
""
class=
"no-redirect"
>
{{
item
.
name
}}
</router-link>
<router-link
v-else
:to=
"item.redirect||item.path"
>
{{
item
.
name
}}
</router-link>
<router-link
v-else
:to=
"item.redirect||item.path"
>
{{
item
.
name
}}
</router-link>
</el-breadcrumb-item>
</el-breadcrumb-item>
...
...
src/views/layout/Sidebar.vue
浏览文件 @
dd9ef514
<
template
>
<
template
>
<el-menu
mode=
"vertical"
theme=
"dark"
:default-active=
"$route.path"
>
<div>
<el-menu
mode=
"vertical"
theme=
"dark"
:default-active=
"$route.path"
:collapse=
"isCollapse"
>
<sidebar-item
:routes=
'permission_routers'
></sidebar-item>
<sidebar-item
:routes=
'permission_routers'
></sidebar-item>
</el-menu>
</el-menu>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
...
@@ -11,8 +13,12 @@
...
@@ -11,8 +13,12 @@
components
:
{
SidebarItem
},
components
:
{
SidebarItem
},
computed
:
{
computed
:
{
...
mapGetters
([
...
mapGetters
([
'
permission_routers
'
'
permission_routers
'
,
])
'
sidebar
'
]),
isCollapse
()
{
return
!
this
.
sidebar
.
opened
}
}
}
}
}
</
script
>
</
script
>
...
...
src/views/layout/SidebarItem.vue
浏览文件 @
dd9ef514
<
template
>
<
template
>
<div>
<div
class=
'menu-wrapper'
>
<template
v-for=
"item in routes"
>
<template
v-for=
"item in routes"
>
<router-link
v-if=
"!item.hidden&&item.noDropdown&&item.children.length>0"
:to=
"item.path+'/'+item.children[0].path"
>
<router-link
v-if=
"!item.hidden&&item.noDropdown&&item.children.length>0"
:to=
"item.path+'/'+item.children[0].path"
>
<el-menu-item
:index=
"item.path+'/'+item.children[0].path"
>
<el-menu-item
:index=
"item.path+'/'+item.children[0].path"
class=
'submenu-title-noDropdown'
>
<icon-svg
v-if=
'item.icon'
:icon-class=
"item.icon"
></icon-svg>
{{
item
.
children
[
0
].
name
}}
<icon-svg
v-if=
'item.icon'
:icon-class=
"item.icon"
></icon-svg>
<span
slot=
"title"
>
{{
item
.
children
[
0
].
name
}}
</span>
</el-menu-item>
</el-menu-item>
</router-link>
</router-link>
<el-submenu
:index=
"item.name"
v-if=
"!item.noDropdown&&!item.hidden"
>
<el-submenu
:index=
"item.name"
v-if=
"!item.noDropdown&&!item.hidden"
>
<template
slot=
"title"
>
<template
slot=
"title"
>
<icon-svg
v-if=
'item.icon'
:icon-class=
"item.icon"
></icon-svg>
{{
item
.
name
}}
<icon-svg
v-if=
'item.icon'
:icon-class=
"item.icon"
></icon-svg>
<span
slot=
"title"
>
{{
item
.
name
}}
</span>
</
template
>
</
template
>
<
template
v-for=
"child in item.children"
v-if=
'!child.hidden'
>
<
template
v-for=
"child in item.children"
v-if=
'!child.hidden'
>
<sidebar-item
class=
'menu-indent'
v-if=
'child.children&&child.children.length>0'
:routes=
'[child]'
>
</sidebar-item>
<router-link
v-else
class=
"menu-indent"
:to=
"item.path+'/'+child.path"
>
<sidebar-item
class=
'nest-menu'
v-if=
'child.children&&child.children.length>0'
:routes=
'[child]'
>
</sidebar-item>
<router-link
v-else
:to=
"item.path+'/'+child.path"
>
<el-menu-item
:index=
"item.path+'/'+child.path"
>
<el-menu-item
:index=
"item.path+'/'+child.path"
>
{{
child
.
name
}}
<span
slot=
"title"
>
{{
child
.
name
}}
</span>
</el-menu-item>
</el-menu-item>
</router-link>
</router-link>
</
template
>
</
template
>
</el-submenu>
</el-submenu>
</template>
</template>
</div>
</div>
</template>
</template>
...
@@ -35,13 +42,6 @@
...
@@ -35,13 +42,6 @@
</
script
>
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.svg-icon
{
margin-right
:
15px
;
}
.hideSidebar
.menu-indent
{
display
:
block
;
text-indent
:
10px
;
}
</
style
>
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录