You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
5.9 KiB
265 lines
5.9 KiB
.app-wrap{
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.app-header{
|
|
height:50px;
|
|
background: #545c64;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
.logo{
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 20px;
|
|
}
|
|
.app-header-menu-wrap{
|
|
flex:1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
.app-header-menu{
|
|
height: 100%;
|
|
padding:0 16px;
|
|
color:#fff;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.el-icon{
|
|
margin-left:8px;
|
|
font-size: 12px;
|
|
}
|
|
&:hover{
|
|
background-color: #494d52;
|
|
color: #fff
|
|
}
|
|
}
|
|
}
|
|
.user{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
&>span{
|
|
display: inline-flex;
|
|
padding:5px;
|
|
background: #f4c521;
|
|
border-radius:15px;
|
|
color:#fff;
|
|
}
|
|
}
|
|
}
|
|
.app-section{
|
|
flex:1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
.btns-toolbar{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.btns{
|
|
.item{
|
|
height: 48px;
|
|
line-height: 48px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
&:hover{
|
|
background: #cccccc;
|
|
}
|
|
&.selected{
|
|
background: #e8e8e8;
|
|
position: relative;
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: #f4c521;
|
|
left:0;
|
|
top:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btns-top{
|
|
flex:1;
|
|
}
|
|
.btns-bottom{
|
|
|
|
}
|
|
}
|
|
.btns-toolbar-left{
|
|
flex-shrink: 0;
|
|
width:50px;
|
|
border-right:1px solid #dcdcdc
|
|
}
|
|
.btns-toolbar-right{
|
|
flex-shrink: 0;
|
|
width:50px;
|
|
border-left:1px solid #dcdcdc;
|
|
&.btns-toolbar{
|
|
.btns .item.selected:before{
|
|
right:0;
|
|
left:auto;
|
|
}
|
|
}
|
|
}
|
|
.section{
|
|
flex:1;
|
|
overflow: hidden;
|
|
.section-item-wrap{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
&>.title{
|
|
border-bottom:1px solid #dcdcdc;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
padding:0 0 0 10px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
display: flex;
|
|
&>.el-input{
|
|
flex:1;
|
|
margin:4px 30px 4px 10px;
|
|
}
|
|
.close{
|
|
position: absolute;
|
|
right:0;
|
|
display: inline-flex;
|
|
padding:10px;
|
|
cursor:pointer;
|
|
&:hover{
|
|
color:var(--el-color-primary)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.section-bottom{
|
|
.section-item-wrap{
|
|
&>.title >.el-input{
|
|
flex:none;
|
|
}
|
|
.calc-bottom-panel{
|
|
flex:1;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
.section-tabs.el-tabs--card{
|
|
height: 100%;
|
|
&>.el-tabs__header{
|
|
box-sizing: border-box;
|
|
z-index: 0;
|
|
margin:0;
|
|
&>.el-tabs__nav-wrap{
|
|
margin-bottom:0
|
|
}
|
|
.el-tabs__item.is-active{
|
|
position: relative;
|
|
z-index: 1;
|
|
&:before{
|
|
content: '';
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #c61429;
|
|
position: absolute;
|
|
left:0;
|
|
top:0;
|
|
z-index: 999;
|
|
}
|
|
&:after{
|
|
content: '';
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #fff;
|
|
position: absolute;
|
|
left:0;
|
|
bottom:0;
|
|
z-index: 999;
|
|
}
|
|
&:hover{
|
|
&:after{
|
|
background:#c5c5c5;
|
|
}
|
|
}
|
|
}
|
|
.el-tabs__item{
|
|
border-bottom:0;
|
|
}
|
|
.el-tabs__nav-prev{
|
|
height: 40px;
|
|
background: #c9c9c9;
|
|
.el-icon{
|
|
color:#c61429
|
|
}
|
|
}
|
|
.el-tabs__nav-next{
|
|
height: 40px;
|
|
background: #c9c9c9;
|
|
.el-icon{
|
|
color:#c61429
|
|
}
|
|
}
|
|
}
|
|
&>.el-tabs__content{
|
|
flex:1;
|
|
&>.el-tab-pane{
|
|
height: 100%;
|
|
}
|
|
.section-canvas{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.section-toolbar{
|
|
flex-shrink: 0;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
.el-button{
|
|
margin-left: 5px;
|
|
}
|
|
.section-toolbar-line{
|
|
width: 1px;
|
|
height: 16px;
|
|
background: #dcdcdc;
|
|
margin:0 5px;
|
|
}
|
|
&.section-bottom-toolbar{
|
|
justify-content: space-between;
|
|
.section-toolbar-left{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.section-toolbar-right{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.infor{
|
|
background: #000;
|
|
margin:0 5px;
|
|
color:#fff;
|
|
font-size: 12px;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
padding:3px 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.section-content{
|
|
flex:1;
|
|
background: #e0e0e0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-popper .el-divider--horizontal{
|
|
margin:5px 0;
|
|
border-color:#656668
|
|
}
|