Blame view

public/scss/home/_brand.css 17 KB
weiqingting authored
1 2 3 4
.brands {
    .brands-tabs {
        margin-top: 20px;
        position: relative;
yyq authored
5
weiqingting authored
6 7
        a {
            display: block;
yyq authored
8
weiqingting authored
9 10 11 12 13
            img {
                width: 100%;
                height: 100%;
                display: block;
            }
hongweigao authored
14
        }
yyq authored
15
weiqingting authored
16 17
        li {
            float: left;
yyq authored
18
weiqingting authored
19 20 21 22 23 24 25 26 27 28 29
            p {
                display: block;
                font-size: 30px;
                text-align: center;
                color: #dedede;
                position: absolute;
                top: 50%;
                width: 100%;
                margin-top: -15px;
                z-index: 3;
            }
yyq authored
30
weiqingting authored
31 32 33
            .g-mask {
                opacity: 0.4;
            }
yyq authored
34
weiqingting authored
35 36 37 38 39
            &:hover .g-mask,
            .g-mask-on {
                opacity: 0;
            }
        }
yyq authored
40
weiqingting authored
41 42 43
        .hover-contain {
            position: relative;
            border-bottom: 1px solid #dfdfdf;
yyq authored
44
weiqingting authored
45 46 47 48 49
            .hoverarr {
                background-color: #3d3d3d;
                position: absolute;
                bottom: 0;
                z-index: 10;
yyq authored
50
weiqingting authored
51 52 53 54 55 56 57 58 59 60 61 62 63 64
                i {
                    width: 0;
                    height: 0;
                    position: absolute;
                    left: 50%;
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-bottom: 6px solid #3d3d3d;
                    top: -6px;
                    margin-left: -3px;
                }
            }
        }
    }
yyq authored
65
weiqingting authored
66 67 68
    .header-navs {
        margin-right: -15px;
    }
yyq authored
69
weiqingting authored
70 71 72 73 74 75 76 77 78 79
    .category-nav {
        border: 2px solid #222;
        padding-left: 16px;
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        font-weight: bold;
        position: relative;
        z-index: 100;
        background-color: #fff;
yyq authored
80
weiqingting authored
81 82 83 84
        span {
            display: inline-block;
            margin-right: 15px;
        }
yyq authored
85
weiqingting authored
86 87 88 89 90 91 92 93
        a {
            display: inline-block;
            padding: 0 7px;
            text-align: center;
            color: #222;
            cursor: pointer;
        }
    }
yyq authored
94
weiqingting authored
95 96 97 98 99 100
    .category-fix {
        position: fixed;
        top: 0;
        z-index: 100;
        margin-top: 0 !important;
    }
yyq authored
101
weiqingting authored
102 103 104 105 106 107
    .brands-list {
        dl {
            position: relative;
            border-top: 1px dotted #999;
            padding: 20px 0;
        }
yyq authored
108
weiqingting authored
109 110 111 112 113 114 115 116 117
        dt {
            position: absolute;
            width: 130px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            top: 50%;
            margin-top: -9px;
        }
yyq authored
118
weiqingting authored
119 120
        dd {
            margin-left: 130px;
yyq authored
121
weiqingting authored
122 123 124 125 126 127
            li {
                float: left;
                display: block;
                width: 170px;
                height: 18px;
            }
yyq authored
128
weiqingting authored
129 130 131 132 133
            a {
                color: #666;
                line-height: 18px;
                font-size: 12px;
                position: relative;
yyq authored
134
weiqingting authored
135 136 137 138 139 140
                span {
                    max-width: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: inline-block;
hongweigao authored
141
                }
yyq authored
142
hongweigao authored
143 144
                span:hover {
                    text-decoration: underline;
weiqingting authored
145 146
                }
            }
yyq authored
147
weiqingting authored
148 149 150 151
            .brands-dialog {
                display: inline;
                position: relative;
            }
yyq authored
152
weiqingting authored
153 154
            .hot {
                font-weight: bold;
yyq authored
155
                color: #222;
weiqingting authored
156
            }
yyq authored
157
weiqingting authored
158 159 160
            i {
                position: relative;
                top: -4px;
yyq authored
161
                color: #e01;
weiqingting authored
162 163 164 165 166 167 168 169
                font-size: 14px;
            }
        }
    }

    .sit-nav {
        padding-top: 10px;
        font-size: 12px;
yyq authored
170
weiqingting authored
171 172 173 174
        .sep {
            margin: 0 8px;
        }
    }
yyq authored
175
weiqingting authored
176 177 178 179 180 181
    .brands-category {
        width: 1150px;
    }

    .brands-tabs {
        width: 100%;
yyq authored
182
weiqingting authored
183 184
        li {
            margin-left: 10px;
yyq authored
185
weiqingting authored
186 187 188 189 190 191
            a {
                position: relative;
                width: 222px;
                height: 180px;
            }
        }
yyq authored
192
weiqingting authored
193 194 195
        li:first-child {
            margin-left: 0;
        }
yyq authored
196
weiqingting authored
197 198 199 200 201 202 203 204 205 206
        .hover-contain {
            height: 30px;

            .hoverarr {
                height: 5px;
                width: 222px;
            }
        }
    }
yyq authored
207 208
    .brands-ad,
    .brands-logo {
weiqingting authored
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
        margin: 20px 0;
    }

    .brands-ad li {
        float: left;
        margin-left: 10px;

        img {
            display: block;
            width: 280px;
            height: 280px;
        }

        &:first-child {
            margin-left: 0;

            img {
                width: 570px;
            }
        }
    }

    .brands-logo a {
        float: left;
        margin-left: 26px;

        &:first-child {
            margin-left: 0;
        }

        img {
            display: block;
            width: 91px;
            height: 38px;
        }
    }

    .list-floor {
        width: 1160px;
    }

    .brandfloor {
        .g-list {
            margin-top: -32px;
        }
yyq authored
254
weiqingting authored
255 256 257
        li {
            margin-right: 8px;
            margin-top: 32px;
yyq authored
258
weiqingting authored
259 260 261 262 263 264
            a {
                width: 378px;
                height: 250px;
            }
        }
    }
yyq authored
265
weiqingting authored
266 267 268 269
    .singlegoods {
        .g-list {
            margin-top: -10px;
        }
yyq authored
270
weiqingting authored
271 272 273
        li {
            margin-right: 10px;
            margin-top: 10px;
yyq authored
274
weiqingting authored
275 276 277 278 279
            a {
                width: 280px;
                height: 374px;
            }
        }
yyq authored
280
weiqingting authored
281 282 283 284 285 286
        .singlegoods-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
yyq authored
287
weiqingting authored
288 289 290 291 292
            p {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
yyq authored
293
                display: block;
weiqingting authored
294 295 296 297 298 299 300 301 302
                width: 100%;
                height: 100%;
                line-height: 50px;
                font-size: 18px;
                text-align: center;
                color: #fff;
            }
        }
    }
yyq authored
303
weiqingting authored
304 305 306 307
    .video {
        .g-list {
            margin-top: -10px;
        }
yyq authored
308
weiqingting authored
309 310 311
        li {
            margin-right: 8px;
            margin-top: 10px;
yyq authored
312
weiqingting authored
313 314 315 316 317
            a {
                width: 378px;
                height: 242px;
            }
        }
yyq authored
318
weiqingting authored
319 320 321 322 323 324 325 326 327 328 329
        .video-play {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -30px;
            margin-top: -28px;
            width: 60px;
            height: 56px;
            background-image: resolve(/index/play.png);
        }
yyq authored
330
weiqingting authored
331 332 333 334 335 336
        .video-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 32px;
            width: 100%;
yyq authored
337
weiqingting authored
338 339 340 341 342
            p {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
yyq authored
343
                display: block;
weiqingting authored
344 345 346 347 348 349 350 351 352
                width: 100%;
                height: 100%;
                font-size: 14px;
                line-height: 32px;
                text-align: center;
                color: #fff;
            }
        }
    }
yyq authored
353
weiqingting authored
354 355
    .news {
        margin-bottom: 40px;
yyq authored
356 357

        .news-pic {
weiqingting authored
358 359 360 361
            position: relative;
            float: left;
            width: 764px;
            height: 436px;
yyq authored
362
weiqingting authored
363 364
            .slide-container {
                height: 100%;
yyq authored
365
weiqingting authored
366 367 368 369 370 371 372 373
                li a {
                    height: 100%;
                    width: 764px;
                }

                .slide-wrapper {
                    height: 100%;
                }
yyq authored
374
weiqingting authored
375 376
                .slide-switch {
                    display: none;
hongweigao authored
377
                }
weiqingting authored
378
hongweigao authored
379 380 381 382
                .slide-switch .prev {
                    left: 0;
                    margin-left: 0;
                }
yyq authored
383
hongweigao authored
384 385 386
                .slide-switch .next {
                    right: 0;
                    margin-right: 0;
weiqingting authored
387
                }
yyq authored
388
weiqingting authored
389 390 391 392
                .slide-switch.show {
                    display: block;
                }
            }
yyq authored
393 394

            .slide-tips {
weiqingting authored
395 396 397 398 399 400
                position: absolute;
                left: 0;
                bottom: 0;
                height: 30px;
                width: 100%;
                background: #000;
yyq authored
401
                opacity: 0.8;
weiqingting authored
402
yyq authored
403
                p {
weiqingting authored
404 405 406 407 408 409 410 411 412
                    position: absolute;
                    left: 18px;
                    z-index: 2;
                    height: 30px;
                    font-size: 14px;
                    line-height: 30px;
                    color: #fff;
                }
            }
yyq authored
413 414

            .slide-pagination {
weiqingting authored
415 416 417
                right: 0;
                left: auto;
                bottom: 0;
yyq authored
418 419

                .slide-shade {
weiqingting authored
420
                    opacity: 0;
yyq authored
421
                    background: none;
weiqingting authored
422
                }
yyq authored
423
weiqingting authored
424 425 426 427 428
                span {
                    margin-top: 3px;
                }
            }
        }
yyq authored
429
weiqingting authored
430 431 432 433 434
        .news-txt {
            float: right;
            padding: 20px 16px;
            border: 1px solid #000;
            overflow: hidden;
yyq authored
435
weiqingting authored
436 437 438
            ul {
                height: 100%;
            }
yyq authored
439
weiqingting authored
440 441 442 443 444 445
            li {
                position: relative;
                display: block;
                margin-bottom: 10px;
                margin-left: 20px;
            }
yyq authored
446
weiqingting authored
447 448 449 450 451 452
            a {
                font-size: 14px;
                line-height: 27px;
                cursor: pointer;
                color: #010101;
                display: block;
yyq authored
453
weiqingting authored
454 455 456 457 458 459 460
                &:hover {
                    color: #fff;
                    background: #000;
                    padding-left: 12px;
                    transition: padding 0.4s;
                }
            }
yyq authored
461
weiqingting authored
462 463 464 465 466 467 468
            i {
                position: absolute;
                top: 0;
                left: -26px;
                font-size: 22px;
            }
        }
yyq authored
469
weiqingting authored
470 471 472 473 474 475 476 477 478 479 480 481
        .news-txt {
            width: 342px;
            height: 394px;
        }
    }

    .ads {
        margin: 40px 0;

        li {
            margin-right: 10px;
            margin-bottom: 10px;
yyq authored
482
weiqingting authored
483 484
            a {
                width: 280px;
yyq authored
485
weiqingting authored
486 487 488 489
                img {
                    height: 160px;
                }
            }
yyq authored
490
weiqingting authored
491
            .name {
yyq authored
492
                font-size: 14px;
weiqingting authored
493
            }
yyq authored
494
weiqingting authored
495 496 497 498 499 500
            .des {
                font-size: 12px;
            }
        }
    }
yyq authored
501
    .brands-items {
weiqingting authored
502
        margin: 25px auto;
yyq authored
503
weiqingting authored
504 505 506 507 508
        .brands-item {
            float: left;
            padding: 15px 0;
            width: 50%;
        }
yyq authored
509
weiqingting authored
510 511 512 513 514
        a.brands-pic {
            float: left;
            width: 280px;
            height: 136px;
            display: block;
yyq authored
515
weiqingting authored
516 517 518 519 520
            img {
                width: 100%;
                height: 100%;
            }
        }
yyq authored
521
weiqingting authored
522 523 524 525 526
        .brand-info {
            float: right;
            padding: 0 20px;
            width: 255px;
            color: #000;
yyq authored
527
weiqingting authored
528 529 530 531
            h3 {
                width: 100%;
                font-size: 20px;
                line-height: 1;
yyq authored
532 533

                @mixin ellipsis ;
weiqingting authored
534
            }
yyq authored
535
weiqingting authored
536 537 538 539 540 541 542 543 544
            .brand-desc {
                padding: 12px 0;
                height: 92px;
                font-size: 14px;
                line-height: 22px;
                overflow: hidden;
            }
        }
    }
yyq authored
545
weiqingting authored
546 547 548
    .pagination {
        margin: 40px 0 80px;
        text-align: center;
yyq authored
549
weiqingting authored
550 551 552 553 554 555 556 557 558
        a {
            height: 24px;
            padding: 0 9px;
            line-height: 24px;
            display: inline-block;
            text-align: center;
            margin-right: 8px;
            color: #222;
            font-size: 12px;
yyq authored
559
weiqingting authored
560 561 562 563 564 565 566
            i {
                position: relative;
                top: -1px;
                font-size: 10px;
                transform: scale(0.8);
            }
        }
yyq authored
567
weiqingting authored
568 569 570 571 572 573 574 575 576 577 578
        a.cur {
            background: #222;
            color: #fff;
        }
    }
}

.min-screen .brands {
    .header-navs {
        margin-right: -10px;
    }
yyq authored
579
weiqingting authored
580 581 582
    .sit-nav {
        padding-top: 10px;
        font-size: 12px;
yyq authored
583
weiqingting authored
584 585 586 587
        .sep {
            margin: 0 6px;
        }
    }
yyq authored
588
weiqingting authored
589 590 591
    .brands-category {
        width: 990px;
    }
yyq authored
592
weiqingting authored
593 594 595 596 597 598 599
    .brands-tabs {
        li {
            a {
                width: 190px;
                height: 154px;
            }
        }
yyq authored
600
weiqingting authored
601 602
        .hover-contain {
            height: 25px;
yyq authored
603
weiqingting authored
604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642
            .hoverarr {
                height: 4px;
                width: 190px;
            }
        }
    }

    .brands-ad li {
        img {
            width: 240px;
            height: 240px;
        }

        &:first-child img {
            width: 490px;
        }
    }

    .brands-logo a {
        margin-left: 10px;

        &:first-child {
            margin-left: 0;
        }

        img {
            width: 90px;
            height: 37px;
        }
    }

    .list-floor {
        width: 1000px;
    }

    .brandfloor {
        .g-list {
            margin-top: -26px;
        }
yyq authored
643
weiqingting authored
644 645 646
        li {
            margin-right: 9px;
            margin-top: 26px;
yyq authored
647
weiqingting authored
648 649 650 651 652 653
            a {
                width: 324px;
                height: 214px;
            }
        }
    }
yyq authored
654
weiqingting authored
655 656 657 658
    .singlegoods {
        .g-list {
            margin-top: -10px;
        }
yyq authored
659
weiqingting authored
660 661 662
        li {
            margin-right: 10px;
            margin-top: 10px;
yyq authored
663
weiqingting authored
664 665 666 667 668
            a {
                width: 240px;
                height: 324px;
            }
        }
yyq authored
669
weiqingting authored
670 671 672 673 674 675
        .singlegoods-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
yyq authored
676 677

            p {
weiqingting authored
678 679 680 681 682 683 684 685 686 687 688 689 690 691
                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;
            }
        }
    }
yyq authored
692
weiqingting authored
693 694 695 696
    .video {
        .g-list {
            margin-top: -10px;
        }
yyq authored
697
weiqingting authored
698 699 700
        li {
            margin-right: 9px;
            margin-top: 10px;
yyq authored
701
weiqingting authored
702 703 704 705 706
            a {
                width: 324px;
                height: 206px;
            }
        }
yyq authored
707
weiqingting authored
708 709 710 711 712 713 714 715 716 717 718
        .video-play {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -30px;
            margin-top: -28px;
            width: 60px;
            height: 56px;
            background-image: resolve(/index/play.png);
        }
yyq authored
719
weiqingting authored
720 721 722 723 724 725
        .video-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 30px;
            width: 100%;
yyq authored
726
weiqingting authored
727 728 729 730 731
            p {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
yyq authored
732
                display: block;
weiqingting authored
733 734 735 736 737 738 739 740 741
                width: 100%;
                height: 100%;
                font-size: 14px;
                line-height: 30px;
                text-align: center;
                color: #fff;
            }
        }
    }
yyq authored
742
weiqingting authored
743 744 745 746
    .news {
        .news-pic {
            width: 660px;
            height: 376px;
yyq authored
747
weiqingting authored
748 749
            .slide-container {
                height: 376px;
yyq authored
750
weiqingting authored
751 752 753 754 755
                img {
                    height: 376px;
                }
            }
        }
yyq authored
756
weiqingting authored
757 758 759
        .news-txt {
            width: 284px;
            height: 334px;
yyq authored
760
weiqingting authored
761 762 763 764 765
            li {
                margin-bottom: 13px;
            }
        }
    }
yyq authored
766
weiqingting authored
767 768 769 770 771 772
    .ads {
        margin-bottom: 30px;

        li {
            margin-right: 10px;
            margin-bottom: 10px;
yyq authored
773
weiqingting authored
774 775
            a {
                width: 240px;
yyq authored
776
weiqingting authored
777 778 779 780
                img {
                    height: 138px;
                }
            }
yyq authored
781
weiqingting authored
782
            .name {
yyq authored
783
                font-size: 14px;
weiqingting authored
784
            }
yyq authored
785
weiqingting authored
786 787 788 789 790
            .des {
                font-size: 12px;
            }
        }
    }
yyq authored
791
weiqingting authored
792 793 794 795 796
    .brands-items {
        a.brands-pic {
            width: 240px;
            height: 116px;
        }
yyq authored
797
weiqingting authored
798 799
        .brand-info {
            width: 212px;
yyq authored
800
weiqingting authored
801 802 803 804 805 806 807 808 809 810 811 812 813 814
            .brand-desc {
                height: 72px;
            }
        }
    }
}

.brands-layer {
    position: absolute;
    z-index: 100;
    top: -83px;
    left: 15px;
    width: 325px;
    height: 287px;
815
    background: resolve(index/brands-layer.png) no-repeat;
weiqingting authored
816 817 818 819
    font-weight: normal;

    .layer-content {
        padding: 20px 20px 20px 35px;
yyq authored
820
weiqingting authored
821 822 823 824 825 826 827 828 829
        .title {
            font-size: 24px;
            line-height: 24px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
yyq authored
830
weiqingting authored
831
        .desc {
yyq authored
832
            margin: 5px 0;
weiqingting authored
833 834
            height: 72px;
            overflow: hidden;
yyq authored
835
weiqingting authored
836 837 838 839 840 841
            img {
                width: 80px;
                height: 50px;
                margin: 3px 5px 0 0;
                float: left;
            }
yyq authored
842
weiqingting authored
843 844 845 846 847 848 849 850
            .right {
                width: 180px;
                float: right;
                font-size: 12px;
                line-height: 150%;
                max-height: 80px;
            }
        }
yyq authored
851
weiqingting authored
852 853 854
        .featured {
            font-size: 16px;
            margin-right: -15px;
yyq authored
855
weiqingting authored
856 857 858 859 860 861 862 863 864
            img {
                height: 100px;
                width: 80px;
                float: left;
                margin: 15px 15px 0 0;
            }
        }
    }
}
yyq authored
865
weiqingting authored
866
.brands-layer-right {
867
    background: resolve(index/brands-layer.png) no-repeat 0 -287px;
weiqingting authored
868 869 870 871 872 873
    left: -325px;
    top: -83px;

    .layer-content {
        padding: 20px 35px 20px 20px;
    }
874
}