Authored by 阿达

sale banner 抖动问题fix

... ... @@ -3,20 +3,10 @@
<div class="slide-wrapper">
<ul>
{{# list}}
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{href}}" target= "_blank">
{{#if @first}}
<img src="{{image img 1150 450}}" style="height: 450px;width: 1150px">
{{^}}
<img class="lazy" data-original="{{image img 1150 450}}" style="height: 450px;width: 1150px" alt="">
{{/if}}
</a>
{{# tips}}
<div class="slide-tips">
<div class="g-mark"></div>
<p>{{.}}</p>
</div>
{{/ tips}}
<li class="banner-img" style="background: {{bgColor}} url({{image img 1920 450}}) no-repeat top center;">
{{#if href}}
<a href="{{href}}" target= "_blank"></a>
{{/if}}
</li>
{{/ list}}
</ul>
... ...
... ... @@ -9,45 +9,44 @@
.sale-page {
margin-top: 10px;
.slide-switch {
display: block;
.slide-container {
position: relative;
height: 450px;
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
opacity: 0.55;
ul {
width: 100%;
height: 100%;
position: relative;
}
&.prev {
left: 50%;
margin-left: -575px;
}
li {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
&.next {
right: 50%;
margin-right: -575px;
}
li > a {
width: 100%;
height: 100%;
display: block;
}
&:hover {
opacity: 0.9;
}
.iconfont {
font-size: 32px;
color: #59585a;
}
.slide-wrapper {
height: 100%;
}
}
.slide-container {
position: relative;
height: 450px;
.slide-switch {
position: relative;
width: 1150px;
left: 50%;
margin-left: -575px;
top: -225px;
display: block;
}
}
/*
... ...