Showing
8 changed files
with
1279 additions
and
2 deletions
static/sass/cart/_chose-panel.css
0 → 100644
| 1 | +.chose-panel { | ||
| 2 | + position: fixed; | ||
| 3 | + display: none; | ||
| 4 | + height: 100%; | ||
| 5 | + top: 0; | ||
| 6 | + bottom: 0; | ||
| 7 | + left: 0; | ||
| 8 | + right: 0; | ||
| 9 | + background: rgba(0,0,0,.3); | ||
| 10 | + z-index:3; | ||
| 11 | + | ||
| 12 | + | ||
| 13 | + .main { | ||
| 14 | + position: absolute; | ||
| 15 | + height: 610px; | ||
| 16 | + bottom: 0; | ||
| 17 | + left: 0; | ||
| 18 | + right: 0; | ||
| 19 | + background: #fff; | ||
| 20 | + } | ||
| 21 | + | ||
| 22 | + .infos { | ||
| 23 | + height: 460px; | ||
| 24 | + padding: 0 22px; | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + .chose-items { | ||
| 28 | + height: 325px; | ||
| 29 | + overflow: auto; | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + .basic-info { | ||
| 33 | + overflow: hidden; | ||
| 34 | + position: relative; | ||
| 35 | + margin-bottom: 30px; | ||
| 36 | + margin-top: 30px; | ||
| 37 | + } | ||
| 38 | + | ||
| 39 | + .thumb { | ||
| 40 | + float: left; | ||
| 41 | + width: 100px; | ||
| 42 | + margin-right: 20px; | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + .text-info { | ||
| 46 | + height: auto; | ||
| 47 | + .name { | ||
| 48 | + font-size: 28px; | ||
| 49 | + height: 74px; | ||
| 50 | + overflow: hidden; | ||
| 51 | + display: -webkit-box; | ||
| 52 | + -webkit-line-clamp: 2; | ||
| 53 | + -webkit-box-orient: vertical; | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + .price{ | ||
| 57 | + font-size: 24px; | ||
| 58 | + display: inline; | ||
| 59 | + } | ||
| 60 | + .sale-price { | ||
| 61 | + color: #e10; | ||
| 62 | + margin-right: 15px; | ||
| 63 | + | ||
| 64 | + &.no-price { | ||
| 65 | + color: #000; | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + | ||
| 69 | + .market-price { | ||
| 70 | + color: #b0b0b0; | ||
| 71 | + text-decoration: line-through; | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + .color-list, .size-list, .num { | ||
| 76 | + position: relative; | ||
| 77 | + font-size: 28px; | ||
| 78 | + padding-left: 80px; | ||
| 79 | + input.disabled{ | ||
| 80 | + background-color:#fff; | ||
| 81 | + color: #000; | ||
| 82 | + opacity: 1; | ||
| 83 | + border-radius: 0; | ||
| 84 | + -webkit-appearance: none; | ||
| 85 | + } | ||
| 86 | + > span { | ||
| 87 | + position: absolute; | ||
| 88 | + left: 0; | ||
| 89 | + top: 20px; | ||
| 90 | + } | ||
| 91 | + >span.left-num{ | ||
| 92 | + position: absolute; | ||
| 93 | + left: 380px; | ||
| 94 | + top: 20px; | ||
| 95 | + } | ||
| 96 | + span.disabled{ | ||
| 97 | + color: #e6e6e6; | ||
| 98 | + } | ||
| 99 | + } | ||
| 100 | + | ||
| 101 | + .size-list li.hide { | ||
| 102 | + display: none; | ||
| 103 | + } | ||
| 104 | + | ||
| 105 | + .block { | ||
| 106 | + float: left; | ||
| 107 | + display: block; | ||
| 108 | + box-sizing: border-box; | ||
| 109 | + padding: 0 20px; | ||
| 110 | + min-width: 80px; | ||
| 111 | + height: 80px; | ||
| 112 | + border: 1px solid #000; | ||
| 113 | + margin-right: 30px; | ||
| 114 | + margin-bottom: 30px; | ||
| 115 | + line-height: 80px; | ||
| 116 | + text-align: center; | ||
| 117 | + | ||
| 118 | + &.chosed { | ||
| 119 | + border-color: #e10; | ||
| 120 | + background: resolve('shopping-cart/right.png') no-repeat; | ||
| 121 | + background-size: 38px; | ||
| 122 | + background-position: bottom right; | ||
| 123 | + color: #e10; | ||
| 124 | + } | ||
| 125 | + | ||
| 126 | + &.zero-stock { | ||
| 127 | + color: #e0e0e0; | ||
| 128 | + border-color: #e0e0e0; | ||
| 129 | + } | ||
| 130 | + &.zero-stock.chosed { | ||
| 131 | + border-color: #e0e0e0; | ||
| 132 | + background: none; | ||
| 133 | + color: #e0e0e0; | ||
| 134 | + background-color: #c0c0c0; | ||
| 135 | + } | ||
| 136 | + } | ||
| 137 | + | ||
| 138 | + .num { | ||
| 139 | + margin-bottom: 20px; | ||
| 140 | + } | ||
| 141 | + | ||
| 142 | + .num .btn { | ||
| 143 | + float: left; | ||
| 144 | + display: block; | ||
| 145 | + height: 80px; | ||
| 146 | + width: 80px; | ||
| 147 | + text-align: center; | ||
| 148 | + line-height: 80px; | ||
| 149 | + border: 1px solid #e6e6e6; | ||
| 150 | + | ||
| 151 | + &.disable { | ||
| 152 | + color: #e6e6e6; | ||
| 153 | + } | ||
| 154 | + } | ||
| 155 | + | ||
| 156 | + .good-num { | ||
| 157 | + float: left; | ||
| 158 | + width: 106px; | ||
| 159 | + height: 80px; | ||
| 160 | + line-height: 80px; | ||
| 161 | + padding: 0; | ||
| 162 | + border: 1px solid #e6e6e6; | ||
| 163 | + text-align: center; | ||
| 164 | + margin-left: -1px; | ||
| 165 | + } | ||
| 166 | + .btn-plus{ | ||
| 167 | + margin-left: -1px; | ||
| 168 | + } | ||
| 169 | + | ||
| 170 | + .btn-wrap { | ||
| 171 | + position: relative; | ||
| 172 | + height: 120px; | ||
| 173 | + border-top: 1px solid #e6e6e6; | ||
| 174 | + padding: 20px; | ||
| 175 | + text-align: center; | ||
| 176 | + background: #fff; | ||
| 177 | + box-sizing: border-box; | ||
| 178 | + | ||
| 179 | + .btn-sure { | ||
| 180 | + width: 260px; | ||
| 181 | + height: 80px; | ||
| 182 | + background: #e10; | ||
| 183 | + color: #fff; | ||
| 184 | + font-size: 32px; | ||
| 185 | + border: none; | ||
| 186 | + } | ||
| 187 | + } | ||
| 188 | +} |
static/sass/cart/_gift-advance-good.css
0 → 100644
| 1 | +.gift-advance-page { | ||
| 2 | + .gift-advance-good { | ||
| 3 | + position: relative; | ||
| 4 | + padding: 20px 0; | ||
| 5 | + margin-left: 34px; | ||
| 6 | + height: 160px; | ||
| 7 | + border-bottom: 1px solid #e0e0e0; | ||
| 8 | + } | ||
| 9 | + | ||
| 10 | + .advance-block:last-child .gift-advance-good:last-child { | ||
| 11 | + border-bottom: 1px solid #e0e0e0; | ||
| 12 | + } | ||
| 13 | + | ||
| 14 | + .thumb-wrap { | ||
| 15 | + position: relative; | ||
| 16 | + float: left; | ||
| 17 | + width: 120px; | ||
| 18 | + height: 160px; | ||
| 19 | + | ||
| 20 | + .thumb { | ||
| 21 | + width: 100%; | ||
| 22 | + height: 100%; | ||
| 23 | + } | ||
| 24 | + } | ||
| 25 | + | ||
| 26 | + .tag { | ||
| 27 | + position: absolute; | ||
| 28 | + bottom: 0; | ||
| 29 | + left: 0; | ||
| 30 | + right: 0; | ||
| 31 | + height: 25px; | ||
| 32 | + color: #fff; | ||
| 33 | + text-align: center; | ||
| 34 | + background: #eb76aa; | ||
| 35 | + | ||
| 36 | + &:before { | ||
| 37 | + content: '加价购'; | ||
| 38 | + display: block; | ||
| 39 | + font-size: 12px; | ||
| 40 | + line-height: 25px; | ||
| 41 | + transform: scale(0.833); | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + .deps { | ||
| 46 | + margin-left: 135px; | ||
| 47 | + } | ||
| 48 | + | ||
| 49 | + .gift-advance-good .name { | ||
| 50 | + margin-bottom: 20px; | ||
| 51 | + width: 440px; | ||
| 52 | + font-size: 28px; | ||
| 53 | + } | ||
| 54 | + | ||
| 55 | + .row:nth-child(2) { | ||
| 56 | + font-size: 22px; | ||
| 57 | + height: 45px; | ||
| 58 | + line-height: 45px; | ||
| 59 | + | ||
| 60 | + > span { | ||
| 61 | + margin-right: 15px; | ||
| 62 | + } | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + .row:nth-child(3) { | ||
| 66 | + position: relative; | ||
| 67 | + } | ||
| 68 | + | ||
| 69 | + .color, .size { | ||
| 70 | + color: #b6b6b6; | ||
| 71 | + } | ||
| 72 | + | ||
| 73 | + .price { | ||
| 74 | + font-size: 24px; | ||
| 75 | + color: #f1545b; | ||
| 76 | + | ||
| 77 | + &.market-price { | ||
| 78 | + color: #999; | ||
| 79 | + text-decoration: line-through; | ||
| 80 | + } | ||
| 81 | + } | ||
| 82 | + | ||
| 83 | + .count { | ||
| 84 | + font-size: 20px; | ||
| 85 | + color: #999; | ||
| 86 | + margin-left: 22px; | ||
| 87 | + } | ||
| 88 | + | ||
| 89 | + .chose { | ||
| 90 | + position: absolute; | ||
| 91 | + width: 88px; | ||
| 92 | + height: 58px; | ||
| 93 | + background: #f8f8f8; | ||
| 94 | + border: 1px solid #ccc; | ||
| 95 | + right: 20px; | ||
| 96 | + top: 71px; | ||
| 97 | + font-size: 26px; | ||
| 98 | + line-height: 58px; | ||
| 99 | + text-align: center; | ||
| 100 | + } | ||
| 101 | + | ||
| 102 | + .title { | ||
| 103 | + width: 600px; | ||
| 104 | + height: 60px; | ||
| 105 | + line-height: 60px; | ||
| 106 | + padding: 0 20px; | ||
| 107 | + font-size: 24px; | ||
| 108 | + background: #f8f8f8; | ||
| 109 | + white-space: nowrap; | ||
| 110 | + text-overflow: ellipsis; | ||
| 111 | + overflow: hidden; | ||
| 112 | + } | ||
| 113 | + | ||
| 114 | + .gift-block .tag { | ||
| 115 | + background: #a1ce4e; | ||
| 116 | + &:before { | ||
| 117 | + content: '赠品'; | ||
| 118 | + } | ||
| 119 | + } | ||
| 120 | +} |
static/sass/cart/_good.css
0 → 100644
| 1 | +.shopping-cart-good { | ||
| 2 | + $cartRed: #d0253b; | ||
| 3 | + position: relative; | ||
| 4 | + padding-left: 16px; | ||
| 5 | + | ||
| 6 | + .prevent-img-click { | ||
| 7 | + position: absolute; | ||
| 8 | + width: 20px; | ||
| 9 | + height: 200px; | ||
| 10 | + background-color: transparent; | ||
| 11 | + z-index: 99; | ||
| 12 | + } | ||
| 13 | + | ||
| 14 | + .checkbox { | ||
| 15 | + position: absolute; | ||
| 16 | + top: 50%; | ||
| 17 | + margin-top: -34px; | ||
| 18 | + margin-left: 8px; | ||
| 19 | + font-size: 28px; | ||
| 20 | + | ||
| 21 | + &.icon-cb-checked { | ||
| 22 | + color: #000; | ||
| 23 | + } | ||
| 24 | + | ||
| 25 | + &.disabled { | ||
| 26 | + color: #f0f0f0; | ||
| 27 | + } | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + .few-tag { | ||
| 31 | + width: 150px; | ||
| 32 | + position: absolute; | ||
| 33 | + text-align: center; | ||
| 34 | + top: 72%; | ||
| 35 | + color: #fff; | ||
| 36 | + | ||
| 37 | + span { | ||
| 38 | + display: inline-block; | ||
| 39 | + transform: scale(0.833); | ||
| 40 | + } | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + .gift-tag { | ||
| 44 | + background-color: #88BE51; | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + .plus-tag { | ||
| 48 | + background-color: #FC1264; | ||
| 49 | + } | ||
| 50 | + | ||
| 51 | + .few-tag-expire { | ||
| 52 | + position: absolute; | ||
| 53 | + top: 40%; | ||
| 54 | + left: 20px; | ||
| 55 | + background-color: #7f7f7f; | ||
| 56 | + display: inline-block; | ||
| 57 | + color: #fff; | ||
| 58 | + border-radius: 12px; | ||
| 59 | + padding: 4px; | ||
| 60 | + font-size: 20px; | ||
| 61 | + width: 48px; | ||
| 62 | + text-align: center; | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + .info { | ||
| 66 | + float: left; | ||
| 67 | + margin-left: 60px; | ||
| 68 | + padding: 16px 0; | ||
| 69 | + padding-right: 20px; | ||
| 70 | + } | ||
| 71 | + | ||
| 72 | + .fixed-height { | ||
| 73 | + height: 2.7rem; | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + .thumb { | ||
| 77 | + float: left; | ||
| 78 | + width: 150px; | ||
| 79 | + background-size: 100%; | ||
| 80 | + background-repeat: no-repeat; | ||
| 81 | + } | ||
| 82 | + | ||
| 83 | + .deps { | ||
| 84 | + position: relative; | ||
| 85 | + width: 380px; | ||
| 86 | + margin-left: 180px; | ||
| 87 | + border-bottom: 1px solid #e0e0e0; | ||
| 88 | + padding: 0.5rem 0; | ||
| 89 | + } | ||
| 90 | + | ||
| 91 | + .name { | ||
| 92 | + display: inline-block; | ||
| 93 | + width: 80%; | ||
| 94 | + color: #5a5a5a; | ||
| 95 | + font-size: 0.6rem; | ||
| 96 | + line-height: 0.7rem; | ||
| 97 | + } | ||
| 98 | + | ||
| 99 | + .color-size-row > span { | ||
| 100 | + margin-right: 15px; | ||
| 101 | + } | ||
| 102 | + | ||
| 103 | + .color, .size { | ||
| 104 | + font-size: 0.6rem; | ||
| 105 | + color: #b6b6b6; | ||
| 106 | + } | ||
| 107 | + | ||
| 108 | + .appear-date { | ||
| 109 | + float: left; | ||
| 110 | + color: $cartRed; | ||
| 111 | + display: block; | ||
| 112 | + font-size: 0.5rem; | ||
| 113 | + } | ||
| 114 | + | ||
| 115 | + .price { | ||
| 116 | + font-size: 0.6rem; | ||
| 117 | + color: $cartRed; | ||
| 118 | + display: inline; | ||
| 119 | + .sale-price{ | ||
| 120 | + color: #b0b0b0; | ||
| 121 | + text-decoration: line-through; | ||
| 122 | + } | ||
| 123 | + } | ||
| 124 | + | ||
| 125 | + .count { | ||
| 126 | + font-size: 20px; | ||
| 127 | + color: #999; | ||
| 128 | + display: inline-block; | ||
| 129 | + width: 22%; | ||
| 130 | + position: absolute; | ||
| 131 | + text-align: center; | ||
| 132 | + } | ||
| 133 | + | ||
| 134 | + .low-stocks { | ||
| 135 | + display: inline-block; | ||
| 136 | + width: 100px; | ||
| 137 | + height: 30px; | ||
| 138 | + line-height: 30px; | ||
| 139 | + font-size: 22px; | ||
| 140 | + border: none; | ||
| 141 | + color: #fff; | ||
| 142 | + text-align: center; | ||
| 143 | + float: right; | ||
| 144 | + margin-right: 16px; | ||
| 145 | + padding: 4px; | ||
| 146 | + | ||
| 147 | + border-radius: 20px; | ||
| 148 | + } | ||
| 149 | + | ||
| 150 | + .low-stocks { | ||
| 151 | + background: #7f7f7f; | ||
| 152 | + } | ||
| 153 | + | ||
| 154 | + .vip { | ||
| 155 | + display: inline-block; | ||
| 156 | + color: #fff; | ||
| 157 | + background: #e01; | ||
| 158 | + border-radius: 16px; | ||
| 159 | + padding: 0 12px; | ||
| 160 | + margin-left: 8px; | ||
| 161 | + font-size: 20px; | ||
| 162 | + } | ||
| 163 | + | ||
| 164 | + .la-tag { | ||
| 165 | + margin-top: 0.3rem; | ||
| 166 | + min-height: 1rem; | ||
| 167 | + } | ||
| 168 | + | ||
| 169 | + .icon-del, | ||
| 170 | + .icon-edit { | ||
| 171 | + position: absolute; | ||
| 172 | + color: #ccc; | ||
| 173 | + font-size: 30px; | ||
| 174 | + } | ||
| 175 | + | ||
| 176 | + .icon-del { | ||
| 177 | + right: 20px; | ||
| 178 | + } | ||
| 179 | + | ||
| 180 | + .icon-edit { | ||
| 181 | + right: 72px; | ||
| 182 | + } | ||
| 183 | + | ||
| 184 | + .opt-panel { | ||
| 185 | + position: absolute; | ||
| 186 | + width: 220px; | ||
| 187 | + right: 0; | ||
| 188 | + top: 0; | ||
| 189 | + bottom: 0; | ||
| 190 | + | ||
| 191 | + color: #fff; | ||
| 192 | + | ||
| 193 | + > div { | ||
| 194 | + float: left; | ||
| 195 | + box-sizing: border-box; | ||
| 196 | + width: 110px; | ||
| 197 | + height: 100%; | ||
| 198 | + text-align: center; | ||
| 199 | + padding: 40px 20px 0; | ||
| 200 | + font-size: 15px; | ||
| 201 | + } | ||
| 202 | + | ||
| 203 | + span { | ||
| 204 | + display: block; | ||
| 205 | + } | ||
| 206 | + | ||
| 207 | + .put-in-favorite { | ||
| 208 | + background: #bbb; | ||
| 209 | + | ||
| 210 | + } | ||
| 211 | + | ||
| 212 | + .del { | ||
| 213 | + background: #999; | ||
| 214 | + | ||
| 215 | + .iconfont { | ||
| 216 | + margin-bottom: 20px; | ||
| 217 | + } | ||
| 218 | + } | ||
| 219 | + } | ||
| 220 | + .calculate-num{ | ||
| 221 | + float: right; | ||
| 222 | + .calculate{ | ||
| 223 | + float: right; | ||
| 224 | + border:1px solid #b0b0b0; | ||
| 225 | + border-radius:.2rem; | ||
| 226 | + p{ | ||
| 227 | + color: #444; | ||
| 228 | + &:first-child{ | ||
| 229 | + height: 60px; | ||
| 230 | + border-bottom:1px solid #b0b0b0; | ||
| 231 | + span { | ||
| 232 | + border-left:1px solid #b0b0b0; | ||
| 233 | + border-right:1px solid #b0b0b0; | ||
| 234 | + } | ||
| 235 | + } | ||
| 236 | + i{ | ||
| 237 | + width: 72px; | ||
| 238 | + height: 60px; | ||
| 239 | + float: left; | ||
| 240 | + line-height: 60px; | ||
| 241 | + text-align: center; | ||
| 242 | + } | ||
| 243 | + span{ | ||
| 244 | + width: 96px; | ||
| 245 | + height: 60px; | ||
| 246 | + float: left; | ||
| 247 | + font-size: 40px; | ||
| 248 | + line-height: 60px; | ||
| 249 | + text-align: center; | ||
| 250 | + | ||
| 251 | + } | ||
| 252 | + &:last-child { | ||
| 253 | + span{ | ||
| 254 | + width: 168px; | ||
| 255 | + overflow: hidden; | ||
| 256 | + font-size: 36px; | ||
| 257 | + text-overflow:ellipsis; | ||
| 258 | + white-space:nowrap; | ||
| 259 | + } | ||
| 260 | + } | ||
| 261 | + } | ||
| 262 | + } | ||
| 263 | + .price{ | ||
| 264 | + line-height: 60px; | ||
| 265 | + font-size: 46px; | ||
| 266 | + font-weight: bold; | ||
| 267 | + } | ||
| 268 | + .count { | ||
| 269 | + position: absolute; | ||
| 270 | + right: 20px;; | ||
| 271 | + top: 20px;; | ||
| 272 | + font-size: 46px; | ||
| 273 | + } | ||
| 274 | + } | ||
| 275 | +} | ||
| 276 | + | ||
| 277 | +.shopping-cart-good:last-child { | ||
| 278 | + .deps { | ||
| 279 | + border: none; | ||
| 280 | + } | ||
| 281 | +} |
static/sass/cart/_index.css
0 → 100644
| 1 | +@import "good"; | ||
| 2 | +@import "chose-panel"; | ||
| 3 | +@import "gift-advance-good"; | ||
| 4 | +@import "order-ensure"; | ||
| 5 | +@import "select-coupon"; | ||
| 6 | +@import "select-address"; | ||
| 7 | + | ||
| 8 | + | ||
| 9 | +.icon-checkbox:before { content: "\e61c"; } | ||
| 10 | +.icon-cb-checked:before { content: "\e61d"; } | ||
| 11 | + | ||
| 12 | +.shopping-cart-page { | ||
| 13 | + margin-bottom: 120px; | ||
| 14 | + overflow-x: hidden; | ||
| 15 | + background: #f0f0f0; | ||
| 16 | + display: none; | ||
| 17 | + | ||
| 18 | + .yoho-tip { | ||
| 19 | + z-index: 4; | ||
| 20 | + } | ||
| 21 | + | ||
| 22 | + .cart-content > * { | ||
| 23 | + background: #fff; | ||
| 24 | + | ||
| 25 | + &:first-child { | ||
| 26 | + border-top: none; | ||
| 27 | + margin-top: 0; | ||
| 28 | + } | ||
| 29 | + } | ||
| 30 | + | ||
| 31 | + .cart-nav { | ||
| 32 | + color: #c6c6c6; | ||
| 33 | + border-bottom: 1px solid #e0e0e0; | ||
| 34 | + background: #fff; | ||
| 35 | + | ||
| 36 | + li { | ||
| 37 | + float: left; | ||
| 38 | + width: 50%; | ||
| 39 | + padding: 30px 0; | ||
| 40 | + height: 30px; | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + li.active { | ||
| 44 | + color: #000; | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + span { | ||
| 48 | + display: block; | ||
| 49 | + box-sizing: border-box; | ||
| 50 | + width: 100%; | ||
| 51 | + height: 30px; | ||
| 52 | + line-height: 30px; | ||
| 53 | + font-size: 30px; | ||
| 54 | + text-align: center; | ||
| 55 | + } | ||
| 56 | + | ||
| 57 | + li:first-child span { | ||
| 58 | + border-right: 1px solid #e0e0e0; | ||
| 59 | + } | ||
| 60 | + | ||
| 61 | + li:last-child { | ||
| 62 | + position: relative; | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + .presell-tip { | ||
| 66 | + position: absolute; | ||
| 67 | + z-index: 1; | ||
| 68 | + left: -2rem; | ||
| 69 | + top: 1.75rem; | ||
| 70 | + } | ||
| 71 | + | ||
| 72 | + .triangle { | ||
| 73 | + width: 0; | ||
| 74 | + height: 0; | ||
| 75 | + border-left: 8px solid transparent; | ||
| 76 | + border-right: 8px solid transparent; | ||
| 77 | + border-bottom: 12px solid #000; | ||
| 78 | + margin-left: 6rem; | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + .pt-content { | ||
| 82 | + position: relative; | ||
| 83 | + padding: 10px; | ||
| 84 | + background: #000; | ||
| 85 | + color: #fff; | ||
| 86 | + font-size: 12px; | ||
| 87 | + border-radius: 5px; | ||
| 88 | + text-align: center; | ||
| 89 | + width: 7rem; | ||
| 90 | + } | ||
| 91 | + } | ||
| 92 | + | ||
| 93 | + .login-info { | ||
| 94 | + height: 46px; | ||
| 95 | + padding: 17px 20px; | ||
| 96 | + color: #24acaa; | ||
| 97 | + text-align: center; | ||
| 98 | + font-size: 28px; | ||
| 99 | + | ||
| 100 | + .btn { | ||
| 101 | + display: inline-block; | ||
| 102 | + background: #ed0010; | ||
| 103 | + color: #fff; | ||
| 104 | + width: 80px; | ||
| 105 | + height: 46px; | ||
| 106 | + line-height: 46px; | ||
| 107 | + } | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + .presell-info { | ||
| 111 | + height: 60px; | ||
| 112 | + padding: 15px 30px; | ||
| 113 | + font-size: 22px; | ||
| 114 | + background: #f0f0f0; | ||
| 115 | + color: #b7b7b7; | ||
| 116 | + | ||
| 117 | + > span { | ||
| 118 | + display: block; | ||
| 119 | + } | ||
| 120 | + | ||
| 121 | + .iconfont { | ||
| 122 | + float: left; | ||
| 123 | + font-size: 45px; | ||
| 124 | + } | ||
| 125 | + | ||
| 126 | + .txt { | ||
| 127 | + height: 30px; | ||
| 128 | + line-height: 30px; | ||
| 129 | + margin-left: 80px; | ||
| 130 | + } | ||
| 131 | + } | ||
| 132 | + | ||
| 133 | + .cart-goods { | ||
| 134 | + border-bottom: 1px solid #e0e0e0; | ||
| 135 | + margin-bottom: 0.75rem; | ||
| 136 | + | ||
| 137 | + .shopping-cart-good:last-child .info { | ||
| 138 | + border-bottom: none; | ||
| 139 | + } | ||
| 140 | + } | ||
| 141 | + | ||
| 142 | + .invalid-goods { | ||
| 143 | + border-top: 1px solid #e0e0e0; | ||
| 144 | + border-bottom: 1px solid #e0e0e0; | ||
| 145 | + margin: 0.75rem 0; | ||
| 146 | + } | ||
| 147 | + | ||
| 148 | + .freebie-and-advance-buy { | ||
| 149 | + font-size: 24px; | ||
| 150 | + border-top: 1px solid #e0e0e0; | ||
| 151 | + border-bottom: 1px solid #e0e0e0; | ||
| 152 | + margin-bottom: 30px; | ||
| 153 | + | ||
| 154 | + > li { | ||
| 155 | + box-sizing: border-box; | ||
| 156 | + height: 80px; | ||
| 157 | + line-height: 80px; | ||
| 158 | + margin-bottom: 10px; | ||
| 159 | + padding: 0 20px; | ||
| 160 | + | ||
| 161 | + &:last-child { | ||
| 162 | + margin-bottom: 0; | ||
| 163 | + } | ||
| 164 | + | ||
| 165 | + a { | ||
| 166 | + float: right; | ||
| 167 | + width: 100%; | ||
| 168 | + } | ||
| 169 | + | ||
| 170 | + .under-line { | ||
| 171 | + display: inline-block; | ||
| 172 | + height: 1px; | ||
| 173 | + width: 91%; | ||
| 174 | + position: absolute; | ||
| 175 | + left: 9%; | ||
| 176 | + background-color: #f1f1f1; | ||
| 177 | + } | ||
| 178 | + | ||
| 179 | + } | ||
| 180 | + | ||
| 181 | + > li:first-child { | ||
| 182 | + .under-line { | ||
| 183 | + display: none; | ||
| 184 | + } | ||
| 185 | + } | ||
| 186 | + | ||
| 187 | + .count { | ||
| 188 | + color: #7b7b7b; | ||
| 189 | + float: right; | ||
| 190 | + } | ||
| 191 | + | ||
| 192 | + .icon-right-arrow { | ||
| 193 | + color: #8f8f8f; | ||
| 194 | + float: right; | ||
| 195 | + } | ||
| 196 | + } | ||
| 197 | + | ||
| 198 | + .activity-title{ | ||
| 199 | + border-top: 1px solid #e0e0e0; | ||
| 200 | + font-size: 32px; | ||
| 201 | + padding: 20px 20px 0; | ||
| 202 | + } | ||
| 203 | + | ||
| 204 | + .activity{ | ||
| 205 | + padding: 8px 20px 20px 32px; | ||
| 206 | + font-size: 26px; | ||
| 207 | + li:before { | ||
| 208 | + content: ""; | ||
| 209 | + display: inline-block; | ||
| 210 | + margin-right: 10px; | ||
| 211 | + width: 8px; | ||
| 212 | + height: 8px; | ||
| 213 | + background-color: #000; | ||
| 214 | + border-radius: 50%; | ||
| 215 | + position: relative; | ||
| 216 | + left: 0; | ||
| 217 | + top: -.12rem; | ||
| 218 | + } | ||
| 219 | + } | ||
| 220 | + .price-compute { | ||
| 221 | + padding: 20px; | ||
| 222 | + border-top: 1px solid #e0e0e0; | ||
| 223 | + font-size: 28px; | ||
| 224 | + | ||
| 225 | + .title { | ||
| 226 | + display: inline-block; | ||
| 227 | + width: 175px; | ||
| 228 | + } | ||
| 229 | + | ||
| 230 | + .minus { | ||
| 231 | + float: right; | ||
| 232 | + } | ||
| 233 | + } | ||
| 234 | + | ||
| 235 | + .balance { | ||
| 236 | + position: fixed; | ||
| 237 | + box-sizing: border-box; | ||
| 238 | + bottom: 0; | ||
| 239 | + width: 100%; | ||
| 240 | + padding: 20px; | ||
| 241 | + height: 120px; | ||
| 242 | + border-top: 1px solid #e0e0e0; | ||
| 243 | + background: #fff; | ||
| 244 | + | ||
| 245 | + .iconfont { | ||
| 246 | + position: absolute; | ||
| 247 | + top: 50%; | ||
| 248 | + margin-top: -14px; | ||
| 249 | + font-size: 28px; | ||
| 250 | + } | ||
| 251 | + | ||
| 252 | + p { | ||
| 253 | + float: right; | ||
| 254 | + margin-right: 32px; | ||
| 255 | + font-size: 26px; | ||
| 256 | + | ||
| 257 | + span { | ||
| 258 | + display: block; | ||
| 259 | + height: 40px; | ||
| 260 | + line-height: 40px; | ||
| 261 | + color: #d0253b; | ||
| 262 | + font-weight: bold; | ||
| 263 | + } | ||
| 264 | + | ||
| 265 | + .tip { | ||
| 266 | + color: #666; | ||
| 267 | + font-size: 22px; | ||
| 268 | + text-align: right; | ||
| 269 | + font-weight:normal; | ||
| 270 | + } | ||
| 271 | + } | ||
| 272 | + | ||
| 273 | + .btn-balance { | ||
| 274 | + float: right; | ||
| 275 | + width: 140px; | ||
| 276 | + height: 80px; | ||
| 277 | + line-height: 80px; | ||
| 278 | + text-align: center; | ||
| 279 | + background: #e01; | ||
| 280 | + color: #fff; | ||
| 281 | + border: none; | ||
| 282 | + font-size: 28px; | ||
| 283 | + } | ||
| 284 | + } | ||
| 285 | + | ||
| 286 | + .cart-zero{ | ||
| 287 | + width: 100%; | ||
| 288 | + height: auto; | ||
| 289 | + padding-top:2rem; | ||
| 290 | + padding-bottom:20%; | ||
| 291 | + i{ | ||
| 292 | + font-size: 6em; | ||
| 293 | + display: block; | ||
| 294 | + margin: 0 auto; | ||
| 295 | + text-align: center; | ||
| 296 | + color: #505050; | ||
| 297 | + } | ||
| 298 | + p{ | ||
| 299 | + display: block; | ||
| 300 | + text-align: center; | ||
| 301 | + font-size: 1.2em; | ||
| 302 | + color: #505050; | ||
| 303 | + padding:.6rem 0; | ||
| 304 | + } | ||
| 305 | + a{ | ||
| 306 | + width: 27%; | ||
| 307 | + height: 1.2rem; | ||
| 308 | + overflow: hidden; | ||
| 309 | + line-height: 1.2rem; | ||
| 310 | + border:1px solid #505050; | ||
| 311 | + border-radius:.2rem; | ||
| 312 | + display: block; | ||
| 313 | + margin: 0 auto; | ||
| 314 | + text-align: center; | ||
| 315 | + } | ||
| 316 | + } | ||
| 317 | +} |
static/sass/cart/_order-ensure.css
0 → 100644
| 1 | +.order-ensure-page { | ||
| 2 | + background: #f0f0f0; | ||
| 3 | + | ||
| 4 | + .block { | ||
| 5 | + background: #fff; | ||
| 6 | + margin: 20px 0; | ||
| 7 | + padding: 30px 20px; | ||
| 8 | + border-top: 1px solid #e0e0e0; | ||
| 9 | + border-bottom: 1px solid #e0e0e0; | ||
| 10 | + } | ||
| 11 | + | ||
| 12 | + .title { | ||
| 13 | + font-size: 26px; | ||
| 14 | + font-weight: bold; | ||
| 15 | + } | ||
| 16 | + | ||
| 17 | + .address-wrap { | ||
| 18 | + display: block; | ||
| 19 | + position: relative; | ||
| 20 | + margin-top: 0; | ||
| 21 | + border-top: none; | ||
| 22 | + | ||
| 23 | + > .iconfont { | ||
| 24 | + position: absolute; | ||
| 25 | + color: #bcbcbc; | ||
| 26 | + right: 20px; | ||
| 27 | + top: 50%; | ||
| 28 | + margin-top: -8px; | ||
| 29 | + } | ||
| 30 | + | ||
| 31 | + .infos { | ||
| 32 | + font-weight: bold; | ||
| 33 | + font-size: 24px; | ||
| 34 | + padding-right: 55px; | ||
| 35 | + } | ||
| 36 | + | ||
| 37 | + .per-info { | ||
| 38 | + float: right; | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + .address { | ||
| 42 | + display: block; | ||
| 43 | + margin-top: 20px; | ||
| 44 | + color: #bcbcbc; | ||
| 45 | + font-weight: normal; | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + | ||
| 49 | + .dispatch .title { | ||
| 50 | + margin-bottom: 10px; | ||
| 51 | + } | ||
| 52 | + | ||
| 53 | + .dispatch .sub-block:first-child { | ||
| 54 | + border-bottom: 1px solid #f7f7f7; | ||
| 55 | + margin-bottom: 15px; | ||
| 56 | + } | ||
| 57 | + | ||
| 58 | + .dispatch-mode li, | ||
| 59 | + .dispatch-time li { | ||
| 60 | + float: left; | ||
| 61 | + padding: 10px 20px; | ||
| 62 | + margin-right: 15px; | ||
| 63 | + margin-bottom: 15px; | ||
| 64 | + border: 1px solid #c9c9c9; | ||
| 65 | + color: #676767; | ||
| 66 | + font-size: 26px; | ||
| 67 | + | ||
| 68 | + &.chosed { | ||
| 69 | + border-color: #000; | ||
| 70 | + background: resolve('shopping-cart/black-right.png') no-repeat; | ||
| 71 | + background-size: 30px; | ||
| 72 | + background-position: bottom right; | ||
| 73 | + } | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + .goods { | ||
| 77 | + margin-right: -20px; | ||
| 78 | + | ||
| 79 | + .price-wrap { | ||
| 80 | + position: static; | ||
| 81 | + text-align: left; | ||
| 82 | + | ||
| 83 | + .price { | ||
| 84 | + color: #444; | ||
| 85 | + } | ||
| 86 | + | ||
| 87 | + .count { | ||
| 88 | + display: inline; | ||
| 89 | + margin-left: 20px; | ||
| 90 | + } | ||
| 91 | + } | ||
| 92 | + | ||
| 93 | + .name { | ||
| 94 | + max-width: 400px; | ||
| 95 | + } | ||
| 96 | + } | ||
| 97 | + | ||
| 98 | + .sale-invoice { | ||
| 99 | + margin-top: -20px; | ||
| 100 | + font-size: 24px; | ||
| 101 | + | ||
| 102 | + li { | ||
| 103 | + height: 90px; | ||
| 104 | + line-height: 90px; | ||
| 105 | + border-bottom: 1px solid #f7f7f7; | ||
| 106 | + overflow: hidden; | ||
| 107 | + | ||
| 108 | + a { | ||
| 109 | + display: block; | ||
| 110 | + } | ||
| 111 | + } | ||
| 112 | + | ||
| 113 | + .coupon-count { | ||
| 114 | + padding: 5px 15px; | ||
| 115 | + background: #f00; | ||
| 116 | + color: #fff; | ||
| 117 | + border-radius: 10px; | ||
| 118 | + margin-left: 20px; | ||
| 119 | + } | ||
| 120 | + | ||
| 121 | + .coupon-use { | ||
| 122 | + box-sizing: border-box; | ||
| 123 | + position: relative; | ||
| 124 | + float: right; | ||
| 125 | + padding-right: 30px; | ||
| 126 | + color: #999; | ||
| 127 | + text-align: right; | ||
| 128 | + width: 320px; | ||
| 129 | + white-space: nowrap; | ||
| 130 | + text-overflow: ellipsis; | ||
| 131 | + overflow: hidden; | ||
| 132 | + | ||
| 133 | + .iconfont { | ||
| 134 | + position: absolute; | ||
| 135 | + top:0; | ||
| 136 | + right: 0; | ||
| 137 | + color: #999; | ||
| 138 | + } | ||
| 139 | + } | ||
| 140 | + | ||
| 141 | + .checkbox { | ||
| 142 | + display: inline-block; | ||
| 143 | + width: 80px; | ||
| 144 | + text-align: center; | ||
| 145 | + margin-right: -20px; | ||
| 146 | + } | ||
| 147 | + | ||
| 148 | + .coin-check { | ||
| 149 | + float: right; | ||
| 150 | + color: #999; | ||
| 151 | + | ||
| 152 | + .checkbox { | ||
| 153 | + margin-left: 5px; | ||
| 154 | + color: #000; | ||
| 155 | + } | ||
| 156 | + | ||
| 157 | + &.used { | ||
| 158 | + color: #f00; | ||
| 159 | + } | ||
| 160 | + | ||
| 161 | + em { | ||
| 162 | + color: #f00; | ||
| 163 | + } | ||
| 164 | + | ||
| 165 | + } | ||
| 166 | + | ||
| 167 | + .checkbox.icon-checkbox { | ||
| 168 | + color: #ccc; | ||
| 169 | + } | ||
| 170 | + | ||
| 171 | + .invoice { | ||
| 172 | + .checkbox { | ||
| 173 | + float: right; | ||
| 174 | + } | ||
| 175 | + | ||
| 176 | + &.focus { | ||
| 177 | + height: auto; | ||
| 178 | + } | ||
| 179 | + } | ||
| 180 | + | ||
| 181 | + .desc { | ||
| 182 | + color: #999; | ||
| 183 | + } | ||
| 184 | + } | ||
| 185 | + | ||
| 186 | + .block { | ||
| 187 | + input, textarea { | ||
| 188 | + box-sizing: border-box; | ||
| 189 | + margin: 20px 0; | ||
| 190 | + padding: 0 12px; | ||
| 191 | + width: 100%; | ||
| 192 | + height: 72px; | ||
| 193 | + color: #444; | ||
| 194 | + background: #efefef; | ||
| 195 | + font-size: 24px; | ||
| 196 | + line-height: 1; | ||
| 197 | + outline: 0; | ||
| 198 | + border: 0; | ||
| 199 | + border-radius: 4px; | ||
| 200 | + } | ||
| 201 | + textarea { | ||
| 202 | + padding: 12px; | ||
| 203 | + height: auto; | ||
| 204 | + resize: none; | ||
| 205 | + } | ||
| 206 | + } | ||
| 207 | + | ||
| 208 | + #invoice { | ||
| 209 | + border-top: 1px solid #f7f7f7; | ||
| 210 | + | ||
| 211 | + label { | ||
| 212 | + display: block; | ||
| 213 | + border-top: 1px solid #f7f7f7; | ||
| 214 | + } | ||
| 215 | + | ||
| 216 | + select { | ||
| 217 | + position: relative; | ||
| 218 | + float: right; | ||
| 219 | + width: 40%; | ||
| 220 | + height: 50px; | ||
| 221 | + top: 20px; | ||
| 222 | + border: 1px solid #f7f7f7; | ||
| 223 | + } | ||
| 224 | + } | ||
| 225 | + | ||
| 226 | + #msg { | ||
| 227 | + padding-top: 20px; | ||
| 228 | + input { | ||
| 229 | + margin: 0; | ||
| 230 | + } | ||
| 231 | + | ||
| 232 | + } | ||
| 233 | + | ||
| 234 | + .total { | ||
| 235 | + font-size: 22px; | ||
| 236 | + margin-top: 20px; | ||
| 237 | + | ||
| 238 | + span { | ||
| 239 | + display: inline-block; | ||
| 240 | + width: 130px; | ||
| 241 | + } | ||
| 242 | + } | ||
| 243 | + | ||
| 244 | + .cost { | ||
| 245 | + border-top: 1px solid #f7f7f7; | ||
| 246 | + line-height: 100px; | ||
| 247 | + margin-top: 10px; | ||
| 248 | + font-size: 34px; | ||
| 249 | + | ||
| 250 | + em { | ||
| 251 | + color: #f00; | ||
| 252 | + } | ||
| 253 | + } | ||
| 254 | + | ||
| 255 | + .pay-mode { | ||
| 256 | + background: #fff; | ||
| 257 | + padding: 0 20px; | ||
| 258 | + margin-top: -22px; | ||
| 259 | + | ||
| 260 | + li { | ||
| 261 | + height: 88px; | ||
| 262 | + line-height: 88px; | ||
| 263 | + margin-bottom: 28px; | ||
| 264 | + border-radius: 5px; | ||
| 265 | + font-size: 32px; | ||
| 266 | + color: #fff; | ||
| 267 | + text-align: center; | ||
| 268 | + background: #000; | ||
| 269 | + } | ||
| 270 | + | ||
| 271 | + .default { | ||
| 272 | + background: #57b038; | ||
| 273 | + } | ||
| 274 | + | ||
| 275 | + .iconfont { | ||
| 276 | + margin-right: 20px; | ||
| 277 | + font-size: 32px; | ||
| 278 | + } | ||
| 279 | + } | ||
| 280 | +} |
static/sass/cart/_select-address.css
0 → 100644
static/sass/cart/_select-coupon.css
0 → 100644
| 1 | +@define-extend line { | ||
| 2 | + content: ''; | ||
| 3 | + position: absolute; | ||
| 4 | + top: 50%; | ||
| 5 | + border-top: 1px solid #b0b0b0; | ||
| 6 | + width: 120px; | ||
| 7 | + height: 0; | ||
| 8 | +} | ||
| 9 | + | ||
| 10 | +.select-coupon-page { | ||
| 11 | + margin-top: 30px; | ||
| 12 | + margin-bottom: 30px; | ||
| 13 | + | ||
| 14 | + #new-coupon { | ||
| 15 | + margin-bottom: 30px; | ||
| 16 | + padding-left: 30px; | ||
| 17 | + padding-right: 30px; | ||
| 18 | + font-size: 24px; | ||
| 19 | + | ||
| 20 | + input { | ||
| 21 | + padding: 0 12px; | ||
| 22 | + width: 384px; | ||
| 23 | + height: 80px; | ||
| 24 | + border: 1px solid #b0b0b0; | ||
| 25 | + border-radius: .1rem; | ||
| 26 | + outline: 0; | ||
| 27 | + } | ||
| 28 | + | ||
| 29 | + .submit { | ||
| 30 | + margin-left: 30px; | ||
| 31 | + width: 130px; | ||
| 32 | + height: 80px; | ||
| 33 | + color: #fff; | ||
| 34 | + background: #b0b0b0; | ||
| 35 | + border-radius: .1rem; | ||
| 36 | + border: none; | ||
| 37 | + outline: 0; | ||
| 38 | + } | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + .coupon-list { | ||
| 42 | + .employ-main:first-child { | ||
| 43 | + margin-top: 0; | ||
| 44 | + } | ||
| 45 | + .employ-main:last-child { | ||
| 46 | + margin-bottom: 0; | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | + | ||
| 50 | + .not-use { | ||
| 51 | + display: block; | ||
| 52 | + width: 560px; | ||
| 53 | + margin: 30px auto 0; | ||
| 54 | + text-align: center; | ||
| 55 | + font-size: 32px; | ||
| 56 | + line-height: 2.5; | ||
| 57 | + border: 1px solid #444; | ||
| 58 | + border-radius: 4px; | ||
| 59 | + } | ||
| 60 | + | ||
| 61 | + .not-avaliable-coupon-line { | ||
| 62 | + position: relative; | ||
| 63 | + margin-top: 30px; | ||
| 64 | + margin-bottom: 30px; | ||
| 65 | + font-size: 28px; | ||
| 66 | + line-height: 2; | ||
| 67 | + color: #b0b0b0; | ||
| 68 | + text-align: center; | ||
| 69 | + | ||
| 70 | + &:before { | ||
| 71 | + @extend line; | ||
| 72 | + left: 60px; | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + &:after { | ||
| 76 | + @extend line; | ||
| 77 | + right: 60px; | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + .not-avaliable { | ||
| 82 | + background-image: resolve('me/employ/employ-grey.jpg') !important; | ||
| 83 | + } | ||
| 84 | +} |
-
Please register or login to post a comment