619 lines
13 KiB
CSS
619 lines
13 KiB
CSS
body {
|
|
width: 100%;
|
|
height: 21.6533333333rem;
|
|
background: url(../images/bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding-top: 2.0933333333rem;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: 0.9333333333rem;
|
|
left: 0.4533333333rem;
|
|
z-index: 9999;
|
|
width: 0.8266666667rem;
|
|
height: 0.8266666667rem;
|
|
}
|
|
.back img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.back p {
|
|
color: #fff;
|
|
font-size: 0.4266666667rem;
|
|
position: absolute;
|
|
width: 9rem;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
text-align: center;
|
|
line-height: 0.8266666667rem;
|
|
}
|
|
|
|
.header {
|
|
width: 9.12rem;
|
|
height: 3.04rem;
|
|
margin: 0 auto 0rem;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.roulette {
|
|
width: 10rem;
|
|
height: 11.3333333333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 0rem;
|
|
}
|
|
.roulette .roulette_in {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.roulette .roulette_in canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.gold_10 {
|
|
width: 6.4266666667rem;
|
|
height: 0.6933333333rem;
|
|
margin: 0rem auto 0.2666666667rem;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.rule {
|
|
width: 0.68rem;
|
|
height: 1.8666666667rem;
|
|
background: url(../images/icon.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 2.8133333333rem;
|
|
right: 0;
|
|
color: #FFE7A9;
|
|
font-size: 0.2933333333rem;
|
|
text-align: center;
|
|
padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
|
|
box-sizing: border-box;
|
|
z-index: 3;
|
|
}
|
|
|
|
.record {
|
|
width: 0.68rem;
|
|
height: 1.8666666667rem;
|
|
background: url(../images/icon.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 4.8533333333rem;
|
|
right: 0;
|
|
color: #FFE7A9;
|
|
font-size: 0.2933333333rem;
|
|
text-align: center;
|
|
padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
|
|
box-sizing: border-box;
|
|
z-index: 9;
|
|
}
|
|
|
|
.tarotBox {
|
|
width: 9.8266666667rem;
|
|
height: 14.1333333333rem;
|
|
background: url(../images/middleBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto 0;
|
|
position: relative;
|
|
}
|
|
.tarotBox .tabBox {
|
|
width: 9.56rem;
|
|
height: 1.3066666667rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: url(../images/tabBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.tarotBox .tabBox div {
|
|
width: 3.3733333333rem;
|
|
height: 100%;
|
|
color: #FEF0C0;
|
|
font-size: 0.3733333333rem;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding-top: 0.3466666667rem;
|
|
}
|
|
.tarotBox .tabBox div b {
|
|
color: #FEF0C0;
|
|
font-size: 0.24rem;
|
|
margin-top: 0.04rem;
|
|
display: block;
|
|
}
|
|
.tarotBox .tabBox .active1 {
|
|
background: url(../images/active1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FFFFFF;
|
|
}
|
|
.tarotBox .tabBox .active1 b {
|
|
color: #FFFFFF;
|
|
}
|
|
.tarotBox .tabBox .active2 {
|
|
background: url(../images/active2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FFFFFF;
|
|
}
|
|
.tarotBox .tabBox .active2 b {
|
|
color: #FFFFFF;
|
|
}
|
|
.tarotBox .tabBox .active3 {
|
|
background: url(../images/active3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FFFFFF;
|
|
}
|
|
.tarotBox .tabBox .active3 b {
|
|
color: #FFFFFF;
|
|
}
|
|
.tarotBox .gradeText {
|
|
position: absolute;
|
|
left: 0.9866666667rem;
|
|
top: 1.4666666667rem;
|
|
color: #FFEAA9;
|
|
font-size: 0.32rem;
|
|
}
|
|
.tarotBox .diamond {
|
|
min-width: 1.9733333333rem;
|
|
height: 0.5866666667rem;
|
|
border-radius: 0.5866666667rem;
|
|
line-height: 0.5866666667rem;
|
|
position: absolute;
|
|
right: 0.96rem;
|
|
top: 1.28rem;
|
|
background: #343662;
|
|
color: #FFFFFF;
|
|
border: 0.0133333333rem solid #FFF3B1;
|
|
box-sizing: border-box;
|
|
vertical-align: middle;
|
|
}
|
|
.tarotBox .diamond .diamondIcon {
|
|
display: inline-block;
|
|
width: 0.3866666667rem;
|
|
height: 0.28rem;
|
|
margin-top: 0.16rem;
|
|
margin-left: 0.1733333333rem;
|
|
}
|
|
.tarotBox .diamond b {
|
|
font-size: 0.2666666667rem;
|
|
display: inline-block;
|
|
margin: 0 0.0933333333rem;
|
|
}
|
|
.tarotBox .diamond .add {
|
|
width: 0.24rem;
|
|
height: 0.24rem;
|
|
display: inline-block;
|
|
margin-top: 0.1733333333rem;
|
|
margin-right: 0.1866666667rem;
|
|
}
|
|
.tarotBox .cardBox {
|
|
width: 1.9733333333rem;
|
|
height: 3.2133333333rem;
|
|
position: absolute;
|
|
z-index: 3;
|
|
}
|
|
.tarotBox .card1 {
|
|
background: url(../images/card.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .card2 {
|
|
background: url(../images/card2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: none;
|
|
}
|
|
.tarotBox .card3 {
|
|
background: url(../images/card3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: none;
|
|
}
|
|
.tarotBox .card1_active {
|
|
background: url(../images/card1_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .card2_active {
|
|
background: url(../images/card2_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .card3_active {
|
|
background: url(../images/card3_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .card_not {
|
|
background: url(../images/not.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .card_winning1 {
|
|
background: url(../images/winning1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .card_winning2 {
|
|
background: url(../images/winning2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .card_winning3 {
|
|
background: url(../images/winning3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tarotBox .cardBox0 {
|
|
left: 0.9466666667rem;
|
|
top: 2.0933333333rem;
|
|
}
|
|
.tarotBox .cardBox1 {
|
|
left: 2.9866666667rem;
|
|
top: 2.0933333333rem;
|
|
}
|
|
.tarotBox .cardBox2 {
|
|
left: 5.04rem;
|
|
top: 2.0933333333rem;
|
|
}
|
|
.tarotBox .cardBox3 {
|
|
left: 7.08rem;
|
|
top: 2.0933333333rem;
|
|
}
|
|
.tarotBox .cardBox4 {
|
|
left: 7.08rem;
|
|
top: 5.52rem;
|
|
}
|
|
.tarotBox .cardBox5 {
|
|
left: 7.08rem;
|
|
top: 8.8533333333rem;
|
|
}
|
|
.tarotBox .cardBox6 {
|
|
left: 5.04rem;
|
|
top: 8.8533333333rem;
|
|
}
|
|
.tarotBox .cardBox7 {
|
|
left: 2.9866666667rem;
|
|
top: 8.8533333333rem;
|
|
}
|
|
.tarotBox .cardBox8 {
|
|
left: 0.9466666667rem;
|
|
top: 8.8533333333rem;
|
|
}
|
|
.tarotBox .cardBox9 {
|
|
left: 0.9466666667rem;
|
|
top: 5.52rem;
|
|
}
|
|
.tarotBox .cardBoxBut {
|
|
width: 2.5066666667rem;
|
|
height: 0.9866666667rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 7.4666666667rem;
|
|
z-index: 3;
|
|
}
|
|
.tarotBox .butAgain {
|
|
width: 2.5066666667rem;
|
|
height: 0.9866666667rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 7.4666666667rem;
|
|
display: none;
|
|
z-index: 3;
|
|
}
|
|
.tarotBox .gonggao {
|
|
width: 100%;
|
|
height: 1.3rem;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12.25rem;
|
|
overflow: hidden;
|
|
}
|
|
.tarotBox .gonggao .ul1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.tarotBox .gonggao .ul1 li {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 0.32rem;
|
|
margin-bottom: 0.1466666667rem;
|
|
}
|
|
.tarotBox .gonggao .ul1 li b {
|
|
color: #FFEAA9;
|
|
}
|
|
.tarotBox .gonggao .ul1 li i {
|
|
font-style: normal;
|
|
color: #80E6FF;
|
|
}
|
|
.tarotBox .cardBoxText_gift {
|
|
width: 4.2666666667rem;
|
|
height: 3.0133333333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 5.76rem;
|
|
color: #FEF0C0;
|
|
font-size: 0.4rem;
|
|
text-align: center;
|
|
}
|
|
.tarotBox .cardBoxText_gx {
|
|
width: 4.2666666667rem;
|
|
height: 3.0133333333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 5.52rem;
|
|
box-sizing: border-box;
|
|
padding-top: 0.88rem;
|
|
display: none;
|
|
}
|
|
.tarotBox .cardBoxText_gx p {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 0.2133333333rem;
|
|
color: #FFE26D;
|
|
font-size: 0.3733333333rem;
|
|
}
|
|
.tarotBox .cardBoxText_gx p i {
|
|
font-style: normal;
|
|
}
|
|
.tarotBox .cardBoxText_gx p b {
|
|
color: #FFE26D;
|
|
}
|
|
.tarotBox .cardBoxText_no {
|
|
width: 4.2666666667rem;
|
|
height: 3.0133333333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 5.52rem;
|
|
box-sizing: border-box;
|
|
padding-top: 0.88rem;
|
|
display: none;
|
|
}
|
|
.tarotBox .cardBoxText_no p {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 0.2133333333rem;
|
|
color: #fff;
|
|
font-size: 0.3733333333rem;
|
|
}
|
|
.tarotBox .cardBoxText_no p i {
|
|
font-style: normal;
|
|
}
|
|
.tarotBox .cardBoxText_no p b {
|
|
color: #80E6FF;
|
|
}
|
|
.tarotBox .cardBoxText {
|
|
width: 4.2666666667rem;
|
|
height: 3.0133333333rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 5.52rem;
|
|
box-sizing: border-box;
|
|
padding-top: 0.88rem;
|
|
z-index: 3;
|
|
}
|
|
.tarotBox .cardBoxText p {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 0.2133333333rem;
|
|
color: #fff;
|
|
font-size: 0.3733333333rem;
|
|
}
|
|
.tarotBox .cardBoxText p i {
|
|
font-style: normal;
|
|
}
|
|
.tarotBox .cardBoxText p b {
|
|
color: #80E6FF;
|
|
}
|
|
.tarotBox .star {
|
|
width: 4.48rem;
|
|
height: 3.8666666667rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 5.52rem;
|
|
}
|
|
.tarotBox .star .star_in {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.tarotBox .star .star_in canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
h3 {
|
|
width: 100%;
|
|
margin-bottom: 0.16rem;
|
|
color: #D7D9F7;
|
|
font-size: 0.24rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.rule_pub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99999;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
display: none;
|
|
}
|
|
.rule_pub .rule_pub_in {
|
|
width: 8.72rem;
|
|
height: 11.6533333333rem;
|
|
background: url(../images/rule.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.rule_pub .rule_pub_in .close {
|
|
position: absolute;
|
|
width: 0.9066666667rem;
|
|
height: 0.9066666667rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -1.3333333333rem;
|
|
}
|
|
|
|
.winningRecord {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99999;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
display: none;
|
|
}
|
|
.winningRecord .winningRecord_in {
|
|
width: 8.72rem;
|
|
height: 11.6533333333rem;
|
|
background: url(../images/winningRecord.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.winningRecord .winningRecord_in .title {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.4266666667rem;
|
|
}
|
|
.winningRecord .winningRecord_in .title div {
|
|
width: 25%;
|
|
color: #FFFFFF;
|
|
font-size: 0.3733333333rem;
|
|
margin-top: 2.1866666667rem;
|
|
text-align: center;
|
|
}
|
|
.winningRecord .winningRecord_in ul {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 0.04rem;
|
|
height: 8rem;
|
|
margin: 0 auto;
|
|
overflow-y: scroll;
|
|
}
|
|
.winningRecord .winningRecord_in ul::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
.winningRecord .winningRecord_in ul li {
|
|
background: none;
|
|
width: 100%;
|
|
height: 1.0666666667rem;
|
|
line-height: 1.0666666667rem;
|
|
color: #FFEE9D;
|
|
font-size: 0.3466666667rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
}
|
|
.winningRecord .winningRecord_in ul li div {
|
|
text-align: center;
|
|
width: 25%;
|
|
}
|
|
.winningRecord .winningRecord_in ul li .box {
|
|
line-height: 1.0666666667rem;
|
|
}
|
|
.winningRecord .winningRecord_in ul li .box_acitve {
|
|
line-height: 0.45rem;
|
|
margin-top: 0.1rem;
|
|
}
|
|
.winningRecord .winningRecord_in ul li .time {
|
|
line-height: 0.4rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
.winningRecord .winningRecord_in ul .active {
|
|
background: rgba(135, 133, 243, 0.6);
|
|
}
|
|
.winningRecord .winningRecord_in .close {
|
|
position: absolute;
|
|
width: 0.9066666667rem;
|
|
height: 0.9066666667rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -1.3333333333rem;
|
|
}
|
|
|
|
.shade-mask-fragmentNum {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.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;
|
|
}
|
|
.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-title {
|
|
font-size: 0.48rem;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-top: 0.5066666667rem;
|
|
}
|
|
.shade-mask-fragmentNum .shade-content-fragmentNum img {
|
|
width: 1.6rem;
|
|
width: 1.6rem;
|
|
margin-top: 1.44rem;
|
|
}
|
|
.shade-mask-fragmentNum .shade-content-fragmentNum p {
|
|
font-size: 0.4rem;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-top: 0.6666666667rem;
|
|
}
|
|
.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;
|
|
}
|
|
.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .cancel-btn,
|
|
.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;
|
|
}
|
|
.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn {
|
|
background-color: #735FFE;
|
|
color: #fff;
|
|
}
|
|
|
|
/*# sourceMappingURL=index.css.map */
|