ttk-app-core
Version:
enterprise develop framework
271 lines (269 loc) • 8.21 kB
text/less
.ttk-edf-app-dashboard-workplace{
width: 100%;
height: 100%;
overflow: auto;
&-header{
width: 100%;
height: auto;
overflow: hidden;
display: flex;
float: left;
padding: 16px 32px 0 32px;
background: #fff;
&-left{
flex: 1;
height: auto;
min-height: 80px;
overflow: hidden;
display: flex;
&-logo{
width: 72px;
height: 72px;
overflow: hidden;
img{
width: 72px;
height: 72px;
border: none;
border-radius: 72px;
}
}
&-detail {
flex: 1;
height: auto;
overflow: hidden;
padding-left: 24px;
&-top{
width: 100%;
height: 28px;
margin-bottom: 12px;
float: left;
font-size: 20px;
line-height: 28px;
}
&-bottom {
width: 100%;
height: auto;
overflow: hidden;
line-height: 22px;
font-size: 14px;
color: rgba(0,0,0,.45);
}
}
}
&-right{
width: 315px;
height: auto;
overflow: hidden;
box-sizing: border-box;
padding: 0 0 16px 44px;
display: flex;
&-item{
display: inline-block;
padding: 0 16px;
height: 70px;
font-size: 12px;
text-align: center;
position: relative;
padding-top: 7px;
&:last-child::after{
display: none;
}
&::after{
content: '';
display: inline-block;
width: 1px;
height: 50px;
position: absolute;
right: 0;
top: 10px;
background: #eee;
}
span{
margin-bottom: 12px;
color: rgba(0,0,0,.45);
}
b{
font-size: 20px;
}
}
}
}
&-main{
width: 100%;
height: auto;
overflow: hidden;
float: left;
display: flex;
margin-top: 10px;
&-left{
height: auto;
flex: 16;
overflow: hidden;
}
&-project-list{
width: 100%;
height: auto;
overflow: hidden;
}
&-project{
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
.ant-card-body{
display: block;
}
.project-list-item{
width: 33.333%;
height: 150px;
overflow: hidden;
float: left;
box-sizing: border-box;
border: 1px solid #eee;
padding: 24px;
&:hover{
box-shadow: 0 0 5px #ccc;
}
&-title{
height: 24px;
width: 100%;
line-height: 24px;
margin-bottom: 8px;
display: flex;
}
&-logo{
height: 24px;
width: 24px;
border-radius: 24px;
margin-right: 12px;
overflow: hidden;
img{
width: 100%;
height: 100%;
vertical-align: top;
}
}
&-name{
flex: 1;
line-height: 24px;
font-size: 16px;
}
&-main{
color: #999;
height:44px;
overflow: hidden;
font-size: 14px;
line-height: 22px;
margin-bottom: 8px;
}
&-footer{
width: 100%;
height: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
}
}
}
&-active{
padding: 0 24px;
}
.active-list-item{
width: 100%;
height: 80px;
overflow: hidden;
padding: 16px 0;
float: left;
display: flex;
flex-direction: row ;
border-bottom: 1px solid #e8e8e8;
.active-list-item-left{
width: 32px;
height: 32px;
border-radius: 32px;
margin-right: 16px;
overflow: hidden;
img{
width: 100%;
height: 100%;
vertical-align: top;
}
}
.active-list-item-right {
flex: 1;
&-top{
width: 100%;
line-height: 22px;
font-size: 14px;
color: rgba(0,0,0,.65);
margin-bottom: 4px;
}
&-bottom {
width: 100%;
line-height: 22px;
color: rgba(0,0,0,.25);
}
}
}
&-right {
height: auto;
flex: 8;
overflow: hidden;
margin-left: 10px;
&>div{
margin-bottom: 10px;
}
&-quick-nav{
width: 100%;
height: auto;
overflow: hidden;
.ant-card-body{
display: block;
line-height: 30px;
}
.quick-nav-item{
display: inline-block;
width: 25%;
text-align: center;
height: 20px;
line-height: 20px;
}
}
&-team{
width: 100%;
height: auto;
overflow: hidden;
.ant-card-body{
display: block;
line-height: 30px;
.team-item-list{
width: 50%;
height: 48px;
box-sizing: border-box;
padding: 0 24px;
float: left;
line-height: 48px;
display: flex;
align-items: center;
flex-direction: row;
&-logo{
width: 24px;
height: 24px;
border-radius: 24px;
overflow: hidden;
img{
width: 100%;
height: 100%;
vertical-align: top;
}
}
&-name{
flex: 1;
margin-left: 12px;
}
}
}
}
}
}
}