1413 lines
30 KiB
SCSS
1413 lines
30 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
@import '../../../common/css/flex.scss';
|
|
|
|
.mask {
|
|
z-index: 120;
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
height: 60px;
|
|
align-items: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
justify-content: space-between;
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
display: none;
|
|
.logo {
|
|
width: 40px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.slogan {
|
|
color: #fff;
|
|
}
|
|
}
|
|
#download {
|
|
border: 1px solid #fff;
|
|
color: #fff;
|
|
width: 80px;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
line-height: 30px;
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.img-item {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.max {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
background-color: #180734;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #180734;
|
|
z-index: -1;
|
|
}
|
|
|
|
.topNav1 {
|
|
@include flex();
|
|
@include flex-justify-start;
|
|
@include flex-align-center;
|
|
width: 100%;
|
|
position: relative;
|
|
height:1.453333rem;
|
|
border-bottom: 1px solid #301D4E;
|
|
|
|
.help {
|
|
width:.506667rem;
|
|
height:.506667rem;
|
|
margin-left:.56rem;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.feedback{
|
|
width:.986667rem;
|
|
height:.533333rem;
|
|
margin:0 1.04rem 0 .413333rem;
|
|
img{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
li {
|
|
margin: 0 .266667rem;
|
|
height: 100%;
|
|
line-height:1.453333rem;
|
|
position: relative;
|
|
color: #8B8399;
|
|
font-size:.373333rem;
|
|
|
|
&.active {
|
|
color:#FFFFFF;
|
|
font-size:.426667rem;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: px2rem(20);
|
|
height: px2rem(5);
|
|
background-color: #FFFFFF;
|
|
opacity: .6;
|
|
border-radius:.666667rem;
|
|
position: absolute;
|
|
bottom:.2rem;
|
|
left: 50%;
|
|
margin-left:-0.133333rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.topNav2 {
|
|
@include flex();
|
|
@include flex-justify-start;
|
|
@include flex-align-center;
|
|
display:none;
|
|
width: 100%;
|
|
position: relative;
|
|
height:1.453333rem;
|
|
border-bottom: 1px solid rgba($color: #fff, $alpha: 0.1);
|
|
|
|
.help {
|
|
width:.506667rem;
|
|
height:.506667rem;
|
|
position:absolute;
|
|
top:.466667rem;
|
|
left:.413333rem;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
ul {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
li {
|
|
margin: 0 .266667rem;
|
|
height: 100%;
|
|
line-height: px2rem(109);
|
|
position: relative;
|
|
color: #8B8399;
|
|
font-size:.373333rem;
|
|
|
|
&.active {
|
|
color: white;
|
|
font-size:.426667rem;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width:.266667rem;
|
|
height:.066667rem;
|
|
background-color: white;
|
|
opacity: .6;
|
|
border-radius: 25px;
|
|
position: absolute;
|
|
bottom:.2rem;
|
|
left: 50%;
|
|
margin-left:-0.133333rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.scrollMask {
|
|
width: px2rem(500);
|
|
height: 30px;
|
|
margin: 0 auto;
|
|
margin-top: px2rem(10);
|
|
overflow: hidden;
|
|
position: relative;
|
|
.container {
|
|
width: 100%;
|
|
height: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: none;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
color: white;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
|
|
span {
|
|
color: #ffec6f;
|
|
margin: 0 px2rem(5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rank-btn {
|
|
width:1.2rem;
|
|
height:1.04rem;
|
|
position: absolute;
|
|
right:.2rem;
|
|
top:2.026667rem;
|
|
z-index: 200;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.record-btn {
|
|
width:1.2rem;
|
|
height:1.04rem;
|
|
position: absolute;
|
|
right:.2rem;
|
|
top:3.653333rem;
|
|
z-index: 200;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.canvas {
|
|
width: 100%;
|
|
height: px2rem(550);
|
|
margin-top: px2rem(30);
|
|
position: relative;
|
|
|
|
.canvas-container {
|
|
width: 200%;
|
|
height: 200%;
|
|
transform: scale(.5);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
margin-left: -50%;
|
|
margin-top: px2rem(-275);
|
|
|
|
.turntable {
|
|
width: px2rem(1028);
|
|
height: px2rem(1028);
|
|
margin: 0 auto;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: px2rem(-514);
|
|
margin-top: px2rem(-514);
|
|
|
|
.container1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
&.first {
|
|
background: url('../img/carnival/turntable.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
&.second {
|
|
background: url('../img/carnival/turntable-2.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
}
|
|
#table {
|
|
position: absolute;
|
|
width: px2rem(856);
|
|
height: px2rem(856);
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: px2rem(-428);
|
|
margin-top: px2rem(-428);
|
|
z-index: 4;
|
|
}
|
|
#table2 {
|
|
position: absolute;
|
|
width: px2rem(856);
|
|
height: px2rem(856);
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: px2rem(-428);
|
|
margin-top: px2rem(-428);
|
|
z-index: 4;
|
|
display: none;
|
|
}
|
|
|
|
.pointer {
|
|
width: px2rem(120);
|
|
height: px2rem(184);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%,0);
|
|
top: px2rem(-40);
|
|
// margin-left: px2rem(-63);
|
|
z-index: 10;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: px2rem(352);
|
|
height: px2rem(352);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin: 0;
|
|
margin-left: px2rem(-176);
|
|
margin-top: px2rem(-176);
|
|
z-index: 130;
|
|
border: none;
|
|
outline: none;
|
|
background: none;
|
|
padding: 0;
|
|
img {
|
|
width: px2rem(352);
|
|
height: px2rem(352);
|
|
}
|
|
&:disabled{
|
|
color: rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: px2rem(10);
|
|
|
|
span {
|
|
font-size: 13px;
|
|
color: #CECCD1;
|
|
|
|
small {
|
|
color: #ffec6f;
|
|
margin: 0 px2rem(10)
|
|
}
|
|
|
|
&:last-child {
|
|
width: px2rem(111);
|
|
height: px2rem(44);
|
|
margin-left: px2rem(20);
|
|
|
|
a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.turnNum {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
|
|
width: 100%;
|
|
margin-top: px2rem(35);
|
|
margin-bottom: px2rem(50);
|
|
|
|
li {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-start;
|
|
@include flexv();
|
|
|
|
width: px2rem(225);
|
|
height: px2rem(90);
|
|
border-radius: 20px 60px 20px 20px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: 0 px2rem(8);
|
|
|
|
p {
|
|
font-size: 13px;
|
|
color: white;
|
|
color: #CFCDD3;
|
|
margin-left: px2rem(20);
|
|
z-index: 2;
|
|
|
|
&:last-child {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: white;
|
|
border-radius: 20px 60px 20px 20px;
|
|
opacity: .08;
|
|
z-index: 0;
|
|
}
|
|
|
|
&.active {
|
|
p {
|
|
color: #fff;
|
|
}
|
|
&.ball {
|
|
&::before {
|
|
opacity: 1;
|
|
background: linear-gradient(223deg, #FFB99E, #FC90CD);
|
|
box-shadow: 0px 11px 10px 0px rgba(255, 242, 173, 0.36), 0px -1px 5px 0px rgba(255, 250, 171, 0.88), 0px -6px 10px 0px #000000;
|
|
}
|
|
}
|
|
&.joy {
|
|
&::before {
|
|
background: linear-gradient(223deg, #FF96D1, #D172FC);
|
|
box-shadow: 0px 11px 10px 0px rgba(255, 242, 173, 0.36), 0px -1px 5px 0px rgba(255, 250, 171, 0.88), 0px -6px 10px 0px #000000;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.experience {
|
|
width: auto;
|
|
height: auto;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: px2rem(200);
|
|
display: none;
|
|
|
|
.giftBox {
|
|
width: px2rem(100);
|
|
height: px2rem(100);
|
|
position: relative;
|
|
// border: 1px solid white;
|
|
opacity: 1;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
&.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
left: px2rem(90);
|
|
|
|
&.crit {
|
|
width: px2rem(95);
|
|
height: px2rem(40);
|
|
text-align: right;
|
|
background: url('../img/carnival/exp-2.png') no-repeat 0 0 / 100% 100%;
|
|
line-height: px2rem(40);
|
|
top: px2rem(5);
|
|
z-index: 1;
|
|
font-size: 12px;
|
|
padding-right: px2rem(5);
|
|
color: #2B1C03;
|
|
}
|
|
&.times {
|
|
width: px2rem(90);
|
|
height: px2rem(40);
|
|
line-height: px2rem(40);
|
|
text-align: right;
|
|
padding-right: px2rem(10);
|
|
background: url('../img/carnival/exp-1.png') no-repeat 0 0 / 100% 100%;
|
|
z-index: 1;
|
|
top: px2rem(55);
|
|
font-size: 12px;
|
|
color: #FFF044;
|
|
}
|
|
}
|
|
}
|
|
|
|
.exp-container {
|
|
width: px2rem(26);
|
|
height: px2rem(366);
|
|
margin-left: px2rem(18);
|
|
margin-top: px2rem(15);
|
|
border-radius: 25px;
|
|
// border: 4px solid #2C0767;
|
|
&.exp-container1 {
|
|
background: url('../img/carnival/bg1.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
&.exp-container2 {
|
|
background: url('../img/carnival/bg2.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.strip {
|
|
width: px2rem(26);
|
|
height: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
&.exp-1 {
|
|
background: url('../img/carnival/exp1.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
&.exp-2 {
|
|
background: url('../img/carnival/exp2.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.exp-num {
|
|
margin-left: px2rem(5);
|
|
color: #fff044;
|
|
font-size: 14px;
|
|
margin-top: px2rem(10);
|
|
}
|
|
|
|
.tips {
|
|
font-size: 13px;
|
|
color: white;
|
|
|
|
span {
|
|
display: inline-block;
|
|
&:last-child {
|
|
width: px2rem(25);
|
|
height: px2rem(25);
|
|
margin-left: px2rem(8);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-mask {
|
|
width: px2rem(616);
|
|
height: px2rem(429);
|
|
border-radius: .32rem;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform:translate(-50%,-50%);
|
|
z-index: 10003;
|
|
// background-color:#FFFFFF;
|
|
background: url('../img/carnival/pop-bg.png') no-repeat 0 0 / 100% 100%;
|
|
display: none;
|
|
|
|
.title {
|
|
width: 100%;
|
|
margin: px2rem(62) 0;
|
|
text-align: center;
|
|
font-size:.48rem;
|
|
color: #7E85FF;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tips {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size:.373333rem;
|
|
color: #5F82A3;
|
|
margin-top: px2rem(70);
|
|
}
|
|
|
|
.btn {
|
|
width: px2rem(334);
|
|
height: px2rem(108);
|
|
background: url('../img/index/btn.png') no-repeat 0 0 / 100% 100%;
|
|
// background: linear-gradient(0deg, #FFE34F, #F19825);
|
|
// border: px2rem(2) solid rgba(255, 255, 255, 0.7);
|
|
// box-shadow:0px 6px 12px 0px rgba(255,255,255,1), 0px -12px 46px 0px rgba(255,255,255,1), 0px 4px 18px 0px rgba(255,255,255,0.45);
|
|
// border-radius:.506667rem;
|
|
font-size: px2rem(36);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
margin: .8rem auto 0;
|
|
padding-bottom: px2rem(10);
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.gather-mask {
|
|
width: px2rem(616);
|
|
height: auto;
|
|
position: fixed;
|
|
top: px2rem(250);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 8px;
|
|
// background-color: white;
|
|
background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
|
|
z-index: 10003;
|
|
display: none;
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-size: px2rem(40);
|
|
font-weight: bold;
|
|
color: #7E85FF;
|
|
text-align: center;
|
|
margin-top: px2rem(50);
|
|
}
|
|
.tips {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #5F82A3;
|
|
font-size: 13px;
|
|
opacity: .8;
|
|
margin-top: px2rem(16);
|
|
}
|
|
|
|
ul {
|
|
@include flex();
|
|
@include flex-justify-start;
|
|
@include flex-align-center;
|
|
@include flex-wrap();
|
|
|
|
width: px2rem(444);
|
|
height: auto;
|
|
margin: 0 auto;
|
|
margin-top: px2rem(39);
|
|
|
|
li {
|
|
width: px2rem(92);
|
|
margin: px2rem(8);
|
|
p {
|
|
&:first-child {
|
|
width: 100%;
|
|
height: px2rem(92);
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&:last-child {
|
|
font-size: 12px;
|
|
color: #999;
|
|
text-align: center;
|
|
margin-top: px2rem(8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: px2rem(334);
|
|
height: px2rem(108);
|
|
background: url('../img/index/btn.png') no-repeat 0 0 / 100% 100%;
|
|
// background: linear-gradient(0deg, #FFE34F, #F19825);
|
|
// border: px2rem(2) solid rgba(255, 255, 255, 0.7);
|
|
// box-shadow:0px 6px 12px 0px rgba(255,255,255,1), 0px -12px 46px 0px rgba(255,255,255,1), 0px 4px 18px 0px rgba(255,255,255,0.45);
|
|
// border-radius:.506667rem;
|
|
font-size: px2rem(36);
|
|
font-weight: bold;
|
|
color: #fff;
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
margin:.52rem auto;
|
|
padding-bottom: px2rem(10);
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.rule-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: -1000px;
|
|
z-index: 20000;
|
|
background-color: #180734;
|
|
|
|
.nav {
|
|
width: 100%;
|
|
height: 50px;
|
|
border-bottom: 1px solid #37234f;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.back {
|
|
width: px2rem(30);
|
|
height: px2rem(28);
|
|
margin: px2rem(40);
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
color: white;
|
|
opacity: .7;
|
|
width: px2rem(150);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: 50%;
|
|
text-align: center;
|
|
line-height: px2rem(52);
|
|
left: 50%;
|
|
margin-left: px2rem(-75);
|
|
margin-top: px2rem(-26);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 80%;
|
|
height: 78%;
|
|
margin: 0 auto;
|
|
margin-top: 8%;
|
|
overflow: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
}
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rank-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: -1000px;
|
|
// top: 0;
|
|
z-index: 20000;
|
|
background-color: #180734;
|
|
|
|
.nav {
|
|
width: 100%;
|
|
height: px2rem(109);
|
|
border-bottom: 1px solid #37234F;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.back {
|
|
width: px2rem(30);
|
|
height: px2rem(28);
|
|
margin: px2rem(40);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
color: white;
|
|
opacity: .7;
|
|
width: px2rem(150);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: 50%;
|
|
text-align: center;
|
|
line-height: px2rem(52);
|
|
left: 50%;
|
|
margin-left: px2rem(-75);
|
|
margin-top: px2rem(-26);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 80%;
|
|
margin: 0 auto;
|
|
margin-top: px2rem(30);
|
|
overflow: auto;
|
|
|
|
.tab {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
|
|
width: px2rem(300);
|
|
height: px2rem(40);
|
|
margin: 0 auto;
|
|
|
|
li {
|
|
width: 50%;
|
|
height: 100%;
|
|
position: relative;
|
|
font-size: 14px;
|
|
color: white;
|
|
opacity: .7;
|
|
text-align: center;
|
|
|
|
&.active {
|
|
font-size: 16px;
|
|
opacity: 1;
|
|
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: px2rem(14);
|
|
height: px2rem(6);
|
|
background-color: white;
|
|
opacity: .7;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: px2rem(-18);
|
|
margin-left: px2rem(-8);
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
|
|
width: 100%;
|
|
margin-top: px2rem(40);
|
|
|
|
p {
|
|
padding: 5px 15px;
|
|
font-size: 12px;
|
|
background-color: #2B1B48;
|
|
color: #CFCFF4;
|
|
border-radius: 25px;
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.rank-yesterday-box {
|
|
margin-top: px2rem(20);
|
|
padding: 0 px2rem(35) 0 px2rem(45);
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(28);
|
|
display: none;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
.rank-title {
|
|
opacity: .5;
|
|
&.rank-title-today {
|
|
margin-top: px2rem(40);
|
|
}
|
|
}
|
|
.remark {
|
|
margin-top: px2rem(15);
|
|
text-align: left;
|
|
font-size: px2rem(28);
|
|
color: #808080;
|
|
}
|
|
.rank-box {
|
|
@include flex;
|
|
@include flex-justify-between;
|
|
.rank-item {
|
|
padding-top: px2rem(50);
|
|
flex: 1;
|
|
.rank-ava {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
width: px2rem(138);
|
|
height: px2rem(138);
|
|
border-radius: 50%;
|
|
.img-item {
|
|
width: px2rem(138);
|
|
height: px2rem(138);
|
|
border-radius: 50%;
|
|
}
|
|
&::after {
|
|
content: ' ';
|
|
left: 50%;
|
|
top: px2rem(-38);
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
background: url() no-repeat 0 0 / 100% 100%;
|
|
}
|
|
}
|
|
.rank-nick {
|
|
margin: px2rem(30) auto 0;
|
|
width: px2rem(160);
|
|
}
|
|
.rank-desc {
|
|
margin-top: px2rem(10);
|
|
font-size: px2rem(26);
|
|
font-weight: 400;
|
|
color: #FFC600;
|
|
white-space: nowrap;
|
|
}
|
|
&.rank-item0 {
|
|
.rank-ava {
|
|
margin-top: px2rem(10);
|
|
&::after {
|
|
width: px2rem(190);
|
|
height: px2rem(190);
|
|
background-image: url('../img/carnival/no0.png');
|
|
}
|
|
}
|
|
}
|
|
&.rank-item1 {
|
|
.rank-ava {
|
|
margin-top: px2rem(95);
|
|
width: px2rem(125);
|
|
height: px2rem(125);
|
|
.img-item {
|
|
width: px2rem(125);
|
|
height: px2rem(125);
|
|
}
|
|
&::after {
|
|
top: px2rem(-33);
|
|
width: px2rem(170);
|
|
height: px2rem(170);
|
|
background-image: url('../img/carnival/no1.png');
|
|
}
|
|
}
|
|
}
|
|
&.rank-item2 {
|
|
.rank-ava {
|
|
margin-top: px2rem(125);
|
|
width: px2rem(110);
|
|
height: px2rem(110);
|
|
.img-item {
|
|
width: px2rem(110);
|
|
height: px2rem(110);
|
|
}
|
|
&::after {
|
|
top: px2rem(-30);
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
background-image: url('../img/carnival/no2.png');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rank-container {
|
|
width: 100%;
|
|
height: 65%;
|
|
margin-top: px2rem(15);
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
display: none;
|
|
|
|
&:-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
@include flex();
|
|
@include flex-justify-start;
|
|
@include flex-align-center;
|
|
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
position: relative;
|
|
|
|
&:last-child {
|
|
margin-bottom: px2rem(30);
|
|
}
|
|
|
|
p {
|
|
&:first-child {
|
|
width: px2rem(60);
|
|
height: px2rem(60);
|
|
font-size: 20px;
|
|
color: #DEDCE0;
|
|
text-align: center;
|
|
line-height: px2rem(60);
|
|
margin-left: px2rem(27);
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&.avatar {
|
|
width: px2rem(90);
|
|
height: px2rem(90);
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-left: px2rem(29);
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&.info {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-start;
|
|
@include flexv();
|
|
|
|
margin-left: px2rem(16);
|
|
width: auto;
|
|
height: 100%;
|
|
span {
|
|
display: block;
|
|
width: auto;
|
|
color: white;
|
|
font-size: 15px;
|
|
margin-top: px2rem(5);
|
|
&:last-child {
|
|
opacity: .7;
|
|
font-size: 13px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.score {
|
|
font-size: 16px;
|
|
height: 100%;
|
|
width: auto;
|
|
color: #E1AD0D;
|
|
position: absolute;
|
|
right: px2rem(48);
|
|
top: 0;
|
|
text-align: right;
|
|
|
|
span {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-end;
|
|
@include flexv();
|
|
small {
|
|
font-size: 12px;
|
|
|
|
&:first-child {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
&.align-center {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-center;
|
|
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mine {
|
|
@include flex();
|
|
@include flex-justify-start;
|
|
@include flex-align-center;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
background-color: #2C1749;
|
|
animation: mine_show linear .5s 1s forwards;
|
|
opacity: 0;
|
|
|
|
p {
|
|
&.rank-num {
|
|
width: px2rem(70);
|
|
font-size: 20px;
|
|
color: white;
|
|
margin-left: px2rem(23);
|
|
text-align: center;
|
|
|
|
&.not-up {
|
|
width: px2rem(90);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&.avatar {
|
|
width: px2rem(90);
|
|
height: px2rem(90);
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-left: px2rem(22);
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
&.info {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-start;
|
|
@include flexv();
|
|
|
|
margin-left: px2rem(16);
|
|
width: auto;
|
|
|
|
span {
|
|
font-size: 15px;
|
|
color: white;
|
|
opacity: .8;
|
|
|
|
&:last-child {
|
|
font-size: 12px;
|
|
margin-left: 0;
|
|
width: auto;
|
|
|
|
small {
|
|
opacity: .8;
|
|
&:first-child {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.rank-info {
|
|
position: absolute;
|
|
right: px2rem(48);
|
|
height: px2rem(70);
|
|
top: 50%;
|
|
margin-top: px2rem(-35);
|
|
|
|
span {
|
|
font-size: 16px;
|
|
color: #E0AD12;
|
|
display: block;
|
|
text-align: right;
|
|
|
|
&:last-child {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes mine_show {
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.record-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #180734;
|
|
top: -1000px;
|
|
z-index: 2000;
|
|
|
|
.nav {
|
|
width: 100%;
|
|
height: px2rem(109);
|
|
border-bottom: 1px solid #37234F;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.back {
|
|
width: px2rem(30);
|
|
height: px2rem(28);
|
|
margin: px2rem(40);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
color: white;
|
|
opacity: .7;
|
|
width: px2rem(150);
|
|
height: px2rem(52);
|
|
position: absolute;
|
|
top: 50%;
|
|
text-align: center;
|
|
line-height: px2rem(52);
|
|
left: 50%;
|
|
margin-left: px2rem(-75);
|
|
margin-top: px2rem(-26);
|
|
}
|
|
}
|
|
.tab {
|
|
@include flex();
|
|
@include flex-justify-between;
|
|
@include flex-align-center;
|
|
|
|
width: px2rem(231);
|
|
height: px2rem(46);
|
|
margin: 0 auto;
|
|
margin-top: px2rem(20);
|
|
|
|
li {
|
|
height: 100%;
|
|
width: auto;
|
|
position: relative;
|
|
|
|
p {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
opacity: .7;
|
|
}
|
|
|
|
&.active {
|
|
p {
|
|
opacity: 1;
|
|
font-size: 16px;
|
|
&:last-child {
|
|
width: px2rem(14);
|
|
height: px2rem(6);
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: px2rem(-7);
|
|
bottom: px2rem(-8);
|
|
background-color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
width: 85%;
|
|
height: 60%;
|
|
margin: 0 auto;
|
|
margin-top: px2rem(40);
|
|
overflow: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.record-container {
|
|
width: 100%;
|
|
height: auto;
|
|
display: none;
|
|
li {
|
|
@include flex();
|
|
@include flex-justify-start;
|
|
@include flex-align-center;
|
|
|
|
width: 100%;
|
|
height: px2rem(120);
|
|
position: relative;
|
|
|
|
p {
|
|
&:first-child {
|
|
width: px2rem(92);
|
|
height: px2rem(92);
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
margin-left: px2rem(15);
|
|
height: 100%;
|
|
line-height: px2rem(120);
|
|
font-size: 15px;
|
|
opacity: .8;
|
|
color: white;
|
|
}
|
|
&:last-child {
|
|
position: absolute;
|
|
right: 0;
|
|
height: 100%;
|
|
width: auto;
|
|
|
|
span {
|
|
@include flex();
|
|
@include flex-justify-center;
|
|
@include flex-align-end;
|
|
@include flexv();
|
|
|
|
// display: block;
|
|
// text-align: right;
|
|
font-size: 12px;
|
|
color: white;
|
|
opacity: .8;
|
|
height: 100%;
|
|
|
|
small {
|
|
display: block;
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: white;
|
|
opacity: .8;
|
|
}
|
|
|
|
&.num {
|
|
font-size: 15px;
|
|
color: #FFC600;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
color: white;
|
|
opacity: .8;
|
|
font-size: 15px;
|
|
display: none;
|
|
}
|
|
|
|
.tips {
|
|
width: px2rem(390);
|
|
height: px2rem(52);
|
|
border-radius: 25px;
|
|
text-align: center;
|
|
line-height: px2rem(52);
|
|
background-color: #2D1845;
|
|
color: white;
|
|
font-size: 12px;
|
|
margin: 0 auto;
|
|
margin-top: px2rem(30);
|
|
}
|
|
}
|
|
|
|
.shade {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: black;
|
|
opacity: .7;
|
|
z-index: 10000;
|
|
display: none;
|
|
}
|
|
|
|
.exp-toast {
|
|
width: px2rem(400);
|
|
height: px2rem(175);
|
|
color: white;
|
|
font-size: 12px;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: px2rem(-230);
|
|
margin-top: px2rem(-60);
|
|
text-align: center;
|
|
line-height: px2rem(60);
|
|
padding: 5px 20px;
|
|
border-radius: 5px;
|
|
z-index: 10000;
|
|
display: none;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: black;
|
|
opacity: .6;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toast {
|
|
width: px2rem(600);
|
|
height: px2rem(80);
|
|
line-height: px2rem(80);
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 12px;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: px2rem(-300);
|
|
margin-top: px2rem(-40);
|
|
background-color: black;
|
|
border-radius: 5px;
|
|
display: none;
|
|
z-index: 1002;
|
|
}
|