完成组合榜单暂存

This commit is contained in:
Dragon
2023-12-21 12:01:09 +08:00
parent 3ceba9d53a
commit ae2fceb71d
24 changed files with 1391 additions and 0 deletions

View File

@@ -0,0 +1,592 @@
html,
body {
width: 100%;
background: linear-gradient(180deg, #32140C 0%, #05040A 100%);
}
.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;
}
.layui-m-layershade {
background-color: rgba(0, 0, 0, 0.4) !important;
}
.header {
width: 10rem;
height: 14.57333rem;
margin: 0 auto 0;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.header .rule_icon {
width: 2.6rem;
height: 2.52rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 8.65333rem;
}
.header .tab {
width: 3.28rem;
height: 1.53333rem;
line-height: 1.6rem;
text-align: center;
color: #FFFFFF;
font-size: 0.32rem;
font-weight: 400;
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
position: absolute;
}
.header .tab1 {
top: 9.66667rem;
left: 0.34667rem;
}
.header .tab2 {
top: 9.66667rem;
right: 0.37333rem;
}
.header .tab3 {
top: 11.18667rem;
left: 0rem;
}
.header .tab4 {
top: 11.18667rem;
left: 3.34667rem;
}
.header .tab5 {
top: 11.18667rem;
right: 0.04rem;
}
.header .act {
background: url(../images/tabAct.png) no-repeat;
background-size: 100% 100%;
color: #664324;
}
.page1 .box {
width: 9.21333rem;
height: 21.94667rem;
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
margin: -1.6rem auto 2rem;
position: relative;
}
.page1 .box .no1 {
width: 6.06667rem;
height: 4.04rem;
background: url(../images/NOBg1.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0.97333rem;
left: 50%;
transform: translateX(-50%);
}
.page1 .box .no1 .NOIcon {
width: 1.77333rem;
height: 0.88rem;
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
}
.page1 .box .no1 .lts {
width: 1.66667rem;
height: 1.66667rem;
position: absolute;
left: 0.96rem;
z-index: 2;
top: 1.04rem;
}
.page1 .box .no1 .rts {
width: 1.66667rem;
height: 1.66667rem;
position: absolute;
right: 0.90667rem;
z-index: 2;
top: 1.04rem;
}
.page1 .box .no1 .leftTx {
width: 1.30667rem;
height: 1.30667rem;
border-radius: 50%;
position: absolute;
left: 1.13333rem;
top: 1.17333rem;
}
.page1 .box .no1 .rightTx {
width: 1.30667rem;
height: 1.30667rem;
border-radius: 50%;
position: absolute;
right: 1.09333rem;
top: 1.17333rem;
}
.page1 .box .no1 .leftName {
width: 1.66667rem;
text-align: center;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 1rem;
top: 2.82667rem;
}
.page1 .box .no1 .right {
width: 1.66667rem;
text-align: center;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
right: 1rem;
top: 2.82667rem;
}
.page1 .box .no1 .score {
width: 100%;
text-align: center;
color: #FFF3B3;
font-size: 0.29333rem;
position: absolute;
top: 3.84rem;
left: 0;
font-weight: 400;
}
.page1 .box .no2 {
width: 4.29333rem;
height: 2.64rem;
background: url(../images/NOBg2.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 6rem;
left: 0.18667rem;
}
.page1 .box .no2 .NOIcon {
width: 1.77333rem;
height: 0.88rem;
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
}
.page1 .box .no2 .ts {
width: 3.72rem;
height: 1.24rem;
position: absolute;
z-index: 2;
left: 50%;
transform: translateX(-50%);
top: 0.8rem;
}
.page1 .box .no2 .leftTx {
width: 1.12rem;
height: 1.12rem;
border-radius: 50%;
position: absolute;
left: 1.04rem;
top: 0.86667rem;
}
.page1 .box .no2 .rightTx {
width: 1.12rem;
height: 1.12rem;
border-radius: 50%;
position: absolute;
right: 1.01333rem;
top: 0.86667rem;
}
.page1 .box .no2 .leftName {
width: 1.22667rem;
text-align: center;
color: #fff;
font-size: 0.24rem;
font-weight: 400;
position: absolute;
top: 2.10667rem;
left: 0.98667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page1 .box .no2 .right {
width: 1.22667rem;
text-align: center;
color: #fff;
font-size: 0.24rem;
font-weight: 400;
position: absolute;
top: 2.10667rem;
right: 0.94667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page1 .box .no2 .score {
width: 100%;
text-align: center;
color: #FFF3B3;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 2.8rem;
}
.page1 .box .no3 {
width: 4.29333rem;
height: 2.64rem;
background: url(../images/NOBg3.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 6rem;
right: 0.18667rem;
}
.page1 .box .no3 .NOIcon {
width: 1.77333rem;
height: 0.88rem;
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
}
.page1 .box .no3 .ts {
width: 3.72rem;
height: 1.24rem;
position: absolute;
z-index: 2;
left: 50%;
transform: translateX(-50%);
top: 0.8rem;
}
.page1 .box .no3 .leftTx {
width: 1.12rem;
height: 1.12rem;
border-radius: 50%;
position: absolute;
left: 1.04rem;
top: 0.86667rem;
}
.page1 .box .no3 .rightTx {
width: 1.12rem;
height: 1.12rem;
border-radius: 50%;
position: absolute;
right: 1.01333rem;
top: 0.86667rem;
}
.page1 .box .no3 .leftName {
width: 1.22667rem;
text-align: center;
color: #fff;
font-size: 0.24rem;
font-weight: 400;
position: absolute;
top: 2.10667rem;
left: 0.98667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page1 .box .no3 .right {
width: 1.22667rem;
text-align: center;
color: #fff;
font-size: 0.24rem;
font-weight: 400;
position: absolute;
top: 2.10667rem;
right: 0.94667rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.page1 .box .no3 .score {
width: 100%;
text-align: center;
color: #FFF3B3;
font-size: 0.29333rem;
font-weight: 400;
position: absolute;
left: 0;
top: 2.8rem;
}
.page1 .box ul {
width: 8.54667rem;
height: 11.5rem;
overflow-y: scroll;
position: absolute;
top: 10.17333rem;
left: 50%;
transform: translateX(-50%);
}
.page1 .box ul li {
width: 100%;
height: 1.76rem;
background: url(../images/page1LiBg.png) no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 0 0.64rem 0 0.4rem;
margin-bottom: 0.10667rem;
}
.page1 .box ul li .num {
width: 0.46667rem;
text-align: center;
float: left;
height: 100%;
line-height: 1.76rem;
color: #fff;
font-size: 0.42667rem;
font-weight: 400;
}
.page1 .box ul li .ts {
position: absolute;
left: 1.6rem;
top: 0.18667rem;
width: 2.08rem;
height: 1.09333rem;
z-index: 2;
}
.page1 .box ul li .ltx {
width: 0.98667rem;
height: 0.98667rem;
position: absolute;
left: 1.64667rem;
top: 0.25333rem;
border-radius: 50%;
}
.page1 .box ul li .rtx {
width: 0.98667rem;
height: 0.98667rem;
position: absolute;
left: 2.64667rem;
top: 0.25333rem;
border-radius: 50%;
}
.page1 .box ul li .lName {
width: 0.97333rem;
text-align: center;
color: #FFFFFF;
font-size: 0.2rem;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 1.62667rem;
top: 1.33333rem;
}
.page1 .box ul li .rName {
width: 0.97333rem;
text-align: center;
color: #FFFFFF;
font-size: 0.2rem;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 2.61333rem;
top: 1.33333rem;
}
.page1 .box ul li .score {
float: right;
height: 100%;
line-height: 1.76rem;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
}
.page1 .my {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 2.26667rem;
background: url(../images/page1myBg.png) no-repeat bottom;
background-size: 100% 2rem;
box-sizing: border-box;
padding-top: 0.6rem;
z-index: 3;
transition: all .3s;
}
.page1 .my .pageMyicon {
width: 0.92rem;
height: 0.62667rem;
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(0deg);
top: 0%;
}
.page1 .my .myBox {
width: 100%;
box-sizing: border-box;
height: 1.76rem;
position: relative;
padding: 0 1.33333rem 0 0rem;
overflow-y: hidden;
margin: 0 auto 0.13333rem;
}
.page1 .my .myBox .myBox_in {
width: 100%;
height: 1.76rem;
position: relative;
}
.page1 .my .myBox .myBox_in .num {
width: 0.46667rem;
height: 1.73333rem;
text-align: center;
float: left;
height: 100%;
line-height: 1.76rem;
color: #fff;
font-size: 0.42667rem;
font-weight: 400;
}
.page1 .my .myBox .myBox_in .ts {
position: absolute;
left: 1.6rem;
top: 0.18667rem;
width: 2.08rem;
height: 1.09333rem;
z-index: 2;
}
.page1 .my .myBox .myBox_in .ltx {
width: 0.98667rem;
height: 0.98667rem;
position: absolute;
left: 1.64667rem;
top: 0.25333rem;
border-radius: 50%;
}
.page1 .my .myBox .myBox_in .rtx {
width: 0.98667rem;
height: 0.98667rem;
position: absolute;
left: 2.64667rem;
top: 0.25333rem;
border-radius: 50%;
}
.page1 .my .myBox .myBox_in .lName {
width: 0.97333rem;
text-align: center;
color: #FFFFFF;
font-size: 0.2rem;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 1.62667rem;
top: 1.33333rem;
}
.page1 .my .myBox .myBox_in .rName {
width: 0.97333rem;
text-align: center;
color: #FFFFFF;
font-size: 0.2rem;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 2.61333rem;
top: 1.33333rem;
}
.page1 .my .myBox .myBox_in .score {
float: right;
height: 100%;
line-height: 1.76rem;
color: #FFFFFF;
font-size: 0.29333rem;
font-weight: 400;
}
.page1 .act {
background: url(../images/page1myBg2.png) no-repeat bottom;
background-size: 100% 10.4rem;
}
::-webkit-scrollbar {
display: none;
}

View File

@@ -0,0 +1,599 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
background: linear-gradient(180deg, #32140C 0%, #05040A 100%);
// background: #1E0D0B;
}
.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);
}
}
.layui-m-layershade {
background-color: rgba(0, 0, 0, .4) !important;
}
.header {
width: px2rem(750);
height: px2rem(1093);
margin: 0 auto 0;
background: url(../images/header.png) no-repeat;
background-size: 100% 100%;
position: relative;
.rule_icon {
width: px2rem(195);
height: px2rem(189);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(649);
}
.tab {
width: px2rem(246);
height: px2rem(115);
line-height: px2rem(120);
text-align: center;
color: #FFFFFF;
font-size: px2rem(24);
font-weight: 400;
background: url(../images/tab.png) no-repeat;
background-size: 100% 100%;
position: absolute;
}
.tab1 {
top: px2rem(725);
left: px2rem(26);
}
.tab2 {
top: px2rem(725);
right: px2rem(28);
}
.tab3 {
top: px2rem(839);
left: px2rem(0);
}
.tab4 {
top: px2rem(839);
left: px2rem(251);
}
.tab5 {
top: px2rem(839);
right: px2rem(3);
}
.act {
background: url(../images/tabAct.png) no-repeat;
background-size: 100% 100%;
color: #664324;
}
}
.page1 {
.box {
width: px2rem(691);
height: px2rem(1646);
background: url(../images/page1Bg.png) no-repeat;
background-size: 100% 100%;
margin: -1.6rem auto px2rem(150);
position: relative;
.no1 {
width: px2rem(455);
height: px2rem(303);
background: url(../images/NOBg1.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(73);
left: 50%;
transform: translateX(-50%);
.NOIcon {
width: px2rem(133);
height: px2rem(66);
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
}
.lts {
width: px2rem(125);
height: px2rem(125);
position: absolute;
left: px2rem(72);
z-index: 2;
top: px2rem(78);
}
.rts {
width: px2rem(125);
height: px2rem(125);
position: absolute;
right: px2rem(68);
z-index: 2;
top: px2rem(78);
}
.leftTx {
width: px2rem(98);
height: px2rem(98);
border-radius: 50%;
position: absolute;
left: px2rem(85);
top: px2rem(88);
}
.rightTx {
width: px2rem(98);
height: px2rem(98);
border-radius: 50%;
position: absolute;
right: px2rem(82);
top: px2rem(88);
}
.leftName {
width: px2rem(125);
text-align: center;
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: px2rem(75);
top: px2rem(212);
}
.right {
width: px2rem(125);
text-align: center;
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
right: px2rem(75);
top: px2rem(212);
}
.score {
width: 100%;
text-align: center;
color: #FFF3B3;
font-size: px2rem(22);
position: absolute;
top: px2rem(288);
left: 0;
font-weight: 400;
}
}
.no2 {
width: px2rem(322);
height: px2rem(198);
background: url(../images/NOBg2.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(450);
left: px2rem(14);
.NOIcon {
width: px2rem(133);
height: px2rem(66);
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
}
.ts {
width: px2rem(279);
height: px2rem(93);
position: absolute;
z-index: 2;
left: 50%;
transform: translateX(-50%);
top: px2rem(60);
}
.leftTx {
width: px2rem(84);
height: px2rem(84);
border-radius: 50%;
position: absolute;
left: px2rem(78);
top: px2rem(65);
}
.rightTx {
width: px2rem(84);
height: px2rem(84);
border-radius: 50%;
position: absolute;
right: px2rem(76);
top: px2rem(65);
}
.leftName {
width: px2rem(92);
text-align: center;
color: #fff;
font-size: px2rem(18);
font-weight: 400;
position: absolute;
top: px2rem(158);
left: px2rem(74);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.right {
width: px2rem(92);
text-align: center;
color: #fff;
font-size: px2rem(18);
font-weight: 400;
position: absolute;
top: px2rem(158);
right: px2rem(71);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #FFF3B3;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: px2rem(210);
}
}
.no3 {
width: px2rem(322);
height: px2rem(198);
background: url(../images/NOBg3.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: px2rem(450);
right: px2rem(14);
.NOIcon {
width: px2rem(133);
height: px2rem(66);
position: absolute;
top: -0.7rem;
left: 50%;
transform: translateX(-50%);
}
.ts {
width: px2rem(279);
height: px2rem(93);
position: absolute;
z-index: 2;
left: 50%;
transform: translateX(-50%);
top: px2rem(60);
}
.leftTx {
width: px2rem(84);
height: px2rem(84);
border-radius: 50%;
position: absolute;
left: px2rem(78);
top: px2rem(65);
}
.rightTx {
width: px2rem(84);
height: px2rem(84);
border-radius: 50%;
position: absolute;
right: px2rem(76);
top: px2rem(65);
}
.leftName {
width: px2rem(92);
text-align: center;
color: #fff;
font-size: px2rem(18);
font-weight: 400;
position: absolute;
top: px2rem(158);
left: px2rem(74);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.right {
width: px2rem(92);
text-align: center;
color: #fff;
font-size: px2rem(18);
font-weight: 400;
position: absolute;
top: px2rem(158);
right: px2rem(71);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
width: 100%;
text-align: center;
color: #FFF3B3;
font-size: px2rem(22);
font-weight: 400;
position: absolute;
left: 0;
top: px2rem(210);
}
}
ul {
width: px2rem(641);
height: 11.5rem;
overflow-y: scroll;
position: absolute;
top: px2rem(763);
left: 50%;
transform: translateX(-50%);
li {
width: 100%;
height: px2rem(132);
background: url(../images/page1LiBg.png) no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 0 px2rem(48) 0 px2rem(30);
margin-bottom: px2rem(8);
.num {
width: px2rem(35);
text-align: center;
float: left;
height: 100%;
line-height: px2rem(132);
color: #fff;
font-size: px2rem(32);
font-weight: 400;
}
.ts {
position: absolute;
left: px2rem(120);
top: px2rem(14);
width: px2rem(156);
height: px2rem(82);
z-index: 2;
}
.ltx {
width: px2rem(74);
height: px2rem(74);
position: absolute;
left: px2rem(123.5);
top: px2rem(19);
border-radius: 50%;
}
.rtx {
width: px2rem(74);
height: px2rem(74);
position: absolute;
left: px2rem(198.5);
top: px2rem(19);
border-radius: 50%;
}
.lName {
width: px2rem(73);
text-align: center;
color: #FFFFFF;
font-size: px2rem(15);
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: px2rem(122);
top: px2rem(100);
}
.rName {
width: px2rem(73);
text-align: center;
color: #FFFFFF;
font-size: px2rem(15);
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: px2rem(196);
top: px2rem(100);
}
.score {
float: right;
height: 100%;
line-height: px2rem(132);
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
}
}
}
}
.my {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: px2rem(170);
background: url(../images/page1myBg.png) no-repeat bottom;
background-size: 100% px2rem(150);
box-sizing: border-box;
padding-top: 0.6rem;
z-index: 3;
transition: all .3s;
.pageMyicon {
width: px2rem(69);
height: px2rem(47);
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(0deg);
top: 0%;
}
.myBox {
width: 100%;
box-sizing: border-box;
height: 1.76rem;
position: relative;
padding: 0 px2rem(100) 0 px2rem(0);
overflow-y: hidden;
margin: 0 auto px2rem(10);
.myBox_in {
width: 100%;
height: 1.76rem;
position: relative;
.num {
width: px2rem(35);
height: px2rem(130);
text-align: center;
float: left;
height: 100%;
line-height: px2rem(132);
color: #fff;
font-size: px2rem(32);
font-weight: 400;
}
.ts {
position: absolute;
left: px2rem(120);
top: px2rem(14);
width: px2rem(156);
height: px2rem(82);
z-index: 2;
}
.ltx {
width: px2rem(74);
height: px2rem(74);
position: absolute;
left: px2rem(123.5);
top: px2rem(19);
border-radius: 50%;
}
.rtx {
width: px2rem(74);
height: px2rem(74);
position: absolute;
left: px2rem(198.5);
top: px2rem(19);
border-radius: 50%;
}
.lName {
width: px2rem(73);
text-align: center;
color: #FFFFFF;
font-size: px2rem(15);
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: px2rem(122);
top: px2rem(100);
}
.rName {
width: px2rem(73);
text-align: center;
color: #FFFFFF;
font-size: px2rem(15);
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: px2rem(196);
top: px2rem(100);
}
.score {
float: right;
height: 100%;
line-height: px2rem(132);
color: #FFFFFF;
font-size: px2rem(22);
font-weight: 400;
}
}
}
}
.act {
background: url(../images/page1myBg2.png) no-repeat bottom;
background-size: 100% 10.4rem;
}
}
::-webkit-scrollbar {
display: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1023 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 641 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>年度盛典</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 顶部返回 -->
<div class="back">
<img src="./images/travel/back.png" alt="">
</div>
<!-- 主视觉 -->
<div class="header">
<!-- 活动规则 -->
<img src="./images/rule_icon.png" alt="" class="rule_icon">
<!-- tab切换 -->
<div class="act tab tab1">年度挚友</div>
<div class="tab tab2">礼物代言人</div>
<div class="tab tab3">人气主播</div>
<div class="tab tab4">名厅之战</div>
<div class="tab tab5">年度神豪</div>
</div>
<!-- 页面1 -->
<div class="page1">
<div class="box">
<!-- 前三 -->
<div class="no1">
<img src="./images/NO1.png" alt="" class="NOIcon">
<img src="./images/NOts1.png" alt="" class="lts">
<img src="./images/NOts1.png" alt="" class="rts">
<img src="./images/logo.png" alt="" class="leftTx">
<img src="./images/logo.png" alt="" class="rightTx">
<div class="leftName">用户昵称</div>
<div class="right">用户昵称</div>
<div class="score">xxxx友谊值</div>
</div>
<div class="no2">
<img src="./images/NO2.png" alt="" class="NOIcon">
<img src="./images/NOts23.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftTx">
<img src="./images/logo.png" alt="" class="rightTx">
<div class="leftName">用户昵称</div>
<div class="right">用户昵称</div>
<div class="score">xxxx友谊值</div>
</div>
<div class="no3">
<img src="./images/NO3.png" alt="" class="NOIcon">
<img src="./images/NOts23.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="leftTx">
<img src="./images/logo.png" alt="" class="rightTx">
<div class="leftName">用户昵称</div>
<div class="right">用户昵称</div>
<div class="score">xxxx友谊值</div>
</div>
<!-- 非前三 -->
<ul>
<li>
<div class="num">04</div>
<img src="./images/page1notTop3ts.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="ltx">
<img src="./images/logo.png" alt="" class="rtx">
<div class="lName">用户昵称</div>
<div class="rName">用户昵称</div>
<div class="score">xxxx友谊值</div>
</li>
</ul>
</div>
<div class="my">
<img src="./images/pageMyicon.png" alt="" class="pageMyicon">
<div class="myBox">
<div class="myBox_in">
<img src="./images/page1notTop3ts.png" alt="" class="ts">
<img src="./images/logo.png" alt="" class="ltx">
<img src="./images/logo.png" alt="" class="rtx">
<div class="lName">用户昵称</div>
<div class="rName">用户昵称</div>
<div class="score">xxxx友谊值</div>
</div>
</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>

View File

@@ -0,0 +1,103 @@
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 roomUid;//随机获取房间uid
// 初始化函数
$(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)
}
})
// getRoomUid();
}, 100)
})
// 获取房间uid
function getRoomUid () {
showLoading()
networkRequest({
type: 'GEt',
url: urlPrefix + '/home/tab/home/one',
success (res) {
if (res.code === 200) {
roomUid = res.data;
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('网络错误,请退出重进')
}
})
}
// 上拉更多组合
var pageMyiconBool = true;
$('.page1 .my .pageMyicon').click(function () {
if (pageMyiconBool) {
$('.page1 .my .pageMyicon').css({
'transform': 'translateX(-50%) rotate(180deg)',
})
$('.page1 .my').addClass('act')
$('.page1 .my').css({
'height': '10.4rem',
})
$('.page1 .my .myBox').css({
'height': '9.8rem',
'overflow-y': 'scroll',
})
} else {
$('.page1 .my .pageMyicon').css({
'transform': 'translateX(-50%) rotate(0deg)',
})
$('.page1 .my').removeClass('act')
$('.page1 .my').css({
'height': '2.26667rem',
})
$('.page1 .my .myBox').css({
'height': '1.76rem',
'overflow-y': 'hidden',
})
}
$('.page1 .my .myBox').scrollTop(0)
pageMyiconBool = !pageMyiconBool;
})