|
...
|
...
|
@@ -5,45 +5,87 @@ |
|
|
|
right: 100rem / $pxConvertRem;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
padding: 0 (30rem / $pxConvertRem);
|
|
|
|
z-index: 1;
|
|
|
|
ul{
|
|
|
|
background: #f0f0f0;
|
|
|
|
}
|
|
|
|
li {
|
|
|
|
position: relative;
|
|
|
|
height: 110rem / $pxConvertRem;
|
|
|
|
line-height: 110rem / $pxConvertRem;
|
|
|
|
height: 128rem / $pxConvertRem;
|
|
|
|
line-height: 128rem / $pxConvertRem;
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
background: #fff;
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
height: 100%;
|
|
|
|
padding-left: 48rem / $pxConvertRem;
|
|
|
|
padding-left: 110rem / $pxConvertRem;
|
|
|
|
color: #444;
|
|
|
|
font-size: 34rem / $pxConvertRem;
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
font-size: 24rem / $pxConvertRem;
|
|
|
|
|
|
|
|
}
|
|
|
|
.nav-point {
|
|
|
|
.nav-icon,.nav-img{
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
color: #f0f0f0;
|
|
|
|
font-size: 18rem / $pxConvertRem;
|
|
|
|
height: 100%;
|
|
|
|
width: 60rem / $pxConvertRem;
|
|
|
|
height: 60rem / $pxConvertRem;
|
|
|
|
top: 50%;
|
|
|
|
margin-top: -30rem / $pxConvertRem;
|
|
|
|
left: 24rem / $pxConvertRem;
|
|
|
|
}
|
|
|
|
.enter-btn {
|
|
|
|
.enter-subnav {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
right: 30rem/ $pxConvertRem;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
font-size: 32rem / $pxConvertRem;
|
|
|
|
color: #b2b2b2;
|
|
|
|
font-size: 36rem / $pxConvertRem;
|
|
|
|
color: #b0b0b0;
|
|
|
|
font-weight: lighter;
|
|
|
|
}
|
|
|
|
em {
|
|
|
|
margin-right: 20rem / $pxConvertRem;
|
|
|
|
margin-right: 10rem / $pxConvertRem;
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 34rem / $pxConvertRem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li.current {
|
|
|
|
.nav-point {
|
|
|
|
color: #444;
|
|
|
|
li.boys{
|
|
|
|
i{
|
|
|
|
background: image-url('side-nav/boys.png') no-repeat left center;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li.girls{
|
|
|
|
i{
|
|
|
|
background: image-url('side-nav/girls.png') no-repeat left center;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li.kids{
|
|
|
|
i{
|
|
|
|
background: image-url('side-nav/kids.png') no-repeat left center;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li.life{
|
|
|
|
i{
|
|
|
|
background: image-url('side-nav/life.png') no-repeat left center;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li.new{
|
|
|
|
margin: 19rem / $pxConvertRem 0 0;
|
|
|
|
border-top: 1px solid #e0e0e0;
|
|
|
|
a{
|
|
|
|
|
|
|
|
}
|
|
|
|
i{
|
|
|
|
background: image-url('side-nav/new.png') no-repeat left center;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li.guang{
|
|
|
|
i{
|
|
|
|
background: image-url('side-nav/guang.png') no-repeat left center;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -53,18 +95,24 @@ |
|
|
|
right: 100rem / $pxConvertRem;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background: #fff;
|
|
|
|
background: #fff !important;
|
|
|
|
z-index: 2;
|
|
|
|
transform: translate3d(100%, 0, 0);
|
|
|
|
transition: transform .3s ease-out;
|
|
|
|
li {
|
|
|
|
height: 109rem / $pxConvertRem;
|
|
|
|
line-height: 109rem / $pxConvertRem;
|
|
|
|
border: none;
|
|
|
|
a {
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
display: -webkit-flex;
|
|
|
|
margin: 0 (30rem / $pxConvertRem) 0 (112rem / $pxConvertRem);
|
|
|
|
padding-left: 0;
|
|
|
|
margin: 0 0 0 (30rem / $pxConvertRem);
|
|
|
|
padding-left: 50rem / $pxConvertRem;
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
align-items: center;
|
|
|
|
font-size: 36rem / $pxConvertRem;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
/* img{
|
|
|
|
position: absolute;
|
|
...
|
...
|
@@ -75,23 +123,34 @@ |
|
|
|
margin-top: -25rem / $pxConvertRem;
|
|
|
|
border: none;
|
|
|
|
} */
|
|
|
|
img {
|
|
|
|
max-width: 50rem / $pxConvertRem;
|
|
|
|
max-height: 50rem / $pxConvertRem;
|
|
|
|
margin-left: -70rem / $pxConvertRem;
|
|
|
|
margin-right: 16rem / $pxConvertRem;
|
|
|
|
.nav-point{
|
|
|
|
position: absolute;
|
|
|
|
left: 0rem / $pxConvertRem;
|
|
|
|
font-size: 16rem / $pxConvertRem;
|
|
|
|
color: #f0f0f0;
|
|
|
|
}
|
|
|
|
em {
|
|
|
|
font-weight: normal;
|
|
|
|
font-size: 36rem / $pxConvertRem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li:hover{
|
|
|
|
.nav-point{
|
|
|
|
color: #3e3e3e;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
li:first-child {
|
|
|
|
height: 80rem / $pxConvertRem;
|
|
|
|
line-height: 80rem / $pxConvertRem;
|
|
|
|
height: 88rem / $pxConvertRem;
|
|
|
|
line-height: 88rem / $pxConvertRem;
|
|
|
|
background: #3e3e3e;
|
|
|
|
a {
|
|
|
|
color: #fff;
|
|
|
|
border-bottom: none;
|
|
|
|
padding-left: 110rem / $pxConvertRem;
|
|
|
|
}
|
|
|
|
.nav-back{
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
...
|
...
|
|
