Blame view

public/scss/home/_order-detail.css 13.1 KB
weiqingting authored
1 2 3 4
.order-detail-page {
    font-size: 12px;

    .order-detail > .title {
htoooth authored
5
        background-image: resolve(home/order-detail.png);
weiqingting authored
6 7 8
    }

    .status {
郝肖肖 authored
9
        margin: 0 0 10px;
weiqingting authored
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
        padding: 10px;
        background: #efefef;
        border-bottom: 1px solid #e6e6e6;

        p {
            margin: 5px 0;
            line-height: 18px;
        }

        .cur-status {
            color: #e8044f;
        }

        .complete-tip {
            color: #999;
        }
yyq authored
26 27 28

        .cancel-order {
            float: right;
weiqingting authored
29 30 31 32 33
            margin-right: 20px;
            background: #ebebeb;
            border: 1px solid #c1c1c1;
            color: #000;
        }
yyq authored
34 35 36

        .edit-order {
            float: right;
weiqingting authored
37 38 39 40
            background: #ebebeb;
            border: 1px solid #c1c1c1;
            color: #000;
        }
yyq authored
41 42

        .edit-order-active {
weiqingting authored
43 44 45 46
            background: #444;
            border: 1px solid #444;
            color: #fff;
        }
yyq authored
47 48

        .go-pay {
weiqingting authored
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
            margin-left: 60px;
        }
    }

    .detail-info {
        padding: 10px;
    }

    .sub-title {
        height: 21px;
        line-height: 21px;
        border: 1px solid #e6e6e6;
        color: #333;
        background: #efefef;

        .icon {
            display: inline-block;
            height: 11px;
            width: 11px;
htoooth authored
68
            background-image: resolve(home/complaint-icon.png);
weiqingting authored
69 70 71 72 73 74 75
            margin: 5px 5px 0;
        }
    }

    .content {
        padding: 10px 20px 20px;
76 77 78 79 80 81 82 83 84 85 86 87 88 89
        .free-icon {
            display: block;
            width: 37px;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            text-align: center;
            color: #80bb45;
            background: #e7fbc0;
            margin: 5px auto;
            border: 1px solid #80bb45;
            border-radius: 3px;
        }
weiqingting authored
90 91 92
        p {
            line-height: 18px;
        }
93 94 95 96 97 98 99 100 101 102 103

        p.line-through {
            font-weight: normal;
            text-decoration: line-through;
            color: #9a9a9a;
        }

        p.tip-message {
            font-weight: normal;
            color: #ff575c;
        }
weiqingting authored
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
    }

    .order-progress {
        padding-top: 20px;

        li {
            position: absolute;
            width: 150px;
            line-height: 15px;
            top: 20px;
        }

        .cur {
            color: #e9034e;
            font-weight: bold;
        }

        .date {
            display: block;
            color: #999;
            padding-left: 12px;
        }
    }

    .progress-box {
        position: relative;
        width: 552px;
        height: 70px;
        margin: 0 auto;

        .pg-0 {
            left: -20px;
        }

        .pg-1 {
            left: 145px;
        }

        .pg-2 {
            left: 330px;
        }

        .pg-3 {
            left: 515px;
        }
    }
hongweigao authored
151
    /* 虚拟商品订单 */
weiqingting authored
152 153 154 155 156 157 158 159 160 161
    .virtual-detail {
        .pg-1 {
            left: 245px;
        }

        .pg-2 {
            left: 515px;
        }

        .outter-progress {
htoooth authored
162
            background: resolve(home/virtual-order-progress.png) no-repeat 0 0;
weiqingting authored
163 164 165
        }

        .inner-progress {
htoooth authored
166
            background: resolve(home/virtual-order-progress.png) no-repeat 0 -12px;
weiqingting authored
167 168 169
        }
    }
htoooth authored
170 171 172 173 174 175
    .offline-self {
        .pg-1 {
            left: 515px;
        }

        .outter-progress {
htoooth authored
176
            background: resolve(home/offline-by-self-progress.png) no-repeat 0 0;
htoooth authored
177 178 179
        }

        .inner-progress {
htoooth authored
180
            background: resolve(home/offline-by-self-progress.png) no-repeat 0 -12px;
htoooth authored
181 182 183
        }
    }
weiqingting authored
184
    .outter-progress {
htoooth authored
185
        width: 554px;
weiqingting authored
186
        height: 12px;
htoooth authored
187
        background: resolve(home/order-progress.png) no-repeat 0 0;
weiqingting authored
188 189 190 191
    }

    .inner-progress {
        height: 12px;
htoooth authored
192
        background: resolve(home/order-progress.png) no-repeat 0 -12px;
weiqingting authored
193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
    }

    .handle-time {
        width: 300px;
    }

    .recive-place {
        width: 200px;
    }

    .logistics-info {
        width: 800px;
    }

    .trace-order td,
    .trace-order th {
        line-height: 18px;
    }
weiqingting authored
211
htoooth authored
212 213
    .invoice-type {
        display: inline-block;
yyq authored
214
htoooth authored
215 216 217 218 219 220 221 222 223
        p {
            display: inline-block;
        }
    }

    .invoice-button {
        display: inline-block;
        margin-left: 20px;
        color: #d93549;
yyq authored
224
        border: 1px solid #444;
htoooth authored
225 226 227
        padding: 5px;
    }
OF1706 authored
228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246
    .code-box {
        border: 1px solid #e6e6e6;
        width: 214px;
        height: 86px;
        padding: 4px 5px 5px;
        box-sizing: border-box;
        *zoom: 1;

        &:after {
            content: " ";
            display: block;
            overflow: hidden;
            clear: both;
        }

        .code-img {
            float: left;
            width: 76px;
            height: 76px;
周少峰 authored
247
            background-image: resolve("layout/qr-weixin-service.jpg");
OF1706 authored
248 249 250 251 252 253 254 255 256
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin: 0;
            padding: 0;
        }
    }

    .code-font {
        float: right;
OF1706 authored
257
        width: 110px;
OF1706 authored
258 259 260 261 262 263
        height: 76px;

        em {
            display: inline-block;
            text-align: center;
            margin-top: 10px;
OF1706 authored
264
            font-size: 12px;
OF1706 authored
265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298
            line-height: 18px;
            color: #000;
        }
    }

    .order-balance-container {
        position: relative;
        border-bottom: 1px solid #e6e6e6;
        *zoom: 1;

        &:after {
            content: " ";
            display: block;
            overflow: hidden;
            font-size: 0;
            clear: both;
        }

        .code-box {
            position: absolute;
            top: 50%;
            margin-top: -43px;
            float: left;
        }

        .order-balance {
            float: right;
        }

        .order-balance {
            border-bottom: none;
        }
    }
hongweigao authored
299
    .different-order {
weiqingting authored
300 301 302
        position: relative;
        width: 100%;
        margin-top: 10px;
yyq authored
303 304 305

        .red {
            color: red;
yyq authored
306
        }
yyq authored
307 308

        .warn {
weiqingting authored
309
            text-align: center;
yyq authored
310
            background: #fefbd5;
weiqingting authored
311 312 313
            font: initial;
            height: 40px;
            line-height: 40px;
yyq authored
314
            font-size: 14px;
yyq authored
315 316

            .why {
htoooth authored
317
                background: url(/order/why.png) no-repeat;
weiqingting authored
318 319 320 321
                width: 26px;
                height: 20px;
                display: inline-block;
                vertical-align: middle;
yyq authored
322 323

                &.on:after {
yyq authored
324 325 326 327
                    content: "";
                    position: absolute;
                    width: 0;
                    height: 0;
yyq authored
328
                    border-bottom: 10px solid #000;
yyq authored
329 330 331 332 333
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    top: 30px;
                    margin-left: -12px;
                }
yyq authored
334 335 336 337 338 339 340
            }

            .why:hover {
                cursor: pointer;
            }
        }
hongweigao authored
341
        .different-bag {
yyq authored
342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357
            display: none;
            position: absolute;
            right: -10px;
            top: 40px;
            width: 510px;
            padding: 0 50px;
            background: #fff;
            z-index: 1;
            border: solid 1px #000;
            font-size: 14px;
        }

        .bag {
            position: relative;
            border-bottom: solid 1px #e0e0e0;
            margin-top: 10px;
hongweigao authored
358
            padding: 20px 0;
yyq authored
359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374

            h3 {
                height: 30px;
                line-height: 30px;
                font-weight: bold;
                margin-left: 15px;
            }

            .pre {
                position: absolute;
                background: url(/order/pre.png) no-repeat;
                width: 30px;
                height: 50px;
                left: -30px;
                top: 70px;
                display: none;
weiqingting authored
375
                cursor: pointer;
yyq authored
376 377 378 379 380 381 382 383 384 385
            }

            .next {
                position: absolute;
                background: url(/order/next.png) no-repeat;
                width: 30px;
                height: 50px;
                right: -30px;
                top: 70px;
                display: none;
weiqingting authored
386
                cursor: pointer;
yyq authored
387 388 389 390 391 392 393 394
            }

            p {
                color: #767676;
                margin-left: 15px;
            }
        }
hongweigao authored
395
        .bag-detil {
yyq authored
396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415
            position: relative;
            height: 90px;
            width: 510px;
            overflow: hidden;
            margin-bottom: 20px;

            ul {
                list-style: none;
                position: absolute;
                left: 0;
                clear: both;
                height: 90px;

                li {
                    float: left;
                    width: 102px;
                    height: 90px;
                    line-height: 90px;
                    text-align: center;
                    position: relative;
hongweigao authored
416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436
                }

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

                li p {
                    position: absolute;
                    bottom: 0;
                    background: #9c3;
                    width: 90px;
                    height: 1rem;
                    line-height: 1rem;
                    color: #fff;
                    margin-left: 7px;
                }

                li a {
                    cursor: default;
                }
yyq authored
437
hongweigao authored
438 439
                li a:hover {
                    cursor: default;
yyq authored
440 441
                }
            }
weiqingting authored
442 443
        }
    }
yyq authored
444
weiqingting authored
445 446 447
    .good-list {
        table {
            border-collapse: collapse;
448
            width: 100%;
weiqingting authored
449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489
        }

        thead {
            height: 25px;
            line-height: 25px;
            background: #000;
            padding: 2px 5px;
            color: #fff;
        }

        th,
        td {
            padding: 5px;
            text-align: center;
            border-right: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
        }

        th {
            border-color: #000;
        }

        tr td:last-child,
        tr th:last-child {
            border-right: none;
        }

        .product-info {
            width: 314px;
        }

        .good-price,
        .num,
        .sum {
            width: 91px;
        }

        .yoho-coin {
            width: 100px;

            a {
htoooth authored
490
                $img: home/coin-help.png;
yyq authored
491
weiqingting authored
492 493 494
                display: inline-block;
                width: width($img);
                height: height($img);
htoooth authored
495
                background: resolve($img);
weiqingting authored
496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517
                vertical-align: text-top;
            }
        }

        .thumb-link {
            float: left;
            position: relative;
            margin-left: 5px;
            margin-right: 10px;
        }

        .thumb {
            display: block;
            width: 60px;
            height: 60px;
        }

        .name-color-size {
            float: left;
            color: #999;
            padding-top: 12px;
            text-align: left;
htoooth authored
518
yyq authored
519
            b {
htoooth authored
520 521 522 523 524 525 526 527 528
                display: inline-block;
                vertical-align: bottom;
                max-width: 130px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-style: normal;
                font-weight: 400;
            }
weiqingting authored
529 530 531 532 533 534 535 536
        }

        .name {
            display: block;
            color: #468fa2;
            line-height: 18px;
            text-align: left;
            max-width: 230px;
htoooth authored
537
yyq authored
538
            @mixin ellipsis ;
weiqingting authored
539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554
        }
    }

    .order-balance {
        text-align: right;
        border-bottom: 1px solid #e6e6e6;
        padding: 10px 0;

        .back-coin {
            height: 30px;
        }

        .yoho-coin {
            width: 14px;
            height: 14px;
            display: inline-block;
htoooth authored
555
            background: url(/cart/yoho-coin.png);
weiqingting authored
556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587
            vertical-align: middle;
            margin-top: -2px;
            margin-right: 4px;
        }

        em {
            font-weight: bold;
        }

        .payment {
            color: #e8044f;
        }
    }

    .oo-btn {
        display: inline-block;
        height: 30px;
        width: 92px;
        line-height: 30px;
        text-align: center;
        border-radius: 3px;
        color: #fff;
        cursor: pointer;
    }

    .go-pay {
        background: #d9044a;
        border: 1px solid #c54b73;
    }

    .order-operation {
        text-align: right;
yyq authored
588
        padding: 20px 10px;
weiqingting authored
589 590 591 592 593

        .oo-icon {
            display: inline-block;
            height: 22px;
            width: 22px;
594
            vertical-align: middle;
weiqingting authored
595 596 597
        }

        .success-icon {
htoooth authored
598
            background: url(/home/success-icon.png);
weiqingting authored
599 600 601
        }

        .cancel-icon {
htoooth authored
602
            background: url(/home/cancel-icon.png);
weiqingting authored
603 604 605 606 607 608 609 610 611 612 613 614 615 616 617
        }

        .confirm-received {
            display: block;
            float: right;
            margin-top: 5px;
            background: #d9044a;
            border: 1px solid #c54b73;
        }

        .cancel-order {
            background: #ebebeb;
            border: 1px solid #c1c1c1;
            color: #000;
        }
618 619 620 621

        .op-dis {
            color: #999;
        }
weiqingting authored
622
    }
yyq authored
623 624 625

    .freebie-tag {
        background: #9c3;
weiqingting authored
626
    }
yyq authored
627 628 629

    .advance-buy-tag {
        background: #fc1264;
weiqingting authored
630
    }
yyq authored
631 632 633

    .virtual-good-tag {
        background: red;
weiqingting authored
634
    }
yyq authored
635 636 637

    .presall-tag {
        background: blue;
weiqingting authored
638 639
    }
}