.main{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: $color_bg_one;
    .search{
        padding: 20px;
        .SearchInput{
            background-color: #fff;
            padding: 10px 20px;
            box-sizing: border-box;
            border-radius: 10px;
        }
        
        .bluetooth_color{
            .color_bock{
                width: 100px;
                height: 46px;
            }
            .color_bock_no{
                font-size: $font_size_medium;
                color: $color_font_three;
            }
        }
    }
    .filter{
        .filter_all {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 130px;
            font-size: $font_size_medium;
            color: $color_font_three;
            .text_zh, .text_sc{
                color: $color_main;
                display: flex;
                align-items: center;
                .sortIcon{
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    .icon_one{
                        font-size: $font_size_medium;
                        position: absolute;
                        margin:auto;
                        top:0;
                    }
                }
            }
            .text_ss{
                position: relative;
                .miconfont{
                    font-size: 20px;
                    margin-left: 5px;
                }
                &::before{
                    content: '';
                    width: 2px;
                    height: 32px;
                    background-color: #C2C2C2;
                    position: absolute;
                    top: 0;
                    left: -30px;
                }
            }
        }
        .filter_btn_con{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 86px;
            
        }
        .filter_scroll{
            flex:1;
            width: 0;
            ::-webkit-scrollbar {
                display:none;
                width:0;
                height:0;
                color:transparent;
            }
        }
        .filter_btn{
            display: flex;
            justify-content: space-between;
            padding: 20px;
            margin-right: 20px;
            flex:1;
            view{
                font-size: $font_size_medium;
                background-color: #F0F0F0;
                border-radius: 24px;
                min-width: 126px;
                height: 46.93px;
                text-align: center;
                line-height: 46.93px;
                color: $color_font_three;
                &:nth-last-child(n+2) {
                    margin-right: 10px;
                }
                &:nth-last-child(1) {
                    margin-right: 30px;
                }
            }
            .selected{
                background-color: #ecf5ff;
                border: 2px solid #cde5ff;
                color: $color_main;
                width: 122px;
                height: 42.93px;
            }
        }
        .filter_more{
            font-size: $font_size_medium;
            color: $color_font_three;
            padding: 0 30px 0 20px;
            position: relative;
            height: 100%;
            line-height: 86px;
            &::before{
                content: '';
                opacity: 1;
                width: 30px;
                height: 100%;
                position: absolute;
                left: -15px;
                background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
                // z-index: 99;
            }
            .miconfont{
                font-size: 27px;
            }
        }
    }
    .list{
        flex:1;
        display: flex;
        flex-direction: column;
        .list_num {
            font-size: $font_size_min;
            color:$color_font_two;
            padding: 10px 38px;
            
        }
        .list_num_shadow {
            box-shadow: 0px 5px 5px #ccc;
        }
        .scroll{
            flex:1;
            height:0;
            padding-top: 3px;
        }
        .product_list{
            padding: 38px;
            display: grid;
            grid-template-columns: 321px 321px;
            justify-content: space-between;
            .product_item{
                width: 321px;
                background-color: #fff;
                border-radius: 20px;
                margin-bottom: 20px;
                .product_img{
                    width: 100%;
                    height: 224px;
                    background: #e5ad3a;
                    border-radius: 20px 20px 0px 0px;
                    position: relative;
                    image{
                        width: 100%;
                        height: 100%;
                        border-radius: 20px 20px 0px 0px;
                    }
                    .color_num {
                        background: rgba(0,0,0, 0.5);
                        border-radius: 0px 50px 0px 0px;
                        font-size: $font_size_min;
                        color: #fff;
                        position: absolute;
                        left:0;
                        bottom:0;
                        padding: 5px 20px;
                        box-sizing: border-box;
                    }
                }
            }
            .product_info{
                padding: 20px;
                .title{
                    font-size: $font_size;
                    color: $color_font_three;
                    @include common_ellipsis()
                }
                .tag_list{
                    display: flex;
                    margin-top: 16px;
                    .tag{
                        padding: 3px 10px;
                        background-color: #CDE5FF;
                        font-size: $font_size_min;
                        border-radius: 5px;
                        color: $color_main;
                        &:nth-child(2) {
                            margin-left: 10px;
                        }
                    }
                }
                .introduce{
                    font-size: $font_size_medium;
                    color: $color_font_two;
                    margin-top: 16px;
                    @include common_ellipsis()
                }
            }
        }
    }
}