Files
peko-h5/view/peko/activity/2024-yearBenefits/css/index.scss

581 lines
15 KiB
SCSS
Raw Normal View History

2024-02-01 14:18:56 +08:00
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: linear-gradient(0deg, #FB88A9 0%, #FFBECE 61%);
}
// 返回按钮
.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(630);
position: relative;
margin: 0 auto 0;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
.rule_icon {
width: px2rem(47);
height: px2rem(130);
position: absolute;
top: px2rem(193);
right: px2rem(0);
}
}
.tab {
width: px2rem(600);
height: px2rem(88);
line-height: px2rem(88);
margin: px2rem(8) auto px2rem(44);
background: #fff;
border-radius: px2rem(88);
display: flex;
justify-content: space-between;
div {
color: #BB4A56;
font-size: px2rem(30);
text-align: center;
width: px2rem(300);
height: px2rem(88);
font-weight: 500;
}
.tab1 {
background: url(../images/tab1.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
.tab2 {
background: url(../images/tab2.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
}
.page1 {
2024-02-05 21:27:57 +08:00
// display: none;
2024-02-01 14:18:56 +08:00
.pageImg1 {
display: block;
width: px2rem(690);
height: px2rem(1544);
margin: 0 auto px2rem(26);
}
.pageImg2 {
display: block;
width: px2rem(690);
height: px2rem(1225);
margin: 0 auto px2rem(35);
}
}
.page2 {
2024-02-05 21:27:57 +08:00
display: none;
2024-02-01 14:18:56 +08:00
.box {
width: px2rem(690);
height: px2rem(1286);
background: url(../images/page2Bg.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(36);
overflow: hidden;
position: relative;
.listTab {
width: px2rem(554);
height: px2rem(88);
line-height: px2rem(88);
border-radius: px2rem(88);
display: flex;
justify-content: space-between;
margin: px2rem(44) auto px2rem(155);
background: #fff;
div {
width: px2rem(279);
color: #BB4A56;
font-size: px2rem(30);
font-weight: 500;
text-align: center;
}
.listTab1 {
background: url(../images/listTab1.png) no-repeat;
background-size: 100% 100%;
color: rgba(0, 0, 0, .0);
}
.listTab2 {
background: url(../images/listTab2.png) no-repeat;
background-size: 100% 100%;
;
color: rgba(0, 0, 0, .0);
}
}
.topBox {
position: relative;
width: px2rem(620);
height: px2rem(400);
margin: 0 auto px2rem(-60);
.top1 {
width: px2rem(191);
height: px2rem(209);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(-94);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(169);
height: px2rem(164);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name1.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(200);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.9rem;
}
}
.top2 {
width: px2rem(157);
height: px2rem(171);
position: absolute;
left: px2rem(25);
top: px2rem(-28);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(135);
height: px2rem(132);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name2.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(170);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
}
.top3 {
width: px2rem(157);
height: px2rem(171);
position: absolute;
right: px2rem(25);
top: px2rem(-28);
.ts {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.tx {
width: px2rem(135);
height: px2rem(132);
position: absolute;
top: px2rem(4);
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
}
.name {
width: 100%;
height: px2rem(84);
line-height: px2rem(84);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/name3.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(170);
left: 50%;
transform: translateX(-50%);
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: 3.5rem;
}
}
}
ul {
width: px2rem(642);
margin: 0 auto px2rem(138);
2024-02-05 21:27:57 +08:00
overflow-y: scroll;
height: 6.6rem;
&::-webkit-scrollbar {
display: none;
}
2024-02-01 14:18:56 +08:00
li {
width: 100%;
height: px2rem(120);
line-height: px2rem(120);
margin-bottom: px2rem(15);
background: #FFF7F9;
border-radius: px2rem(12);
.num {
width: px2rem(60);
height: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(36);
font-weight: bold;
float: left;
margin-right: px2rem(22);
}
.tx {
width: px2rem(82);
height: px2rem(82);
box-sizing: border-box;
border: px2rem(1) solid #FE71B8;
float: left;
margin-top: px2rem(19);
margin-right: px2rem(17);
border-radius: 50%;
}
.name {
width: px2rem(155);
height: 100%;
color: #AD4868;
font-size: px2rem(26);
font-weight: 500;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.score {
float: right;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
margin-right: px2rem(28);
}
}
}
.my {
position: absolute;
width: 100%;
height: px2rem(138);
line-height: px2rem(138);
bottom: 0;
left: 0;
background: url(../images/my.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
.num {
width: px2rem(60);
height: 100%;
text-align: center;
color: #AD4868;
font-size: px2rem(20);
font-weight: 400;
float: left;
margin-right: px2rem(22);
margin-left: px2rem(24);
}
.tx {
width: px2rem(82);
height: px2rem(82);
box-sizing: border-box;
border: px2rem(1) solid #FE71B8;
float: left;
margin-top: px2rem(29);
margin-right: px2rem(17);
border-radius: 50%;
}
.name {
width: px2rem(155);
height: 100%;
color: #AD4868;
font-size: px2rem(26);
font-weight: 500;
//超出省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.score {
float: right;
color: #AD4868;
font-size: px2rem(22);
font-weight: 400;
margin-right: px2rem(28);
}
}
}
}
.bootom {
margin-bottom: px2rem(20);
p {
width: 100%;
text-align: center;
color: #7E0033;
font-size: px2rem(24);
font-weight: 400;
margin-bottom: px2rem(15);
}
}
.rule {
2024-02-05 21:27:57 +08:00
display: none;
2024-02-01 14:18:56 +08:00
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
z-index: 99;
.rule_in {
width: px2rem(614);
height: px2rem(1015);
background: url(../images/rule_bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
2024-02-05 21:27:57 +08:00
overflow: hidden;
.tabRule {
width: px2rem(488);
height: px2rem(76);
line-height: px2rem(76);
display: flex;
justify-content: space-between;
border-radius: px2rem(48);
background: #fff;
margin: px2rem(45) auto px2rem(19);
div {
text-align: center;
color: #CA5987;
font-size: px2rem(28);
font-weight: 500;
width: px2rem(244);
}
.act {
background: url(../images/rule_act.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
}
.box1 {
width: px2rem(551);
height: 11.4rem;
overflow-y: scroll;
margin: 0 auto;
// display: none;
&::-webkit-scrollbar {
display: none;
}
img {
display: block;
width: px2rem(544);
}
}
.box2 {
display: none;
.box2Tab {
width: px2rem(356);
height: px2rem(60);
margin: 0 auto px2rem(20);
display: flex;
justify-content: space-between;
div {
width: px2rem(176);
}
.tab1 {
background: url(../images/box2tab1.png) no-repeat;
background-size: 100% 100%;
}
.tab2 {
background: url(../images/box2tab2.png) no-repeat;
background-size: 100% 100%;
}
.act1 {
background: url(../images/box2tabAct1.png) no-repeat;
background-size: 100% 100%;
}
.act2 {
background: url(../images/box2tabAct2.png) no-repeat;
background-size: 100% 100%;
}
}
.imgBox {
width: px2rem(564);
height: 10rem;
margin: 0 auto;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
img {
width: 100%;
display: block;
}
}
}
2024-02-01 14:18:56 +08:00
}
}