561 lines
12 KiB
CSS
561 lines
12 KiB
CSS
|
@font-face {
|
||
|
|
font-family: 'pingfang';
|
||
|
|
src: url("../fonts/PingFangSCRegular.ttf");
|
||
|
|
src: url("../fonts/PingFangSCRegular.ttf") format("woff"), url("../fonts/PingFangSCRegular.ttf") format("truetype"), url("../fonts/PingFangSCRegular.ttf") format("svg");
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
background: url("../images/box.png");
|
||
|
|
background-size: 100%;
|
||
|
|
font-family: 'pingfang';
|
||
|
|
}
|
||
|
|
|
||
|
|
.max {
|
||
|
|
width: 10rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .act-detail {
|
||
|
|
position: absolute;
|
||
|
|
top: 0.77333rem;
|
||
|
|
right: 0;
|
||
|
|
width: 2.05333rem;
|
||
|
|
height: 0.77333rem;
|
||
|
|
background: url("../images/act-detail.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
z-index: 1111;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weektop {
|
||
|
|
width: 100%;
|
||
|
|
height: 11.2rem;
|
||
|
|
background: url("../images/topbg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weektop .tab-week {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 9.01333rem;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weektop .tab-week .charm-rank,
|
||
|
|
.max .weektop .tab-week .powerful {
|
||
|
|
width: 4.04rem;
|
||
|
|
height: 1.24rem;
|
||
|
|
background: url("../images/charm-rank.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
transition: all .2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weektop .tab-week .charm-rank.active,
|
||
|
|
.max .weektop .tab-week .powerful.active {
|
||
|
|
transform: scale(1.107);
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weektop .tab-week .powerful {
|
||
|
|
background: url("../images/powerful.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin-left: -0.21333rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .apple {
|
||
|
|
color: #fff;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter {
|
||
|
|
width: 100%;
|
||
|
|
background: url("../images/box.png");
|
||
|
|
background-size: 100%;
|
||
|
|
padding-bottom: 2.66667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week {
|
||
|
|
height: 6.34667rem;
|
||
|
|
width: 9.6rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow: hidden;
|
||
|
|
background: url("../images/last-week.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul {
|
||
|
|
margin-top: 1.57333rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .headimg {
|
||
|
|
width: 2.50667rem;
|
||
|
|
height: 2.50667rem;
|
||
|
|
position: relative;
|
||
|
|
z-index: 22;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .avatar {
|
||
|
|
position: absolute;
|
||
|
|
width: 1.81333rem;
|
||
|
|
height: 1.81333rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
overflow: hidden;
|
||
|
|
top: 1.22667rem;
|
||
|
|
left: 0.34667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .last-week-gift {
|
||
|
|
width: 2.33333rem;
|
||
|
|
height: 0.90667rem;
|
||
|
|
background: url("../images/lsat-week-gift.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 0.32rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .last-week-gift img {
|
||
|
|
width: 0.90667rem;
|
||
|
|
height: 0.90667rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .last-week-gift p {
|
||
|
|
width: 1.33333rem;
|
||
|
|
text-align: center;
|
||
|
|
margin-left: 0.08rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .last-week-name {
|
||
|
|
font-size: 0.4rem;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
margin-top: 0.18667rem;
|
||
|
|
width: 2.4rem;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-top: -0.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .last-week-name span {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .last-week ul li .last-week-name span.wordsLoop {
|
||
|
|
white-space: nowrap;
|
||
|
|
animation: 5s wordsLoop linear infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes wordsLoop {
|
||
|
|
0% {
|
||
|
|
transform: translateX(2.66667rem);
|
||
|
|
-webkit-transform: translateX(2.66667rem);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
-webkit-transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-time {
|
||
|
|
width: 7.2rem;
|
||
|
|
height: 2.6rem;
|
||
|
|
margin: 0.85333rem auto 0;
|
||
|
|
background: url("../images/now-week-time.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
padding-top: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-time.activ {
|
||
|
|
background: url("../images/money-top.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-time p {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 1.48rem;
|
||
|
|
color: #D8A1FF;
|
||
|
|
font-size: 0.34667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-time p span {
|
||
|
|
font-size: 0.42667rem;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three {
|
||
|
|
width: 9.2rem;
|
||
|
|
height: 5.66667rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: url("../images/now-week-three-bg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
padding-top: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-three-tab {
|
||
|
|
margin: -0.6rem auto 0;
|
||
|
|
width: 92%;
|
||
|
|
height: 1.2rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-three-tab p {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 2.66667rem;
|
||
|
|
height: 1.17333rem;
|
||
|
|
background: url("../images/now-week-tab-bg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-three-tab p.active {
|
||
|
|
background: url("../images/now-week-tab-bg-act.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-three-tab p img {
|
||
|
|
width: 0.72rem;
|
||
|
|
height: 0.72rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-three-tab p span {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 0.34667rem;
|
||
|
|
margin-left: 0.13333rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul {
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li {
|
||
|
|
width: 2.66667rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li .picture-frame img {
|
||
|
|
width: 2.77333rem;
|
||
|
|
height: 2.77333rem;
|
||
|
|
position: relative;
|
||
|
|
z-index: 8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li .picture {
|
||
|
|
position: absolute;
|
||
|
|
width: 2rem;
|
||
|
|
height: 2rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #9F81E5;
|
||
|
|
top: 0.37333rem;
|
||
|
|
left: 0.34667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li:nth-child(1) {
|
||
|
|
position: absolute;
|
||
|
|
top: 0.24rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li:nth-child(1) .picture-frame img {
|
||
|
|
width: 3.10667rem;
|
||
|
|
height: 3.10667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li:nth-child(1) .picture {
|
||
|
|
width: 2.24rem;
|
||
|
|
height: 2.24rem;
|
||
|
|
top: 0.42667rem;
|
||
|
|
left: 0.21333rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li:nth-child(2) {
|
||
|
|
position: absolute;
|
||
|
|
top: 0.86667rem;
|
||
|
|
left: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li:nth-child(3) {
|
||
|
|
position: absolute;
|
||
|
|
top: 0.86667rem;
|
||
|
|
right: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li .nick {
|
||
|
|
font-size: 0.34667rem;
|
||
|
|
margin: -0.13333rem 0 0.14667rem;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-three .now-week-threetop ul li .charm-num {
|
||
|
|
color: #CE49EF;
|
||
|
|
font-size: 0.32rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other {
|
||
|
|
background: #6738D7;
|
||
|
|
width: 9.06667rem;
|
||
|
|
padding-bottom: 0.13333rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-bottom-left-radius: 0.34667rem;
|
||
|
|
border-bottom-right-radius: 0.34667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul {
|
||
|
|
width: 8.8rem;
|
||
|
|
background: #fff;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-bottom-left-radius: 0.26667rem;
|
||
|
|
border-bottom-right-radius: 0.26667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul li {
|
||
|
|
width: 8.53333rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 1.86667rem;
|
||
|
|
border-bottom: 1px solid rgba(99, 54, 209, 0.1);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul li .rank-index {
|
||
|
|
font-size: 0.4rem;
|
||
|
|
color: #A37BFF;
|
||
|
|
margin-left: 0.13333rem;
|
||
|
|
width: 0.48rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul li img {
|
||
|
|
width: 1.33333rem;
|
||
|
|
height: 1.33333rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-left: 0.53333rem;
|
||
|
|
margin-right: 0.26667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul li .user-detail {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
width: 3.46667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul li .user-detail span:first-child {
|
||
|
|
font-size: 0.37333rem;
|
||
|
|
color: #370270;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul li .user-detail span:last-child {
|
||
|
|
font-size: 0.32rem;
|
||
|
|
color: #B48EFF;
|
||
|
|
margin-top: 0.13333rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .weekcenter .now-week-other ul li .charm-num {
|
||
|
|
font-size: 0.4rem;
|
||
|
|
color: #D557C7;
|
||
|
|
text-align: right;
|
||
|
|
min-width: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award {
|
||
|
|
height: 20.02667rem;
|
||
|
|
width: 9.4rem;
|
||
|
|
background: url("../images/week-award.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: 0.88rem auto 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award.bule {
|
||
|
|
background: url("../images/week-l.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg {
|
||
|
|
width: 8.4rem;
|
||
|
|
margin: 1.6rem auto 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first .tit,
|
||
|
|
.max .week-award .week-award-bg .second .tit,
|
||
|
|
.max .week-award .week-award-bg .third .tit,
|
||
|
|
.max .week-award .week-award-bg .other .tit {
|
||
|
|
padding-left: 0.26667rem;
|
||
|
|
font-size: 0.32rem;
|
||
|
|
color: #370270;
|
||
|
|
padding-top: 0.66667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul,
|
||
|
|
.max .week-award .week-award-bg .second ul,
|
||
|
|
.max .week-award .week-award-bg .third ul,
|
||
|
|
.max .week-award .week-award-bg .other ul {
|
||
|
|
margin-top: 0.26667rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li,
|
||
|
|
.max .week-award .week-award-bg .second ul li,
|
||
|
|
.max .week-award .week-award-bg .third ul li,
|
||
|
|
.max .week-award .week-award-bg .other ul li {
|
||
|
|
width: 2.66667rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li .head,
|
||
|
|
.max .week-award .week-award-bg .second ul li .head,
|
||
|
|
.max .week-award .week-award-bg .third ul li .head,
|
||
|
|
.max .week-award .week-award-bg .other ul li .head {
|
||
|
|
position: relative;
|
||
|
|
width: 2.4rem;
|
||
|
|
height: 2.4rem;
|
||
|
|
border-radius: 0.13333rem;
|
||
|
|
background: #E0E0E0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li .head img,
|
||
|
|
.max .week-award .week-award-bg .second ul li .head img,
|
||
|
|
.max .week-award .week-award-bg .third ul li .head img,
|
||
|
|
.max .week-award .week-award-bg .other ul li .head img {
|
||
|
|
width: 2.13333rem;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li .head img.nameplate,
|
||
|
|
.max .week-award .week-award-bg .second ul li .head img.nameplate,
|
||
|
|
.max .week-award .week-award-bg .third ul li .head img.nameplate,
|
||
|
|
.max .week-award .week-award-bg .other ul li .head img.nameplate {
|
||
|
|
width: 1.93333rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li .head img.namemoney,
|
||
|
|
.max .week-award .week-award-bg .second ul li .head img.namemoney,
|
||
|
|
.max .week-award .week-award-bg .third ul li .head img.namemoney,
|
||
|
|
.max .week-award .week-award-bg .other ul li .head img.namemoney {
|
||
|
|
width: 2.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li .head span,
|
||
|
|
.max .week-award .week-award-bg .second ul li .head span,
|
||
|
|
.max .week-award .week-award-bg .third ul li .head span,
|
||
|
|
.max .week-award .week-award-bg .other ul li .head span {
|
||
|
|
position: absolute;
|
||
|
|
width: 0.8rem;
|
||
|
|
height: 0.42667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li .head span img,
|
||
|
|
.max .week-award .week-award-bg .second ul li .head span img,
|
||
|
|
.max .week-award .week-award-bg .third ul li .head span img,
|
||
|
|
.max .week-award .week-award-bg .other ul li .head span img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .week-award .week-award-bg .first ul li .gift-name,
|
||
|
|
.max .week-award .week-award-bg .second ul li .gift-name,
|
||
|
|
.max .week-award .week-award-bg .third ul li .gift-name,
|
||
|
|
.max .week-award .week-award-bg .other ul li .gift-name {
|
||
|
|
font-size: 0.4rem;
|
||
|
|
color: #370270;
|
||
|
|
margin-top: 0.26667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .mine {
|
||
|
|
z-index: 999;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
height: 1.86667rem;
|
||
|
|
background: #884CD9;
|
||
|
|
left: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .mine .ranking {
|
||
|
|
margin-left: 0.54667rem;
|
||
|
|
font-size: 0.32rem;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .mine img {
|
||
|
|
width: 1.33333rem;
|
||
|
|
height: 1.33333rem;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-left: 0.53333rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .mine .mine-detail {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 0.66667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .mine .mine-detail .mine-d {
|
||
|
|
font-size: 0.4rem;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .mine .mine-detail .mine-d .value {
|
||
|
|
margin-left: 0.54667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max .mine .mine-detail .distance {
|
||
|
|
margin-top: 0.16rem;
|
||
|
|
color: #B48EFF;
|
||
|
|
font-size: 0.32rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head .animation-2 {
|
||
|
|
width: 2.4rem;
|
||
|
|
height: 2.4rem;
|
||
|
|
background: url("../gift/charm-champion.png") no-repeat;
|
||
|
|
background-size: 105.98667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes test_anim {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
background-position: -55.2rem 0;
|
||
|
|
}
|
||
|
|
}
|