werun-wxapp/common-page/pages/myOrder/order-detail/index.less

.pay_wrap {
    background-color: #e6e6e6;
    height: 100%;
    padding-bottom: 20rpx;
    .line {
        width: 100%;
        height: 20rpx;
        background-color: #e6e6e6;
    }

    .address {
        background-color: #fff;
        margin: 0 auto;
        padding: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 94%;
        height: 240rpx;
        border-radius: 16rpx;

        .address_info {
            margin-left: 6rpx;

            .info_top {
                display: flex;
                align-items: center;
                justify-content: start;
                margin-bottom: 10rpx;

                .name {
                    font-size: 32rpx;
                    font-weight: 700;
                }

                .mobile {
                    font-size: 28rpx;
                    color: #B0ADAD;
                    margin-left: 12rpx;
                }
            }

            .info_content {
                font-size: 30rpx;
                margin-bottom: 10rpx;
            }

            .tips {
                font-size: 30rpx;
                color: #ee0a24;
            }
        }

        .address_select {
            font-size: 36rpx;
            font-weight: 700;
            color: #ffca28;
        }
    }


    .goods_box {

        background-color: #fff;
        margin: 20rpx auto;
        padding: 10rpx;
        align-items: center;
        width: 94%;
        border-radius: 16rpx;

        .title {
            display: flex;
            align-items: center;
            justify-content: start;
            margin-bottom: 30rpx;

            .logo {
                margin-right: 10rpx;
            }
        }

        .goods_info {
            display: flex;
            align-items: flex-start;

            .goods_image {
                width: 200rpx;
                height: 200rpx;
                margin-right: 10rpx;
            }

            .goods_detail {
                .goods_name {
                    font-size: 32rpx;
                    font-weight: 700;
                    margin-bottom: 10rpx;

                }

                .goods_desc {
                    font-size: 30rpx;
                    color: #ccc;
                }

                .goods_tips {
                    font-size: 30rpx;
                    color: #ffca28;
                }
            }
        }

        .goods_count {
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            justify-content: space-between;
            padding: 10rpx;
        }

        .goods_remark {
            margin-top: 20rpx;
            padding: 10rpx;
        }
    }





    .pay_address {
        width: 100%;
        padding: 30rpx;
        margin-top: 30rpx;
        height: 90rpx;
        display: flex;
        background-color: #fff;
        align-items: center;
        border-radius: 10rpx;

        .pay_address_left {
            // width: 40rpx;
            // height: 40rpx;
            background-color: red;
            color: white;
            flex: 2;
            text-align: center;
            border-radius: 10rpx;
        }

        .pay_address_right {
            flex: 8;
            display: flex;
            justify-content: space-between;
        }
    }

    .pay_goods {
        margin: 30rpx 0;
        border: 1px solid rgb(236, 236, 236);
        border-radius: 15rpx;

        .footer_wrap {
            display: flex;
            flex-direction: column;

            // justify-content: center;
            // align-items: center;
            .footer_btn {}

            .checkbox {
                width: 100%;
                height: 70rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .text {
                    font-size: 28rpx;
                    font-weight: 600;
                    color: red;
                }
            }
        }

    }

    .user_info {
        background-color: #fff;
        margin: 20rpx 0;
        padding: 0 20rpx;

        .user_info_name {
            height: 90rpx;
            display: flex;
            align-items: center;
        }

        .user_info_num {
            height: 90rpx;
            display: flex;
            align-items: center;
        }
    }

    .pay_discount {
        width: 100%;
        background-color: #fff;

        .pay_discount_title {
            padding: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    }
}

.van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}

// .van-cell::after {
//     position: absolute;
//     box-sizing: border-box;
//     content: ' ';
//     pointer-events: none;
//     right: 16px;
//     bottom: 0;
//     left: 16px;
//     border-bottom: 1px solid #ebedf0;
//     -webkit-transform: scaleY(0.5);
//     transform: scaleY(0.5);
// }

.discount {
    .discount_text {
        width: 100%;
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        // margin:0 auto;
        text {
            font-size: 36rpx;
            font-weight: 700;
        }
    }

}

checkbox .wx-checkbox-input {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #ee0a24;
    border-color: #ee0a24;
    /* color: #ffffff; */
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    font-size: 34rpx;
    color: #fff;
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}


.tabs_title {
    display: flex;
}

.tabs_title .title_item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 15rpx 0;
}

.active {
    color: red;
    border-bottom: 5rpx solid currentColor;
}

.tabs_content {
    // background-color: #f6f5fa;
    background-color: #fff;
    padding-top: 40rpx;

    .coupon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx 20rpx;
    }
}

.coupon_img {
    width: 95%;
    height: 220rpx;
    margin: 0 auto;
    background-color: #ccc;
}

.coupon_item_wrap {
    width: 90%;
    height: 180rpx;
    margin: 20rpx auto;
    display: flex;
    background-image: url('http://cloud.file.futurestack.cn/1AiWpTEDH9/20201207/qf19km053654.png?imageView2');
    background-size: 100%;
    background-repeat: no-repeat;

    .coupon_item_left {
        flex: 7.5;
        padding: 15rpx;
        display: flex;

        .coupon_left_price_wrap {
            flex: 3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .coupon_left_price {
                color: #DB432E;
                font-size: 20rpx;

                .text1 {
                    color: #DB432E;
                    font-size: 48rpx;
                    font-weight: 800;
                }
            }

            .coupon_price_text {
                font-size: 24rpx;
            }
        }

        .coupon_left_cnt {
            flex: 7;
            display: flex;
            padding-left: 10rpx;
            flex-direction: column;
            justify-content: space-around;

            .left_cnt_title {
                margin: 15rpx 0;

            }

            .left_cnt_btm {
                display: flex;
                flex-direction: column;

                text {
                    font-size: 22rpx;
                    color: #B0ADAD;

                }
            }
        }
    }

    .coupon_item_right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 2.5;
        position: relative;
        overflow: hidden;

        button {
            width: 120rpx;
            background-color: #DB432E;
            color: #fff;
            border-radius: 40px;
            font-size: 20rpx;
        }

        .active {
            image {
                width: 100rpx;
                height: 100rpx;
                position: absolute;
                right: -10rpx;
                top: -25rpx;
            }

            button {
                width: 120rpx;
                background-color: #f5e054;
                color: #ed6d69;
                border-radius: 40px;
                font-size: 20rpx;
                margin-top: 40rpx;
            }
        }
    }
}

.has-info {
    display: flex;
    flex-direction: column;
    // padding: 30rpx;
    padding: 0;
    margin: 30rpx 0;
    width: 100%;
    background-color: #fff;

    .info-item {
        // padding: 30rpx 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        // background: #fff;
        border-radius: 10rpx;
        box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
        // margin-bottom: 24rpx;
        position: relative;

        .edit-wrap {
            // padding: 30rpx;
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            .img {
                width: 42rpx;
                height: 42rpx;
            }
        }

        .selected {
            display: flex;
            justify-content: center;
            align-items: center;
            // padding: 30rpx 0 30rpx 30rpx;

            .img {
                width: 40rpx;
                height: 40rpx;
            }
        }

        .info-wrap {
            display: flex;
            flex-direction: column;
            padding-left: 30rpx;

            .addr {
                display: flex;
                flex-direction: column;
                margin-bottom: 10rpx;

                .top {
                    font-size: 30rpx;
                    font-weight: 500;
                    margin-bottom: 4rpx;
                }

                .text {
                    font-size: 24rpx;
                    color: #777;
                }

                .img-wrap {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 10rpx;
                }
            }

            .name {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .img-wrap {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 10rpx;
                }

                .img {
                    width: 42rpx;
                    height: 42rpx;
                }

                .default {
                    font-size: 22rpx;
                    color: #ff3456;
                    background: #faedef;
                    text-align: center;
                    padding: 2rpx 10rpx;
                    border-radius: 4rpx;
                }

                .text {
                    font-size: 26rpx;
                    margin-right: 10rpx;
                }
            }
        }

        // .id-wrap {
        //     display: flex;
        //     flex-direction: column;

        //     .ids {
        //         display: flex;
        //         justify-content: flex-start;
        //         align-items: center;
        //         font-size: 26rpx;
        //         color: #5d6777;
        //         margin-bottom: 8rpx;

        //         .id-name {
        //             margin-right: 20rpx;

        //         }
        //     }

        //     .no-ids {
        //         font-size: 26rpx;
        //         color: #ffbb12;
        //     }
        // }
    }

}

.fetchTime {
    background-color: #fff;
    font-size: 26rpx;
    padding: 30rpx;
}

.btn {
    display: flex;
    justify-content: space-between;
    margin: 20rpx auto;
    padding: 0 20rpx;
    align-items: center;
    .status {
        text-align: center;
        font-size: 34rpx;
        font-weight: 800;
        line-height: 1.5;
        color: #6d6d6d;
    }

    .refund {
        padding: 14rpx 60rpx;
        border: 1rpx solid #fd5f5f;
        border-radius: 50rpx;
        color: #fd5f5f;
    }
}