Showing
2 changed files
with
309 additions
and
243 deletions
| @@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
| 15 | /*大banner大图*/ | 15 | /*大banner大图*/ |
| 16 | .slide-wrapper { | 16 | .slide-wrapper { |
| 17 | position: relative; | 17 | position: relative; |
| 18 | - height: 450px; | 18 | + height: 387px; |
| 19 | overflow: hidden; | 19 | overflow: hidden; |
| 20 | 20 | ||
| 21 | ul { | 21 | ul { |
| @@ -40,6 +40,11 @@ | @@ -40,6 +40,11 @@ | ||
| 40 | &:first-child { | 40 | &:first-child { |
| 41 | display: block; | 41 | display: block; |
| 42 | } | 42 | } |
| 43 | + | ||
| 44 | + img { | ||
| 45 | + max-width: 100%; | ||
| 46 | + max-height: 100%; | ||
| 47 | + } | ||
| 43 | } | 48 | } |
| 44 | } | 49 | } |
| 45 | 50 | ||
| @@ -82,43 +87,42 @@ | @@ -82,43 +87,42 @@ | ||
| 82 | } | 87 | } |
| 83 | 88 | ||
| 84 | /*大banner缩略图*/ | 89 | /*大banner缩略图*/ |
| 85 | - .thumb-pagination { | ||
| 86 | - margin: 6px 0 0; | ||
| 87 | - padding: 0 0 0 2px; | 90 | + .thumb-pagination { |
| 91 | + margin: 7px 0 0; | ||
| 88 | 92 | ||
| 89 | - li { | ||
| 90 | - position: relative; | ||
| 91 | - float: left; | ||
| 92 | - margin: 0 0 0 6px; | ||
| 93 | - width: 138px; | ||
| 94 | - height: 54px; | 93 | + li { |
| 94 | + position: relative; | ||
| 95 | + float: left; | ||
| 96 | + margin: 0 0 0 6px; | ||
| 97 | + width: 118px; | ||
| 98 | + height: 46px; | ||
| 95 | 99 | ||
| 96 | - &:first-child { | ||
| 97 | - margin: 0; | ||
| 98 | - } | 100 | + &:first-child { |
| 101 | + margin: 0; | ||
| 102 | + } | ||
| 99 | 103 | ||
| 100 | - &.focus { | ||
| 101 | - a { | ||
| 102 | - @include opacity(0); | ||
| 103 | - } | ||
| 104 | - } | 104 | + &.focus { |
| 105 | + a { | ||
| 106 | + @include opacity(0); | ||
| 107 | + } | ||
| 108 | + } | ||
| 105 | 109 | ||
| 106 | - a { | ||
| 107 | - position: absolute; | ||
| 108 | - left: 0; | ||
| 109 | - right: 0; | ||
| 110 | - bottom: 0; | ||
| 111 | - top: 0; | ||
| 112 | - background: #000; | ||
| 113 | - @include opacity(0.3); | ||
| 114 | - } | 110 | + a { |
| 111 | + position: absolute; | ||
| 112 | + left: 0; | ||
| 113 | + right: 0; | ||
| 114 | + bottom: 0; | ||
| 115 | + top: 0; | ||
| 116 | + background: #000; | ||
| 117 | + @include opacity(0.3); | ||
| 118 | + } | ||
| 115 | 119 | ||
| 116 | - img { | ||
| 117 | - width: 100%; | ||
| 118 | - height: 100%; | ||
| 119 | - } | ||
| 120 | - } | ||
| 121 | - } | 120 | + img { |
| 121 | + width: 100%; | ||
| 122 | + height: 100%; | ||
| 123 | + } | ||
| 124 | + } | ||
| 125 | + } | ||
| 122 | 126 | ||
| 123 | /*大banner圆点*/ | 127 | /*大banner圆点*/ |
| 124 | .slide-pagination { | 128 | .slide-pagination { |
| @@ -237,37 +241,37 @@ | @@ -237,37 +241,37 @@ | ||
| 237 | } | 241 | } |
| 238 | 242 | ||
| 239 | /*男首最新速报*/ | 243 | /*男首最新速报*/ |
| 240 | - .new-report { | ||
| 241 | - img { | ||
| 242 | - display: block; | 244 | + .new-report { |
| 245 | + img { | ||
| 246 | + display: block; | ||
| 243 | width: 100%; | 247 | width: 100%; |
| 244 | height: 100%; | 248 | height: 100%; |
| 245 | - } | ||
| 246 | - .report-list { | ||
| 247 | - float: left; | ||
| 248 | - width: 868px; | ||
| 249 | - li { | ||
| 250 | - float: left; | ||
| 251 | - margin: 0 8px 8px 0; | ||
| 252 | - width: 185px; | ||
| 253 | - height: 248px; | ||
| 254 | - overflow: hidden; | ||
| 255 | - &:first-child { | ||
| 256 | - margin-right: 7px; | ||
| 257 | - width: 282px; | ||
| 258 | - height: 504px; | ||
| 259 | - } | 249 | + } |
| 250 | + .report-list { | ||
| 251 | + float: left; | ||
| 252 | + width: 748px; | ||
| 253 | + li { | ||
| 254 | + float: left; | ||
| 255 | + margin: 0 8px 8px 0; | ||
| 256 | + width: 158px; | ||
| 257 | + height: 212px; | ||
| 258 | + overflow: hidden; | ||
| 259 | + &:first-child { | ||
| 260 | + margin-right: 7px; | ||
| 261 | + width: 242px; | ||
| 262 | + height: 432px; | ||
| 263 | + } | ||
| 260 | 264 | ||
| 261 | - } | ||
| 262 | - } | ||
| 263 | - | ||
| 264 | - .last-item { | ||
| 265 | - float: left; | ||
| 266 | - width: 282px; | ||
| 267 | - height: 504px; | ||
| 268 | - overflow: hidden; | ||
| 269 | - } | ||
| 270 | - } | 265 | + } |
| 266 | + } | ||
| 267 | + | ||
| 268 | + .last-item { | ||
| 269 | + float: left; | ||
| 270 | + width: 242px; | ||
| 271 | + height: 432px; | ||
| 272 | + overflow: hidden; | ||
| 273 | + } | ||
| 274 | + } | ||
| 271 | 275 | ||
| 272 | /*优选品牌*/ | 276 | /*优选品牌*/ |
| 273 | .preference-brand { | 277 | .preference-brand { |
| @@ -362,36 +366,36 @@ | @@ -362,36 +366,36 @@ | ||
| 362 | } | 366 | } |
| 363 | 367 | ||
| 364 | /*男首优选品牌 图片品牌*/ | 368 | /*男首优选品牌 图片品牌*/ |
| 365 | - .img-brand { | ||
| 366 | - position: relative; | ||
| 367 | - width: 100%; | ||
| 368 | - height: 175px; | ||
| 369 | - overflow: hidden; | 369 | + .img-brand { |
| 370 | + position: relative; | ||
| 371 | + width: 100%; | ||
| 372 | + height: 150px; | ||
| 373 | + overflow: hidden; | ||
| 370 | 374 | ||
| 371 | - &:hover { | ||
| 372 | - .img-brand-switch { | ||
| 373 | - display: block; | ||
| 374 | - } | ||
| 375 | - } | ||
| 376 | - ul { | ||
| 377 | - width: 1158px; | ||
| 378 | - } | ||
| 379 | - li { | ||
| 380 | - float: left; | ||
| 381 | - margin: 0 8px 0 0; | ||
| 382 | - width: 378px; | ||
| 383 | - height: 175px; | ||
| 384 | - line-height: 175px; | ||
| 385 | - overflow: hidden; | ||
| 386 | - font-size: 0; | ||
| 387 | - text-align: center; | ||
| 388 | - | ||
| 389 | - img { | ||
| 390 | - max-width: 100%; | ||
| 391 | - max-height: 100%; | ||
| 392 | - vertical-align: middle; | ||
| 393 | - } | ||
| 394 | - } | 375 | + &:hover { |
| 376 | + .img-brand-switch { | ||
| 377 | + display: block; | ||
| 378 | + } | ||
| 379 | + } | ||
| 380 | + ul { | ||
| 381 | + width: 998px; | ||
| 382 | + } | ||
| 383 | + li { | ||
| 384 | + float: left; | ||
| 385 | + margin: 0 8px 0 0; | ||
| 386 | + width: 325px; | ||
| 387 | + height: 150px; | ||
| 388 | + line-height: 150px; | ||
| 389 | + overflow: hidden; | ||
| 390 | + font-size: 0; | ||
| 391 | + text-align: center; | ||
| 392 | + | ||
| 393 | + img { | ||
| 394 | + max-width: 100%; | ||
| 395 | + max-height: 100%; | ||
| 396 | + vertical-align: middle; | ||
| 397 | + } | ||
| 398 | + } | ||
| 395 | 399 | ||
| 396 | /*图片品牌左右切换按钮*/ | 400 | /*图片品牌左右切换按钮*/ |
| 397 | .img-brand-switch { | 401 | .img-brand-switch { |
| @@ -420,64 +424,64 @@ | @@ -420,64 +424,64 @@ | ||
| 420 | } | 424 | } |
| 421 | } | 425 | } |
| 422 | } | 426 | } |
| 423 | - } | 427 | + } |
| 424 | 428 | ||
| 425 | 429 | ||
| 426 | 430 | ||
| 427 | /*男首优选品牌 logo品牌*/ | 431 | /*男首优选品牌 logo品牌*/ |
| 428 | - .logo-brand { | 432 | + .logo-brand { |
| 429 | width: 100%; | 433 | width: 100%; |
| 430 | - height: 282px; | 434 | + height: 246px; |
| 431 | overflow: hidden; | 435 | overflow: hidden; |
| 432 | 436 | ||
| 433 | &.logos-10 { | 437 | &.logos-10 { |
| 434 | - height: 188px; | 438 | + height: 164px; |
| 435 | } | 439 | } |
| 436 | 440 | ||
| 437 | - ul { | ||
| 438 | - width: 1158px; | ||
| 439 | - } | ||
| 440 | - li { | ||
| 441 | - float: left; | ||
| 442 | - margin: 8px 8px 0 0; | ||
| 443 | - width: 185px; | ||
| 444 | - height: 86px; | ||
| 445 | - line-height: 86px; | ||
| 446 | - font-size: 0; | ||
| 447 | - text-align: center; | ||
| 448 | - img { | ||
| 449 | - max-width: 100%; | ||
| 450 | - max-height: 100%; | ||
| 451 | - vertical-align: middle; | ||
| 452 | - } | ||
| 453 | - } | ||
| 454 | - .logo-brand-switch { | ||
| 455 | - position: relative; | ||
| 456 | - background: image-url('index/logo-brand-line.png') no-repeat center center; | ||
| 457 | - line-height: normal; | ||
| 458 | - .iconfont { | ||
| 459 | - position: absolute; | ||
| 460 | - left: 50%; | ||
| 461 | - font-size: 32px; | ||
| 462 | - | ||
| 463 | - &.prev { | ||
| 464 | - top: 10px; | ||
| 465 | - | ||
| 466 | - margin: 0 0 0 -48px; | ||
| 467 | - } | ||
| 468 | - &.next { | ||
| 469 | - bottom: 12px; | ||
| 470 | - margin: 0 0 0 20px; | ||
| 471 | - } | ||
| 472 | - } | ||
| 473 | - } | ||
| 474 | - .brand-more { | ||
| 475 | - font-size: 16px; | ||
| 476 | - &:hover { | ||
| 477 | - text-decoration: underline; | ||
| 478 | - } | ||
| 479 | - } | ||
| 480 | - } | 441 | + ul { |
| 442 | + width: 998px; | ||
| 443 | + } | ||
| 444 | + li { | ||
| 445 | + float: left; | ||
| 446 | + margin: 8px 8px 0 0; | ||
| 447 | + width: 158px; | ||
| 448 | + height: 74px; | ||
| 449 | + line-height: 74px; | ||
| 450 | + font-size: 0; | ||
| 451 | + text-align: center; | ||
| 452 | + img { | ||
| 453 | + max-width: 100%; | ||
| 454 | + max-height: 100%; | ||
| 455 | + vertical-align: middle; | ||
| 456 | + } | ||
| 457 | + } | ||
| 458 | + .logo-brand-switch { | ||
| 459 | + position: relative; | ||
| 460 | + background: image-url('index/logo-brand-line.png') no-repeat center center; | ||
| 461 | + line-height: normal; | ||
| 462 | + .iconfont { | ||
| 463 | + position: absolute; | ||
| 464 | + left: 50%; | ||
| 465 | + font-size: 32px; | ||
| 466 | + | ||
| 467 | + &.prev { | ||
| 468 | + top: 10px; | ||
| 469 | + | ||
| 470 | + margin: 0 0 0 -48px; | ||
| 471 | + } | ||
| 472 | + &.next { | ||
| 473 | + bottom: 12px; | ||
| 474 | + margin: 0 0 0 20px; | ||
| 475 | + } | ||
| 476 | + } | ||
| 477 | + } | ||
| 478 | + .brand-more { | ||
| 479 | + font-size: 16px; | ||
| 480 | + &:hover { | ||
| 481 | + text-decoration: underline; | ||
| 482 | + } | ||
| 483 | + } | ||
| 484 | + } | ||
| 481 | 485 | ||
| 482 | /*创意生活商品分类*/ | 486 | /*创意生活商品分类*/ |
| 483 | .categorys-list { | 487 | .categorys-list { |
| @@ -731,108 +735,4 @@ | @@ -731,108 +735,4 @@ | ||
| 731 | } | 735 | } |
| 732 | 736 | ||
| 733 | 737 | ||
| 734 | -@media screen and (min-width: 1150px) { | ||
| 735 | -.home-page { | ||
| 736 | - width: 1150px; | ||
| 737 | - | ||
| 738 | - .slide-wrapper { | ||
| 739 | - height: 387px; | ||
| 740 | - } | ||
| 741 | - | ||
| 742 | - .debris-slider { | ||
| 743 | - height: 510px; | ||
| 744 | - .left-col { | ||
| 745 | - margin-right: 10px; | ||
| 746 | - | ||
| 747 | - a { | ||
| 748 | - width: 280px; | ||
| 749 | - height: 120px; | ||
| 750 | - } | ||
| 751 | - | ||
| 752 | - a:first-child { | ||
| 753 | - height: 250px; | ||
| 754 | - } | ||
| 755 | - } | ||
| 756 | - | ||
| 757 | - .center-col { | ||
| 758 | - width: 570px; | ||
| 759 | - height: 100%; | ||
| 760 | - margin-right: 10px; | ||
| 761 | - } | ||
| 762 | - | ||
| 763 | - .right-col { | ||
| 764 | - a { | ||
| 765 | - width: 280px; | ||
| 766 | - height: 120px; | ||
| 767 | - } | ||
| 768 | - | ||
| 769 | - a:first-child { | ||
| 770 | - height: 380px; | ||
| 771 | - } | ||
| 772 | - } | ||
| 773 | - } | ||
| 774 | - .img-slider-wrapper { | ||
| 775 | - height: 558px; | ||
| 776 | - } | ||
| 777 | - | ||
| 778 | - .img-container-landscape { | ||
| 779 | - margin: 86px auto 0; | ||
| 780 | - width: 982px; | ||
| 781 | - height: 433px; | ||
| 782 | - | ||
| 783 | - .img-item { | ||
| 784 | - width: 320px; | ||
| 785 | - margin-right: 10px; | ||
| 786 | - } | ||
| 787 | - } | ||
| 788 | - | ||
| 789 | - .preference-brand-list { | ||
| 790 | - width: 1158px; | ||
| 791 | - } | ||
| 792 | - | ||
| 793 | - .preference-brand-item { | ||
| 794 | - margin-right: 8px; | ||
| 795 | - | ||
| 796 | - a { | ||
| 797 | - width: 185px; | ||
| 798 | - height: 86px; | ||
| 799 | - } | ||
| 800 | - } | ||
| 801 | - | ||
| 802 | - .preference-more { | ||
| 803 | - width: 185px; | ||
| 804 | - height: 86px; | ||
| 805 | - line-height: 100px; | ||
| 806 | - } | ||
| 807 | - | ||
| 808 | - .categorys-list { | ||
| 809 | - ul { | ||
| 810 | - width: 1158px; | ||
| 811 | - } | ||
| 812 | - li { | ||
| 813 | - margin: 0 8px 8px 0; | ||
| 814 | - width: 185px; | ||
| 815 | - height: 248px; | ||
| 816 | - | ||
| 817 | - &.cate-item0 { | ||
| 818 | - width: 185px; | ||
| 819 | - height: 504px; | ||
| 820 | - } | ||
| 821 | - &.cate-item1 { | ||
| 822 | - width: 377px; | ||
| 823 | - height: 504px; | ||
| 824 | - } | ||
| 825 | - } | ||
| 826 | - } | ||
| 827 | - .floor-header { | ||
| 828 | - margin: 80px 0 40px; | ||
| 829 | - | ||
| 830 | - .header-navs { | ||
| 831 | - li { | ||
| 832 | - padding: 1px 15px; | ||
| 833 | - } | ||
| 834 | - } | ||
| 835 | - } | ||
| 836 | -} | ||
| 837 | -} | ||
| 838 | -@import "_index-pliffy"; | 738 | +@import "_index-pliffy", "index1150"; |
web-static/sass/home/_index1150.scss
0 → 100644
| 1 | + | ||
| 2 | +@media screen and (min-width: 1150px) { | ||
| 3 | +.home-page { | ||
| 4 | + width: 1150px; | ||
| 5 | + | ||
| 6 | + .slide-wrapper { | ||
| 7 | + height: 450px; | ||
| 8 | + } | ||
| 9 | + | ||
| 10 | + .thumb-pagination { | ||
| 11 | + margin: 6px 0 0; | ||
| 12 | + padding: 0 0 0 2px; | ||
| 13 | + | ||
| 14 | + li { | ||
| 15 | + width: 138px; | ||
| 16 | + height: 54px; | ||
| 17 | + } | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + | ||
| 21 | + .debris-slider { | ||
| 22 | + height: 510px; | ||
| 23 | + .left-col { | ||
| 24 | + margin-right: 10px; | ||
| 25 | + | ||
| 26 | + a { | ||
| 27 | + width: 280px; | ||
| 28 | + height: 120px; | ||
| 29 | + } | ||
| 30 | + | ||
| 31 | + a:first-child { | ||
| 32 | + height: 250px; | ||
| 33 | + } | ||
| 34 | + } | ||
| 35 | + | ||
| 36 | + .center-col { | ||
| 37 | + width: 570px; | ||
| 38 | + height: 100%; | ||
| 39 | + margin-right: 10px; | ||
| 40 | + } | ||
| 41 | + | ||
| 42 | + .right-col { | ||
| 43 | + a { | ||
| 44 | + width: 280px; | ||
| 45 | + height: 120px; | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + a:first-child { | ||
| 49 | + height: 380px; | ||
| 50 | + } | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | + | ||
| 54 | + .new-report { | ||
| 55 | + .report-list { | ||
| 56 | + width: 868px; | ||
| 57 | + li { | ||
| 58 | + width: 185px; | ||
| 59 | + height: 248px; | ||
| 60 | + &:first-child { | ||
| 61 | + width: 282px; | ||
| 62 | + height: 504px; | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + | ||
| 68 | + .last-item { | ||
| 69 | + width: 282px; | ||
| 70 | + height: 504px; | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | + | ||
| 74 | + .img-slider-wrapper { | ||
| 75 | + height: 558px; | ||
| 76 | + } | ||
| 77 | + | ||
| 78 | + .img-container-landscape { | ||
| 79 | + margin: 86px auto 0; | ||
| 80 | + width: 982px; | ||
| 81 | + height: 433px; | ||
| 82 | + | ||
| 83 | + .img-item { | ||
| 84 | + width: 320px; | ||
| 85 | + margin-right: 10px; | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + | ||
| 89 | + .preference-brand-list { | ||
| 90 | + width: 1158px; | ||
| 91 | + } | ||
| 92 | + | ||
| 93 | + .preference-brand-item { | ||
| 94 | + margin-right: 8px; | ||
| 95 | + | ||
| 96 | + a { | ||
| 97 | + width: 185px; | ||
| 98 | + height: 86px; | ||
| 99 | + } | ||
| 100 | + } | ||
| 101 | + | ||
| 102 | + .preference-more { | ||
| 103 | + width: 185px; | ||
| 104 | + height: 86px; | ||
| 105 | + line-height: 100px; | ||
| 106 | + } | ||
| 107 | + | ||
| 108 | + .img-brand { | ||
| 109 | + height: 175px; | ||
| 110 | + | ||
| 111 | + ul { | ||
| 112 | + width: 1158px; | ||
| 113 | + } | ||
| 114 | + li { | ||
| 115 | + width: 378px; | ||
| 116 | + height: 175px; | ||
| 117 | + line-height: 175px; | ||
| 118 | + } | ||
| 119 | + } | ||
| 120 | + | ||
| 121 | + .logo-brand { | ||
| 122 | + height: 282px; | ||
| 123 | + | ||
| 124 | + &.logos-10 { | ||
| 125 | + height: 188px; | ||
| 126 | + } | ||
| 127 | + | ||
| 128 | + ul { | ||
| 129 | + width: 1158px; | ||
| 130 | + } | ||
| 131 | + li { | ||
| 132 | + width: 185px; | ||
| 133 | + height: 86px; | ||
| 134 | + } | ||
| 135 | + } | ||
| 136 | + | ||
| 137 | + .categorys-list { | ||
| 138 | + ul { | ||
| 139 | + width: 1158px; | ||
| 140 | + } | ||
| 141 | + li { | ||
| 142 | + margin: 0 8px 8px 0; | ||
| 143 | + width: 185px; | ||
| 144 | + height: 248px; | ||
| 145 | + | ||
| 146 | + &.cate-item0 { | ||
| 147 | + width: 185px; | ||
| 148 | + height: 504px; | ||
| 149 | + } | ||
| 150 | + &.cate-item1 { | ||
| 151 | + width: 377px; | ||
| 152 | + height: 504px; | ||
| 153 | + } | ||
| 154 | + } | ||
| 155 | + } | ||
| 156 | + .floor-header { | ||
| 157 | + margin: 80px 0 40px; | ||
| 158 | + | ||
| 159 | + .header-navs { | ||
| 160 | + li { | ||
| 161 | + padding: 1px 15px; | ||
| 162 | + } | ||
| 163 | + } | ||
| 164 | + } | ||
| 165 | +} | ||
| 166 | +} |
-
Please register or login to post a comment