2072 lines
54 KiB
SCSS
2072 lines
54 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
background: #A89AFF;
|
|
}
|
|
|
|
// 返回按钮
|
|
.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 {
|
|
width: px2rem(750);
|
|
height: px2rem(750);
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: 0 auto px2rem(0);
|
|
|
|
.rule_icon {
|
|
width: px2rem(62);
|
|
height: px2rem(176);
|
|
position: absolute;
|
|
top: px2rem(180);
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(720);
|
|
height: px2rem(112);
|
|
margin: 0 auto px2rem(0);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: px2rem(240);
|
|
height: px2rem(104);
|
|
line-height: px2rem(110);
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act {
|
|
height: px2rem(112);
|
|
line-height: px2rem(112);
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #663803;
|
|
}
|
|
}
|
|
|
|
.page1 {
|
|
// display: none;
|
|
|
|
.bg1 {
|
|
width: px2rem(750);
|
|
height: px2rem(1136);
|
|
background: url(../images/page1_bg1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto 0;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(280);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(104);
|
|
}
|
|
|
|
.loveBox {
|
|
width: px2rem(254);
|
|
height: px2rem(250);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 5.86rem;
|
|
position: absolute;
|
|
}
|
|
|
|
.mp{
|
|
width: px2rem(145);
|
|
height: px2rem(40);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-58%);
|
|
top: px2rem(532);
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
color: #521C98;
|
|
}
|
|
|
|
.p1 {
|
|
top: px2rem(178);
|
|
}
|
|
|
|
.p2 {
|
|
top: px2rem(210);
|
|
}
|
|
|
|
.p3 {
|
|
top: px2rem(656);
|
|
}
|
|
|
|
.p4 {
|
|
width: px2rem(496);
|
|
top: px2rem(1008);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
line-height: 0.45rem;
|
|
}
|
|
|
|
.giftList {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
|
|
.qp {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/qp.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(18);
|
|
}
|
|
|
|
.giftName {
|
|
width: 100%;
|
|
height: px2rem(34);
|
|
line-height: px2rem(34);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(124);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: url(../images/giftNameBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.giftVAlue {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -0.45rem;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.filter {
|
|
filter: grayscale(100%);
|
|
|
|
.giftName {
|
|
color: #E2E2E2;
|
|
}
|
|
|
|
.giftVAlue {
|
|
color: #99999A;
|
|
}
|
|
}
|
|
|
|
.giftList1 {
|
|
left: px2rem(174);
|
|
top: px2rem(284);
|
|
}
|
|
|
|
.giftList2 {
|
|
left: px2rem(481);
|
|
top: px2rem(284);
|
|
}
|
|
|
|
.giftList3 {
|
|
left: px2rem(512);
|
|
top: px2rem(502);
|
|
}
|
|
|
|
.giftList4 {
|
|
left: px2rem(418);
|
|
top: px2rem(720);
|
|
}
|
|
|
|
.giftList5 {
|
|
left: px2rem(176);
|
|
top: px2rem(720);
|
|
}
|
|
|
|
.giftList6 {
|
|
left: px2rem(82);
|
|
top: px2rem(510);
|
|
}
|
|
}
|
|
|
|
.bg2 {
|
|
width: px2rem(750);
|
|
height: px2rem(1040);
|
|
background: url(../images/page1_bg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin: 0 auto px2rem(36);
|
|
|
|
.title {
|
|
width: px2rem(280);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(108);
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(686);
|
|
height: 9.5rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.2rem;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(72);
|
|
line-height: px2rem(71);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: 50%;
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.left {
|
|
line-height: normal;
|
|
|
|
p {
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
margin-bottom: px2rem(2);
|
|
}
|
|
|
|
span {
|
|
font-size: px2rem(20);
|
|
}
|
|
}
|
|
}
|
|
|
|
.liTitle {
|
|
div {
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
color: #521C98;
|
|
}
|
|
}
|
|
|
|
.null {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
color: #521C98;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page2 {
|
|
display: none;
|
|
|
|
.box {
|
|
width: px2rem(750);
|
|
height: px2rem(986);
|
|
margin: 0 auto px2rem(80);
|
|
background: url(../images/page2Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
width: px2rem(588);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(112);
|
|
}
|
|
|
|
.page2Buy_icon {
|
|
width: px2rem(158);
|
|
height: px2rem(72);
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(292);
|
|
z-index: 2;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.i1 {
|
|
// width: px2rem(284);
|
|
height: px2rem(42);
|
|
line-height: px2rem(42);
|
|
border-radius: px2rem(42);
|
|
text-align: center;
|
|
color: #EAE7FB;
|
|
font-size: px2rem(24);
|
|
top: px2rem(190);
|
|
background: #9789E9;
|
|
padding: 0 px2rem(20);
|
|
}
|
|
|
|
.i2 {
|
|
width: px2rem(496);
|
|
height: px2rem(68);
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
line-height: px2rem(28.13);
|
|
top: px2rem(250);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.i3 {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #A78CD2;
|
|
font-size: px2rem(24);
|
|
top: px2rem(320);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasks {
|
|
width: px2rem(654);
|
|
height: px2rem(252);
|
|
position: absolute;
|
|
top: px2rem(394);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #F1F1FF;
|
|
border-radius: px2rem(16);
|
|
|
|
.giftBox {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: px2rem(28);
|
|
top: px2rem(24);
|
|
|
|
.qp {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/qp.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(18);
|
|
}
|
|
|
|
.giftName {
|
|
width: 100%;
|
|
height: px2rem(34);
|
|
line-height: px2rem(34);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(124);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: url(../images/giftNameBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.giftVAlue {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -0.45rem;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
left: px2rem(212);
|
|
}
|
|
|
|
.p1 {
|
|
top: px2rem(34);
|
|
}
|
|
|
|
.p2 {
|
|
top: px2rem(92);
|
|
color: #7347AD;
|
|
}
|
|
|
|
.p3 {
|
|
top: px2rem(176);
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(332);
|
|
height: px2rem(24);
|
|
line-height: px2rem(24);
|
|
border-radius: px2rem(24);
|
|
position: absolute;
|
|
left: px2rem(300);
|
|
top: px2rem(90);
|
|
background: #7466c4;
|
|
|
|
span {
|
|
width: 10%;
|
|
height: px2rem(20);
|
|
border-radius: px2rem(20);
|
|
position: absolute;
|
|
// border-left: px2rem(2) solid #7151CE;
|
|
// border-right: px2rem(2) solid #7151CE;
|
|
left: px2rem(2);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
|
|
}
|
|
|
|
.i {
|
|
// color: #fceb02;
|
|
color: #c4a8a8;
|
|
z-index: 2;
|
|
position: absolute;
|
|
right: -1.8rem;
|
|
height: 100%;
|
|
line-height: px2rem(24);
|
|
width: auto;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
width: px2rem(230);
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
color: #663803;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
top: px2rem(164);
|
|
left: px2rem(410);
|
|
background: url(../images/page2But.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.tasks2 {
|
|
width: px2rem(654);
|
|
height: px2rem(252);
|
|
position: absolute;
|
|
top: px2rem(670);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #F1F1FF;
|
|
border-radius: px2rem(16);
|
|
|
|
.giftBox {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: px2rem(28);
|
|
top: px2rem(24);
|
|
|
|
.qp {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/qp.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(18);
|
|
}
|
|
|
|
.giftName {
|
|
width: 100%;
|
|
height: px2rem(34);
|
|
line-height: px2rem(34);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(124);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: url(../images/giftNameBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.giftVAlue {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -0.45rem;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
left: px2rem(212);
|
|
}
|
|
|
|
.p1 {
|
|
top: px2rem(34);
|
|
}
|
|
|
|
.p2 {
|
|
top: px2rem(92);
|
|
color: #7347AD;
|
|
}
|
|
|
|
.p3 {
|
|
top: px2rem(176);
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(332);
|
|
height: px2rem(24);
|
|
line-height: px2rem(24);
|
|
border-radius: px2rem(24);
|
|
position: absolute;
|
|
left: px2rem(300);
|
|
top: px2rem(90);
|
|
background: #7466c4;
|
|
|
|
span {
|
|
width: 98.8%;
|
|
height: px2rem(20);
|
|
border-radius: px2rem(20);
|
|
position: absolute;
|
|
// border: px2rem(2) solid #7151CE;
|
|
left: px2rem(2);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
|
|
}
|
|
|
|
.i {
|
|
// color: #fceb02;
|
|
color: #c4a8a8;
|
|
z-index: 2;
|
|
position: absolute;
|
|
right: -1.8rem;
|
|
height: 100%;
|
|
line-height: px2rem(24);
|
|
width: auto;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
width: px2rem(230);
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
color: #663803;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
top: px2rem(164);
|
|
left: px2rem(410);
|
|
background: url(../images/page2But.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page3 {
|
|
display: none;
|
|
|
|
.box {
|
|
width: px2rem(750);
|
|
height: px2rem(800);
|
|
margin: 0 auto px2rem(0);
|
|
background: url(../images/page3boxBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.page2Buy_icon {
|
|
width: px2rem(158);
|
|
height: px2rem(72);
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(292);
|
|
z-index: 2;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.i2 {
|
|
width: px2rem(496);
|
|
height: px2rem(68);
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
line-height: px2rem(35);
|
|
top: px2rem(95);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasks {
|
|
width: px2rem(654);
|
|
height: px2rem(252);
|
|
position: absolute;
|
|
top: px2rem(208);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #F1F1FF;
|
|
border-radius: px2rem(16);
|
|
|
|
.giftBox {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: px2rem(28);
|
|
top: px2rem(24);
|
|
|
|
.qp {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/page3ts.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(18);
|
|
}
|
|
|
|
.giftName {
|
|
width: 100%;
|
|
height: px2rem(34);
|
|
line-height: px2rem(34);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(124);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: url(../images/giftNameBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.giftVAlue {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -0.45rem;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
left: px2rem(212);
|
|
}
|
|
|
|
.p1 {
|
|
top: px2rem(34);
|
|
}
|
|
|
|
.p2 {
|
|
top: px2rem(92);
|
|
color: #7347AD;
|
|
}
|
|
|
|
.p3 {
|
|
top: px2rem(176);
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(332);
|
|
height: px2rem(24);
|
|
line-height: px2rem(24);
|
|
border-radius: px2rem(24);
|
|
position: absolute;
|
|
left: px2rem(300);
|
|
top: px2rem(90);
|
|
background: #7466c4;
|
|
|
|
span {
|
|
width: 10%;
|
|
height: px2rem(20);
|
|
border-radius: px2rem(20);
|
|
position: absolute;
|
|
// border: px2rem(2) solid #7151CE;
|
|
left: px2rem(2);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
|
|
}
|
|
|
|
.i {
|
|
// color: #fceb02;
|
|
color: #c4a8a8;
|
|
z-index: 2;
|
|
position: absolute;
|
|
right: -1.8rem;
|
|
height: 100%;
|
|
line-height: px2rem(24);
|
|
width: auto;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
width: px2rem(160);
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
color: #663803;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
top: px2rem(164);
|
|
left: px2rem(470);
|
|
background: url(../images/page2But.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/buy_z.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
.tasks2 {
|
|
width: px2rem(654);
|
|
height: px2rem(252);
|
|
position: absolute;
|
|
top: px2rem(484);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #F1F1FF;
|
|
border-radius: px2rem(16);
|
|
|
|
.giftBox {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: px2rem(28);
|
|
top: px2rem(24);
|
|
|
|
.qp {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/page3qp.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(18);
|
|
}
|
|
|
|
.giftName {
|
|
width: 100%;
|
|
height: px2rem(34);
|
|
line-height: px2rem(34);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(124);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: url(../images/giftNameBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.giftVAlue {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -0.45rem;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
p {
|
|
position: absolute;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
left: px2rem(212);
|
|
}
|
|
|
|
.p1 {
|
|
top: px2rem(34);
|
|
}
|
|
|
|
.p2 {
|
|
top: px2rem(92);
|
|
color: #7347AD;
|
|
}
|
|
|
|
.p3 {
|
|
top: px2rem(176);
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(332);
|
|
height: px2rem(24);
|
|
line-height: px2rem(24);
|
|
border-radius: px2rem(24);
|
|
position: absolute;
|
|
left: px2rem(300);
|
|
top: px2rem(90);
|
|
background: #7466c4;
|
|
|
|
span {
|
|
width: 10%;
|
|
height: px2rem(20);
|
|
border-radius: px2rem(20);
|
|
position: absolute;
|
|
// border: px2rem(2) solid #7151CE;
|
|
left: px2rem(2);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%);
|
|
}
|
|
|
|
.i {
|
|
// color: #fceb02;
|
|
color: #c4a8a8;
|
|
z-index: 2;
|
|
position: absolute;
|
|
right: -1.8rem;
|
|
height: 100%;
|
|
line-height: px2rem(24);
|
|
width: auto;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
width: px2rem(160);
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
color: #663803;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
top: px2rem(164);
|
|
left: px2rem(470);
|
|
background: url(../images/page2But.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/buy_z.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top3 {
|
|
width: px2rem(750);
|
|
height: px2rem(784);
|
|
margin: 0 auto px2rem(16);
|
|
position: relative;
|
|
background: url(../images/pageTop3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-family: Source Han Serif CN, Source Han Serif CN;
|
|
text-shadow: px2rem(2) px2rem(4) px2rem(8) rgba(93, 67, 196, 0.8);
|
|
color: #fff;
|
|
font-size: px2rem(44);
|
|
font-weight: 400;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(35);
|
|
}
|
|
|
|
.rule_icon {
|
|
width: px2rem(158);
|
|
height: px2rem(72);
|
|
position: absolute;
|
|
right: 0;
|
|
top: px2rem(118);
|
|
z-index: 3;
|
|
}
|
|
|
|
.no1 {
|
|
width: px2rem(670);
|
|
height: px2rem(232);
|
|
position: absolute;
|
|
top: px2rem(152);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.leftlogo {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(78);
|
|
left: px2rem(208);
|
|
}
|
|
|
|
.rightlogo {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(78);
|
|
right: px2rem(208);
|
|
}
|
|
|
|
.name {
|
|
width: px2rem(340);
|
|
position: absolute;
|
|
bottom: px2rem(-34);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #521C98;
|
|
font-weight: 400;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-size: px2rem(22);
|
|
text-align: center;
|
|
|
|
i {
|
|
color: #9E82CB;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.score {
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%);
|
|
width: px2rem(210);
|
|
height: px2rem(34);
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-76);
|
|
text-align: center;
|
|
line-height: px2rem(34);
|
|
}
|
|
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(312);
|
|
height: px2rem(144);
|
|
position: absolute;
|
|
top: px2rem(484);
|
|
left: px2rem(56);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.leftlogo {
|
|
width: px2rem(96);
|
|
height: px2rem(96);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(30);
|
|
left: px2rem(54);
|
|
}
|
|
|
|
.rightlogo {
|
|
width: px2rem(96);
|
|
height: px2rem(96);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(30);
|
|
right: px2rem(54);
|
|
}
|
|
|
|
.name {
|
|
width: px2rem(340);
|
|
position: absolute;
|
|
bottom: px2rem(-34);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #521C98;
|
|
font-weight: 400;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-size: px2rem(22);
|
|
text-align: center;
|
|
|
|
i {
|
|
color: #9E82CB;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.score {
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%);
|
|
width: px2rem(210);
|
|
height: px2rem(34);
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-76);
|
|
text-align: center;
|
|
line-height: px2rem(34);
|
|
}
|
|
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(312);
|
|
height: px2rem(144);
|
|
position: absolute;
|
|
top: px2rem(484);
|
|
right: px2rem(56);
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.leftlogo {
|
|
width: px2rem(96);
|
|
height: px2rem(96);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(29);
|
|
left: px2rem(57);
|
|
}
|
|
|
|
.rightlogo {
|
|
width: px2rem(96);
|
|
height: px2rem(96);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: px2rem(29);
|
|
right: px2rem(56);
|
|
}
|
|
|
|
.name {
|
|
width: px2rem(340);
|
|
position: absolute;
|
|
bottom: px2rem(-34);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #521C98;
|
|
font-weight: 400;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-size: px2rem(22);
|
|
text-align: center;
|
|
|
|
i {
|
|
color: #9E82CB;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.score {
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%);
|
|
width: px2rem(210);
|
|
height: px2rem(34);
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-76);
|
|
text-align: center;
|
|
line-height: px2rem(34);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(718);
|
|
margin: 0 auto px2rem(160);
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(140);
|
|
background: url(../images/page3Li.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: px2rem(12);
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(48);
|
|
|
|
.num {
|
|
width: px2rem(72);
|
|
height: px2rem(72);
|
|
float: left;
|
|
margin-top: px2rem(34);
|
|
text-align: center;
|
|
line-height: px2rem(72);
|
|
color: #521C98;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
background: url(../images/love_z.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.leftTx {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(136);
|
|
top: px2rem(30);
|
|
border: px2rem(2) solid #fff;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rightTx {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(200);
|
|
top: px2rem(30);
|
|
border: px2rem(2) solid #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.leftName {
|
|
width: px2rem(160);
|
|
color: #521C98;
|
|
font-size: px2rem(26);
|
|
font-weight: 500;
|
|
//超出省略号
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(296);
|
|
top: px2rem(36);
|
|
}
|
|
|
|
.rightName {
|
|
width: px2rem(160);
|
|
color: #521C98;
|
|
font-size: px2rem(26);
|
|
font-weight: 500;
|
|
//超出省略号
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(296);
|
|
top: px2rem(74);
|
|
}
|
|
|
|
.score {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: px2rem(140);
|
|
color: #521C98;
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
position: fixed;
|
|
width: px2rem(750);
|
|
height: 2.2rem;
|
|
// height: 8.74667rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0rem;
|
|
z-index: 99;
|
|
background: url(../images/myBg2.png) no-repeat;
|
|
// background: url(../images/myBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
transition: all .4s;
|
|
|
|
.icon {
|
|
width: px2rem(64);
|
|
height: px2rem(92);
|
|
position: absolute;
|
|
right: px2rem(32);
|
|
top: px2rem(-41);
|
|
}
|
|
|
|
.scroll {
|
|
overflow: hidden;
|
|
// overflow-y: scroll;
|
|
height: 7.74667rem;
|
|
margin-top: 0.4rem;
|
|
// margin-top: 0.9rem;
|
|
}
|
|
|
|
.myBox {
|
|
width: 100%;
|
|
height: px2rem(140);
|
|
margin-bottom: px2rem(12);
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(48);
|
|
|
|
.num {
|
|
width: px2rem(72);
|
|
height: px2rem(72);
|
|
float: left;
|
|
margin-top: px2rem(34);
|
|
text-align: center;
|
|
line-height: px2rem(72);
|
|
color: #663803;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
background: url(../images/love_h.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.leftTx {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(136);
|
|
top: px2rem(30);
|
|
border: px2rem(2) solid #fff;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rightTx {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(200);
|
|
top: px2rem(30);
|
|
border: px2rem(2) solid #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.leftName {
|
|
width: px2rem(160);
|
|
color: #521C98;
|
|
font-size: px2rem(26);
|
|
font-weight: 500;
|
|
//超出省略号
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(296);
|
|
top: px2rem(36);
|
|
}
|
|
|
|
.rightName {
|
|
width: px2rem(160);
|
|
color: #521C98;
|
|
font-size: px2rem(26);
|
|
font-weight: 500;
|
|
//超出省略号
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(296);
|
|
top: px2rem(74);
|
|
}
|
|
|
|
.score {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: px2rem(140);
|
|
color: #521C98;
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.buyRecords {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
.buyRecords_in {
|
|
width: px2rem(750);
|
|
height: px2rem(1040);
|
|
background: url(../images/page1_bg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: px2rem(280);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(108);
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(686);
|
|
height: 9.5rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.2rem;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(72);
|
|
line-height: px2rem(71);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: 50%;
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.left {
|
|
line-height: normal;
|
|
|
|
p {
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
margin-bottom: px2rem(2);
|
|
}
|
|
|
|
span {
|
|
font-size: px2rem(20);
|
|
}
|
|
}
|
|
}
|
|
|
|
.liTitle {
|
|
div {
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
color: #521C98;
|
|
}
|
|
}
|
|
|
|
.null {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
color: #521C98;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
.rule_in {
|
|
width: px2rem(750);
|
|
height: px2rem(1040);
|
|
background: url(../images/page1_bg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: px2rem(280);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(108);
|
|
}
|
|
|
|
|
|
|
|
ul {
|
|
width: px2rem(686);
|
|
height: 9.5rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.2rem;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
width: 100%;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
line-height: px2rem(28);
|
|
margin-bottom: px2rem(10);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(46);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.end {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
.end_in {
|
|
width: px2rem(702);
|
|
height: px2rem(450);
|
|
background: url(../images/end.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: px2rem(320);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(170);
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(360);
|
|
height: px2rem(80);
|
|
text-align: center;
|
|
line-height: px2rem(80);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(64);
|
|
background: url(../images/close.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.failureBuy {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
.failureBuy_in {
|
|
width: px2rem(702);
|
|
height: px2rem(450);
|
|
background: url(../images/end.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: px2rem(280);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(100);
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-size: px2rem(30);
|
|
position: absolute;
|
|
top: 2.75rem;
|
|
left: 0;
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(276);
|
|
height: px2rem(80);
|
|
text-align: center;
|
|
line-height: px2rem(80);
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
bottom: px2rem(64);
|
|
}
|
|
|
|
.close {
|
|
left: px2rem(64);
|
|
background: url(../images/close.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
|
|
.ok {
|
|
right: px2rem(64);
|
|
background: url(../images/ok.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #663803;
|
|
}
|
|
}
|
|
}
|
|
|
|
.success {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
.success_in {
|
|
width: px2rem(702);
|
|
height: px2rem(690);
|
|
background: url(../images/buyBgPub.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: px2rem(280);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(112);
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-size: px2rem(28);
|
|
position: absolute;
|
|
top: px2rem(446);
|
|
left: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.giftListSuccess {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
top: px2rem(190);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.qp {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/qp.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(18);
|
|
}
|
|
|
|
.giftName {
|
|
width: 100%;
|
|
height: px2rem(34);
|
|
line-height: px2rem(34);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(124);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: url(../images/giftNameBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.giftVAlue {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -0.45rem;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(360);
|
|
height: px2rem(80);
|
|
text-align: center;
|
|
line-height: px2rem(80);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(64);
|
|
background: url(../images/close.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sure {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
.sure_in {
|
|
width: px2rem(702);
|
|
height: px2rem(690);
|
|
background: url(../images/buyBgPub.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.title {
|
|
width: px2rem(280);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(100);
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #521C98;
|
|
font-size: px2rem(28);
|
|
position: absolute;
|
|
top: px2rem(466);
|
|
left: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
.giftListSuccess {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
top: px2rem(190);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.qp {
|
|
width: px2rem(156);
|
|
height: px2rem(156);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: url(../images/qp.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gift {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(18);
|
|
}
|
|
|
|
.giftName {
|
|
width: 100%;
|
|
height: px2rem(34);
|
|
line-height: px2rem(34);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(124);
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
background: url(../images/giftNameBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
.giftVAlue {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -0.45rem;
|
|
color: #521C98;
|
|
font-size: px2rem(24);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(276);
|
|
height: px2rem(80);
|
|
text-align: center;
|
|
line-height: px2rem(80);
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
bottom: px2rem(64);
|
|
}
|
|
|
|
.close {
|
|
left: px2rem(64);
|
|
background: url(../images/close.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
|
|
.ok {
|
|
right: px2rem(64);
|
|
background: url(../images/ok.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #663803;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page3Rule {
|
|
display: none;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, .8);
|
|
z-index: 99;
|
|
|
|
.page3Rule_in {
|
|
width: px2rem(750);
|
|
height: px2rem(1040);
|
|
background: url(../images/page3RuleBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
width: px2rem(368);
|
|
height: px2rem(50);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(108);
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(656);
|
|
height: 9.2rem;
|
|
margin: px2rem(194) auto 0;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
img{
|
|
display: block;
|
|
width: px2rem(656);
|
|
margin: 0 auto px2rem(20);
|
|
}
|
|
}
|
|
}
|
|
} |