werun-wxapp/components/diy-group/index.less

.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .one_box {
        width: 48%;
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 6px 2px;

        .image {
            width: 100%;
        }

        .bargain_box {
            margin-top: -86rpx;
            position: relative;
            background: #FF3422;
            width: 100%;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15rpx;

            .bargin_font {
                font-size: 30rpx;
                color: #FFFFFF;

            }

            .bargin_count {
                .item {
                    color: #fff;
                    display: inline-block;
                    margin-right: 5rpx;
                    font-size: 24rpx;
                    text-align: center;
                    background-color: none;
                }

                .item1 {
                    font-size: 20rpx;
                }

                .bargin_end {
                    font-size: 20rpx;
                    color: #DDDDDD;
                }

                .bargin_end2 {
                    font-size: 30rpx;
                    color: #DDDDDD;
                }
            }
        }

        .commodity {
            padding: 16rpx;

            .name_info {
                display: flex;
                align-items: center;
                margin-bottom: 10rpx;

                .tag {
                    font-size: 30rpx;
                    color: #ff4434;
                    background: #ffd0cc;
                    padding: 4rpx 10rpx;
                    border-radius: 28rpx;
                    margin-right: 8rpx;
                }

                .people {
                    width: 120rpx;
                    text-align: center;
                    padding: 0;
                }

                .commodity_name {
                    width: 80%;
                    color: #222222;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }

            .commodity_detailed {
                color: #999999;
                margin-bottom: 10rpx;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 28rpx;
            }

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

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

                    .price {
                        font-size: 34rpx;
                        font-weight: 700;
                        color: #FF3422;
                    }

                    .original {
                        font-size: 28rpx;
                        text-decoration: line-through;
                        color: #BBBBBB;
                        margin-left: 10rpx;
                    }
                }

                .circular3 {
                    padding: 3rpx 10rpx;
                    border-radius: 30rpx;
                    border: 1rpx solid #FF3422;
                }

                .circular4 {
                    background: #FF3422;
                }

                .circular7 {
                    padding: 3rpx 10rpx;
                    border: 1rpx solid #FF3422;
                }

                .circular8 {
                    background: #FF3422;
                }
            }
        }
    }

    .groupWidth0 {
        width: 100%;
    }
}

.two_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .line_box {
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 6px 2px;
        overflow: hidden;
        .image {
            width: 100%;
            // height: 300rpx;
        }

        .end_box {
            margin-top: -45rpx;
            position: relative;
            align-items: center;
            width: 100%;
            display: flex;
            background-color: #FF3422;
            justify-content: space-between;
            padding: 0rpx 10rpx;

            .bargin_end {
                font-size: 20rpx;
                color: #DDDDDD;
                margin: 0rpx 0rpx 0rpx 0rpx;
            }

            .item {
                display: inline-block;
                margin-right: 5rpx;
                color: #fff;
                font-size: 20rpx;
                text-align: center;
                background-color: none;

            }

            .bargin_end2 {
                font-size: 30rpx;
                color: #DDDDDD;
                // margin: 20rpx 0rpx 0rpx 0rpx;
            }

        }

        .two_end {
            padding: 15rpx;

            .two_tag {
                height: 80rpx;
                line-height: 40rpx;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 5rpx;

                .people {
                    color: #ff4434;
                    background: #ffd0cc;
                    padding: 3rpx 12rpx;
                    border-radius: 28rpx;
                    font-size: 24rpx;
                }
            }

            .commodity_desc {
                color: #999999;
                margin-bottom: 10rpx;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .end_detailed {
                font-size: 30rpx;
                color: #666666;
                margin: 5rpx 0rpx 5rpx 10rpx;
            }

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

                .end_number {
                    .money1 {
                        font-size: 32rpx;
                        color: #FF3422;
                        font-weight: 700;
                    }

                    .money2 {
                        font-size: 28rpx;
                        text-decoration: line-through;
                        color: #BBBBBB;
                    }
                }
            }

            .circular3 {
                padding: 3rpx 10rpx;
                border-radius: 30rpx;
                border: 1rpx solid #FF3422;
            }

            .circular4 {
                background: #FF3422;
            }

            .circular7 {
                padding: 3rpx 10rpx;
                border: 1rpx solid #FF3422;
            }

            .circular8 {
                background: #FF3422;
            }




        }
    }

}

.three_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .three {
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 6px 2px;

        .image {
            width: 100%;
        }

        .three-end {
            padding: 9rpx;

            .three_tag {
                line-height: 40rpx;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 5rpx;

                .people {
                    color: #ff4434;
                    background: #ffd0cc;
                    padding: 3rpx 12rpx;
                    border-radius: 28rpx;
                    font-size: 24rpx;
                }
            }

            .commodity_desc {
                color: #999999;
                margin-bottom: 10rpx;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .three_name2 {
                font-size: 20rpx;
                color: #666666;
                margin-bottom: 4rpx;
            }

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

                .end_number {
                    .money1 {
                        font-size: 28rpx;
                        color: #FF3422;
                        font-weight: 700;
                    }

                    .money2 {
                        font-size: 26rpx;
                        text-decoration: line-through;
                        color: #BBBBBB;
                    }
                }
            }

            .circular3 {
                padding: 3rpx 10rpx;
                border-radius: 30rpx;
                border: 1rpx solid #FF3422;
            }

            .circular4 {
                background: #FF3422;
            }

            .circular7 {
                padding: 3rpx 10rpx;
                border: 1rpx solid #FF3422;
            }

            .circular8 {
                background: #FF3422;
            }
        }
    }
}

.for_box {
    .detailed {
        display: flex;
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 6px 2px;

        .detailed_left {
            width: 52%;

            .image {
                width: 100%;
            }

            .end_box {
                margin-top: -56rpx;
                position: relative;
                align-items: center;
                width: 100%;
                display: flex;
                background-color: #FF3422;
                justify-content: space-between;
                padding: 5rpx 10rpx;



                .bargin_end {
                    font-size: 22rpx;
                    color: #DDDDDD;
                }

                .item {
                    display: inline-block;
                    margin-right: 5rpx;
                    color: #fff;
                    font-size: 22rpx;
                    text-align: center;
                    background-color: none;
                }

                .bargin_end2 {
                    font-size: 30rpx;
                    color: #DDDDDD;
                }
            }
        }

        .detailed-txt {
            padding: 15rpx;
            width: 49%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 20rpx 0;

            .detailed_top {
                .four_tag {
                    line-height: 40rpx;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;

                    .people {
                        color: #ff4434;
                        background: #ffd0cc;
                        padding: 3rpx 12rpx;
                        border-radius: 28rpx;
                        font-size: 24rpx;
                        margin-right: 10rpx;
                    }
                }

                .commodity_desc {
                    color: #999999;
                    margin-bottom: 10rpx;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .three_name2 {
                    font-size: 20rpx;
                    color: #666666;
                    margin-bottom: 4rpx;
                }
            }


            .price_info {
                .price {
                    display: flex;
                    align-items: center;
                    margin-top: -50rpx;

                    .group_price {
                        font-size: 30rpx;
                        font-weight: 700;
                        color: #FF3422;
                    }

                    .original_price {
                        font-size: 24rpx;
                        text-decoration: line-through;
                        color: #BBBBBB;
                        margin-left: 8rpx;
                    }
                }

                .circular3 {
                    padding: 3rpx 10rpx;
                    border-radius: 30rpx;
                    border: 1rpx solid #FF3422;
                    position: absolute;
                    right: 30rpx;
                    margin-top: -5rpx;
                }

                .circular4 {
                    padding: 3rpx 10rpx;
                    border: 1rpx solid #FF3422;
                    position: absolute;
                    right: 30rpx;
                    margin-top: -5rpx;
                }

                .circular7 {
                    padding: 3rpx 10rpx;
                    background: #FF3422;
                    position: absolute;
                    right: 30rpx;
                    margin-top: -5rpx;
                }

                .circular8 {
                    padding: 3rpx 10rpx;
                    border: 1rpx solid #FF3422;
                    position: absolute;
                    right: 30rpx;
                    margin-top: -5rpx;
                }
            }
        }
    }
}

.scroll_info {
    white-space: nowrap;
    display: flex;

    .six-box {
        box-shadow: rgb(126 126 126 / 50%) 0px 0px 6px 2px;
        display: inline-block;

        .image {
            width: 100%;
        }

        .end_info {
            width: 100%;
            padding: 10rpx;

            .six_tag {
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 5rpx;
                font-weight: 700;

                .people {
                    color: #ff4434;
                    background: #ffd0cc;
                    padding: 3rpx 12rpx;
                    border-radius: 28rpx;
                    font-size: 24rpx;
                    margin-right: 10rpx;
                    font-weight: 500;
                }
            }

            .commodity_desc {
                color: #999999;
                margin-bottom: 10rpx;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .six_name {
                font-size: 20rpx;
                color: #666666;
                margin-bottom: 4rpx;
            }

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

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

                    .group_price {
                        font-size: 30rpx;
                        color: #FF3422;
                    }

                    .original_price {
                        font-size: 24rpx;
                        text-decoration: line-through;
                        color: #BBBBBB;
                        margin-left: 10rpx;
                    }
                }

                .circular3 {
                    padding: 3rpx 10rpx;
                    border-radius: 30rpx;
                    border: 1rpx solid #FF3422;
                }

                .circular4 {
                    background: #FF3422;
                }

                .circular7 {
                    padding: 3rpx 10rpx;
                    border: 1rpx solid #FF3422;
                }

                .circular8 {
                    background: #FF3422;
                }
            }
        }
    }
}