Blame view

public/scss/channel/_brand.css 17.6 KB
liangxs authored
1 2 3 4 5 6 7 8 9 10 11
.brands {
    /* 路径导航样式重置 */
    .path-nav {
        border-bottom: none;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 20px;
    }

    .brands-tabs {
        position: relative;
yyq authored
12
        width: 100%;
毕凯 authored
13
liangxs authored
14 15
        a {
            display: block;
毕凯 authored
16
liangxs authored
17 18 19 20 21 22
            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
毕凯 authored
23
liangxs authored
24 25
        li {
            float: left;
yyq authored
26
            margin-left: 10px;
毕凯 authored
27
liangxs authored
28 29 30 31 32 33 34 35 36 37 38
            p {
                display: block;
                font-size: 30px;
                text-align: center;
                color: #dedede;
                position: absolute;
                top: 50%;
                width: 100%;
                margin-top: -15px;
                z-index: 3;
            }
毕凯 authored
39
yyq authored
40 41 42 43 44 45
            a {
                position: relative;
                width: 222px;
                height: 180px;
            }
liangxs authored
46 47 48
            .g-mask {
                opacity: 0.4;
            }
毕凯 authored
49
liangxs authored
50 51 52 53 54
            &:hover .g-mask,
            .g-mask-on {
                opacity: 0;
            }
        }
毕凯 authored
55
yyq authored
56 57 58 59
        li:first-child {
            margin-left: 0;
        }
liangxs authored
60
        .hover-contain {
yyq authored
61
            height: 30px;
liangxs authored
62 63
            position: relative;
            border-bottom: 1px solid #dfdfdf;
毕凯 authored
64
liangxs authored
65
            .hoverarr {
yyq authored
66 67
                height: 5px;
                width: 222px;
liangxs authored
68 69 70 71
                background-color: #3d3d3d;
                position: absolute;
                bottom: 0;
                z-index: 10;
毕凯 authored
72
liangxs authored
73 74 75 76 77 78 79 80 81 82 83 84 85 86
                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;
                }
            }
        }
    }
毕凯 authored
87
liangxs authored
88 89 90
    .header-navs {
        margin-right: -15px;
    }
毕凯 authored
91
liangxs authored
92 93 94 95 96 97 98 99 100 101
    .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;
毕凯 authored
102
liangxs authored
103 104 105 106
        span {
            display: inline-block;
            margin-right: 15px;
        }
毕凯 authored
107
liangxs authored
108 109 110 111 112 113 114 115
        a {
            display: inline-block;
            padding: 0 7px;
            text-align: center;
            color: #222;
            cursor: pointer;
        }
    }
毕凯 authored
116
liangxs authored
117 118 119 120 121 122
    .category-fix {
        position: fixed;
        top: 0;
        z-index: 100;
        margin-top: 0 !important;
    }
毕凯 authored
123
liangxs authored
124 125 126 127 128 129
    .brands-list {
        dl {
            position: relative;
            border-top: 1px dotted #999;
            padding: 20px 0;
        }
毕凯 authored
130
liangxs authored
131 132 133 134 135 136 137 138 139
        dt {
            position: absolute;
            width: 130px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            top: 50%;
            margin-top: -9px;
        }
毕凯 authored
140
liangxs authored
141 142
        dd {
            margin-left: 130px;
毕凯 authored
143
liangxs authored
144 145 146 147 148 149
            li {
                float: left;
                display: block;
                width: 170px;
                height: 18px;
            }
毕凯 authored
150
liangxs authored
151 152 153 154 155 156
            a {
                color: #666;
                line-height: 18px;
                font-size: 12px;
                position: relative;
            }
毕凯 authored
157
liangxs authored
158 159 160 161 162 163
            span {
                max-width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
毕凯 authored
164
liangxs authored
165 166 167 168
                &:hover {
                    text-decoration: underline;
                }
            }
毕凯 authored
169
liangxs authored
170 171 172 173
            .brands-dialog {
                display: inline;
                position: relative;
            }
毕凯 authored
174
liangxs authored
175 176 177 178
            .hot {
                font-weight: bold;
                color: #222;
            }
毕凯 authored
179
liangxs authored
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 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
            i {
                position: relative;
                top: -4px;
                color: #e01;
                font-size: 14px;
            }
        }
    }

    .brands-category {
        width: 1150px;
    }

    .brands-ad,
    .brands-logo {
        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;
        }
毕凯 authored
240
liangxs authored
241 242 243
        li {
            margin-right: 8px;
            margin-top: 32px;
毕凯 authored
244
liangxs authored
245 246 247 248 249 250
            a {
                width: 378px;
                height: 250px;
            }
        }
    }
毕凯 authored
251
liangxs authored
252 253 254 255
    .singlegoods {
        .g-list {
            margin-top: -10px;
        }
毕凯 authored
256
liangxs authored
257 258 259
        li {
            margin-right: 10px;
            margin-top: 10px;
毕凯 authored
260
liangxs authored
261 262 263 264 265
            a {
                width: 280px;
                height: 374px;
            }
        }
毕凯 authored
266
liangxs authored
267 268 269 270 271 272
        .singlegoods-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
毕凯 authored
273
liangxs authored
274 275 276 277 278 279 280 281 282 283 284 285 286 287 288
            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;
            }
        }
    }
毕凯 authored
289
liangxs authored
290 291 292 293
    .video {
        .g-list {
            margin-top: -10px;
        }
毕凯 authored
294
liangxs authored
295 296 297
        li {
            margin-right: 8px;
            margin-top: 10px;
毕凯 authored
298
liangxs authored
299 300 301 302 303
            a {
                width: 378px;
                height: 242px;
            }
        }
毕凯 authored
304
liangxs authored
305 306 307 308 309 310 311 312 313
        .video-play {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -30px;
            margin-top: -28px;
            width: 60px;
            height: 56px;
314
            background-image: resolve(index/play.png);
liangxs authored
315
        }
毕凯 authored
316
liangxs authored
317 318 319 320 321 322
        .video-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 32px;
            width: 100%;
毕凯 authored
323
liangxs authored
324 325 326 327 328 329 330 331 332 333 334 335 336 337 338
            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;
            }
        }
    }
毕凯 authored
339
liangxs authored
340 341
    .news {
        margin-bottom: 40px;
毕凯 authored
342
liangxs authored
343 344 345 346 347
        .news-pic {
            position: relative;
            float: left;
            width: 764px;
            height: 436px;
毕凯 authored
348
liangxs authored
349 350
            .slide-container {
                height: 100%;
毕凯 authored
351
liangxs authored
352 353 354 355 356 357 358 359
                li a {
                    height: 100%;
                    width: 764px;
                }

                .slide-wrapper {
                    height: 100%;
                }
毕凯 authored
360
liangxs authored
361 362 363
                .slide-switch {
                    display: none;
                }
毕凯 authored
364
liangxs authored
365 366 367 368
                .prev {
                    left: 0;
                    margin-left: 0;
                }
毕凯 authored
369
liangxs authored
370 371 372 373
                .next {
                    right: 0;
                    margin-right: 0;
                }
毕凯 authored
374
liangxs authored
375 376 377 378
                .slide-switch.show {
                    display: block;
                }
            }
毕凯 authored
379
liangxs authored
380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398
            .slide-tips {
                position: absolute;
                left: 0;
                bottom: 0;
                height: 30px;
                width: 100%;
                background: #000;
                opacity: 0.8;

                p {
                    position: absolute;
                    left: 18px;
                    z-index: 2;
                    height: 30px;
                    font-size: 14px;
                    line-height: 30px;
                    color: #fff;
                }
            }
毕凯 authored
399
liangxs authored
400 401 402 403
            .slide-pagination {
                right: 0;
                left: auto;
                bottom: 0;
毕凯 authored
404
liangxs authored
405 406 407 408
                .slide-shade {
                    opacity: 0;
                    background: none;
                }
毕凯 authored
409
liangxs authored
410 411 412 413 414
                span {
                    margin-top: 3px;
                }
            }
        }
毕凯 authored
415
liangxs authored
416 417
        .news-txt {
            float: right;
yyq authored
418 419
            width: 342px;
            height: 394px;
liangxs authored
420 421 422
            padding: 20px 16px;
            border: 1px solid #000;
            overflow: hidden;
毕凯 authored
423
liangxs authored
424 425 426
            ul {
                height: 100%;
            }
毕凯 authored
427
liangxs authored
428 429 430 431 432 433
            li {
                position: relative;
                display: block;
                margin-bottom: 10px;
                margin-left: 20px;
            }
毕凯 authored
434
liangxs authored
435 436 437 438 439 440
            a {
                font-size: 14px;
                line-height: 27px;
                cursor: pointer;
                color: #010101;
                display: block;
毕凯 authored
441
liangxs authored
442 443 444 445 446 447 448
                &:hover {
                    color: #fff;
                    background: #000;
                    padding-left: 12px;
                    transition: padding 0.4s;
                }
            }
毕凯 authored
449
liangxs authored
450 451 452 453 454 455 456 457 458 459 460 461 462 463 464
            i {
                position: absolute;
                top: 0;
                left: -26px;
                font-size: 22px;
            }
        }
    }

    .ads {
        margin: 40px 0;

        li {
            margin-right: 10px;
            margin-bottom: 10px;
毕凯 authored
465
liangxs authored
466 467
            a {
                width: 280px;
毕凯 authored
468
liangxs authored
469 470 471 472
                img {
                    height: 160px;
                }
            }
毕凯 authored
473
liangxs authored
474 475 476
            .name {
                font-size: 14px;
            }
毕凯 authored
477
liangxs authored
478 479 480 481 482 483
            .des {
                font-size: 12px;
            }
        }
    }
yyq authored
484 485 486 487 488 489
    .plustar-title {
        text-align: center;
        line-height: 40px;
        font-size: 20px;
    }
liangxs authored
490 491
    .brands-items {
        margin: 25px auto;
毕凯 authored
492
liangxs authored
493 494 495 496 497
        .brands-item {
            float: left;
            padding: 15px 0;
            width: 50%;
        }
毕凯 authored
498
liangxs authored
499 500 501 502 503
        a.brands-pic {
            float: left;
            width: 280px;
            height: 136px;
            display: block;
毕凯 authored
504
liangxs authored
505 506 507 508 509
            img {
                width: 100%;
                height: 100%;
            }
        }
毕凯 authored
510
liangxs authored
511 512 513 514 515
        .brand-info {
            float: right;
            padding: 0 20px;
            width: 255px;
            color: #000;
毕凯 authored
516
liangxs authored
517 518 519 520
            h3 {
                width: 100%;
                font-size: 20px;
                line-height: 1;
htoooth authored
521
yyq authored
522
                @mixin ellipsis ;
liangxs authored
523
            }
毕凯 authored
524
liangxs authored
525 526 527 528 529 530 531 532 533
            .brand-desc {
                padding: 12px 0;
                height: 92px;
                font-size: 14px;
                line-height: 22px;
                overflow: hidden;
            }
        }
    }
毕凯 authored
534
liangxs authored
535 536 537
    .pagination {
        margin: 40px 0 80px;
        text-align: center;
毕凯 authored
538
liangxs authored
539 540 541 542 543 544 545 546 547
        a {
            height: 24px;
            padding: 0 9px;
            line-height: 24px;
            display: inline-block;
            text-align: center;
            margin-right: 8px;
            color: #222;
            font-size: 12px;
毕凯 authored
548
liangxs authored
549 550 551 552 553 554 555
            i {
                position: relative;
                top: -1px;
                font-size: 10px;
                transform: scale(0.8);
            }
        }
毕凯 authored
556
liangxs authored
557 558 559 560 561 562 563 564 565 566 567
        a.cur {
            background: #222;
            color: #fff;
        }
    }
}

.min-screen .brands {
    .header-navs {
        margin-right: -10px;
    }
毕凯 authored
568
liangxs authored
569 570 571
    .sit-nav {
        padding-top: 10px;
        font-size: 12px;
毕凯 authored
572
liangxs authored
573 574 575 576
        .sep {
            margin: 0 6px;
        }
    }
毕凯 authored
577
liangxs authored
578 579 580
    .brands-category {
        width: 990px;
    }
毕凯 authored
581
liangxs authored
582 583 584 585 586 587 588
    .brands-tabs {
        li {
            a {
                width: 190px;
                height: 154px;
            }
        }
毕凯 authored
589
liangxs authored
590 591
        .hover-contain {
            height: 25px;
毕凯 authored
592
liangxs authored
593 594 595 596 597 598 599 600 601 602 603 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
            .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;
        }
毕凯 authored
632
liangxs authored
633 634 635
        li {
            margin-right: 9px;
            margin-top: 26px;
毕凯 authored
636
liangxs authored
637 638 639 640 641 642
            a {
                width: 324px;
                height: 214px;
            }
        }
    }
毕凯 authored
643
liangxs authored
644 645 646 647
    .singlegoods {
        .g-list {
            margin-top: -10px;
        }
毕凯 authored
648
liangxs authored
649 650 651
        li {
            margin-right: 10px;
            margin-top: 10px;
毕凯 authored
652
liangxs authored
653 654 655 656 657
            a {
                width: 240px;
                height: 324px;
            }
        }
毕凯 authored
658
liangxs authored
659 660 661 662 663 664
        .singlegoods-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
毕凯 authored
665
liangxs authored
666 667 668 669 670 671 672 673 674 675 676 677 678 679 680
            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;
            }
        }
    }
毕凯 authored
681
liangxs authored
682 683 684 685
    .video {
        .g-list {
            margin-top: -10px;
        }
毕凯 authored
686
liangxs authored
687 688 689
        li {
            margin-right: 9px;
            margin-top: 10px;
毕凯 authored
690
liangxs authored
691 692 693 694 695
            a {
                width: 324px;
                height: 206px;
            }
        }
毕凯 authored
696
liangxs authored
697 698 699 700 701 702 703 704 705
        .video-play {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -30px;
            margin-top: -28px;
            width: 60px;
            height: 56px;
706
            background-image: resolve(index/play.png);
liangxs authored
707
        }
毕凯 authored
708
liangxs authored
709 710 711 712 713 714
        .video-title {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 30px;
            width: 100%;
毕凯 authored
715
liangxs authored
716 717 718 719 720 721 722 723 724 725 726 727 728 729 730
            p {
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
                font-size: 14px;
                line-height: 30px;
                text-align: center;
                color: #fff;
            }
        }
    }
毕凯 authored
731
liangxs authored
732 733 734 735
    .news {
        .news-pic {
            width: 660px;
            height: 376px;
毕凯 authored
736
liangxs authored
737 738
            .slide-container {
                height: 376px;
毕凯 authored
739
liangxs authored
740 741 742 743 744
                img {
                    height: 376px;
                }
            }
        }
毕凯 authored
745
liangxs authored
746 747 748
        .news-txt {
            width: 284px;
            height: 334px;
毕凯 authored
749
liangxs authored
750 751 752 753 754
            li {
                margin-bottom: 13px;
            }
        }
    }
毕凯 authored
755
liangxs authored
756 757 758 759 760 761
    .ads {
        margin-bottom: 30px;

        li {
            margin-right: 10px;
            margin-bottom: 10px;
毕凯 authored
762
liangxs authored
763 764
            a {
                width: 240px;
毕凯 authored
765
liangxs authored
766 767 768 769
                img {
                    height: 138px;
                }
            }
毕凯 authored
770
liangxs authored
771 772 773
            .name {
                font-size: 14px;
            }
毕凯 authored
774
liangxs authored
775 776 777 778 779
            .des {
                font-size: 12px;
            }
        }
    }
毕凯 authored
780
liangxs authored
781 782 783 784 785
    .brands-items {
        a.brands-pic {
            width: 240px;
            height: 116px;
        }
毕凯 authored
786
liangxs authored
787 788
        .brand-info {
            width: 212px;
毕凯 authored
789
liangxs authored
790 791 792 793 794 795 796 797 798 799 800 801 802
            .brand-desc {
                height: 72px;
            }
        }
    }
}

.brands-layer {
    position: absolute;
    z-index: 100;
    top: -83px;
    left: 15px;
    width: 325px;
陈峰 authored
803
    min-height: 200px;
liangxs authored
804
    font-weight: normal;
陈峰 authored
805 806 807 808 809 810 811 812 813 814 815 816 817 818 819
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #ccc;

    .arrow {
        position: absolute;
        left: -12px;
        top: 80px;
        width: 20px;
        height: 20px;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
        transform: rotate(45deg);
    }
liangxs authored
820 821

    .layer-content {
陈峰 authored
822
        padding: 20px 20px 20px 20px;
毕凯 authored
823
liangxs authored
824 825 826 827 828 829 830 831 832
        .title {
            font-size: 24px;
            line-height: 24px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
毕凯 authored
833
liangxs authored
834 835 836 837
        .desc {
            margin: 5px 0;
            height: 72px;
            overflow: hidden;
毕凯 authored
838
liangxs authored
839 840 841 842 843 844
            img {
                width: 80px;
                height: 50px;
                margin: 3px 5px 0 0;
                float: left;
            }
毕凯 authored
845
liangxs authored
846 847 848 849 850 851 852
            .right {
                width: 180px;
                float: right;
                font-size: 12px;
                line-height: 150%;
                max-height: 80px;
            }
陈峰 authored
853 854 855 856 857 858

            .full {
                font-size: 12px;
                line-height: 150%;
                max-height: 80px;
            }
liangxs authored
859
        }
毕凯 authored
860
liangxs authored
861
        .featured {
陈峰 authored
862 863
            margin-top: 10px;
            margin-bottom: 5px;
liangxs authored
864 865
            font-size: 16px;
            margin-right: -15px;
毕凯 authored
866
liangxs authored
867 868 869 870 871 872 873 874 875 876 877 878 879 880
            img {
                height: 100px;
                width: 80px;
                float: left;
                margin: 15px 15px 0 0;
            }
        }
    }
}

.brands-layer-right {
    left: -325px;
    top: -83px;
陈峰 authored
881 882 883 884 885 886 887 888 889 890
    .arrow {
        left: initial;
        right: -12px;
        top: 80px;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-left: none;
        border-bottom: none;
    }
liangxs authored
891
    .layer-content {
陈峰 authored
892
        padding: 20px 20px 20px 20px;
liangxs authored
893 894
    }
}