1042 lines
26 KiB
CSS
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 */
|