fe / yohobuy-frontend · Commits

Go to a project

Authored by 2586703@qq.com
Commit 52592a644b01fea58143b56c83c06662612bf7c6 1 parent fdffc240

产品调整

Inline Side-by-side
Showing 8 changed files with 52 additions and 23 deletions
... ... @@ -16,7 +16,7 @@
.iconfont {
margin: 0 4px 0 0;
vertical-align: 9%;
font-size: 22rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
}
}
}
\ No newline at end of file
... ...
.article-type-four {
padding: 0 0 5rem / $pxConvertRem 0;
padding: 0 0 8rem / $pxConvertRem 0;
background: #fff;
img {
... ...
... ... @@ -14,11 +14,10 @@ $pxConvertRem : 40;
.thumb-container {
position: relative;
font-size: 0;
padding-left: 30rem / $pxConvertRem;
padding: 20rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
background: #fff;
z-index: 10;
background: url('../img/li-bg.png') repeat-x;
background-size: auto 100%;
border-bottom: 1px solid #969696;
&.fixed{
position: fixed;
... ... @@ -39,12 +38,22 @@ $pxConvertRem : 40;
margin-right: 0;
}
&.focus {
background: url('../img/li-current-bg.png');
background-size: 100% 100%;
&.focus {
.thumb-img {
border-color: #000;
}
.arrow {
position: absolute;
width: 32rem / $pxConvertRem;
height: 19rem / $pxConvertRem;
bottom: -1px;
left: 50%;
margin: 0 0 0 -16rem / $pxConvertRem;
z-index: 12;
background: url('../img/arrow.png') no-repeat;
background-size: 100% 100%;
}
}
.thumb-img {
... ...
... ... @@ -16,34 +16,50 @@
}
.brand-list {
padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem 30rem / $pxConvertRem;
padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
li {
float: left;
margin: 0 0 0 20rem / $pxConvertRem;
border: 1px solid #e0e0e0;
width: 158rem / $pxConvertRem;
height: 120rem / $pxConvertRem;
border-left: 1px solid #e0e0e0;
a{
a {
display: block;
}
.brand-logo {
display: table-cell;
width: 128rem / $pxConvertRem;
height: 128rem / $pxConvertRem;
width: 158rem / $pxConvertRem;
height: 94rem / $pxConvertRem;
vertical-align:middle;
}
img {
display: block;
max-width: 128rem / $pxConvertRem;
max-height: 128rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
img {
display: block;
max-width: 158rem / $pxConvertRem;
max-height: 94rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
line-height: 26rem / $pxConvertRem;
font-size: 14rem / $pxConvertRem;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
}
}
li:first-child {
margin: 0;
border-left: none;
}
}
}
\ No newline at end of file
... ...
... ... @@ -6,6 +6,7 @@
<li class="thumb">
<img class="thumb-img lazy" src="{{thumb}}">
<span class="clothe-type {{type}}"></span>
<em class="arrow"></em>
</li>
{{/ list}}
</ul>
... ...
... ... @@ -3,7 +3,10 @@
<ul class="brand-list clearfix">
{{# brands}}
<li><a href="{{url}}">
<img class="lazy" src="{{thumb}}" alt="{{name}}">
<div class="brand-logo">
<img class="lazy" src="{{thumb}}" alt="{{name}}">
</div>
<p class="brand-name">{{name}}</p>
</a></li>
{{/ brands}}
</ul>
... ...