|
...
|
...
|
@@ -12,61 +12,48 @@ $pxConvertRem : 40; |
|
|
|
}
|
|
|
|
|
|
|
|
.thumb-container {
|
|
|
|
position: relative;
|
|
|
|
font-size: 0;
|
|
|
|
padding-left: 30rem / $pxConvertRem;
|
|
|
|
padding-bottom: 28rem / $pxConvertRem;
|
|
|
|
background: #fff;
|
|
|
|
z-index: 10;
|
|
|
|
border-bottom: 2px solid #efefef;
|
|
|
|
background: url('../img/li-bg.png') repeat-x;
|
|
|
|
background-size: auto 100%;
|
|
|
|
|
|
|
|
&.fixed{
|
|
|
|
position: fixed;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.thumb {
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
|
|
margin-right: 22rem / $pxConvertRem;
|
|
|
|
border: 1px solid transparent;
|
|
|
|
padding-bottom: 28rem / $pxConvertRem;
|
|
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.focus {
|
|
|
|
border-color: #000;
|
|
|
|
.arrow {
|
|
|
|
display: block;
|
|
|
|
background: url('../img/li-current-bg.png');
|
|
|
|
background-size: 100% 100%;
|
|
|
|
.thumb-img {
|
|
|
|
border-color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.thumb-img {
|
|
|
|
height: 134rem / $pxConvertRem;
|
|
|
|
width: 96rem / $pxConvertRem;
|
|
|
|
border: 1px solid transparent;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.arrow {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
top: 55px;
|
|
|
|
left: 28rem / $pxConvertRem;
|
|
|
|
|
|
|
|
em {
|
|
|
|
font-style:normal;
|
|
|
|
font-size:36rem / $pxConvertRem;
|
|
|
|
position:absolute;
|
|
|
|
left:0;
|
|
|
|
top:39px;
|
|
|
|
color:#e0e0e0;
|
|
|
|
}
|
|
|
|
|
|
|
|
span {
|
|
|
|
font-style:normal;
|
|
|
|
font-size:36rem / $pxConvertRem;
|
|
|
|
position:absolute;
|
|
|
|
left:0;
|
|
|
|
top:40px;
|
|
|
|
color:white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.prod-list {
|
|
...
|
...
|
@@ -76,35 +63,35 @@ $pxConvertRem : 40; |
|
|
|
.clothe-type {
|
|
|
|
position: absolute;
|
|
|
|
right: 6rem / $pxConvertRem;
|
|
|
|
bottom: 6rem / $pxConvertRem;
|
|
|
|
bottom: 34rem / $pxConvertRem;
|
|
|
|
background: url('../img/clothes-type-s6453a814c2.png') no-repeat;
|
|
|
|
width: 15px;
|
|
|
|
height: 15px;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
|
|
&.bag {
|
|
|
|
background-position: 0 0;
|
|
|
|
}
|
|
|
|
&.cloth {
|
|
|
|
background-position: 0 -47px * (15/47);
|
|
|
|
background-position: 0 -47px * (20/47);
|
|
|
|
}
|
|
|
|
&.dress {
|
|
|
|
background-position: 0 -94px * (15/47);
|
|
|
|
background-position: 0 -94px * (20/47);
|
|
|
|
}
|
|
|
|
&.headset {
|
|
|
|
background-position: 0 -141px * (15/47);
|
|
|
|
background-position: 0 -141px * (20/47);
|
|
|
|
}
|
|
|
|
&.lamp {
|
|
|
|
background-position: 0 -188px * (15/47);
|
|
|
|
background-position: 0 -188px * (20/47);
|
|
|
|
}
|
|
|
|
&.pent {
|
|
|
|
background-position: 0 -233px * (15/47);
|
|
|
|
background-position: 0 -233px * (20/47);
|
|
|
|
}
|
|
|
|
&.shoe {
|
|
|
|
background-position: 0 -280px * (15/47);
|
|
|
|
background-position: 0 -280px * (20/47);
|
|
|
|
}
|
|
|
|
&.watch {
|
|
|
|
background-position: 0 -327px * (15/47);
|
|
|
|
background-position: 0 -327px * (20/47);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
