wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by weiqingting
Commit 095f28244e07a49ddea5363c315a856b14d1e75e 1 parent 28dcaf45

990 和1150 切换

Inline Side-by-side
Showing 2 changed files with 261 additions and 238 deletions
... ... @@ -30,7 +30,7 @@ slide = new Slide({
loop: false,
auto: false,
timeout: 2,
index: 3
index: 1
});
slide.on('change', function(data) {
... ...
... ... @@ -99,6 +99,51 @@
margin-left:10px;
}
}
.tpl-nav{
width: 185px;
.keywords0,.keywords1,.keywords2{
margin-bottom:10px;
height: 76px;
}
.keywords2{
margin-bottom:0px;
}
.tpl-category{
height: 228px;
a{
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands{
width: 378px;
height: 504px;
li a{
height: 248px;
}
}
.tpl-types{
width: 579px;
li a{
width: 185px;
height: 248px;
}
}
.tpl-products{
li a{
width: 222px;
height: 298px;
}
}
}
}
.min-screen .home-page .tpl-recommend{
//990样式
.tpl-nav{
... ... @@ -142,13 +187,8 @@
height: 254px;
}
}
}
}
/**
* 单品模板样式
*/
... ... @@ -161,15 +201,7 @@
margin-bottom:8px;
}
}
.singlehot{
li a{
width: 158px;
height: 212px;
}
.impo1,.impo9{
width: 323px;
}
}
.floor-ad{
a{
display: block;
... ... @@ -183,19 +215,64 @@
margin-right:-10px;
width: inherit;
.good-info{
margin-bottom:0px;
}
.good-detail-text{
text-align: center;
}
}
.singlehot{
li a{
width: 185px;
height: 248px;
}
.impo1,.impo9{
width: 378px;
}
}
.goods-container{
.good-info{
width: 280px;
height: 485px;
.good-detail-img{
height: 374px;
}
}
}
.adbanner{
margin-top:12px;
a{
height: 150px;
}
}
}
.min-screen .home-page{
.singlehot{
li a{
width: 158px;
height: 212px;
}
.impo1,.impo9{
width: 323px;
}
}
.goods-container{
.good-info{
width: 240px;
height: 412px;
margin-bottom:0px;
.good-detail-img{
height: 320px;
}
}
.good-detail-text{
text-align: center;
}
}
}
/*
* 人气单品
*/
.home-page{
.commodity{
.commodity-list{
... ... @@ -274,10 +351,35 @@
text-align: center;
}
}
}
//990
//1150
.commodity{
.commodity-list{
a{
height: 465px;
width: 280px;
}
.commodity-img{
height: 374px;
}
i.top{
height: 60px;
width: 60px;
line-height: 60px;
font-size: 20px;
}
}
.commodity-brands{
a{
width: 185px;
height: 86px;
}
}
}
}
//990
.min-screen .home-page{
.commodity{
.commodity-list{
a{
... ... @@ -303,11 +405,13 @@
}
}
/*
* 手风琴
*/
.home-page{
.slide-accordion{
overflow: hidden;
height: 342px;
position: relative;
a{
display: block;
... ... @@ -334,100 +438,7 @@
}
}
}
}
.boys{
.tpl-nav{
.keywords0{
margin-bottom: 8px!important;
height: 130px!important;
}
.keywords1{
margin-bottom:0px!important;
height: 74px!important;
}
}
.tpl-brands{
margin-top:-8px!important;
}
}
.boys,.lifestyle{
.goods-container{
.good-info{
width: 188px;
height: 360px;
.good-detail-img{
height: 255px;
}
}
}
}
//1150样式
@media screen and (min-width: 1150px) {
.home-page{
.tpl-recommend{
.tpl-nav{
width: 185px;
.keywords0,.keywords1,.keywords2{
margin-bottom:10px;
height: 76px;
}
.keywords2{
margin-bottom:0px;
}
.tpl-category{
height: 228px;
a{
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands{
width: 378px;
height: 504px;
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: 248px;
}
.impo1,.impo9{
width: 378px;
}
}
.adbanner{
margin-top:12px;
a{
height: 150px;
}
}
//1150
.slide-accordion{
height: 400px;
li{
... ... @@ -437,42 +448,22 @@
}
}
}
}
.goods-container{
.good-info{
width: 280px;
height: 485px;
.good-detail-img{
height: 374px;
}
}
}
.commodity{
.commodity-list{
a{
height: 465px;
width: 280px;
}
.commodity-img{
height: 374px;
}
i.top{
height: 60px;
width: 60px;
line-height: 60px;
font-size: 20px;
}
}
.commodity-brands{
.min-screen .home-page{
.slide-accordion{
height: 342px;
li{
a{
width: 185px;
height: 86px;
}
width: 558px;
height: 342px;
}
}
}
}
.boys{
.boys{
.tpl-nav{
width: 185px!important;
.keywords0{
... ... @@ -490,8 +481,8 @@
}
}
}
}
.boys,.lifestyle{
}
.boys,.lifestyle{
.goods-container{
.good-info{
width: 222px!important;
... ... @@ -501,9 +492,36 @@
}
}
}
}
}
.min-screen{
.boys{
.tpl-nav{
.keywords0{
margin-bottom: 8px!important;
height: 130px!important;
}
.keywords1{
margin-bottom:0px!important;
height: 74px!important;
}
}
.tpl-brands{
margin-top:-8px!important;
}
}
.boys,.lifestyle{
.goods-container{
.good-info{
width: 188px;
height: 360px;
.good-detail-img{
height: 255px;
}
}
}
}
}
.brands{
... ... @@ -660,62 +678,61 @@
//990
.sit-nav{
padding-top: 10px;
padding-left: 22px;
padding-left: 26px;
font-size: 12px;
.sep{
margin: 0 6px;
margin: 0 8px;
}
}
.brands-category{
margin-top: 84px;
width: 990px;
width: 1150px;
}
.brands-tabs{
height: 280px;
ul{
margin-left: -9px;
margin-left: -10px;
}
li{
margin-left: 9px;
margin-left: 10px;
a{
width: 190px;
height: 154px;
width: 222px;
height: 180px;
position: relative;
}
}
.brands-content{
width: 990px;
top: 200px;
width: 1150px;
top: 230px;
.brands-icon{
margin-left: -33px;
margin-left: -38px;
padding: 0 4px;
a{
float: left;
width: 68px;
height: 44px;
margin-left: 33px;
width: 80px;
height: 50px;
margin-left: 38px;
}
}
}
.hover-contain{
height: 25px;
height: 30px;
.hoverarr{
height: 4px;
width: 190px;
height: 5px;
width: 222px;
}
}
}
.brandfloor{
//990
ul{
margin-left: -12px;
margin-left: -10px;
}
li{
margin-left: 12px;
margin-bottom:26px;
margin-left: 10px;
margin-bottom:32px;
a{
width: 322px;
width: 376px;
height: 206px;
}
}
... ... @@ -729,8 +746,8 @@
margin-left: 10px;
margin-bottom:10px;
a{
width: 240px;
height: 322px;
width: 280px;
height: 376px;
}
}
... ... @@ -763,8 +780,8 @@
margin-left: 10px;
margin-bottom:10px;
a{
width: 323px;
height: 208px;
width: 376px;
height: 240px;
}
}
.video-play{
... ... @@ -802,13 +819,15 @@
.news{
margin-bottom: 30px;
.news-pic{
position: relative;
float: left;
width: 660px;
height: 376px;
.slide-wrapper{
height: 376px;
img{
height: 376px;
width: 764px;
height: 436px;
.slide-container {
height: 436px;
li a{
height: 436px;
width: 764px;
}
&:hover {
.slide-switch.show {
... ... @@ -845,8 +864,6 @@
.news-txt{
float: right;
padding: 20px 16px;
width: 284px;
height: 334px;
float: right;
border: 1px solid #000;
overflow: auto;
... ... @@ -878,9 +895,12 @@
font-size: 30px;
}
}
.news-txt{
width: 342px;
height: 394px;
}
}
.ads{
margin-bottom: 30px;
ul{
margin-left: -10px;
}
... ... @@ -888,9 +908,9 @@
margin-left: 10px;
margin-bottom: 10px;
a{
width: 240px;
width: 280px;
img{
height: 140px;
height: 160px;
}
}
.name{
... ... @@ -901,18 +921,18 @@
}
}
}
.brands-items{
margin: 25px auto;
.brands-item{
float: left;
padding: 15px 0;
width: 50%;
}
a.brands-pic{
float: left;
width: 240px;
height: 116px;
width: 280px;
height: 136px;
display: block;
img{
width: 100%;
... ... @@ -922,7 +942,7 @@
.brand-info{
float: right;
padding: 0 20px;
width: 212px;
width: 255px;
color: #000;
h3{
width: 100%;
... ... @@ -934,13 +954,14 @@
}
.brand-desc{
padding: 12px 0;
height: 72px;
height: 92px;
font-size: 14px;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
}
}
.pagination{
... ... @@ -969,62 +990,64 @@
}
}
}
@media screen and (min-width: 1150px) {
.brands{
.min-screen .brands{
.sit-nav{
padding-left: 26px;
padding-top: 10px;
padding-left: 22px;
font-size: 12px;
.sep{
margin: 0 8px;
margin: 0 6px;
}
}
.brands-category{
width: 1150px;
margin-top: 84px;
width: 990px;
}
.brands-tabs{
ul{
margin-left: -10px;
margin-left: -9px;
}
li{
margin-left: 10px;
margin-left: 9px;
a{
width: 222px;
height: 180px;
width: 190px;
height: 154px;
}
}
.brands-content{
width: 1150px;
top: 230px;
width: 990px;
top: 200px;
.brands-icon{
margin-left: -38px;
margin-left: -33px;
padding: 0 4px;
a{
float: left;
width: 80px;
height: 50px;
margin-left: 38px;
width: 68px;
height: 44px;
margin-left: 33px;
}
}
}
.hover-contain{
height: 30px;
height: 25px;
.hoverarr{
height: 5px;
width: 222px;
height: 4px;
width: 190px;
}
}
}
.brandfloor{
//990
ul{
margin-left: -10px;
margin-left: -12px;
}
li{
margin-left: 10px;
margin-bottom:32px;
margin-left: 12px;
margin-bottom:26px;
a{
width: 376px;
width: 322px;
height: 206px;
}
}
... ... @@ -1038,8 +1061,8 @@
margin-left: 10px;
margin-bottom:10px;
a{
width: 280px;
height: 376px;
width: 240px;
height: 322px;
}
}
... ... @@ -1072,8 +1095,8 @@
margin-left: 10px;
margin-bottom:10px;
a{
width: 376px;
height: 240px;
width: 323px;
height: 208px;
}
}
.video-play{
... ... @@ -1110,21 +1133,25 @@
}
.news{
.news-pic{
width: 764px;
height: 436px;
.slide-wrapper{
height: 436px;
width: 660px;
height: 376px;
.slide-container {
height: 376px;
img{
height: 436px;
height: 376px;
}
}
}
.news-txt{
width: 342px;
height: 394px;
width: 284px;
height: 334px;
}
}
.ads{
margin-bottom: 30px;
ul{
margin-left: -10px;
}
... ... @@ -1132,9 +1159,9 @@
margin-left: 10px;
margin-bottom: 10px;
a{
width: 280px;
width: 240px;
img{
height: 160px;
height: 140px;
}
}
.name{
... ... @@ -1146,23 +1173,20 @@
}
}
.brands-items{
a.brands-pic{
width: 280px;
height: 136px;
width: 240px;
height: 116px;
}
.brand-info{
width: 255px;
color: #000;
width: 212px;
.brand-desc{
height: 92px;
}
height: 72px;
}
}
}
}
.brands-layer{
position: absolute;
z-index: 100;
... ... @@ -1208,7 +1232,6 @@
}
}
}
}
.brands-layer-right{
background: url(http://static.yohobuy.com/images/v3/index/brands-layer.png) no-repeat 0 -287px;
... ...