Files
peko-h5/view/peko/activity/2024-invitationFission/css/index.scss
2024-03-18 11:13:37 +08:00

908 lines
23 KiB
SCSS

@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: #FFE1C5;
// background: linear-gradient(0deg, #DE3B4F 0%, #FFE4C9 99%);
}
// 返回按钮
.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(652);
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0;
position: relative;
.h3 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(244);
height: px2rem(102);
width: px2rem(645);
}
.rule_rule {
width: px2rem(58);
height: px2rem(58);
position: absolute;
top: px2rem(358);
right: px2rem(30);
}
.text {
width: px2rem(400);
height: px2rem(60);
line-height: px2rem(60);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(380);
background: url(../images/header_text.png) no-repeat;
background-size: 100% 100%;
text-align: center;
color: #FFF6E5;
font-size: px2rem(28);
font-weight: 400;
b {
font-size: px2rem(42);
font-weight: 600;
vertical-align: middle;
}
img {
display: inline-block;
width: px2rem(44);
height: px2rem(44);
vertical-align: middle;
}
}
}
.bg {
width: 100%;
height: px2rem(3608);
background: url(../images/bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: px2rem(-42) auto 0;
overflow: hidden;
.myInfo {
width: px2rem(690);
height: px2rem(305);
background: url(../images/myInfo.png) no-repeat;
background-size: 100% 100%;
margin: px2rem(84) auto px2rem(20);
position: relative;
.tx {
width: px2rem(120);
height: px2rem(120);
border: px2rem(2) solid #F55E3E;
position: absolute;
left: px2rem(40);
top: px2rem(55);
border-radius: 50%;
}
p {
color: #FE3312;
font-size: px2rem(28);
position: absolute;
top: px2rem(101);
left: px2rem(178);
font-weight: 400;
}
.invitationCode {
position: absolute;
right: px2rem(109);
top: px2rem(89);
font-size: px2rem(48);
font-weight: normal;
color: #FE3312;
}
.skip {
position: absolute;
left: px2rem(40);
bottom: px2rem(50);
width: px2rem(294);
height: px2rem(60);
line-height: px2rem(60);
text-align: center;
color: #FE3312;
font-size: px2rem(18);
font-weight: 400;
background: url(../images/myInfoBut.png) no-repeat;
background-size: 100% 100%;
img {
display: inline-block;
width: px2rem(28);
height: px2rem(28);
vertical-align: middle;
}
}
.copy {
position: absolute;
right: px2rem(40);
bottom: px2rem(50);
width: px2rem(294);
height: px2rem(60);
line-height: px2rem(60);
text-align: center;
color: #FE3312;
font-size: px2rem(18);
font-weight: 400;
background: url(../images/myInfoBut.png) no-repeat;
background-size: 100% 100%;
img {
display: inline-block;
width: px2rem(28);
height: px2rem(28);
vertical-align: middle;
}
}
}
.myIncome {
width: px2rem(690);
height: px2rem(100);
position: relative;
margin: 0 auto px2rem(20);
background: url(../images/myIncomeBg.png) no-repeat;
background-size: 100% 100%;
img {
position: absolute;
width: px2rem(44);
height: px2rem(44);
top: 50%;
transform: translateY(-50%);
right: px2rem(28);
}
p {
color: #FFFFFF;
font-size: px2rem(36);
font-weight: 500;
position: absolute;
left: px2rem(20);
top: 50%;
transform: translateY(-50%);
}
b {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: px2rem(90);
color: #FE3312;
font-size: px2rem(36);
}
}
.incomeBox {
width: px2rem(690);
height: px2rem(800);
background: #fff;
border-radius: px2rem(20);
border: px2rem(4) solid #FE7835;
margin: 0 auto px2rem(20);
position: relative;
.tab {
width: px2rem(650);
height: px2rem(144);
display: flex;
justify-content: space-between;
margin: px2rem(14) auto px2rem(20);
div {
width: px2rem(316);
height: 100%;
text-align: center;
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
p {
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 500;
margin-top: px2rem(35);
margin-bottom: px2rem(18);
}
span {
color: #fff;
font-size: px2rem(28);
font-weight: 400;
img {
display: inline-block;
vertical-align: middle;
width: px2rem(44);
height: px2rem(44);
}
}
}
.act {
background: url(../images/tabAct.png) no-repeat;
background-size: 100% 100%;
p {
margin-top: px2rem(27);
}
}
}
.sTab {
width: 100%;
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
margin: 0 auto px2rem(0);
div {
width: 50%;
height: 100%;
text-align: center;
color: #333333;
font-size: px2rem(20);
font-weight: 400;
}
.tab1 {
background: url(../images/sTab1.png) no-repeat;
background-size: 100% 100%;
color: #FE3312;
}
.tab2 {
background: url(../images/sTab2.png) no-repeat;
background-size: 100% 100%;
color: #FE3312;
}
}
.tableTitle {
width: 99.9%;
display: flex;
justify-content: space-between;
margin-bottom: 0;
position: absolute;
top: 3.17rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
background: #fff;
div {
width: 25%;
height: px2rem(50);
line-height: px2rem(50);
text-align: center;
color: #333333;
font-size: px2rem(20);
font-weight: 400;
}
}
ul {
width: 100%;
height: 7.4rem;
margin: 0 auto 0;
overflow-y: scroll;
position: relative;
&::-webkit-scrollbar {
display: none;
}
.top {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 0;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
div {
width: 25%;
height: px2rem(50);
line-height: px2rem(50);
text-align: center;
color: #333333;
font-size: px2rem(20);
font-weight: 400;
}
}
li {
width: 100%;
height: px2rem(50);
margin-bottom: px2rem(18);
display: flex;
justify-content: space-between;
&:nth-child(1) {
margin-top: px2rem(50);
}
div {
overflow: hidden;
width: 25%;
text-align: center;
color: #666666;
font-size: px2rem(18);
font-weight: 400;
line-height: px2rem(50);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
img {
display: inline-block;
vertical-align: middle;
width: px2rem(32);
height: px2rem(32);
}
}
.act {
line-height: px2rem(0);
p {
margin-top: px2rem(15);
margin-bottom: px2rem(23);
}
}
}
}
}
.rule {
width: px2rem(690);
height: px2rem(1418);
border-radius: px2rem(20);
border: px2rem(4) solid #FE7835;
margin: 0 auto px2rem(40);
position: relative;
background: #fff;
.title {
width: px2rem(320);
height: px2rem(60);
line-height: px2rem(60);
text-align: center;
color: #fff;
font-size: px2rem(36);
font-weight: 500;
background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
top: px2rem(30);
left: 50%;
transform: translateX(-50%);
margin-bottom: px2rem(40);
}
.rule1 {
position: relative;
width: px2rem(650);
height: px2rem(322);
margin: 0 auto px2rem(20);
background: url(../images/rule1.png) no-repeat;
background-size: 100% 100%;
h3 {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(20);
color: #fff;
font-size: px2rem(20);
font-weight: 500;
}
.text1 {
position: absolute;
left: px2rem(148);
top: px2rem(85);
color: #333333;
font-size: px2rem(18);
font-weight: 400;
}
.text2 {
position: absolute;
left: px2rem(404);
top: px2rem(85);
color: #333333;
font-size: px2rem(18);
font-weight: 400;
}
.rule1_in {
width: px2rem(385);
height: px2rem(120);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(130);
}
.sp1 {
position: absolute;
left: px2rem(149);
height: px2rem(32);
line-height: px2rem(32);
bottom: px2rem(30);
color: #FE3312;
font-size: px2rem(18);
font-weight: 500;
img {
display: inline-block;
width: px2rem(32);
height: px2rem(32);
vertical-align: middle;
}
}
.sp2 {
position: absolute;
right: px2rem(149);
height: px2rem(32);
line-height: px2rem(32);
bottom: px2rem(30);
color: #FE3312;
font-size: px2rem(18);
font-weight: 500;
img {
display: inline-block;
width: px2rem(32);
height: px2rem(32);
vertical-align: middle;
}
}
}
.rule2 {
width: px2rem(650);
height: px2rem(881);
position: relative;
margin: 0 auto px2rem(30);
background: url(../images/rule2.png) no-repeat;
background-size: 100% 100%;
h3 {
width: 100%;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(20);
color: #fff;
font-size: px2rem(20);
font-weight: 500;
}
.text1 {
color: #333333;
font-size: px2rem(18);
font-weight: px2rem(400);
position: absolute;
left: px2rem(34);
top: px2rem(85);
}
.text2 {
color: #333333;
font-size: px2rem(18);
font-weight: px2rem(400);
position: absolute;
left: px2rem(270);
top: px2rem(85);
}
.text3 {
color: #333333;
font-size: px2rem(18);
font-weight: px2rem(400);
position: absolute;
left: px2rem(515);
top: px2rem(85);
}
.rule_2in {
width: px2rem(610);
height: px2rem(120);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(130);
}
.p1 {
width: 100%;
color: #FE3312;
font-size: px2rem(20);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(290);
text-align: center;
}
.p2 {
width: 100%;
color: #FE3312;
font-size: px2rem(20);
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(621);
text-align: center;
}
.table1 {
width: px2rem(610);
height: px2rem(243);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(338);
}
.table2 {
width: px2rem(610);
height: px2rem(187);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(664);
}
.table1_1 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(342);
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 500;
}
}
.table1_2 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(405);
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table1_3 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.2rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table1_4 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 6.95rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table2_1 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8.9rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 500;
}
}
.table2_2 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 9.8rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
.table2_3 {
width: px2rem(610);
height: px2rem(60);
line-height: px2rem(60);
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 10.6rem;
z-index: 2;
div {
width: 50%;
text-align: center;
color: #FF4627;
font-size: px2rem(18);
font-weight: 400;
}
}
}
.wishingStar {
width: 100%;
text-align: center;
color: #333333;
font-size: px2rem(18);
font-weight: 300;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(30);
b {
color: #FE3312;
}
}
}
.otherNotes {
width: px2rem(320);
height: px2rem(60);
line-height: px2rem(60);
background: url(../images/titleBg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto px2rem(40);
text-align: center;
color: #FFFFFF;
font-size: px2rem(36);
font-weight: 400;
}
ul {
width: px2rem(690);
margin: 0 auto px2rem(53);
li {
width: 100%;
color: #666666;
font-size: px2rem(18);
font-weight: 400;
line-height: 0.34rem;
}
.title {
color: #333333;
font-size: px2rem(20);
font-weight: 500;
margin-bottom: px2rem(18);
margin-top: px2rem(20);
}
}
}
.openShare {
position: fixed;
left: px2rem(0);
bottom: 6.2rem;
width: px2rem(120);
height: px2rem(34);
line-height: px2rem(34);
background: linear-gradient(180deg, #FFAD50 0%, #FE3111 100%);
border-radius: 0px px2rem(17) px2rem(17) 0px;
text-align: center;
color: #fff;
font-size: px2rem(16);
display: none;
z-index: 3;
}
.code {
position: fixed;
left: 0;
bottom: 4.85rem;
background: url(../images/codeBg.png) no-repeat;
background-size: 100% 100%;
width: px2rem(176);
height: px2rem(237);
z-index: 3;
.rule_icon {
width: px2rem(24);
height: px2rem(24);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.p1 {
position: absolute;
color: #FFFFFF;
font-size: px2rem(16);
position: absolute;
left: 50%;
transform: translateX(-47%);
top: px2rem(18);
width: 100%;
text-align: center;
}
.p2 {
position: absolute;
color: #FFFFFF;
font-size: px2rem(16);
position: absolute;
left: 50%;
transform: translateX(-47%);
top: px2rem(50);
width: 100%;
text-align: center;
.diamond {
width: px2rem(24);
height: px2rem(24);
vertical-align: middle;
display: inline-block;
}
b {
font-size: px2rem(18);
font-weight: 500;
vertical-align: middle;
}
}
.codeImg {
width: px2rem(88);
height: px2rem(88);
position: absolute;
left: 50%;
transform: translateX(-43%);
top: px2rem(87);
}
.but {
width: px2rem(114);
height: px2rem(26);
line-height: px2rem(28);
border-radius: px2rem(26);
background: #fff;
position: absolute;
left: px2rem(38);
bottom: px2rem(18);
text-align: center;
color: #000;
font-size: px2rem(18);
}
}