完成组合榜单暂存
592
view/yinmeng/activity/2023-year/css/index.css
Normal 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;
|
||||
}
|
599
view/yinmeng/activity/2023-year/css/index.scss
Normal 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;
|
||||
}
|
BIN
view/yinmeng/activity/2023-year/images/NO1.png
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
view/yinmeng/activity/2023-year/images/NO2.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
view/yinmeng/activity/2023-year/images/NO3.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
view/yinmeng/activity/2023-year/images/NOBg1.png
Normal file
After Width: | Height: | Size: 155 KiB |
BIN
view/yinmeng/activity/2023-year/images/NOBg2.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
view/yinmeng/activity/2023-year/images/NOBg3.png
Normal file
After Width: | Height: | Size: 75 KiB |
BIN
view/yinmeng/activity/2023-year/images/NOts1.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
view/yinmeng/activity/2023-year/images/NOts23.png
Normal file
After Width: | Height: | Size: 25 KiB |
BIN
view/yinmeng/activity/2023-year/images/header.png
Normal file
After Width: | Height: | Size: 1023 KiB |
BIN
view/yinmeng/activity/2023-year/images/logo.png
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
view/yinmeng/activity/2023-year/images/page1Bg.png
Normal file
After Width: | Height: | Size: 641 KiB |
BIN
view/yinmeng/activity/2023-year/images/page1LiBg.png
Normal file
After Width: | Height: | Size: 47 KiB |
BIN
view/yinmeng/activity/2023-year/images/page1myBg.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
view/yinmeng/activity/2023-year/images/page1myBg2.png
Normal file
After Width: | Height: | Size: 313 KiB |
BIN
view/yinmeng/activity/2023-year/images/page1notTop3ts.png
Normal file
After Width: | Height: | Size: 8.9 KiB |
BIN
view/yinmeng/activity/2023-year/images/pageMyicon.png
Normal file
After Width: | Height: | Size: 3.0 KiB |
BIN
view/yinmeng/activity/2023-year/images/rule_icon.png
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
view/yinmeng/activity/2023-year/images/tab.png
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
view/yinmeng/activity/2023-year/images/tabAct.png
Normal file
After Width: | Height: | Size: 45 KiB |
BIN
view/yinmeng/activity/2023-year/images/travel/back.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
97
view/yinmeng/activity/2023-year/index.html
Normal 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>
|
103
view/yinmeng/activity/2023-year/js/index.js
Normal 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;
|
||||
})
|