.index-index { position: relative; min-height: 100vh; max-width: 720px; margin: 0 auto; } .index-index .roof { position: relative; background: #fff; /*padding-bottom: 45px;*/ padding-bottom: 55px; } .index-index .index-head { position: fixed; z-index: 100; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top); } .index-index .index-head .background { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; transition: all .1s; border-bottom: 1px solid #ededed; } .index-index .index-head .container { position: relative; z-index: 2; /*height: 40px;*/ height: 50px; display: flex; align-items: center; } .index-index .index-head .container .menu-list { margin: auto 10px; padding: 7px 0; white-space: nowrap; overflow: hidden; /*overflow-x: scroll;*/ -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; text-align: justify; display: flex; align-items: center; /*width: 50%;*/ } .index-index .index-head .item { margin: 0 10px; font-size: 15px; transition: all .1s; position: relative; /*font-weight: bold;*/ } .index-index .index-head .item.active { font-weight: bold; /*font-size: 19px;*/ } .index-index .index-head .item:first-child { margin-left: 15px; } .index-index .index-head .item .index-nav-pic { /*height: 18px;*/ height: 30px; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; width: unset; max-width: none; } .index-index .index-head .item.active .index-nav-pic { /*height: 22px;*/ height: 30px; } .index-index .index-head .new-search { /*margin: 10px;*/ margin: 10px 0; position: relative; /*width: 30%;*/ width: 25%; /*padding-top: 5px;*/ flex: 1 1; width: 0; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; position: relative; } .index-index .index-head .new-search .input { display: flex; align-items: center; border-radius: 20px; padding: 8.5px 12.5px; font-size: .24rem; overflow: hidden; width: 100%; /*margin-left: 10px;*/ position: relative; z-index: 2; background: #f2f2f2; } .index-index .index-head .new-search .input .icon { width: 16px; } .index-index .index-head .new-search .input .input_text { background: none; border: none; margin-left: 10px; width: auto; } /**主体**/ .index-good .index-banners { overflow: hidden; position: relative; /*margin: 0 10px;*/ /*margin-top: .9rem;*/ } .index-good .index-banners .banner { width: 100%; height: 100%; display: block; position: relative; background: center no-repeat; background-size: 100% 100%; border-radius: 0px; overflow: hidden; /*border-radius: 8px;*/ /*padding-top: 75%;*/ padding-top: 100%; padding-top: 123%; object-fit: cover; } .index-good .index-banners .swiper-container { margin-top: calc(env(safe-area-inset-top) 45px); overflow: visible; margin-left: auto; margin-right: auto; background-size: 100%; z-index: 12; background-repeat: no-repeat; padding-top: 5px; } .index-good .index-banners .swiper-pagination-bullets { width: 30%; left: auto; right: 35%; z-index: 999; bottom: 0px; bottom: -5px; right: -5px; z-index: 999; bottom: 10px; } .index-good .index-banners .swiper-pagination-bullet { background-color: #fff; opacity: 1; border-radius: 2px; width: 4px; height: 4px; margin: 0 3px; } .index-good .index-banners .swiper-pagination-bullet-active { background-color: #ffc000; width: 13px; border-radius: 2px; } .index-good .index-banners .banner .game { position: absolute; z-index: 22; bottom: 0; left: 0; right: 0; background-image: linear-gradient(#f0ebeb1f, #030303c2, #000); display: flex; align-items: center; padding: 10px; } .index-good .index-banners .banner .game .text { color: #fff; } .index-good .index-banners .banner .game .text .name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .3rem; display: flex; align-items: center; } .index-good .index-banners .banner .game .text .name .name-new { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; margin-right: 0.1rem; } .index-good .index-banners .banner .game .text .name .nameremark-new { background: #999; color: #dedede; font-size: .22rem; padding: 0 0.1rem; background-color: rgba(153,153,153,0.3); } .index-good .index-banners .banner .game .text .info2 { display: flex; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-good .index-banners .banner .game .text .info2 .tag { margin-right: 5px; } .index-good .index-banners .banner .game .text .info2 .tag:nth-child(1) { color: #f5b380; padding-left: 0; background-color: rgba(153,153,153,0.3); padding: 0 0.1rem; } .index-good .index-banners .banner .game .text .info2 .tag:nth-child(2) { color: #acd498; background-color: rgba(153,153,153,0.3); padding: 0 0.1rem; } .index-good .index-banners .banner .game .text .info2 .tag:nth-child(3) { color: #89acda; background-color: rgba(153,153,153,0.3); padding: 0 0.1rem; } .index-good .index-banners .banner .game .zhe { position: absolute; right: 0; top: 0; padding: 2px 10px; background: red; color: #fff; border-top-left-radius: 30px; border-bottom-left-radius: 30px; } .index-good .index-menus { overflow: hidden; position: relative; z-index: 12; } .index-good .index-menus .container { margin: auto 10px; padding: 10px 0 10px 0; white-space: nowrap; overflow: hidden; overflow-x: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; text-align: justify; display: flex; } .index-good .index-menus .menu { width: 25%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .index-good .index-menus .menu a { width: 100%; } .index-good .index-menus .menu .icon { height: 60px; position: relative; } .index-good .index-menus .menu .icon img { display: block; height: 100%; margin: 0 auto; object-fit: cover; } .index-good .index-menus .menu .name { font-size: .24rem; overflow: hidden; white-space: nowrap; text-align: center; color: #282828; } .index-good .index-data { padding: 10px; overflow: hidden; background: #fff; /*margin: 0px 10px 15px;*/ margin: 0px 10px 0px; border-radius: 8px; } .index-good .index-data .data-head { display: flex; align-items: center; padding-top: 5px; } .index-good .index-data .data-head .text { font-size: 18px; font-weight: bold; color: #000; flex: 1 1; } .index-good .index-data .item .entity { display: flex; align-items: center; margin-top: 15px; } .index-good .index-data .hotgames .item .icon { flex-shrink: 0; margin-right: 0.2rem; width: 1.6rem; height: 1.6rem; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; position: relative; } .index-good .index-data .hotgames .item .icon img { display: block; max-width: 100%; max-height: 100%; } .index-good .hotgames .item .icon .iconlable { position: absolute; color: #fff; padding: 0 0.12rem; font-size: 12px; font-size: .22rem; background-image: linear-gradient(#009cff, #5537ff); border-bottom-right-radius: 8px; border-top-left-radius: 12px; bottom: 0; right: 0; font-weight: bold; } .index-good .index-data .hotgames .item .text { flex: 1 1; width: 0; font-size: .24rem; color: #999; line-height: 1.6; display: flex; flex-direction: column; position: relative; } .index-good .index-data .hotgames .item .name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .3rem; color: #282828; display: flex; align-items: center; } .index-good .index-data .hotgames .item .name .name-new { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; margin-right: 0.1rem; } .index-good .index-data .hotgames .item .name .nameremark-new { background: #f3f4f8; color: #999; font-size: .22rem; padding: 0 0.1rem; font-weight: normal; } .index-good .index-data .hotgames .item .info1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #999; } .index-good .index-data .hotgames .item .info2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .24rem; /*color: #666;*/ color: #fe8900; display: flex; } .index-good .index-data .hotgames .item .tag { display: inline-block; padding-left: 5px; } .index-good .index-data .hotgames .item .tag:nth-child(1) { color: #f5b380; padding-left: 0; } .index-good .index-data .hotgames .item .tag:nth-child(2) { color: #acd498; } .index-good .index-data .hotgames .item .tag:nth-child(3) { color: #89acda; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-good .index-data .hotgames .item .operate { display: block; background: #ffc000; border-radius: 4px; padding: 0.06rem 0.28rem; font-size: .26rem; color: #fff; } .index-good .index-data .hotgames .item .entity-img { margin-top: 0.2rem; } .index-good .index-data .hotgames .item .entity-img img { border-radius: 15px; } .index-good .data-head .more { color: #ccc; font-size: 12px; padding: 5px; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .index-good .index-data .strategy .item { display: flex; align-items: center; margin-top: 15px; } .index-good .index-data .strategy .item .time { display: block; background: #a7c539; border-radius: 4px; font-size: .26rem; color: #fff; padding: .01rem .1rem; flex-shrink: 0; margin-right: 0.2rem; width: 1.2rem; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; position: relative; } .index-good .index-data .strategy .item .text { flex: 1 1; width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .28rem; } .index-good .index-data.compilation .data-body { margin-top: 15px; } .index-good .index-data .compilation .item { /*padding: 10px;*/ padding: 0 5px 10px; float: left; width: 50%; overflow: hidden; text-align: center; flex-direction: column; align-items: center; align-content: center; justify-content: center; justify-items: center; } .index-good .index-data .compilation .item:nth-child(odd) { padding-left: 0; } .index-good .index-data .compilation .item:nth-child(even) { padding-right: 0; } .index-good .index-data.compilation .item:nth-child(1), .index-good .index-data.compilation .item:nth-child(2) { padding-top: 0; } .index-good .index-data .frilink .item { /*float: left;*/ color: #4a90e2; margin-right: .5em; line-height: 1.65; font-size: 13px; } .index-good .index-data.frilink .data-body { margin-top: 15px; } /**底部**/ .indexfooter { background-color: #353535; padding: 1em; } .globalwidth { max-width: 640px; margin-left: auto; margin-right: auto; } body .globalwidth { height: 100%; } .clearfix:before, .clearfix:after { content: ''; display: table; } .indexfooter .footimg { margin-bottom: .4rem; } .indexfooter a { color: #ffffff; } .indexfooter .footimg img { display: block; margin-left: auto; margin-right: auto; } .indexfooter .footinfo { color: #ffffff; font-size: 12px; text-align: center; } .indexfooter .footinfo p:first-child { margin-bottom: 0.5em; } .indexfooter .footitems { display: flex; align-items: center; justify-content: center; margin-bottom: .4rem; } .indexfooter .footitems .item { width: 16%; font-size: 13px; } /**排行榜start***/ .index-index .index-indexrank { position: relative; background: #f5f6f8; } .index-index .index-indexrank .indexrank-head { position: fixed; z-index: 100; top: calc(env(safe-area-inset-top) 50px); left: 0; right: 0; /*height: 50px;*/ height: 1rem; background-color: #fff; padding-top: .1rem; /* display: flex; align-items: center;*/ /*padding-left: 5px;*/ } .index-index .index-indexrank .indexrank-head .item { position: relative; margin: 0 10px; width: 25%; text-align: center; } .index .index-indexrank .indexrank-head .item .text { text-align: center; font-size: 15px; } .index .index-indexrank .indexrank-head .item.active .text { font-size: 18px; } .index-index .index-indexrank .indexrank-head .ul-tab { overflow: hidden; padding: 0 0.3rem; } .index-index .index-indexrank .indexrank-head .ul-tab li { float: left; width: 16%; } .index-index .index-indexrank .indexrank-head .ul-tab .con { /* position: relative; display: block; line-height: .94rem; font-size: .28rem; color: #282828; text-align: center; border: 1px solid #ededed; margin: .1rem; line-height: 2; border-radius: 5px;*/ position: relative; display: block; line-height: .94rem; font-size: .26rem; color: #999; text-align: center; border: 1px solid #ededed; margin: 0.1rem; /* line-height: 2.5; */ line-height: 2; border-radius: 5px; background: #f0f0f0; } .index-index .index-indexrank .indexrank-head .ul-tab li.on .con { color: #fff; background: #ffc000; border: 1px solid #ffc000; } .index-index .index-indexrank .indexrank-bady { /*margin-top: calc(env(safe-area-inset-top) 50px 50px);*/ margin-top: calc(env(safe-area-inset-top) 50px 1rem); position: relative; min-height: 100vh; padding-top: 0.3rem; } .index-index .index-indexrank .indexrank-bady .items { padding: 0 .3rem 0 .3rem; } .index-index .index-indexrank .game-list-item { margin-bottom: 0.3rem; display: flex; align-items: center; background: #fff; padding: 0.2rem; border-radius: 8px; position: relative } .index-index .index-indexrank .game-list-item .index { /* width: 25px; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; margin-right: 5px;*/ width: 25px; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; margin-right: 5px; position: absolute; top: 0; left: 0; } .index-index .index-indexrank .game-list-item .index .keys { position: absolute; color: #fff; left: 3px; font-size: 12px; top: 0; font-style: italic; display: flex; align-items: center; } .index-index .index-indexrank .game-list-item .index .keys.tks { left: 0; } .index-index .index-indexrank .game-list-item .icon { position: relative; overflow: hidden; border-radius: 8px; flex-shrink: 0; margin-right: 0.2rem; width: 1.4rem; height: 1.4rem; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; } .index-index .index-indexrank .game-list-item .icon .type_label { position: absolute; top: 0; right: 0; background-color: red; padding: 1px 5px; font-size: 10px; color: #fff; line-height: 1.15; border-bottom-left-radius: 8px; border-top-right-radius: 8px; } .index-index .index-indexrank .game-list-item .icon img { display: block; max-width: 100%; max-height: 100%; } .index-index .index-indexrank .game-list-item .icon .iconlable { position: absolute; color: #fff; padding: 0 0.12rem; font-size: 12px; font-size: .22rem; background-image: linear-gradient(#009cff, #5537ff); border-bottom-right-radius: 8px; border-top-left-radius: 12px; bottom: 0; right: 0; } .index-index .index-indexrank .game-list-item .subject { flex: 1 1; width: 0; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; position: relative; } .index-index .index-indexrank .game-list-item .text { flex: 1 1; width: 0; font-size: .2rem; color: #999; line-height: 1.6; display: flex; flex-direction: column; } .index-index .index-indexrank .game-list-item .name { font-weight: bold; overflow: hidden; font-size: .3rem; color: #282828; display: flex; align-items: center; } .index-index .index-indexrank .game-list-item .name .name-new { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; margin-right: 0.1rem; } .index-index .index-indexrank .game-list-item .name .nameremark-new { background: #f3f4f8; color: #999; font-size: .22rem; padding: 0 0.1rem; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-index .index-indexrank .game-list-item .info1 { color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-index .index-indexrank .game-list-item .info2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .22rem; color: #666; } .index-index .index-indexrank .game-list-item .tag { display: inline; padding-left: 5px; } .index-index .index-indexrank .game-list-item .tag:nth-child(1) { color: #f5b380; padding-left: 0; } .index-index .index-indexrank .game-list-item .tag:nth-child(2) { color: #acd498; } .index-index .index-indexrank .game-list-item .tag:nth-child(3) { color: #89acda; } .index-index .index-indexrank .game-list-item .operate { display: block; background: #ffc000; border-radius: 4px; padding: 0.06rem 0.28rem; font-size: .26rem; color: #fff; } /**新游**/ .index-index .index-newgame { position: relative; background: #f5f6f8; } .index-index .index-newgame .newgame-head { position: fixed; z-index: 100; top: calc(env(safe-area-inset-top) 50px); left: 0; right: 0; height: 50px; background-color: #fff; /* display: flex; align-items: center;*/ /*padding-left: 5px;*/ } .index-index .index-newgame .newgame-head .item { position: relative; margin: 0 10px; width: 25%; text-align: center; } .index .index-newgame .newgame-head .item .text { text-align: center; font-size: 15px; } .index .index-newgame .newgame-head .item.active .text { font-size: 18px; } .index-index .index-newgame .newgame-head .ul-tab { overflow: hidden; padding: 0 0.3rem; } .index-index .index-newgame .newgame-head .ul-tab li { float: left; width: 25%; } .index-index .index-newgame .newgame-head .ul-tab .con { position: relative; display: block; line-height: .94rem; font-size: .28rem; color: #282828; text-align: center; border: 1px solid #ededed; margin: .1rem; line-height: 2.5; border-radius: 5px; } .index-index .index-newgame .newgame-head .ul-tab li.on .con { color: #fff; background: #ffc000; border: 1px solid #ffc000; } .index-index .index-newgame .newgame-bady { margin-top: calc(env(safe-area-inset-top) 50px 50px); position: relative; min-height: 100vh; padding-top: 0.3rem; } .index-index .index-newgame .newgame-bady .items { padding: 0 .3rem 0 .3rem; } .index-index .index-newgame .game-list-item { margin-bottom: 0.3rem; display: flex; align-items: center; background: #fff; padding: 0.2rem; border-radius: 8px; } .index-index .index-newgame .game-list-item .index { width: 25px; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; margin-right: 5px; } .index-index .index-newgame .game-list-item .icon { position: relative; overflow: hidden; border-radius: 8px; flex-shrink: 0; margin-right: 0.2rem; width: 1.4rem; height: 1.4rem; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; } .index-index .index-newgame .game-list-item .icon img { display: block; max-width: 100%; max-height: 100%; } .index-index .index-newgame .game-list-item .icon .iconlable { position: absolute; color: #fff; padding: 0 0.12rem; font-size: 12px; font-size: .22rem; background-image: linear-gradient(#009cff, #5537ff); border-bottom-right-radius: 8px; border-top-left-radius: 12px; bottom: 0; right: 0; } .index-index .index-newgame .game-list-item .subject { flex: 1 1; width: 0; display: flex; align-content: center; align-items: center; justify-content: center; justify-items: center; position: relative; } .index-index .index-newgame .game-list-item .text { flex: 1 1; width: 0; font-size: .2rem; color: #999; line-height: 1.6; display: flex; flex-direction: column; } .index-index .index-newgame .game-list-item .name { font-weight: bold; overflow: hidden; font-size: .3rem; color: #282828; display: flex; align-items: center; } .index-index .index-newgame .game-list-item .name .name-new { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; margin-right: 0.1rem; } .index-index .index-newgame .game-list-item .name .nameremark-new { background: #f3f4f8; color: #999; font-size: .22rem; padding: 0 0.1rem; font-weight: normal; } .index-index .index-newgame .game-list-item .info1 { color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index-index .index-newgame .game-list-item .info2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .22rem; color: #666; } .index-index .index-newgame .game-list-item .tag { display: inline; padding-left: 5px; } .index-index .index-newgame .game-list-item .tag:nth-child(1) { color: #f5b380; padding-left: 0; } .index-index .index-newgame .game-list-item .tag:nth-child(2) { color: #acd498; } .index-index .index-newgame .game-list-item .tag:nth-child(3) { color: #89acda; } .index-index .index-newgame .game-list-item .operate { display: block; background: #ffc000; border-radius: 4px; padding: 0.06rem 0.28rem; font-size: .26rem; color: #fff; }