710 lines
15 KiB
SCSS
710 lines
15 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
html {}
|
|
|
|
body {
|
|
width: 100%;
|
|
height: px2rem(1624, );
|
|
background: url(../images/bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding-top: 2.0933333333rem;
|
|
// overflow-y: scroll;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70, );
|
|
left: px2rem(34, );
|
|
z-index: 9999;
|
|
width: px2rem(62, );
|
|
height: px2rem(62, );
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
p {
|
|
color: #fff;
|
|
font-size: px2rem(32, );
|
|
position: absolute;
|
|
width: 9rem;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
text-align: center;
|
|
line-height: px2rem(62, );
|
|
}
|
|
}
|
|
|
|
.header {
|
|
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, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(0, );
|
|
|
|
.roulette_in {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gold_10 {
|
|
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, );
|
|
background: url(../images/icon.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: px2rem(211, );
|
|
right: 0;
|
|
color: #FFE7A9;
|
|
font-size: px2rem(22, );
|
|
text-align: center;
|
|
padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
|
|
box-sizing: border-box;
|
|
z-index: 3;
|
|
}
|
|
|
|
.record {
|
|
width: px2rem(51, );
|
|
height: px2rem(140, );
|
|
background: url(../images/icon.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: px2rem(364, );
|
|
right: 0;
|
|
color: #FFE7A9;
|
|
font-size: px2rem(22, );
|
|
text-align: center;
|
|
padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
|
|
box-sizing: border-box;
|
|
z-index: 9;
|
|
}
|
|
|
|
.tarotBox {
|
|
width: px2rem(737, );
|
|
height: px2rem(1060, );
|
|
background: url(../images/middleBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto 0;
|
|
position: relative;
|
|
|
|
.tabBox {
|
|
width: px2rem(717, );
|
|
height: px2rem(98, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: url(../images/tabBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
|
|
div {
|
|
width: px2rem(253, );
|
|
height: 100%;
|
|
color: #FEF0C0;
|
|
font-size: px2rem(28, );
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(26, );
|
|
|
|
b {
|
|
color: #FEF0C0;
|
|
font-size: px2rem(18, );
|
|
margin-top: px2rem(3, );
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.active1 {
|
|
background: url(../images/active1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FFFFFF;
|
|
|
|
b {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.active2 {
|
|
background: url(../images/active2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FFFFFF;
|
|
|
|
b {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.active3 {
|
|
background: url(../images/active3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FFFFFF;
|
|
|
|
b {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gradeText {
|
|
position: absolute;
|
|
left: px2rem(74, );
|
|
top: px2rem(110, );
|
|
color: #FFEAA9;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
.diamond {
|
|
min-width: px2rem(148, );
|
|
height: px2rem(44, );
|
|
border-radius: px2rem(44, );
|
|
line-height: px2rem(44, );
|
|
position: absolute;
|
|
right: px2rem(72, );
|
|
top: px2rem(96, );
|
|
background: #343662;
|
|
color: #FFFFFF;
|
|
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, );
|
|
}
|
|
|
|
b {
|
|
font-size: px2rem(20, );
|
|
display: inline-block;
|
|
margin: 0 px2rem(7, );
|
|
}
|
|
|
|
.add {
|
|
width: px2rem(18, );
|
|
height: px2rem(18, );
|
|
display: inline-block;
|
|
margin-top: px2rem(13, );
|
|
margin-right: px2rem(14, );
|
|
}
|
|
}
|
|
|
|
.cardBox {
|
|
width: px2rem(148, );
|
|
height: px2rem(241, );
|
|
position: absolute;
|
|
z-index: 3;
|
|
// transition: all 1s;
|
|
}
|
|
|
|
.card1 {
|
|
background: url(../images/card.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
.card2 {
|
|
background: url(../images/card2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: none;
|
|
}
|
|
|
|
|
|
.card3 {
|
|
background: url(../images/card3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: none;
|
|
}
|
|
|
|
.card1_active {
|
|
background: url(../images/card1_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.card2_active {
|
|
background: url(../images/card2_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.card3_active {
|
|
background: url(../images/card3_active.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.card_not {
|
|
background: url(../images/not.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.card_winning1 {
|
|
background: url(../images/winning1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.card_winning2 {
|
|
background: url(../images/winning2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.card_winning3 {
|
|
background: url(../images/winning3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.cardBox0 {
|
|
left: px2rem(71, );
|
|
top: px2rem(157, );
|
|
}
|
|
|
|
.cardBox1 {
|
|
left: px2rem(224, );
|
|
top: px2rem(157, );
|
|
}
|
|
|
|
.cardBox2 {
|
|
left: px2rem(378, );
|
|
top: px2rem(157, );
|
|
}
|
|
|
|
.cardBox3 {
|
|
left: px2rem(531, );
|
|
top: px2rem(157, );
|
|
}
|
|
|
|
.cardBox4 {
|
|
left: px2rem(531, );
|
|
top: px2rem(414, );
|
|
}
|
|
|
|
.cardBox5 {
|
|
left: px2rem(531, );
|
|
top: px2rem(664, );
|
|
}
|
|
|
|
.cardBox6 {
|
|
left: px2rem(378, );
|
|
top: px2rem(664, );
|
|
}
|
|
|
|
.cardBox7 {
|
|
left: px2rem(224, );
|
|
top: px2rem(664, );
|
|
}
|
|
|
|
.cardBox8 {
|
|
left: px2rem(71, );
|
|
top: px2rem(664, );
|
|
}
|
|
|
|
.cardBox9 {
|
|
left: px2rem(71, );
|
|
top: px2rem(414, );
|
|
}
|
|
|
|
.cardBoxBut {
|
|
width: px2rem(188, );
|
|
height: px2rem(74, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(560, );
|
|
z-index: 3;
|
|
}
|
|
|
|
.butAgain {
|
|
width: px2rem(188, );
|
|
height: px2rem(74, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(560, );
|
|
display: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.gonggao {
|
|
width: 100%;
|
|
height: 1.3rem;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12.25rem;
|
|
overflow: hidden;
|
|
|
|
.ul1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
li {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
margin-bottom: px2rem(11, );
|
|
|
|
b {
|
|
color: #FFEAA9;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: #80E6FF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cardBoxText_gift {
|
|
width: px2rem(320, );
|
|
height: px2rem(226, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(432, );
|
|
color: #FEF0C0;
|
|
font-size: px2rem(30, );
|
|
text-align: center;
|
|
}
|
|
|
|
.cardBoxText_gx {
|
|
width: px2rem(320, );
|
|
height: px2rem(226, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(414, );
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(66, );
|
|
display: none;
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: px2rem(16, );
|
|
color: #FFE26D;
|
|
font-size: px2rem(28, );
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
|
|
b {
|
|
color: #FFE26D;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cardBoxText_no {
|
|
width: px2rem(320, );
|
|
height: px2rem(226, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(414, );
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(66, );
|
|
display: none;
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: px2rem(16, );
|
|
color: #fff;
|
|
font-size: px2rem(28, );
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
|
|
b {
|
|
color: #80E6FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cardBoxText {
|
|
width: px2rem(320, );
|
|
height: px2rem(226, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(414, );
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(66, );
|
|
z-index: 3;
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: px2rem(16, );
|
|
color: #fff;
|
|
font-size: px2rem(28, );
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
|
|
b {
|
|
color: #80E6FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.star {
|
|
width: px2rem(336, );
|
|
height: px2rem(290, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(414, );
|
|
|
|
.star_in {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
width: 100%;
|
|
margin-bottom: px2rem(12, );
|
|
color: #D7D9F7;
|
|
font-size: px2rem(18, );
|
|
text-align: center;
|
|
}
|
|
|
|
.rule_pub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99999;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.rule_pub_in {
|
|
width: px2rem(654, );
|
|
height: px2rem(874, );
|
|
background: url(../images/rule.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.close {
|
|
position: absolute;
|
|
width: px2rem(68, );
|
|
height: px2rem(68, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-100, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.winningRecord {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99999;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.winningRecord_in {
|
|
width: px2rem(654, );
|
|
height: px2rem(874, );
|
|
background: url(../images/winningRecord.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: px2rem(32, );
|
|
|
|
div {
|
|
width: 25%;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(28, );
|
|
margin-top: px2rem(164, );
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(3, );
|
|
height: 8rem;
|
|
margin: 0 auto;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
background: none;
|
|
width: 100%;
|
|
height: px2rem(80, );
|
|
line-height: px2rem(80, );
|
|
color: #FFEE9D;
|
|
font-size: px2rem(26, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
|
|
div {
|
|
text-align: center;
|
|
width: 25%;
|
|
}
|
|
|
|
.box {
|
|
line-height: px2rem(80, );
|
|
}
|
|
|
|
.box_acitve {
|
|
line-height: 0.45rem;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.time {
|
|
line-height: 0.4rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: rgba(135, 133, 243, 0.6);
|
|
}
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
width: px2rem(68, );
|
|
height: px2rem(68, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-100, );
|
|
}
|
|
}
|
|
}
|
|
|
|
// 碎片不足弹窗
|
|
.shade-mask-fragmentNum {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #000000, $alpha: 0.6);
|
|
|
|
.shade-content-fragmentNum {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(600);
|
|
height: px2rem(600);
|
|
background: white;
|
|
border-radius: px2rem(24);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.fragmentNum-title {
|
|
font-size: px2rem(36);
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-top: px2rem(38);
|
|
}
|
|
|
|
img {
|
|
width: px2rem(120);
|
|
width: px2rem(120);
|
|
margin-top: px2rem(108);
|
|
}
|
|
|
|
p {
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-top: px2rem(50);
|
|
}
|
|
|
|
.fragmentNum-btn-wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: px2rem(512);
|
|
height: px2rem(76);
|
|
margin-top: px2rem(90);
|
|
|
|
.cancel-btn,
|
|
.confirm-btn {
|
|
width: px2rem(240);
|
|
height: px2rem(76);
|
|
line-height: px2rem(76);
|
|
text-align: center;
|
|
border-radius: px2rem(38);
|
|
font-size: px2rem(28);
|
|
font-weight: 600;
|
|
background-color: #EAE5FC;
|
|
color: #7154EE;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: #735FFE;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
} |