2135 lines
57 KiB
SCSS
2135 lines
57 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
html {}
|
|
|
|
body {
|
|
width: 100%;
|
|
height: px2rem(1624, );
|
|
background: linear-gradient(90deg, #9980FF, #EB8FEA);
|
|
margin: 0 auto;
|
|
// box-sizing: border-box;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70, );
|
|
left: px2rem(34, );
|
|
z-index: 9999;
|
|
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(818, );
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto -2.4rem;
|
|
position: relative;
|
|
|
|
.rule {
|
|
width: px2rem(138, );
|
|
height: px2rem(46, );
|
|
line-height: px2rem(46, );
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 6rem;
|
|
right: 0;
|
|
color: #F8F3FC;
|
|
font-size: px2rem(26, );
|
|
background: url(../images/rule_bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.titleHeader {
|
|
position: absolute;
|
|
width: px2rem(677, );
|
|
height: px2rem(66, );
|
|
line-height: px2rem(66, );
|
|
text-align: center;
|
|
top: px2rem(580, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #FFFFFF;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
background: url(../images/titleHeader.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.betrothal {
|
|
width: px2rem(696, );
|
|
height: px2rem(319, );
|
|
background: url(../images/betrothal.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(30, );
|
|
position: relative;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(118, );
|
|
|
|
.swiper {
|
|
width: px2rem(639, );
|
|
height: px2rem(174, );
|
|
margin: 0 auto 0;
|
|
overflow: hidden;
|
|
|
|
.swiper-wrapper {
|
|
|
|
.swiper-slide {
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
width: px2rem(700, );
|
|
height: px2rem(80, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto px2rem(12, );
|
|
|
|
div {
|
|
width: 25%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab3 {
|
|
background: url(../images/tab3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab4 {
|
|
background: url(../images/tab4.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.page1 {
|
|
// display: none;
|
|
padding-bottom: px2rem(47, );
|
|
|
|
.blessingBag {
|
|
width: px2rem(666, );
|
|
height: px2rem(378, );
|
|
background: url(../images/blessingBag.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(37, );
|
|
position: relative;
|
|
|
|
.blessingBag_in {
|
|
width: px2rem(585, );
|
|
// width: px2rem(560, );
|
|
height: 2rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.4rem;
|
|
border-radius: px2rem(10, );
|
|
overflow: hidden;
|
|
|
|
ul {
|
|
list-style: none;
|
|
position: absolute;
|
|
display: flex;
|
|
animation: scrollLeft 11s linear infinite;
|
|
|
|
li {
|
|
width: px2rem(140, );
|
|
height: px2rem(140, );
|
|
background: url(../images/blessingBagLiBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
float: left;
|
|
margin-top: 0.045rem;
|
|
position: relative;
|
|
|
|
img {
|
|
position: absolute;
|
|
left: 51%;
|
|
top: 50%;
|
|
border-radius: 50%;
|
|
width: px2rem(94, );
|
|
height: px2rem(94, );
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
b {
|
|
padding: 0 px2rem(7, );
|
|
height: px2rem(20, );
|
|
line-height: px2rem(20, );
|
|
text-align: center;
|
|
color: #fff;
|
|
background: linear-gradient(0deg, #DC87FF, #BF2BED, #DD89FF);
|
|
font-size: px2rem(13, );
|
|
border-radius: 0px px2rem(10, ) 0px px2rem(19, );
|
|
position: absolute;
|
|
top: px2rem(8, );
|
|
right: px2rem(5, );
|
|
}
|
|
|
|
p {
|
|
width: px2rem(126, );
|
|
height: px2rem(23.6, );
|
|
line-height: px2rem(23.6, );
|
|
background: linear-gradient(90deg, #FB80C3, rgba(253, 252, 254, 0.1));
|
|
position: absolute;
|
|
left: px2rem(7, );
|
|
bottom: px2rem(22, );
|
|
color: #fff;
|
|
font-size: px2rem(13, );
|
|
box-sizing: border-box;
|
|
padding-left: px2rem(5, );
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes scrollLeft {
|
|
100% {
|
|
// transform: translateX(-3.4rem);
|
|
transform: translateX(px2rem(-840));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.magpieBridge {
|
|
width: px2rem(696, );
|
|
height: px2rem(730, );
|
|
background: url(../images/magpieBridge.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(37, );
|
|
position: relative;
|
|
|
|
.magpieBridgeBg {
|
|
width: px2rem(668, );
|
|
height: px2rem(491, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(15, );
|
|
}
|
|
|
|
.leftRen {
|
|
width: px2rem(92, );
|
|
height: px2rem(153, );
|
|
position: absolute;
|
|
top: px2rem(151, );
|
|
left: 10%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.rightRen {
|
|
width: px2rem(130, );
|
|
height: px2rem(151, );
|
|
position: absolute;
|
|
top: px2rem(151, );
|
|
right: 10%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.xiques {
|
|
width: px2rem(668, );
|
|
height: px2rem(491, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(15, );
|
|
z-index: 2;
|
|
|
|
.xique {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.birdNum {
|
|
height: px2rem(34, );
|
|
line-height: px2rem(34, );
|
|
position: absolute;
|
|
right: px2rem(44, );
|
|
top: px2rem(101, );
|
|
vertical-align: middle;
|
|
|
|
.bird {
|
|
display: inline-block;
|
|
width: px2rem(34, );
|
|
height: px2rem(32, );
|
|
margin-right: px2rem(0, );
|
|
}
|
|
|
|
b {
|
|
color: #CA56A9;
|
|
font-size: px2rem(22, );
|
|
}
|
|
}
|
|
|
|
.but1 {
|
|
width: px2rem(218, );
|
|
height: px2rem(87, );
|
|
line-height: px2rem(80, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
bottom: px2rem(34, );
|
|
left: px2rem(112, );
|
|
background: url(../images/1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
|
|
}
|
|
|
|
.but10 {
|
|
width: px2rem(218, );
|
|
height: px2rem(87, );
|
|
line-height: px2rem(80, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
bottom: px2rem(34, );
|
|
right: px2rem(112, );
|
|
background: url(../images/10.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
|
|
}
|
|
|
|
.buting {
|
|
display: none;
|
|
width: px2rem(218, );
|
|
height: px2rem(87, );
|
|
line-height: px2rem(80, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
bottom: px2rem(34, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/10.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
|
|
}
|
|
|
|
.buterr {
|
|
display: none;
|
|
width: px2rem(218, );
|
|
height: px2rem(87, );
|
|
line-height: px2rem(80, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
bottom: px2rem(34, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/10.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
|
|
}
|
|
|
|
.butout {
|
|
display: none;
|
|
width: px2rem(218, );
|
|
height: px2rem(87, );
|
|
line-height: px2rem(80, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
bottom: px2rem(34, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: url(../images/butOut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
// text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
|
|
}
|
|
|
|
.text {
|
|
width: px2rem(510, );
|
|
text-align: center;
|
|
color: #CA56A9;
|
|
font-size: px2rem(22, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(434, );
|
|
line-height: 0.45rem;
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(490, );
|
|
height: px2rem(39, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(9, ) px2rem(8, ) px2rem(10, );
|
|
position: absolute;
|
|
left: px2rem(69, );
|
|
top: px2rem(521, );
|
|
background: url(../images/lineBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.line_in {
|
|
width: 0%;
|
|
height: 100%;
|
|
background: linear-gradient(0deg, #F772D1, #A639D1);
|
|
border-radius: px2rem(16.8, );
|
|
}
|
|
}
|
|
|
|
.ts {
|
|
width: px2rem(70, );
|
|
height: px2rem(70, );
|
|
background: url(../images/lineTx.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: px2rem(60, );
|
|
top: px2rem(505, );
|
|
|
|
img {
|
|
position: absolute;
|
|
width: px2rem(54, );
|
|
height: px2rem(54, );
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
top: 51%;
|
|
transform: translate(-50%, -53%);
|
|
}
|
|
|
|
b {
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: px2rem(16, );
|
|
color: #BE4A98;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-27, );
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task {
|
|
width: px2rem(696, );
|
|
height: px2rem(666, );
|
|
background: url(../images/task.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(0, );
|
|
position: relative;
|
|
|
|
.tab {
|
|
width: 100%;
|
|
height: px2rem(100, );
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.box1 {
|
|
display: block;
|
|
|
|
.title {
|
|
width: px2rem(480, );
|
|
position: absolute;
|
|
top: px2rem(129, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #CA56A9;
|
|
font-size: px2rem(24, );
|
|
text-align: center;
|
|
line-height: 0.45rem;
|
|
}
|
|
|
|
.task1 {
|
|
width: px2rem(638, );
|
|
height: px2rem(108, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(220, );
|
|
|
|
.but {
|
|
width: px2rem(118, );
|
|
height: px2rem(38, );
|
|
line-height: px2rem(38, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
background: url(../images/go.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: px2rem(31, );
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.out {
|
|
color: #DB5593;
|
|
background: url(../images/out.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(68, );
|
|
height: px2rem(78, );
|
|
position: absolute;
|
|
left: px2rem(40, );
|
|
top: px2rem(20, );
|
|
}
|
|
|
|
.p1 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(24, );
|
|
left: px2rem(128, );
|
|
top: px2rem(26, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
}
|
|
|
|
.p2 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(20, );
|
|
left: px2rem(129, );
|
|
top: px2rem(63, );
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.task2 {
|
|
width: px2rem(638, );
|
|
height: px2rem(108, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(350, );
|
|
|
|
.but {
|
|
width: px2rem(118, );
|
|
height: px2rem(38, );
|
|
line-height: px2rem(38, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
background: url(../images/go.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: px2rem(31, );
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.out {
|
|
color: #DB5593;
|
|
background: url(../images/out.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(68, );
|
|
height: px2rem(78, );
|
|
position: absolute;
|
|
left: px2rem(40, );
|
|
top: px2rem(20, );
|
|
}
|
|
|
|
.p1 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(24, );
|
|
left: px2rem(128, );
|
|
top: px2rem(26, );
|
|
font-weight: bold;
|
|
position: absolute;
|
|
}
|
|
|
|
.p2 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(20, );
|
|
left: px2rem(129, );
|
|
top: px2rem(63, );
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.task3 {
|
|
width: px2rem(638, );
|
|
height: px2rem(158, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(480, );
|
|
|
|
.but {
|
|
width: px2rem(118, );
|
|
height: px2rem(38, );
|
|
line-height: px2rem(38, );
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
background: url(../images/go.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: px2rem(31, );
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.out {
|
|
color: #DB5593;
|
|
background: url(../images/out.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(68, );
|
|
height: px2rem(78, );
|
|
position: absolute;
|
|
left: px2rem(40, );
|
|
top: px2rem(45, );
|
|
}
|
|
|
|
.p1 {
|
|
position: absolute;
|
|
color: #CA56A9;
|
|
font-size: px2rem(24, );
|
|
font-weight: bold;
|
|
left: px2rem(129, );
|
|
top: px2rem(26, );
|
|
}
|
|
|
|
.line {
|
|
width: px2rem(280, );
|
|
height: px2rem(14, );
|
|
background: #A722AC;
|
|
position: absolute;
|
|
left: px2rem(122, );
|
|
top: px2rem(95, );
|
|
border-radius: px2rem(14, );
|
|
|
|
.line_in {
|
|
width: 0%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: linear-gradient(0deg, #F772D1, #A639D1);
|
|
border-radius: px2rem(14, );
|
|
}
|
|
|
|
.drop1 {
|
|
width: px2rem(18, );
|
|
height: px2rem(18, );
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: px2rem(140, );
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.drop2 {
|
|
width: px2rem(18, );
|
|
height: px2rem(18, );
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 94%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.sp1 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(18, );
|
|
position: absolute;
|
|
left: px2rem(7, );
|
|
top: px2rem(-35, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sp2 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(18, );
|
|
position: absolute;
|
|
left: px2rem(115, );
|
|
top: px2rem(-35, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sp3 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(18, );
|
|
position: absolute;
|
|
left: px2rem(227, );
|
|
top: px2rem(-35, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sp4 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(18, );
|
|
position: absolute;
|
|
left: px2rem(7, );
|
|
bottom: px2rem(-35, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sp5 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(18, );
|
|
position: absolute;
|
|
left: px2rem(115, );
|
|
bottom: px2rem(-35, );
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sp6 {
|
|
color: #CA56A9;
|
|
font-size: px2rem(18, );
|
|
position: absolute;
|
|
left: px2rem(227, );
|
|
bottom: px2rem(-35, );
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tasks2 {
|
|
background: url(../images/task2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
height: px2rem(876, );
|
|
|
|
.box1 {
|
|
display: none;
|
|
}
|
|
|
|
.box2 {
|
|
display: block;
|
|
|
|
.task2But {
|
|
width: px2rem(269, );
|
|
height: 1.3rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(39, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page2 {
|
|
padding-bottom: px2rem(54, );
|
|
display: none;
|
|
|
|
.blessingTree {
|
|
width: px2rem(696, );
|
|
height: px2rem(906, );
|
|
position: relative;
|
|
margin: 0 auto px2rem(36, );
|
|
background: url(../images/blessingTree.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.redRope {
|
|
display: flex;
|
|
height: px2rem(24, );
|
|
line-height: px2rem(24, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22, );
|
|
position: absolute;
|
|
left: px2rem(43, );
|
|
top: px2rem(135, );
|
|
|
|
.redRopeIcon {
|
|
float: left;
|
|
width: px2rem(24, );
|
|
height: px2rem(24, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
|
|
.but {
|
|
width: px2rem(338, );
|
|
height: px2rem(88, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(721, );
|
|
background: url(../images/blessingTreeBut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.introduction {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(830, );
|
|
text-align: center;
|
|
color: #CA56A9;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
.refresh {
|
|
display: flex;
|
|
height: px2rem(25, );
|
|
line-height: px2rem(25, );
|
|
color: #BE4A98;
|
|
font-size: px2rem(22, );
|
|
position: absolute;
|
|
right: px2rem(57, );
|
|
top: px2rem(781, );
|
|
|
|
.refreshIcon {
|
|
float: left;
|
|
width: px2rem(25, );
|
|
height: px2rem(25, );
|
|
margin-right: px2rem(11, );
|
|
}
|
|
}
|
|
|
|
.lantern {
|
|
width: px2rem(106, );
|
|
height: px2rem(303, );
|
|
background: url(../images/lantern.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
|
|
.box {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.lantern1 {
|
|
left: px2rem(69, );
|
|
top: px2rem(360, );
|
|
}
|
|
|
|
.lantern2 {
|
|
left: px2rem(221, );
|
|
top: px2rem(395, );
|
|
}
|
|
|
|
.lantern3 {
|
|
left: px2rem(384, );
|
|
top: px2rem(335, );
|
|
}
|
|
|
|
.lantern4 {
|
|
left: px2rem(526, );
|
|
top: px2rem(386, );
|
|
}
|
|
|
|
.openLantern {
|
|
background: url(../images/openLantern.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.box {
|
|
display: block;
|
|
|
|
img {
|
|
width: px2rem(77, );
|
|
height: px2rem(74, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-48%);
|
|
top: px2rem(74, );
|
|
}
|
|
|
|
.typemp {
|
|
width: px2rem(77, );
|
|
height: px2rem(30, );
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-48%);
|
|
top: 1.33rem;
|
|
}
|
|
|
|
.typeqp {
|
|
width: 1rem;
|
|
height: 0.8rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-48%);
|
|
top: px2rem(82, );
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(159, );
|
|
text-align: center;
|
|
color: #E4797A;
|
|
font-size: px2rem(11, ) !important;
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(179, );
|
|
text-align: center;
|
|
color: #E4797A;
|
|
font-size: px2rem(11, ) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.blessingTreeSvga {
|
|
width: px2rem(106, );
|
|
height: px2rem(305, );
|
|
position: absolute;
|
|
z-index: 3;
|
|
display: none;
|
|
|
|
.blessingTreeSvgaActive {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.blessingTreeSvga1 {
|
|
left: px2rem(69, );
|
|
top: px2rem(360, );
|
|
}
|
|
|
|
.blessingTreeSvga2 {
|
|
left: px2rem(221, );
|
|
top: px2rem(395, );
|
|
}
|
|
|
|
.blessingTreeSvga3 {
|
|
left: px2rem(384, );
|
|
top: px2rem(335, );
|
|
}
|
|
|
|
.blessingTreeSvga4 {
|
|
left: px2rem(526, );
|
|
top: px2rem(386, );
|
|
}
|
|
}
|
|
|
|
.blessingTreeBoomt {
|
|
width: px2rem(696, );
|
|
height: px2rem(616, );
|
|
background: url(../images/blessingTreeBoomt.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
|
|
.tab {
|
|
width: px2rem(696, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 1.3rem;
|
|
margin: 0 auto;
|
|
|
|
div {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.box2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.blessingTreeBoomt2 {
|
|
background: url(../images/blessingTreeBoomt2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.box2 {
|
|
display: block;
|
|
width: px2rem(620, );
|
|
height: px2rem(470, );
|
|
margin: px2rem(10, ) auto 0;
|
|
border-radius: px2rem(10, );
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
width: px2rem(620, );
|
|
height: px2rem(84, );
|
|
line-height: px2rem(84, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #75009F;
|
|
|
|
div {
|
|
width: 50%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(620, );
|
|
height: 5.1rem;
|
|
margin: 0 auto;
|
|
overflow-y: scroll;
|
|
border-bottom-left-radius: px2rem(10, );
|
|
border-bottom-right-radius: px2rem(10, );
|
|
background: #9317B1;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(90, );
|
|
background: #9317B1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: 50%;
|
|
text-align: center;
|
|
color: #FFD4F3;
|
|
font-size: px2rem(24, );
|
|
box-sizing: border-box;
|
|
padding-top: px2rem(15, );
|
|
|
|
p {
|
|
width: 100%;
|
|
margin-bottom: px2rem(12, );
|
|
}
|
|
|
|
i {
|
|
font-size: px2rem(20, );
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.b {
|
|
padding: 0;
|
|
height: 100%;
|
|
height: px2rem(90, );
|
|
line-height: px2rem(90, );
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: #870EAA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page3 {
|
|
display: none;
|
|
padding-bottom: px2rem(57, );
|
|
|
|
.roomRule {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.roomRule_in {
|
|
width: px2rem(551, );
|
|
height: px2rem(665, );
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.rule {
|
|
width: px2rem(42, );
|
|
height: px2rem(137, );
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 17.2rem;
|
|
text-align: center;
|
|
padding: px2rem(11, ) px2rem(6, ) 0 px2rem(11, );
|
|
font-size: px2rem(26, );
|
|
background: linear-gradient(90deg, #7776FF, #AE2CF1);
|
|
color: #F8F3FC;
|
|
}
|
|
|
|
.title {
|
|
width: px2rem(522, );
|
|
height: px2rem(135, );
|
|
margin: 0 auto px2rem(0, );
|
|
display: block;
|
|
}
|
|
|
|
.titleText {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(22, );
|
|
}
|
|
|
|
.no1 {
|
|
width: px2rem(287, );
|
|
height: px2rem(253, );
|
|
background: url(../images/no1Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 18.6rem;
|
|
|
|
.txBg {
|
|
width: px2rem(232, );
|
|
height: px2rem(178, );
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: px2rem(-83, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(95, );
|
|
height: px2rem(95, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.5rem;
|
|
}
|
|
|
|
p {
|
|
width: 76%;
|
|
text-align: center;
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(117, );
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
div {
|
|
min-width: px2rem(180, );
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(154, );
|
|
white-space: nowrap;
|
|
font-size: px2rem(20, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(253, );
|
|
height: px2rem(208, );
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: px2rem(10, );
|
|
top: 19.7rem;
|
|
|
|
.txBg {
|
|
width: px2rem(204, );
|
|
height: px2rem(156, );
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: px2rem(-83, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(83, );
|
|
height: px2rem(83, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.55rem;
|
|
}
|
|
|
|
p {
|
|
width: 76%;
|
|
text-align: center;
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(97, );
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
div {
|
|
min-width: px2rem(180, );
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(130, );
|
|
white-space: nowrap;
|
|
font-size: px2rem(18, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(253, );
|
|
height: px2rem(208, );
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: px2rem(10, );
|
|
top: 19.7rem;
|
|
|
|
.txBg {
|
|
width: px2rem(204, );
|
|
height: px2rem(156, );
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: px2rem(-83, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(83, );
|
|
height: px2rem(83, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.55rem;
|
|
}
|
|
|
|
p {
|
|
width: 76%;
|
|
text-align: center;
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(97, );
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
div {
|
|
min-width: px2rem(180, );
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(130, );
|
|
white-space: nowrap;
|
|
font-size: px2rem(18, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(743, );
|
|
margin: 6rem auto 1.4rem;
|
|
min-height: 1rem;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(147, );
|
|
margin: 0 auto px2rem(15, );
|
|
background: url(../images/page3Libg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(60, );
|
|
overflow: hidden;
|
|
|
|
.num {
|
|
width: px2rem(60, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(36, );
|
|
font-weight: bold;
|
|
float: left;
|
|
margin-right: px2rem(22, );
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(95, );
|
|
height: px2rem(95, );
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
margin-right: px2rem(25, );
|
|
margin-top: px2rem(26, );
|
|
float: left;
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24, );
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
min-width: px2rem(121, );
|
|
width: auto;
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
white-space: nowrap;
|
|
font-size: px2rem(24, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
float: right;
|
|
margin-top: px2rem(53, );
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: px2rem(147, );
|
|
background: url(../images/myBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(48, ) 0 px2rem(20, );
|
|
overflow: hidden;
|
|
z-index: 9;
|
|
|
|
.num {
|
|
width: 1.6rem;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(36, );
|
|
font-weight: bold;
|
|
float: left;
|
|
margin-right: px2rem(22, );
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(95, );
|
|
height: px2rem(95, );
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
margin-right: px2rem(25, );
|
|
margin-top: px2rem(26, );
|
|
float: left;
|
|
}
|
|
|
|
.name {
|
|
width: 2.3rem;
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24, );
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
min-width: px2rem(121, );
|
|
width: auto;
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
white-space: nowrap;
|
|
font-size: px2rem(24, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
float: right;
|
|
margin-top: px2rem(53, );
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page4 {
|
|
display: none;
|
|
padding-bottom: px2rem(57, );
|
|
|
|
.rule {
|
|
width: px2rem(42, );
|
|
height: px2rem(137, );
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 27.4rem;
|
|
text-align: center;
|
|
padding: px2rem(11, ) px2rem(6, ) 0 px2rem(11, );
|
|
font-size: px2rem(26, );
|
|
background: linear-gradient(90deg, #7776FF, #AE2CF1);
|
|
color: #F8F3FC;
|
|
}
|
|
|
|
.loveList {
|
|
width: px2rem(700, );
|
|
height: px2rem(562, );
|
|
background: url(../images/loveListTimeBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto px2rem(35, );
|
|
position: relative;
|
|
|
|
.leftName {
|
|
width: 2rem;
|
|
color: #CA56A9;
|
|
font-size: px2rem(24, );
|
|
position: absolute;
|
|
top: px2rem(319, );
|
|
left: 2.3rem;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.rightName {
|
|
width: 2rem;
|
|
color: #CA56A9;
|
|
font-size: px2rem(24, );
|
|
position: absolute;
|
|
top: px2rem(319, );
|
|
right: 2.3rem;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.left {
|
|
width: px2rem(230, );
|
|
height: px2rem(183, );
|
|
position: absolute;
|
|
left: px2rem(69, );
|
|
top: px2rem(125, );
|
|
z-index: 2;
|
|
}
|
|
|
|
.right {
|
|
width: px2rem(230, );
|
|
height: px2rem(183, );
|
|
position: absolute;
|
|
right: px2rem(69, );
|
|
top: px2rem(125, );
|
|
z-index: 2;
|
|
}
|
|
|
|
.center {
|
|
width: px2rem(63, );
|
|
height: px2rem(57, );
|
|
position: absolute;
|
|
right: px2rem(319, );
|
|
top: px2rem(190, );
|
|
}
|
|
|
|
p {
|
|
color: #CA56A9;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: px2rem(24, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(382, );
|
|
}
|
|
|
|
.times {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(28, );
|
|
height: px2rem(50, );
|
|
line-height: px2rem(50, );
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(487, );
|
|
|
|
span {
|
|
width: px2rem(50, );
|
|
height: px2rem(50, );
|
|
text-align: center;
|
|
background: #7F0770;
|
|
border-radius: px2rem(10, );
|
|
display: inline-block;
|
|
margin: 0 px2rem(13, );
|
|
}
|
|
}
|
|
|
|
.txL {
|
|
width: px2rem(100, );
|
|
height: px2rem(100, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: px2rem(196.5, );
|
|
top: px2rem(173, );
|
|
}
|
|
|
|
.txR {
|
|
width: px2rem(100, );
|
|
height: px2rem(100, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: px2rem(196.5, );
|
|
top: px2rem(173, );
|
|
}
|
|
}
|
|
|
|
.page4Tab {
|
|
width: px2rem(750, );
|
|
height: px2rem(113, );
|
|
margin: 0 auto px2rem(27, );
|
|
background: url(../images/page4Tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.page4Tab2 {
|
|
background: url(../images/page4Tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.dayAll {
|
|
width: px2rem(586, );
|
|
height: px2rem(64, );
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 auto px2rem(30, );
|
|
background: url(../images/pagesTab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
div {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.dayAll2 {
|
|
background: url(../images/pagesTab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.giftVal {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin: 0 auto px2rem(30, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
.timeList {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
div {
|
|
width: px2rem(73, );
|
|
height: px2rem(34, );
|
|
line-height: px2rem(34, );
|
|
background: #770F80;
|
|
font-size: px2rem(24, );
|
|
color: #fff;
|
|
margin: 0 px2rem(18, );
|
|
text-align: center;
|
|
border-radius: px2rem(10, );
|
|
}
|
|
|
|
.active {
|
|
background: #C238A6;
|
|
}
|
|
}
|
|
|
|
.no1 {
|
|
width: px2rem(287, );
|
|
height: px2rem(253, );
|
|
background: url(../images/no1Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 28.9rem;
|
|
|
|
.txBg {
|
|
width: px2rem(232, );
|
|
height: px2rem(178, );
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: px2rem(-83, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(95, );
|
|
height: px2rem(95, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.5rem;
|
|
}
|
|
|
|
p {
|
|
width: 76%;
|
|
text-align: center;
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(117, );
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
div {
|
|
min-width: px2rem(180, );
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(154, );
|
|
white-space: nowrap;
|
|
font-size: px2rem(20, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(253, );
|
|
height: px2rem(208, );
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: px2rem(10, );
|
|
top: 29.9rem;
|
|
|
|
.txBg {
|
|
width: px2rem(204, );
|
|
height: px2rem(156, );
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: px2rem(-83, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(83, );
|
|
height: px2rem(83, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.55rem;
|
|
}
|
|
|
|
p {
|
|
width: 76%;
|
|
text-align: center;
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(97, );
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
div {
|
|
min-width: px2rem(180, );
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(130, );
|
|
white-space: nowrap;
|
|
font-size: px2rem(18, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(253, );
|
|
height: px2rem(208, );
|
|
background: url(../images/no23Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: px2rem(10, );
|
|
top: 29.9rem;
|
|
|
|
.txBg {
|
|
width: px2rem(204, );
|
|
height: px2rem(156, );
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: px2rem(-83, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(83, );
|
|
height: px2rem(83, );
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -0.55rem;
|
|
}
|
|
|
|
p {
|
|
width: 76%;
|
|
text-align: center;
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(97, );
|
|
color: #fff;
|
|
font-size: px2rem(24, );
|
|
}
|
|
|
|
div {
|
|
min-width: px2rem(180, );
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(130, );
|
|
white-space: nowrap;
|
|
font-size: px2rem(18, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(743, );
|
|
margin: 6rem auto 2rem;
|
|
min-height: 1rem;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(147, );
|
|
margin: 0 auto px2rem(15, );
|
|
background: url(../images/page3Libg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(60, );
|
|
overflow: hidden;
|
|
|
|
.num {
|
|
width: px2rem(60, );
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(36, );
|
|
font-weight: bold;
|
|
float: left;
|
|
margin-right: px2rem(22, );
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(95, );
|
|
height: px2rem(95, );
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
margin-right: px2rem(25, );
|
|
margin-top: px2rem(26, );
|
|
float: left;
|
|
}
|
|
|
|
.name {
|
|
width: 2.5rem;
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24, );
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
min-width: px2rem(121, );
|
|
width: auto;
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
white-space: nowrap;
|
|
font-size: px2rem(24, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
float: right;
|
|
margin-top: px2rem(53, );
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: px2rem(147, );
|
|
background: url(../images/myBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(48, ) 0 px2rem(20, );
|
|
overflow: hidden;
|
|
z-index: 9;
|
|
|
|
.num {
|
|
width: 1.6rem;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(36, );
|
|
font-weight: bold;
|
|
float: left;
|
|
margin-right: px2rem(22, );
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(95, );
|
|
height: px2rem(95, );
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
margin-right: px2rem(25, );
|
|
margin-top: px2rem(26, );
|
|
float: left;
|
|
}
|
|
|
|
.name {
|
|
width: 2.3rem;
|
|
height: 100%;
|
|
line-height: px2rem(147, );
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24, );
|
|
overflow: hidden; //不换行
|
|
white-space: nowrap; //不换行
|
|
text-overflow: ellipsis; //不换行
|
|
float: left;
|
|
}
|
|
|
|
.score {
|
|
min-width: px2rem(121, );
|
|
width: auto;
|
|
height: px2rem(40, );
|
|
line-height: px2rem(20, );
|
|
box-sizing: border-box;
|
|
padding: px2rem(10, ) px2rem(16, );
|
|
border-radius: px2rem(40, );
|
|
background: linear-gradient(90deg, #7A1183, #4F279F);
|
|
white-space: nowrap;
|
|
font-size: px2rem(24, );
|
|
color: #FFFFFF;
|
|
vertical-align: middle;
|
|
float: right;
|
|
margin-top: px2rem(53, );
|
|
|
|
.loveIcon {
|
|
width: px2rem(25, );
|
|
height: px2rem(21, );
|
|
margin-right: px2rem(8, );
|
|
}
|
|
}
|
|
}
|
|
|
|
.sweet {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.sweet_in {
|
|
width: px2rem(644, );
|
|
height: px2rem(878, );
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/sweet.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.box {
|
|
width: px2rem(548, );
|
|
height: 9.6rem;
|
|
margin: px2rem(147, ) auto 0;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(1761, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rule_pub {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.rule_pub_in {
|
|
width: px2rem(644, );
|
|
height: px2rem(898, );
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/rule_pub.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.box {
|
|
width: px2rem(582, );
|
|
height: 9.6rem;
|
|
margin: px2rem(156, ) auto 0;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(1691, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.endActivity {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, .4);
|
|
z-index: 99;
|
|
display: none;
|
|
|
|
.endActivity_in {
|
|
width: px2rem(450, );
|
|
height: px2rem(357, );
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/endActivity.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.but {
|
|
position: absolute;
|
|
width: px2rem(240, );
|
|
height: px2rem(60, );
|
|
left: 50%;
|
|
top: px2rem(250, );
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
} |