2469 lines
66 KiB
SCSS
2469 lines
66 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
// background: linear-gradient(0deg, #3E1919 0%, #732D2D 99%);
|
|
background: #3D1919;
|
|
}
|
|
|
|
.rabbit {
|
|
z-index: 999;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: px2rem(70);
|
|
left: px2rem(34);
|
|
z-index: 99;
|
|
width: px2rem(62);
|
|
height: px2rem(62);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
p {
|
|
color: #fff;
|
|
font-size: px2rem(32);
|
|
position: absolute;
|
|
width: 9rem;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
text-align: center;
|
|
line-height: px2rem(62);
|
|
}
|
|
}
|
|
|
|
.layui-m-layershade {
|
|
background-color: rgba(0, 0, 0, .4) !important;
|
|
}
|
|
|
|
// 主视觉
|
|
.header {
|
|
width: px2rem(750);
|
|
height: px2rem(1071);
|
|
background: url(../images/header.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto 0;
|
|
position: relative;
|
|
|
|
.rule_incon {
|
|
width: px2rem(72);
|
|
height: px2rem(195);
|
|
position: absolute;
|
|
top: px2rem(498);
|
|
right: px2rem(8);
|
|
}
|
|
}
|
|
|
|
// 限定礼物
|
|
.giftBox {
|
|
width: px2rem(702);
|
|
height: px2rem(578);
|
|
display: block;
|
|
margin: -4.3rem auto 0;
|
|
position: relative;
|
|
}
|
|
|
|
// tab
|
|
.tab {
|
|
width: px2rem(700);
|
|
height: px2rem(100);
|
|
margin: px2rem(9) auto px2rem(2);
|
|
background: url(../images/tab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
div {
|
|
width: px2rem(253);
|
|
height: px2rem(104);
|
|
}
|
|
|
|
.act1 {
|
|
background: url(../images/tab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act2 {
|
|
background: url(../images/tab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act3 {
|
|
background: url(../images/tab3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
// 页面1
|
|
.page1 {
|
|
width: px2rem(750);
|
|
// height: px2rem(3056);
|
|
height: 35.74667rem;
|
|
background: url(../images/pageBg1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: -19.2rem auto 0rem;
|
|
overflow: hidden;
|
|
// display: none;
|
|
// position: relative;
|
|
|
|
.content {
|
|
width: px2rem(726);
|
|
height: px2rem(1174);
|
|
margin: 19.13rem auto 0;
|
|
background: url(../images/pageContent1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.envelopeTab {
|
|
width: px2rem(628);
|
|
height: px2rem(158);
|
|
margin: 1.1rem auto 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tab {
|
|
width: px2rem(110);
|
|
height: px2rem(130);
|
|
}
|
|
|
|
.tab1 {
|
|
|
|
background: url(../images/envelopeTab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/envelopeTab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab3 {
|
|
background: url(../images/envelopeTab3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act1 {
|
|
background: url(../images/envelopeTabAct1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act2 {
|
|
background: url(../images/envelopeTabAct2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act3 {
|
|
background: url(../images/envelopeTabAct3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.envelopeBox {
|
|
width: px2rem(676);
|
|
// height: 17.5rem;
|
|
height: 11.8rem;
|
|
overflow-y: scroll;
|
|
margin: 0.5rem auto 0;
|
|
|
|
.envelope {
|
|
width: px2rem(676);
|
|
height: px2rem(693);
|
|
margin: 0 auto px2rem(0);
|
|
position: relative;
|
|
|
|
.to {
|
|
width: px2rem(400);
|
|
height: px2rem(79);
|
|
line-height: px2rem(79);
|
|
font-size: px2rem(26);
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(65);
|
|
top: px2rem(63), ;
|
|
font-weight: 500;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(79);
|
|
height: px2rem(79);
|
|
margin: 0 px2rem(10);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
background: #EA496D;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
border: 0;
|
|
outline: none;
|
|
width: px2rem(500);
|
|
height: 1.5rem;
|
|
position: absolute;
|
|
top: 2.3rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #333333;
|
|
font-size: px2rem(26);
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
padding: 0 0.1rem;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
background: none;
|
|
font-family: Source Han Sans CN;
|
|
}
|
|
|
|
.form {
|
|
width: px2rem(400);
|
|
height: px2rem(79);
|
|
line-height: px2rem(79);
|
|
font-size: px2rem(26);
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
right: px2rem(61);
|
|
top: px2rem(313);
|
|
font-weight: 500;
|
|
text-align: right;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(79);
|
|
height: px2rem(79);
|
|
margin: 0 px2rem(10);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
background: #EA496D;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
position: absolute;
|
|
top: px2rem(395);
|
|
right: px2rem(61);
|
|
color: #333333;
|
|
font-size: px2rem(18);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.c_envelope {
|
|
background: url(../images/c_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #EE642B;
|
|
}
|
|
}
|
|
|
|
.f_envelope {
|
|
background: url(../images/f_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #EA496D;
|
|
}
|
|
|
|
.to {
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.text {
|
|
top: 2.6rem;
|
|
}
|
|
}
|
|
|
|
.h_envelope {
|
|
background: url(../images/h_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #333333;
|
|
}
|
|
|
|
.to {
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.text {
|
|
top: 2.6rem;
|
|
}
|
|
}
|
|
|
|
.l_envelope {
|
|
background: url(../images/l_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #495CEA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.styleBox {
|
|
width: px2rem(666);
|
|
height: 12.2rem;
|
|
margin: 0.3rem auto 0;
|
|
|
|
.style1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
transform: translateX(7px);
|
|
|
|
.style1Rule_icon {
|
|
width: px2rem(67);
|
|
height: px2rem(87);
|
|
position: absolute;
|
|
right: px2rem(0);
|
|
top: px2rem(0);
|
|
z-index: 2;
|
|
}
|
|
|
|
.felxBox {
|
|
width: px2rem(609);
|
|
height: px2rem(650);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin: px2rem(26) auto 0;
|
|
transform: translateX(-2px);
|
|
|
|
div {
|
|
width: px2rem(295);
|
|
height: px2rem(280);
|
|
position: relative;
|
|
margin-bottom: 0.9rem;
|
|
box-sizing: border-box;
|
|
|
|
.but {
|
|
width: px2rem(185);
|
|
height: px2rem(37);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(25);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(-125);
|
|
border-radius: px2rem(37);
|
|
line-height: px2rem(32);
|
|
border: px2rem(4) solid #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.div1 {
|
|
background: url(../images/style1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.but {
|
|
background: #EA794A;
|
|
}
|
|
}
|
|
|
|
.div2 {
|
|
background: url(../images/style2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.but {
|
|
background: #495CEA;
|
|
}
|
|
}
|
|
|
|
.div3 {
|
|
background: url(../images/style3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.but {
|
|
background: #EA496D;
|
|
}
|
|
}
|
|
|
|
.div4 {
|
|
background: url(../images/style4.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.but {
|
|
background: #171818;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
border: px2rem(4) solid #fff;
|
|
border-radius: px2rem(15);
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.next1 {
|
|
width: px2rem(250);
|
|
height: px2rem(76);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(749);
|
|
}
|
|
}
|
|
|
|
.style2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-size: px2rem(32);
|
|
position: absolute;
|
|
top: px2rem(41);
|
|
left: 0;
|
|
}
|
|
|
|
ul {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 1.5rem;
|
|
height: 8rem;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(116);
|
|
background: #2D0F01;
|
|
margin-bottom: px2rem(8);
|
|
|
|
.tx {
|
|
float: left;
|
|
display: block;
|
|
width: px2rem(102);
|
|
height: px2rem(102);
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
margin-top: px2rem(6);
|
|
margin-left: px2rem(32);
|
|
margin-right: px2rem(21);
|
|
}
|
|
|
|
.user {
|
|
width: 3rem;
|
|
float: left;
|
|
|
|
p {
|
|
width: 100%;
|
|
font-size: px2rem(33);
|
|
color: #fff;
|
|
font-weight: 500;
|
|
margin-bottom: px2rem(14);
|
|
white-space: nowrap;
|
|
/* 防止换行 */
|
|
overflow: hidden;
|
|
/* 控制内容溢出部分不可见 */
|
|
text-overflow: ellipsis;
|
|
/* 添加省略号 */
|
|
margin-top: px2rem(25);
|
|
}
|
|
|
|
b {
|
|
width: 100%;
|
|
font-size: px2rem(25);
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
margin-right: px2rem(40);
|
|
margin-top: px2rem(42);
|
|
border-radius: 50%;
|
|
width: px2rem(27);
|
|
height: px2rem(27);
|
|
position: relative;
|
|
background: #fff;
|
|
|
|
.true {
|
|
position: absolute;
|
|
width: px2rem(19);
|
|
height: px2rem(16);
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: none;
|
|
}
|
|
|
|
.trueAct {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notUser {
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 8rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: px2rem(24);
|
|
}
|
|
}
|
|
|
|
.back2,
|
|
.next2 {
|
|
position: absolute;
|
|
top: px2rem(749);
|
|
width: px2rem(250);
|
|
height: px2rem(76);
|
|
}
|
|
|
|
.back2 {
|
|
left: px2rem(59);
|
|
}
|
|
|
|
.next2 {
|
|
right: px2rem(59);
|
|
}
|
|
}
|
|
|
|
.style3 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
|
|
.title {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(32);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(25);
|
|
}
|
|
|
|
.envelope {
|
|
width: px2rem(676);
|
|
height: px2rem(693);
|
|
margin: 1rem auto px2rem(0);
|
|
position: relative;
|
|
|
|
.to {
|
|
width: px2rem(400);
|
|
height: px2rem(79);
|
|
line-height: px2rem(79);
|
|
font-size: px2rem(26);
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(65);
|
|
top: px2rem(63);
|
|
font-weight: 500;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(79);
|
|
height: px2rem(79);
|
|
margin: 0 px2rem(10);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
background: #EA496D;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
border: 0;
|
|
outline: none;
|
|
width: px2rem(500);
|
|
height: 1.7rem;
|
|
position: absolute;
|
|
top: 2.2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #333333;
|
|
font-size: px2rem(26);
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
padding: 0.1rem;
|
|
font-weight: 500;
|
|
background: rgba(255, 255, 255, .8);
|
|
border-radius: px2rem(10);
|
|
font-family: Source Han Sans CN;
|
|
|
|
&::placeholder {
|
|
color: #9A9A9A;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
padding: 0 0.1rem;
|
|
}
|
|
}
|
|
|
|
.textNum {
|
|
position: absolute;
|
|
color: #000;
|
|
font-size: px2rem(20);
|
|
right: px2rem(85);
|
|
top: px2rem(310);
|
|
}
|
|
|
|
.form {
|
|
width: px2rem(400);
|
|
height: px2rem(79);
|
|
line-height: px2rem(79);
|
|
font-size: px2rem(26);
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
right: px2rem(61);
|
|
top: px2rem(313);
|
|
font-weight: 500;
|
|
text-align: right;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(79);
|
|
height: px2rem(79);
|
|
margin: 0 px2rem(10);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
background: #EA496D;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
position: absolute;
|
|
top: px2rem(395);
|
|
right: px2rem(61);
|
|
color: #333333;
|
|
font-size: px2rem(18);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.c_envelope {
|
|
background: url(../images/c_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time,
|
|
.textNum {
|
|
color: #EE642B;
|
|
}
|
|
}
|
|
|
|
.f_envelope {
|
|
background: url(../images/f_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #EA496D;
|
|
}
|
|
|
|
.to {
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.text {
|
|
top: 2.6rem;
|
|
}
|
|
|
|
.form {
|
|
top: 4.4rem;
|
|
}
|
|
|
|
.textNum {
|
|
top: 4.4rem;
|
|
}
|
|
}
|
|
|
|
.h_envelope {
|
|
background: url(../images/h_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #333333;
|
|
}
|
|
|
|
.to {
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.text {
|
|
top: 2.6rem;
|
|
}
|
|
|
|
.form {
|
|
top: 4.4rem;
|
|
}
|
|
|
|
.textNum {
|
|
top: 4.4rem;
|
|
}
|
|
}
|
|
|
|
.l_envelope {
|
|
background: url(../images/l_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time,
|
|
.textNum {
|
|
color: #495CEA;
|
|
}
|
|
}
|
|
|
|
.back3,
|
|
.nowLove {
|
|
position: absolute;
|
|
top: px2rem(800);
|
|
width: px2rem(250);
|
|
height: px2rem(76);
|
|
}
|
|
|
|
.back3 {
|
|
left: px2rem(59);
|
|
}
|
|
|
|
.nowLove {
|
|
right: px2rem(59);
|
|
}
|
|
}
|
|
}
|
|
|
|
.myEnvlop {
|
|
overflow: hidden;
|
|
|
|
.myEnvlopTab {
|
|
width: px2rem(530);
|
|
height: px2rem(76);
|
|
margin: 0.6rem auto 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.myEnvlopTabs {
|
|
width: px2rem(250);
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/myEnvlopTabs1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/myEnvlopTabs2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act1 {
|
|
background: url(../images/myEnvlopTabsAct1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act2 {
|
|
background: url(../images/myEnvlopTabsAct2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.myEnvelopeBox {
|
|
width: px2rem(676);
|
|
height: 10.6rem;
|
|
overflow-y: scroll;
|
|
margin: 0 auto 0;
|
|
|
|
.envelope {
|
|
width: px2rem(676);
|
|
height: px2rem(693);
|
|
margin: 0 auto px2rem(0);
|
|
position: relative;
|
|
|
|
.to {
|
|
width: px2rem(400);
|
|
height: px2rem(79);
|
|
line-height: px2rem(79);
|
|
font-size: px2rem(26);
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: px2rem(65);
|
|
top: px2rem(63);
|
|
font-weight: 500;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(79);
|
|
height: px2rem(79);
|
|
margin: 0 px2rem(10);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
background: #EA496D;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
border: 0;
|
|
outline: none;
|
|
width: px2rem(500);
|
|
height: 1.7rem;
|
|
position: absolute;
|
|
top: 2.2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #333333;
|
|
font-size: px2rem(26);
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
padding: 0 0.1rem;
|
|
font-weight: 500;
|
|
background: none;
|
|
font-family: Source Han Sans CN;
|
|
}
|
|
|
|
.form {
|
|
width: px2rem(400);
|
|
height: px2rem(79);
|
|
line-height: px2rem(79);
|
|
font-size: px2rem(26);
|
|
color: #333333;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
right: px2rem(61);
|
|
top: px2rem(313);
|
|
font-weight: 500;
|
|
text-align: right;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(79);
|
|
height: px2rem(79);
|
|
margin: 0 px2rem(10);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
background: #EA496D;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
position: absolute;
|
|
top: px2rem(395);
|
|
right: px2rem(61);
|
|
color: #333333;
|
|
font-size: px2rem(18);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.c_envelope {
|
|
background: url(../images/c_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #EE642B;
|
|
}
|
|
}
|
|
|
|
.f_envelope {
|
|
background: url(../images/f_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #EA496D;
|
|
}
|
|
|
|
.to {
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.text {
|
|
top: 2.6rem;
|
|
}
|
|
}
|
|
|
|
.h_envelope {
|
|
background: url(../images/h_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #333333;
|
|
}
|
|
|
|
.to {
|
|
top: px2rem(105);
|
|
}
|
|
|
|
.text {
|
|
top: 2.6rem;
|
|
}
|
|
}
|
|
|
|
.l_envelope {
|
|
background: url(../images/l_envelope.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.text,
|
|
.form,
|
|
.to,
|
|
.time {
|
|
color: #495CEA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页面2
|
|
.page2 {
|
|
display: none;
|
|
width: px2rem(750);
|
|
// height: px2rem(3056);
|
|
// height: 35.74667rem;
|
|
margin: 0rem auto 0rem;
|
|
overflow: hidden;
|
|
|
|
.heartbeat {
|
|
width: px2rem(702);
|
|
height: px2rem(582);
|
|
background: url(../images/heartbeatGift.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto 0;
|
|
position: relative;
|
|
|
|
img {
|
|
width: px2rem(216);
|
|
height: px2rem(75);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(420);
|
|
display: none;
|
|
}
|
|
|
|
.heartbeatNot {
|
|
display: block;
|
|
}
|
|
|
|
.heartbeatIng {}
|
|
|
|
.heartbeatOut {}
|
|
}
|
|
|
|
.heartbeatTab {
|
|
width: px2rem(503);
|
|
height: px2rem(105);
|
|
margin: 0 auto 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
width: px2rem(236);
|
|
height: 100%;
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/heartbeatTab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/heartbeatTab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act1 {
|
|
background: url(../images/heartbeatTabAct1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act2 {
|
|
background: url(../images/heartbeatTabAct2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.heartbeat1 {
|
|
// display: none;heartbeatTab1
|
|
width: px2rem(702);
|
|
height: px2rem(1055);
|
|
margin: 0 auto px2rem(16);
|
|
position: relative;
|
|
background: url(../images/heartbeat1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.butImg {
|
|
width: px2rem(95);
|
|
height: px2rem(81);
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.left1 {
|
|
top: px2rem(134);
|
|
left: px2rem(23);
|
|
}
|
|
|
|
.right1 {
|
|
top: px2rem(134);
|
|
right: px2rem(16);
|
|
}
|
|
|
|
.left2 {
|
|
top: px2rem(627);
|
|
left: px2rem(27);
|
|
}
|
|
|
|
.right2 {
|
|
top: px2rem(627);
|
|
right: px2rem(27);
|
|
}
|
|
|
|
.tsleft {
|
|
width: px2rem(141);
|
|
height: px2rem(136);
|
|
position: absolute;
|
|
left: px2rem(138);
|
|
top: px2rem(101);
|
|
z-index: 2;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.tsright {
|
|
width: px2rem(135);
|
|
height: px2rem(141);
|
|
position: absolute;
|
|
right: px2rem(148);
|
|
top: px2rem(101);
|
|
z-index: 2;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.textTop {
|
|
width: 100%;
|
|
left: 0;
|
|
top: px2rem(246);
|
|
position: absolute;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(24);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.titleB {
|
|
width: 100%;
|
|
left: 0;
|
|
top: px2rem(445);
|
|
position: absolute;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(26);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.heartbeatGift {
|
|
width: px2rem(564);
|
|
height: px2rem(330);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(491);
|
|
}
|
|
|
|
.img {
|
|
width: px2rem(216);
|
|
height: px2rem(75);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(844);
|
|
display: none;
|
|
}
|
|
|
|
.heartbeatBNot {
|
|
display: block;
|
|
}
|
|
|
|
.heartbeatBIng {}
|
|
|
|
.heartbeatBOut {}
|
|
|
|
.txLeft {
|
|
width: px2rem(105);
|
|
height: px2rem(105);
|
|
position: absolute;
|
|
top: px2rem(121);
|
|
left: px2rem(157);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.txRight {
|
|
width: px2rem(105);
|
|
height: px2rem(105);
|
|
position: absolute;
|
|
top: px2rem(121);
|
|
right: px2rem(167);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.numPage {
|
|
width: 100%;
|
|
left: 0;
|
|
top: 12.4rem;
|
|
position: absolute;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(22);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.heartbeat2 {
|
|
display: none;
|
|
width: px2rem(723);
|
|
height: px2rem(1913);
|
|
margin: 0 auto px2rem(0);
|
|
position: relative;
|
|
background: url(../images/heartbeat2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.no1 {
|
|
width: px2rem(347);
|
|
height: px2rem(309);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(240);
|
|
background: url(../images/heartbeatno1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.ts {
|
|
width: px2rem(140);
|
|
height: px2rem(140);
|
|
position: absolute;
|
|
top: px2rem(48);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tsLeft {
|
|
left: px2rem(32);
|
|
}
|
|
|
|
.tsRight {
|
|
right: px2rem(42);
|
|
}
|
|
|
|
.txLeft,
|
|
.txRight {
|
|
border-radius: 50%;
|
|
height: px2rem(135);
|
|
width: px2rem(135);
|
|
position: absolute;
|
|
top: px2rem(50);
|
|
}
|
|
|
|
.txLeft {
|
|
left: px2rem(37);
|
|
}
|
|
|
|
.txRight {
|
|
right: px2rem(46);
|
|
}
|
|
|
|
.leftName,
|
|
.rightName {
|
|
width: px2rem(120);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
top: px2rem(195);
|
|
font-size: px2rem(18);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.leftName {
|
|
left: px2rem(45);
|
|
}
|
|
|
|
.rightName {
|
|
right: px2rem(45);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(17);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: px2rem(-5);
|
|
top: px2rem(230);
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(17);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: px2rem(-5);
|
|
top: px2rem(252);
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(246);
|
|
height: px2rem(219);
|
|
position: absolute;
|
|
left: px2rem(94);
|
|
top: px2rem(596);
|
|
background: url(../images/heartbeatno2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.ts {
|
|
width: px2rem(98);
|
|
height: px2rem(98);
|
|
position: absolute;
|
|
top: px2rem(34);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tsLeft {
|
|
left: px2rem(25);
|
|
}
|
|
|
|
.tsRight {
|
|
right: px2rem(30);
|
|
}
|
|
|
|
.txLeft,
|
|
.txRight {
|
|
border-radius: 50%;
|
|
height: px2rem(90);
|
|
width: px2rem(90);
|
|
position: absolute;
|
|
top: px2rem(38);
|
|
}
|
|
|
|
.txLeft {
|
|
left: px2rem(30);
|
|
}
|
|
|
|
.txRight {
|
|
right: px2rem(35);
|
|
}
|
|
|
|
.leftName,
|
|
.rightName {
|
|
width: px2rem(100);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
top: px2rem(135);
|
|
font-size: px2rem(18);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.leftName {
|
|
left: px2rem(30);
|
|
}
|
|
|
|
.rightName {
|
|
right: px2rem(30);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(17);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: px2rem(-5);
|
|
top: px2rem(160);
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(17);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: px2rem(-5);
|
|
top: px2rem(180);
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(246);
|
|
height: px2rem(219);
|
|
position: absolute;
|
|
right: px2rem(94);
|
|
top: px2rem(596);
|
|
background: url(../images/heartbeatno3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.ts {
|
|
width: px2rem(98);
|
|
height: px2rem(98);
|
|
position: absolute;
|
|
top: px2rem(34);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tsLeft {
|
|
left: px2rem(25);
|
|
}
|
|
|
|
.tsRight {
|
|
right: px2rem(30);
|
|
}
|
|
|
|
.txLeft,
|
|
.txRight {
|
|
border-radius: 50%;
|
|
height: px2rem(90);
|
|
width: px2rem(90);
|
|
position: absolute;
|
|
top: px2rem(38);
|
|
}
|
|
|
|
.txLeft {
|
|
left: px2rem(30);
|
|
}
|
|
|
|
.txRight {
|
|
right: px2rem(35);
|
|
}
|
|
|
|
.leftName,
|
|
.rightName {
|
|
width: px2rem(100);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
top: px2rem(135);
|
|
font-size: px2rem(18);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.leftName {
|
|
left: px2rem(30);
|
|
}
|
|
|
|
.rightName {
|
|
right: px2rem(30);
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(17);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: px2rem(-5);
|
|
top: px2rem(160);
|
|
}
|
|
|
|
span {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(17);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: px2rem(-5);
|
|
top: px2rem(180);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(576);
|
|
margin: px2rem(874) auto 0;
|
|
height: 11.3rem;
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(114);
|
|
background: url(../images/heartbeatLiBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin-bottom: px2rem(10);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(17);
|
|
box-sizing: border-box;
|
|
|
|
.num {
|
|
width: px2rem(33);
|
|
height: 100%;
|
|
line-height: px2rem(114);
|
|
color: #9F590A;
|
|
font-size: px2rem(30);
|
|
font-weight: 500;
|
|
float: left;
|
|
margin-right: px2rem(195);
|
|
}
|
|
|
|
.ts {
|
|
position: absolute;
|
|
width: px2rem(177);
|
|
height: px2rem(85);
|
|
left: px2rem(55);
|
|
top: px2rem(10);
|
|
z-index: 2;
|
|
}
|
|
|
|
.lefttx {
|
|
width: px2rem(58);
|
|
height: px2rem(58);
|
|
position: absolute;
|
|
top: 0.34rem;
|
|
left: 1.15rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.righttx {
|
|
width: px2rem(58);
|
|
height: px2rem(58);
|
|
position: absolute;
|
|
top: 0.34rem;
|
|
left: 1.95rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.box {
|
|
width: px2rem(160);
|
|
float: left;
|
|
|
|
p {
|
|
width: 100%;
|
|
color: #9F590A;
|
|
font-size: px2rem(21);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.p {
|
|
margin-top: px2rem(35);
|
|
margin-bottom: px2rem(7);
|
|
}
|
|
}
|
|
|
|
.score {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: px2rem(114);
|
|
color: #9F590A;
|
|
font-size: px2rem(21);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.my {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
// background: url(../images/heartbeatMyBg2.png) no-repeat bottom;
|
|
// background-size: 100% 100%;
|
|
// width: 10.58667rem;
|
|
// height: 5.36rem;
|
|
background: url(../images/heartbeatMyBg.png) no-repeat bottom;
|
|
background-size: 10.58667rem 2.33333rem;
|
|
width: 10.58667rem;
|
|
height: 3rem;
|
|
z-index: 3;
|
|
transition: all .3s;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
width: px2rem(81);
|
|
height: px2rem(95);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
// top: -0.6rem;
|
|
top: 0;
|
|
transition: all .3s;
|
|
}
|
|
|
|
.uls {
|
|
width: 100%;
|
|
overflow-y: hidden;
|
|
height: 1.5rem;
|
|
// height: 4.2rem;
|
|
margin-top: 1.1rem;
|
|
// margin-top: 0.69333rem;
|
|
|
|
.boxs {
|
|
width: 100%;
|
|
height: 1.6rem;
|
|
box-sizing: border-box;
|
|
padding: px2rem(0) px2rem(52) 0 0;
|
|
position: relative;
|
|
|
|
.ts {
|
|
position: absolute;
|
|
width: px2rem(211);
|
|
height: px2rem(101);
|
|
left: px2rem(82);
|
|
top: 0rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.lefttx {
|
|
width: px2rem(68);
|
|
height: px2rem(68);
|
|
position: absolute;
|
|
top: 0.27rem;
|
|
left: 1.55rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.righttx {
|
|
width: px2rem(68);
|
|
height: px2rem(68);
|
|
position: absolute;
|
|
top: 0.27rem;
|
|
left: 2.55rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.box {
|
|
width: 3rem;
|
|
float: left;
|
|
margin-left: px2rem(307);
|
|
|
|
p {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.p {
|
|
margin-top: px2rem(20);
|
|
margin-bottom: px2rem(7);
|
|
}
|
|
}
|
|
|
|
.score {
|
|
float: right;
|
|
text-align: right;
|
|
|
|
p {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.p {
|
|
margin-top: px2rem(20);
|
|
margin-bottom: px2rem(7);
|
|
}
|
|
}
|
|
}
|
|
|
|
.notUser {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: px2rem(28);
|
|
line-height: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页面3
|
|
.page3 {
|
|
width: px2rem(702);
|
|
height: px2rem(2227);
|
|
margin: 0 auto 0;
|
|
background: url(../images/page3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: none;
|
|
|
|
.listTab {
|
|
width: px2rem(560);
|
|
height: px2rem(121);
|
|
margin: px2rem(33) auto px2rem(0);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tab {
|
|
width: px2rem(269);
|
|
height: px2rem(121);
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/listTab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/listTab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act1 {
|
|
background: url(../images/listTabAct1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act2 {
|
|
background: url(../images/listTabAct2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.dayTab {
|
|
width: px2rem(360);
|
|
height: px2rem(71);
|
|
margin: px2rem(0) auto px2rem(0);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tab {
|
|
width: px2rem(167);
|
|
height: px2rem(71);
|
|
}
|
|
|
|
.tab1 {
|
|
background: url(../images/dayTab1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tab2 {
|
|
background: url(../images/dayTab2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act1 {
|
|
background: url(../images/dayTabAct1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.act2 {
|
|
background: url(../images/dayTabAct2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
width: px2rem(542);
|
|
margin: px2rem(10) auto px2rem(24);
|
|
color: #fff;
|
|
font-size: px2rem(26);
|
|
font-weight: 500;
|
|
text-align: center;
|
|
|
|
p {
|
|
margin-bottom: px2rem(13);
|
|
}
|
|
}
|
|
|
|
.timeTab {
|
|
width: 100%;
|
|
position: absolute;
|
|
height: px2rem(36);
|
|
left: 0;
|
|
top: px2rem(326);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(55);
|
|
|
|
div {
|
|
width: px2rem(83);
|
|
height: px2rem(36);
|
|
line-height: px2rem(36);
|
|
text-align: center;
|
|
background: url(../images/timeTab.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #322F2F;
|
|
font-size: px2rem(22);
|
|
}
|
|
|
|
.act {
|
|
background: url(../images/timeTabAct.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #461C1C;
|
|
}
|
|
}
|
|
|
|
.ListBox {
|
|
width: px2rem(643);
|
|
height: px2rem(1840);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(374);
|
|
background: url(../images/listBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.rule_icon {
|
|
width: px2rem(67);
|
|
height: px2rem(87);
|
|
position: absolute;
|
|
right: px2rem(12);
|
|
top: px2rem(6);
|
|
z-index: 2;
|
|
}
|
|
|
|
.top3 {
|
|
width: px2rem(568);
|
|
height: px2rem(375);
|
|
background: url(../images/top3Bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(45);
|
|
|
|
.no1 {
|
|
width: px2rem(107);
|
|
height: px2rem(107);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 1rem;
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 0.6rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
width: 150%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #3F0E0E;
|
|
font-size: px2rem(20);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 1.9rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span {
|
|
width: 150%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #3F0E0E;
|
|
font-size: px2rem(16);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.25rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.no2 {
|
|
width: px2rem(107);
|
|
height: px2rem(107);
|
|
position: absolute;
|
|
left: 0.52rem;
|
|
top: 1.35rem;
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 0.6rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
width: 150%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #3F0E0E;
|
|
font-size: px2rem(20);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 1.9rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span {
|
|
width: 150%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #3F0E0E;
|
|
font-size: px2rem(16);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.25rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.no3 {
|
|
width: px2rem(107);
|
|
height: px2rem(107);
|
|
position: absolute;
|
|
right: 0.52rem;
|
|
top: 1.35rem;
|
|
|
|
.ts {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.5rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
width: px2rem(80);
|
|
height: px2rem(80);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 0.6rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
p {
|
|
width: 150%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #3F0E0E;
|
|
font-size: px2rem(20);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 1.9rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span {
|
|
width: 150%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: #3F0E0E;
|
|
font-size: px2rem(16);
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 2.25rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: px2rem(644);
|
|
height: 17.1rem;
|
|
position: absolute;
|
|
top: px2rem(423);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
overflow-y: scroll;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(132);
|
|
position: relative;
|
|
margin-bottom: px2rem(10);
|
|
background: url(../images/listLiBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(25);
|
|
|
|
.num {
|
|
width: px2rem(44);
|
|
height: px2rem(55);
|
|
line-height: px2rem(55);
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: px2rem(20);
|
|
font-weight: 400;
|
|
background: url(../images/numBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
float: left;
|
|
margin-top: px2rem(39);
|
|
margin-right: px2rem(161);
|
|
}
|
|
|
|
.ts {
|
|
position: absolute;
|
|
width: px2rem(99);
|
|
height: px2rem(99);
|
|
left: px2rem(98);
|
|
top: px2rem(17);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
position: absolute;
|
|
width: px2rem(92);
|
|
height: px2rem(92);
|
|
position: absolute;
|
|
left: px2rem(102);
|
|
top: px2rem(24);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.name {
|
|
width: 2.4rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
float: left;
|
|
color: #F5CD81;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
height: 100%;
|
|
line-height: px2rem(132);
|
|
}
|
|
|
|
.score {
|
|
float: left;
|
|
color: #F5CD81;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
height: 100%;
|
|
line-height: px2rem(132);
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.my {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
width: px2rem(750);
|
|
height: px2rem(148);
|
|
line-height: px2rem(148);
|
|
background: url(../images/listMyBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(52);
|
|
|
|
.num {
|
|
width: px2rem(70);
|
|
height: 100%;
|
|
text-align: center;
|
|
color: #F5CD81;
|
|
font-size: px2rem(20);
|
|
font-weight: 400;
|
|
float: left;
|
|
margin-right: px2rem(161);
|
|
}
|
|
|
|
.ts {
|
|
position: absolute;
|
|
width: px2rem(99);
|
|
height: px2rem(99);
|
|
left: px2rem(149);
|
|
top: px2rem(28);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tx {
|
|
position: absolute;
|
|
width: px2rem(92);
|
|
height: px2rem(92);
|
|
position: absolute;
|
|
left: px2rem(152);
|
|
top: px2rem(31);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.name {
|
|
width: 3rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
float: left;
|
|
color: #F5CD81;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
height: 100%;
|
|
}
|
|
|
|
.score {
|
|
float: left;
|
|
color: #F5CD81;
|
|
font-size: px2rem(28);
|
|
font-weight: 400;
|
|
height: 100%;
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 活动规则
|
|
.rule {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.rule_in {
|
|
width: px2rem(657);
|
|
height: px2rem(1020);
|
|
background: url(../images/ruleBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
div {
|
|
width: 7.8rem;
|
|
height: 11.8rem;
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
overflow-y: scroll;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(2403);
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 信封规则
|
|
.ruleEnvlop {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.rule_in {
|
|
width: px2rem(441);
|
|
height: px2rem(692);
|
|
background: url(../images/ruleEnvlop_in.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.ruleEnvlop_inIKonw,
|
|
.goToGift {
|
|
width: px2rem(158);
|
|
height: px2rem(64);
|
|
position: absolute;
|
|
top: px2rem(574);
|
|
}
|
|
|
|
.ruleEnvlop_inIKonw {
|
|
left: px2rem(62);
|
|
}
|
|
|
|
.goToGift {
|
|
right: px2rem(62);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 确认表白弹窗
|
|
.sureLove {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.sureLove_in {
|
|
width: px2rem(441);
|
|
height: px2rem(526);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/sureLove_in.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.no,
|
|
.ok {
|
|
position: absolute;
|
|
width: px2rem(158);
|
|
height: px2rem(63);
|
|
top: px2rem(405);
|
|
}
|
|
|
|
.no {
|
|
left: px2rem(60);
|
|
}
|
|
|
|
.ok {
|
|
right: px2rem(60);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表白成功弹窗
|
|
.sureLoveSuccer {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.sureLove_in {
|
|
width: px2rem(441);
|
|
height: px2rem(526);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/sureLove_in2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.no,
|
|
.ok {
|
|
position: absolute;
|
|
width: px2rem(158);
|
|
height: px2rem(63);
|
|
top: px2rem(405);
|
|
}
|
|
|
|
.no {
|
|
left: px2rem(60);
|
|
}
|
|
|
|
.ok {
|
|
right: px2rem(60);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 热雪
|
|
.listBg1 {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.box {
|
|
width: px2rem(657);
|
|
height: px2rem(931);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/listRuleBg1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.box_in {
|
|
width: px2rem(622);
|
|
height: px2rem(780);
|
|
overflow-y: scroll;
|
|
margin: px2rem(139) auto 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(1981);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 冰雪
|
|
.listBg2 {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.box {
|
|
width: px2rem(657);
|
|
height: px2rem(931);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/listRuleBg2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
|
|
.box_in {
|
|
width: px2rem(622);
|
|
height: px2rem(780);
|
|
overflow-y: scroll;
|
|
margin: px2rem(139) auto 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: px2rem(1981);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 领取弹窗
|
|
.lqPub {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.lqPub_in {
|
|
width: px2rem(552);
|
|
height: px2rem(607);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/lvgiftBg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
img {
|
|
width: px2rem(434);
|
|
height: px2rem(193);
|
|
position: absolute;
|
|
top: 5.3rem;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.but {
|
|
width: 2.3rem;
|
|
height: 0.8rem;
|
|
position: absolute;
|
|
top: 7.2rem;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 活动结束
|
|
.actOut {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
|
|
.actOut_in {
|
|
width: px2rem(441);
|
|
height: px2rem(526);
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: url(../images/actOut.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.but {
|
|
width: 2.3rem;
|
|
height: 0.8rem;
|
|
position: absolute;
|
|
top: 5.55rem;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
} |