.room-list{width:100vw;height:100vh}.room-list,.room-list .no-live{display:flex;flex-direction:column}.room-list .no-live{height:calc(100vh - 44px);color:#515151;justify-content:center;align-items:center}.room-list .no-live img{width:60px;margin-bottom:10px}.room-list .anchor-info{background-color:#e5466e;display:flex;align-items:center;padding:10px 10px}.room-list .anchor-info img{width:40px;height:40px;border-radius:50%}.room-list .anchor-info div{display:flex;flex-direction:column;color:#fff;margin-left:5px}.room-list .anchor-info div .trade-name{font-size:14px;margin-bottom:2px}.room-list .anchor-info div .watch-num{font-size:12px}.room-list .list-wrapper{height:calc(100vh - 44px);background:#f5f5f5;overflow:auto;-webkit-overflow-scrolling:touch}.room-list .list-wrapper .item{position:relative;margin:10px;height:240px;background-position:50%;background-repeat:no-repeat;background-size:cover;box-sizing:border-box}@media (max-width:360px){.room-list .list-wrapper .item{height:200px}}.room-list .list-wrapper .item .mask{position:absolute;width:100%;height:100%;background-image:linear-gradient(90deg,rgba(0,0,0,.6),transparent)}.room-list .list-wrapper .item .content{position:absolute;width:100%;height:100%;padding:10px;box-sizing:border-box}.room-list .list-wrapper .item .title{color:#fff;font-size:18px;margin-bottom:10px}.room-list .list-wrapper .item .state{display:flex;align-items:center;font-size:14px}.room-list .list-wrapper .item .state.ing .text{background:#19be6b}.room-list .list-wrapper .item .state.ready .text{background:#409eff}.room-list .list-wrapper .item .state.subscribe .text{background:#ed4014}.room-list .list-wrapper .item .state.over .text{background:#4a4c5b}.room-list .list-wrapper .item .state .text{color:#fff;display:flex;align-items:center;padding:2px 6px;border-radius:4px}.room-list .list-wrapper .item .state .text .circle{width:10px;height:10px;border-radius:50%;background-color:#fff;margin:4px}.room-list .list-wrapper .item .state .num{color:#fff;margin-left:5px}.room-list .list-wrapper .item .share{position:absolute;right:10px;top:10px;width:25px;height:25px}.room-list .list-wrapper .item .info{position:absolute;left:10px;bottom:10px}.room-list .list-wrapper .item .info .localtion{margin-top:10px;display:flex;align-items:center;color:#fff;font-size:14px}.room-list .list-wrapper .item .info .localtion .avtor{background-position:50%;background-repeat:no-repeat;background-size:cover;width:40px;height:40px;border-radius:50%}.room-list .list-wrapper .item .info .localtion p{font-size:14px;margin-left:5px}