192 lines
3.4 KiB
CSS
192 lines
3.4 KiB
CSS
*{
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* IE10+/Edge */
|
|
user-select: none; /* Standard syntax */
|
|
}
|
|
|
|
html,body, .wrap{
|
|
width: 24rem;
|
|
height: 13.5rem;
|
|
}
|
|
body::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
.wrap::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
body, .wrap, .main {
|
|
background-image: url(../images/bj.png);
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.head{
|
|
height: 1.125rem;
|
|
width: 24rem;
|
|
background-image: url(../images/top1.png) ;
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.h-nav{
|
|
width: calc((100% - 10.125rem) / 2);
|
|
height: 1.125rem;
|
|
padding-top: .625rem;
|
|
}
|
|
|
|
.h-nav-bar {
|
|
height: .75rem;
|
|
width: 2rem;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-size: .25rem;
|
|
text-align: center;
|
|
line-height: .75rem;
|
|
}
|
|
.nav-right>.h-nav-bar{
|
|
background-image: url(../images/nav3.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
}
|
|
|
|
.nav-left>.h-nav-bar{
|
|
background-image: url(../images/nav1.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
}
|
|
.head>.nav-left>.h-nav-bar-active{
|
|
background-image: url(../images/nav-2hover.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.head>.nav-right>.h-nav-bar-active{
|
|
background-image: url(../images/nav4.png);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.logo{
|
|
color: #F0F6FB ;
|
|
height: 1.125rem;
|
|
width: 10.125rem;
|
|
font-size: .2rem;
|
|
}
|
|
|
|
|
|
.nav-bars{
|
|
height: .375rem;
|
|
width: 24rem;
|
|
color: #F0F6FB;
|
|
font-size: .175rem;
|
|
}
|
|
.nav-bars > .project-select{
|
|
width: 3rem;
|
|
margin: 0 .1875rem;
|
|
justify-content: space-between;
|
|
}
|
|
.nav-bars > .project-select>.text{
|
|
width: 1.75rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.nav-bars > .project-select>.text::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
|
|
.nav-bars > .nav-bar{
|
|
margin: 0 .1875rem;
|
|
padding-left: .25rem;
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
}
|
|
|
|
.news{
|
|
background-image: url(../images/t01.svg);
|
|
}
|
|
.user{
|
|
background-image: url(../images/t02.svg);
|
|
}
|
|
.set{
|
|
background-image: url(../images/t03.svg);
|
|
}
|
|
.exit{
|
|
background-image: url(../images/t04.svg);
|
|
}
|
|
.full{
|
|
background-image: url(../images/t05.svg);
|
|
}
|
|
|
|
|
|
|
|
.flex-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.flex-column{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.flex-center{
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-start{
|
|
justify-content: flex-start;
|
|
}
|
|
.flex-end{
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.flex-between{
|
|
justify-content: space-between;
|
|
}
|
|
.flex-around{
|
|
justify-content: space-around;
|
|
}
|
|
|
|
|
|
.flex-item-start{
|
|
align-items: flex-start;
|
|
}
|
|
.flex-item-end{
|
|
align-items: flex-end;
|
|
}
|
|
.flex-item-center{
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.image-full{
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
.color1{
|
|
color: #00FFFF;
|
|
}
|
|
.color2{
|
|
color: #12CDA2;
|
|
}
|
|
.color3{
|
|
color: #FF7474;
|
|
}
|
|
.color4{
|
|
color: #FFA602;
|
|
}
|
|
.color5{
|
|
color: #E9E931;
|
|
} |