3280 lines
89 KiB
SCSS
3280 lines
89 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
background: radial-gradient(circle, #32140C 0%, #05040A 100%);
|
|
// background: #1E0D0B;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70);
|
|
left: px2rem(34);
|
|
z-index: 99;
|
|
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);
|
|
}
|
|
}
|
|
|
|
.layui-m-layershade {
|
|
background-color: rgba(0, 0, 0, .4) !important;
|
|
}
|
|
|
|
.header {
|
|
width: px2rem(750);
|
|
height: px2rem(1093);
|
|
margin: 0 auto -1.6rem;
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.toast {
|
|
width: px2rem(117);
|
|
height: px2rem(123);
|
|
position: absolute;
|
|
left: px2rem(28);
|
|
top: px2rem(581);
|
|
}
|
|
|
|
.rule_icon {
|
|
width: px2rem(195);
|
|
height: px2rem(189);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(649);
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(246);
|
|
height: px2rem(115);
|
|
line-height: px2rem(120);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
background: url(../images/tab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
.tab1 {
|
|
top: px2rem(725);
|
|
left: px2rem(26);
|
|
}
|
|
|
|
.tab2 {
|
|
top: px2rem(725);
|
|
right: px2rem(28);
|
|
}
|
|
|
|
.tab3 {
|
|
top: px2rem(839);
|
|
left: 0rem;
|
|
}
|
|
|
|
.tab4 {
|
|
top: px2rem(839);
|
|
left: px2rem(251);
|
|
}
|
|
|
|
.tab5 {
|
|
top: px2rem(839);
|
|
right: 0.04rem;
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/tabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #664324;
|
|
}
|
|
}
|
|
|
|
.page1 {
|
|
display: none;
|
|
|
|
.box {
|
|
width: px2rem(691);
|
|
height: px2rem(1646);
|
|
background: url(../images/page1Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(150);
|
|
position: relative;
|
|
|
|
.no1 {
|
|
width: px2rem(455);
|
|
height: px2rem(303);
|
|
background: url(../images/NOBg1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: px2rem(73);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.NOIcon {
|
|
width: px2rem(133);
|
|
height: px2rem(66);
|
|
position: absolute;
|
|
top: -0.7rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.lts {
|
|
width: px2rem(125);
|
|
height: px2rem(125);
|
|
position: absolute;
|
|
left: px2rem(72);
|
|
z-index: 2;
|
|
top: px2rem(78);
|
|
}
|
|
|
|
.rts {
|
|
width: px2rem(125);
|
|
height: px2rem(125);
|
|
position: absolute;
|
|
right: px2rem(68);
|
|
z-index: 2;
|
|
top: px2rem(78);
|
|
}
|
|
|
|
.leftTx {
|
|
width: px2rem(98);
|
|
height: px2rem(98);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(85);
|
|
top: px2rem(88);
|
|
}
|
|
|
|
.rightTx {
|
|
width: px2rem(98);
|
|
height: px2rem(98);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: px2rem(82);
|
|
top: px2rem(88);
|
|
}
|
|
|
|
.leftName {
|
|
width: px2rem(125);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(75);
|
|
top: px2rem(212);
|
|
}
|
|
|
|
.right {
|
|
width: px2rem(125);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
right: px2rem(75);
|
|
top: px2rem(212);
|
|
}
|
|
|
|
.score {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF3B3;
|
|
font-size: px2rem(22);
|
|
position: absolute;
|
|
top: px2rem(288);
|
|
left: 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(322);
|
|
height: px2rem(198);
|
|
background: url(../images/NOBg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: px2rem(450);
|
|
left: px2rem(14);
|
|
|
|
.NOIcon {
|
|
width: px2rem(133);
|
|
height: px2rem(66);
|
|
position: absolute;
|
|
top: -0.7rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(279);
|
|
height: px2rem(93);
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(60);
|
|
}
|
|
|
|
.leftTx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(78);
|
|
top: px2rem(65);
|
|
}
|
|
|
|
.rightTx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: px2rem(76);
|
|
top: px2rem(65);
|
|
}
|
|
|
|
.leftName {
|
|
width: px2rem(92);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(158);
|
|
left: px2rem(74);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.right {
|
|
width: px2rem(92);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(158);
|
|
right: px2rem(71);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.score {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF3B3;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(210);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(322);
|
|
height: px2rem(198);
|
|
background: url(../images/NOBg3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: px2rem(450);
|
|
right: px2rem(14);
|
|
|
|
.NOIcon {
|
|
width: px2rem(133);
|
|
height: px2rem(66);
|
|
position: absolute;
|
|
top: -0.7rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(279);
|
|
height: px2rem(93);
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(60);
|
|
}
|
|
|
|
.leftTx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(78);
|
|
top: px2rem(65);
|
|
}
|
|
|
|
.rightTx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: px2rem(76);
|
|
top: px2rem(65);
|
|
}
|
|
|
|
.leftName {
|
|
width: px2rem(92);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(158);
|
|
left: px2rem(74);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.right {
|
|
width: px2rem(92);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(158);
|
|
right: px2rem(71);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.score {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFF3B3;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(210);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(641);
|
|
height: 11.5rem;
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
top: px2rem(763);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(132);
|
|
background: url(../images/page1LiBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(48) 0 px2rem(30);
|
|
margin-bottom: px2rem(8);
|
|
position: relative;
|
|
|
|
.num {
|
|
width: px2rem(35);
|
|
text-align: center;
|
|
float: left;
|
|
height: 100%;
|
|
line-height: px2rem(132);
|
|
color: #fff;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.ts {
|
|
position: absolute;
|
|
left: px2rem(120);
|
|
top: px2rem(14);
|
|
width: px2rem(156);
|
|
height: px2rem(82);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ltx {
|
|
width: px2rem(74);
|
|
height: px2rem(74);
|
|
position: absolute;
|
|
left: px2rem(123.5);
|
|
top: px2rem(19);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.rtx {
|
|
width: px2rem(74);
|
|
height: px2rem(74);
|
|
position: absolute;
|
|
left: px2rem(198.5);
|
|
top: px2rem(19);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.lName {
|
|
width: px2rem(73);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(15);
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(122);
|
|
top: px2rem(100);
|
|
}
|
|
|
|
.rName {
|
|
width: px2rem(73);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(15);
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(196);
|
|
top: px2rem(100);
|
|
}
|
|
|
|
.score {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: px2rem(132);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: px2rem(170);
|
|
background: url(../images/page1myBg.png) no-repeat bottom;
|
|
background-size: 100% px2rem(150);
|
|
box-sizing: border-box;
|
|
padding-top: 0.6rem;
|
|
z-index: 3;
|
|
transition: all .3s;
|
|
|
|
.pageMyicon {
|
|
width: px2rem(69);
|
|
height: px2rem(47);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(0deg);
|
|
top: 0%;
|
|
}
|
|
|
|
.myBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
height: 1.76rem;
|
|
position: relative;
|
|
padding: 0 px2rem(100) 0 px2rem(0);
|
|
overflow-y: hidden;
|
|
margin: 0 auto px2rem(10);
|
|
|
|
.myBox_in {
|
|
width: 100%;
|
|
height: 1.76rem;
|
|
position: relative;
|
|
background: url(../images/page1myBoxLIbg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: translateX(8%);
|
|
margin-bottom: px2rem(14);
|
|
box-sizing: border-box;
|
|
padding-right: px2rem(69);
|
|
overflow: hidden;
|
|
|
|
.num {
|
|
width: px2rem(35);
|
|
height: px2rem(130);
|
|
text-align: center;
|
|
float: left;
|
|
height: 100%;
|
|
line-height: px2rem(132);
|
|
color: #523A22;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.ts {
|
|
position: absolute;
|
|
left: 0.7rem;
|
|
top: px2rem(14);
|
|
width: px2rem(156);
|
|
height: px2rem(82);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ltx {
|
|
width: px2rem(74);
|
|
height: px2rem(74);
|
|
position: absolute;
|
|
left: 0.74667rem;
|
|
top: px2rem(19);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.rtx {
|
|
width: px2rem(74);
|
|
height: px2rem(74);
|
|
position: absolute;
|
|
left: 1.74667rem;
|
|
top: px2rem(19);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.lName {
|
|
width: px2rem(73);
|
|
text-align: center;
|
|
color: #523A22;
|
|
font-size: px2rem(15);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: 0.72667rem;
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.rName {
|
|
width: px2rem(73);
|
|
text-align: center;
|
|
color: #523A22;
|
|
font-size: px2rem(15);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: 1.74667rem;
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.score {
|
|
float: right;
|
|
height: 100%;
|
|
// line-height: px2rem(132);
|
|
color: #523A22;
|
|
font-size: px2rem(22);
|
|
margin-top: px2rem(20);
|
|
text-align: right;
|
|
|
|
P {
|
|
margin-bottom: px2rem(3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.NotUser {
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 1.76rem;
|
|
color: #523A22;
|
|
transform: translateX(8%)
|
|
}
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/page1myBg2.png) no-repeat bottom;
|
|
background-size: 100% 10.4rem;
|
|
}
|
|
}
|
|
|
|
.page2 {
|
|
display: none;
|
|
|
|
.tabBox {
|
|
width: 100%;
|
|
margin: 0 auto 0;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(7);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.tab {
|
|
width: px2rem(126);
|
|
height: px2rem(64);
|
|
line-height: px2rem(64);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(20);
|
|
font-weight: 400;
|
|
background: url(../images/page2Tab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/page2TabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.page2GiftBox {
|
|
position: relative;
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: px2rem(750);
|
|
height: px2rem(191);
|
|
z-index: 2;
|
|
}
|
|
|
|
.page2Gift {
|
|
width: px2rem(144);
|
|
height: px2rem(144);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 49.5%;
|
|
transform: translateX(-50%);
|
|
top: 14.06rem;
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(691);
|
|
height: px2rem(1646);
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: -0.3rem auto 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top3Box {
|
|
width: px2rem(616);
|
|
height: px2rem(603);
|
|
background: url(../images/page2NoBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: px2rem(43) auto px2rem(0);
|
|
|
|
.no1 {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-11);
|
|
width: px2rem(239);
|
|
height: px2rem(327);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(126);
|
|
height: px2rem(126);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(66);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(220);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(254);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
position: absolute;
|
|
left: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
position: absolute;
|
|
right: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ulTitle {
|
|
width: px2rem(262);
|
|
height: px2rem(80);
|
|
position: relative;
|
|
display: block;
|
|
margin: -0.5rem auto 0;
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(651);
|
|
height: 10.7rem;
|
|
background: linear-gradient(0deg, #5C3103 0%, #623403 100%);
|
|
border-radius: px2rem(30);
|
|
margin: 0 auto 0;
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding: px2rem(9) px2rem(7);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(33) 0 px2rem(28);
|
|
background: linear-gradient(0deg, #9E4C33 0%, #D08F43 100%);
|
|
border-radius: px2rem(24);
|
|
margin-bottom: px2rem(9);
|
|
position: relative;
|
|
line-height: px2rem(130);
|
|
|
|
.num {
|
|
width: px2rem(35);
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(190);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(119);
|
|
height: px2rem(118);
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: px2rem(115);
|
|
top: px2rem(1);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: px2rem(133);
|
|
top: px2rem(20);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
width: 100%;
|
|
height: px2rem(160);
|
|
line-height: px2rem(160);
|
|
background: linear-gradient(0deg, #F9A1EC 0%, #A355FA 100%);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(80) 0 px2rem(57);
|
|
|
|
.num {
|
|
width: 1.3rem;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(42);
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.ts {
|
|
float: left;
|
|
position: relative;
|
|
width: px2rem(92);
|
|
height: px2rem(92);
|
|
background: linear-gradient(0deg, #F9CD62 0%, #FFFFFF 100%);
|
|
border-radius: 50%;
|
|
margin-right: px2rem(33);
|
|
margin-top: px2rem(35);
|
|
|
|
.tx {
|
|
position: absolute;
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page3 {
|
|
width: px2rem(710);
|
|
position: relative;
|
|
margin: 0 auto;
|
|
// display: none;
|
|
|
|
.page3TitleIcon {
|
|
display: block;
|
|
width: px2rem(657);
|
|
height: px2rem(119);
|
|
margin: 0 auto px2rem(-5);
|
|
position: relative;
|
|
}
|
|
|
|
.page3RuleIcon {
|
|
position: absolute;
|
|
width: px2rem(86);
|
|
height: px2rem(74);
|
|
right: px2rem(0);
|
|
top: 0;
|
|
}
|
|
|
|
.page3tabBox {
|
|
width: px2rem(710);
|
|
height: px2rem(324);
|
|
position: relative;
|
|
margin: 0 auto px2rem(28);
|
|
background: url(../images/page3tabBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.tabBox {
|
|
width: px2rem(715);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(15);
|
|
height: px2rem(79);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(54);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tab {
|
|
width: px2rem(143);
|
|
height: px2rem(79);
|
|
background: url(../images/page3Tab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
|
|
p {
|
|
color: #79502F;
|
|
font-size: px2rem(21);
|
|
font-weight: 400;
|
|
margin-top: px2rem(19);
|
|
}
|
|
|
|
span {
|
|
color: #79502F;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/page3TabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
p,
|
|
span {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeBox {
|
|
width: px2rem(680);
|
|
height: px2rem(108);
|
|
background: url(../images/page3TimeBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(171);
|
|
|
|
p {
|
|
width: 100%;
|
|
height: px2rem(55);
|
|
line-height: px2rem(55);
|
|
text-align: center;
|
|
color: #C77D42;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(28);
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: px2rem(55);
|
|
height: px2rem(55);
|
|
border: px2rem(3) solid #7A5714;
|
|
color: #FFFFFF;
|
|
border-radius: px2rem(8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(691);
|
|
height: px2rem(1646);
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: -0.3rem auto 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top3Box {
|
|
width: px2rem(616);
|
|
height: px2rem(603);
|
|
background: url(../images/page2NoBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: px2rem(43) auto px2rem(0);
|
|
|
|
.no1 {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-11);
|
|
width: px2rem(239);
|
|
height: px2rem(327);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(126);
|
|
height: px2rem(126);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(66);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(220);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(254);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
position: absolute;
|
|
left: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
position: absolute;
|
|
right: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(651);
|
|
height: 11rem;
|
|
border-radius: px2rem(30);
|
|
margin: 0 auto 0;
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding: px2rem(9) px2rem(7);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(33) 0 px2rem(28);
|
|
background: linear-gradient(0deg, #9E4C33 0%, #D08F43 100%);
|
|
border-radius: px2rem(24);
|
|
margin-bottom: px2rem(9);
|
|
position: relative;
|
|
line-height: px2rem(130);
|
|
|
|
.num {
|
|
width: px2rem(35);
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(190);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(119);
|
|
height: px2rem(118);
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: px2rem(115);
|
|
top: px2rem(1);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: px2rem(133);
|
|
top: px2rem(20);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
width: 100%;
|
|
height: px2rem(160);
|
|
line-height: px2rem(160);
|
|
background: linear-gradient(0deg, #F9A1EC 0%, #A355FA 100%);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(80) 0 px2rem(57);
|
|
|
|
.num {
|
|
width: 1.3rem;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(42);
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.ts {
|
|
float: left;
|
|
position: relative;
|
|
width: px2rem(92);
|
|
height: px2rem(92);
|
|
background: linear-gradient(0deg, #F9CD62 0%, #FFFFFF 100%);
|
|
border-radius: 50%;
|
|
margin-right: px2rem(33);
|
|
margin-top: px2rem(35);
|
|
|
|
.tx {
|
|
position: absolute;
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page4 {
|
|
width: px2rem(710);
|
|
position: relative;
|
|
margin: 0 auto;
|
|
display: none;
|
|
|
|
.page3TitleIcon {
|
|
display: block;
|
|
width: px2rem(657);
|
|
height: px2rem(119);
|
|
margin: 0 auto px2rem(-5);
|
|
position: relative;
|
|
}
|
|
|
|
.page3tabBox {
|
|
width: px2rem(710);
|
|
height: px2rem(324);
|
|
position: relative;
|
|
margin: 0 auto px2rem(28);
|
|
background: url(../images/page3tabBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.tabBox {
|
|
width: px2rem(715);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(15);
|
|
height: px2rem(79);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(54);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tab {
|
|
width: px2rem(143);
|
|
height: px2rem(79);
|
|
background: url(../images/page3Tab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
|
|
p {
|
|
color: #79502F;
|
|
font-size: px2rem(21);
|
|
font-weight: 400;
|
|
margin-top: px2rem(19);
|
|
}
|
|
|
|
span {
|
|
color: #79502F;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/page3TabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
p,
|
|
span {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeBox {
|
|
width: px2rem(680);
|
|
height: px2rem(108);
|
|
background: url(../images/page3TimeBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(171);
|
|
|
|
p {
|
|
width: 100%;
|
|
height: px2rem(55);
|
|
line-height: px2rem(55);
|
|
text-align: center;
|
|
color: #C77D42;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(28);
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: px2rem(55);
|
|
height: px2rem(55);
|
|
border: px2rem(3) solid #7A5714;
|
|
color: #FFFFFF;
|
|
border-radius: px2rem(8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page4Title2 {
|
|
width: px2rem(475);
|
|
height: px2rem(80);
|
|
margin: -0.3rem auto px2rem(13);
|
|
display: block;
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(691);
|
|
height: px2rem(1646);
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top3Box {
|
|
width: px2rem(616);
|
|
height: px2rem(603);
|
|
background: url(../images/page2NoBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: px2rem(43) auto px2rem(0);
|
|
|
|
.no1 {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-11);
|
|
width: px2rem(239);
|
|
height: px2rem(327);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(126);
|
|
height: px2rem(126);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(66);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(220);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
|
|
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(254);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
position: absolute;
|
|
left: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
position: absolute;
|
|
right: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(651);
|
|
height: 11rem;
|
|
border-radius: px2rem(30);
|
|
margin: 0 auto 0;
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding: px2rem(9) px2rem(7);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(33) 0 px2rem(28);
|
|
background: linear-gradient(0deg, #9E4C33 0%, #D08F43 100%);
|
|
border-radius: px2rem(24);
|
|
margin-bottom: px2rem(9);
|
|
position: relative;
|
|
line-height: px2rem(130);
|
|
|
|
.num {
|
|
width: px2rem(35);
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(190);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(119);
|
|
height: px2rem(118);
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: px2rem(115);
|
|
top: px2rem(1);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: px2rem(133);
|
|
top: px2rem(20);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
width: 100%;
|
|
height: px2rem(160);
|
|
line-height: px2rem(160);
|
|
background: linear-gradient(0deg, #F9A1EC 0%, #A355FA 100%);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(80) 0 px2rem(57);
|
|
|
|
.num {
|
|
width: 1.3rem;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(42);
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.ts {
|
|
float: left;
|
|
position: relative;
|
|
width: px2rem(92);
|
|
height: px2rem(92);
|
|
background: linear-gradient(0deg, #F9CD62 0%, #FFFFFF 100%);
|
|
border-radius: 50%;
|
|
margin-right: px2rem(33);
|
|
margin-top: px2rem(35);
|
|
|
|
.tx {
|
|
position: absolute;
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page5 {
|
|
display: none;
|
|
|
|
.page3title {
|
|
position: relative;
|
|
display: block;
|
|
margin: -1.5rem auto px2rem(54);
|
|
width: px2rem(657);
|
|
height: px2rem(119);
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(691);
|
|
height: px2rem(1646);
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: -0.3rem auto 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top3Box {
|
|
width: px2rem(616);
|
|
height: px2rem(603);
|
|
background: url(../images/page2NoBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: px2rem(43) auto px2rem(0);
|
|
|
|
.no1 {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(-11);
|
|
width: px2rem(239);
|
|
height: px2rem(327);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(126);
|
|
height: px2rem(126);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(66);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(220);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(254);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
position: absolute;
|
|
left: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
position: absolute;
|
|
right: px2rem(-8);
|
|
top: px2rem(125);
|
|
width: px2rem(205);
|
|
height: px2rem(281);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(108);
|
|
height: px2rem(108);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(57);
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: px2rem(187);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
left: 50%;
|
|
width: 75%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(218);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(651);
|
|
height: 11rem;
|
|
border-radius: px2rem(30);
|
|
margin: 0 auto 0;
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding: px2rem(9) px2rem(7);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(130);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(33) 0 px2rem(28);
|
|
background: linear-gradient(0deg, #9E4C33 0%, #D08F43 100%);
|
|
border-radius: px2rem(24);
|
|
margin-bottom: px2rem(9);
|
|
position: relative;
|
|
line-height: px2rem(130);
|
|
|
|
.num {
|
|
width: px2rem(35);
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(190);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(119);
|
|
height: px2rem(118);
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: px2rem(115);
|
|
top: px2rem(1);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: px2rem(133);
|
|
top: px2rem(20);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
width: 100%;
|
|
height: px2rem(160);
|
|
line-height: px2rem(160);
|
|
background: linear-gradient(0deg, #F9A1EC 0%, #A355FA 100%);
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 3;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(50) 0 px2rem(57);
|
|
|
|
.num {
|
|
width: 1.3rem;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(42);
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: left;
|
|
}
|
|
|
|
.ts {
|
|
float: left;
|
|
position: relative;
|
|
width: px2rem(92);
|
|
height: px2rem(92);
|
|
background: linear-gradient(0deg, #F9CD62 0%, #FFFFFF 100%);
|
|
border-radius: 50%;
|
|
margin-right: px2rem(33);
|
|
margin-top: px2rem(35);
|
|
|
|
.tx {
|
|
position: absolute;
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.score {
|
|
height: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.celebrationTask {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.celebrationTask_in {
|
|
width: px2rem(750);
|
|
height: 70%;
|
|
background: linear-gradient(0deg, #9C5F4E 0%, #E0924E 100%);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
border-top-left-radius: px2rem(50);
|
|
border-top-right-radius: px2rem(50);
|
|
overflow-y: scroll;
|
|
|
|
.celebrationTaskTitle {
|
|
width: px2rem(331);
|
|
height: px2rem(110);
|
|
margin: px2rem(16) auto px2rem(17);
|
|
display: block;
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(450);
|
|
height: px2rem(75);
|
|
border-radius: px2rem(75);
|
|
line-height: px2rem(75);
|
|
margin: 0 auto px2rem(40);
|
|
background: linear-gradient(0deg, #52080A 0%, #A96026 100%);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: px2rem(227);
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #F8A75F;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.act {
|
|
color: #835212;
|
|
font-size: px2rem(30);
|
|
background: url(../images/celebrationTaskAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
line-height: px2rem(70);
|
|
}
|
|
}
|
|
|
|
.user {
|
|
width: px2rem(689);
|
|
height: px2rem(201);
|
|
margin: 0 auto px2rem(45);
|
|
background: url(../images/celebrationTasktopBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.ts {
|
|
width: px2rem(119);
|
|
height: px2rem(118);
|
|
position: absolute;
|
|
left: px2rem(41);
|
|
top: px2rem(36);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: px2rem(59);
|
|
top: px2rem(56);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
width: px2rem(466);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(179);
|
|
top: px2rem(55);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22);
|
|
}
|
|
|
|
.score {
|
|
width: px2rem(466);
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
position: absolute;
|
|
left: px2rem(179);
|
|
top: px2rem(95);
|
|
background: linear-gradient(0deg, #A46031 0%, #AB5A23 100%);
|
|
border-radius: px2rem(10);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(20);
|
|
font-weight: 400;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(21);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
|
|
span {
|
|
width: 50%;
|
|
|
|
b {
|
|
color: #FFDE00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabBox1 {
|
|
width: 100%;
|
|
margin: 0 auto 0;
|
|
|
|
.text {
|
|
font-style: normal;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #191004;
|
|
font-size: px2rem(21);
|
|
font-weight: 400;
|
|
margin-bottom: px2rem(22);
|
|
display: block;
|
|
}
|
|
|
|
.line {
|
|
display: block;
|
|
width: px2rem(531);
|
|
height: px2rem(21);
|
|
margin: 0 auto px2rem(17);
|
|
}
|
|
|
|
.celebrationTaskBox {
|
|
width: px2rem(689);
|
|
height: px2rem(673);
|
|
margin: 0 auto px2rem(30);
|
|
position: relative;
|
|
background: url(../images/celebrationTaskBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.title {
|
|
width: 100%;
|
|
position: absolute;
|
|
color: #EFBA7B;
|
|
font-size: px2rem(26);
|
|
font-weight: 400;
|
|
left: 0;
|
|
top: px2rem(18);
|
|
text-align: center;
|
|
}
|
|
|
|
.giftBox {
|
|
width: px2rem(480);
|
|
height: px2rem(397);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(137);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
width: px2rem(220);
|
|
height: px2rem(171);
|
|
background: url(../images/celebrationTaskBoxGiftBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
span {
|
|
width: px2rem(69);
|
|
height: px2rem(39);
|
|
line-height: px2rem(39);
|
|
text-align: center;
|
|
color: #49361B;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.1rem;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(169);
|
|
height: px2rem(146);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
i {
|
|
width: 100%;
|
|
height: px2rem(21);
|
|
text-align: center;
|
|
color: #FDB83F;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 2.3rem;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(93);
|
|
text-align: center;
|
|
color: #EFBA7B;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
|
|
b {
|
|
color: #FFF600;
|
|
}
|
|
}
|
|
|
|
.butNot {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: px2rem(553);
|
|
width: px2rem(174);
|
|
height: px2rem(66);
|
|
line-height: px2rem(66);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(27);
|
|
font-weight: 400;
|
|
background: url(../images/celebrationTaskBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.but {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(553);
|
|
width: px2rem(174);
|
|
height: px2rem(66);
|
|
line-height: px2rem(66);
|
|
text-align: center;
|
|
color: #FEFFC6;
|
|
font-size: px2rem(27);
|
|
font-weight: 400;
|
|
background: url(../images/celebrationTaskButAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: none;
|
|
}
|
|
|
|
i {
|
|
width: 100%;
|
|
font-style: normal;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(630);
|
|
color: #C5955E;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
|
|
.left {
|
|
width: px2rem(36);
|
|
height: px2rem(61);
|
|
position: absolute;
|
|
top: px2rem(297);
|
|
left: px2rem(16);
|
|
}
|
|
|
|
.right {
|
|
width: px2rem(36);
|
|
height: px2rem(61);
|
|
position: absolute;
|
|
top: px2rem(297);
|
|
right: px2rem(16);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabBox2 {
|
|
width: 100%;
|
|
margin: 0 auto 0;
|
|
display: none;
|
|
|
|
.text {
|
|
font-style: normal;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #191004;
|
|
font-size: px2rem(21);
|
|
font-weight: 400;
|
|
margin-bottom: px2rem(22);
|
|
display: block;
|
|
}
|
|
|
|
.line {
|
|
display: block;
|
|
width: px2rem(531);
|
|
height: px2rem(21);
|
|
margin: 0 auto px2rem(17);
|
|
}
|
|
|
|
.celebrationTaskBox {
|
|
width: px2rem(689);
|
|
height: px2rem(673);
|
|
margin: 0 auto px2rem(30);
|
|
position: relative;
|
|
background: url(../images/celebrationTaskBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.title {
|
|
width: 100%;
|
|
position: absolute;
|
|
color: #EFBA7B;
|
|
font-size: px2rem(26);
|
|
font-weight: 400;
|
|
left: 0;
|
|
top: px2rem(18);
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(93);
|
|
text-align: center;
|
|
color: #EFBA7B;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
|
|
b {
|
|
color: #FFF600;
|
|
}
|
|
}
|
|
|
|
.giftBox {
|
|
width: px2rem(480);
|
|
height: px2rem(397);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(137);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
width: px2rem(220);
|
|
height: px2rem(171);
|
|
background: url(../images/celebrationTaskBoxGiftBox.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
span {
|
|
width: px2rem(69);
|
|
height: px2rem(39);
|
|
line-height: px2rem(39);
|
|
text-align: center;
|
|
color: #49361B;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.1rem;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(169);
|
|
height: px2rem(146);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
i {
|
|
width: 100%;
|
|
height: px2rem(21);
|
|
text-align: center;
|
|
color: #FDB83F;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 2.3rem;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.butNot {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: px2rem(553);
|
|
width: px2rem(174);
|
|
height: px2rem(66);
|
|
line-height: px2rem(66);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(27);
|
|
font-weight: 400;
|
|
background: url(../images/celebrationTaskBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.but {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(553);
|
|
width: px2rem(174);
|
|
height: px2rem(66);
|
|
line-height: px2rem(66);
|
|
text-align: center;
|
|
color: #FEFFC6;
|
|
font-size: px2rem(27);
|
|
font-weight: 400;
|
|
background: url(../images/celebrationTaskButAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: none;
|
|
}
|
|
|
|
i {
|
|
width: 100%;
|
|
font-style: normal;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(630);
|
|
color: #C5955E;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
|
|
.left {
|
|
width: px2rem(36);
|
|
height: px2rem(61);
|
|
position: absolute;
|
|
top: px2rem(297);
|
|
left: px2rem(16);
|
|
}
|
|
|
|
.right {
|
|
width: px2rem(36);
|
|
height: px2rem(61);
|
|
position: absolute;
|
|
top: px2rem(297);
|
|
right: px2rem(16);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page3_pop {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
|
|
.page3_pop_in {
|
|
width: px2rem(750);
|
|
height: 70%;
|
|
background: linear-gradient(0deg, #9C5F4E 0%, #E0924E 100%);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
border-top-left-radius: px2rem(50);
|
|
border-top-right-radius: px2rem(50);
|
|
overflow-y: scroll;
|
|
|
|
.page3_popTitle {
|
|
width: px2rem(386);
|
|
height: px2rem(110);
|
|
display: block;
|
|
margin: px2rem(-4) auto px2rem(0);
|
|
}
|
|
|
|
.titleTopBox {
|
|
width: px2rem(708);
|
|
height: px2rem(309);
|
|
display: block;
|
|
margin: 0 auto px2rem(31);
|
|
}
|
|
|
|
.page3_popLustTop3 {
|
|
width: px2rem(219);
|
|
height: px2rem(46);
|
|
display: block;
|
|
margin: 0 auto px2rem(17);
|
|
}
|
|
|
|
.lastTop3 {
|
|
width: px2rem(648);
|
|
height: px2rem(141);
|
|
margin: 0 auto px2rem(19);
|
|
background: url(../images/page3_popTOP1Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
font-weight: 400;
|
|
|
|
.ts {
|
|
width: px2rem(119);
|
|
height: px2rem(118);
|
|
position: absolute;
|
|
left: px2rem(69);
|
|
top: px2rem(7);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
position: absolute;
|
|
left: px2rem(87);
|
|
top: px2rem(27);
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
width: 2.5rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
float: left;
|
|
height: 100%;
|
|
line-height: px2rem(141);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22);
|
|
margin-left: px2rem(208);
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
height: 100%;
|
|
margin-right: px2rem(83);
|
|
|
|
img {
|
|
width: px2rem(63);
|
|
height: px2rem(63);
|
|
border: px2rem(2) solid #F9F5DC;
|
|
border-radius: 50%;
|
|
display: block;
|
|
margin-bottom: px2rem(3);
|
|
margin-top: px2rem(26);
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: #fff;
|
|
font-size: px2rem(18);
|
|
}
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(531);
|
|
height: px2rem(21);
|
|
display: block;
|
|
margin: 0 auto px2rem(23);
|
|
}
|
|
|
|
.timeBox {
|
|
width: px2rem(610);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #FFEB9B;
|
|
font-size: px2rem(24);
|
|
font-weight: 400;
|
|
margin: 0 auto px2rem(21);
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(648);
|
|
margin: 0 auto px2rem(100);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(141);
|
|
background: url(../images/page3_popLibg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
font-weight: 400;
|
|
position: relative;
|
|
|
|
.num {
|
|
width: 1.3rem;
|
|
text-align: center;
|
|
float: left;
|
|
height: 100%;
|
|
line-height: px2rem(141);
|
|
color: #fff;
|
|
font-size: px2rem(32);
|
|
margin-left: px2rem(25);
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(119);
|
|
height: px2rem(118);
|
|
position: absolute;
|
|
left: px2rem(121);
|
|
top: px2rem(7);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
position: absolute;
|
|
left: px2rem(139);
|
|
top: px2rem(27);
|
|
width: px2rem(84);
|
|
height: px2rem(84);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user {
|
|
width: 2.5rem;
|
|
float: left;
|
|
margin-left: px2rem(140);
|
|
color: #fff;
|
|
|
|
p {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: px2rem(22);
|
|
margin-top: px2rem(40);
|
|
margin-bottom: px2rem(9);
|
|
}
|
|
|
|
span {
|
|
font-size: px2rem(18);
|
|
}
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
height: 100%;
|
|
margin-right: px2rem(83);
|
|
|
|
img {
|
|
width: px2rem(63);
|
|
height: px2rem(63);
|
|
border: px2rem(2) solid #F9F5DC;
|
|
border-radius: 50%;
|
|
display: block;
|
|
margin-bottom: px2rem(3);
|
|
margin-top: px2rem(26);
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: #fff;
|
|
font-size: px2rem(18);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #80583A;
|
|
font-size: px2rem(20);
|
|
font-weight: 400;
|
|
height: px2rem(84);
|
|
line-height: px2rem(84);
|
|
background: linear-gradient(0deg, #F58563 0%, #F4CC62 100%);
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.page4_pop {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
|
|
.page3_pop_in {
|
|
width: px2rem(750);
|
|
height: 70%;
|
|
background: linear-gradient(0deg, #9C5F4E 0%, #E0924E 100%);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
border-top-left-radius: px2rem(50);
|
|
border-top-right-radius: px2rem(50);
|
|
overflow-y: scroll;
|
|
|
|
.page4_popTop {
|
|
width: px2rem(710);
|
|
height: px2rem(465);
|
|
display: block;
|
|
margin: px2rem(13) auto px2rem(15);
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(531);
|
|
height: px2rem(21);
|
|
display: block;
|
|
margin: 0 auto px2rem(23);
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(647);
|
|
margin: 0 auto px2rem(49);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(200);
|
|
background: url(../images/page4_popLiBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: px2rem(15);
|
|
position: relative;
|
|
|
|
.lts,
|
|
.rts {
|
|
width: px2rem(111);
|
|
height: px2rem(111);
|
|
border-radius: 50%;
|
|
background: linear-gradient(0deg, #F9CD62 0%, #FFFFFF 100%);
|
|
position: absolute;
|
|
top: px2rem(38);
|
|
|
|
img {
|
|
width: px2rem(100);
|
|
height: px2rem(100);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: px2rem(-29);
|
|
}
|
|
}
|
|
|
|
.lts {
|
|
left: px2rem(72);
|
|
}
|
|
|
|
.rts {
|
|
left: px2rem(318);
|
|
}
|
|
|
|
.right {
|
|
width: px2rem(155);
|
|
height: px2rem(200);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
text-align: center;
|
|
|
|
b {
|
|
color: #fff;
|
|
font-size: px2rem(22);
|
|
font-weight: 400;
|
|
margin-top: px2rem(59);
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
|
|
.rule_in {
|
|
width: px2rem(750);
|
|
height: 70%;
|
|
background: linear-gradient(0deg, #9C5F4E 0%, #E0924E 100%);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
border-top-left-radius: px2rem(50);
|
|
border-top-right-radius: px2rem(50);
|
|
overflow-y: scroll;
|
|
|
|
.TabBox {
|
|
width: px2rem(510);
|
|
height: px2rem(87);
|
|
line-height: px2rem(75);
|
|
margin: px2rem(60) auto px2rem(37);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: px2rem(238);
|
|
text-align: center;
|
|
color: #FFFFFE;
|
|
font-size: px2rem(30);
|
|
background: url(../images/celebrationTaskActNot.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.act {
|
|
color: #835212;
|
|
background: url(../images/celebrationTaskAct1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
width: px2rem(675);
|
|
height: px2rem(66);
|
|
line-height: px2rem(58);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(21);
|
|
text-align: center;
|
|
font-weight: 400;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
|
|
div {
|
|
width: px2rem(135);
|
|
height: px2rem(66);
|
|
background: url(../images/ruleTab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/ruleTabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.content_tabBox {
|
|
width: px2rem(710);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(15);
|
|
height: px2rem(79);
|
|
margin: px2rem(27) auto px2rem(21);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
display: none;
|
|
|
|
.tab {
|
|
width: px2rem(143);
|
|
height: px2rem(79);
|
|
background: url(../images/page3Tab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
|
|
p {
|
|
color: #79502F;
|
|
font-size: px2rem(21);
|
|
font-weight: 400;
|
|
margin-top: px2rem(19);
|
|
}
|
|
|
|
span {
|
|
color: #79502F;
|
|
font-size: px2rem(18);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/page3TabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
p,
|
|
span {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content_tabBox2 {
|
|
width: 5.46667rem;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(15);
|
|
height: px2rem(79);
|
|
margin: px2rem(27) auto px2rem(21);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
display: none;
|
|
|
|
.tab {
|
|
width: px2rem(143);
|
|
height: px2rem(79);
|
|
line-height: px2rem(79);
|
|
background: url(../images/page3Tab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
|
|
p {
|
|
color: #79502F;
|
|
font-size: px2rem(21);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/page3TabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
p,
|
|
span {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content1 {
|
|
width: px2rem(710);
|
|
background: #F5C082;
|
|
margin: px2rem(23) auto px2rem(27);
|
|
box-sizing: border-box;
|
|
padding: px2rem(10) 0;
|
|
border-radius: px2rem(20);
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.content2 {
|
|
width: px2rem(710);
|
|
background: #F5C082;
|
|
margin: px2rem(23) auto px2rem(27);
|
|
box-sizing: border-box;
|
|
padding: px2rem(10) 0;
|
|
border-radius: px2rem(20);
|
|
display: none;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.actOut {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.actOut_in {
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/actOutBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
width: px2rem(483);
|
|
height: px2rem(346);
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: px2rem(108);
|
|
left: 0;
|
|
color: #78613E;
|
|
font-size: px2rem(33);
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(181);
|
|
height: px2rem(68);
|
|
line-height: px2rem(68);
|
|
text-align: center;
|
|
background: url(../images/actOutBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
font-size: px2rem(28);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(190);
|
|
}
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
} |