130 lines
2.5 KiB
CSS
130 lines
2.5 KiB
CSS
|
.home-content{
|
||
|
|
background-color: #f7f7f7;
|
||
|
|
padding: 40px;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.home-page{
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
border: solid gray 4px;
|
||
|
|
position: relative;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
/*align-items: center;*/
|
||
|
|
/*overflow: hidden;*/
|
||
|
|
}
|
||
|
|
.userInfo{
|
||
|
|
position: absolute;
|
||
|
|
left: 8px;
|
||
|
|
top: 8px;
|
||
|
|
}
|
||
|
|
.btn-setting{
|
||
|
|
border: solid gray 4px;
|
||
|
|
position: absolute;
|
||
|
|
top: -4px;
|
||
|
|
right: -4px;
|
||
|
|
height: 58px;
|
||
|
|
width: 58px;
|
||
|
|
}
|
||
|
|
.btn-logout{
|
||
|
|
border: solid gray 4px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: -4px;
|
||
|
|
left: -4px;
|
||
|
|
height: 58px;
|
||
|
|
width: 58px;
|
||
|
|
}
|
||
|
|
.varsion{
|
||
|
|
position: absolute;
|
||
|
|
right: 8px;
|
||
|
|
bottom: 8px;
|
||
|
|
}
|
||
|
|
.memu-content{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
/*flex: 1;*/
|
||
|
|
height:100%;
|
||
|
|
padding: 80px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
transition:all .3s ease-in-out;
|
||
|
|
}
|
||
|
|
.memu-content.sub-menu-show{
|
||
|
|
padding: 0 80px;
|
||
|
|
/*flex: 0 0 150px;*/
|
||
|
|
height:150px;
|
||
|
|
|
||
|
|
transform: scale(0.6,0.6);
|
||
|
|
}
|
||
|
|
.sub-memu-content{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: flex-start;
|
||
|
|
max-width: 820px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: auto;
|
||
|
|
|
||
|
|
/*flex: 0 0 0;*/
|
||
|
|
height:0px;
|
||
|
|
transition:height .3s ease-in-out;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.memu-content .menu-item, .sub-memu-content .menu-item{
|
||
|
|
width: 160px;
|
||
|
|
height: 160px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border: solid gray 4px;
|
||
|
|
position: relative;
|
||
|
|
box-shadow: 0px 12px 8px -8px #9E9E9E;
|
||
|
|
margin: 40px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.memu-content .menu-item.is-select{
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
.sub-memu-content .menu-item{
|
||
|
|
margin: 0px 18px;
|
||
|
|
}
|
||
|
|
.memu-content .menu-item .menu-icon, .sub-memu-content .menu-item .menu-icon{
|
||
|
|
background-size: contain;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: absolute;
|
||
|
|
top:15%;
|
||
|
|
left:25%;
|
||
|
|
height: 50%;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
.memu-content .menu-item .menu-title, .sub-memu-content .menu-item .menu-title{
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
padding: 24px 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.sub-memu-content .menu-item .menu-title{
|
||
|
|
position:static;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sub-memu-content.sub-menu-show{
|
||
|
|
/*flex: 0 0 450px;*/
|
||
|
|
height:450px;
|
||
|
|
}
|
||
|
|
.memu-content.sub-menu-show{
|
||
|
|
|
||
|
|
}
|