Compare commits
18 Commits
2023-hallo
...
report
| Author | SHA1 | Date | |
|---|---|---|---|
|
e82fd2f66a | ||
|
|
fe010cd895 | ||
|
|
cfb313281a | ||
|
|
a12e981819 | ||
|
|
b236f214a5 | ||
|
|
d0fd6d585c | ||
|
|
2e8e627fad | ||
|
|
b3b3b86926 | ||
|
|
3e4779fac1 | ||
|
|
37e605586d | ||
|
|
a158346bc8 | ||
|
|
f6503b1abf | ||
|
|
fc14cc913e | ||
|
|
883613b6c5 | ||
|
|
2f1580d3ad | ||
|
|
b9873129a0 | ||
|
|
3be5b8be3f | ||
|
|
cbaf037639 |
545
view/yinmeng/activity/2023-anchorBattle/css/index.css
Normal file
545
view/yinmeng/activity/2023-anchorBattle/css/index.css
Normal file
@@ -0,0 +1,545 @@
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 10rem;
|
||||
height: 49.29333rem;
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.rule_icon {
|
||||
width: 1.74667rem;
|
||||
height: 1.86667rem;
|
||||
position: absolute;
|
||||
top: 9.41333rem;
|
||||
right: 0rem;
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 7.89333rem;
|
||||
height: 1.21333rem;
|
||||
background: url(../images/time.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 11.18667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.time span {
|
||||
color: #320959;
|
||||
font-size: 0.32rem;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
height: 0.4rem;
|
||||
line-height: 0.35rem;
|
||||
width: 0.55rem;
|
||||
top: 0.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time .sp1 {
|
||||
left: 3.37rem;
|
||||
}
|
||||
|
||||
.time .sp2 {
|
||||
left: 4.3rem;
|
||||
}
|
||||
|
||||
.time .sp3 {
|
||||
left: 5.22rem;
|
||||
}
|
||||
|
||||
.time .sp4 {
|
||||
left: 6.13rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 4.49333rem;
|
||||
height: 1.02667rem;
|
||||
position: relative;
|
||||
top: 12.1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeOut {
|
||||
width: 7.89333rem;
|
||||
height: 1.21333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 11.18667rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 8.70667rem;
|
||||
position: absolute;
|
||||
top: 13.22667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tab div {
|
||||
width: 2.86667rem;
|
||||
height: 1.16rem;
|
||||
}
|
||||
|
||||
.tab .tab1 {
|
||||
background: url(../images/tab1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab .tab2 {
|
||||
background: url(../images/tab2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab .tab3 {
|
||||
background: url(../images/tab3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab .act1 {
|
||||
background: url(../images/tabAct1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab .act2 {
|
||||
background: url(../images/tabAct2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab .act3 {
|
||||
background: url(../images/tabAct3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.timeOutTab {
|
||||
width: 2.86667rem;
|
||||
height: 1.16rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 13.22667rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.33333rem;
|
||||
position: absolute;
|
||||
top: 14.8rem;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.top3 {
|
||||
width: 8.85333rem;
|
||||
height: 2.78667rem;
|
||||
background: url(../images/top3Box.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin: 17.6rem auto 0.05333rem;
|
||||
}
|
||||
|
||||
.top3 .no1 {
|
||||
width: 3.14667rem;
|
||||
height: 3.54667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -3.41333rem;
|
||||
}
|
||||
|
||||
.top3 .no1 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.top3 .no1 .tx {
|
||||
width: 2.17333rem;
|
||||
height: 2.17333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.73rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top3 .no1 p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4.26667rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.top3 .no1 span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.26667rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4.93333rem;
|
||||
}
|
||||
|
||||
.top3 .no1 b {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.26667rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5.4rem;
|
||||
}
|
||||
|
||||
.top3 .no1 b i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.top3 .no2 {
|
||||
width: 2.8rem;
|
||||
height: 3.14667rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2.4rem;
|
||||
}
|
||||
|
||||
.top3 .no2 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.top3 .no2 .tx {
|
||||
width: 1.93333rem;
|
||||
height: 1.93333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.73rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top3 .no2 p {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0.13333rem;
|
||||
top: 3.73333rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.top3 .no2 span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.26667rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4.26667rem;
|
||||
}
|
||||
|
||||
.top3 .no2 b {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.26667rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4.66667rem;
|
||||
}
|
||||
|
||||
.top3 .no2 b i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.top3 .no3 {
|
||||
width: 2.8rem;
|
||||
height: 3.14667rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2.4rem;
|
||||
}
|
||||
|
||||
.top3 .no3 .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.top3 .no3 .tx {
|
||||
width: 1.93333rem;
|
||||
height: 1.93333rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.73rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.top3 .no3 p {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0.26667rem;
|
||||
top: 3.73333rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.top3 .no3 span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.26667rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4.26667rem;
|
||||
}
|
||||
|
||||
.top3 .no3 b {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.26667rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4.66667rem;
|
||||
}
|
||||
|
||||
.top3 .no3 b i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 8.85333rem;
|
||||
height: 25.8rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.list li {
|
||||
width: 100%;
|
||||
height: 2.08rem;
|
||||
margin-bottom: 0.08rem;
|
||||
background: url(../images/liBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.2rem 0 0.6rem;
|
||||
}
|
||||
|
||||
.list li .num {
|
||||
width: 0.53333rem;
|
||||
height: 100%;
|
||||
line-height: 2.08rem;
|
||||
color: #fff;
|
||||
font-size: 0.46667rem;
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-right: 0.30667rem;
|
||||
}
|
||||
|
||||
.list li .tx {
|
||||
width: 1.17333rem;
|
||||
height: 1.17333rem;
|
||||
border-radius: 50%;
|
||||
background: url(../images/liTx.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 0.44rem;
|
||||
margin-right: 0.34667rem;
|
||||
}
|
||||
|
||||
.list li .box {
|
||||
width: 2.8rem;
|
||||
float: left;
|
||||
color: #fff;
|
||||
font-size: 0.34667rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.list li .box p {
|
||||
width: 100%;
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.14667rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list li .score {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 2.08rem;
|
||||
color: #fff;
|
||||
font-size: 0.34667rem;
|
||||
}
|
||||
|
||||
.txt {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.28rem;
|
||||
font-weight: 500;
|
||||
top: 48.68rem;
|
||||
}
|
||||
|
||||
.rule {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rule .rule_in {
|
||||
width: 8.68rem;
|
||||
height: 13.88rem;
|
||||
background: url(../images/ruleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.rule .rule_in .tabs {
|
||||
width: 7.04rem;
|
||||
height: 1.86667rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 0.54667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.rule .rule_in .tabs div {
|
||||
width: 3.33333rem;
|
||||
height: 1.86667rem;
|
||||
}
|
||||
|
||||
.rule .rule_in .tabs .tab1 {
|
||||
background: url(../images/ruletab1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.rule .rule_in .tabs .tab2 {
|
||||
background: url(../images/ruletab2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.rule .rule_in .tabs .ruletabActs1 {
|
||||
background: url(../images/ruletabAct1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.rule .rule_in .tabs .ruletabActs2 {
|
||||
background: url(../images/ruletabAct2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.rule .rule_in .box1,
|
||||
.rule .rule_in .box2 {
|
||||
width: 8rem;
|
||||
height: 10.68rem;
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 2.38667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.rule .rule_in .box1::-webkit-scrollbar,
|
||||
.rule .rule_in .box2::-webkit-scrollbar {
|
||||
width: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rule .rule_in .box1 img,
|
||||
.rule .rule_in .box2 img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 23.98667rem;
|
||||
}
|
||||
|
||||
.rule .rule_in .box2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rule .rule_in .box2 img {
|
||||
height: 10.68rem;
|
||||
}
|
||||
547
view/yinmeng/activity/2023-anchorBattle/css/index.scss
Normal file
547
view/yinmeng/activity/2023-anchorBattle/css/index.scss
Normal file
@@ -0,0 +1,547 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, .3) !important;
|
||||
}
|
||||
|
||||
body {
|
||||
width: px2rem(750);
|
||||
height: px2rem(3697);
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.rule_icon {
|
||||
width: px2rem(131);
|
||||
height: px2rem(140);
|
||||
position: absolute;
|
||||
top: px2rem(706);
|
||||
right: px2rem(0);
|
||||
}
|
||||
|
||||
.time {
|
||||
width: px2rem(592);
|
||||
height: px2rem(91);
|
||||
background: url(../images/time.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: px2rem(839);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
span {
|
||||
color: #320959;
|
||||
font-size: px2rem(24);
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
height: 0.4rem;
|
||||
line-height: 0.35rem;
|
||||
width: 0.55rem;
|
||||
top: 0.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sp1 {
|
||||
left: 3.37rem;
|
||||
}
|
||||
|
||||
.sp2 {
|
||||
left: 4.3rem;
|
||||
}
|
||||
|
||||
.sp3 {
|
||||
left: 5.22rem;
|
||||
}
|
||||
|
||||
.sp4 {
|
||||
left: 6.13rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: px2rem(337);
|
||||
height: px2rem(77);
|
||||
position: relative;
|
||||
top: 12.1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeOut {
|
||||
width: px2rem(592);
|
||||
height: px2rem(91);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(839);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: px2rem(653);
|
||||
position: absolute;
|
||||
top: px2rem(992);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: px2rem(215);
|
||||
height: px2rem(87);
|
||||
}
|
||||
|
||||
.tab1 {
|
||||
background: url(../images/tab1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab2 {
|
||||
background: url(../images/tab2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab3 {
|
||||
background: url(../images/tab3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.act1 {
|
||||
background: url(../images/tabAct1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.act2 {
|
||||
background: url(../images/tabAct2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.act3 {
|
||||
background: url(../images/tabAct3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.timeOutTab {
|
||||
width: px2rem(215);
|
||||
height: px2rem(87);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(992);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(25);
|
||||
position: absolute;
|
||||
top: px2rem(1110);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.top3 {
|
||||
width: px2rem(664);
|
||||
height: px2rem(209);
|
||||
background: url(../images/top3Box.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin: 17.6rem auto px2rem(4);
|
||||
|
||||
.no1 {
|
||||
width: px2rem(236);
|
||||
height: px2rem(266);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(-256);
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(163);
|
||||
height: px2rem(163);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.73rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(320);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(370);
|
||||
}
|
||||
|
||||
b {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(405);
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no2 {
|
||||
width: px2rem(210);
|
||||
height: px2rem(236);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2.4rem;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(145);
|
||||
height: px2rem(145);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.73rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: px2rem(10);
|
||||
top: px2rem(280);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(320);
|
||||
}
|
||||
|
||||
b {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(350);
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no3 {
|
||||
width: px2rem(210);
|
||||
height: px2rem(236);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2.4rem;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(145);
|
||||
height: px2rem(145);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0.73rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
p {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: px2rem(20);
|
||||
top: px2rem(280);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(320);
|
||||
}
|
||||
|
||||
b {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: px2rem(20);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(350);
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: px2rem(664);
|
||||
height: 25.8rem;
|
||||
margin: 0 auto;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(156);
|
||||
margin-bottom: px2rem(6);
|
||||
background: url(../images/liBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(15) 0 px2rem(45);
|
||||
|
||||
.num {
|
||||
width: px2rem(40);
|
||||
height: 100%;
|
||||
line-height: px2rem(156);
|
||||
color: #fff;
|
||||
font-size: px2rem(35);
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-right: px2rem(23);
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(88);
|
||||
height: px2rem(88);
|
||||
border-radius: 50%;
|
||||
background: url(../images/liTx.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: px2rem(33);
|
||||
margin-right: px2rem(26);
|
||||
}
|
||||
|
||||
.box {
|
||||
width: px2rem(210);
|
||||
float: left;
|
||||
color: #fff;
|
||||
font-size: px2rem(26);
|
||||
font-weight: 500;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
margin-top: px2rem(45);
|
||||
margin-bottom: px2rem(11);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: px2rem(156);
|
||||
color: #fff;
|
||||
font-size: px2rem(26);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.txt {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(21);
|
||||
font-weight: 500;
|
||||
top: px2rem(3651);
|
||||
}
|
||||
|
||||
.rule {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
|
||||
.rule_in {
|
||||
width: px2rem(651);
|
||||
height: px2rem(1041);
|
||||
background: url(../images/ruleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.tabs {
|
||||
width: px2rem(528);
|
||||
height: px2rem(140);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: px2rem(41);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
div {
|
||||
width: px2rem(250);
|
||||
height: px2rem(140);
|
||||
}
|
||||
|
||||
.tab1 {
|
||||
background: url(../images/ruletab1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab2 {
|
||||
background: url(../images/ruletab2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.ruletabActs1 {
|
||||
background: url(../images/ruletabAct1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.ruletabActs2 {
|
||||
background: url(../images/ruletabAct2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.box1,
|
||||
.box2 {
|
||||
width: px2rem(600);
|
||||
height: px2rem(801);
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: px2rem(179);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: px2rem(1799);
|
||||
}
|
||||
}
|
||||
|
||||
.box2 {
|
||||
display: none;
|
||||
|
||||
img {
|
||||
height: px2rem(801);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
view/yinmeng/activity/2023-anchorBattle/images/bg.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/liBg.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/liBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/liTx.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/liTx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/logo.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/no1.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/no2.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/no3.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruleBg.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruleBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruleBgIn.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruleBgIn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruleBgIn2.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruleBgIn2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/rule_icon.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/rule_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletab1.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletab1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletab2.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletab2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletabAct1.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletabAct1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletabAct2.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/ruletabAct2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/tab1.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/tab1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/tab2.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/tab2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/tab3.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/tab3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/tabAct1.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/tabAct1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/tabAct2.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/tabAct2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/tabAct3.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/tabAct3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/time.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/timeOut.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/timeOut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/timeOutTab.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/timeOutTab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/title.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/top3Box.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/top3Box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
view/yinmeng/activity/2023-anchorBattle/images/travel/back.png
Normal file
BIN
view/yinmeng/activity/2023-anchorBattle/images/travel/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
102
view/yinmeng/activity/2023-anchorBattle/index.html
Normal file
102
view/yinmeng/activity/2023-anchorBattle/index.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!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>
|
||||
<!-- 活动规则icon -->
|
||||
<img src="./images/rule_icon.png" alt="" class="rule_icon">
|
||||
<!-- 倒计时 -->
|
||||
<div class="time">
|
||||
<span class="sp1">00</span>
|
||||
<span class="sp2">00</span>
|
||||
<span class="sp3">00</span>
|
||||
<span class="sp4">00</span>
|
||||
</div>
|
||||
<!-- 倒计时结束时间标题 -->
|
||||
<img src="./images/timeOut.png" alt="" class="timeOut">
|
||||
<!-- 标题 -->
|
||||
<img src="./images/title.png" alt="" class="title">
|
||||
<!-- 切换 -->
|
||||
<div class="tab">
|
||||
<div class="tab1"></div>
|
||||
<div class="tab2 act2"></div>
|
||||
<div class="tab3"></div>
|
||||
</div>
|
||||
<!-- 时间结束展示tab -->
|
||||
<img src="./images/timeOutTab.png" alt="" class="timeOutTab">
|
||||
<p class="text">1钻=1闪耀值，闪耀榜前三获得本次活动奖励</p>
|
||||
<!-- 前三 -->
|
||||
<div class="top3">
|
||||
<div class="no no1">
|
||||
<img src="./images/no1.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<p></p>
|
||||
<span></span>
|
||||
<b>闪耀值:<i>0</i></b>
|
||||
</div>
|
||||
<div class="no no2">
|
||||
<img src="./images/no2.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<p></p>
|
||||
<span></span>
|
||||
<b>闪耀值:<i>0</i></b>
|
||||
</div>
|
||||
<div class="no no3">
|
||||
<img src="./images/no3.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<p></p>
|
||||
<span></span>
|
||||
<b>闪耀值:<i>0</i></b>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 非前三 -->
|
||||
<ul class="list">
|
||||
<li>
|
||||
<div class="num">44</div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="box">
|
||||
<p>房间名称</p>
|
||||
<span>ID: 1234</span>
|
||||
</div>
|
||||
<div class="score">闪耀值: 123456</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 免责声明 -->
|
||||
<p class="txt">本活动与Apple inc.无关</p>
|
||||
<!-- 规则弹窗 -->
|
||||
<div class="rule">
|
||||
<div class="rule_in">
|
||||
<div class="tabs">
|
||||
<div class="tab1 ruletabActs1"></div>
|
||||
<div class="tab2"></div>
|
||||
</div>
|
||||
<div class="box1">
|
||||
<img src="./images/ruleBgIn.png" alt="">
|
||||
</div>
|
||||
<div class="box2">
|
||||
<img src="./images/ruleBgIn2.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>
|
||||
239
view/yinmeng/activity/2023-anchorBattle/js/index.js
Normal file
239
view/yinmeng/activity/2023-anchorBattle/js/index.js
Normal file
@@ -0,0 +1,239 @@
|
||||
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 leftTime;//倒计时暂存
|
||||
var timeOut2;//倒计时暂存
|
||||
var rankType = 1;//1日榜2总榜
|
||||
var date;//日期
|
||||
var dateArr = [];//存放昨日和今日时间
|
||||
// 初始化函数
|
||||
$(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)
|
||||
}
|
||||
})
|
||||
getRank(rankType, date);
|
||||
}, 100)
|
||||
})
|
||||
// 获取榜单接口
|
||||
function getRank (rankType, date) {
|
||||
$('.list li').remove();
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'get',
|
||||
url: urlPrefix + '/act/2023RoomPk/rank/getRank',
|
||||
data: { rankType, date },
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
// 处理倒计时
|
||||
if (rankType == 1) {
|
||||
const curTime = res.timestamp
|
||||
var endTime = null;
|
||||
if (browser.ios) {
|
||||
endTime = (new Date(`${res.data.dateList[res.data.dateList.length - 1]} 11:59:59`.replace(/-/g, "/")).getTime())
|
||||
} else {
|
||||
endTime = (new Date(`${res.data.dateList[res.data.dateList.length - 1]} 11:59:59`).getTime())
|
||||
}
|
||||
leftTime = endTime - res.timestamp;
|
||||
const hadEnd = (endTime - curTime) <= 0
|
||||
if (hadEnd) {
|
||||
rankType = 2;
|
||||
date = null;
|
||||
getRank(rankType, date)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
countup();
|
||||
dateArr[0] = dateFormat(res.timestamp - 86400000, 'yyyy-MM-dd');
|
||||
dateArr[1] = dateFormat(res.timestamp, 'yyyy-MM-dd');
|
||||
// 处理前三
|
||||
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: '虚位以待',
|
||||
erbanNo: 'ID:虚位以待',
|
||||
score: " 0"
|
||||
})
|
||||
top3.push(...arr)
|
||||
}
|
||||
top3.forEach((res, i) => {
|
||||
$(`.top3 .no${i + 1} .ts`).attr('uid', res.uid);
|
||||
$(`.top3 .no${i + 1} .tx`).attr('src', res.avatar);
|
||||
$(`.top3 .no${i + 1} p`).text(res.nick);
|
||||
$(`.top3 .no${i + 1} span`).text(res.erbanNo);
|
||||
$(`.top3 .no${i + 1} b i`).text(unitProcessing(res.score, 10000, 1, 'w'));
|
||||
})
|
||||
// 非前三
|
||||
var str = '';
|
||||
notTop3.forEach((res, i) => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="num">${res.ranking}</div>
|
||||
<img src="${res.avatar}" uid=${res.uid} alt="" class="tx">
|
||||
<div class="box">
|
||||
<p>${res.nick}</p>
|
||||
<span>ID: ${res.erbanNo}</span>
|
||||
</div>
|
||||
<div class="score">闪耀值: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.list').append(str);
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 榜单切换
|
||||
$('.tab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
rankType = i == 1 || i == 2 ? 1 : 2;
|
||||
$('.tab div').removeClass('act1').removeClass('act3').removeClass('act2');
|
||||
$(this).addClass(`act${i}`);
|
||||
if (i == 1 || i == 2) {
|
||||
date = dateArr[i - 1];
|
||||
} else {
|
||||
date = null;
|
||||
}
|
||||
getRank(rankType, date);
|
||||
|
||||
})
|
||||
// 规则tab切换
|
||||
$('.rule .rule_in .tabs div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$('.rule .rule_in .tabs div').removeClass('ruletabActs1').removeClass('ruletabActs2');
|
||||
$('.rule .rule_in .box1, .rule .rule_in .box2').hide();
|
||||
$(this).addClass(`ruletabActs${i}`);
|
||||
if (i == 1) {
|
||||
$('.rule .rule_in .box1').show();
|
||||
} else {
|
||||
$('.rule .rule_in .box2').show();
|
||||
}
|
||||
return false
|
||||
})
|
||||
// 打开规则
|
||||
$('.rule_icon').click(function () {
|
||||
$('.rule').show();
|
||||
bodyScroolFun(true);
|
||||
})
|
||||
// 关闭规则
|
||||
$('.rule').click(function () {
|
||||
$(this).hide();
|
||||
bodyScroolFun(false);
|
||||
})
|
||||
// 倒计时
|
||||
function countup () {
|
||||
clearTimeout(timeOut2)
|
||||
//获取当前时间
|
||||
// var now = nowTime;
|
||||
var d = 0;
|
||||
var h = 0;
|
||||
var m = 0;
|
||||
var s = 0;
|
||||
//定义变量 d,h,m,s保存倒计时的时间
|
||||
var d, h, m, s;
|
||||
//递归每秒调⽤countTime⽅法，显⽰动态时间效果
|
||||
if (leftTime >= 0 && leftTime < 1000) {
|
||||
rankType = 2;
|
||||
date = null;
|
||||
getRank(rankType, date);
|
||||
} else if (leftTime > 1000) {
|
||||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
||||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
||||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
||||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
||||
//将倒计时赋值到div中
|
||||
$('.time .sp1').text(d);
|
||||
$('.time .sp2').text(h);
|
||||
$('.time .sp3').text(m);
|
||||
$('.time .sp4').text(s);
|
||||
} else {
|
||||
//todo 展示活动已结束
|
||||
$('.timeOutTab').show();
|
||||
$('.timeOut').show();
|
||||
$('.tab').hide();
|
||||
$('.time').hide();
|
||||
}
|
||||
if (leftTime > 0){
|
||||
leftTime = leftTime - 1000;
|
||||
}
|
||||
timeOut2 = setTimeout(countup, 1000);
|
||||
}
|
||||
//补0操作
|
||||
function getzf (num) {
|
||||
if (parseInt(num) < 10) {
|
||||
num = '0' + num;
|
||||
}
|
||||
return num;
|
||||
}
|
||||
// 点击前三按钮
|
||||
$('.top3 .no .ts').on('click', function () {
|
||||
var uid = $(this).attr('uid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(uid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(uid);
|
||||
}
|
||||
}
|
||||
})
|
||||
// 点击非前三按钮
|
||||
$('.list').on('click', 'li .tx', function () {
|
||||
var uid = $(this).attr('uid');
|
||||
console.log(uid);
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(uid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(uid);
|
||||
}
|
||||
}
|
||||
})
|
||||
46
view/yinmeng/activity/2023-anchorBattle/js/wow.js
Normal file
46
view/yinmeng/activity/2023-anchorBattle/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" });
|
||||
}
|
||||
@@ -102,7 +102,7 @@ body::-webkit-scrollbar {
|
||||
|
||||
.giftBox {
|
||||
width: 9.2rem;
|
||||
height: 5.96rem;
|
||||
height: 6.49333rem;
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto 0.06667rem;
|
||||
@@ -111,9 +111,9 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
.giftBox .swiper {
|
||||
width: 6.56rem;
|
||||
height: 4rem;
|
||||
margin: 1.48rem auto 0;
|
||||
width: 8.02667rem;
|
||||
height: 4.85333rem;
|
||||
margin: 1.45333rem auto 0;
|
||||
}
|
||||
|
||||
.page1 {
|
||||
|
||||
@@ -110,7 +110,7 @@ body {
|
||||
|
||||
.giftBox {
|
||||
width: px2rem(690);
|
||||
height: px2rem(447);
|
||||
height: px2rem(487);
|
||||
background: url(../images/giftBox.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto px2rem(5);
|
||||
@@ -118,9 +118,9 @@ body {
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
width: px2rem(492);
|
||||
height: px2rem(300);
|
||||
margin: px2rem(111) auto 0;
|
||||
width: px2rem(602);
|
||||
height: px2rem(364);
|
||||
margin: px2rem(109) auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 97 KiB |
553
view/yinmeng/activity/2023-ruffian/css/index.css
Normal file
553
view/yinmeng/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/yinmeng/activity/2023-ruffian/css/index.scss
Normal file
562
view/yinmeng/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/yinmeng/activity/2023-ruffian/images/activity1Bg.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/activity1Bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/activity2.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/activity2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/dayTab.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/dayTab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/dayTab_active.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/dayTab_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/giftBox.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/giftBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/header.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/listTab.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/listTab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/listTabActive.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/listTabActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/logo.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/love.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/love.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/lq.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/lq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/lqOut.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/lqOut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/no1.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/no2.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/no3.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/num1.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/num1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/num2.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/num2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/num3.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/num3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/ruleBg.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/ruleBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/rule_icon.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/rule_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/rule_in.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/rule_in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/tab.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/tab_active.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/tab_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/topBox.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/topBox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
view/yinmeng/activity/2023-ruffian/images/travel/back.png
Normal file
BIN
view/yinmeng/activity/2023-ruffian/images/travel/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
118
view/yinmeng/activity/2023-ruffian/index.html
Normal file
118
view/yinmeng/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">本活动与Apple inc.无关；</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/yinmeng/activity/2023-ruffian/js/index.js
Normal file
192
view/yinmeng/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/yinmeng/activity/2023-ruffian/js/wow.js
Normal file
46
view/yinmeng/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" });
|
||||
}
|
||||
BIN
view/yinmeng/modules/level/images/charm2.png
Normal file
BIN
view/yinmeng/modules/level/images/charm2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
BIN
view/yinmeng/modules/level/images/wealth2.png
Normal file
BIN
view/yinmeng/modules/level/images/wealth2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
@@ -55,7 +55,7 @@
|
||||
<img src="./images/user.png" alt="">
|
||||
<img class="effects-img" src="./images/effects1.png" alt=""> -->
|
||||
|
||||
<img src="./images/wealth.png" alt="">
|
||||
<img class="wealth" src="./images/wealth.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="user-charm">
|
||||
@@ -78,7 +78,7 @@
|
||||
<p class="explain-tit">等级说明</p>
|
||||
<p class="explain-title">魅力等级是您在音萌个人魅力的成长属性，每收到1个钻石的礼物，积累一点魅力值，随着您的等级上升，您的等级标致会有相应的颜色变化。</p>
|
||||
</div> -->
|
||||
<img class="explain-img" src="./images/charm.png" alt="">
|
||||
<img class="explain-img charm" src="./images/charm.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,11 +86,14 @@
|
||||
<!--魅力等级start-->
|
||||
|
||||
<!--魅力等级end-->
|
||||
<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/route-constant.js"></script>
|
||||
<script src="../../common/js/swiper.min.js"></script>
|
||||
<script src="js/index.js?v=1.1"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
<script src="./js/level.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
21
view/yinmeng/modules/level/js/level.js
Normal file
21
view/yinmeng/modules/level/js/level.js
Normal file
@@ -0,0 +1,21 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
var url = getQueryString()
|
||||
|
||||
// 初始化函数
|
||||
$(function () {
|
||||
getInfoFromClient();
|
||||
setTimeout(function () {
|
||||
if (browser.ios) {
|
||||
if (url.appVersionCode >= 150) {
|
||||
$('.wealth').attr('src', './images/wealth2.png')
|
||||
$('.charm').attr('src', './images/charm2.png')
|
||||
}
|
||||
} else {
|
||||
if (JSON.parse(pubInfo.deviceInfo).appVersionCode >= 150) {
|
||||
$('.wealth').attr('src', './images/wealth2.png')
|
||||
$('.charm').attr('src', './images/charm2.png')
|
||||
}
|
||||
}
|
||||
}, 200)
|
||||
})
|
||||
163
view/yinmeng/modules/report/css/index.css
Normal file
163
view/yinmeng/modules/report/css/index.css
Normal file
@@ -0,0 +1,163 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #2E5FEC;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 10rem;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 9.2rem;
|
||||
border-radius: 0.26667rem;
|
||||
background: #fff;
|
||||
margin: -0.2rem auto 0.66667rem;
|
||||
position: relative;
|
||||
padding: 0.26667rem 0.26667rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form .title {
|
||||
width: 100%;
|
||||
color: #e21e1e;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .content {
|
||||
color: #5f5f5f;
|
||||
font-size: 0.37333rem;
|
||||
line-height: 0.53333rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.form p {
|
||||
color: #474646;
|
||||
font-size: 0.37333rem;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form p b {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form p i {
|
||||
font-style: normal;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
|
||||
.form .textarea {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: 0.26667rem;
|
||||
display: block;
|
||||
height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.26667rem;
|
||||
font-size: 0.32rem;
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: whitesmoke;
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .textarea2 {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: 0.26667rem;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.26667rem;
|
||||
font-size: 0.32rem;
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: whitesmoke;
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .inform-img {
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.form .inform-img .inform-img-title {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form .inform-img .box {
|
||||
margin-top: 0.53333rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence {
|
||||
overflow: hidden;
|
||||
border-radius: 0.26667rem;
|
||||
width: 2.13333rem;
|
||||
height: 2.13333rem;
|
||||
margin-right: 0.2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence.has-data .reupdate {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form .inform-img .box .update_evidence .reupdate {
|
||||
width: 100%;
|
||||
height: 0.53333rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 0.53333rem;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form .but {
|
||||
width: 80%;
|
||||
margin: 0.4rem auto 0;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
text-align: center;
|
||||
color: #1a1a1a;
|
||||
background: #ffeb3b;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
170
view/yinmeng/modules/report/css/index.scss
Normal file
170
view/yinmeng/modules/report/css/index.scss
Normal file
@@ -0,0 +1,170 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #2E5FEC;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, .3) !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: px2rem(750);
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 9.2rem;
|
||||
// height: 5rem;
|
||||
border-radius: px2rem(20);
|
||||
background: #fff;
|
||||
margin: px2rem(-15) auto px2rem(50);
|
||||
position: relative;
|
||||
padding: px2rem(20) px2rem(20);
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
color: rgb(226, 30, 30);
|
||||
font-size: px2rem(32);
|
||||
font-weight: bold;
|
||||
margin-bottom: px2rem(20);
|
||||
}
|
||||
|
||||
.content {
|
||||
color: #5f5f5f;
|
||||
font-size: px2rem(28);
|
||||
line-height: px2rem(40);
|
||||
margin-bottom: px2rem(30);
|
||||
}
|
||||
|
||||
p {
|
||||
color: #474646;
|
||||
font-size: px2rem(28);
|
||||
margin-bottom: px2rem(20);
|
||||
|
||||
b {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: px2rem(18);
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: px2rem(20);
|
||||
display: block;
|
||||
height: 2rem;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(20);
|
||||
font-size: px2rem(24);
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: px2rem(20);
|
||||
}
|
||||
|
||||
.textarea2 {
|
||||
width: 100%;
|
||||
background: #ccc;
|
||||
border-radius: px2rem(20);
|
||||
display: block;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(20);
|
||||
font-size: px2rem(24);
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-bottom: px2rem(20);
|
||||
}
|
||||
|
||||
.inform-img {
|
||||
margin-bottom: px2rem(20);
|
||||
|
||||
.inform-img-title {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: px2rem(40);
|
||||
display: flex;
|
||||
|
||||
.update_evidence {
|
||||
overflow: hidden;
|
||||
border-radius: px2rem(20);
|
||||
width: px2rem(160);
|
||||
height: px2rem(160);
|
||||
margin-right: px2rem(15);
|
||||
position: relative;
|
||||
|
||||
&.has-data {
|
||||
.reupdate {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.reupdate {
|
||||
width: 100%;
|
||||
height: px2rem(40);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: px2rem(40);
|
||||
z-index: 2;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.but {
|
||||
width: 80%;
|
||||
margin: px2rem(30) auto 0;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
text-align: center;
|
||||
color: #1a1a1a;
|
||||
background: #ffeb3b;
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
BIN
view/yinmeng/modules/report/images/bg.png
Normal file
BIN
view/yinmeng/modules/report/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
view/yinmeng/modules/report/images/report_uploading_img.png
Normal file
BIN
view/yinmeng/modules/report/images/report_uploading_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
60
view/yinmeng/modules/report/index.html
Normal file
60
view/yinmeng/modules/report/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
<img src="./images/bg.png" alt="" class="box">
|
||||
<div class="form">
|
||||
<div class="title">重要提醒:</div>
|
||||
<div class="content">如果您发现有不法分子通过平台进行违规操作，请您务必向我们进行反馈，可在下发填写相关信息，或在我的-联系客服反馈，感谢您的理解与支持!</div>
|
||||
<p><b>*</b>请简单描述您遇到的问题:</p>
|
||||
<textarea name="textarea" placeholder="请输入举报内容" class="textarea"></textarea>
|
||||
<p><b>*</b>请填写被举报人ID:</p>
|
||||
<textarea name="textarea" placeholder="被举报人ID" class="textarea2"></textarea>
|
||||
<p><b>*</b>请上传截图，包含被举报人信息<i></i>:</p>
|
||||
<div class="inform-img">
|
||||
<p class="inform-img-title">上传截图 (图片不能超过1M)</p>
|
||||
<div class="box">
|
||||
<div class="update_evidence">
|
||||
<img src="images/report_uploading_img.png" alt="">
|
||||
<input class="update-img" type="file" accept="image/*">
|
||||
<div class="reupdate">重新上传
|
||||
<input class="reupdate-img" type="file" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="update_evidence">
|
||||
<img src="images/report_uploading_img.png" alt="">
|
||||
<input class="update-img" type="file" accept="image/*">
|
||||
<div class="reupdate">重新上传
|
||||
<input class="reupdate-img" type="file" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="update_evidence">
|
||||
<img src="images/report_uploading_img.png" alt="">
|
||||
<input class="update-img" type="file" accept="image/*">
|
||||
<div class="reupdate">重新上传
|
||||
<input class="reupdate-img" type="file" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 0.3rem;text-align: center;">需要至少上传一张相关截图，以提高举报的准确度</p>
|
||||
<div class="but">提交</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>
|
||||
129
view/yinmeng/modules/report/js/index.js
Normal file
129
view/yinmeng/modules/report/js/index.js
Normal file
@@ -0,0 +1,129 @@
|
||||
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();
|
||||
})
|
||||
// 上传图片
|
||||
function upload (than, type) {
|
||||
showLoading();
|
||||
var val = than.get(0).files[0];
|
||||
var formData = new FormData();
|
||||
formData.append('uid', pubInfo.uid);
|
||||
formData.append('file', val);
|
||||
networkRequest({
|
||||
type: 'post',
|
||||
url: urlPrefix + '/live/upload',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
data: formData,
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
if (type == 1) {
|
||||
than.siblings('img').attr('src', res.data);
|
||||
than.parent().addClass('has-data')
|
||||
than.hide();
|
||||
}
|
||||
else {
|
||||
than.parent().siblings('img').attr('src', res.data);
|
||||
than.parent().parent().addClass('has-data');
|
||||
}
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 上传按钮
|
||||
$('.update_evidence').on('change', '.update-img', function () {
|
||||
var _that = $(this);
|
||||
upload(_that, 1);
|
||||
})
|
||||
// 重新上传按钮
|
||||
$('.update_evidence').on('change', '.reupdate-img', function () {
|
||||
var _that = $(this);
|
||||
upload(_that, 2);
|
||||
})
|
||||
// 提交按钮
|
||||
$('.but').click(function () {
|
||||
var reason = $('.form .textarea').val();
|
||||
var targetUid = $('.form .textarea2').val();
|
||||
var imgStr = '';
|
||||
for (var i = 0; i < $('.update_evidence').length; i++) {
|
||||
if ($('.update_evidence').eq(i).find('img').attr('src').match('images/report_uploading_img.png')) {
|
||||
continue;
|
||||
}
|
||||
if (i < $('.update_evidence').length) {
|
||||
imgStr += ',' + $('.update_evidence').eq(i).find('img').attr('src');
|
||||
}
|
||||
}
|
||||
if (imgStr.indexOf(',') == 0) {
|
||||
imgStr = imgStr.substr(1, imgStr.length);
|
||||
}
|
||||
if (reason == '') {
|
||||
toastMsg('请简单描述您遇到的问题');
|
||||
} else if (targetUid == '') {
|
||||
toastMsg('请填写被举报人ID');
|
||||
} else if (imgStr == '') {
|
||||
toastMsg('需要至少上传一张相关截图');
|
||||
} else {
|
||||
impeachSomeone(reason, targetUid, imgStr);
|
||||
}
|
||||
})
|
||||
// 提交举报接口
|
||||
function impeachSomeone (reason, targetUid, imgStr) {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: 'post',
|
||||
url: urlPrefix + '/impeach/impeachSomeone',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
reason: reason,
|
||||
imgUrl: imgStr,
|
||||
targetErBanNo: targetUid
|
||||
},
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
toastMsg('提交成功')
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user