2023-10-24 10:43:30 +08:00
|
|
|
@function px2rem($px) {
|
|
|
|
|
@return $px / 75+rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: "iconfont";
|
|
|
|
|
/* Project id 4251627 */
|
|
|
|
|
src: url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.woff2?t=1694762890271') format('woff2'),
|
|
|
|
|
url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.woff?t=1694762890271') format('woff'),
|
|
|
|
|
url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.ttf?t=1694762890271') format('truetype');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.iconfont {
|
|
|
|
|
font-family: "iconfont" !important;
|
|
|
|
|
font-size: px2rem(50);
|
|
|
|
|
font-style: normal;
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-tuzi-01:before {
|
|
|
|
|
content: "\e60d";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-tuzi3:before {
|
|
|
|
|
content: "\e600";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-a-ziyuan412:before {
|
|
|
|
|
content: "\e8bd";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-tuzi:before {
|
|
|
|
|
content: "\e648";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rabbit {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 99;
|
|
|
|
|
// width: px2rem(100 );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
// height: 100%;
|
|
|
|
|
background: linear-gradient(0deg, #4E2B8E 0%, #380B5E 100%);
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
width: 0;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
width: 0;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(931);
|
|
|
|
|
background: url(../images/header.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin: 0 auto -2.1rem;
|
|
|
|
|
|
|
|
|
|
.rule_icon {
|
|
|
|
|
width: px2rem(111);
|
|
|
|
|
height: px2rem(37);
|
|
|
|
|
line-height: px2rem(39);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(30);
|
|
|
|
|
top: px2rem(725);
|
|
|
|
|
text-align: center;
|
|
|
|
|
text-indent: 8px;
|
|
|
|
|
background: url(../images/rule_icon.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.giftBox {
|
|
|
|
|
width: px2rem(690);
|
|
|
|
|
height: px2rem(447);
|
|
|
|
|
background: url(../images/giftBox.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin: 0 auto px2rem(5);
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.swiper {
|
|
|
|
|
width: px2rem(492);
|
|
|
|
|
height: px2rem(300);
|
|
|
|
|
margin: px2rem(111) auto 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page1 {
|
|
|
|
|
// display: none;
|
|
|
|
|
width: px2rem(690);
|
|
|
|
|
height: px2rem(1958);
|
|
|
|
|
background: url(../images/page1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin: 0 auto px2rem(130);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-top: px2rem(90);
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.mc {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 67%;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
top: 8.5rem;
|
|
|
|
|
|
|
|
|
|
.mc_in {
|
|
|
|
|
width: px2rem(500);
|
|
|
|
|
height: px2rem(347);
|
|
|
|
|
background: url(../images/Pub_qp.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: px2rem(82);
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(34);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p2 {
|
|
|
|
|
top: 2.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.but {
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: px2rem(230);
|
|
|
|
|
height: px2rem(82);
|
|
|
|
|
line-height: px2rem(73);
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(32);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(223);
|
|
|
|
|
background: url(../images/pubBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
width: px2rem(485);
|
|
|
|
|
height: px2rem(83);
|
|
|
|
|
margin: 0 auto px2rem(0);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(212);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab1 {
|
|
|
|
|
background: url(../images/tab1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab2 {
|
|
|
|
|
background: url(../images/tab2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active1 {
|
|
|
|
|
background: url(../images/active1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active2 {
|
|
|
|
|
background: url(../images/active2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch {
|
|
|
|
|
width: px2rem(385);
|
|
|
|
|
height: px2rem(67);
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: px2rem(67);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(185);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(170);
|
|
|
|
|
height: 100%;
|
|
|
|
|
color: #F1E8F6;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
background: url(../images/task.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
background: url(../images/active.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.myCandy {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(330);
|
|
|
|
|
right: px2rem(78);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qp {
|
|
|
|
|
width: px2rem(162);
|
|
|
|
|
height: px2rem(104);
|
|
|
|
|
background: url(../images/qp.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(273);
|
|
|
|
|
left: px2rem(144);
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-top: px2rem(27);
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
margin-bottom: px2rem(4);
|
|
|
|
|
color: #CD33F4;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.candytitle {
|
|
|
|
|
width: px2rem(465);
|
|
|
|
|
height: px2rem(109);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(353);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.showBox {
|
|
|
|
|
width: px2rem(150);
|
|
|
|
|
height: px2rem(150);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0.8rem;
|
|
|
|
|
top: 4.3rem;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxs {
|
|
|
|
|
width: px2rem(150);
|
|
|
|
|
height: px2rem(150);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(457);
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
color: #F1E8F6;
|
|
|
|
|
font-size: px2rem(17);
|
|
|
|
|
text-indent: -12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxText {
|
|
|
|
|
width: px2rem(141);
|
|
|
|
|
height: px2rem(115);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(389);
|
|
|
|
|
right: px2rem(-5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxs1 {
|
|
|
|
|
left: px2rem(91);
|
|
|
|
|
background: url(../images/box1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxs2 {
|
|
|
|
|
left: px2rem(281);
|
|
|
|
|
background: url(../images/box2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxs3 {
|
|
|
|
|
left: px2rem(473);
|
|
|
|
|
background: url(../images/box3.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxOpen1 {
|
|
|
|
|
background: url(../images/boxOpen1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxOpen2 {
|
|
|
|
|
background: url(../images/boxOpen2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxOpen3 {
|
|
|
|
|
background: url(../images/boxOpen3.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.candyLine1,
|
|
|
|
|
.candyLine2 {
|
|
|
|
|
width: px2rem(67);
|
|
|
|
|
height: px2rem(5);
|
|
|
|
|
border-radius: px2rem(5);
|
|
|
|
|
background: linear-gradient(0deg, #9F50F7 0%, #FDF2BE 100%);
|
|
|
|
|
opacity: 0.71;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(530);
|
|
|
|
|
left: px2rem(221);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.candyLine2 {
|
|
|
|
|
left: px2rem(405);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.road {
|
|
|
|
|
width: px2rem(643);
|
|
|
|
|
height: px2rem(790);
|
|
|
|
|
background: url(../images/road.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(864);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
|
|
|
|
.gui {
|
|
|
|
|
width: px2rem(103);
|
|
|
|
|
height: px2rem(95);
|
|
|
|
|
left: 3.6rem;
|
|
|
|
|
bottom: 0.9rem;
|
|
|
|
|
position: absolute;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg {
|
|
|
|
|
width: px2rem(150);
|
|
|
|
|
height: px2rem(150);
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg1 {
|
|
|
|
|
left: px2rem(6);
|
|
|
|
|
top: px2rem(522);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg2 {
|
|
|
|
|
left: px2rem(176);
|
|
|
|
|
top: px2rem(341);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg3 {
|
|
|
|
|
left: px2rem(-2);
|
|
|
|
|
top: px2rem(70);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg4 {
|
|
|
|
|
left: px2rem(261);
|
|
|
|
|
top: px2rem(70);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg5 {
|
|
|
|
|
left: px2rem(508);
|
|
|
|
|
top: px2rem(-16);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg6 {
|
|
|
|
|
left: px2rem(420);
|
|
|
|
|
top: px2rem(252);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImg7 {
|
|
|
|
|
left: px2rem(509);
|
|
|
|
|
top: px2rem(515);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.boxImgSvgaA,
|
|
|
|
|
.boxImgSvgaB,
|
|
|
|
|
.boxImgSvgaC {
|
|
|
|
|
width: 103%;
|
|
|
|
|
height: 132%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
bottom: -0.6rem;
|
|
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
|
|
z-index: 3;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
border-radius: 0.26667rem;
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
.boxImgSvga_in1,
|
|
|
|
|
.boxImgSvga_in2,
|
|
|
|
|
.boxImgSvga_in3 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width: px2rem(350);
|
|
|
|
|
height: px2rem(350);
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.diceBox {
|
|
|
|
|
width: px2rem(660);
|
|
|
|
|
height: px2rem(209);
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: px2rem(105);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
background: url(../images/diceBox.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.diceQP {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: px2rem(168);
|
|
|
|
|
height: px2rem(167);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(17);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dice {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: px2rem(120);
|
|
|
|
|
height: px2rem(120);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(42);
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.diceSvga {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(120);
|
|
|
|
|
height: px2rem(120);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
bottom: px2rem(42);
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.diceLeftBut {
|
|
|
|
|
width: px2rem(212);
|
|
|
|
|
height: px2rem(83);
|
|
|
|
|
line-height: px2rem(83);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #FDF3EB;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(22);
|
|
|
|
|
top: px2rem(95);
|
|
|
|
|
background: url(../images/diceLeftBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.diceRightBut {
|
|
|
|
|
width: px2rem(212);
|
|
|
|
|
height: px2rem(83);
|
|
|
|
|
line-height: px2rem(83);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #FDF3EB;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(27);
|
|
|
|
|
top: px2rem(95);
|
|
|
|
|
background: url(../images/diceRightBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #4DE7E9;
|
|
|
|
|
font-size: px2rem(23);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: px2rem(-35);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page2 {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(690);
|
|
|
|
|
height: px2rem(1600);
|
|
|
|
|
background: url(../images/page2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: -1.25rem auto px2rem(53);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
width: px2rem(485);
|
|
|
|
|
height: px2rem(83);
|
|
|
|
|
margin: px2rem(98) auto px2rem(0);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(212);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab1 {
|
|
|
|
|
background: url(../images/tab1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab2 {
|
|
|
|
|
background: url(../images/tab2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active1 {
|
|
|
|
|
background: url(../images/active1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active2 {
|
|
|
|
|
background: url(../images/active2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch {
|
|
|
|
|
width: px2rem(385);
|
|
|
|
|
height: px2rem(67);
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: px2rem(67);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(190);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(170);
|
|
|
|
|
height: 100%;
|
|
|
|
|
color: #F1E8F6;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
background: url(../images/task.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
background: url(../images/active.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.taskText {
|
|
|
|
|
width: px2rem(590);
|
|
|
|
|
height: px2rem(109);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(293);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.taskTitle {
|
|
|
|
|
width: px2rem(309);
|
|
|
|
|
height: px2rem(138);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(379);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.myCandy {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(501);
|
|
|
|
|
left: px2rem(74);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dayTask {
|
|
|
|
|
width: px2rem(123);
|
|
|
|
|
height: px2rem(40);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(543);
|
|
|
|
|
left: px2rem(283);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.alltask {
|
|
|
|
|
width: px2rem(123);
|
|
|
|
|
height: px2rem(40);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(1008);
|
|
|
|
|
left: px2rem(283);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
background: linear-gradient(0deg, #6246BF 0%, #6734BB 100%);
|
|
|
|
|
border-radius: px2rem(20);
|
|
|
|
|
width: px2rem(570);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task1 {
|
|
|
|
|
height: px2rem(80);
|
|
|
|
|
line-height: px2rem(80);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0 px2rem(20) 0 px2rem(33);
|
|
|
|
|
top: px2rem(606);
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.but {
|
|
|
|
|
width: px2rem(136);
|
|
|
|
|
height: px2rem(61);
|
|
|
|
|
line-height: px2rem(48);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #F0FAFC;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
background: url(../images/taskBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
margin-top: px2rem(16);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.butActive {
|
|
|
|
|
background: url(../images/taskButActive.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task2 {
|
|
|
|
|
height: px2rem(200);
|
|
|
|
|
top: px2rem(716);
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(33);
|
|
|
|
|
top: px2rem(20);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.but {
|
|
|
|
|
width: px2rem(136);
|
|
|
|
|
height: px2rem(61);
|
|
|
|
|
line-height: px2rem(48);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #F0FAFC;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
background: url(../images/taskBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(20);
|
|
|
|
|
top: px2rem(86);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.butActive {
|
|
|
|
|
background: url(../images/taskButActive.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lineBox {
|
|
|
|
|
width: px2rem(360);
|
|
|
|
|
height: px2rem(40);
|
|
|
|
|
line-height: px2rem(40);
|
|
|
|
|
background: #3E1E7E;
|
|
|
|
|
border-radius: px2rem(40);
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(29);
|
|
|
|
|
top: px2rem(94);
|
|
|
|
|
color: #AF3022;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
text-indent: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
width: 0%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: px2rem(40);
|
|
|
|
|
background: url(../images/line.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
width: px2rem(40);
|
|
|
|
|
height: px2rem(40);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
background: linear-gradient(0deg, #9867ED 0%, #FAEFFC 100%);
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sp1 {
|
|
|
|
|
left: 30%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sp2 {
|
|
|
|
|
left: 60%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sp3 {
|
|
|
|
|
right: -0.26rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #5BF2FF;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b1,
|
|
|
|
|
.b2,
|
|
|
|
|
.b3 {
|
|
|
|
|
top: px2rem(-41);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b5,
|
|
|
|
|
.b6,
|
|
|
|
|
.b4 {
|
|
|
|
|
bottom: px2rem(-41);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b1 {
|
|
|
|
|
left: 17%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b2 {
|
|
|
|
|
left: 44%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b3 {
|
|
|
|
|
left: 73%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b5 {
|
|
|
|
|
left: 48%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b6 {
|
|
|
|
|
left: 78%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b4 {
|
|
|
|
|
left: 18%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task3 {
|
|
|
|
|
height: px2rem(120);
|
|
|
|
|
background: linear-gradient(0deg, #9546BF 0%, #6734BB 100%);
|
|
|
|
|
top: px2rem(1071);
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(30);
|
|
|
|
|
left: px2rem(33);
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
font-style: normal;
|
|
|
|
|
color: #5CDFF7;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(65);
|
|
|
|
|
left: px2rem(33);
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
font-style: normal;
|
|
|
|
|
color: #F0FF00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.but {
|
|
|
|
|
width: px2rem(136);
|
|
|
|
|
height: px2rem(61);
|
|
|
|
|
line-height: px2rem(48);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #F0FAFC;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
background: url(../images/taskBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(26);
|
2023-10-24 16:17:32 +08:00
|
|
|
top: 0.72667rem;
|
2023-10-24 10:43:30 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.butActive {
|
|
|
|
|
background: url(../images/taskButActive.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.task4 {
|
|
|
|
|
height: px2rem(120);
|
|
|
|
|
background: linear-gradient(0deg, #9546BF 0%, #6734BB 100%);
|
|
|
|
|
top: px2rem(1220);
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(30);
|
|
|
|
|
left: px2rem(33);
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
font-style: normal;
|
|
|
|
|
color: #5CDFF7;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(65);
|
|
|
|
|
left: px2rem(33);
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
font-style: normal;
|
|
|
|
|
color: #F0FF00;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.but {
|
|
|
|
|
width: px2rem(136);
|
|
|
|
|
height: px2rem(61);
|
|
|
|
|
line-height: px2rem(48);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #F0FAFC;
|
|
|
|
|
font-size: px2rem(21);
|
|
|
|
|
background: url(../images/taskBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(26);
|
2023-10-24 12:02:46 +08:00
|
|
|
top:0.72667rem;
|
2023-10-24 10:43:30 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.butActive {
|
|
|
|
|
background: url(../images/taskButActive.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page3 {
|
|
|
|
|
display: none;
|
|
|
|
|
width: px2rem(690);
|
|
|
|
|
min-height: px2rem(930);
|
|
|
|
|
background: url(../images/page3.png) no-repeat;
|
|
|
|
|
background-size: 100% px2rem(930);
|
|
|
|
|
margin: -1.2rem auto 2rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.tab {
|
|
|
|
|
width: px2rem(485);
|
|
|
|
|
height: px2rem(83);
|
|
|
|
|
margin: px2rem(98) auto px2rem(0);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(212);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab1 {
|
|
|
|
|
background: url(../images/tab1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab2 {
|
|
|
|
|
background: url(../images/tab2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active1 {
|
|
|
|
|
background: url(../images/active1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active2 {
|
|
|
|
|
background: url(../images/active2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.listTab {
|
|
|
|
|
width: px2rem(385);
|
|
|
|
|
height: px2rem(67);
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: px2rem(67);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(190);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(170);
|
|
|
|
|
height: 100%;
|
|
|
|
|
color: #F1E8F6;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
background: url(../images/task.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
background: url(../images/active.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rule_icon {
|
|
|
|
|
width: px2rem(120);
|
|
|
|
|
height: px2rem(56);
|
|
|
|
|
line-height: px2rem(51);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(0);
|
|
|
|
|
top: px2rem(263);
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: url(../images/rule_iconList.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
text-indent: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dayTab {
|
|
|
|
|
width: px2rem(335);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
height: px2rem(61);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(296);
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
width: px2rem(155);
|
|
|
|
|
height: px2rem(61);
|
|
|
|
|
line-height: px2rem(61);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #FDF3EB;
|
|
|
|
|
font-size: px2rem(18);
|
|
|
|
|
background: url(../images/dayTab.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
background: url(../images/dayTabActive.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.listTitle {
|
|
|
|
|
width: px2rem(456);
|
|
|
|
|
height: px2rem(109);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(353);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(483);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
2023-10-25 10:46:10 +08:00
|
|
|
width: 9.1rem;
|
2023-10-24 10:43:30 +08:00
|
|
|
height: px2rem(48);
|
|
|
|
|
line-height: px2rem(48);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
div {
|
2023-10-25 10:46:10 +08:00
|
|
|
width: 1.1rem;
|
2023-10-24 10:43:30 +08:00
|
|
|
height: px2rem(48);
|
|
|
|
|
background: linear-gradient(0deg, #9552E6 0%, #8E39F4 100%);
|
|
|
|
|
border-radius: px2rem(13);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
background: url(../images/timeActive.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topBox {
|
|
|
|
|
width: px2rem(696);
|
|
|
|
|
height: px2rem(546);
|
|
|
|
|
background: url(../images/topBoxBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 6rem auto 0;
|
|
|
|
|
|
|
|
|
|
.no1 {
|
|
|
|
|
width: px2rem(207);
|
|
|
|
|
height: px2rem(200);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 1.2rem;
|
|
|
|
|
|
|
|
|
|
.noBg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.noImg {
|
|
|
|
|
width: px2rem(153);
|
|
|
|
|
height: px2rem(64);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(-64);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(154);
|
|
|
|
|
height: px2rem(154);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(29);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: px2rem(-35);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: px2rem(-65);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no2 {
|
|
|
|
|
width: px2rem(180);
|
|
|
|
|
height: px2rem(174);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: px2rem(49);
|
|
|
|
|
top: 2.5rem;
|
|
|
|
|
|
|
|
|
|
.noBg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.noImg {
|
|
|
|
|
width: px2rem(133);
|
|
|
|
|
height: px2rem(56);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(-56);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(134);
|
|
|
|
|
height: px2rem(134);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(25);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: px2rem(-35);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: px2rem(-65);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no3 {
|
|
|
|
|
width: px2rem(180);
|
|
|
|
|
height: px2rem(174);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: px2rem(49);
|
|
|
|
|
top: 2.5rem;
|
|
|
|
|
|
|
|
|
|
.noBg {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.noImg {
|
|
|
|
|
width: px2rem(133);
|
|
|
|
|
height: px2rem(56);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(-56);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(134);
|
|
|
|
|
height: px2rem(134);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(25);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: px2rem(-35);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: px2rem(-65);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lists {
|
|
|
|
|
width: px2rem(610);
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
margin: 0 auto px2rem(160);
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(120);
|
|
|
|
|
line-height: px2rem(120);
|
|
|
|
|
border-radius: px2rem(20);
|
|
|
|
|
background: #703EA8;
|
|
|
|
|
margin-bottom: px2rem(10);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 px2rem(27) 0 px2rem(27);
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
color: #fff;
|
|
|
|
|
// margin-right: px2rem(26);
|
|
|
|
|
// font-size: px2rem(37);
|
|
|
|
|
margin-right: 0.2rem;
|
|
|
|
|
font-size: 0.35rem;
|
|
|
|
|
float: left;
|
|
|
|
|
width: 0.35rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(94);
|
|
|
|
|
height: px2rem(94);
|
|
|
|
|
display: block;
|
|
|
|
|
margin-top: px2rem(16);
|
|
|
|
|
margin-right: px2rem(24);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 2.6rem;
|
|
|
|
|
white-space: nowrap; //不换行
|
|
|
|
|
overflow: hidden; //超出隐藏
|
|
|
|
|
text-overflow: ellipsis; //超出文本省略号
|
|
|
|
|
float: left;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(29);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(26);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.my {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(142);
|
|
|
|
|
background: #615DC8;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
|
|
|
|
|
.li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: px2rem(142);
|
|
|
|
|
line-height: px2rem(142);
|
|
|
|
|
border-radius: px2rem(20);
|
|
|
|
|
margin-bottom: px2rem(10);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 px2rem(94) 0 px2rem(68);
|
|
|
|
|
|
|
|
|
|
.num {
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-right: px2rem(26);
|
|
|
|
|
font-size: px2rem(37);
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tx {
|
|
|
|
|
width: px2rem(94);
|
|
|
|
|
height: px2rem(94);
|
|
|
|
|
display: block;
|
|
|
|
|
margin-top: px2rem(18);
|
|
|
|
|
margin-right: px2rem(24);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nick {
|
|
|
|
|
width: 2.8rem;
|
|
|
|
|
white-space: nowrap; //不换行
|
|
|
|
|
overflow: hidden; //超出隐藏
|
|
|
|
|
text-overflow: ellipsis; //超出文本省略号
|
|
|
|
|
float: left;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(29);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.score {
|
|
|
|
|
float: right;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(26);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rule {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.rule_in {
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width: px2rem(668);
|
|
|
|
|
height: px2rem(1027);
|
|
|
|
|
background: url(../images/rule_bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.cen {
|
|
|
|
|
width: px2rem(600);
|
|
|
|
|
height: px2rem(800);
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
margin: px2rem(129) auto 0;
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
margin-bottom: px2rem(15);
|
|
|
|
|
line-height: 0.52rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.listRule {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.listRule_in {
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(1371);
|
|
|
|
|
background: url(../images/listRuleBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.listRuletitle {
|
|
|
|
|
width: px2rem(263);
|
|
|
|
|
height: px2rem(59);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(52);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
width: px2rem(608);
|
|
|
|
|
height: px2rem(1140);
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
margin: px2rem(182) auto 0;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: px2rem(608);
|
|
|
|
|
height: px2rem(1749);
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box_pub {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.box_pub_in {
|
|
|
|
|
width: px2rem(750);
|
|
|
|
|
height: px2rem(1050);
|
|
|
|
|
background: url(../images/box_pub.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.box_pub_Title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(51);
|
|
|
|
|
width: px2rem(213);
|
|
|
|
|
height: px2rem(60);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(29);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p1 {
|
|
|
|
|
top: px2rem(230);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p2 {
|
|
|
|
|
top: px2rem(266);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p3 {
|
|
|
|
|
top: px2rem(300);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p4 {
|
|
|
|
|
top: px2rem(346);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box_pub_ul {
|
|
|
|
|
width: px2rem(540);
|
|
|
|
|
height: 6.9rem;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(437);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
|
|
// li {
|
|
|
|
|
// width: px2rem(140);
|
|
|
|
|
// height: px2rem(140);
|
|
|
|
|
// margin-bottom: px2rem(100);
|
|
|
|
|
// position: relative;
|
|
|
|
|
// background: url(../images/box_pub_ul_liBg.png) no-repeat;
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
// .gift {
|
|
|
|
|
// width: px2rem(99);
|
|
|
|
|
// height: px2rem(106);
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 50%;
|
|
|
|
|
// transform: translateX(-50%);
|
|
|
|
|
// top: px2rem(17);
|
|
|
|
|
// // border-radius: 50%;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// p {
|
|
|
|
|
// width: 140%;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
// color: #FED968;
|
|
|
|
|
// font-size: px2rem(29);
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 50%;
|
|
|
|
|
// transform: translateX(-50%);
|
|
|
|
|
// bottom: px2rem(-39);
|
|
|
|
|
// white-space: nowrap;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// b {
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
// color: #FED968;
|
|
|
|
|
// font-size: px2rem(24);
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 0;
|
|
|
|
|
// bottom: -0.9rem;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
li {
|
|
|
|
|
width: px2rem(555);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.li1 {
|
|
|
|
|
height: px2rem(500);
|
|
|
|
|
background: url(../images/box_pubGift1.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.li2 {
|
2023-10-24 16:17:32 +08:00
|
|
|
height: px2rem(710);
|
2023-10-24 10:43:30 +08:00
|
|
|
background: url(../images/box_pubGift2.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.li3 {
|
|
|
|
|
height: px2rem(1173);
|
|
|
|
|
background: url(../images/box_pubGift3.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.gx {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.gx_in {
|
|
|
|
|
width: px2rem(668);
|
|
|
|
|
height: px2rem(641);
|
|
|
|
|
background: url(../images/gxBg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.gxBox {
|
|
|
|
|
width: 8rem;
|
|
|
|
|
height: 5.4rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: px2rem(121);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
width: px2rem(166);
|
|
|
|
|
height: px2rem(166);
|
|
|
|
|
border: px2rem(1) solid #CA81F4;
|
|
|
|
|
background: linear-gradient(0deg, #5F16AB 0%, #6A18B5 100%);
|
|
|
|
|
border-radius: px2rem(20);
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-bottom: px2rem(44);
|
|
|
|
|
|
|
|
|
|
.gift,
|
|
|
|
|
img {
|
|
|
|
|
width: px2rem(99);
|
|
|
|
|
height: px2rem(106);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ts {}
|
|
|
|
|
|
|
|
|
|
.mp {
|
|
|
|
|
width: px2rem(145);
|
|
|
|
|
height: px2rem(40);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.qp {
|
|
|
|
|
width: px2rem(100);
|
|
|
|
|
height: px2rem(80);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.zj {}
|
|
|
|
|
|
|
|
|
|
.lw {}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(22);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
bottom: px2rem(-35);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.but {
|
|
|
|
|
width: px2rem(230);
|
|
|
|
|
height: px2rem(82);
|
|
|
|
|
line-height: px2rem(82);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(32);
|
|
|
|
|
background: url(../images/pubBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(545);
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.endActivity {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.endActivity_in {
|
|
|
|
|
width: px2rem(500);
|
|
|
|
|
height: px2rem(347);
|
|
|
|
|
background: url(../images/Pub_qp.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: px2rem(123);
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(34);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.but {
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: px2rem(230);
|
|
|
|
|
height: px2rem(82);
|
|
|
|
|
line-height: px2rem(73);
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(32);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: px2rem(223);
|
|
|
|
|
background: url(../images/pubBut.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.zg {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.zg_in {
|
|
|
|
|
width: px2rem(568);
|
|
|
|
|
height: px2rem(400);
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.record_box {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 9;
|
|
|
|
|
background: rgba(0, 0, 0, .6);
|
|
|
|
|
|
|
|
|
|
.record_box_in {
|
|
|
|
|
width: px2rem(668);
|
|
|
|
|
height: px2rem(641);
|
|
|
|
|
background: url(../images/record_box.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 5rem;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: px2rem(208);
|
|
|
|
|
left: 0;
|
|
|
|
|
padding: 0 px2rem(111) 0 px2rem(82);
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: px2rem(10);
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
height: px2rem(50);
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
font-size: px2rem(26.66);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
color: #F5B8FE;
|
|
|
|
|
font-size: px2rem(24);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
height: px2rem(50);
|
|
|
|
|
line-height: px2rem(50);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: px2rem(26.66);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
