Blame view

public/scss/channel/_shop-recommand.css 2.23 KB
zzzzzzz authored
1 2 3 4 5 6 7 8
.shop-recom {
    &-swiper-container {
        position: relative;
        width: 100%;
        height: 407px;

        .top {
            float: left;
zzzzzzz authored
9
            height: 174px;
zzzzzzz authored
10 11 12 13 14
            width: 100%;
        }

        .bottom {
            float: left;
zzzzzzz authored
15
            height: 183px;
zzzzzzz authored
16
            width: 50%;
zzzzzzz authored
17
            background: #f5f7f6;
zzzzzzz authored
18 19 20 21 22

            &.left {
                border-right: 1px solid #e0e0e0;
            }
zzzzzzz authored
23 24 25 26
            img {
                width: 138px;
                height: 100%;
                margin: 0 auto;
zzzzzzz authored
27
            }
zzzzzzz authored
28 29
        }
zzzzzzz authored
30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
        .fav-container {
            position: absolute;
            top: 12px;
            left: 15px;

            span {
                font-size: 18px;
                color: #fff;
            }
        }

        .shop-fav {
            display: inline-block;
            height: 21px;
            width: 24px;
            background: resolve("channel/faved.png");
            background-size: 100% 100%;
            vertical-align: middle;
            margin-right: 8px;
        }

        .shop-notfav {
            display: inline-block;
            height: 21px;
            width: 24px;
            background: resolve("channel/notfav.png");
            background-size: 100% 100%;
            vertical-align: middle;
            margin-right: 8px;
        }

        .faved-num {
            position: absolute;
            top: 12px;
            right: 12px;
            color: #fff;
            font-size: 18px;
        }
zzzzzzz authored
68
    }
zzzzzzz authored
69 70 71 72 73

    .swiper-wrapper {
        white-space: nowrap;
    }
zzzzzzz authored
74 75 76
    .swiper-slide {
        text-align: center;
        font-size: 18px;
ccbikai(👎🏻🍜) authored
77
        background: #fff;
zzzzzzz authored
78 79 80
    }

    .recom-shop {
zzzzzzz authored
81
        position: relative;
zzzzzzz authored
82 83 84
        display: inline-block;
        height: 354px;
        width: 358px;
85
        margin: 26px 26px 0;
zzzzzzz authored
86
        border-radius: 5px;
zzzzzzz authored
87
        vertical-align: top;
88
        transition: all 0.3s;
zzzzzzz authored
89 90 91 92 93 94 95

        .shop-top {
            position: absolute;
            top: 0;
            left: 0;
            height: 45px;
            width: 358px;
ccbikai(👎🏻🍜) authored
96
            background: resolve("channel/shop-top.png");
zzzzzzz authored
97 98
            background-size: 100% 100%;
        }
zzzzzzz authored
99 100 101
    }

    .recom-active {
102 103
        transform: scale(1.15);
        transform-origin: 50% 0 0;
zzzzzzz authored
104 105
        margin-top: 0;
    }
郭成尧 authored
106
}