fe / YOHOBUYWAP · Commits

Go to a project

Authored by unknown
Commit 29fdd709e4fcbc9b0a5185e4f67e862ba7352e56 1 parent 3496763b

男首990适配

Inline Side-by-side
Showing 2 changed files with 309 additions and 243 deletions
... ... @@ -15,7 +15,7 @@
/*大banner大图*/
.slide-wrapper {
position: relative;
height: 450px;
height: 387px;
overflow: hidden;
ul {
... ... @@ -40,6 +40,11 @@
&:first-child {
display: block;
}
img {
max-width: 100%;
max-height: 100%;
}
}
}
... ... @@ -82,43 +87,42 @@
}
/*大banner缩略图*/
.thumb-pagination {
margin: 6px 0 0;
padding: 0 0 0 2px;
.thumb-pagination {
margin: 7px 0 0;
li {
position: relative;
float: left;
margin: 0 0 0 6px;
width: 138px;
height: 54px;
li {
position: relative;
float: left;
margin: 0 0 0 6px;
width: 118px;
height: 46px;
&:first-child {
margin: 0;
}
&:first-child {
margin: 0;
}
&.focus {
a {
@include opacity(0);
}
}
&.focus {
a {
@include opacity(0);
}
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
@include opacity(0.3);
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
@include opacity(0.3);
}
img {
width: 100%;
height: 100%;
}
}
}
img {
width: 100%;
height: 100%;
}
}
}
/*大banner圆点*/
.slide-pagination {
... ... @@ -237,37 +241,37 @@
}
/*男首最新速报*/
.new-report {
img {
display: block;
.new-report {
img {
display: block;
width: 100%;
height: 100%;
}
.report-list {
float: left;
width: 868px;
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 282px;
height: 504px;
}
}
.report-list {
float: left;
width: 748px;
li {
float: left;
margin: 0 8px 8px 0;
width: 158px;
height: 212px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 242px;
height: 432px;
}
}
}
.last-item {
float: left;
width: 282px;
height: 504px;
overflow: hidden;
}
}
}
}
.last-item {
float: left;
width: 242px;
height: 432px;
overflow: hidden;
}
}
/*优选品牌*/
.preference-brand {
... ... @@ -362,36 +366,36 @@
}
/*男首优选品牌 图片品牌*/
.img-brand {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
.img-brand {
position: relative;
width: 100%;
height: 150px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 0 0;
width: 378px;
height: 175px;
line-height: 175px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 998px;
}
li {
float: left;
margin: 0 8px 0 0;
width: 325px;
height: 150px;
line-height: 150px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
/*图片品牌左右切换按钮*/
.img-brand-switch {
... ... @@ -420,64 +424,64 @@
}
}
}
}
}
/*男首优选品牌 logo品牌*/
.logo-brand {
.logo-brand {
width: 100%;
height: 282px;
height: 246px;
overflow: hidden;
&.logos-10 {
height: 188px;
height: 164px;
}
ul {
width: 1158px;
}
li {
float: left;
margin: 8px 8px 0 0;
width: 185px;
height: 86px;
line-height: 86px;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.logo-brand-switch {
position: relative;
background: image-url('index/logo-brand-line.png') no-repeat center center;
line-height: normal;
.iconfont {
position: absolute;
left: 50%;
font-size: 32px;
&.prev {
top: 10px;
margin: 0 0 0 -48px;
}
&.next {
bottom: 12px;
margin: 0 0 0 20px;
}
}
}
.brand-more {
font-size: 16px;
&:hover {
text-decoration: underline;
}
}
}
ul {
width: 998px;
}
li {
float: left;
margin: 8px 8px 0 0;
width: 158px;
height: 74px;
line-height: 74px;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.logo-brand-switch {
position: relative;
background: image-url('index/logo-brand-line.png') no-repeat center center;
line-height: normal;
.iconfont {
position: absolute;
left: 50%;
font-size: 32px;
&.prev {
top: 10px;
margin: 0 0 0 -48px;
}
&.next {
bottom: 12px;
margin: 0 0 0 20px;
}
}
}
.brand-more {
font-size: 16px;
&:hover {
text-decoration: underline;
}
}
}
/*创意生活商品分类*/
.categorys-list {
... ... @@ -731,108 +735,4 @@
}
@media screen and (min-width: 1150px) {
.home-page {
width: 1150px;
.slide-wrapper {
height: 387px;
}
.debris-slider {
height: 510px;
.left-col {
margin-right: 10px;
a {
width: 280px;
height: 120px;
}
a:first-child {
height: 250px;
}
}
.center-col {
width: 570px;
height: 100%;
margin-right: 10px;
}
.right-col {
a {
width: 280px;
height: 120px;
}
a:first-child {
height: 380px;
}
}
}
.img-slider-wrapper {
height: 558px;
}
.img-container-landscape {
margin: 86px auto 0;
width: 982px;
height: 433px;
.img-item {
width: 320px;
margin-right: 10px;
}
}
.preference-brand-list {
width: 1158px;
}
.preference-brand-item {
margin-right: 8px;
a {
width: 185px;
height: 86px;
}
}
.preference-more {
width: 185px;
height: 86px;
line-height: 100px;
}
.categorys-list {
ul {
width: 1158px;
}
li {
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
&.cate-item0 {
width: 185px;
height: 504px;
}
&.cate-item1 {
width: 377px;
height: 504px;
}
}
}
.floor-header {
margin: 80px 0 40px;
.header-navs {
li {
padding: 1px 15px;
}
}
}
}
}
@import "_index-pliffy";
@import "_index-pliffy", "index1150";
... ...
@media screen and (min-width: 1150px) {
.home-page {
width: 1150px;
.slide-wrapper {
height: 450px;
}
.thumb-pagination {
margin: 6px 0 0;
padding: 0 0 0 2px;
li {
width: 138px;
height: 54px;
}
}
.debris-slider {
height: 510px;
.left-col {
margin-right: 10px;
a {
width: 280px;
height: 120px;
}
a:first-child {
height: 250px;
}
}
.center-col {
width: 570px;
height: 100%;
margin-right: 10px;
}
.right-col {
a {
width: 280px;
height: 120px;
}
a:first-child {
height: 380px;
}
}
}
.new-report {
.report-list {
width: 868px;
li {
width: 185px;
height: 248px;
&:first-child {
width: 282px;
height: 504px;
}
}
}
.last-item {
width: 282px;
height: 504px;
}
}
.img-slider-wrapper {
height: 558px;
}
.img-container-landscape {
margin: 86px auto 0;
width: 982px;
height: 433px;
.img-item {
width: 320px;
margin-right: 10px;
}
}
.preference-brand-list {
width: 1158px;
}
.preference-brand-item {
margin-right: 8px;
a {
width: 185px;
height: 86px;
}
}
.preference-more {
width: 185px;
height: 86px;
line-height: 100px;
}
.img-brand {
height: 175px;
ul {
width: 1158px;
}
li {
width: 378px;
height: 175px;
line-height: 175px;
}
}
.logo-brand {
height: 282px;
&.logos-10 {
height: 188px;
}
ul {
width: 1158px;
}
li {
width: 185px;
height: 86px;
}
}
.categorys-list {
ul {
width: 1158px;
}
li {
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
&.cate-item0 {
width: 185px;
height: 504px;
}
&.cate-item1 {
width: 377px;
height: 504px;
}
}
}
.floor-header {
margin: 80px 0 40px;
.header-navs {
li {
padding: 1px 15px;
}
}
}
}
}
\ No newline at end of file
... ...