修复ios动效异常问题
This commit is contained in:
Dragon
@@ -1,6 +1,6 @@
|
||||
body {
|
||||
width: 100%;
|
||||
height: 21.6533333333rem;
|
||||
height: 21.65333rem;
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
@@ -14,26 +14,28 @@ body {
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.9333333333rem;
|
||||
left: 0.4533333333rem;
|
||||
top: 0.93333rem;
|
||||
left: 0.45333rem;
|
||||
z-index: 9999;
|
||||
width: 0.8266666667rem;
|
||||
height: 0.8266666667rem;
|
||||
width: 0.82667rem;
|
||||
height: 0.82667rem;
|
||||
}
|
||||
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.back p {
|
||||
color: #fff;
|
||||
font-size: 0.4266666667rem;
|
||||
font-size: 0.42667rem;
|
||||
position: absolute;
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 0.8266666667rem;
|
||||
line-height: 0.82667rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -47,25 +49,27 @@ body {
|
||||
|
||||
.roulette {
|
||||
width: 10rem;
|
||||
height: 11.3333333333rem;
|
||||
height: 11.33333rem;
|
||||
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;
|
||||
width: 6.42667rem;
|
||||
height: 0.69333rem;
|
||||
margin: 0rem auto 0.26667rem;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
@@ -73,239 +77,278 @@ body {
|
||||
|
||||
.rule {
|
||||
width: 0.68rem;
|
||||
height: 1.8666666667rem;
|
||||
height: 1.86667rem;
|
||||
background: url(../images/icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 2.8133333333rem;
|
||||
top: 2.81333rem;
|
||||
right: 0;
|
||||
color: #FFE7A9;
|
||||
font-size: 0.2933333333rem;
|
||||
font-size: 0.29333rem;
|
||||
text-align: center;
|
||||
padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
|
||||
padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.record {
|
||||
width: 0.68rem;
|
||||
height: 1.8666666667rem;
|
||||
height: 1.86667rem;
|
||||
background: url(../images/icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 4.8533333333rem;
|
||||
top: 4.85333rem;
|
||||
right: 0;
|
||||
color: #FFE7A9;
|
||||
font-size: 0.2933333333rem;
|
||||
font-size: 0.29333rem;
|
||||
text-align: center;
|
||||
padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
|
||||
padding: 0.33333rem 0.13333rem 0.30667rem 0.26667rem;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.tarotBox {
|
||||
width: 9.8266666667rem;
|
||||
height: 14.1333333333rem;
|
||||
width: 9.82667rem;
|
||||
height: 14.13333rem;
|
||||
background: url(../images/middleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tarotBox .tabBox {
|
||||
width: 9.56rem;
|
||||
height: 1.3066666667rem;
|
||||
height: 1.30667rem;
|
||||
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;
|
||||
width: 3.37333rem;
|
||||
height: 100%;
|
||||
color: #FEF0C0;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.3466666667rem;
|
||||
padding-top: 0.34667rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
left: 0.98667rem;
|
||||
top: 1.46667rem;
|
||||
color: #FFEAA9;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
|
||||
.tarotBox .diamond {
|
||||
min-width: 1.9733333333rem;
|
||||
height: 0.5866666667rem;
|
||||
border-radius: 0.5866666667rem;
|
||||
line-height: 0.5866666667rem;
|
||||
min-width: 1.97333rem;
|
||||
height: 0.58667rem;
|
||||
border-radius: 0.58667rem;
|
||||
line-height: 0.58667rem;
|
||||
position: absolute;
|
||||
right: 0.96rem;
|
||||
top: 1.28rem;
|
||||
background: #343662;
|
||||
color: #FFFFFF;
|
||||
border: 0.0133333333rem solid #FFF3B1;
|
||||
border: 0.01333rem solid #FFF3B1;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tarotBox .diamond .diamondIcon {
|
||||
display: inline-block;
|
||||
width: 0.3866666667rem;
|
||||
width: 0.38667rem;
|
||||
height: 0.28rem;
|
||||
margin-top: 0.16rem;
|
||||
margin-left: 0.1733333333rem;
|
||||
margin-left: 0.17333rem;
|
||||
}
|
||||
|
||||
.tarotBox .diamond b {
|
||||
font-size: 0.2666666667rem;
|
||||
font-size: 0.26667rem;
|
||||
display: inline-block;
|
||||
margin: 0 0.0933333333rem;
|
||||
margin: 0 0.09333rem;
|
||||
}
|
||||
|
||||
.tarotBox .diamond .add {
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
display: inline-block;
|
||||
margin-top: 0.1733333333rem;
|
||||
margin-right: 0.1866666667rem;
|
||||
margin-top: 0.17333rem;
|
||||
margin-right: 0.18667rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox {
|
||||
width: 1.9733333333rem;
|
||||
height: 3.2133333333rem;
|
||||
width: 1.97333rem;
|
||||
height: 3.21333rem;
|
||||
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;
|
||||
left: 0.94667rem;
|
||||
top: 2.09333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox1 {
|
||||
left: 2.9866666667rem;
|
||||
top: 2.0933333333rem;
|
||||
left: 2.98667rem;
|
||||
top: 2.09333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox2 {
|
||||
left: 5.04rem;
|
||||
top: 2.0933333333rem;
|
||||
top: 2.09333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox3 {
|
||||
left: 7.08rem;
|
||||
top: 2.0933333333rem;
|
||||
top: 2.09333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox4 {
|
||||
left: 7.08rem;
|
||||
top: 5.52rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox5 {
|
||||
left: 7.08rem;
|
||||
top: 8.8533333333rem;
|
||||
top: 8.85333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox6 {
|
||||
left: 5.04rem;
|
||||
top: 8.8533333333rem;
|
||||
top: 8.85333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox7 {
|
||||
left: 2.9866666667rem;
|
||||
top: 8.8533333333rem;
|
||||
left: 2.98667rem;
|
||||
top: 8.85333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox8 {
|
||||
left: 0.9466666667rem;
|
||||
top: 8.8533333333rem;
|
||||
left: 0.94667rem;
|
||||
top: 8.85333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBox9 {
|
||||
left: 0.9466666667rem;
|
||||
left: 0.94667rem;
|
||||
top: 5.52rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxBut {
|
||||
width: 2.5066666667rem;
|
||||
height: 0.9866666667rem;
|
||||
width: 2.50667rem;
|
||||
height: 0.98667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 7.4666666667rem;
|
||||
top: 7.46667rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.tarotBox .butAgain {
|
||||
width: 2.5066666667rem;
|
||||
height: 0.9866666667rem;
|
||||
width: 2.50667rem;
|
||||
height: 0.98667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 7.4666666667rem;
|
||||
top: 7.46667rem;
|
||||
display: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.tarotBox .gonggao {
|
||||
width: 100%;
|
||||
height: 1.3rem;
|
||||
@@ -315,27 +358,32 @@ body {
|
||||
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;
|
||||
margin-bottom: 0.14667rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 4.26667rem;
|
||||
height: 3.01333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -344,9 +392,10 @@ body {
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_gx {
|
||||
width: 4.2666666667rem;
|
||||
height: 3.0133333333rem;
|
||||
width: 4.26667rem;
|
||||
height: 3.01333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -355,22 +404,26 @@ body {
|
||||
padding-top: 0.88rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_gx p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 0.2133333333rem;
|
||||
margin-bottom: 0.21333rem;
|
||||
color: #FFE26D;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_gx p i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_gx p b {
|
||||
color: #FFE26D;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_no {
|
||||
width: 4.2666666667rem;
|
||||
height: 3.0133333333rem;
|
||||
width: 4.26667rem;
|
||||
height: 3.01333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -379,22 +432,26 @@ body {
|
||||
padding-top: 0.88rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_no p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 0.2133333333rem;
|
||||
margin-bottom: 0.21333rem;
|
||||
color: #fff;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_no p i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText_no p b {
|
||||
color: #80E6FF;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText {
|
||||
width: 4.2666666667rem;
|
||||
height: 3.0133333333rem;
|
||||
width: 4.26667rem;
|
||||
height: 3.01333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@@ -403,31 +460,37 @@ body {
|
||||
padding-top: 0.88rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 0.2133333333rem;
|
||||
margin-bottom: 0.21333rem;
|
||||
color: #fff;
|
||||
font-size: 0.3733333333rem;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText p i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tarotBox .cardBoxText p b {
|
||||
color: #80E6FF;
|
||||
}
|
||||
|
||||
.tarotBox .star {
|
||||
width: 4.48rem;
|
||||
height: 3.8666666667rem;
|
||||
height: 3.86667rem;
|
||||
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%;
|
||||
@@ -443,35 +506,40 @@ h3 {
|
||||
|
||||
.rule_pub {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 99999;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: none;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.rule_pub .rule_pub_in {
|
||||
width: 8.72rem;
|
||||
height: 11.6533333333rem;
|
||||
width: 8rem;
|
||||
height: 10.93333rem;
|
||||
background: url(../images/rule.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.rule_pub .rule_pub_in .close {
|
||||
position: absolute;
|
||||
width: 0.9066666667rem;
|
||||
height: 0.9066666667rem;
|
||||
width: 0.90667rem;
|
||||
height: 0.90667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -1.3333333333rem;
|
||||
bottom: -1.33333rem;
|
||||
}
|
||||
|
||||
.winningRecord {
|
||||
position: fixed;
|
||||
height: 21.65333rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@@ -479,78 +547,92 @@ h3 {
|
||||
z-index: 99999;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: none;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.winningRecord .winningRecord_in {
|
||||
width: 8.72rem;
|
||||
height: 11.6533333333rem;
|
||||
height: 10.93333rem;
|
||||
background: url(../images/winningRecord.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.winningRecord .winningRecord_in .title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.4266666667rem;
|
||||
margin-bottom: 0.42667rem;
|
||||
}
|
||||
|
||||
.winningRecord .winningRecord_in .title div {
|
||||
width: 25%;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.3733333333rem;
|
||||
margin-top: 2.1866666667rem;
|
||||
font-size: 0.37333rem;
|
||||
margin-top: 2.18667rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.winningRecord .winningRecord_in ul {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.04rem;
|
||||
height: 8rem;
|
||||
height: 7.7rem;
|
||||
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;
|
||||
height: 1.06667rem;
|
||||
line-height: 1.06667rem;
|
||||
color: #FFEE9D;
|
||||
font-size: 0.3466666667rem;
|
||||
font-size: 0.34667rem;
|
||||
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;
|
||||
line-height: 1.06667rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 0.90667rem;
|
||||
height: 0.90667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -1.3333333333rem;
|
||||
bottom: -1.33333rem;
|
||||
}
|
||||
|
||||
.shade-mask-fragmentNum {
|
||||
@@ -563,6 +645,7 @@ h3 {
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.shade-mask-fragmentNum .shade-content-fragmentNum {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -577,45 +660,49 @@ h3 {
|
||||
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;
|
||||
margin-top: 0.50667rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 0.66667rem;
|
||||
}
|
||||
|
||||
.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 6.8266666667rem;
|
||||
height: 1.0133333333rem;
|
||||
width: 6.82667rem;
|
||||
height: 1.01333rem;
|
||||
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;
|
||||
height: 1.01333rem;
|
||||
line-height: 1.01333rem;
|
||||
text-align: center;
|
||||
border-radius: 0.5066666667rem;
|
||||
font-size: 0.3733333333rem;
|
||||
border-radius: 0.50667rem;
|
||||
font-size: 0.37333rem;
|
||||
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 */
|
||||
|
||||
@@ -6,7 +6,7 @@ html {}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: px2rem(1624, );
|
||||
height: px2rem(1624);
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
@@ -21,11 +21,11 @@ body {
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: px2rem(70, );
|
||||
left: px2rem(34, );
|
||||
top: px2rem(70);
|
||||
left: px2rem(34);
|
||||
z-index: 9999;
|
||||
width: px2rem(62, );
|
||||
height: px2rem(62, );
|
||||
width: px2rem(62);
|
||||
height: px2rem(62);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -34,33 +34,33 @@ body {
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: px2rem(32, );
|
||||
font-size: px2rem(32);
|
||||
position: absolute;
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: px2rem(62, );
|
||||
line-height: px2rem(62);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: px2rem(684, );
|
||||
height: px2rem(228, );
|
||||
margin: 0 auto px2rem(0, );
|
||||
width: px2rem(684);
|
||||
height: px2rem(228);
|
||||
margin: 0 auto px2rem(0);
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.roulette {
|
||||
width: px2rem(750, );
|
||||
height: px2rem(850, );
|
||||
width: px2rem(750);
|
||||
height: px2rem(850);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(0, );
|
||||
top: px2rem(0);
|
||||
|
||||
.roulette_in {
|
||||
width: 100%;
|
||||
@@ -74,57 +74,58 @@ body {
|
||||
}
|
||||
|
||||
.gold_10 {
|
||||
width: px2rem(482, );
|
||||
height: px2rem(52, );
|
||||
margin: px2rem(0, ) auto px2rem(20, );
|
||||
width: px2rem(482);
|
||||
height: px2rem(52);
|
||||
margin: px2rem(0) auto px2rem(20);
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.rule {
|
||||
width: px2rem(51, );
|
||||
height: px2rem(140, );
|
||||
width: px2rem(51);
|
||||
height: px2rem(140);
|
||||
background: url(../images/icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: px2rem(211, );
|
||||
top: px2rem(211);
|
||||
right: 0;
|
||||
color: #FFE7A9;
|
||||
font-size: px2rem(22, );
|
||||
font-size: px2rem(22);
|
||||
text-align: center;
|
||||
padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
|
||||
padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.record {
|
||||
width: px2rem(51, );
|
||||
height: px2rem(140, );
|
||||
width: px2rem(51);
|
||||
height: px2rem(140);
|
||||
background: url(../images/icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: px2rem(364, );
|
||||
top: px2rem(364);
|
||||
right: 0;
|
||||
color: #FFE7A9;
|
||||
font-size: px2rem(22, );
|
||||
font-size: px2rem(22);
|
||||
text-align: center;
|
||||
padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
|
||||
padding: px2rem(25) px2rem(10) px2rem(23) px2rem(20);
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.tarotBox {
|
||||
width: px2rem(737, );
|
||||
height: px2rem(1060, );
|
||||
width: px2rem(737);
|
||||
height: px2rem(1060);
|
||||
background: url(../images/middleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.tabBox {
|
||||
width: px2rem(717, );
|
||||
height: px2rem(98, );
|
||||
width: px2rem(717);
|
||||
height: px2rem(98);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url(../images/tabBox.png) no-repeat;
|
||||
@@ -132,18 +133,18 @@ body {
|
||||
margin: 0 auto;
|
||||
|
||||
div {
|
||||
width: px2rem(253, );
|
||||
width: px2rem(253);
|
||||
height: 100%;
|
||||
color: #FEF0C0;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(26, );
|
||||
padding-top: px2rem(26);
|
||||
|
||||
b {
|
||||
color: #FEF0C0;
|
||||
font-size: px2rem(18, );
|
||||
margin-top: px2rem(3, );
|
||||
font-size: px2rem(18);
|
||||
margin-top: px2rem(3);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -181,52 +182,52 @@ body {
|
||||
|
||||
.gradeText {
|
||||
position: absolute;
|
||||
left: px2rem(74, );
|
||||
top: px2rem(110, );
|
||||
left: px2rem(74);
|
||||
top: px2rem(110);
|
||||
color: #FFEAA9;
|
||||
font-size: px2rem(24, );
|
||||
font-size: px2rem(24);
|
||||
}
|
||||
|
||||
.diamond {
|
||||
min-width: px2rem(148, );
|
||||
height: px2rem(44, );
|
||||
border-radius: px2rem(44, );
|
||||
line-height: px2rem(44, );
|
||||
min-width: px2rem(148);
|
||||
height: px2rem(44);
|
||||
border-radius: px2rem(44);
|
||||
line-height: px2rem(44);
|
||||
position: absolute;
|
||||
right: px2rem(72, );
|
||||
top: px2rem(96, );
|
||||
right: px2rem(72);
|
||||
top: px2rem(96);
|
||||
background: #343662;
|
||||
color: #FFFFFF;
|
||||
border: px2rem(1, ) solid #FFF3B1;
|
||||
border: px2rem(1) solid #FFF3B1;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
|
||||
.diamondIcon {
|
||||
display: inline-block;
|
||||
width: px2rem(29, );
|
||||
height: px2rem(21, );
|
||||
margin-top: px2rem(12, );
|
||||
margin-left: px2rem(13, );
|
||||
width: px2rem(29);
|
||||
height: px2rem(21);
|
||||
margin-top: px2rem(12);
|
||||
margin-left: px2rem(13);
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: px2rem(20, );
|
||||
font-size: px2rem(20);
|
||||
display: inline-block;
|
||||
margin: 0 px2rem(7, );
|
||||
margin: 0 px2rem(7);
|
||||
}
|
||||
|
||||
.add {
|
||||
width: px2rem(18, );
|
||||
height: px2rem(18, );
|
||||
width: px2rem(18);
|
||||
height: px2rem(18);
|
||||
display: inline-block;
|
||||
margin-top: px2rem(13, );
|
||||
margin-right: px2rem(14, );
|
||||
margin-top: px2rem(13);
|
||||
margin-right: px2rem(14);
|
||||
}
|
||||
}
|
||||
|
||||
.cardBox {
|
||||
width: px2rem(148, );
|
||||
height: px2rem(241, );
|
||||
width: px2rem(148);
|
||||
height: px2rem(241);
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
// transition: all 1s;
|
||||
@@ -287,72 +288,72 @@ body {
|
||||
}
|
||||
|
||||
.cardBox0 {
|
||||
left: px2rem(71, );
|
||||
top: px2rem(157, );
|
||||
left: px2rem(71);
|
||||
top: px2rem(157);
|
||||
}
|
||||
|
||||
.cardBox1 {
|
||||
left: px2rem(224, );
|
||||
top: px2rem(157, );
|
||||
left: px2rem(224);
|
||||
top: px2rem(157);
|
||||
}
|
||||
|
||||
.cardBox2 {
|
||||
left: px2rem(378, );
|
||||
top: px2rem(157, );
|
||||
left: px2rem(378);
|
||||
top: px2rem(157);
|
||||
}
|
||||
|
||||
.cardBox3 {
|
||||
left: px2rem(531, );
|
||||
top: px2rem(157, );
|
||||
left: px2rem(531);
|
||||
top: px2rem(157);
|
||||
}
|
||||
|
||||
.cardBox4 {
|
||||
left: px2rem(531, );
|
||||
top: px2rem(414, );
|
||||
left: px2rem(531);
|
||||
top: px2rem(414);
|
||||
}
|
||||
|
||||
.cardBox5 {
|
||||
left: px2rem(531, );
|
||||
top: px2rem(664, );
|
||||
left: px2rem(531);
|
||||
top: px2rem(664);
|
||||
}
|
||||
|
||||
.cardBox6 {
|
||||
left: px2rem(378, );
|
||||
top: px2rem(664, );
|
||||
left: px2rem(378);
|
||||
top: px2rem(664);
|
||||
}
|
||||
|
||||
.cardBox7 {
|
||||
left: px2rem(224, );
|
||||
top: px2rem(664, );
|
||||
left: px2rem(224);
|
||||
top: px2rem(664);
|
||||
}
|
||||
|
||||
.cardBox8 {
|
||||
left: px2rem(71, );
|
||||
top: px2rem(664, );
|
||||
left: px2rem(71);
|
||||
top: px2rem(664);
|
||||
}
|
||||
|
||||
.cardBox9 {
|
||||
left: px2rem(71, );
|
||||
top: px2rem(414, );
|
||||
left: px2rem(71);
|
||||
top: px2rem(414);
|
||||
}
|
||||
|
||||
.cardBoxBut {
|
||||
width: px2rem(188, );
|
||||
height: px2rem(74, );
|
||||
width: px2rem(188);
|
||||
height: px2rem(74);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(560, );
|
||||
top: px2rem(560);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.butAgain {
|
||||
width: px2rem(188, );
|
||||
height: px2rem(74, );
|
||||
width: px2rem(188);
|
||||
height: px2rem(74);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(560, );
|
||||
top: px2rem(560);
|
||||
display: none;
|
||||
z-index: 3;
|
||||
}
|
||||
@@ -374,8 +375,8 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(24, );
|
||||
margin-bottom: px2rem(11, );
|
||||
font-size: px2rem(24);
|
||||
margin-bottom: px2rem(11);
|
||||
|
||||
b {
|
||||
color: #FFEAA9;
|
||||
@@ -390,34 +391,34 @@ body {
|
||||
}
|
||||
|
||||
.cardBoxText_gift {
|
||||
width: px2rem(320, );
|
||||
height: px2rem(226, );
|
||||
width: px2rem(320);
|
||||
height: px2rem(226);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(432, );
|
||||
top: px2rem(432);
|
||||
color: #FEF0C0;
|
||||
font-size: px2rem(30, );
|
||||
font-size: px2rem(30);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cardBoxText_gx {
|
||||
width: px2rem(320, );
|
||||
height: px2rem(226, );
|
||||
width: px2rem(320);
|
||||
height: px2rem(226);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(414, );
|
||||
top: px2rem(414);
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(66, );
|
||||
padding-top: px2rem(66);
|
||||
display: none;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: px2rem(16, );
|
||||
margin-bottom: px2rem(16);
|
||||
color: #FFE26D;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
@@ -430,22 +431,22 @@ body {
|
||||
}
|
||||
|
||||
.cardBoxText_no {
|
||||
width: px2rem(320, );
|
||||
height: px2rem(226, );
|
||||
width: px2rem(320);
|
||||
height: px2rem(226);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(414, );
|
||||
top: px2rem(414);
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(66, );
|
||||
padding-top: px2rem(66);
|
||||
display: none;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: px2rem(16, );
|
||||
margin-bottom: px2rem(16);
|
||||
color: #fff;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
@@ -458,22 +459,22 @@ body {
|
||||
}
|
||||
|
||||
.cardBoxText {
|
||||
width: px2rem(320, );
|
||||
height: px2rem(226, );
|
||||
width: px2rem(320);
|
||||
height: px2rem(226);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(414, );
|
||||
top: px2rem(414);
|
||||
box-sizing: border-box;
|
||||
padding-top: px2rem(66, );
|
||||
padding-top: px2rem(66);
|
||||
z-index: 3;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: px2rem(16, );
|
||||
margin-bottom: px2rem(16);
|
||||
color: #fff;
|
||||
font-size: px2rem(28, );
|
||||
font-size: px2rem(28);
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
@@ -486,12 +487,12 @@ body {
|
||||
}
|
||||
|
||||
.star {
|
||||
width: px2rem(336, );
|
||||
height: px2rem(290, );
|
||||
width: px2rem(336);
|
||||
height: px2rem(290);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(414, );
|
||||
top: px2rem(414);
|
||||
|
||||
.star_in {
|
||||
width: 100%;
|
||||
@@ -507,45 +508,48 @@ body {
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
margin-bottom: px2rem(12, );
|
||||
margin-bottom: px2rem(12);
|
||||
color: #D7D9F7;
|
||||
font-size: px2rem(18, );
|
||||
font-size: px2rem(18);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rule_pub {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 99999;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
display: none;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
.rule_pub_in {
|
||||
width: px2rem(654, );
|
||||
height: px2rem(874, );
|
||||
width: px2rem(600);
|
||||
height: px2rem(820);
|
||||
background: url(../images/rule.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
width: px2rem(68, );
|
||||
height: px2rem(68, );
|
||||
width: px2rem(68);
|
||||
height: px2rem(68);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-100, );
|
||||
bottom: px2rem(-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.winningRecord {
|
||||
position: fixed;
|
||||
height: px2rem(1624);
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@@ -553,28 +557,30 @@ h3 {
|
||||
z-index: 99999;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
display: none;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
.winningRecord_in {
|
||||
width: px2rem(654, );
|
||||
height: px2rem(874, );
|
||||
width: px2rem(654);
|
||||
height: px2rem(820);
|
||||
background: url(../images/winningRecord.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: px2rem(32, );
|
||||
margin-bottom: px2rem(32);
|
||||
|
||||
div {
|
||||
width: 25%;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(28, );
|
||||
margin-top: px2rem(164, );
|
||||
font-size: px2rem(28);
|
||||
margin-top: px2rem(164);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -582,8 +588,8 @@ h3 {
|
||||
ul {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(3, );
|
||||
height: 8rem;
|
||||
padding: 0 px2rem(3);
|
||||
height: 7.7rem;
|
||||
margin: 0 auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
@@ -595,10 +601,10 @@ h3 {
|
||||
li {
|
||||
background: none;
|
||||
width: 100%;
|
||||
height: px2rem(80, );
|
||||
line-height: px2rem(80, );
|
||||
height: px2rem(80);
|
||||
line-height: px2rem(80);
|
||||
color: #FFEE9D;
|
||||
font-size: px2rem(26, );
|
||||
font-size: px2rem(26);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
@@ -609,7 +615,7 @@ h3 {
|
||||
}
|
||||
|
||||
.box {
|
||||
line-height: px2rem(80, );
|
||||
line-height: px2rem(80);
|
||||
}
|
||||
|
||||
.box_acitve {
|
||||
@@ -630,11 +636,11 @@ h3 {
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
width: px2rem(68, );
|
||||
height: px2rem(68, );
|
||||
width: px2rem(68);
|
||||
height: px2rem(68);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: px2rem(-100, );
|
||||
bottom: px2rem(-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -466,6 +466,7 @@ $('.tarotBox .diamond').click(() => {
|
||||
})
|
||||
// 打開規則
|
||||
$('.rule').click(function () {
|
||||
$(window).scrollTop(0)
|
||||
bodyScroolFun(true);
|
||||
$('.rule_pub ').show();
|
||||
})
|
||||
@@ -476,6 +477,7 @@ $('.rule_pub .rule_pub_in .close').click(function () {
|
||||
})
|
||||
// 打開記錄
|
||||
$('.record').click(function () {
|
||||
$(window).scrollTop(0)
|
||||
$('.winningRecord .winningRecord_in ul li').remove();
|
||||
page = 1;
|
||||
recordPage();
|
||||
|
||||
Reference in New Issue
Block a user