Files
peko-h5/view/peko/activity/act-ocean/css/index.css
2022-12-15 14:39:03 +08:00

1042 lines
26 KiB
CSS

@font-face {
font-family: "pingfang-bold";
src: url("../../../common/fonts/PingFang Bold.ttf");
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
}
@font-face {
font-family: "din-medium";
src: url("../../../common/fonts/DINCond-Medium.ttf");
src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
}
html,
body {
font-family: "din-medium";
background: #C8864C;
overflow-x: hidden;
}
.wrap {
width: 100%;
height: 100vh;
position: relative;
}
.wrap .banner {
width: 100%;
}
.wrap .rule,
.wrap .record {
position: fixed;
top: 2.1333333333rem;
left: 0;
z-index: 99;
width: 1.5733333333rem;
height: 0.5333333333rem;
}
.wrap .rule img,
.wrap .record img {
width: 100%;
}
.wrap .record {
top: 2.8533333333rem;
}
.wrap .previous-result {
position: absolute;
top: 14.9333333333rem;
left: 50%;
transform: translateX(-50%);
width: 9.4666666667rem;
height: 0.9066666667rem;
font-family: "pingfang-bold";
font-size: 0.4rem;
font-weight: bold;
color: white;
display: flex;
align-items: center;
background: url("../images/previous-result-bg.png") no-repeat 0 0/100% 100%;
z-index: 9;
}
.wrap .previous-result span {
font-weight: bold;
margin-left: 0.36rem;
text-shadow: 1px 1px 0px #fc8321, -1px -1px 0px #fc8321, 1px 1px 0px #fc8321, -1px -1px 0px #fc8321, 1px 1px 0px #fc8321, -1px -1px 0px #fc8321;
}
.wrap .previous-result .result-list {
display: flex;
}
.wrap .previous-result .result-list p {
width: 0.5333333333rem;
height: 0.5333333333rem;
margin-left: 0.1066666667rem;
background: url("../images/little-bubble.png") 0 0/100% 100%;
}
.wrap .previous-result .result-list p img {
width: 100%;
}
.wrap .previous-result .more-result {
width: 0.56rem;
height: 0.5866666667rem;
margin-left: 0.2rem;
}
.wrap .previous-result .more-result img {
width: 100%;
}
.wrap .mall {
position: absolute;
top: 2.4533333333rem;
right: 0;
z-index: 99;
width: 1.8933333333rem;
height: 1.7866666667rem;
}
.wrap .mall img {
width: 100%;
}
.wrap .game-area {
position: absolute;
top: 3.6533333333rem;
z-index: 9;
width: 100%;
height: 14.0533333333rem;
background: url("../images/game-area.png") no-repeat 0 0/100% 100%;
}
.wrap .game-area .select-time {
display: none;
}
.wrap .game-area .select-time .count-down,
.wrap .game-area .select-time .current-tip {
font-family: "pingfang-bold";
position: absolute;
top: -0.5333333333rem;
left: 50%;
transform: translateX(-50%);
width: 4.2933333333rem;
height: 0.96rem;
line-height: 0.8266666667rem;
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
text-align: center;
font-size: 0.32rem;
font-weight: bold;
color: #B82F1A;
}
.wrap .game-area .select-time .current-tip {
top: 0.6666666667rem;
width: 4.9066666667rem;
height: 0.9066666667rem;
line-height: 0.9066666667rem;
background: url("../images/tip.png") no-repeat 0 0/100% 100%;
font-size: 0.2933333333rem;
color: #F0C799;
}
.wrap .game-area .select-time ul {
display: flex;
flex-wrap: wrap;
padding-left: 0.6266666667rem;
}
.wrap .game-area .select-time ul li {
position: relative;
z-index: 99;
width: 1.84rem;
height: 1.9733333333rem;
margin-top: 1.7333333333rem;
margin-right: 0.4266666667rem;
background: url("../images/bubble-bg.png") no-repeat 0 0/100% 100%;
}
.wrap .game-area .select-time ul li:nth-child(-n+4) {
margin-top: 1.0666666667rem;
}
.wrap .game-area .select-time ul li img {
width: 1.6rem;
height: 1.6rem;
transform: translate(0.1066666667rem, -0.3466666667rem);
}
.wrap .game-area .select-time ul li .multiple {
position: absolute;
bottom: 0.2666666667rem;
left: -0.1333333333rem;
width: 0.8533333333rem;
height: 0.3733333333rem;
line-height: 0.3733333333rem;
text-align: center;
background: url("../images/multiple-bg.png") no-repeat 0 0/100% 100%;
font-size: 0.2666666667rem;
font-weight: bold;
color: white;
}
.wrap .game-area .select-time ul li .name {
position: absolute;
bottom: -0.5333333333rem;
left: 50%;
transform: translateX(-50%);
min-width: 2.1333333333rem;
padding: 0.1066666667rem;
box-sizing: border-box;
width: 1.8133333333rem;
height: 0.7733333333rem;
background: url("../images/name-bg.png") no-repeat 0 0/100% 100%;
text-align: center;
font-size: 0.2666666667rem;
font-weight: bold;
color: white;
}
.wrap .game-area .select-time ul li .name.general {
height: 0.6133333333rem;
line-height: 0.4rem;
background: url("../images/name-general-bg.png") no-repeat 0 0/100% 100%;
}
.wrap .game-area .select-time ul li .name .gift-price {
font-size: 0.24rem;
padding-top: 0.0533333333rem;
}
.wrap .game-area .select-time ul li .bubble-2s {
display: none;
width: 1.76rem;
height: 0.9866666667rem;
position: absolute;
top: -0.96rem;
left: -0.3733333333rem;
background: url("../images/qipao-2s.png") no-repeat 0 0/100% 100%;
transform: rotate(343deg);
text-indent: 0.2133333333rem;
}
.wrap .game-area .select-time ul li .bubble-2s p {
font-size: 0.24rem;
color: white;
font-weight: bold;
text-align: center;
margin-left: -0.2666666667rem;
}
.wrap .game-area .select-time ul li .bubble-2s p.first-line {
padding-top: 0.1333333333rem;
}
.wrap .game-area .select-time ul li .bubble-2s p.second-line {
padding-top: 0.0533333333rem;
}
.wrap .game-area .select-time ul li .select-num {
position: absolute;
top: -0.08rem;
right: -0.0533333333rem;
font-size: 0.32rem;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 0px #ff622b, -1px -1px 0px #ff622b, 1px 1px 0px #ff622b, -1px -1px 0px #ff622b, 1px 1px 0px #ff622b, -1px -1px 0px #ff622b;
}
.wrap .game-area .select-time .btn-wrap {
display: flex;
align-items: center;
width: 9.4666666667rem;
height: 1.68rem;
margin: 1.8666666667rem auto 0;
background: url("../images/btn-wrap-bg.png") no-repeat 0 0/100% 100%;
}
.wrap .game-area .select-time .btn-wrap div {
display: flex;
justify-content: center;
width: 2.5333333333rem;
height: 1.0666666667rem;
background: url("../images/fragment-btn.png") no-repeat 0 0/100% 100%;
line-height: 1.0666666667rem;
font-size: 0.4rem;
color: #975B25;
}
.wrap .game-area .select-time .btn-wrap div.active {
background-image: url("../images/fragment-btn-active.png");
color: #B33E17;
}
.wrap .game-area .select-time .btn-wrap div:first-child {
margin-left: 0.8rem;
}
.wrap .game-area .select-time .btn-wrap div:last-child {
margin-left: 0;
}
.wrap .game-area .select-time .btn-wrap div:nth-child(2) {
margin: 0 0.16rem;
}
.wrap .game-area .select-time .shelf {
width: 9.4666666667rem;
height: 1.3333333333rem;
position: absolute;
top: 5.8666666667rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .select-time .shelf:last-child {
top: 9.6rem;
}
.wrap .game-area .wait-time {
display: none;
width: 10rem;
height: 8rem;
margin: auto;
position: relative;
}
.wrap .game-area .wait-time .count-down,
.wrap .game-area .wait-time .current-tip {
font-family: "pingfang-bold";
position: absolute;
top: -0.5333333333rem;
left: 50%;
transform: translateX(-50%);
width: 4.2933333333rem;
height: 0.96rem;
line-height: 0.8266666667rem;
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
text-align: center;
color: #B82F1A;
font-size: 0.32rem;
font-weight: bold;
}
.wrap .game-area .wait-time .current-tip {
top: 0.6666666667rem;
width: 4.9066666667rem;
height: 0.9066666667rem;
line-height: 0.9066666667rem;
background: url("../images/tip.png") no-repeat 0 0/100% 100%;
text-align: center;
font-size: 0.2933333333rem;
color: #FFF0C799;
font-weight: bold;
}
.wrap .game-area .draw-time {
display: none;
width: 2.8rem;
height: 2.84rem;
margin: 1.2rem auto 0.2rem;
background: url(../images/drawBg.png);
background-size: 100% 100%;
}
.wrap .game-area .draw-time .count-down,
.wrap .game-area .draw-time .current-tip {
font-family: "pingfang-bold";
position: absolute;
top: -0.5333333333rem;
left: 50%;
transform: translateX(-50%);
width: 4.2933333333rem;
height: 0.96rem;
line-height: 0.8266666667rem;
background: url("../images/count-down.png") no-repeat 0 0/100% 100%;
text-align: center;
font-size: 0.32rem;
color: #B82F1A;
font-weight: bold;
}
.wrap .game-area .draw-time .current-tip {
top: 0.6666666667rem;
width: 4.9066666667rem;
height: 0.9066666667rem;
line-height: 0.9066666667rem;
background: url("../images/tip.png") no-repeat 0 0/100% 100%;
font-size: 0.2933333333rem;
color: #F0C799;
}
.wrap .game-area .draw-time .top-three {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 3.1rem;
width: 100%;
height: 4rem;
}
.wrap .game-area .draw-time .top-three .top-three-title {
display: flex;
justify-content: center;
align-items: center;
font-family: "pingfang-bold";
font-size: 0.32rem;
font-weight: bold;
color: white;
margin-bottom: 0.24rem;
}
.wrap .game-area .draw-time .top-three .top-three-title .line {
width: 0.6666666667rem;
border: 0.0133333333rem solid white;
}
.wrap .game-area .draw-time .top-three .top-three-list {
position: relative;
}
.wrap .game-area .draw-time .top-three .top-three-list .no1 {
width: 2.5066666667rem;
height: 2.24rem;
background: linear-gradient(0deg, #FFD871 0%, #FFA352 81%);
border-radius: 0.24rem;
position: relative;
top: 1.3rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no1 .tx {
width: 1.7333333333rem;
height: 1.7333333333rem;
border-radius: 50%;
position: absolute;
top: -0.9rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no1 .txBox {
width: 1.7466666667rem;
height: 2.2666666667rem;
position: absolute;
top: -1.41rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no1 .nick {
width: 100%;
font-size: 0.2933333333rem;
color: #fff;
text-align: center;
position: absolute;
top: 1.1733333333rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no1 .num {
width: 100%;
height: 0.3333333333rem;
position: absolute;
bottom: 0.2rem;
display: flex;
justify-content: center;
}
.wrap .game-area .draw-time .top-three .top-three-list .no1 .num .diamond {
width: 0.3333333333rem;
height: 0.3333333333rem;
}
.wrap .game-area .draw-time .top-three .top-three-list .no1 .num span {
font-size: 0.2933333333rem;
color: #fff;
}
.wrap .game-area .draw-time .top-three .top-three-list .no2 {
width: 2.16rem;
height: 1.8933333333rem;
background: linear-gradient(0deg, #7DD5FF 0%, #5A8FFF 100%);
border-radius: 0.24rem;
position: relative;
top: -0.55rem;
left: 1.15rem;
}
.wrap .game-area .draw-time .top-three .top-three-list .no2 .tx {
width: 1.7333333333rem;
height: 1.7333333333rem;
border-radius: 50%;
position: absolute;
top: -0.9rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no2 .txBox {
width: 1.7466666667rem;
height: 2.2666666667rem;
position: absolute;
top: -1.4rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no2 .nick {
width: 100%;
font-size: 0.2933333333rem;
color: #fff;
text-align: center;
position: absolute;
top: 1.0133333333rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no2 .num {
width: 100%;
height: 0.3333333333rem;
position: absolute;
bottom: 0.14rem;
display: flex;
justify-content: center;
}
.wrap .game-area .draw-time .top-three .top-three-list .no2 .num .diamond {
width: 0.3333333333rem;
height: 0.3333333333rem;
}
.wrap .game-area .draw-time .top-three .top-three-list .no2 .num span {
font-size: 0.2933333333rem;
color: #fff;
}
.wrap .game-area .draw-time .top-three .top-three-list .no3 {
width: 2.16rem;
height: 1.8933333333rem;
background: linear-gradient(0deg, #FFAE88 0%, #FC6CCF 81%);
border-radius: 0.24rem;
position: relative;
position: relative;
top: -2.45rem;
left: 6.7rem;
}
.wrap .game-area .draw-time .top-three .top-three-list .no3 .tx {
width: 1.7333333333rem;
height: 1.7333333333rem;
border-radius: 50%;
position: absolute;
top: -0.9rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no3 .txBox {
width: 1.7466666667rem;
height: 2.2666666667rem;
position: absolute;
top: -1.44rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no3 .nick {
width: 100%;
font-size: 0.2933333333rem;
color: #fff;
text-align: center;
position: absolute;
top: 1.0133333333rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .game-area .draw-time .top-three .top-three-list .no3 .num {
width: 100%;
height: 0.3333333333rem;
position: absolute;
bottom: 0.14rem;
display: flex;
justify-content: center;
}
.wrap .game-area .draw-time .top-three .top-three-list .no3 .num .diamond {
width: 0.3333333333rem;
height: 0.3333333333rem;
}
.wrap .game-area .draw-time .top-three .top-three-list .no3 .num span {
font-size: 0.2933333333rem;
color: #fff;
}
.wrap .game-area .draw-time .draw-pic {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.65rem;
z-index: 1;
width: 1.3333333333rem;
}
.wrap .game-area .draw-time .draw-pic img {
width: 100%;
}
.wrap .game-area .draw-time .award-info {
width: 8rem;
box-sizing: border-box;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.5rem;
display: flex;
}
.wrap .game-area .draw-time .award-info .desc {
color: #fff;
font-size: 0.3733333333rem;
font-weight: 600;
}
.wrap .game-area .draw-time .award-info .diamond {
width: 0.35rem;
height: 0.35rem;
margin-left: 0.5rem;
margin-right: 0.1rem;
}
.wrap .game-area .draw-time .award-info .award-wrap {
color: #FEEF60;
font-weight: 600;
font-size: 0.3733333333rem;
}
.wrap .game-area .draw-time .put-wrap {
width: 8rem;
height: 2.44rem;
box-sizing: border-box;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 3.8rem;
display: flex;
}
.wrap .game-area .draw-time .put-wrap .put {
font-size: 0.3733333333rem;
color: #FFFFFF;
font-weight: 600;
margin-right: 0.4rem;
margin-top: 0.3rem;
}
.wrap .game-area .draw-time .put-wrap .list {
width: 6.72rem;
height: 2.7733333333rem;
display: flex;
flex-wrap: wrap;
}
.wrap .game-area .draw-time .put-wrap .list .item {
width: 0.9866666667rem;
height: 1.2rem;
margin-right: 0.92rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.wrap .game-area .draw-time .put-wrap .list .item:nth-child(4n) {
margin-right: 0;
}
.wrap .game-area .draw-time .put-wrap .list .item p {
width: 0.8266666667rem;
height: 0.8266666667rem;
background: url(../images/record_bubble.png) no-repeat;
background-size: 100% 100%;
}
.wrap .game-area .draw-time .put-wrap .list .item p .gift {
width: 75%;
margin-top: 0.1rem;
margin-left: 0.1rem;
}
.wrap .game-area .draw-time .put-wrap .list .item div {
width: 100%;
height: 0.3333333333rem;
display: flex;
align-items: center;
justify-content: center;
}
.wrap .game-area .draw-time .put-wrap .list .item div .diamond {
width: 0.33rem;
height: 0.33rem;
}
.wrap .game-area .draw-time .put-wrap .list .item div .in {
font-size: 0.2666666667rem;
color: #FFFFFF;
font-weight: 600;
white-space: nowrap;
}
.wrap .info-bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
width: 100%;
height: 1.7333333333rem;
background: url("../images/index-bottom.png") no-repeat 0 0/100% 100%;
display: flex;
align-items: center;
}
.wrap .info-bottom .info-wrap {
margin-top: 0.1866666667rem;
}
.wrap .info-bottom .info-wrap .diamond-num,
.wrap .info-bottom .info-wrap .fragment-num {
width: 4rem;
height: 0.56rem;
background-color: #BD7F38;
border-radius: 0.2666666667rem;
line-height: 0.56rem;
font-size: 0.3466666667rem;
font-weight: bold;
color: white;
text-indent: 0.1333333333rem;
margin-bottom: 0.1333333333rem;
white-space: nowrap;
}
.wrap .info-bottom .avatar {
width: 1.3333333333rem;
height: 1.3333333333rem;
margin-left: 0.56rem;
margin-right: 0.2666666667rem;
}
.wrap .info-bottom .avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.wrap .info-bottom .add {
width: 0.5466666667rem;
height: 0.5466666667rem;
margin-top: -0.64rem;
margin-left: 0.16rem;
}
.wrap .info-bottom .rank {
width: 2.2666666667rem;
height: 0.72rem;
margin-left: 0.5866666667rem;
}
.wrap .shade-mask {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
}
.wrap .shade-mask .shade-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7.68rem;
height: 8.88rem;
background: url("../images/rule-bg.png") no-repeat 0 0/100% 100%;
font-size: 0.3466666667rem;
color: #B58147;
font-weight: 600;
overflow: hidden;
}
.wrap .shade-mask .shade-content main {
position: absolute;
top: 0.8rem;
width: 100%;
height: 85%;
padding: 0 0.56rem;
box-sizing: border-box;
overflow: auto;
}
.wrap .shade-mask .shade-content main div {
line-height: 1.2;
}
.wrap .shade-mask .shade-content main div .title {
width: 3.36rem;
height: 0.6133333333rem;
line-height: 0.6133333333rem;
background: url("../images/title-bg.png") no-repeat 0 0/100% 100%;
margin: 0 auto 0.2933333333rem;
text-align: center;
}
.wrap .shade-mask .shade-content main div .jietu {
width: 6.5333333333rem;
height: 3.6666666667rem;
margin-top: 0.16rem;
margin-bottom: 0.4266666667rem;
}
.wrap .shade-mask .shade-content main div .jietu.t2 {
height: 3.9866666667rem;
}
.wrap .shade-mask .shade-content main div .jietu.t3 {
height: 4.0133333333rem;
}
.wrap .shade-mask-rank {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
.wrap .shade-mask-rank .shade-content-rank {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8.8rem;
height: 13.0666666667rem;
background: white;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top {
height: 4.5333333333rem;
background-image: linear-gradient(#F49C35, #FFDD81);
overflow: hidden;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap {
font-family: "pingfang-regular";
width: 6.1333333333rem;
height: 0.9333333333rem;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0.48rem;
margin: 0.2666666667rem auto 0.08rem;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap span {
display: inline-block;
width: 2.8rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
font-size: 0.4rem;
color: white;
margin-top: 0.0666666667rem;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap span:first-child {
margin-left: 0.1866666667rem;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .tab-wrap .active {
background-color: white;
color: #F5A03A;
border-radius: 0.4rem;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap {
position: relative;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap:first-child {
width: 1.76rem;
left: 50%;
transform: translateX(-50%);
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap:first-child .diamond-num {
display: none;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar {
width: 1.76rem;
height: 2.3333333333rem;
margin-bottom: 0.2666666667rem;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar p {
position: relative;
z-index: 99;
width: 100%;
height: 100%;
background: url("../images/first.png") no-repeat 0 0/100% 100%;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .avatar img {
position: relative;
z-index: 9;
top: -1.8133333333rem;
left: 0.0266666667rem;
width: 1.7066666667rem;
height: 1.7066666667rem;
border-radius: 50%;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .nick,
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .diamond-num {
width: 4.8rem;
text-align: center;
font-size: 0.4rem;
font-weight: bold;
color: white;
}
.wrap .shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap .diamond-num {
font-family: "din-medium";
margin: 0;
margin-top: -0.2666666667rem;
margin-bottom: 0.0533333333rem;
color: #ED7B50;
font-size: 0.32rem;
}
.wrap .shade-mask-rank .shade-content-rank .other-rank {
overflow: auto;
position: absolute;
width: 100%;
height: 7.2rem;
background-color: white;
padding: 0.4rem 0.2666666667rem 0;
box-sizing: border-box;
}
.wrap .shade-mask-rank .shade-content-rank .other-rank li {
display: flex;
align-items: center;
margin-bottom: 0.5333333333rem;
}
.wrap .shade-mask-rank .shade-content-rank .other-rank li .index {
display: inline-block;
width: 0.4rem;
font-size: 0.4rem;
font-weight: bold;
color: #333333;
text-align: center;
}
.wrap .shade-mask-rank .shade-content-rank .other-rank li .others-info {
flex: 1;
display: flex;
align-items: center;
margin-left: 0.2666666667rem;
}
.wrap .shade-mask-rank .shade-content-rank .other-rank li .others-info img {
width: 1.3333333333rem;
height: 1.3333333333rem;
border-radius: 50%;
margin-right: 0.2666666667rem;
}
.wrap .shade-mask-rank .shade-content-rank .other-rank li .others-info .others-nick {
font-size: 0.3733333333rem;
font-weight: bold;
color: #333333;
}
.wrap .shade-mask-rank .shade-content-rank .other-rank li .others-diamond-num {
font-size: 0.3466666667rem;
font-weight: bold;
color: #ED7B50;
}
.wrap .shade-mask-rank .shade-content-rank .mine {
position: fixed;
left: 0;
bottom: 0;
z-index: 999;
width: 100%;
height: 1.3333333333rem;
background-color: rgba(0, 0, 0, 0.8);
padding: 0 0.2rem;
box-sizing: border-box;
display: flex;
align-items: center;
}
.wrap .shade-mask-rank .shade-content-rank .mine .mine-rank {
font-size: 0.3466666667rem;
font-weight: bold;
color: white;
}
.wrap .shade-mask-rank .shade-content-rank .mine .mine-info {
flex: 1;
display: flex;
align-items: center;
}
.wrap .shade-mask-rank .shade-content-rank .mine .mine-info img {
width: 1.0666666667rem;
height: 1.0666666667rem;
border-radius: 50%;
margin-left: 0.4rem;
margin-right: 0.5333333333rem;
}
.wrap .shade-mask-rank .shade-content-rank .mine .mine-info .mine-nick {
font-size: 0.3733333333rem;
font-weight: bold;
color: white;
}
.wrap .shade-mask-rank .shade-content-rank .mine .mine-diamond-num {
font-size: 0.3466666667rem;
font-weight: bold;
color: #ED7B50;
}
.wrap .shade-mask-fragmentNum {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8rem;
height: 8rem;
background: white;
border-radius: 0.32rem;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-title {
font-size: 0.48rem;
font-weight: bold;
color: #333333;
margin-top: 0.5066666667rem;
}
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum img {
width: 1.6rem;
width: 1.6rem;
margin-top: 1.44rem;
}
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum p {
font-size: 0.4rem;
font-weight: 600;
color: #333333;
margin-top: 0.6666666667rem;
}
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap {
display: flex;
justify-content: space-between;
width: 6.8266666667rem;
height: 1.0133333333rem;
margin-top: 1.2rem;
}
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn,
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
width: 3.2rem;
height: 1.0133333333rem;
line-height: 1.0133333333rem;
text-align: center;
border-radius: 0.5066666667rem;
font-size: 0.3733333333rem;
font-weight: 600;
background-color: #EAE5FC;
color: #7154EE;
}
.wrap .shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
background-color: #735FFE;
color: #fff;
}
.no-in-app {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
background-color: white;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
width: 100%;
height: 1.7333333333rem;
background: url("../images/mall/bottom.png") no-repeat 0 0/100% 100%;
display: flex;
align-items: center;
}
.bottom.mb-long {
margin-bottom: 0.9066666667rem;
}
.bottom .avatar {
width: 1.3333333333rem;
height: 1.3333333333rem;
margin-left: 0.56rem;
margin-right: 0.2666666667rem;
}
.bottom .avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.bottom .info-wrap {
flex: 1;
margin-top: 0.1866666667rem;
}
.bottom .info-wrap .fragment-num,
.bottom .info-wrap .diamond-num {
width: 3.3333333333rem;
height: 0.56rem;
background-color: #BD7F38;
border-radius: 0.2666666667rem;
line-height: 0.56rem;
font-size: 0.3466666667rem;
font-weight: bold;
color: white;
text-indent: 0.1333333333rem;
margin-bottom: 0.1333333333rem;
}
.bottom .add {
width: 0.5466666667rem;
height: 0.5466666667rem;
margin-top: -0.64rem;
margin-right: 0.9333333333rem;
}
.bottom .recharge {
width: 1.92rem;
height: 0.8266666667rem;
margin-right: 0.9866666667rem;
}
.bottom .recharge img {
width: 100%;
}
/*# sourceMappingURL=index.css.map */