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 487 additions and 464 deletions
... ... @@ -30,7 +30,7 @@ slide = new Slide({
loop: false,
auto: false,
timeout: 2,
index: 3
index: 1
});
slide.on('change', function(data) {
... ...
... ... @@ -99,55 +99,95 @@
margin-left:10px;
}
}
//990样式
.tpl-nav{
width: 158px;
.keywords0,.keywords1,.keywords2{
margin-bottom:8px;
height: 65px;
width: 185px;
.keywords0,.keywords1,.keywords2{
margin-bottom:10px;
height: 76px;
}
.keywords2{
margin-bottom:0px;
}
.tpl-category{
height: 192px;
height: 228px;
a{
height: 32px;
line-height: 32px;
font-size: 12px;
&:hover{
text-decoration: underline;
}
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands{
width: 324px;
height: 432px;
width: 378px;
height: 504px;
li a{
height: 212px;
height: 248px;
}
}
.tpl-types{
width: 498px;
width: 579px;
li a{
width: 158px;
height: 212px;
width: 185px;
height: 248px;
}
}
.tpl-products{
li a{
width: 190px;
height: 254px;
width: 222px;
height: 298px;
}
}
}
}
.min-screen .home-page .tpl-recommend{
//990样式
.tpl-nav{
width: 158px;
.keywords0,.keywords1,.keywords2{
margin-bottom:8px;
height: 65px;
}
.keywords2{
margin-bottom:0px;
}
.tpl-category{
height: 192px;
a{
height: 32px;
line-height: 32px;
font-size: 12px;
&:hover{
text-decoration: underline;
}
}
}
}
.tpl-brands{
width: 324px;
height: 432px;
li a{
height: 212px;
}
}
.tpl-types{
width: 498px;
li a{
width: 158px;
height: 212px;
}
}
.tpl-products{
li a{
width: 190px;
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{
... ... @@ -273,11 +350,36 @@
line-height: 35px;
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,170 +438,85 @@
}
}
}
//1150
.slide-accordion{
height: 400px;
li{
a{
width: 650px;
height: 400px;
}
}
}
}
.min-screen .home-page{
.slide-accordion{
height: 342px;
li{
a{
width: 558px;
height: 342px;
}
}
}
}
.boys{
.tpl-nav{
width: 185px!important;
.keywords0{
margin-bottom: 8px!important;
height: 130px!important;
margin-bottom: 10px!important;
height: 152px!important;
}
.keywords1{
margin-bottom:0px!important;
height: 74px!important;
height: 86px!important;
}
.tpl-category{
a{
height: 38px!important;
line-height: 38px!important;
font-size: 14px!important;
}
}
}
.tpl-brands{
margin-top:-8px!important;
}
}
.boys,.lifestyle{
.goods-container{
.good-info{
width: 188px;
height: 360px;
width: 222px!important;
height: 408px!important;
.good-detail-img{
height: 255px;
height: 298px!important;
}
}
}
}
//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;
}
}
.slide-accordion{
height: 400px;
li{
a{
width: 650px;
height: 400px;
}
}
}
.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{
a{
width: 185px;
height: 86px;
}
}
}
}
.min-screen{
.boys{
.tpl-nav{
width: 185px!important;
.keywords0{
margin-bottom: 10px!important;
height: 152px!important;
margin-bottom: 8px!important;
height: 130px!important;
}
.keywords1{
height: 86px!important;
}
.tpl-category{
a{
height: 38px!important;
line-height: 38px!important;
font-size: 14px!important;
}
margin-bottom:0px!important;
height: 74px!important;
}
}
.tpl-brands{
margin-top:-8px!important;
}
}
.boys,.lifestyle{
.goods-container{
.good-info{
width: 222px!important;
height: 408px!important;
width: 188px;
height: 360px;
.good-detail-img{
height: 298px!important;
height: 255px;
}
}
}
... ... @@ -505,7 +524,6 @@
}
.brands{
.brands-tabs{
... ... @@ -660,289 +678,292 @@
//990
.sit-nav{
padding-top: 10px;
padding-left: 22px;
font-size: 12px;
.sep{
margin: 0 6px;
padding-left: 26px;
font-size: 12px;
.sep{
margin: 0 8px;
}
}
}
.brands-category{
margin-top: 84px;
width: 990px;
}
.brands-tabs{
ul{
margin-left: -9px;
.brands-category{
width: 1150px;
}
li{
margin-left: 9px;
a{
width: 190px;
height: 154px;
position: relative;
.brands-tabs{
height: 280px;
ul{
margin-left: -10px;
}
}
.brands-content{
width: 990px;
top: 200px;
.brands-icon{
margin-left: -33px;
padding: 0 4px;
li{
margin-left: 10px;
a{
float: left;
width: 68px;
height: 44px;
margin-left: 33px;
width: 222px;
height: 180px;
position: relative;
}
}
}
.hover-contain{
height: 25px;
.hoverarr{
height: 4px;
width: 190px;
}
}
}
.brandfloor{
//990
ul{
margin-left: -12px;
}
li{
margin-left: 12px;
margin-bottom:26px;
a{
width: 322px;
height: 206px;
}
.brands-content{
width: 1150px;
top: 230px;
.brands-icon{
margin-left: -38px;
padding: 0 4px;
a{
float: left;
width: 80px;
height: 50px;
margin-left: 38px;
}
}
}
.hover-contain{
height: 30px;
.hoverarr{
height: 5px;
width: 222px;
}
}
}
}
.singlegoods{
//990
ul{
margin-left: -10px;
}
li{
margin-left: 10px;
margin-bottom:10px;
a{
width: 240px;
height: 322px;
}
}
.singlegoods-title{
position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
p{
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 18px;
text-align: center;
color: #fff;
.brandfloor{
ul{
margin-left: -10px;
}
}
}
.video{
ul{
margin-left: -10px;
}
li{
margin-left: 10px;
margin-bottom:10px;
a{
width: 323px;
height: 208px;
}
}
.video-play{
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -28px;
width: 60px;
height: 56px;
background-image: image-url("index/play.png");
}
.video-title{
position: absolute;
left: 0;
bottom: 0;
height: 32px;
width: 100%;
p{
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;;
width: 100%;
height: 100%;
font-size: 14px;
line-height: 32px;
text-align: center;
color: #fff;
li{
margin-left: 10px;
margin-bottom:32px;
a{
width: 376px;
height: 206px;
}
}
}
}
.news{
margin-bottom: 30px;
.news-pic{
float: left;
width: 660px;
height: 376px;
.slide-wrapper{
height: 376px;
img{
.singlegoods{
//990
ul{
margin-left: -10px;
}
li{
margin-left: 10px;
margin-bottom:10px;
a{
width: 280px;
height: 376px;
}
&:hover {
.slide-switch.show {
display: none;
}
}
}
}
.slide-tips{
.singlegoods-title{
position: absolute;
left: 0;
bottom: 0;
height: 30px;
height: 50px;
width: 100%;
p{
position: absolute;
left: 18px;
z-index: 2;
height: 30px;
font-size: 14px;
line-height: 30px;
top: 0;
left: 0;
display: block;;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 18px;
text-align: center;
color: #fff;
}
}
.slide-pagination{
right: 0;
left: initial;
bottom: 0;
.slide-shade{
@include opacity(0);
background:none;
}
}
}
.news-txt{
float: right;
padding: 20px 16px;
width: 284px;
height: 334px;
float: right;
border: 1px solid #000;
overflow: auto;
.video{
ul{
margin-left: -10px;
}
li{
position: relative;
display: block;
margin-top: 12px;
margin-left: 20px;
margin-left: 10px;
margin-bottom:10px;
a{
width: 376px;
height: 240px;
}
}
a{
font-size: 14px;
line-height: 24px;
cursor: pointer;
color: #010101;
.video-play{
display: block;
&:hover {
color: #fff;
background: #000;
padding-left: 12px;
-webkit-transition: padding 0.4s;
transition: padding 0.4s;
}
position: absolute;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -28px;
width: 60px;
height: 56px;
background-image: image-url("index/play.png");
}
i{
.video-title{
position: absolute;
top: -6px;
left: -26px;
font-size: 30px;
left: 0;
bottom: 0;
height: 32px;
width: 100%;
p{
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;;
width: 100%;
height: 100%;
font-size: 14px;
line-height: 32px;
text-align: center;
color: #fff;
}
}
}
}
.ads{
margin-bottom: 30px;
ul{
margin-left: -10px;
}
li{
margin-left: 10px;
margin-bottom: 10px;
a{
width: 240px;
img{
height: 140px;
.news{
margin-bottom: 30px;
.news-pic{
position: relative;
float: left;
width: 764px;
height: 436px;
.slide-container {
height: 436px;
li a{
height: 436px;
width: 764px;
}
&:hover {
.slide-switch.show {
display: none;
}
}
}
.slide-tips{
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
p{
position: absolute;
left: 18px;
z-index: 2;
height: 30px;
font-size: 14px;
line-height: 30px;
color: #fff;
}
}
.slide-pagination{
right: 0;
left: initial;
bottom: 0;
.slide-shade{
@include opacity(0);
background:none;
}
}
}
.name{
font-size: 14px
.news-txt{
float: right;
padding: 20px 16px;
float: right;
border: 1px solid #000;
overflow: auto;
li{
position: relative;
display: block;
margin-top: 12px;
margin-left: 20px;
}
a{
font-size: 14px;
line-height: 24px;
cursor: pointer;
color: #010101;
display: block;
&:hover {
color: #fff;
background: #000;
padding-left: 12px;
-webkit-transition: padding 0.4s;
transition: padding 0.4s;
}
}
i{
position: absolute;
top: -6px;
left: -26px;
font-size: 30px;
}
}
.des{
font-size: 12px;
.news-txt{
width: 342px;
height: 394px;
}
}
}
.brands-items{
margin: 25px auto;
.brands-item{
float: left;
padding: 15px 0;
width: 50%;
}
a.brands-pic{
float: left;
width: 240px;
height: 116px;
display: block;
img{
width: 100%;
height: 100%;
.ads{
ul{
margin-left: -10px;
}
li{
margin-left: 10px;
margin-bottom: 10px;
a{
width: 280px;
img{
height: 160px;
}
}
.name{
font-size: 14px
}
.des{
font-size: 12px;
}
}
}
.brand-info{
float: right;
padding: 0 20px;
width: 212px;
color: #000;
h3{
width: 100%;
font-size: 20px;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.brands-items{
margin: 25px auto;
.brands-item{
float: left;
padding: 15px 0;
width: 50%;
}
.brand-desc{
padding: 12px 0;
height: 72px;
font-size: 14px;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
a.brands-pic{
float: left;
width: 280px;
height: 136px;
display: block;
img{
width: 100%;
height: 100%;
}
}
.brand-info{
float: right;
padding: 0 20px;
width: 255px;
color: #000;
h3{
width: 100%;
font-size: 20px;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brand-desc{
padding: 12px 0;
height: 92px;
font-size: 14px;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
}
}
}
.pagination{
margin-top: 60px;
margin-bottom: 60px;
... ... @@ -969,62 +990,64 @@
}
}
}
@media screen and (min-width: 1150px) {
.brands{
.sit-nav{
padding-left: 26px;
.min-screen .brands{
.sit-nav{
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;
li{
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;
... ...