.main { padding-bottom: 20rpx; } .auth_enter { position: fixed; } .storeUp { position: fixed; top: 178rpx; left: 24rpx; transition: left 0.4s; z-index: 99; } .slide-left { left: -50rpx; transition: left 0.2s; } .storeUp image { width: 88rpx; height: 92rpx; } /* 收藏弹框 */ .storeUpMask { width: 100vw; position: fixed; top: 0; z-index: 100; height: 100vh; background-color: rgba(0, 0, 0, 0.6); } .storeUpMask image { width:550rpx; height:386rpx; position:absolute; top:16rpx; right:114rpx; } .storeUpMask .text { width:532rpx; height:254rpx; position:absolute; right:125rpx; top:135rpx; } .storeUpMask .text .title { font-size: 28rpx; color: #333; width: 100%; line-height: 40rpx; padding-top: 15rpx; padding-bottom: 33rpx; text-align: center; } .storeUpMask .text .step { color: #333; font-size: 28rpx; line-height: 40rpx; display: flex; align-items: center; padding-left: 41rpx; margin-bottom: 12rpx; } .storeUpMask .text .step::before { content: ''; width: 12rpx; height: 12rpx; display: inline-block; border-radius: 50%; background: #fd0808; margin-right: 12rpx; } .storeUpMask .text .step text { color: #fd0808; } /* 红包弹框 */ .redPackMask { width: 100vw; position: fixed; top: 0; z-index: 100; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.6); } .redPackMask .content { width: 521rpx; height: 694rpx; opacity: 0; transition: all 300ms; transform: scale(0.6); } .redPackMask .packAnimation { opacity: 1; height: 634rpx; transform: scale(1); } .redPackMask .bg { width: 100%; height: 100%; } .redPackMask .info { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .info2 { display: flex; flex-direction: column; align-items: center; } .info2 text { color: #EBCD9A; } .info2_avatar { width: 98rpx; height: 98rpx; border-radius: 16rpx; margin-top: 38rpx; margin-bottom: 18rpx; } .info2_title { font-size: 36rpx; line-height: 50rpx; margin-bottom: 27rpx; } .info2_des { font-size: 26rpx; line-height: 37rpx; margin-bottom: 17rpx; } .info2_text { line-height: 62rpx; font-size: 44rpx; margin-bottom: 36rpx; } .info2_open { width: 166rpx; height: 166rpx; border-radius: 50%; overflow: hidden; } .info2_open image { width: 100%; height: 100%; } .info1 { padding-top: 248rpx; display: flex; flex-direction: column; align-items: center; } .info1 text { color: #EBCD9A; } .info1_top { line-height: 67rpx; font-size: 48rpx; } .info1_des { color: #EBCD9A; margin-top: 20rpx; margin-bottom: 77rpx; line-height: 45rpx; font-size: 32rpx; } .info1_des text { font-size: 40rpx; } .info1_tips { line-height: 30rpx; font-size: 22rpx; } .info1_save { background: #EBCD9A; border-radius: 8rpx; position: absolute; bottom: 42rpx; left: calc(50% - 202rpx); width: 404rpx; height: 84rpx; font-size: 30rpx; color: #333333; font-weight: 700; letter-spacing: 1.07px; display: flex; align-items: center; justify-content: center; } /* 分享 */ .shareMask { width: 100vw; position: fixed; top: 0; z-index: 100; height: 100vh; background-color: rgba(0, 0, 0, 0.6); } .shareMask .menu { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; height: 228rpx; display: flex; align-items: center; justify-content: space-between; } .shareMask .menu_item { flex: 1; height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; } .shareMask .menu_item image { width: 100rpx; height: 100rpx; } .shareMask .menu_item text { color: #333; font-size: 24rpx; font-weight: bold; margin-top: 12rpx; } /* 分享朋友圈 */ .shareCircles { width: 100vw; position: fixed; top: 0; z-index: 100; height: 100%; } .shareCircles .task { background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .shareCircles .content { width: 466rpx; display: flex; align-items: center; flex-direction: column; height: 1005rpx; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999; } .shareCircles .main_img { width: 466rpx; height: 828rpx; } .shareCircles .main_img image { width: 100%; height: 100%; } .shareCircles .prompt { font-size: 28rpx; line-height: 40rpx; color: #fff; margin-top: 17rpx; margin-bottom: 32rpx; white-space: nowrap; } .shareCircles .btn { width: 395rpx; height: 88rpx; border-radius: 100px; font-size: 36rpx; color: #fff; display: flex; align-items: center; justify-content: center; background: #557cff; } .share_close { height: 40rpx; position: absolute; right: 27rpx; top: -61rpx; width: 40rpx; } .listtitle { height: 86rpx; padding: 0 28rpx; display: flex; align-items: center; } .listtitle .icon { width: 46rpx; height: 46rpx; margin-right: 13rpx; } .listtitle .name { font-size: 32rpx; font-weight: 700; color: #333; line-height: 32rpx; } .listtitle .more { font-size: 24rpx; color: #666; margin-left: auto; } swiper { height: 272rpx; } .banner { width: 100%; margin-bottom: -10rpx; padding: 22rpx 0 10rpx 0; } .banner_item { margin: 0 auto; width: 702rpx; height: 260rpx; overflow: hidden; border-radius: 15rpx; box-shadow: 0 3rpx 20rpx 0 rgba(0, 0, 0, 0.50); } .banner_item navigator { width: 100%; height: 100%; } .banner_item image { height: 100%; width: 100%; display: block; } /* 广告 */ .advertising { padding-top: 20rpx; } .advertising image { margin: 0 auto; display: block; width: 702rpx; height: 260rpx; overflow: hidden; border-radius: 15rpx; box-shadow: 0 3rpx 20rpx 0 rgba(0, 0, 0, 0.50); } /* 游戏列表2 */ .gameCard { border-bottom: 1px solid #e8e8e8; overflow: hidden; padding: 0 26rpx; } .gameCard .gameCard_item { width: 50%; height: 190rpx; float: left; margin-bottom: 20rpx; text-align: left; } .gameCard .gameCard_item:nth-child(even) { text-align: right; } .gameCard .gameCard_item image { border-radius: 24rpx; width: 336rpx; height: 100%; } /* 游戏列表4 */ .gameWrap { padding: 0 14rpx; border-bottom: 1px solid #e8e8e8; overflow: hidden; } .gameWrap .gameWrap_item { float: left; margin-bottom: 20rpx; width: 25%; } .gameWrap navigator, .gameWrap .entrance { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .gameWrap_item .name { font-size: 26rpx; color: #333; text-align: center; line-height: 37rpx; width: 152rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 15rpx; margin-bottom: 7rpx; font-weight: 700; } .gameWrap_item .icon { width: 152rpx; height: 152rpx; border-radius: 24rpx; position: relative; } .gameWrap_item .icon image { width: 100%; height: 100%; border-radius: 24rpx; } .gameWrap_item .icon text { position: absolute; right: -5rpx; bottom: 0; padding: 0 12rpx; height: 36rpx; background: #ff1a19; border-radius: 18rpx 18rpx 18rpx 0; font-size: 18rpx; font-weight: 400; color: #fff; display: flex; align-items: center; justify-content: center; } .gameWrap_item .num { font-size: 22rpx; color: #999; text-align: center; width: 152rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share { position: fixed; top: auto; right: 30rpx; bottom: 54rpx; z-index: 99; } .share button { background-color: transparent; height: 80rpx; width: 80rpx; padding-left: 0; display: flex; align-items: center; } .share button image { width: 80rpx; height: 80rpx; }