133 行
2.0 KiB
CSS
可执行文件
133 行
2.0 KiB
CSS
可执行文件
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body,
|
|
html {
|
|
min-width: 1024px;
|
|
}
|
|
.box{
|
|
display: flex;
|
|
}
|
|
.left {
|
|
width: 160px;
|
|
height: 100vh;
|
|
background: #232b42;
|
|
overflow-y: auto;
|
|
}
|
|
.left_logo{
|
|
width: 100%;
|
|
height: 65px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;;
|
|
padding: 0 30px;
|
|
}
|
|
.left_logo>img{
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 20px;
|
|
}
|
|
.left_logo>span{
|
|
font-size: 16px;
|
|
color: white;
|
|
}
|
|
.left_item{
|
|
width: 90%;
|
|
height: 45px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
margin: auto;
|
|
border-radius: 4px;
|
|
}
|
|
.left_item:hover{
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
.left_item>img{
|
|
display: block;
|
|
width: 25px;
|
|
height: 27px;
|
|
margin-right: 20px;
|
|
}
|
|
.left_item>span{
|
|
font-size: 14px;
|
|
color: white;
|
|
}
|
|
.item_next{
|
|
width: 90%;
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
margin: auto;
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255,0.1);
|
|
display: none;
|
|
}
|
|
.in_inner{
|
|
width: 100%;
|
|
display: block;
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
color: white;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 33px;
|
|
}
|
|
.in_inner:hover{
|
|
color: #eb4a57;
|
|
}
|
|
.right{
|
|
width: calc(100% - 160px);
|
|
height: 100vh;
|
|
}
|
|
.right_title{
|
|
width: 100%;
|
|
height: 65px;
|
|
background: #232b42;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.right_title_nickname{
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 0 20px;
|
|
}
|
|
.right_title_nickname>img{
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
.right_title_nickname>span{
|
|
color: white;
|
|
font-size: 14px;
|
|
}
|
|
.right_title_quit{
|
|
width: 95px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-left: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
.right_title_quit:hover{
|
|
background: #232b42;
|
|
}
|
|
.right_title_quit>img{
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.right_content{
|
|
width: 100%;
|
|
height: calc(100vh - 65px);
|
|
overflow-y: auto;
|
|
}
|