.banner { height: 243rpx; width: 100%; background-color: #fff; overflow: hidden; } .banner image { width: 100%; display: block; } .boxTop { padding: 0 32rpx; position: relative; background-color: #fff; box-shadow: 0 5rpx 8rpx 0 rgba(0, 0, 0, 0.1); } .boxTop .boxTop_head { width: 186rpx; height: 186rpx; position: absolute; top: -82rpx; left: 50rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .boxTop .boxTop_head image,open-data { width: 172rpx; height: 172rpx; border-radius: 50%; overflow: hidden; } .boxTop .boxTop_info { width: 100%; min-height: 185rpx; padding: 0rpx 0 20rpx 235rpx; border-bottom: 2rpx solid #e7e7e7; } .boxTop .boxTop_info text { font-size: 36rpx; color: #888888; display: block; line-height: 40rpx; } .boxTop .boxTop_info .username { margin-bottom: 10rpx; margin-top: 10rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 32rpx; color: #333; line-height: 48rpx; } .boxTop .boxTop_info .sign { color: #666; font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .boxTop .boxTop_info .nickname { font-size: 36rpx; font-weight: 700; color: #333; display: flex; align-items: center; line-height: 50rpx; } .boxTop .boxTop_info .nickname text { color: #333; font-size: 36rpx; line-height: 50rpx; max-width: 350rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .boxTop .boxTop_info .nickname image { width: 36rpx; height: 36rpx; margin-left: 22rpx; } .boxTop .boxTop_users { padding-bottom: 27rpx; } .boxTop .boxTop_users .title { font-size: 28rpx; line-height: 40rpx; color: #333; padding: 25rpx 10rpx; font-weight: 700; display: flex; align-items: center; } .boxTop .boxTop_users .change { background: #ff6b3f; border-radius: 90px; height: 30rpx; font-size: 20rpx; display: flex; align-items: center; justify-content: center; color: #fff; margin-left: 10rpx; padding: 0 13rpx; font-weight: 400; } .boxTop .boxTop_users .list { overflow-x: auto; padding: 0 10rpx; white-space: nowrap; } .boxTop .boxTop_users .list image { width: 80rpx; height: 80rpx; display: inline-block; border-radius: 50%; overflow: hidden; margin-right: 28rpx; } .boxTop .boxTop_users .list image:last-child { margin-right: 0; } .wrap { position: relative; } /* 我的盒子 */ .mybox { } .mybox .title { padding-top: 34rpx; padding-bottom: 10rpx; display: flex; align-items: center; padding-left: 42rpx; padding-right: 54rpx; justify-content: space-between; } .mybox .title .left { font-size: 32rpx; font-weight: 700; color: #333333; line-height: 45rpx; } .goHome { position: fixed; width: 155rpx; height: 111rpx; right: 47rpx; top: 80vh; } .goHome image { height: 100%; width: 100%; } .gamecenter { height: 216rpx; display: flex; align-items: center; justify-content: center; } .gamecenter button { background: #557CFF; border-radius: 200px; width: 526rpx; height: 88rpx; font-size: 36rpx; display: flex; align-items: center; justify-content: center; color: #FFFFFF; } /* 分享 */ .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: #FFFFFF; height: 228rpx; display: flex; align-items: center; justify-content: space-between; } .shareMask .menu_item { flex: 1; height: 100%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-direction: column; } .shareMask .menu_item image { width: 100rpx; height: 100rpx; } .shareMask .menu_item text { color: #333333; font-size: 24rpx; font-weight: bold; margin-top: 12rpx; } .share_close { height: 40rpx; position: absolute; right: 27rpx; top: -61rpx; width: 40rpx; } /* 红包弹框 */ .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; width: 404rpx; height: 84rpx; font-size: 30rpx; color: #333333; font-weight: 700; letter-spacing: 1.07px; display: flex; align-items: center; justify-content: center; } .wrap_info { padding: 8rpx 0; } .player__avatar { border-radius: 50%; height: 40rpx; margin-right: 8rpx; vertical-align: middle; width: 40rpx; } .player__info { color: #8B8B8B; font-size: 26rpx; line-height: 40rpx; margin-left: 8rpx; } .back { position: fixed; top: auto; right: 30rpx; bottom: 54rpx; z-index: 99; } .back image { height: 80rpx; vertical-align: top; width: 80rpx; }