新春榜单暂存
463
view/peko/activity/2024-yearBenefits/css/index.css
Normal file
@@ -0,0 +1,463 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(0deg, #FB88A9 0%, #FFBECE 61%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
top: 0.93333rem;
|
||||||
|
left: 0.45333rem;
|
||||||
|
z-index: 99;
|
||||||
|
width: 0.82667rem;
|
||||||
|
height: 0.82667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back p {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
position: absolute;
|
||||||
|
width: 9rem;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.82667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 10rem;
|
||||||
|
height: 8.4rem;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
background: url(../images/header.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .rule_icon {
|
||||||
|
width: 0.62667rem;
|
||||||
|
height: 1.73333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.57333rem;
|
||||||
|
right: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
width: 8rem;
|
||||||
|
height: 1.17333rem;
|
||||||
|
line-height: 1.17333rem;
|
||||||
|
margin: 0.10667rem auto 0.58667rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 1.17333rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab div {
|
||||||
|
color: #BB4A56;
|
||||||
|
font-size: 0.4rem;
|
||||||
|
text-align: center;
|
||||||
|
width: 4rem;
|
||||||
|
height: 1.17333rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab .tab1 {
|
||||||
|
background: url(../images/tab1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab .tab2 {
|
||||||
|
background: url(../images/tab2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page1 .pageImg1 {
|
||||||
|
display: block;
|
||||||
|
width: 9.2rem;
|
||||||
|
height: 20.58667rem;
|
||||||
|
margin: 0 auto 0.34667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page1 .pageImg2 {
|
||||||
|
display: block;
|
||||||
|
width: 9.2rem;
|
||||||
|
height: 16.33333rem;
|
||||||
|
margin: 0 auto 0.46667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box {
|
||||||
|
width: 9.2rem;
|
||||||
|
height: 17.14667rem;
|
||||||
|
background: url(../images/page2Bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0 auto 0.48rem;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .listTab {
|
||||||
|
width: 7.38667rem;
|
||||||
|
height: 1.17333rem;
|
||||||
|
line-height: 1.17333rem;
|
||||||
|
border-radius: 1.17333rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0.58667rem auto 2.06667rem;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .listTab div {
|
||||||
|
width: 3.72rem;
|
||||||
|
color: #BB4A56;
|
||||||
|
font-size: 0.4rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .listTab .listTab1 {
|
||||||
|
background: url(../images/listTab1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .listTab .listTab2 {
|
||||||
|
background: url(../images/listTab2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox {
|
||||||
|
position: relative;
|
||||||
|
width: 8.26667rem;
|
||||||
|
height: 5.33333rem;
|
||||||
|
margin: 0 auto -0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top1 {
|
||||||
|
width: 2.54667rem;
|
||||||
|
height: 2.78667rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: -1.25333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top1 .ts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top1 .tx {
|
||||||
|
width: 2.25333rem;
|
||||||
|
height: 2.18667rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.05333rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top1 .name {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.12rem;
|
||||||
|
line-height: 1.12rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 400;
|
||||||
|
background: url(../images/name1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.66667rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top1 .score {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 3.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top2 {
|
||||||
|
width: 2.09333rem;
|
||||||
|
height: 2.28rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 0.33333rem;
|
||||||
|
top: -0.37333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top2 .ts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top2 .tx {
|
||||||
|
width: 1.8rem;
|
||||||
|
height: 1.76rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.05333rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top2 .name {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.12rem;
|
||||||
|
line-height: 1.12rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 400;
|
||||||
|
background: url(../images/name2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.26667rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top2 .score {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top3 {
|
||||||
|
width: 2.09333rem;
|
||||||
|
height: 2.28rem;
|
||||||
|
position: absolute;
|
||||||
|
right: 0.33333rem;
|
||||||
|
top: -0.37333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top3 .ts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top3 .tx {
|
||||||
|
width: 1.8rem;
|
||||||
|
height: 1.76rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.05333rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top3 .name {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.12rem;
|
||||||
|
line-height: 1.12rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 400;
|
||||||
|
background: url(../images/name3.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.26667rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .topBox .top3 .score {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box ul {
|
||||||
|
width: 8.56rem;
|
||||||
|
margin: 0 auto 1.84rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box ul li {
|
||||||
|
width: 100%;
|
||||||
|
height: 1.6rem;
|
||||||
|
line-height: 1.6rem;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
background: #FFF7F9;
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box ul li .num {
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.48rem;
|
||||||
|
font-weight: bold;
|
||||||
|
float: left;
|
||||||
|
margin-right: 0.29333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box ul li .tx {
|
||||||
|
width: 1.09333rem;
|
||||||
|
height: 1.09333rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 0.01333rem solid #FE71B8;
|
||||||
|
float: left;
|
||||||
|
margin-top: 0.25333rem;
|
||||||
|
margin-right: 0.22667rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box ul li .name {
|
||||||
|
width: 2.06667rem;
|
||||||
|
height: 100%;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.34667rem;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box ul li .score {
|
||||||
|
float: right;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: 0.37333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .my {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.84rem;
|
||||||
|
line-height: 1.84rem;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: url(../images/my.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .my .num {
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.26667rem;
|
||||||
|
font-weight: 400;
|
||||||
|
float: left;
|
||||||
|
margin-right: 0.29333rem;
|
||||||
|
margin-left: 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .my .tx {
|
||||||
|
width: 1.09333rem;
|
||||||
|
height: 1.09333rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 0.01333rem solid #FE71B8;
|
||||||
|
float: left;
|
||||||
|
margin-top: 0.38667rem;
|
||||||
|
margin-right: 0.22667rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .my .name {
|
||||||
|
width: 2.06667rem;
|
||||||
|
height: 100%;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.34667rem;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page2 .box .my .score {
|
||||||
|
float: right;
|
||||||
|
color: #AD4868;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: 0.37333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootom {
|
||||||
|
margin-bottom: 0.26667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootom p {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #7E0033;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule .rule_in {
|
||||||
|
width: 8.18667rem;
|
||||||
|
height: 13.53333rem;
|
||||||
|
background: url(../images/rule_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
477
view/peko/activity/2024-yearBenefits/css/index.scss
Normal file
@@ -0,0 +1,477 @@
|
|||||||
|
@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 {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
.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);
|
||||||
|
|
||||||
|
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 {
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
}
|
BIN
view/peko/activity/2024-yearBenefits/images/header.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
BIN
view/peko/activity/2024-yearBenefits/images/listTab1.png
Normal file
After Width: | Height: | Size: 80 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/listTab2.png
Normal file
After Width: | Height: | Size: 80 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/logo.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/my.png
Normal file
After Width: | Height: | Size: 239 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/name1.png
Normal file
After Width: | Height: | Size: 46 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/name2.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/name3.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/page2Bg.png
Normal file
After Width: | Height: | Size: 239 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/pageImg1.png
Normal file
After Width: | Height: | Size: 2.8 MiB |
BIN
view/peko/activity/2024-yearBenefits/images/pageImg2.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
view/peko/activity/2024-yearBenefits/images/rule_bg.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
view/peko/activity/2024-yearBenefits/images/rule_icon.png
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/tab1.png
Normal file
After Width: | Height: | Size: 75 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/tab2.png
Normal file
After Width: | Height: | Size: 75 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/travel/back.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/ts1.png
Normal file
After Width: | Height: | Size: 95 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/ts2.png
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
view/peko/activity/2024-yearBenefits/images/ts3.png
Normal file
After Width: | Height: | Size: 74 KiB |
95
view/peko/activity/2024-yearBenefits/index.html
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>新春福利</title>
|
||||||
|
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="./css/index.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- 顶部返回 -->
|
||||||
|
<div class="back">
|
||||||
|
<img src="./images/travel/back.png" alt="">
|
||||||
|
</div>
|
||||||
|
<!-- 头部 -->
|
||||||
|
<div class="header">
|
||||||
|
<img src="./images/rule_icon.png" alt="" class="rule_icon">
|
||||||
|
</div>
|
||||||
|
<!-- tab -->
|
||||||
|
<div class="tab">
|
||||||
|
<div class="tab1">新春福利</div>
|
||||||
|
<div class="">新春榜单</div>
|
||||||
|
</div>
|
||||||
|
<!-- 页面1 -->
|
||||||
|
<div class="page1">
|
||||||
|
<img src="./images/pageImg1.png" alt="" class="pageImg1">
|
||||||
|
<img src="./images/pageImg2.png" alt="" class="pageImg2">
|
||||||
|
</div>
|
||||||
|
<!-- 页面2 -->
|
||||||
|
<div class="page2">
|
||||||
|
<div class="box">、
|
||||||
|
<!-- 切换 -->
|
||||||
|
<div class="listTab">
|
||||||
|
<div class="listTab1">财气榜</div>
|
||||||
|
<div class="">福气榜</div>
|
||||||
|
</div>
|
||||||
|
<!-- 前三 -->
|
||||||
|
<div class="topBox">
|
||||||
|
<div class="top1">
|
||||||
|
<img src="./images/ts1.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="name">用户昵称</div>
|
||||||
|
<div class="score">财富值: <b>0</b></div>
|
||||||
|
</div>
|
||||||
|
<div class="top2">
|
||||||
|
<img src="./images/ts2.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="name">用户昵称</div>
|
||||||
|
<div class="score">财富值: <b>0</b></div>
|
||||||
|
</div>
|
||||||
|
<div class="top3">
|
||||||
|
<img src="./images/ts3.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="name">用户昵称</div>
|
||||||
|
<div class="score">财富值: <b>0</b></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 非前三 -->
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="num">4</div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="name">用户昵称</div>
|
||||||
|
<div class="score">財氣值:999999999</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="my">
|
||||||
|
<div class="num">未上榜</div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="name">用户昵称</div>
|
||||||
|
<div class="score">財氣值:999999999</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 免责声明 -->
|
||||||
|
<div class="bootom">
|
||||||
|
<p>本活動最終解釋權歸官方所有</p>
|
||||||
|
<p>本活動以及獎勵與蘋果/Google公司無關</p>
|
||||||
|
</div>
|
||||||
|
<!-- 弹窗规则 -->
|
||||||
|
<div class="rule">
|
||||||
|
<div class="rule_in"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
<script src="../../common/js/flexible.js"></script>
|
||||||
|
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="../../common/js/common2.js"></script>
|
||||||
|
<script src="../../common/js/layer.js"></script>
|
||||||
|
<script src="../../common/js/vconsole.min.js"></script>
|
||||||
|
<script src="../../common/js/route-constant.js"></script>
|
||||||
|
<script src="./js/index.js"></script>
|
87
view/peko/activity/2024-yearBenefits/js/index.js
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
let urlPrefix = getUrlPrefix()
|
||||||
|
let browser = checkVersion()
|
||||||
|
let env = EnvCheck();
|
||||||
|
if (env == 'test') {
|
||||||
|
new VConsole();
|
||||||
|
}
|
||||||
|
// 封装layer消息提醒框
|
||||||
|
let layerIndex
|
||||||
|
const showLoading = (content = '加载中...') => {
|
||||||
|
layer.open({
|
||||||
|
type: 2,
|
||||||
|
shadeClose: false,
|
||||||
|
content,
|
||||||
|
success (e) {
|
||||||
|
layerIndex = $(e).attr('index')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const hideLoading = (index) => {
|
||||||
|
layer.close(index)
|
||||||
|
}
|
||||||
|
const toastMsg = (content = '操作完成', time = 2) => {
|
||||||
|
layer.open({
|
||||||
|
content,
|
||||||
|
time,
|
||||||
|
skin: 'msg'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化函数
|
||||||
|
$(function () {
|
||||||
|
getInfoFromClient()
|
||||||
|
setTimeout(function () {
|
||||||
|
// 页面全屏
|
||||||
|
if (browser.app) {
|
||||||
|
if (browser.android) {
|
||||||
|
window.androidJsObj.initShowNav(false)
|
||||||
|
} else {
|
||||||
|
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 顶部返回事件
|
||||||
|
$('.back').click(() => {
|
||||||
|
if (browser.android) {
|
||||||
|
window.androidJsObj.closeWebView()
|
||||||
|
} else {
|
||||||
|
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
// 接口
|
||||||
|
function get () {
|
||||||
|
showLoading()
|
||||||
|
networkRequest({
|
||||||
|
type: 'get',
|
||||||
|
url: urlPrefix + '',
|
||||||
|
data: { type: taskType },
|
||||||
|
success (res) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
} else {
|
||||||
|
toastMsg(res.message)
|
||||||
|
}
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
},
|
||||||
|
error (err) {
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
toastMsg('网络错误,请退出重进')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// tab切换
|
||||||
|
$('.tab div').click(function () {
|
||||||
|
var i = $(this).index() + 1;
|
||||||
|
$('.page1,.page2').hide();
|
||||||
|
$(`.page${i}`).show();
|
||||||
|
$('.tab div').removeClass('tab1').removeClass('tab2');
|
||||||
|
$(this).addClass(`tab${i}`);
|
||||||
|
})
|
||||||
|
// 榜单切换
|
||||||
|
$('.page2 .box .listTab div').click(function () {
|
||||||
|
var i = $(this).index() + 1;
|
||||||
|
$('.page2 .box .listTab div').removeClass('listTab1').removeClass('listTab2');
|
||||||
|
$(this).addClass(`listTab${i}`);
|
||||||
|
})
|