.play-wrap { width: 100%; height: 100%; position: relative } .play-wrap #game { position: absolute; overflow: hidden; width: 100%; height: 100vh; } @media screen and (orientation:portrait) { .play-wrap .game { height: 89% } .play-wrap .ads { position: fixed; width: 100%; bottom: 0; height: 11%; display: none; opacity: 0; } } .play-wrap #drag, #gameAd-icon, .play-wrap .drag-wrap { position: absolute; box-sizing: border-box } @media screen and (orientation:landscape) { .play-wrap .game { height: 100% } .play-wrap .ads, .play-wrap .bottom-play { display: none } } .play-wrap #drag { touch-action: none; height: 1.28rem; width: 1.28rem; z-index: 990; top: .3rem; left: .2rem; border-radius: .8rem; float: right } .play-wrap #drag img { width: 100%; height: 100%; border-radius: 50%; } #gameAd-icon { touch-action: none; height: 1.28rem; width: 1.28rem; z-index: 990; top: 5rem; right: .1rem; border-radius: .8rem; float: right } #gameAd-icon img { width: 100%; height: 100%; border-radius: 50%; } .play-wrap .drag-wrap { display: none; z-index: 979; width: 80%; left: 10%; top: 10%; padding-top: .186667rem; border-radius: .266667rem; height: 2.7rem; background: rgba(0, 0, 0, .7); transition: background 4s } .play-wrap .drag-wrap .con-top { width: 100%; height: 3.133333rem; box-sizing: border-box } .play-wrap .drag-wrap .con-top .top-menu { width: 33%; float: left; height: 100% } .play-wrap .drag-wrap .con-top .top-menu dt { height: 1.9rem; text-align: center; position: relative } .play-wrap .drag-wrap .con-top .top-menu dt .icon-btn { left: 50%; margin-left: -.64rem } .play-wrap .drag-wrap .con-top .top-menu dt .share-wrapper { position: absolute; width: 2.133333rem; background: rgba(0, 0, 0, .8); height: 0; top: .08rem; right: -2.92rem; border-radius: .053333rem; z-index: 998; box-sizing: border-box; transition: height .5s; overflow: hidden } .play-wrap .drag-wrap .con-top .top-menu dt .share-wrapper ul { padding: .266667rem 0; display: block; width: 100%; box-sizing: border-box } .play-wrap .drag-wrap .con-top .top-menu dt .share-wrapper ul li { width: 100%; margin: 0; padding: .266667rem 0 } .play-wrap .drag-wrap .con-top .top-menu dt .share-wrapper ul li img { width: .933333rem; height: .933333rem; display: block; margin: 0 auto } .play-wrap .drag-wrap .con-top .top-menu dt .share-wrapper ul li .icon-link { font-size: .8rem; float: left; width: 100%; height: 100%; line-height: .933333rem } .play-wrap .drag-wrap .con-top .top-menu dt .share-wrapper ul li button { display: block; border: none; outline: 0; height: .933333rem; width: .933333rem; margin: 0 auto; border-radius: 50% } .play-wrap .drag-wrap .con-top .top-menu dt .iconfont { display: inline-block; width: 2.28rem; height: 2rem; line-height: 2rem; color: #fff !important } .play-wrap .drag-wrap .con-top .top-menu dd { display: block; text-align: center; color: #fff } .play-wrap .drag-wrap1 .con-top .top-menu dt .share-wrapper { right: -.5rem } @media screen and (orientation:portrait) { .bottom-play { height: 11%; position: absolute; bottom: 0; left: 0; right: 0; background: #fff; z-index: 100000000; padding: .15rem .3rem; box-sizing: border-box } .bottom-play img { height: 100%; display: inline-block; } .bottom-play .play { color: #fff; width: 2.7027027027027026rem; height: 1.0810810810810811rem; margin-top: .2702702702702703rem; border-radius: .13513513513513514rem; text-align: center; float: right; margin-right: 1.0810810810810811rem; position: relative; vertical-align: middle; line-height: 1.0810810810810811rem; opacity: 0; transition: opacity 1.5s; z-index: 99999 } .bottom-play #progressbar { margin-left: 2rem; width: 5.027027027027028rem; height: .2702702702702703rem; border-radius: .14rem; margin-top: .6rem; position: absolute; left: 1.5108108108108109rem; border: 1px solid #333 } .bottom-play #progressbar #fill { height: 100%; border-radius: .14rem; animation: move 5s; text-align: center; background-color: #6caf00 } } @media screen and (orientation:landscape) { .bottom-play { display: none } } @keyframes move { 0% { width: 0 } 100% { width: 100% } }