Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
FLIPPED-AURORA
gin-vue-admin
提交
0c759415
G
gin-vue-admin
项目概览
FLIPPED-AURORA
/
gin-vue-admin
大约 1 年 前同步成功
通知
337
Star
18155
Fork
5506
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0c759415
编写于
2月 10, 2020
作者:
J
jinlan.du
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
导航
上级
e968db3b
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
168 addition
and
7 deletion
+168
-7
QMPlusVuePage/src/style/main.scss
QMPlusVuePage/src/style/main.scss
+107
-1
QMPlusVuePage/src/view/layout/aside/index.vue
QMPlusVuePage/src/view/layout/aside/index.vue
+10
-0
QMPlusVuePage/src/view/layout/index.vue
QMPlusVuePage/src/view/layout/index.vue
+51
-6
未找到文件。
QMPlusVuePage/src/style/main.scss
浏览文件 @
0c759415
...
...
@@ -574,6 +574,7 @@ li {
// layout
.layout-cont
{
.main-cont
{
position
:
relative
;
&
.el-main
{
background-color
:
#ecf0f5
;
padding
:
0
;
...
...
@@ -714,3 +715,108 @@ li {
width
:
80%
;
}
}
// 导航
#app
{
.el-container
{
position
:
relative
;
height
:
100%
;
width
:
100%
;
}
.el-container.mobile.openside
{
position
:
fixed
;
top
:
0
;
}
.hideside
{
.aside
{
width
:
54px
!
important
;
}
}
.el-aside
{
-webkit-transition
:
width
.2s
;
transition
:
width
.2s
;
width
:
220px
;
background-color
:
#304156
;
height
:
100%
;
position
:
fixed
;
font-size
:
0
;
top
:
0
;
bottom
:
0
;
left
:
0
;
z-index
:
1001
;
overflow
:
hidden
;
}
.mobile.hideside
{
.el-aside
{
// pointer-events: none;
-webkit-transition-duration
:
.2s
;
transition-duration
:
.2s
;
-webkit-transform
:
translate3d
(
-210px
,
0
,
0
);
transform
:
translate3d
(
-220px
,
0
,
0
);
}
}
.mobile
{
.el-aside
{
-webkit-transition
:
-
webkit-transform
.28s
;
transition
:
-
webkit-transform
.28s
;
transition
:
transform
.28s
;
transition
:
transform
.28s
,-
webkit-transform
.28s
;
width
:
210px
!
important
}
}
.el-container
{
position
:
relative
;
height
:
100%
;
width
:
100%
;
.el-aside
{
// transition: none;
.aside
{
background
:
#000
;
.el-menu
{
border-right
:
none
;
}
}
}
}
.main-cont.el-main
{
min-height
:
100%
;
-webkit-transition
:
margin-left
.28s
;
transition
:
margin-left
.28s
;
margin-left
:
220px
;
position
:
relative
;
}
.hideside
{
.main-cont.el-main
{
margin-left
:
54px
;
}
}
.mobile
{
.main-cont.el-main
{
margin-left
:
0px
;
}
}
.openside.mobile
{
.shadowBg
{
background
:
#000
;
opacity
:
.3
;
width
:
100%
;
top
:
0
;
height
:
100%
;
position
:
absolute
;
z-index
:
999
;
left
:
0
;
}
}
}
// 导航*****
\ No newline at end of file
QMPlusVuePage/src/view/layout/aside/index.vue
浏览文件 @
0c759415
...
...
@@ -38,18 +38,28 @@ export default {
},
computed
:
{
...
mapGetters
(
'
router
'
,
[
'
asyncRouters
'
])
},
components
:
{
AsideComponent
},
created
()
{
this
.
active
=
this
.
$route
.
name
let
screenWidth
=
document
.
body
.
clientWidth
if
(
screenWidth
<
1000
){
this
.
isCollapse
=
!
this
.
isCollapse
}
this
.
$bus
.
on
(
'
totalCollapse
'
,
()
=>
{
this
.
isCollapse
=
!
this
.
isCollapse
})
this
.
$bus
.
on
(
'
collapse
'
,
(
item
)
=>
{
this
.
isCollapse
=
item
})
},
beforeDestroy
()
{
this
.
$bus
.
off
(
'
totalCollapse
'
)
this
.
$bus
.
off
(
'
collapse
'
)
}
}
</
script
>
...
...
QMPlusVuePage/src/view/layout/index.vue
浏览文件 @
0c759415
<
template
>
<el-container
class=
"layout-cont"
>
<el-container>
<el-container
class=
"layout-cont"
>
<el-container
:class=
"[isSider?'openside':'hideside',isMobile ? 'mobile': '']"
>
<el-row
:class=
"[isShadowBg?'shadowBg':'']"
@
click.native=
"changeShadow()"
></el-row>
<el-aside
class=
"main-cont main-left"
>
<Aside
class=
"aside"
/>
</el-aside>
...
...
@@ -56,21 +57,42 @@ export default {
name
:
'
Layout
'
,
data
()
{
return
{
isCollapse
:
false
isCollapse
:
false
,
isSider
:
true
,
isMobile
:
false
,
isShadowBg
:
false
}
},
components
:
{
Aside
},
created
(){
let
screenWidth
=
document
.
body
.
clientWidth
if
(
screenWidth
<
1000
){
this
.
isMobile
=
true
this
.
isSider
=
false
this
.
isCollapse
=
!
this
.
isCollapse
}
else
{
this
.
isMobile
=
false
}
},
methods
:
{
...
mapActions
(
'
user
'
,
[
'
LoginOut
'
]),
totalCollapse
()
{
this
.
isCollapse
=
!
this
.
isCollapse
this
.
isSider
=
!
this
.
isCollapse
this
.
isShadowBg
=
!
this
.
isCollapse
this
.
$bus
.
emit
(
'
totalCollapse
'
)
},
toPerson
()
{
this
.
$router
.
push
({
name
:
'
person
'
})
},
changeShadow
(){
this
.
isShadowBg
=
!
this
.
isShadowBg
this
.
isSider
=
!!
this
.
isCollapse
this
.
totalCollapse
()
}
},
computed
:
{
...
mapGetters
(
'
user
'
,
[
'
userInfo
'
]),
...
...
@@ -80,6 +102,29 @@ export default {
matched
()
{
return
this
.
$route
.
matched
}
},
mounted
()
{
window
.
onresize
=
()
=>
{
return
(()
=>
{
let
screenWidth
=
document
.
body
.
clientWidth
if
(
!
this
.
screenWidth
&&
this
.
isSider
){
if
(
screenWidth
<
1000
){
this
.
isMobile
=
true
this
.
isSider
=
false
this
.
isCollapse
=
true
this
.
$bus
.
emit
(
'
collapse
'
,
this
.
isCollapse
)
}
}
else
{
if
(
screenWidth
<
1000
){
this
.
isMobile
=
true
this
.
isSider
=
false
this
.
isCollapse
=
true
}
else
{
this
.
isMobile
=
false
}
}
})()
}
}
}
</
script
>
...
...
@@ -152,7 +197,7 @@ $mainHight: 100vh;
}
.aside
{
overflow
:
auto
;
background
:
#fff
;
//
background: #fff;
&
::-webkit-scrollbar
{
display
:
none
;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录