1179 lines
29 KiB
SCSS
1179 lines
29 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
background: #260006;
|
|
}
|
|
|
|
.back {
|
|
width: 100%;
|
|
height: px2rem(44);
|
|
line-height: px2rem(44);
|
|
position: fixed;
|
|
left: 0;
|
|
top: px2rem(65);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(38);
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
|
|
img {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
position: absolute;
|
|
left: px2rem(18);
|
|
top: px2rem(0);
|
|
}
|
|
}
|
|
|
|
.header {
|
|
width: px2rem(750);
|
|
height: px2rem(1210);
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
|
|
.rule_icon {
|
|
width: px2rem(140);
|
|
height: px2rem(50);
|
|
line-height: px2rem(45);
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(514);
|
|
background: url(../images/rule_iconBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #FDF565;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.time {
|
|
width: 92%;
|
|
height: px2rem(122);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(50);
|
|
margin: px2rem(871) auto 0;
|
|
|
|
div {
|
|
float: left;
|
|
width: px2rem(110);
|
|
height: px2rem(110);
|
|
background: url(../images/timeBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(18);
|
|
// line-height: px2rem(122);
|
|
|
|
b {
|
|
color: #FFF783;
|
|
font-size: px2rem(44);
|
|
font-weight: 600;
|
|
font-family: PingFang SC;
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0.25rem;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
font-family: PingFang SC;
|
|
}
|
|
}
|
|
|
|
.day {
|
|
background: url(../images/timeBg.png) no-repeat;
|
|
// background: url(../images/timeBgAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: px2rem(47);
|
|
}
|
|
|
|
.colon {
|
|
width: px2rem(16);
|
|
height: px2rem(40);
|
|
background: url(../images/icon1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 px2rem(17);
|
|
margin-top: px2rem(41);
|
|
}
|
|
}
|
|
}
|
|
|
|
.myRecharge {
|
|
width: px2rem(750);
|
|
height: px2rem(540);
|
|
background: url(../images/myRechargeBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: px2rem(-120) auto px2rem(0);
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
height: px2rem(134);
|
|
line-height: px2rem(124);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.3rem;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(34);
|
|
font-weight: 600;
|
|
background: url(../images/title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
height: 1.2rem;
|
|
line-height: 1.2rem;
|
|
position: absolute;
|
|
text-align: center;
|
|
left: 0;
|
|
top: px2rem(160);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.avatar {
|
|
width: px2rem(88);
|
|
height: px2rem(90);
|
|
border-radius: 50%;
|
|
border: px2rem(4) solid #FFF783;
|
|
margin: 0 px2rem(20);
|
|
}
|
|
|
|
b {
|
|
color: #FFF783;
|
|
font-size: px2rem(86);
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
}
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(50);
|
|
height: px2rem(50);
|
|
margin: 0 px2rem(10) 0;
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
text-align: center;
|
|
color: #292601;
|
|
font-size: px2rem(32);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(276);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.recharge100 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
// background: url(../images/bgTop.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
height: px2rem(134);
|
|
line-height: px2rem(124);
|
|
background: url(../images/title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-16);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 2.7rem;
|
|
// background: url(../images/bgBottom.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
text-align: center;
|
|
color: #292601;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #292601;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
// background: url(../images/bgCentent.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
margin-bottom: -0.05rem;
|
|
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(680);
|
|
height: px2rem(620);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge100.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.8rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.recharge300 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
height: px2rem(134);
|
|
line-height: px2rem(124);
|
|
background: url(../images/title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-16);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 2.7rem;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
text-align: center;
|
|
color: #292601;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #292601;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
margin-bottom: -0.05rem;
|
|
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(680);
|
|
height: px2rem(620);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge300.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.87rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: px2rem(27);
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharge500 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
height: px2rem(134);
|
|
line-height: px2rem(124);
|
|
background: url(../images/title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-16);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 2.7rem;
|
|
margin-top: px2rem(40);
|
|
position: relative;
|
|
|
|
.but {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
text-align: center;
|
|
color: #292601;
|
|
font-size: px2rem(32);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-10);
|
|
color: #292601;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
margin-bottom: -0.05rem;
|
|
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(680);
|
|
height: px2rem(620);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge500.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: px2rem(27);
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharge1000 {
|
|
width: px2rem(750);
|
|
margin: px2rem(53) auto 0;
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding-bottom: px2rem(20);
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: px2rem(150);
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(550);
|
|
height: px2rem(134);
|
|
line-height: px2rem(124);
|
|
background: url(../images/title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(40);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-16);
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
// height: 2.7rem;
|
|
position: relative;
|
|
margin-top: px2rem(40);
|
|
|
|
.but {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
text-align: center;
|
|
color: #292601;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-200);
|
|
background: url(../images/but.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: px2rem(20);
|
|
}
|
|
.act {
|
|
width: px2rem(435);
|
|
height: px2rem(144);
|
|
line-height: px2rem(134);
|
|
background: url(../images/myRechargeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-200);
|
|
color: #292601;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
.topTitle {
|
|
width: 100%;
|
|
height: px2rem(30);
|
|
line-height: px2rem(30);
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: px2rem(220);
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(207);
|
|
height: px2rem(17);
|
|
margin-top: 0.15rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
b {
|
|
display: inline-block;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
margin: 0 px2rem(11);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 78%;
|
|
height: px2rem(200);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(64) auto 0;
|
|
padding-bottom: px2rem(100);
|
|
|
|
div {
|
|
width: px2rem(166);
|
|
height: px2rem(160);
|
|
position: relative;
|
|
|
|
.tx {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(210);
|
|
height: px2rem(210);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.25rem;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
margin-top: px2rem(6);
|
|
|
|
.tx {
|
|
border: px2rem(2) solid #BEC6CD;
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(194);
|
|
height: px2rem(194);
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
.tx {
|
|
width: px2rem(166);
|
|
height: px2rem(170);
|
|
border: px2rem(2) solid #FFDB00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
margin-bottom: -0.05rem;
|
|
|
|
.rewardImg {
|
|
display: block;
|
|
width: px2rem(680);
|
|
height: px2rem(732);
|
|
margin: 0 auto 0;
|
|
background: url(../images/recharge1000.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.ts {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
position: absolute;
|
|
right: 1.1rem;
|
|
top: 0.2rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.zj {
|
|
width: 3.75rem;
|
|
height: 7.37rem;
|
|
position: absolute;
|
|
left: 1.1rem;
|
|
top: 0.95rem;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
.why {
|
|
width: px2rem(50);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
right: px2rem(60);
|
|
top: 6.5rem;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.pub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.pub_in {
|
|
width: px2rem(630);
|
|
height: px2rem(660);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/Recharge_Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.close {
|
|
width: px2rem(68);
|
|
height: px2rem(68);
|
|
position: absolute;
|
|
right: px2rem(23);
|
|
top: px2rem(-80);
|
|
}
|
|
|
|
.title {
|
|
width: px2rem(430);
|
|
height: px2rem(108);
|
|
line-height: px2rem(98);
|
|
text-align: center;
|
|
color: #FFF783;
|
|
font-size: px2rem(30);
|
|
font-weight: 600;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
top: px2rem(-20);
|
|
}
|
|
|
|
.centent {
|
|
width: 100%;
|
|
height: px2rem(460);
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(10);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(90);
|
|
margin-top: px2rem(100);
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
p {
|
|
color: #FFF784;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
// line-height: 0.45rem;
|
|
margin-bottom: 0.2rem;
|
|
width: 100%;
|
|
line-height: px2rem(38);
|
|
|
|
}
|
|
}
|
|
|
|
.myRechargeText {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-content: flex-start;
|
|
|
|
p {
|
|
// padding-bottom: 0.3rem;
|
|
}
|
|
}
|
|
|
|
.myRechargeTextWhy {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-content: flex-start;
|
|
|
|
p {
|
|
// padding-bottom: 2.3rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.disclaimer {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: px2rem(30);
|
|
margin-bottom: px2rem(42);
|
|
color: #FFF784;
|
|
font-size: px2rem(26);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.video {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
video {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 65%;
|
|
}
|
|
|
|
.close {
|
|
width: px2rem(68);
|
|
height: px2rem(68);
|
|
position: absolute;
|
|
top: 10%;
|
|
right: px2rem(70);
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
.arabic {
|
|
.back img {
|
|
left: auto;
|
|
right: 0.24rem;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.header {
|
|
background: url(../images/header-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.header .time .day,
|
|
.header .time .hour,
|
|
.header .time .colon,
|
|
.header .time .min,
|
|
.header .time .sec {
|
|
float: right;
|
|
}
|
|
|
|
.header .time .day {
|
|
margin-right: 0;
|
|
margin-left: 0.62667rem;
|
|
}
|
|
|
|
.recharge10 .content .rewardImg {
|
|
background: url(../images/recharge10-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge100 .content .rewardImg {
|
|
background: url(../images/recharge100-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge300 .content .rewardImg {
|
|
background: url(../images/recharge300-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge500 .content .rewardImg {
|
|
background: url(../images/recharge500-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge1000 .content .rewardImg {
|
|
background: url(../images/recharge1000-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge3000 .content .rewardImg {
|
|
background: url(../images/recharge3000-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge5000 .content .rewardImg {
|
|
background: url(../images/recharge5000-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge8000 .content .rewardImg {
|
|
background: url(../images/recharge8000-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge10000 .content .rewardImg {
|
|
background: url(../images/recharge10000-ar.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharges .content .topTitle {
|
|
direction: ltr;
|
|
}
|
|
}
|
|
.Turkiye{
|
|
.header {
|
|
background: url(../images/header-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.recharge100 .content .rewardImg {
|
|
background: url(../images/recharge100-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge300 .content .rewardImg {
|
|
background: url(../images/recharge300-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge500 .content .rewardImg {
|
|
background: url(../images/recharge500-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.recharge1000 .content .rewardImg {
|
|
background: url(../images/recharge1000-tr.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
} |