website/src/global.scss

@media screen and (max-width: 1920px) {
    // #header{
    //     height: 3rem;
    //     .wrap{
    //         width: 55rem;
    //         .mini-menu{
    //             display: none!important;
    //         }
    //     }
    // }
    // #main{
    //     background-color: #f7f7f7;
    //     .main-wrap{
    //         width: 55rem;
    //         margin: 0 auto;
    //         margin-top: .5rem;
    //         overflow: hidden;
    //         display: flex;
    //         justify-content: space-between;
    //         box-sizing: border-box;
    //         .cate-list{
                
    //             .hot-item{
    //                 .game_tag{
    //                     margin-right: 0.5rem;
    //                     font-size: .6rem;
    //                 }
    //             }
    //         }
    //     }
    // }
   
}
// @media screen and (max-width: 1680px) {
//     #header{
//         font-size: 1rem;
//     }
    
// }
// @media screen and (max-width: 1440px) {
//     #header{
//         font-size: 1rem;
//     }
    
// }
@media screen and (min-width: 1100px) {
    #header{
        height: 3rem;
        .wrap{
            width: 55rem;
            .mini-menu{
                display: none!important;
            }
        }
    }
    #main{
        background-color: #f7f7f7;
        .main-wrap{
            width: 55rem;
            margin: 0 auto;
            margin-top: .5rem;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            .cate-list{
                
                .hot-item{
                    .game_tag{
                        margin-right: 0.5rem;
                        font-size: .6rem;
                    }
                }
            }
        }
    }
    
    
}
@media screen and (max-width: 1100px){
    #header{
        height: 3rem;
        .wrap{
            width: 39rem;
            .menu{
                padding: 0!important;
            }
            .mini-menu{
                display: none!important;
            }
            .el-dropdown-link{
                width: 5rem!important;
            }
        }
    }
    #main{
        background-color: #f7f7f7;
        .main-wrap{
            width: 39rem;
            margin: 0 auto;
            margin-top: .5rem;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            .left-list{
                width: 24rem!important;
                .hot-item{
                    height: 5rem!important;
                    .game-poster{
                        width: 9rem!important;
                    }
                    .detail{
                        margin-left: 1rem!important;
                        max-width: 100%;
                        width: 13rem!important;
                    }
                    .action{
                        height: 5rem!important;
                    }
                }
            }
            .right-action{
                width: 14rem!important;
                .action-item{
                    padding: .4rem!important;
                    .detail{
                        width: 8rem!important;
                        .desc{
                            max-width: 100%!important;
                        }
                    }
                }
            }
            .cate-list{
                .cate-tag{
                    .tags{
                        margin: .4rem!important;
                    }
                    .tag-kinds{
                        margin-top:.4rem!important ;
                    }
                }
                .hot-item{
                    .game_tag{
                        margin-right: 0.5rem;
                        font-size: .6rem;
                    }
                    .detail{
                        max-width: 100%;
                        width: ;
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:992px) {
    #header{
        height: 3rem;
        .wrap{
            width: 39rem;
            .mini-menu{
                display: none!important;
            }
        }
    }
    #main{
        background-color: #f7f7f7;
        .main-wrap{
            width: 39rem;
            margin: 0 auto;
            margin-top: .5rem;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            .cate-list{
                
                .hot-item{
                    .game_tag{
                        margin-right: 0.5rem;
                        font-size: .6rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:768px) {
    #header{
        height: 60px;
        background-color: #eaedfc;
        .wrap{
            padding:0 10px;
            width: 100%;
            .left-part{
                font-size: 22px;
            }
            .menu{
                display: none;
            }
            .search-wrap{
                // width: 170px!important;
                // :deep(.el-input__wrapper){
                //     border-radius: 20px;
                // }
                display: none;
            }
            .mini-menu{
                display: block!important;
                padding-right: 15px;
            }
            .user{
                display: none;
            }
            
        }
    }
    .header-hidden{
        height: 60px!important;
    }
    #main{
        .main-wrap{
            width: 100%;
            margin: 0;
            padding: 0;
            display: block;
            .left-list, .right-action{
                display: none;
            }
            .mob-page{
                display: block!important;
            }
            .cate-list{
                .cate-tag, .divide{
                    display: none;
                }
                .drop-tag{
                    display: block!important;
                }
                .hot-item{
                    height: 120px;
                    .game-logo{
                        display: none;
                    }
                    flex-direction: row-reverse;
                    justify-content: flex-end;
                    --van-button-small-padding:15px;
                    .game-poster{
                        width: 133px;
                        height: 75px;
                        border-radius: var(--logo-radius);
                        margin-right: 5px;
                    }
                    margin-bottom: 0;
                    .down-btn{
                        display: block!important;
                    }
                    .detail{
                        width: 150px;
                        
                    }
                    .game_tag{
                        margin-right: 2px;
                        font-size: 10px;
                    }
                }
            }
            .bg{
                display: none;
            }
            .mob-login{
                display: flex!important;
            }
            .rest-list{
                display: none;
            }
            .mob-list{
                display: block!important;
                min-height: calc(100vh - 60px)
            }
            .settings{
                display: none;
            }
            .mob-setting{
                display: block!important;
            }
            .mine{
                .pcbt, .game-poster{
                    display: none;
                }
                .right{
                    display: flex!important;
                }
            }
            .search_cont{
                .search_key{
                    display: block!important;
                }
                .pcbt, .game-poster{
                    display: none;
                }
                .right{
                    display: flex!important;
                }
                .hot-item{
                    height: 96px;
                    width: 100%;
                    box-sizing: border-box;
                    .game-logo{
                        margin-right: 10px;
                    }
                    .detail{
                        width: 170px;
                    }
                }
            }
            
        }
    }
}
@media screen and (max-width:350px) {
   
}