fe / YOHOBUYWAP · Commits

Go to a project

Authored by weiqingting
Commit 9f4ab7a8619f18a870fe8c1075eaaec70facc58f 1 parent 29fdd709

兼容990

Inline Side-by-side
Showing 6 changed files with 373 additions and 250 deletions
... ... @@ -70,7 +70,7 @@
{{! 广告}}
{{# adbanner}}
<div class="adbanner">
<a class="impo{{@index}}" href="{{url}}"><img class="lazy" data-original="{{img}}"/></a>
<a href="{{url}}"><img class="lazy" data-original="{{img}}"/></a>
</div>
{{/ adbanner}}
... ...
{{> index/floor-header}}
<div class="slide-accordion">
<div class="slide-list">
<div class="slide-accordion clearfix">
<ul>
{{#each slide}}
<li><a title="{{name}}" href="{{href}}"><img class="lazy" data-original="{{img}}"/></a></li>
{{/each}}
</ul>
</div>
</div>
... ...
var Slide = require('./yohoui/YH.slide');
var $ = require('yoho.jquery');
var $contain = $('.slide-list', '.slide-accordion');
var $contain = $('.slide-accordion');
var $item = $contain.find('li');
var $width = 650;
var $width = $item.width();
var $spn=parseInt($('.home-page').width())==1150 ? (120 + 5) : (102 + 5);
var slide;
function switchfun(to) {
$item.each(function(index) {
if (index <= to) {
$(this).stop().animate({
left: index * (120 + 5)
left: index * $spn
});
} else {
$(this).stop().animate({
left: (to) * (120 + 5) + $width + (120 + 5) * (index - to - 1)
left: (to) * $spn + $width + $spn * (index - to - 1)
});
}
});
... ...
.girls,.kids,.lifestyle{
.commodity{
.commodity-list{
/**
* 热门推荐模板样式
*/
.home-page{
//common样式
.tpl-recommend{
width: 100%;
position: relative;
a{
display: block;
img{display: block;width: 100%;height: 100%;}
}
.tpl-body{
margin-bottom:8px;
}
.tpl-nav{
float: left;
overflow: hidden;
.tpl-keywords{
margin-bottom: 8px;
}
.tpl-category{
padding: 10px 0;
}
.tpl-category{
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a{
float: left;
width: 50%;
text-align: center;
color: #000;
overflow: hidden;
}
}
}
.tpl-brands{
float: left;
overflow: hidden;
margin-left: 8px;
li{
width: 280px;
margin-top: 8px;
}
}
.tpl-types{
float: left;
overflow: hidden;
margin-top: -8px;
li{
float: left;
margin-left: 8px;
margin-top: 8px;
}
}
.tpl-products{
overflow: hidden;
margin-left:-10px;
li{
float: left;
margin-left:10px;
}
}
//990样式
.tpl-nav{
width: 158px;
.keywords0,.keywords1,.keywords2{
margin-bottom:8px;
height: 65px;
}
.keywords2{
margin-bottom:0px;
}
.tpl-category{
a{
height: 32px;
line-height: 32px;
font-size: 12px;
}
}
}
.tpl-brands{
width: 324px;
li a{
height: 212px;
}
}
.tpl-types{
width: 498px;
li a{
width: 158px;
height: 212px;
}
}
.tpl-products{
li a{
width: 190px;
height: 254px;
}
}
}
}
/**
* 单品模板样式
*/
.home-page{
.singlehot{
a{
display: block;
width: 280px;
height: 465px;
position: relative;
img{display: block;width: 100%;height: 100%;}
}
overflow: hidden;
margin-left:-8px;
li{
float: left;
margin-left:8px;
margin-bottom:8px;
}
}
.singlehot{
li a{
width: 158px;
height: 212px;
}
.impo1,.impo9{
width: 323px;
}
}
.adbanner{
a{
display: block;
img{display: block;width: 100%;height: 100%;}
}
a{
height: 129px;
}
}
}
/**
* 新品上架模板样式
*/
.home-page{
.commodity{
a{
display: block;
img{display: block;width: 100%;height: 100%;}
}
.commodity-list{
margin-left: -10px;
li{
float: left;
margin-left: 10px;
}
i{
position: absolute;
... ... @@ -22,64 +171,244 @@
}
i.top{
position: absolute;
width: 60px;
height: 60px;
top: 10px;
right: 10px;
line-height: 60px;
background-color: rgb(255,87,92);
font-size: 20px;
color: #fff;
border-radius: 30px;
}
.commodity-img{
img{
width: 280px;
height: 374px;
position: relative;
}
p.commodity-name{
font-size: 12px;
color: #000;
text-align: center;
margin-top: 14px;
line-height: 18px;
}
p.commodity-price{
position: relative;
margin: 3px 0 0 0;
text-align: center;
line-height: 20px;
color: #000;
span{
display: inline-block;
font-size: 12px;
}
}
}
}
.boys{
.commodity-list i{
position: absolute;
.commodity-brands{
margin-left: -8px;
a{
float: left;
margin-left: 8px;
display: block;
}
}
.loading{
position: relative;
width: 100%;
text-align: center;
font-size: 16px;
top: -20px;
}
}
//990
.commodity{
.commodity-list{
a{
height: 400px;
}
.commodity-img{
width: 240px;
height: 320px;
}
i.top{
height: 52px;
width: 52px;
line-height: 52px;
font-size: 14px;
}
}
.commodity-brands{
a{
width: 158px;
height: 74px;
}
}
}
}
.home-page{
.slide-accordion{
overflow: hidden;
height: 342px;
position: relative;
a{
display: block;
width: 64px;
height: 20px;
img{display: block;width: 100%;height: 100%;}
}
.tpl-keywords{
ul{
position: absolute;
left: -5px;
}
li{
position: absolute;
a{
width: 558px;
height: 342px;
border-left: 5px solid #fff;
}
}
}
}
.boys{
.tpl-nav{
.keywords0{
img{
height: 152px;
margin-bottom: 8px!important;
height: 130px!important;
}
.keywords1{
margin-bottom:0px!important;
height: 74px!important;
}
}
.tpl-brands{
margin-top:-8px!important;
}
.commodity{
.commodity-list{
a{
height: 360px!important;
}
.commodity-img{
width: 188px!important;
height: 255px!important;
}
i.top{
height: 52px!important;
width: 52px!important;
line-height: 52px!important;
font-size: 14px!important;
}
}
}
}
//1150样式
@media screen and (min-width: 1150px) {
.home-page{
.tpl-recommend{
.tpl-nav{
width: 185px;
.keywords0{
margin-bottom: 10px;
height: 152px;
}
.keywords1{
img{
height: 86px;
}
.tpl-category{
a{
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands{
width: 378px;
li a{
height: 248px;
}
}
.tpl-types{
width: 579px;
li a{
width: 185px;
height: 248px;
}
}
.tpl-products{
li a{
width: 222px;
height: 298px;
}
}
}
.singlehot{
li a{
width: 185px;
height: 284px;
}
.impo1,.impo9{
width: 378px;
}
}
.adbanner{
margin-top:12px;
a{
height: 150px;
}
}
.commodity{
.commodity-list{
a{
height: 465px;
}
.commodity-img{
height: 374px;
width: 280px;
}
i.top{
height: 60px;
width: 60px;
line-height: 60px;
font-size: 20px;
}
}
.commodity-brands{
a{
width: 185px;
height: 86px;
}
}
}
.slide-accordion{
height: 400px;
li{
a{
width: 650px;
height: 400px;
}
}
}
}
}
.girls{
.tpl-keywords{
img{
height: 76px !important;
.boys{
.commodity{
.commodity-list{
a{
height: 408px!important;
}
.keywords0{
margin-bottom: 10px;
.commodity-img{
height: 298px!important;
width: 222px!important;
}
i.top{
height: 60px!important;
width: 60px!important;
line-height: 60px!important;
font-size: 20px!important;
}
.keywords1{
margin-bottom: 10px;
}
}
.tpl-brands img{
height: 502px !important;
width: 100% !important;
}
}
\ No newline at end of file
@import "_slide-accordion";
\ No newline at end of file
... ...
... ... @@ -510,185 +510,7 @@
}
}
.tpl-recommend{
width: 1150px;
overflow: hidden;
a{
display: block;
background-color: #f8f8f8;
img{display: block;width: 100%;}
}
.tpl-nav{
float: left;
width: 185px;
height: 512px;
overflow: hidden;
.tpl-keywords{
margin-bottom: 8px;
}
.tpl-category{
height: 228px;
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a{
float: left;
width: 50%;
height: 38px;
line-height: 38px;
text-align: center;
color: #000;
font-size: 14px;
overflow: hidden;
}
}
}
.tpl-brands{
float: left;
margin-left: 8px;
width: 378px;
height: 512px;
overflow: hidden;
li{
margin-bottom: 8px;
img{
height: 248px;
width: 100%;
}
}
}
.tpl-types{
float: left;
width: 579px;
height: 512px;
overflow: hidden;
li{
float: left;
margin-left: 8px;
margin-bottom: 8px;
img{
width: 185px;
height:248px;
}
}
}
.tpl-products{
height: 298px;
overflow: hidden;
margin-left:-10px;
li{
float: left;
margin-left:10px;
img{
width: 222px;
height: 298px;
}
}
}
}
.commodity{
position: relative;
width: 1150px;
margin-bottom:80px;
.commodity-list{
margin-left: -10px;
li{
float: left;
margin-left: 10px;
a{
display: block;
height: 408px;
width: 222px;
}
.commodity-img{
position: relative;
img{
display: block;
height: 298px;
width: 222px;
}
}
p.commodity-name{
font-size: 12px;
color: #000;
text-align: center;
margin-top: 14px;
line-height: 18px;
}
p.commodity-price{
position: relative;
margin: 3px 0 0 0;
text-align: center;
line-height: 20px;
color: #000;
span{
display: inline-block;
font-size: 12px;
}
}
}
}
.commodity-brands{
margin-left: -8px;
a{
float: left;
margin-left: 8px;
width: 185px;
height: 86px;
display: block;
img{
display: block;
width: 185px;
height: 86px;
}
}
}
.loading{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 20px;
}
}
.singlehot{
width: 1150px;
height: 584px;
overflow: hidden;
ul{
margin-left:-8px;
}
li{
float: left;
margin-left:8px;
margin-bottom:8px;
}
a{
display: block;
background-color: #f8f8f8;
img{
display: block;
width: 185px;
height: 284px;
}
}
.impo1 img,.impo9 img{
width: 378px;
}
}
.adbanner{
width: 100%;
height: 150px;
margin-top:12px;
img{
display: block;
width: 1150px;
height: 150px;
}
}
.floor-header {
position: relative;
... ... @@ -734,5 +556,4 @@
}
@import "_index-pliffy", "index1150";
... ...
.slide-accordion{
.slide-list{
width: 1150px;
height: 400px;
overflow: hidden;
position: relative;
}
ul{
position: absolute;
left: -5px;
}
li{
position: absolute;
width: 650px;
height: 400px;
display: block;
border-left: 5px solid #fff;
img{
display: block;
width: 650px;
height: 400px;
}
}
}