新增双十一活动
This commit is contained in:
Dragon
553
view/peko/activity/2023-ruffian/css/index.css
Normal file
553
view/peko/activity/2023-ruffian/css/index.css
Normal file
@@ -0,0 +1,553 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, #EBC8FA 0%, #FCB0EB 99%);
|
||||
}
|
||||
|
||||
.rabbit {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.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: 10.6rem;
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header .giftBox {
|
||||
width: 8.82667rem;
|
||||
height: 3.2rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 5.97333rem;
|
||||
}
|
||||
|
||||
.header .tab {
|
||||
width: 6.4rem;
|
||||
height: 1.10667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 9.52rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header .tab div {
|
||||
width: 2.82667rem;
|
||||
height: 1.10667rem;
|
||||
line-height: 1.10667rem;
|
||||
color: #F1E8F6;
|
||||
font-size: 0.37333rem;
|
||||
text-align: center;
|
||||
background: url(../images/tab.png) no-repeat;
|
||||
background-size: 100%, 100%;
|
||||
}
|
||||
|
||||
.header .tab .active {
|
||||
background: url(../images/tab_active.png) no-repeat;
|
||||
background-size: 100%, 100%;
|
||||
}
|
||||
|
||||
.header .rule_iaon {
|
||||
width: 1.6rem;
|
||||
height: 0.74667rem;
|
||||
line-height: 0.62667rem;
|
||||
text-align: center;
|
||||
text-indent: 15px;
|
||||
color: #fff;
|
||||
font-size: 0.24rem;
|
||||
position: absolute;
|
||||
right: 0rem;
|
||||
top: 5.33333rem;
|
||||
background: url(../images/rule_icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.page1 .activity1 {
|
||||
width: 10rem;
|
||||
height: 11.89333rem;
|
||||
background: url(../images/activity1Bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: -0.57333rem auto 0.12rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page1 .activity1 div {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
width: 2rem;
|
||||
height: 0.81333rem;
|
||||
line-height: 0.64rem;
|
||||
text-align: center;
|
||||
font-size: 0.28rem;
|
||||
color: #E7FEFF;
|
||||
background: url(../images/lqOut.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.page1 .activity1 .but1 {
|
||||
top: 3.01333rem;
|
||||
}
|
||||
|
||||
.page1 .activity1 .but2 {
|
||||
top: 5.36rem;
|
||||
}
|
||||
|
||||
.page1 .activity1 .but3 {
|
||||
top: 7.72rem;
|
||||
}
|
||||
|
||||
.page1 .activity1 .but4 {
|
||||
top: 10.06667rem;
|
||||
}
|
||||
|
||||
.page1 .activity1 .out {
|
||||
background: url(../images/lq.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.page1 .activity2 {
|
||||
width: 10rem;
|
||||
height: 17.8rem;
|
||||
margin: 0 auto 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page2 .listTab {
|
||||
width: 9.2rem;
|
||||
height: 1.22667rem;
|
||||
margin: 0.4rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.page2 .listTab div {
|
||||
width: 4.6rem;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: #F1E8F6;
|
||||
font-size: 0.32rem;
|
||||
line-height: 1.41333rem;
|
||||
background: url(../images/listTab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.page2 .listTab .active {
|
||||
font-size: 0.4rem;
|
||||
line-height: 1.22667rem;
|
||||
background: url(../images/listTabActive.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.page2 .listBg {
|
||||
width: 9.2rem;
|
||||
min-height: 17rem;
|
||||
margin: 0 auto 0.5rem;
|
||||
background: linear-gradient(0deg, #B483D7 0%, #AD61FA 48%, #CB80FB 100%);
|
||||
border-radius: 0 0 0.26667rem 0.26667rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page2 .listBg .dayTab {
|
||||
width: 7.53333rem;
|
||||
height: 0.88rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0.58667rem auto 0.36rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .dayTab div {
|
||||
width: 2.22667rem;
|
||||
height: 0.88rem;
|
||||
line-height: 0.90667rem;
|
||||
text-align: center;
|
||||
color: #F1E8F6;
|
||||
font-size: 0.29333rem;
|
||||
background: url(../images/dayTab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.page2 .listBg .dayTab .active {
|
||||
background: url(../images/dayTab_active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox {
|
||||
width: 8.85333rem;
|
||||
height: 7.57333rem;
|
||||
background: url(../images/topBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no1 {
|
||||
width: 2.4rem;
|
||||
height: 2.32rem;
|
||||
position: absolute;
|
||||
top: 0.96rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no1 .ts {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no1 .tx {
|
||||
width: 1.78667rem;
|
||||
height: 1.78667rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.33333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no1 .num {
|
||||
width: 1.77333rem;
|
||||
height: 0.74667rem;
|
||||
position: absolute;
|
||||
top: -0.77333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no1 p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.28rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.36rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no1 span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.28rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.73333rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no2 {
|
||||
width: 2.4rem;
|
||||
height: 2.32rem;
|
||||
position: absolute;
|
||||
top: 2.42667rem;
|
||||
left: 0.6rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no2 .ts {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no2 .tx {
|
||||
width: 1.78667rem;
|
||||
height: 1.78667rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.33333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no2 .num {
|
||||
width: 1.77333rem;
|
||||
height: 0.74667rem;
|
||||
position: absolute;
|
||||
top: -0.77333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no2 p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.28rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.36rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no2 span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.28rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.73333rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no3 {
|
||||
width: 2.4rem;
|
||||
height: 2.32rem;
|
||||
position: absolute;
|
||||
top: 2.42667rem;
|
||||
right: 0.6rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no3 .ts {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no3 .tx {
|
||||
width: 1.78667rem;
|
||||
height: 1.78667rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.33333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no3 .num {
|
||||
width: 1.77333rem;
|
||||
height: 0.74667rem;
|
||||
position: absolute;
|
||||
top: -0.77333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no3 p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.28rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.36rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.page2 .listBg .topBox .no3 span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.28rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.73333rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .list {
|
||||
width: 8.13333rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page2 .listBg .list li {
|
||||
width: 100%;
|
||||
height: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
border-radius: 0.26667rem;
|
||||
background: #9B50DB;
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .list li .num {
|
||||
width: 0.6rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
margin: 0 0.26667rem 0 0.33333rem;
|
||||
float: left;
|
||||
font-size: 0.49333rem;
|
||||
}
|
||||
|
||||
.page2 .listBg .list li .tx {
|
||||
width: 1.25333rem;
|
||||
height: 1.25333rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.32rem;
|
||||
margin-top: 0.21333rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.page2 .listBg .list li .nick {
|
||||
float: left;
|
||||
width: 2.1rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.38667rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page2 .listBg .list li .score {
|
||||
float: right;
|
||||
margin-right: 0.36rem;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page2 .myList {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1.98667rem;
|
||||
line-height: 1.98667rem;
|
||||
background: #734DC1;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.page2 .myList .num {
|
||||
width: 1.6rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
margin: 0 0.26667rem 0 0.33333rem;
|
||||
float: left;
|
||||
font-size: 0.49333rem;
|
||||
}
|
||||
|
||||
.page2 .myList .tx {
|
||||
width: 1.25333rem;
|
||||
height: 1.25333rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.32rem;
|
||||
margin-top: 0.33333rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.page2 .myList .nick {
|
||||
float: left;
|
||||
width: 2.1rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.38667rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page2 .myList .score {
|
||||
float: right;
|
||||
margin-right: 0.36rem;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apple {
|
||||
width: 100%;
|
||||
height: 1.97333rem;
|
||||
line-height: 1.97333rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.34667rem;
|
||||
}
|
||||
|
||||
.rule {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.rule .rule_iaon {
|
||||
width: 9.68rem;
|
||||
height: 14.46667rem;
|
||||
background: url(../images/ruleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.rule .rule_iaon .box {
|
||||
position: absolute;
|
||||
width: 8.61333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 1.6rem;
|
||||
height: 12rem;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.rule .rule_iaon .box img {
|
||||
width: 100%;
|
||||
height: 47.41333rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
562
view/peko/activity/2023-ruffian/css/index.scss
Normal file
562
view/peko/activity/2023-ruffian/css/index.scss
Normal file
@@ -0,0 +1,562 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, #EBC8FA 0%, #FCB0EB 99%);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: px2rem(750);
|
||||
height: px2rem(795);
|
||||
background: url(../images/header.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.giftBox {
|
||||
width: px2rem(662);
|
||||
height: px2rem(240);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(448);
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: px2rem(480);
|
||||
height: px2rem(83);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(714);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: px2rem(212);
|
||||
height: px2rem(83);
|
||||
line-height: px2rem(83);
|
||||
color: #F1E8F6;
|
||||
font-size: px2rem(28);
|
||||
text-align: center;
|
||||
background: url(../images/tab.png) no-repeat;
|
||||
background-size: 100%, 100%;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: url(../images/tab_active.png) no-repeat;
|
||||
background-size: 100%, 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rule_iaon {
|
||||
width: px2rem(120);
|
||||
height: px2rem(56);
|
||||
line-height: px2rem(47);
|
||||
text-align: center;
|
||||
text-indent: 15px;
|
||||
color: #fff;
|
||||
font-size: px2rem(18);
|
||||
position: absolute;
|
||||
right: px2rem(0);
|
||||
top: px2rem(400);
|
||||
background: url(../images/rule_icon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.page1 {
|
||||
// display: none;
|
||||
|
||||
.activity1 {
|
||||
width: px2rem(750);
|
||||
height: px2rem(892);
|
||||
background: url(../images/activity1Bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: px2rem(-43) auto px2rem(9);
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
right: px2rem(75);
|
||||
width: px2rem(150);
|
||||
height: px2rem(61);
|
||||
line-height: px2rem(48);
|
||||
text-align: center;
|
||||
font-size: px2rem(21);
|
||||
color: #E7FEFF;
|
||||
background: url(../images/lqOut.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.but1 {
|
||||
top: px2rem(226);
|
||||
}
|
||||
|
||||
.but2 {
|
||||
top: px2rem(402);
|
||||
}
|
||||
|
||||
.but3 {
|
||||
top: px2rem(579);
|
||||
}
|
||||
|
||||
.but4 {
|
||||
top: px2rem(755);
|
||||
}
|
||||
|
||||
.out {
|
||||
background: url(../images/lq.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.activity2 {
|
||||
width: px2rem(750);
|
||||
height: px2rem(1335);
|
||||
margin: 0 auto 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.page2 {
|
||||
display: none;
|
||||
|
||||
.listTab {
|
||||
width: px2rem(690);
|
||||
height: px2rem(92);
|
||||
margin: px2rem(30) auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: px2rem(345);
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: #F1E8F6;
|
||||
font-size: px2rem(24);
|
||||
line-height: px2rem(106);
|
||||
background: url(../images/listTab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-size: px2rem(30);
|
||||
line-height: px2rem(92);
|
||||
background: url(../images/listTabActive.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.listBg {
|
||||
width: px2rem(690);
|
||||
min-height: 17rem;
|
||||
margin: 0 auto 0.5rem;
|
||||
background: linear-gradient(0deg, #B483D7 0%, #AD61FA 48%, #CB80FB 100%);
|
||||
border-radius: 0 0 px2rem(20) px2rem(20);
|
||||
overflow: hidden;
|
||||
|
||||
.dayTab {
|
||||
width: px2rem(565);
|
||||
height: px2rem(66);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: px2rem(44) auto px2rem(27);
|
||||
|
||||
div {
|
||||
width: px2rem(167);
|
||||
height: px2rem(66);
|
||||
line-height: px2rem(68);
|
||||
text-align: center;
|
||||
color: #F1E8F6;
|
||||
font-size: px2rem(22);
|
||||
background: url(../images/dayTab.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: url(../images/dayTab_active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.topBox {
|
||||
width: px2rem(664);
|
||||
height: px2rem(568);
|
||||
background: url(../images/topBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0;
|
||||
position: relative;
|
||||
|
||||
.no1 {
|
||||
width: px2rem(180);
|
||||
height: px2rem(174);
|
||||
position: absolute;
|
||||
top: px2rem(72);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.ts {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(134);
|
||||
height: px2rem(134);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: px2rem(25);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.num {
|
||||
width: px2rem(133);
|
||||
height: px2rem(56);
|
||||
position: absolute;
|
||||
top: px2rem(-58);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(21);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-27);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(21);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-55);
|
||||
}
|
||||
}
|
||||
|
||||
.no2 {
|
||||
width: px2rem(180);
|
||||
height: px2rem(174);
|
||||
position: absolute;
|
||||
top: px2rem(182);
|
||||
left: px2rem(45);
|
||||
|
||||
.ts {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(134);
|
||||
height: px2rem(134);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: px2rem(25);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.num {
|
||||
width: px2rem(133);
|
||||
height: px2rem(56);
|
||||
position: absolute;
|
||||
top: px2rem(-58);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(21);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-27);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(21);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-55);
|
||||
}
|
||||
}
|
||||
|
||||
.no3 {
|
||||
width: px2rem(180);
|
||||
height: px2rem(174);
|
||||
position: absolute;
|
||||
top: px2rem(182);
|
||||
right: px2rem(45);
|
||||
|
||||
.ts {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(134);
|
||||
height: px2rem(134);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: px2rem(25);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.num {
|
||||
width: px2rem(133);
|
||||
height: px2rem(56);
|
||||
position: absolute;
|
||||
top: px2rem(-58);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(21);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-27);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(21);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-55);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: px2rem(610);
|
||||
margin: 0 auto;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(120);
|
||||
line-height: px2rem(120);
|
||||
border-radius: px2rem(20);
|
||||
background: #9B50DB;
|
||||
margin-bottom: px2rem(10);
|
||||
|
||||
.num {
|
||||
width: px2rem(45);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
margin: 0 px2rem(20) 0 px2rem(25);
|
||||
float: left;
|
||||
font-size: px2rem(37);
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(94);
|
||||
height: px2rem(94);
|
||||
border-radius: 50%;
|
||||
margin-right: px2rem(24);
|
||||
margin-top: px2rem(16);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nick {
|
||||
float: left;
|
||||
width: 2.1rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(29);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
margin-right: px2rem(27);
|
||||
font-size: px2rem(26);
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.myList {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: px2rem(149);
|
||||
line-height: px2rem(149);
|
||||
background: #734DC1;
|
||||
z-index: 3;
|
||||
|
||||
.num {
|
||||
width: 1.6rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
margin: 0 px2rem(20) 0 px2rem(25);
|
||||
float: left;
|
||||
font-size: px2rem(37);
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(94);
|
||||
height: px2rem(94);
|
||||
border-radius: 50%;
|
||||
margin-right: px2rem(24);
|
||||
margin-top: px2rem(25);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nick {
|
||||
float: left;
|
||||
width: 2.1rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(29);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
margin-right: px2rem(27);
|
||||
font-size: px2rem(26);
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.apple {
|
||||
width: 100%;
|
||||
height: px2rem(148);
|
||||
line-height: px2rem(148);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(26);
|
||||
}
|
||||
|
||||
.rule {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 99;
|
||||
|
||||
.rule_iaon {
|
||||
width: px2rem(726);
|
||||
height: px2rem(1085);
|
||||
background: url(../images/ruleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y: scroll;
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: px2rem(646);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 1.6rem;
|
||||
height: 12rem;
|
||||
overflow-y: scroll;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: px2rem(3556);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layui-m-layershade{
|
||||
background-color: rgba(0,0,0,.3) !important;
|
||||
}
|
||||
BIN
view/peko/activity/2023-ruffian/images/activity1Bg.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/activity1Bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
BIN
view/peko/activity/2023-ruffian/images/activity2.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/activity2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
BIN
view/peko/activity/2023-ruffian/images/dayTab.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/dayTab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
view/peko/activity/2023-ruffian/images/dayTab_active.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/dayTab_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
view/peko/activity/2023-ruffian/images/giftBox.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/giftBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
view/peko/activity/2023-ruffian/images/header.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
BIN
view/peko/activity/2023-ruffian/images/listTab.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/listTab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
view/peko/activity/2023-ruffian/images/listTabActive.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/listTabActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
view/peko/activity/2023-ruffian/images/logo.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
view/peko/activity/2023-ruffian/images/love.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/love.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
view/peko/activity/2023-ruffian/images/lq.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/lq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/2023-ruffian/images/lqOut.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/lqOut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/2023-ruffian/images/no1.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
view/peko/activity/2023-ruffian/images/no2.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
view/peko/activity/2023-ruffian/images/no3.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
view/peko/activity/2023-ruffian/images/num1.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/num1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
view/peko/activity/2023-ruffian/images/num2.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/num2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
view/peko/activity/2023-ruffian/images/num3.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/num3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
view/peko/activity/2023-ruffian/images/ruleBg.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/ruleBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
view/peko/activity/2023-ruffian/images/rule_icon.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/rule_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
view/peko/activity/2023-ruffian/images/rule_in.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/rule_in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 449 KiB |
BIN
view/peko/activity/2023-ruffian/images/tab.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
view/peko/activity/2023-ruffian/images/tab_active.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/tab_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/peko/activity/2023-ruffian/images/topBox.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/topBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
view/peko/activity/2023-ruffian/images/travel/back.png
Normal file
BIN
view/peko/activity/2023-ruffian/images/travel/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
118
view/peko/activity/2023-ruffian/index.html
Normal file
118
view/peko/activity/2023-ruffian/index.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!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>
|
||||
<!-- header -->
|
||||
<div class="header">
|
||||
<!-- 獎勵展示 -->
|
||||
<img src="./images/giftBox.png" alt="" class="giftBox">
|
||||
<!-- tab -->
|
||||
<div class="tab">
|
||||
<div class="active">活動攻略</div>
|
||||
<div>榜單</div>
|
||||
</div>
|
||||
<!-- 規則Icon -->
|
||||
<div class="rule_iaon">活動規則></div>
|
||||
</div>
|
||||
<!-- 頁面一 -->
|
||||
<div class="page1">
|
||||
<!-- 活動1 -->
|
||||
<div class="activity1">
|
||||
<div class="but1">今日未領取</div>
|
||||
<div class="but2">今日未領取</div>
|
||||
<div class="but3">今日未領取</div>
|
||||
<div class="but4">今日未領取</div>
|
||||
</div>
|
||||
<!-- 活動2 -->
|
||||
<img src="./images/activity2.png" alt="" class="activity2">
|
||||
</div>
|
||||
<!-- 頁面二 -->
|
||||
<div class="page2">
|
||||
<!-- 榜單切換 -->
|
||||
<div class="listTab">
|
||||
<div class="active">勇氣榜（送禮）</div>
|
||||
<div>狂歡榜（收禮）</div>
|
||||
</div>
|
||||
<!-- 榜單盒子 -->
|
||||
<div class="listBg">
|
||||
<!-- 日榜切換 -->
|
||||
<div class="dayTab">
|
||||
<div>昨日榜單</div>
|
||||
<div>今日榜單</div>
|
||||
<div class="active">總榜</div>
|
||||
</div>
|
||||
<!-- 前三 -->
|
||||
<div class="topBox">
|
||||
<div class="no1">
|
||||
<img src="./images/no1.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<img src="./images/num1.png" alt="" class="num">
|
||||
<p>虛位以待</p>
|
||||
<span>勇氣值:0</span>
|
||||
</div>
|
||||
<div class="no2">
|
||||
<img src="./images/no2.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<img src="./images/num2.png" alt="" class="num">
|
||||
<p>虛位以待</p>
|
||||
<span>勇氣值:0</span>
|
||||
</div>
|
||||
<div class="no3">
|
||||
<img src="./images/no3.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<img src="./images/num3.png" alt="" class="num">
|
||||
<p>虛位以待</p>
|
||||
<span>勇氣值:0</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 非前三 -->
|
||||
<ul class="list">
|
||||
<li>
|
||||
<div class="num">04</div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick">用戶昵稱</div>
|
||||
<div class="score">勇氣值:8888.8w</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 自己榜單 -->
|
||||
<div class="myList">
|
||||
<div class="num">未上榜</div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="nick">用戶昵稱</div>
|
||||
<div class="score">勇氣值:8888.8w</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 本活動與Apple inc.無關； -->
|
||||
<div class="apple">本活動最終解釋權歸Piko所有，本活動以及獎勵與Google/蘋果公司無關</div>
|
||||
<!-- 規則彈窗 -->
|
||||
<div class="rule">
|
||||
<div class="rule_iaon">
|
||||
<div class="box">
|
||||
<img src="./images/rule_in.png" alt="">
|
||||
</div>
|
||||
</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/wow.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
192
view/peko/activity/2023-ruffian/js/index.js
Normal file
192
view/peko/activity/2023-ruffian/js/index.js
Normal file
@@ -0,0 +1,192 @@
|
||||
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'
|
||||
})
|
||||
}
|
||||
var rankType = 2;//默認送禮總榜
|
||||
var type = 1;//默認送禮總榜
|
||||
var time = null;//當前日期
|
||||
var dayTime = null;//存儲日期;
|
||||
// 初始化函數
|
||||
$(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)
|
||||
}
|
||||
})
|
||||
getConfig();
|
||||
}, 100)
|
||||
})
|
||||
// 獲取配置接口
|
||||
function getConfig () {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '/act/2023DoubleEleven/task/getConfig',
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
// 處理任務狀態
|
||||
res.data.dailyTaskList.forEach((res, i) => {
|
||||
if (res.status == 1) {
|
||||
$(`.page1 .activity1 .but${i + 1}`).addClass('out');
|
||||
$(`.page1 .activity1 .but${i + 1}`).text('今日已領取');
|
||||
}
|
||||
});
|
||||
// 設置日期
|
||||
time = res.timestamp;
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
}
|
||||
// tab切換
|
||||
$('.header .tab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
$('.page1').hide();
|
||||
$('.page2').hide();
|
||||
$(`.page${i}`).show();
|
||||
if (i == 2) {
|
||||
$('.page2 .listBg .dayTab div').removeClass('active');
|
||||
$('.page2 .listBg .dayTab div').eq(2).addClass('active');
|
||||
getRank(rankType, type);
|
||||
}
|
||||
})
|
||||
// 獲取榜單接口
|
||||
function getRank (rankType, type, date) {
|
||||
$('.page2 .listBg .list li').remove();
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '/act/2023DoubleEleven/rank/getRank',
|
||||
data: { rankType, date },
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
// 處理前三
|
||||
var top3 = res.data.rankList.slice(0, 3);
|
||||
var notTop3 = res.data.rankList.slice(3);
|
||||
if (top3.length < 3) {
|
||||
let arr = new Array(3 - top3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
nick: '虛位以待',
|
||||
score: "0"
|
||||
})
|
||||
top3.push(...arr)
|
||||
}
|
||||
top3.forEach((res, i) => {
|
||||
$(`.page2 .listBg .topBox .no${i + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.page2 .listBg .topBox .no${i + 1} p`).text(res.nick);
|
||||
$(`.page2 .listBg .topBox .no${i + 1} span`).text(`${type == 1 ? "勇氣值:" : "狂歡值:"}${unitProcessing(res.score, 10000, 1, 'w')}`);
|
||||
})
|
||||
// 非前三
|
||||
var str = '';
|
||||
notTop3.forEach((res, i) => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="num">${res.ranking}</div>
|
||||
<img src="${res.avatar}" alt="" class="tx">
|
||||
<div class="nick">${res.nick}</div>
|
||||
<div class="score">${type == 1 ? "勇氣值:" : "狂歡值:"}${unitProcessing(res.score, 10000, 1, 'w')}</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.page2 .listBg .list').append(str);
|
||||
// 處理自己榜單
|
||||
$('.page2 .myList .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
|
||||
$('.page2 .myList .tx').attr('src', res.data.meRank.avatar);
|
||||
$('.page2 .myList .nick').text(res.data.meRank.nick);
|
||||
$('.page2 .myList .score').text(`${type == 1 ? "勇氣值:" : "狂歡值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('網絡錯誤，請退出重進')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 送禮榜和收禮榜切換
|
||||
$('.page2 .listTab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
$('.page2 .listBg .dayTab div').removeClass('active');
|
||||
$('.page2 .listBg .dayTab div').eq(2).addClass('active');
|
||||
type = i;
|
||||
dayTime = null;
|
||||
if (i == 1) {
|
||||
rankType = 2;
|
||||
} else {
|
||||
rankType = 4;
|
||||
}
|
||||
getRank(rankType, type, dayTime);
|
||||
})
|
||||
// 日榜和總榜切換
|
||||
$('.page2 .listBg .dayTab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
if (i == 3) {
|
||||
dayTime = null;
|
||||
rankType = type == 1 ? 2 : 4;
|
||||
} else if (i == 1) {
|
||||
rankType = type == 1 ? 1 : 3;
|
||||
dayTime = dateFormat(time - 86400000, 'yyyy-MM-dd')
|
||||
} else if (i == 2) {
|
||||
rankType = type == 1 ? 1 : 3;
|
||||
dayTime = dateFormat(time, 'yyyy-MM-dd')
|
||||
}
|
||||
getRank(rankType, type, dayTime);
|
||||
})
|
||||
// 打開規則
|
||||
$('.header .rule_iaon').click(function () {
|
||||
$('.rule').show();
|
||||
bodyScroolFun(true);
|
||||
})
|
||||
// 關閉規則
|
||||
$('.rule').click(function () {
|
||||
$('.rule').hide();
|
||||
bodyScroolFun(false);
|
||||
})
|
||||
46
view/peko/activity/2023-ruffian/js/wow.js
Normal file
46
view/peko/activity/2023-ruffian/js/wow.js
Normal file
@@ -0,0 +1,46 @@
|
||||
var baba = document.querySelector('body');
|
||||
baba.addEventListener('click', function (e) {
|
||||
// $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
|
||||
tianJia(e);
|
||||
})
|
||||
|
||||
var erZi = [];
|
||||
function tianJia (e) {
|
||||
var sunZi = document.createElement('div');
|
||||
sunZi.className = 'rabbit';
|
||||
// sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
|
||||
sunZi.innerHTML = '<img src="./images/love.png" alt="">';
|
||||
baba.appendChild(sunZi);
|
||||
erZi.push({
|
||||
el: sunZi,
|
||||
top: e.pageY - 30,
|
||||
left: e.pageX - 20,
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
|
||||
});
|
||||
move();
|
||||
};
|
||||
function move () {
|
||||
for (var i = 0; i < erZi.length; i++) {
|
||||
if (erZi[i].opacity <= 0) {
|
||||
baba.removeChild(erZi[i].el);
|
||||
erZi.splice(i, 1);
|
||||
return;
|
||||
}
|
||||
erZi[i].top--;
|
||||
erZi[i].opacity = erZi[i].opacity - 0.04;
|
||||
// erZi[i].scale = erZi[i].scale + 0.0001;
|
||||
erZi[i].el.style.cssText = `
|
||||
top: ${erZi[i].top}px;
|
||||
left: ${erZi[i].left}px;
|
||||
color: ${erZi[i].color};
|
||||
opacity: ${erZi[i].opacity};
|
||||
transform: scale(${erZi[i].scale});
|
||||
position: absolute;
|
||||
`
|
||||
|
||||
}
|
||||
window.requestAnimationFrame(move);
|
||||
// $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
|
||||
}
|
||||
Reference in New Issue
Block a user