Blame view

static/sass/cart/_chose-panel.scss 4.33 KB
1
.chose-panel {
2 3 4
    position: fixed;
    display: none;
    height: 100%;
5 6 7 8 9
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.3);
10
    z-index:3;
11
12 13
    .main {
        position: absolute;
14
        height: pxToRem(610px);
15 16 17 18 19 20 21 22 23
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
    }

    .infos {
        height: 460rem / $pxConvertRem;
        padding: 0 22rem / $pxConvertRem;
24
        // padding-top: 30rem / $pxConvertRem;
25 26 27 28 29 30 31 32
    }

    .chose-items {
        height: 325rem / $pxConvertRem;
        overflow: auto;
    }

    .basic-info {
uedxwg authored
33
        // height: 100rem / $pxConvertRem;
34 35 36 37
        overflow: hidden;
        position: relative;
        margin-bottom: pxToRem(30px);
        margin-top: pxToRem(30px);
38 39 40 41
    }

    .thumb {
        float: left;
uedxwg authored
42
        width: 100rem / $pxConvertRem;
43
        margin-right: 20rem / $pxConvertRem;
44 45 46
    }

    .text-info {
47
        height: auto;
48 49
        .name {
            font-size: 28rem / $pxConvertRem;
uedxwg authored
50
            height: 74rem / $pxConvertRem;
51
            overflow: hidden;
uedxwg authored
52 53 54
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
55 56
        }
57 58
        .price{
            font-size: pxToRem(24px);
uedxwg authored
59
            display: inline;
60
        }
61 62
        .sale-price {
            color: #e10;
梁志锋 authored
63
            margin-right: pxToRem(15px);
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

            &.no-price {
                color: #000;
            }
        }

        .market-price {
            color: #b0b0b0;
            text-decoration: line-through;
        }
    }

    .color-list, .size-list, .num {
        position: relative;
        font-size: 28rem / $pxConvertRem;
        padding-left: 80rem / $pxConvertRem;
uedxwg authored
80 81 82
        input.disabled{
            background-color:#fff;
            color: #000;
83 84 85
            opacity: 1;
            @include border-radius(0);
            -webkit-appearance: none;
uedxwg authored
86
        }
87 88 89 90 91
        > span {
            position: absolute;
            left: 0;
            top: 20rem / $pxConvertRem;
        }
92 93 94 95 96
        >span.left-num{
            position: absolute;
            left: pxToRem(380px);
            top: 20rem / $pxConvertRem;
        }
uedxwg authored
97 98 99
        span.disabled{
            color: #e6e6e6;
        }
100
    }
101
Lynnic authored
102 103 104
    .size-list li.hide {
        display: none;
    }
105 106 107 108

    .block {
        float: left;
        display: block;
109 110 111
        box-sizing: border-box;
        padding: 0 20rem / $pxConvertRem;
        min-width: 80rem / $pxConvertRem;
112 113 114 115 116 117 118 119 120 121 122 123 124 125
        height: 80rem / $pxConvertRem;
        border: 1px solid #000;
        margin-right: 30rem / $pxConvertRem;
        margin-bottom: 30rem / $pxConvertRem;
        line-height: 80rem / $pxConvertRem;
        text-align: center;

        &.chosed {
            border-color: #e10;
            background: image-url('shopping-cart/right.png') no-repeat;
            background-size: 38rem / $pxConvertRem;
            background-position: bottom right;
            color: #e10;
        }
126
127
        &.zero-stock {
128
           color: #e0e0e0;
129
           border-color: #e0e0e0;
130
        }
131
        &.zero-stock.chosed {
132
            border-color: #e0e0e0;
133 134
            background: none;
            color: #e0e0e0;
135
            background-color: #c0c0c0;
136
        }
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
    }

    .num {
        margin-bottom: 20rem / $pxConvertRem;
    }

    .num .btn {
        float: left;
        display: block;
        height: 80rem / $pxConvertRem;
        width: 80rem / $pxConvertRem;
        text-align: center;
        line-height: 80rem / $pxConvertRem;
        border: 1px solid #e6e6e6;

        &.disable {
            color: #e6e6e6;
        }
    }

    .good-num {
        float: left;
        width: 106rem / $pxConvertRem;
        height: 80rem / $pxConvertRem;
        line-height: 80rem / $pxConvertRem;
        padding: 0;
uedxwg authored
163
        border: 1px solid #e6e6e6;
164
        text-align: center;
uedxwg authored
165 166 167 168
        margin-left: -1px;
    }
    .btn-plus{
        margin-left: -1px;
169 170
    }
171
172
    .btn-wrap {
xuqi authored
173
        position: relative;
174 175 176 177
        height: 120rem / $pxConvertRem;
        border-top: 1px solid #e6e6e6;
        padding: 20rem / $pxConvertRem;
        text-align: center;
xuqi authored
178
        background: #fff;
179 180 181 182 183 184 185 186 187 188 189
        box-sizing: border-box;

        .btn-sure {
            width: 260rem / $pxConvertRem;
            height: 80rem / $pxConvertRem;
            background: #e10;
            color: #fff;
            font-size: 32rem / $pxConvertRem;
            border: none;
        }
    }
190
}