tourism-wxapp/nova-tourism/pages/collect/collect-detail/index.less

/* nova-tourism/pages/collect/collect-detail/index.wxss */
.bax {
    width: 100%;
    position: relative;

    .all {
        width: 100vw;
        overflow-y: scroll;
        position: relative;
        background-color: #EEEEEE;
        color: #727783;
        font-family: "Microsoft JhengHei", "PingFang SC", "Helvetica Neue", sans-serif;
        font-weight: 700;

        .picturebox {
            width: 100%;
            height: 550rpx;
            position: relative;

            .img {
                width: 100%;
                height: 550rpx;

                image {
                    width: 100%;
                    height: 100%;

                }
            }

            .numberbox {
                position: absolute;
                bottom: 40rpx;
                right: 20rpx;
                border-radius: 45%;
                z-index: 10;
                color: white;
                width: 70rpx;
                height: 45rpx;
                font-size: 24rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba(12, 12, 12, 0.5);
            }

        }

        .box {
            width: 100%;
            height: auto;
            background-color: #EEEEEE;
            position: absolute;
            top: 542rpx;
            left: 0;
            border-radius: 12rpx;

            .infobox {
                width: 100%;
                height: auto;
                padding: 40rpx;
                border-radius: 20rpx;
                background-color: white;

                .title {
                    width: 100%;
                    font-size: 26rpx;

                }

                .lebalbox {
                    width: 100%;
                    display: flex;
                    margin-top: 10rpx;

                    .lebal {
                        height: 50rpx;
                        font-size: 28rpx;
                        border-radius: 6rpx;
                        padding-left: 20rpx;
                        padding-right: 20rpx;
                        background-color: #FBF5E1;
                        color: #F8BB7F;
                        margin-right: 20rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                .carbox {
                    width: 100%;
                    height: 60rpx;
                    margin-top: 24rpx;
                    display: flex;
                    align-items: center;

                    image {
                        width: 40rpx;
                        height: 30rpx;
                    }

                    .car-tex {
                        font-size: 26rpx;
                        color: #F8BB7F;
                        margin-left: 10rpx;
                    }
                }

                .carbox2 {
                    width: 100%;
                    margin-top: 20rpx;
                    display: flex;
                    align-items: center;
                    border-bottom: solid 2rpx #EEEEEE;
                    padding-bottom: 20rpx;

                    image {
                        width: 40rpx;
                        height: 40rpx;
                    }

                    .car-tex {
                        font-size: 26rpx;
                        // color: #F8BB7F;
                        margin-left: 10rpx;
                    }
                }

                .carbox3 {
                    width: 100%;
                    margin-top: 20rpx;
                    display: flex;

                    image {
                        width: 40rpx;
                        height: 40rpx;
                    }

                    .carbox3-tex {
                        font-size: 26rpx;
                        margin-left: 10rpx;

                        .carbox3-tex2 {
                            margin-top: 10rpx;
                        }
                    }
                }

                .carbox4 {
                    width: 100%;
                    margin-top: 20rpx;
                    display: flex;
                    align-items: center;

                    image {
                        width: 40rpx;
                        height: 40rpx;
                    }

                    .car-tex {
                        font-size: 26rpx;
                        // color: #F8BB7F;
                        margin-left: 10rpx;
                    }
                }
            }

            .tipbox {
                width: 100%;
                height: auto;
                margin-top: 16rpx;
                padding-top: 20rpx;
                padding-left: 30rpx;
                padding-right: 30rpx;
                background-color: white;
                border-radius: 20rpx;
                padding-bottom: 40rpx;
                font-size: 26rpx;

                .dinggou {
                    width: 100%;
                    font-size: 26rpx;

                    .dinggou-tex {
                        margin-left: 20rpx;
                        margin-top: 10rpx;
                    }
                }

                .picbox {
                    width: 100%;
                    margin-top: 20rpx;
                    margin-bottom: 60rpx;

                    image {
                        width: 100%;
                    }
                }
            }

            .tipbox2 {
                width: 100%;
                height: auto;
                margin-top: 16rpx;
                padding-top: 20rpx;
                padding-left: 30rpx;
                padding-right: 30rpx;
                padding-bottom: 40rpx;
                background-color: white;
                border-radius: 20rpx;
                font-size: 26rpx;
                padding-bottom: 110rpx;

                .dinggou {
                    width: 100%;
                    font-size: 26rpx;

                    .dinggou-tex {
                        margin-left: 20rpx;
                        margin-top: 10rpx;
                    }
                }

                image {
                    width: 100%;
                    height: 760rpx;
                    margin-top: 20rpx;
                    margin-bottom: 20rpx;
                }

                .tip2-tex {
                    display: flex;
                    justify-content: flex-end;
                }

                .qrBox {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    image {
                        width: 150rpx;
                        margin: 40rpx 10rpx;
                    }
                }
            }

        }

    }

    .paybox {
        width: 100%;
        height: 90rpx;
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: white;

        .pay1 {
            width: 288rpx;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
                width: 50rpx;
                height: 44rpx;
            }

            .pay1-tex {
                font-size: 32rpx;
                margin-left: 30rpx;
            }
        }

        .pay2 {
            width: 462rpx;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32rpx;
            color: white;
            background-color: #F89B7F;

            .pay2-tex2 {
                margin-left: 10rpx;
            }
        }
    }

}

.specBox {
    font-family: Microsoft JhengHei UI;
    position: relative;

    .delivery {
        display: flex;
        justify-content: space-between;

        .tab {
            image {
                width: 48rpx;
                height: 40rpx;
                padding: 10rpx;
                margin: 10rpx;
                margin-right: 70rpx;
            }

            font-size: 26rpx;
            height: 80rpx;
            width:375rpx;
            display: flex;
            align-items:center;
        }

        .tab2 {
            background: #D9D9D9;
            border-radius: 0 24rpx 0 24rpx;
            justify-content: center;
        }
    }

    .verify {
        display: flex;
        justify-content: space-between;

        .tab {
            image {
                width: 48rpx;
                height: 40rpx;
                padding: 10rpx;
                margin: 10rpx;
                margin-right: 70rpx;
            }

            font-size: 26rpx;
            height: 80rpx;
            width:375rpx;
            display: flex;
            align-items:center;
        }

        .tab1 {
            background: #D9D9D9;
            border-radius: 24rpx 0 24rpx 0;
        }

        .tab2 {
            justify-content: center;
        }
    }

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

        .add {
            display: flex;
            align-items: center;

            image {
                width: 50rpx;
                height: 50rpx;
                padding-right: 20rpx;
            }

            view {
                width: 516rpx;
                font-size: 26rpx;
                line-height: 40rpx;
            }
        }
    }

    .good {
        display: flex;
        margin: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: #D9D9D9 1rpx solid;

        image {
            width: 224rpx;
            height: 222rpx;
            margin-right: 30rpx;
        }

        .info {
            width: 440rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .price {
                display: flex;
                margin-bottom: 10rpx;
                align-items: flex-end;

                .after {
                    display: flex;
                    align-items: center;

                    image {
                        width: 34rpx;
                        height: 34rpx;
                        margin-right: 5rpx;
                    }

                    .int {
                        font-size: 33rpx;
                        color: #F89B7F;

                    }

                    .point {
                        font-size: 24rpx;
                        color: #F89B7F;
                    }
                }

                .befor {
                    margin-left: 10rpx;
                    font-size: 24rpx;

                    text {
                        text-decoration: line-through
                    }
                }

            }

            .name {
                font-size: 24rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .li {
        margin: 20rpx;
        display: flex;
        justify-content: space-between;
        padding-bottom: 20rpx;
        border-bottom: #D9D9D9 1rpx solid;

        .tit {
            font-size: 30rpx;
        }

        .right {
            font-size: 26rpx;

            .coupons {
                color: #F89B7F;
                margin-right: 5rpx;
            }
        }
    }

    .tagBox {
        padding: 0 20rpx;
        padding-bottom: 20rpx;
        border-bottom: #D9D9D9 1rpx solid;

        .tit {
            font-size: 30rpx;
            margin-bottom: 20rpx;
        }

        .tag_chick {
            color: #F89B7F;
            background: #FEF4F3;
            border: 3rpx solid #F89B7F;
        }

        .tag_normal {
            background: #F3F1F2;

            text {
                color: #9F9D9E;
            }
        }

        .tag {
            font-size: 26rpx;
            padding: 10rpx 20rpx;
            border-radius: 8rpx;

        }

        .occup {
            margin: 30rpx 0;

        }
    }

    .more {
        margin: 20rpx;
        padding-bottom: 20rpx;
        font-size: 26rpx;
        display: flex;
        align-items: center;

        van-icon {
            margin-left: 20rpx;
        }
    }

    .btn {
        position: absolute;
        font-size: 32rpx;
        height: 82rpx;
        width: 100%;
        color: white;
        background: #F89B7F;
        border-radius: 0;
        margin: 0;
        padding: 0;
        bottom: 0;
    }
}

.moreBox {
    .more_title {
        border-bottom: #D9D9D9 1rpx solid;

        .tab {
            image {
                width: 48rpx;
                height: 40rpx;
                padding: 10rpx;
                margin: 10rpx;
                margin-right: 240rpx;
            }

            font-size: 26rpx;
            height: 80rpx;
            display: flex;
            align-items:center;
        }

    }

    .already {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        padding: 10rpx 20rpx;
        border-bottom: #D9D9D9 1rpx solid;

        .left {
            display: flex;
            align-items: center;

            image {
                width: 80rpx;
                height: 80rpx;
                margin: 0 20rpx;
            }

            text {
                width: 330rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .right {
            color: gray;
        }
    }
}

.listBox {
    .more_title {
        border-bottom: #D9D9D9 1rpx solid;

        .tab {
            image {
                width: 48rpx;
                height: 40rpx;
                padding: 10rpx;
                margin: 10rpx;
                margin-right: 240rpx;
            }

            font-size: 26rpx;
            height: 80rpx;
            display: flex;
            align-items:center;
        }

    }

    .good_item {
        display: flex;
        align-items: center;
        margin: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: #D9D9D9 1rpx solid;

        .item {
            display: flex;
            justify-content: space-between;

            image {
                width: 110rpx;
                height: 110rpx;
                margin-right: 20rpx;
            }

            .info {
                width: 520rpx;

                .name {
                    font-size: 22rpx;
                }

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

    .add {
        margin: auto;
        text-align: center;
        padding: 15rpx 0;
        font-size: 28rpx;
        width: 60vw;
        color: #F89B7F;
        background: white;
        border: 1rpx solid #F89B7F;
    }
}