xinkeaboard/xinkeaboard-web/assets/style/cartIndex.scss

.sld_cart_index {
    width: 100%;
    height: 100%;
    .cart_content {
        width: 1200px;
        margin: 23px auto;
        .cart_title {
            width: 1200px;
            height: 38px;
            background: #f3f3f3;
            padding: 0 75px 0 20px;
            border-radius: 2px;
            overflow: hidden;
            box-sizing: border-box;
            .cart_title_pre {
                &:nth-child(2) {
                    margin: 0 161px 0 161px;
                }
                &:nth-child(3) {
                    width: 243px;
                    text-align: center;
                }
                &:nth-child(4) {
                    margin: 0 40px 0 38px;
                }
                &:nth-child(5) {
                    width: 286px;
                    text-align: center;
                }
                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 20px;
                    cursor: pointer;
                }
                span {
                    font-size: 14px;
                    //font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #333333;
                    text {
                        position: absolute;
                    }
                }
            }
        }
        .cart_lists {
            margin-bottom: 20px;
            .cart_lists_pre {
                padding-top: 21px;
                .store_info {
                    margin-bottom: 6px;
                    padding-left: 21px;
                    width: 1200px;
                    box-sizing: border-box;
                    .store_sel {
                        width: 14px;
                        height: 14px;
                        margin-right: 20px;
                        cursor: pointer;
                    }
                    .store_des {
                        span {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: #434343;
                        }
                        img {
                            width: 6px;
                            height: 10px;
                            margin-left: 10px;
                        }
                    }
                    .store_kefu {
                        margin-left: 10px;
                        cursor: pointer;
                    }
                    .store_coupons {
                        position: relative;
                        width: 70px;
                        height: 24px;
                        margin-left: 20px;
                        cursor: pointer;

                        .store_coupons_bg {
                            width: 70px;
                            height: 24px;
                        }

                        .store_coupons_close {
                            width: 100%;
                            margin-top: 10px;
                            padding-right: 2px;
                            img {
                                position: relative;
                                top: 4px;
                                width: 12px;
                                height: 11px;
                                cursor: pointer;
                            }
                        }

                        &:before,
                        &:after {
                            display: block;
                            content: '';
                            position: absolute;
                            right: 7px;
                            width: 0;
                            height: 0;
                            border: 4px solid transparent;
                            border-radius: 2px;
                        }
                        &:before {
                            top: 11px;
                            border-top: 4px solid #F04E46;
                        }
                        &:after {
                            top: 9px;
                            border-top: 4px solid #f7f7f7;
                        }

                        &.active {
                            &:before {
                                bottom: 10px;
                                top: unset;
                                transform: rotate(180deg);
                            }
                            &:after {
                                bottom: 8px;
                                top: unset;
                                transform: rotate(180deg);
                            }
                            // .store_coupons_list {
                            //     display: block;
                            // }
                        }

                        .store_coupons_list {
                            // display: none;
                            position: absolute;
                            top: 38px;
                            left: -29px;
                            z-index: 99;
                            width: 320px;
                            // height: 230px;
                            padding: 0 10px;
                            background: #FFFFFF;
                            border: 1px solid #EB0C00;
                            cursor: default;
                            &:before {
                                content: '';
                                display: block;
                                position: absolute;
                                width: 0;
                                height: 0;
                                top: -13px;
                                left: 53px;
                                border: 6px solid transparent;
                                border-bottom: 6px solid #EB0C00;
                            }
                            &:after {
                                content: '';
                                display: block;
                                position: absolute;
                                width: 0;
                                height: 0;
                                top: -12px;
                                left: 53px;
                                border: 6px solid transparent;
                                border-bottom: 6px solid #fff;
                            }
                            // &:hover {
                            //     display: block;
                            // }
                        }
                    }
                    .get_coupons_btn {
                        margin-left: 20px;
                        width: 100px;
                        height: 20px;
                        border: 1px solid $colorMain;
                        span {
                            font-size: 12px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: $colorMain;
                        }
                        img {
                            width: 5px;
                            height: 9px;
                            margin-left: 10px;
                        }
                    }
                }
                .goods_con {
                    width: 1200px;
                    background: #ffffff;
                    // border: 1px solid #dfdfdf;
                    margin-bottom: 10px;
                    border-radius: 10px;
                    overflow: hidden;
                    &:nth-last-of-type(1) {
                        margin-bottom: 0;
                    }
                    .full_reduc_activity {
                        width: 1200px;
                        height: 40px;
                        background-color: #f6f6f6;
                        border-bottom: 1px solid #DEDEDE;;
                        // background: #fff3f3;
                        padding-left: 20px;
                        .full_reduc_title {
                            width: 46px;
                            height: 24px;
                            background: $colorMain;
                            border-radius: 3px;
                            font-size: 12px;
                            //font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: #ffffff;
                            text-align: center;
                            line-height: 24px;
                            border-radius: 11px;
                        }
                        .full_reduc_des {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #333333;
                            margin: 0 16px;
                        }
                        .go_collect_bill {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #1a86ff;
                        }
                    }
                    .goods_list {
                        .goods_pre {
                            position: relative;
                            width: 100%;
                            background-color: #f6f6f6;
                            // border-bottom: 1px solid #E7E4E4;
                            padding: 20px 0 20px 20px;
                            &.active,
                            &:hover {
                                background-color: #FFF9F6;
                            }
                            &:after {
                                content: '';
                                position: absolute;
                                bottom: 0px;
                                right: 0;
                                z-index: 9;
                                width: 1146px;
                                height: 1px;
                                background-color: #E7E4E4;
                            }
                            &:nth-last-child(1) {
                                // border-bottom: none;
                                &:after {
                                    display: none;
                                }
                            }
                            .goods_pre_sel {
                                width: 14px;
                                height: 14px;
                                cursor: pointer;
                                img {
                                    width: 14px;
                                    height: 14px;
                                }
                                &.no_cursor {
                                    cursor: not-allowed;
                                }
                            }
                            .goods_img {
                                width: 100px;
                                height: 100px;
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center;
                                margin: 0 19px 0 20px;
                                cursor: pointer;
                                &.no_stock_img {
                                    opacity: 0.6;
                                }
                            }
                            .goods_des {
                                height: 78px;
                                .goods_name {
                                    width: 283px;
                                    line-height: 18px;
                                    color: #333333;
                                    font-size: 14px;
                                    //font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    display: -webkit-box;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    text-overflow: -o-ellipsis-lastline;
                                    line-clamp: 2;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    text {
                                        cursor: pointer;
                                    }
                                    &.no_stock_name {
                                        color: #999999;
                                    }
                                }
                                .goods_spec {
                                    width: 283px;
                                    color: #999999;
                                    font-size: 14px;
                                    //font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    word-break: break-all;
                                    text-overflow: ellipsis;
                                    // margin-top: 21px;
                                    text {
                                        cursor: pointer;
                                    }
                                    &.no_stock_spec {
                                        color: #bbbbbb;
                                    }
                                }
                            }
                            .goods_price_prom {
                                .goods_price {
                                    font-size: 14px;
                                    //font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #333333;
                                    width: 243px;
                                    text-align: center;
                                    &.no_stock_price {
                                        color: #999999;
                                    }
                                }
                                .promotion {
                                    font-size: 14px;
                                    //font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: $colorMain;
                                    text-align: center;
                                    margin-top: 18px;
                                    i {
                                        color: $colorMain;
                                        font-size: 5px;
                                        margin-left: 4px;
                                    }
                                }
                            }
                            .goods_num {
                                .goods_edit_nem {
                                    width: 99px;
                                    background: #ffffff;
                                    border: 1px solid #dddddd;
                                    span {
                                        width: 30px;
                                        height: 30px;
                                        background: #fafafa;
                                        text-align: center;
                                        display: block;
                                        line-height: 30px;
                                        cursor: pointer;
                                    }
                                    input {
                                        width: 39px;
                                        height: 30px;
                                        border: none;
                                        border-left: 1px solid #dddddd;
                                        border-right: 1px solid #dddddd;
                                        text-align: center;
                                        line-height: 30px;
                                    }
                                    /*** 消除input元素 type="number" 时默认的 加减按钮*/
                                    input[type="number"]::-webkit-inner-spin-button,
                                    input[type="number"]::-webkit-outer-spin-button {
                                        -webkit-appearance: none;
                                        margin: 0;
                                    }
                                    /*** 消除input元素 type="number" 时默认的 加减按钮---moz版*/
                                    input[type="number"] {
                                        -moz-appearance: textfield;
                                    }
                                }
                                .goods_stocks {
                                    color: #666666;
                                    font-size: 12px;
                                    //font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    margin-top: 11px;
                                    &.goods_stocks_red {
                                        color: $colorMain;
                                    }
                                    &.goods_stocks_no {
                                        color: $colorMain;
                                    }
                                }
                            }
                            .subtotal {
                                width: 286px;
                                color: $colorMain;
                                font-size: 14px;
                                //font-family: Microsoft YaHei;
                                font-weight: bold;
                                text-align: center;
                            }
                            .goods_btn {
                                .goods_collect {
                                    font-size: 14px;
                                    //font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #333333;
                                    cursor: pointer;
                                    margin-bottom: 12px;
                                    &:hover {
                                        color: $colorMain;
                                    }
                                }
                                .goods_del {
                                    font-size: 14px;
                                    //font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #333333;
                                    cursor: pointer;
                                    &:hover {
                                        color: $colorMain;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            // 失效商品 start
            .invalid_goods {
                .invalid_goods_title {
                    font-size: 18px;
                    //font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    margin-top: 30px;
                    margin-bottom: 14px;
                    padding-left: 20px;
                    span:nth-child(2) {
                        font-size: 16px;
                        font-weight: 400;
                        color: #005EA7;
                        cursor: pointer;
                        margin-left: 45px;
                    }
                }
                .invalid_goods_list {
                    width: 1200px;
                    background: #F0F0F0;
                    border-radius: 10px;
                    overflow: hidden;
                    // border: 1px solid #dfdfdf;
                    .invalid_goods_pre {
                        border-bottom: 1px solid #dddddd;
                        padding: 20px 0 20px 11px;
                        &:nth-last-child(1) {
                            border-bottom: none;
                        }
                        .invalid_tips {
                            width: 34px;
                            height: 24px;
                            background: #dddddd;
                            border-radius: 3px;
                            font-size: 12px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #333333;
                            display: block;
                            text-align: center;
                            line-height: 24px;
                        }
                        .invalid_img {
                            width: 100px;
                            height: 100px;
                            opacity: 0.6;
                            margin: 0 19px 0 10px;
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: cover;
                        }
                        .invalid_des {
                            .invalid_name {
                                width: 283px;
                                font-size: 14px;
                                //font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #999999;
                                line-height: 18px;
                                text-overflow: -o-ellipsis-lastline;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                line-clamp: 2;
                                -webkit-box-orient: vertical;
                            }
                            .invalid_spec {
                                width: 283px;
                                margin-top: 21px;
                                font-size: 14px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                color: #999999;
                            }
                        }
                        .invalid_price {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #999999;
                            width: 243px;
                            text-align: center;
                        }
                        .invalid_num {
                            .invalid_edit_num {
                                width: 99px;
                                background: #ffffff;
                                border: 1px solid #eeeeee;
                                span {
                                    width: 30px;
                                    height: 30px;
                                    background: #fafafa;
                                    text-align: center;
                                    line-height: 30px;
                                    display: block;
                                    cursor: pointer;
                                }
                                input {
                                    width: 39px;
                                    height: 30px;
                                    text-align: center;
                                    line-height: 30px;
                                    border: none;
                                    display: block;
                                    border-left: 1px solid #eeeeee;
                                    border-right: 1px solid #eeeeee;
                                }
                                /*** 消除input元素 type="number" 时默认的 加减按钮*/
                                input[type="number"]::-webkit-inner-spin-button,
                                input[type="number"]::-webkit-outer-spin-button {
                                    -webkit-appearance: none;
                                    margin: 0;
                                }
                                /*** 消除input元素 type="number" 时默认的 加减按钮---moz版*/
                                input[type="number"] {
                                    -moz-appearance: textfield;
                                }
                            }
                            .invalid_off {
                                font-size: 12px;
                                //font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #666666;
                                margin-top: 11px;
                            }
                        }
                        .invalid_subtotal {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #999999;
                            width: 286px;
                            text-align: center;
                        }
                        .invalid_btn {
                            .invalid_collect,
                            .invalid_del {
                                font-size: 14px;
                                //font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #666666;
                                cursor: pointer;
                            }
                            .invalid_collect:hover,
                            .invalid_del:hover {
                                color: $colorMain;
                            }
                            .invalid_collect {
                                margin-bottom: 18px;
                            }
                        }
                    }
                }
            }
            // 失效商品 end
        }
        .options_btn {
            width: 1200px;
            height: 72px;
            background: #f6f6f6;
            padding-left: 20px;
            margin: 0 auto;
            .options_btn_left {
                .options_sel {
                    img {
                        width: 14px;
                        height: 14px;
                        cursor: pointer;
                    }
                    span {
                        font-size: 14px;
                        //font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #333333;
                        margin-left: 14px;
                    }
                }
                .del_all,
                .del_all_invalid {
                    font-size: 14px;
                    //font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #666666;
                    line-height: 74px;
                    margin-left: 21px;
                }
                .del_all:hover,
                .del_all_invalid:hover {
                    color: $colorMain;
                }
            }
            .options_right {
                .options_sel_num {
                    font-size: 14px;
                    //font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    span {
                        color: $colorMain;
                        font-size: 16px;
                        font-weight: bold;
                        margin-left: 4px;
                        margin-right: 4px;
                    }
                }
                .options_line {
                    width: 55px;
                    // height: 50px;
                    // background: #dddddd;
                    // margin: 0 41px 0 39px;
                }
                .options_sel_price {
                    .options_all_count {
                        span:nth-child(1) {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #333333;
                        }
                        span:nth-child(2) {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #333333;
                            margin-top: 14px;
                        }
                    }
                    .options_promotion {
                        // margin-left: 30px;
                        span:nth-child(1) {
                            font-size: 18px;
                            //font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: $colorMain;
                        }
                        span:nth-child(2) {
                            font-size: 16px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: $colorMain;
                            margin-top: 14px;
                        }
                    }
                }
                .go_buy {
                    width: 160px;
                    height: 72px;
                    background: #666666;
                    font-size: 26px;
                    //font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 72px;
                    text-align: center;
                    margin-left: 31px;
                    &.active {
                        background: $colorMain;
                    }
                }
            }
        }
    }
    .cart_content_no {
        margin: 161px auto;
        img {
            width: 163px;
            height: 114px;
        }
        p {
            font-size: 14px;
            //font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 39px;
            text-align: center;
        }
        span {
            width: 115px;
            height: 30px;
            background: $colorMain2;
            border-radius: 3px;
            display: block;
            font-size: 14px;
            //font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
    }
    .cursor_pointer {
        cursor: pointer;
    }
    // 优惠券弹框 start
    .coupon_model {
        .model_coupon_list {
            display: flex;
            flex-wrap: wrap;
        }
        .sld_coupon_item {
            margin-right: 10px !important;
        }
        .sld_coupon_item:nth-child(2n) {
            margin-right: 0 !important;
        }
    }
    // 优惠券弹框 end

    // 底部操作按钮悬浮框 start
    .bottom_options {
        position: fixed;
        bottom: 0px;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 -1px 8px rgba(0, 1, 1, 0.08);
        z-index: 100;
        .bottom_options_con {
            width: 1200px;
            height: 72px;
            // background: #eeeeee;
            padding-left: 20px;
            margin: 0 auto;
            .options_btn_left {
                .options_sel {
                    img {
                        width: 14px;
                        height: 14px;
                        cursor: pointer;
                    }
                    span {
                        font-size: 14px;
                        //font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #333333;
                        margin-left: 14px;
                    }
                }
                .del_all,
                .del_all_invalid {
                    font-size: 14px;
                    //font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #666666;
                    line-height: 74px;
                    margin-left: 21px;
                }
                .del_all:hover,
                .del_all_invalid:hover {
                    color: $colorMain;
                }
            }
            .options_right {
                .options_sel_num {
                    font-size: 14px;
                    //font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    span {
                        color: $colorMain;
                        font-size: 16px;
                        font-weight: bold;
                        margin-left: 4px;
                        margin-right: 4px;
                    }
                }
                .options_line {
                    width: 55px;
                    // height: 50px;
                    // background: #dddddd;
                    // margin: 0 41px 0 39px;
                }
                .options_sel_price {
                    .options_all_count {
                        span:nth-child(1) {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #333333;
                        }
                        span:nth-child(2) {
                            font-size: 14px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #333333;
                            margin-top: 14px;
                        }
                    }
                    .options_promotion {
                        // margin-left: 30px;
                        span:nth-child(1) {
                            font-size: 18px;
                            //font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: $colorMain;
                        }
                        span:nth-child(2) {
                            font-size: 16px;
                            //font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: $colorMain;
                            margin-top: 14px;
                        }
                    }
                }
                .go_buy {
                    width: 160px;
                    height: 72px;
                    background: #666666;
                    font-size: 26px;
                    //font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 72px;
                    text-align: center;
                    margin-left: 31px;
                    &.active {
                        background: $colorMain;
                    }
                }
            }
        }
    }
    // 底部操作按钮悬浮框 end

    // 公共样式
    // 底部操作按钮 start

    // 底部操作按钮 end
}
.el-button--primary {
    color: #fff;
    background-color: $colorMain;
    border-color: $colorMain;
}
.el-button--primary:focus,
.el-button--primary:hover {
    background: $colorMain;
    border-color: $colorMain;
    color: #fff;
}
.el-button:focus,
.el-button:hover {
    background: $colorMain;
    border-color: $colorMain;
    color: #fff;
}