.table {
    $headerHeight: 40px;
    $headerColor: #f5f5f5;
    $borderColor: #f1f1f1;
    $fontColor: #616161;

    $bigWidth: 355px;
    $normalWidth: 138px;
    $goodImgWidth: 65px;
    $goodImgHeight: 90px;

    $normalSize: 14px;
    $bigSize: 16px;

    $smallSpace: 8px;
    $space: 20px;
    $bigSpace: 30px;

    margin-bottom: $space;
    color: $fontColor;

    .bold {
        color: #222;
    }

    .table-header {
        margin: $space 0;
    }

    .header {
        height: $headerHeight;
        line-height: $headerHeight;
        padding-left: 20px;
        font-size: $normalSize;
        background-color: $headerColor;
        border: 1px solid $borderColor;

        li {
            height: 100%;
            float: left;
            text-align: center;

            &.big-width {
                width: $bigWidth;
                text-align: left;
            }

            &.normal-width {
                width: $normalWidth;
            }

            &.content {
                margin-right: 25px;
            }
        }
    }

    .table-body {
        display: table;
        font-size: $normalSize;
    }

    .goods-container {
        width: calc($bigWidth + $normalWidth + $space + 3px);
        display: table-cell;
        box-sizing: border-box;

        img {
            width: $goodImgWidth;
            height: $goodImgHeight;
            display: inline-block;
            box-sizing: border-box;
            margin: $bigSpace $space;
        }

        .good-info {
            display: inline-block;
            box-sizing: border-box;
            border: 1px solid $borderColor;
            border-top: none;
            font-weight: normal;

            .iconfont {
                outline: 3px solid #fff;
                outline-offset: -3px;
                border-radius: 100%;
                background: #000;
                font-weight: normal;
                color: #fff;
            }

            &.last {
                border-bottom: none;
            }

            .detail {
                width: calc($bigWidth - $goodImgWidth - $space);
                padding: $bigSpace $smallSpace 0 0;
                float: right;
                box-sizing: border-box;
                line-height: 1.4;
                font-size: $normalSize;
                color: $fontColor;

                .with-bottom-space {
                    margin-bottom: $smallSpace;
                }

                span {
                    font-size: 12px;
                }

                .with-space {
                    display: inline-block;
                    margin-right: $smallSpace;
                    margin-bottom: $smallSpace;
                }
            }
        }

        .price {
            width: calc($normalWidth - 4px);
            display: inline-block;
            text-align: center;
            vertical-align: top;

            p {
                width: $normalWidth;
                height: calc(2 * $bigSpace + $goodImgHeight + 4px);
                float: right;
                padding-top: $bigSpace;
                border-bottom: 1px solid $borderColor;

                &.last {
                    border-bottom: none;
                }
            }
        }
    }

    .special-border {
        border-right: 1px solid $borderColor;
        border-bottom: 1px solid $borderColor;
    }

    .common-column {
        width: $normalWidth;
        display: table-cell;
        text-align: center;
        vertical-align: top;
        padding-top: $bigSpace;
        position: relative;

        .left-time {
            min-height: $normalSize;
            margin-bottom: 14px !important;
        }

        .btn {
            display: inline-block;
            margin-bottom: 14px;
            cursor: pointer;

            &.black {
                margin-top: -5px;
            }
        }

        p {
            margin-bottom: $space;
        }

        .subtext {
            font-size: 12px;
            cursor: pointer;
        }

        .no-space {
            margin: 0;
        }
    }

    &.empty {
        width: 100%;

        .bg {
            height: 250px;
            background-image: resolve('me/no-order.png');
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: 100px 125px;
        }

        .msg {
            margin-top: 50px;
            text-align: center;

            .msg-zh {
                font-size: $bigSize;
                margin-bottom: $space;
            }

            .msg-en {
                margin-bottom: 40px;
            }

            .btn {
                display: inline-block;
            }
        }
    }

    .blk-pagination {
        margin: $bigSpace auto -$bigSpace;
        text-align: center;
    }
}