master
parent
4e0d06ed0c
commit
806dbbec53
35 changed files with 200 additions and 40 deletions
@ -1,6 +1,6 @@ |
|||||||
import Vue from 'vue'; |
import Vue from 'vue' |
||||||
|
|
||||||
// 使用 Event Bus
|
// 使用 Event Bus
|
||||||
const bus = new Vue(); |
const bus = new Vue() |
||||||
|
|
||||||
export default bus; |
export default bus |
@ -0,0 +1,26 @@ |
|||||||
|
/** |
||||||
|
* 权限管理 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state: { |
||||||
|
btns: [], |
||||||
|
routes: [] |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
SET_BTN_AUTH: (state, btns) => { |
||||||
|
state.btns = btns |
||||||
|
}, |
||||||
|
SET_ROUTE: (state, routes) => { |
||||||
|
state.routes = routes |
||||||
|
}, |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
addBtnAuth({ state,commit },btns) { |
||||||
|
commit('SET_BTN_AUTH',btns) |
||||||
|
}, |
||||||
|
addRoutes({ state,commit },routes) { |
||||||
|
commit('SET_ROUTE',routes) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -1,9 +0,0 @@ |
|||||||
@mixin ellipsis { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
.ellipsis{ |
|
||||||
@include ellipsis(); |
|
||||||
} |
|
@ -0,0 +1,104 @@ |
|||||||
|
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色 |
||||||
|
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色 |
||||||
|
//混合代码,提取item共同样式 |
||||||
|
@mixin public { |
||||||
|
cursor: pointer; |
||||||
|
font-size: 14px; |
||||||
|
color: #333333; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
height: 20px; |
||||||
|
width: 20px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.side_tree{ |
||||||
|
width: 100%; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
i{ |
||||||
|
margin-left: 5px; |
||||||
|
font-size: 17px; |
||||||
|
} |
||||||
|
span{ |
||||||
|
margin-left: 5px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
.item { |
||||||
|
@include public; |
||||||
|
width: 100%; |
||||||
|
padding: 15px 0; |
||||||
|
background:rgba(255,255,255,1); |
||||||
|
box-shadow:1px 14px 29px 0px rgba(255,69,69,0.19); |
||||||
|
border-radius:10px; |
||||||
|
text-align: left; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.empty{ |
||||||
|
width: 25px; |
||||||
|
} |
||||||
|
.item:first{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.item1 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 23px; |
||||||
|
} |
||||||
|
.item2 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left:80px |
||||||
|
} |
||||||
|
.item3 { |
||||||
|
@include public; |
||||||
|
margin-top: 20px; |
||||||
|
margin-left:95px |
||||||
|
} |
||||||
|
.item2:hover{ |
||||||
|
color: #cb221c; |
||||||
|
} |
||||||
|
.edit{ |
||||||
|
display: inline-block; |
||||||
|
width: 17px; |
||||||
|
height: 17px; |
||||||
|
background: url(../../../assets/svg/edit.svg) 0 0/cover no-repeat; |
||||||
|
} |
||||||
|
// 使三角形旋转动画 |
||||||
|
.arrowTransform { |
||||||
|
transition: 0.4s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(0deg); |
||||||
|
} |
||||||
|
.arrowTransformReturn { |
||||||
|
transition: 0.4s; |
||||||
|
transform-origin: center; |
||||||
|
transform: rotateZ(90deg); |
||||||
|
} |
||||||
|
|
||||||
|
//复选框样式 |
||||||
|
.checkBox { |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
border-radius: 7px; |
||||||
|
margin-left: 10px; |
||||||
|
margin-right: 10px; |
||||||
|
border: 2px solid rgba(146, 120, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
//当点击复选框时候切换背景图片 |
||||||
|
.isActive { |
||||||
|
background: url('../../../assets/img/icon-yigouxuan.png'); |
||||||
|
background-size: 14px 14px; /*按比例缩放*/ |
||||||
|
} |
||||||
|
|
||||||
|
.side_icon{ |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.side_icon i{ |
||||||
|
cursor:pointer; |
||||||
|
font-size: 20px; |
||||||
|
} |
@ -0,0 +1,24 @@ |
|||||||
|
$main-color: #e80909; |
||||||
|
|
||||||
|
@mixin ellipsis { |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
@mixin mul-ellipsis($num) { |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-line-clamp: $num; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.ellipsis{ |
||||||
|
@include ellipsis(); |
||||||
|
} |
||||||
|
.mul-ellipsis2{ |
||||||
|
@include mul-ellipsis(2); |
||||||
|
} |
||||||
|
.mul-ellipsis3{ |
||||||
|
@include mul-ellipsis(3); |
||||||
|
} |
Loading…
Reference in new issue