591 lines
15 KiB
SCSS
591 lines
15 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
// height: px2rem(1334);
|
|
background: #fff;
|
|
}
|
|
|
|
.back {
|
|
width: 100%;
|
|
height: px2rem(176);
|
|
background: #fff;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
|
|
.backIcon {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
position: absolute;
|
|
left: px2rem(32);
|
|
top: px2rem(110);
|
|
z-index: 2;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
height: px2rem(44);
|
|
line-height: px2rem(44);
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(110);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #313131;
|
|
font-size: px2rem(36);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.why {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
position: absolute;
|
|
right: px2rem(32);
|
|
top: px2rem(110);
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(686);
|
|
height: px2rem(44);
|
|
line-height: px2rem(44);
|
|
margin: px2rem(198) auto px2rem(50);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
div {
|
|
// margin-right: px2rem(50);
|
|
color: #7B7B7D;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.act {
|
|
color: #FF8C03;
|
|
font-size: px2rem(32);
|
|
}
|
|
}
|
|
|
|
.contant_box {
|
|
background: linear-gradient(180deg, #533CFF 0%, #3DA8FF 100%);
|
|
border-radius: px2rem(32);
|
|
margin: 0 px2rem(32);
|
|
padding: px2rem(26);
|
|
position: relative;
|
|
|
|
.book_top {
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(-50);
|
|
|
|
img {
|
|
width: px2rem(150);
|
|
height: px2rem(134);
|
|
}
|
|
}
|
|
|
|
.Countdown_box {
|
|
margin: px2rem(26) 0;
|
|
|
|
.Countdown {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #FFFFFF;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.day_txt,
|
|
.hour_txt,
|
|
.min_txt,
|
|
.secs_txt {
|
|
background: #FFFFFF;
|
|
border-radius: px2rem(6);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: px2rem(24);
|
|
color: #6152FF;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: px2rem(2) px2rem(4);
|
|
}
|
|
|
|
.Day,
|
|
span {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #FFFFFF;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
}
|
|
|
|
.Level_box {
|
|
background: #FFFFFF;
|
|
border-radius: px2rem(16);
|
|
padding: px2rem(20) px2rem(18);
|
|
|
|
.Host_Level {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #313131;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.progress_box {
|
|
position: relative;
|
|
|
|
/* 进度条样式 */
|
|
.progress-container {
|
|
// width: 100%;
|
|
height: px2rem(34);
|
|
background-color: #F0D2FF;
|
|
overflow: hidden;
|
|
margin: px2rem(10) px2rem(20);
|
|
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background: #C859FF;
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.preLevel {
|
|
background: url(../images/level_bg.png) no-repeat;
|
|
background-size: cover;
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
z-index: 99;
|
|
left: px2rem(-10);
|
|
top: px2rem(-6);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(20);
|
|
color: #313131;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.curLevel {
|
|
background: url(../images/level_bg.png) no-repeat;
|
|
background-size: cover;
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
z-index: 99;
|
|
right: px2rem(-10);
|
|
top: px2rem(-6);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(20);
|
|
color: #313131;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.processNum_box {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 99;
|
|
left: 50%;
|
|
translate: -50%;
|
|
|
|
.processNum {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(24);
|
|
color: #313131;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(34);
|
|
height: px2rem(34);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom_box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.preMaxNum_box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.preMaxNum {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #7B7B7D;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(22);
|
|
height: px2rem(22);
|
|
}
|
|
}
|
|
|
|
.maxNum_box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.maxNum {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #7B7B7D;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(22);
|
|
height: px2rem(22);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rewards_list {
|
|
margin-top: px2rem(170);
|
|
position: relative;
|
|
|
|
.top_info {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: px2rem(-130);
|
|
left: 50%;
|
|
translate: -50%;
|
|
width: 100%;
|
|
z-index: 99;
|
|
|
|
.left {
|
|
flex: 1;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(32);
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
line-height: px2rem(44);
|
|
}
|
|
|
|
.middle {
|
|
img {
|
|
width: px2rem(22);
|
|
height: px2rem(22);
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
|
|
.Extra_Rewards {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(32);
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
line-height: px2rem(44);
|
|
|
|
}
|
|
|
|
.Complete_days,
|
|
.mic_chat {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(22);
|
|
color: #FFFFFF;
|
|
line-height: px2rem(30);
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rewards_box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: px2rem(48);
|
|
|
|
.left_box {
|
|
flex: 1;
|
|
|
|
background: #FFFFFF;
|
|
border-radius: px2rem(24);
|
|
padding: px2rem(30) px2rem(44);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(32);
|
|
color: #313131;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
img {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
margin: 0 px2rem(4);
|
|
}
|
|
|
|
.status_img {
|
|
position: absolute;
|
|
top: px2rem(-20);
|
|
right: px2rem(-16);
|
|
}
|
|
|
|
}
|
|
|
|
.right_box {
|
|
flex: 1;
|
|
background: #000000;
|
|
border-radius: px2rem(24);
|
|
padding: px2rem(30) px2rem(44);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(32);
|
|
color: #FFDE3B;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
img {
|
|
width: px2rem(44);
|
|
height: px2rem(44);
|
|
margin: 0 px2rem(4);
|
|
}
|
|
|
|
.status_img {
|
|
position: absolute;
|
|
top: px2rem(-20);
|
|
right: px2rem(-16);
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.middle_box {
|
|
margin: 0 px2rem(20);
|
|
position: relative;
|
|
|
|
.level {
|
|
background: url(../images/level_bg_big.png) no-repeat;
|
|
background-size: cover;
|
|
width: px2rem(62);
|
|
height: px2rem(62);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(20);
|
|
color: #313131;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 99;
|
|
}
|
|
|
|
/* 进度条样式 */
|
|
.progress_box {
|
|
width: px2rem(12);
|
|
height: px2rem(100);
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 50%;
|
|
translate: -50%;
|
|
top: px2rem(-94);
|
|
|
|
.progress_bar {
|
|
width: 100%;
|
|
background: #C859FF;
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom_fixed_box {
|
|
margin: px2rem(32)px2rem(32) 0;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
.top_box {
|
|
background: #000000;
|
|
border-radius: px2rem(32) px2rem(32) 0px 0px;
|
|
padding: px2rem(14) px2rem(26);
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: px2rem(32);
|
|
color: #FFDE3B;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
position: absolute;
|
|
top: px2rem(-54);
|
|
}
|
|
|
|
.bg_box {
|
|
background: url(../images/ExtraRewardsBg.png);
|
|
background-size: cover;
|
|
height: px2rem(238);
|
|
width: px2rem(686);
|
|
.title {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #FFDE3B;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: px2rem(20) px2rem(18) 0;
|
|
}
|
|
.Days{
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #FFDE3B;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-top: px2rem(6);
|
|
padding:0 px2rem(18);
|
|
}
|
|
.progress_box{
|
|
// width: 100%;
|
|
height: px2rem(10);
|
|
background-color: #FFFFFF;
|
|
overflow: hidden;
|
|
margin: px2rem(10) px2rem(20);
|
|
border-radius: px2rem(502);
|
|
.progress_bar {
|
|
height: 100%;
|
|
background: #FFCF10;
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
}
|
|
}
|
|
.txt_num{
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: px2rem(24);
|
|
color: #FFDE3B;
|
|
line-height: px2rem(34);
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-top: px2rem(10);
|
|
padding:0 px2rem(18);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
|
|
.arabic {
|
|
.contant_box .rewards_list {
|
|
margin-top: px2rem(190);
|
|
}
|
|
|
|
.top_info {
|
|
top: px2rem(-146) !important;
|
|
}
|
|
|
|
.back .backIcon {
|
|
left: auto;
|
|
right: px2rem(32);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.back .why {
|
|
right: auto;
|
|
left: px2rem(32);
|
|
}
|
|
|
|
.box ul li .left {
|
|
float: right;
|
|
}
|
|
|
|
.box ul li .right {
|
|
float: left;
|
|
}
|
|
|
|
.box ul li .right .line .line_in {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
.contant_box .book_top{
|
|
left: 0;
|
|
right:auto
|
|
}
|
|
}
|
|
|
|
.Turkiye {
|
|
.contant_box .rewards_list {
|
|
margin-top: px2rem(190);
|
|
}
|
|
|
|
.top_info {
|
|
top: px2rem(-146) !important;
|
|
}
|
|
}
|
|
|
|
.brazil {
|
|
.contant_box .rewards_list .top_info .middle img {
|
|
margin-top: px2rem(40);
|
|
}
|
|
|
|
.contant_box .rewards_list {
|
|
margin-top: px2rem(210);
|
|
}
|
|
|
|
.top_info {
|
|
top: px2rem(-188) !important;
|
|
}
|
|
} |