.order-detail-page {
    font-size: 12px;

    .order-detail > .title {
        background-image: resolve(/home/order-detail.png);
    }

    .status {
        padding: 10px;
        background: #efefef;
        border-bottom: 1px solid #e6e6e6;

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

        .cur-status {
            color: #e8044f;
        }

        .complete-tip {
            color: #999;
        }
    }

    .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;
            background-image: resolve(/home/complaint-icon.png);
            margin: 5px 5px 0;
        }
    }

    .content {
        padding: 10px 20px 20px;

        p {
            line-height: 18px;
        }
    }

    .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;
        }
    }

    /*虚拟商品订单*/
    .virtual-detail {
        .pg-1 {
            left: 245px;
        }

        .pg-2 {
            left: 515px;
        }

        .outter-progress {
            background: resolve(/home/virtual-order-progress.png) no-repeat 0 0;
        }

        .inner-progress {
            background: resolve(/home/virtual-order-progress.png) no-repeat 0 -12px;
        }
    }

    .outter-progress {
        width: 552px;
        height: 12px;
        background: resolve(/home/order-progress.png) no-repeat 0 0;
    }

    .inner-progress {
        height: 12px;
        background: resolve(/home/order-progress.png) no-repeat 0 -12px;
    }

    .handle-time {
        width: 300px;
    }

    .recive-place {
        width: 200px;
    }

    .logistics-info {
        width: 800px;
    }

    .trace-order td,
    .trace-order th {
        line-height: 18px;
    }

    .good-list {
        table {
            border-collapse: collapse;
        }

        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 {
                $img: /home/coin-help.png;
                display: inline-block;
                width: width($img);
                height: height($img);
                background: url($img);
                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;
        }

        .name {
            display: block;
            color: #468fa2;
            line-height: 18px;
            text-align: left;
            max-width: 230px;

            @mixin ellipsis;
        }
    }

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

        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;
        padding: 20px 10px 20px;

        .oo-icon {
            display: inline-block;
            height: 22px;
            width: 22px;
            vertical-align: text-bottom;
        }

        .success-icon {
            background: url(/home/success-icon.png);
        }

        .cancel-icon {
            background: url(/home/cancel-icon.png);
        }

        .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;
        }
    }
}