diff --git a/view/peko/activity/2024-aprilFoolsDay/css/index.css b/view/peko/activity/2024-aprilFoolsDay/css/index.css index b99bb2a..6340d7d 100644 --- a/view/peko/activity/2024-aprilFoolsDay/css/index.css +++ b/view/peko/activity/2024-aprilFoolsDay/css/index.css @@ -55,7 +55,7 @@ body { right: 0; } -.tab { +.tabs { width: 9.33333rem; height: 1.14667rem; margin: 0 auto 0.32rem; @@ -64,47 +64,47 @@ body { justify-content: space-between; } -.tab div { +.tabs div { width: 2.24rem; height: 1.14667rem; } -.tab .tab1 { +.tabs .tab1 { background: url(../images/tab1.png) no-repeat; background-size: 100% 100%; } -.tab .tab2 { +.tabs .tab2 { background: url(../images/tab2.png) no-repeat; background-size: 100% 100%; } -.tab .tab3 { +.tabs .tab3 { background: url(../images/tab3.png) no-repeat; background-size: 100% 100%; } -.tab .tab4 { +.tabs .tab4 { background: url(../images/tab4.png) no-repeat; background-size: 100% 100%; } -.tab .act1 { +.tabs .act1 { background: url(../images/tabAct1.png) no-repeat; background-size: 100% 100%; } -.tab .act2 { +.tabs .act2 { background: url(../images/tabAct2.png) no-repeat; background-size: 100% 100%; } -.tab .act3 { +.tabs .act3 { background: url(../images/tabAct3.png) no-repeat; background-size: 100% 100%; } -.tab .act4 { +.tabs .act4 { background: url(../images/tabAct4.png) no-repeat; background-size: 100% 100%; } @@ -207,4 +207,1172 @@ body { background: url(../images/page1Box2.png) no-repeat; background-size: 100% 100%; margin: 0 auto 1.84rem; + overflow: hidden; +} + +.page1 .box2 .top3 { + position: relative; + width: 8.89333rem; + height: 3.14667rem; + margin: 3.62667rem auto -0.06667rem; + background: url(../images/page1Box2TopBg.png) no-repeat; + background-size: 100% 100%; +} + +.page1 .box2 .top3 .no1 { + width: 2.12rem; + height: 2.32rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -1.4rem; +} + +.page1 .box2 .top3 .no1 .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; +} + +.page1 .box2 .top3 .no1 .tx { + width: 1.89333rem; + height: 1.89333rem; + border-radius: 50%; + border: 0.02667rem solid #FFCD45; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; +} + +.page1 .box2 .top3 .no1 .nick { + width: 100%; + color: #fff; + font-size: 0.4rem; + font-weight: 500; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.6rem; +} + +.page1 .box2 .top3 .no1 .score { + width: 100%; + color: #fff; + font-size: 0.32rem; + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.2rem; +} + +.page1 .box2 .top3 .no2 { + width: 1.88rem; + height: 2.05333rem; + position: absolute; + left: 0.44rem; + top: -0.6rem; +} + +.page1 .box2 .top3 .no2 .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; +} + +.page1 .box2 .top3 .no2 .tx { + width: 1.62667rem; + height: 1.62667rem; + border-radius: 50%; + border: 0.02667rem solid #6284FA; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; +} + +.page1 .box2 .top3 .no2 .nick { + width: 100%; + color: #fff; + font-size: 0.4rem; + font-weight: 500; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; +} + +.page1 .box2 .top3 .no2 .score { + width: 100%; + color: #fff; + font-size: 0.32rem; + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; +} + +.page1 .box2 .top3 .no3 { + width: 1.88rem; + height: 2.05333rem; + position: absolute; + right: 0.44rem; + top: -0.6rem; +} + +.page1 .box2 .top3 .no3 .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; +} + +.page1 .box2 .top3 .no3 .tx { + width: 1.62667rem; + height: 1.62667rem; + border-radius: 50%; + border: 0.02667rem solid #FF4748; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; +} + +.page1 .box2 .top3 .no3 .nick { + width: 100%; + color: #fff; + font-size: 0.4rem; + font-weight: 500; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; +} + +.page1 .box2 .top3 .no3 .score { + width: 100%; + color: #fff; + font-size: 0.32rem; + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; +} + +.page1 .box2 ul { + width: 8.82667rem; + overflow-y: scroll; + height: 6.3rem; + margin: 0 auto; +} + +.page1 .box2 ul::-webkit-scrollbar { + display: none; +} + +.page1 .box2 ul li { + width: 100%; + height: 1.65333rem; + background: url(../images/page1LiBg.png) no-repeat; + background-size: 100% 100%; + margin-bottom: 0.10667rem; + box-sizing: border-box; + padding: 0 0.37333rem; +} + +.page1 .box2 ul li .num { + width: 0.6rem; + text-align: center; + color: #fff; + font-size: 0.53333rem; + font-weight: 500; + margin-right: 0.32rem; + float: left; + height: 100%; + line-height: 1.65333rem; +} + +.page1 .box2 ul li .tx { + width: 1.30667rem; + height: 1.30667rem; + border-radius: 50%; + display: block; + float: left; + margin-top: 0.17333rem; + margin-right: 0.30667rem; + border: 0.02667rem solid #FED353; +} + +.page1 .box2 ul li .nick { + width: 3.12rem; + height: 100%; + line-height: 1.65333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: 0.37333rem; + font-weight: 400; + float: left; +} + +.page1 .box2 ul li .score { + float: right; + height: 100%; + line-height: 1.65333rem; + color: #fff; + font-size: 0.29333rem; + font-weight: 400; +} + +.page1 .my { + width: 10rem; + height: 1.77333rem; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 0; + background: url(../images/page1Box2My.png) no-repeat; + background-size: 100% 100%; + padding: 0 1.01333rem 0 0.4rem; + z-index: 3; + box-sizing: border-box; +} + +.page1 .my .num { + width: 1.4rem; + text-align: center; + color: #fff; + font-size: 0.42667rem; + font-weight: 500; + margin-right: 0.32rem; + float: left; + height: 100%; + line-height: 1.77333rem; +} + +.page1 .my .tx { + width: 1.30667rem; + height: 1.30667rem; + border-radius: 50%; + display: block; + float: left; + margin-top: 0.22667rem; + margin-right: 0.30667rem; + border: 0.02667rem solid #FED353; +} + +.page1 .my .nick { + width: 3.12rem; + height: 100%; + line-height: 1.77333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: 0.37333rem; + font-weight: 400; + float: left; +} + +.page1 .my .score { + float: right; + height: 100%; + line-height: 1.77333rem; + color: #fff; + font-size: 0.29333rem; + font-weight: 400; +} + +.page2 { + display: none; + width: 9.36rem; + height: 19.94667rem; + margin: 0 auto 0rem; + background: url(../images/pag2bg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; +} + +.page2 .tab { + width: 6.96rem; + height: 0.90667rem; + line-height: 0.90667rem; + display: flex; + justify-content: space-between; + background: #fff; + border-radius: 0.90667rem; + margin: 0.49333rem auto 0.8rem; +} + +.page2 .tab div { + width: 50%; + height: 0.90667rem; + text-align: center; + color: #64042E; + font-size: 0.37333rem; + font-weight: 500; + overflow: hidden; +} + +.page2 .tab .act1 { + background: url(../images/page2TabAct1.png) no-repeat; + background-size: 100% 100%; + text-indent: 4rem; +} + +.page2 .tab .act2 { + background: url(../images/page2TabAct2.png) no-repeat; + background-size: 100% 100%; + text-indent: 4rem; +} + +.page2 .topRoom { + width: 8.4rem; + height: 2.13333rem; + margin: 0rem auto 0.2rem; + background: url(../images/page2RoomTop.png) no-repeat; + background-size: 100% 100%; + position: relative; +} + +.page2 .topRoom .tx { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 0.28rem; + top: 0.26667rem; +} + +.page2 .topRoom .roomName { + width: 6rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #000000; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + top: 0.68rem; + left: 2.09333rem; +} + +.page2 .topRoom .score { + color: #333333; + font-size: 0.26667rem; + font-weight: 400; + position: absolute; + left: 2.09333rem; + top: 1.21333rem; +} + +.page2 .topRoom .score b { + color: #63063E; + font-weight: 500; +} + +.page2 .topLine { + width: 8.28rem; + height: 0.4rem; + line-height: 0.4rem; + border-radius: 0.4rem; + background: #FF994E; + border: 0.05333rem solid #FED353; + position: relative; + margin: 0 auto 0.72rem; + overflow: hidden; +} + +.page2 .topLine div { + width: 10%; + height: 100%; + background: linear-gradient(90deg, #DB4A00 0%, #FB712A 100%); +} + +.page2 .topLine span { + width: 100%; + height: 100%; + text-align: center; + color: #fff; + font-size: 0.21333rem; + line-height: 0.4rem; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.page2 .text { + width: 100%; + text-align: center; + color: #FFFFFF; + font-size: 0.24rem; + margin: 0 auto 0.16rem; +} + +.page2 .page2ToRoomBut { + width: 3.68rem; + height: 1.50667rem; + display: block; + margin: 0 auto 0.73333rem; +} + +.page2 .page2NotTopTitle { + width: 8.42667rem; + height: 1.04rem; + line-height: 1.04rem; + text-align: center; + color: #fff; + font-size: 0.37333rem; + font-weight: 500; + margin: 0 auto 0.85333rem; + background: url(../images/page2NotTopTitle.png) no-repeat; + background-size: 100% 100%; +} + +.page2 ul { + width: 8.4rem; + height: 9.6rem; + overflow-y: scroll; + margin: 0 auto 0; +} + +.page2 ul::-webkit-scrollbar { + display: none; +} + +.page2 ul li { + width: 8.4rem; + height: 2.13333rem; + margin: 0rem auto 0.2rem; + background: url(../images/page2RoomTop.png) no-repeat; + background-size: 100% 100%; + margin-bottom: 0.26667rem; + position: relative; +} + +.page2 ul li .tx { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 0.28rem; + top: 0.26667rem; +} + +.page2 ul li .roomName { + width: 6rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #000000; + font-size: 0.32rem; + font-weight: 500; + position: absolute; + top: 0.4rem; + left: 2.09333rem; +} + +.page2 ul li .score { + color: #333333; + font-size: 0.26667rem; + font-weight: 400; + position: absolute; + left: 2.09333rem; + top: 0.92rem; +} + +.page2 ul li .score b { + color: #63063E; + font-weight: 500; +} + +.page2 ul li .line_in { + width: 4.18667rem; + height: 0.34667rem; + line-height: 0.34667rem; + border-radius: 0.34667rem; + background: #FF994E; + border: 0.05333rem solid #FED353; + overflow: hidden; + position: absolute; + left: 1.96rem; + top: 1.38667rem; +} + +.page2 ul li .line_in div { + width: 10%; + height: 100%; + background: linear-gradient(90deg, #DB4A00 0%, #FB712A 100%); +} + +.page2 ul li .line_in span { + width: 100%; + height: 100%; + text-align: center; + color: #fff; + font-size: 0.21333rem; + line-height: 0.4rem; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.page2 ul li .live { + width: 0.96rem; + height: 0.32rem; + line-height: 0.32rem; + text-align: center; + color: #fff; + background: linear-gradient(0deg, #DC4D04 0%, #F1A356 100%); + border-radius: 0.32rem; + position: absolute; + left: 0.58667rem; + bottom: 0.22667rem; + font-size: 0.18667rem; + font-weight: 400; + z-index: 2; +} + +.page2 ul li .notGo, +.page2 ul li .go { + width: 1.52rem; + height: 0.72rem; + position: absolute; + right: 0.18667rem; + top: 0.70667rem; +} + +.page3 { + display: none; + width: 10rem; + height: 37.81333rem; + margin: 0 auto 0.26667rem; + background: url(../images/page3.png) no-repeat; + background-size: 100% 100%; +} + +.page4 { + display: none; + width: 9.2rem; + height: 24.74667rem; + margin: 0 auto 1.76rem; + position: relative; +} + +.page4 .page4_tab { + width: 7.68rem; + height: 1.09333rem; + margin: 0 auto 0rem; + display: flex; + justify-content: space-between; +} + +.page4 .page4_tab div { + width: 50%; +} + +.page4 .dayTab { + width: 2.64rem; + height: 0.66667rem; + margin: 0.5rem auto 0.37333rem; + display: flex; + justify-content: space-between; +} + +.page4 .dayTab div { + width: 1.2rem; + height: 0.66667rem; + line-height: 0.66667rem; + color: #fff; + font-size: 0.32rem; + text-align: center; + font-weight: 400; + background: url(../images/day.png) no-repeat; + background-size: 100% 100%; +} + +.page4 .dayTab .act { + color: #FED353; + background: url(../images/dayAct.png) no-repeat; + background-size: 100% 100%; +} + +.page4 .timeTab { + width: 100%; + height: 0.58667rem; + display: flex; + justify-content: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.53333rem; +} + +.page4 .timeTab div { + width: 1.06667rem; + height: 0.58667rem; + line-height: 0.73333rem; + background: url(../images/timeTab.png) no-repeat; + background-size: 100% 100%; + text-align: center; + color: #fff; + font-size: 0.24rem; + font-weight: 400; + margin-right: -0.13333rem; +} + +.page4 .timeTab .act { + line-height: 0.58667rem; + background: url(../images/timeTabAct.png) no-repeat; + background-size: 100% 100%; + color: #FED353; +} + +.page4 .top3 { + position: relative; + width: 8.89333rem; + height: 3.14667rem; + margin: 3.02667rem auto -0.06667rem; + background: url(../images/page1Box2TopBg.png) no-repeat; + background-size: 100% 100%; +} + +.page4 .top3 .no1 { + width: 2.12rem; + height: 2.32rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -1.4rem; +} + +.page4 .top3 .no1 .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; +} + +.page4 .top3 .no1 .tx { + width: 1.89333rem; + height: 1.89333rem; + border-radius: 50%; + border: 0.02667rem solid #FFCD45; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; +} + +.page4 .top3 .no1 .nick { + width: 100%; + color: #fff; + font-size: 0.4rem; + font-weight: 500; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.6rem; +} + +.page4 .top3 .no1 .score { + width: 100%; + color: #fff; + font-size: 0.32rem; + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.2rem; +} + +.page4 .top3 .no2 { + width: 1.88rem; + height: 2.05333rem; + position: absolute; + left: 0.44rem; + top: -0.6rem; +} + +.page4 .top3 .no2 .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; +} + +.page4 .top3 .no2 .tx { + width: 1.62667rem; + height: 1.62667rem; + border-radius: 50%; + border: 0.02667rem solid #6284FA; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; +} + +.page4 .top3 .no2 .nick { + width: 100%; + color: #fff; + font-size: 0.4rem; + font-weight: 500; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; +} + +.page4 .top3 .no2 .score { + width: 100%; + color: #fff; + font-size: 0.32rem; + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; +} + +.page4 .top3 .no3 { + width: 1.88rem; + height: 2.05333rem; + position: absolute; + right: 0.44rem; + top: -0.6rem; +} + +.page4 .top3 .no3 .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; +} + +.page4 .top3 .no3 .tx { + width: 1.62667rem; + height: 1.62667rem; + border-radius: 50%; + border: 0.02667rem solid #FF4748; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; +} + +.page4 .top3 .no3 .nick { + width: 100%; + color: #fff; + font-size: 0.4rem; + font-weight: 500; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; +} + +.page4 .top3 .no3 .score { + width: 100%; + color: #fff; + font-size: 0.32rem; + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; +} + +.page4 ul { + width: 8.82667rem; + overflow-y: scroll; + height: 16.2rem; + margin: 0 auto; +} + +.page4 ul::-webkit-scrollbar { + display: none; +} + +.page4 ul li { + width: 100%; + height: 1.65333rem; + background: url(../images/page1LiBg.png) no-repeat; + background-size: 100% 100%; + margin-bottom: 0.10667rem; + box-sizing: border-box; + padding: 0 0.37333rem; +} + +.page4 ul li .num { + width: 0.6rem; + text-align: center; + color: #fff; + font-size: 0.53333rem; + font-weight: 500; + margin-right: 0.32rem; + float: left; + height: 100%; + line-height: 1.65333rem; +} + +.page4 ul li .tx { + width: 1.30667rem; + height: 1.30667rem; + border-radius: 50%; + display: block; + float: left; + margin-top: 0.17333rem; + margin-right: 0.30667rem; + border: 0.02667rem solid #FED353; +} + +.page4 ul li .nick { + width: 3.12rem; + height: 100%; + line-height: 1.65333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: 0.37333rem; + font-weight: 400; + float: left; +} + +.page4 ul li .score { + float: right; + height: 100%; + line-height: 1.65333rem; + color: #fff; + font-size: 0.29333rem; + font-weight: 400; +} + +.page4 .my { + width: 10rem; + height: 1.77333rem; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 0; + background: url(../images/page1Box2My.png) no-repeat; + background-size: 100% 100%; + padding: 0 1.01333rem 0 0.4rem; + z-index: 3; + box-sizing: border-box; +} + +.page4 .my .num { + width: 1.4rem; + text-align: center; + color: #fff; + font-size: 0.42667rem; + font-weight: 500; + margin-right: 0.32rem; + float: left; + height: 100%; + line-height: 1.77333rem; +} + +.page4 .my .tx { + width: 1.30667rem; + height: 1.30667rem; + border-radius: 50%; + display: block; + float: left; + margin-top: 0.22667rem; + margin-right: 0.30667rem; + border: 0.02667rem solid #FED353; +} + +.page4 .my .nick { + width: 3.12rem; + height: 100%; + line-height: 1.77333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: 0.37333rem; + font-weight: 400; + float: left; +} + +.page4 .my .score { + float: right; + height: 100%; + line-height: 1.77333rem; + color: #fff; + font-size: 0.29333rem; + font-weight: 400; +} + +.page41 { + background: url(../images/page4Bg1.png) no-repeat; + background-size: 100% 100%; +} + +.page42 { + background: url(../images/page4Bg2.png) no-repeat; + background-size: 100% 100%; +} + +.MagicBoxRule { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.6); + display: none; +} + +.MagicBoxRule .MagicBoxRule_in { + width: 8.93333rem; + height: 14.13333rem; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.MagicBoxRule .MagicBoxRule_in .tab { + width: 4.88rem; + height: 1.14667rem; + display: flex; + justify-content: space-between; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.45rem; +} + +.MagicBoxRule .MagicBoxRule_in .tab div { + width: 2.24rem; + height: 100%; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage1 { + width: 8.13333rem; + height: 10.93333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.16rem; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 { + display: none; + width: 8.13333rem; + height: 11.2rem; + background: url(../images/MagicBoxRule2Bg.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.18667rem; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul { + width: 7.13333rem; + height: 9rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.46667rem; + overflow-y: scroll; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul::-webkit-scrollbar { + display: none; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li { + width: 100%; + height: 0.53333rem; + margin-bottom: 0.41333rem; + display: flex; + justify-content: space-between; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li div { + width: 33.3333333%; + text-align: center; + color: #666666; + font-size: 0.24rem; + font-weight: 400; + height: 0.53333rem; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li div p { + margin-bottom: 0.06667rem; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li div b img { + width: 0.32rem; + height: 0.32rem; + display: inline-block; + vertical-align: middle; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li .centen { + line-height: 0.53333rem; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li .right p { + color: #BC294A; + margin-bottom: 0.04rem; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li .right b { + color: #BC294A; +} + +.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul .not { + width: 7.13333rem; + height: 90%; + line-height: 9rem; + text-align: center; + display: block; +} + +.MagicBoxRule .MagicBoxRule1 { + background: url(../images/MagicBoxRule1.png) no-repeat; + background-size: 100% 100%; +} + +.MagicBoxRule .MagicBoxRule2 { + background: url(../images/MagicBoxRule2.png) no-repeat; + background-size: 100% 100%; +} + +.rule { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.6); + display: none; +} + +.rule .rule_in { + width: 8.93333rem; + height: 14.13333rem; + background: url(../images/rule.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; +} + +.rule .rule_in .box { + width: 8.18667rem; + height: 11.6rem; + margin: 2.17333rem auto 0; + overflow-y: scroll; +} + +.rule .rule_in .box::-webkit-scrollbar { + display: none; +} + +.rule .rule_in .box img { + width: 100%; + height: 96.46667rem; + display: block; +} + +.limitedGift { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.6); + display: none; +} + +.limitedGift .limitedGift_in { + width: 9.09333rem; + height: 14.28rem; + background: url(../images/limitedGift.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; +} + +.limitedGift .limitedGift_in .box { + width: 7.6rem; + height: 11.6rem; + margin: 2.28rem auto 0; + overflow-y: scroll; +} + +.limitedGift .limitedGift_in .box::-webkit-scrollbar { + display: none; +} + +.limitedGift .limitedGift_in .box img { + width: 100%; + height: 15.32rem; + display: block; } diff --git a/view/peko/activity/2024-aprilFoolsDay/css/index.scss b/view/peko/activity/2024-aprilFoolsDay/css/index.scss index a232665..2ae31a0 100644 --- a/view/peko/activity/2024-aprilFoolsDay/css/index.scss +++ b/view/peko/activity/2024-aprilFoolsDay/css/index.scss @@ -60,7 +60,7 @@ body { } } -.tab { +.tabs { width: px2rem(700); height: px2rem(86); margin: 0 auto px2rem(24); @@ -115,6 +115,8 @@ body { } .page1 { + // display: none; + .box1 { width: px2rem(690); height: px2rem(834); @@ -207,11 +209,1205 @@ body { } } } - .box2{ + + .box2 { width: px2rem(690); height: px2rem(994); background: url(../images/page1Box2.png) no-repeat; background-size: 100% 100%; margin: 0 auto px2rem(138); + overflow: hidden; + + .top3 { + position: relative; + width: px2rem(667); + height: px2rem(236); + margin: px2rem(272) auto px2rem(-5); + background: url(../images/page1Box2TopBg.png) no-repeat; + background-size: 100% 100%; + + .no1 { + width: px2rem(159); + height: px2rem(174); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -1.4rem; + + .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + } + + .tx { + width: px2rem(142); + height: px2rem(142); + border-radius: 50%; + border: px2rem(2) solid #FFCD45; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; + } + + .nick { + width: 100%; + color: #fff; + font-size: px2rem(30); + font-weight: 500; + text-align: center; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.6rem; + } + + .score { + width: 100%; + color: #fff; + font-size: px2rem(24); + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.2rem; + } + } + + .no2 { + width: px2rem(141); + height: px2rem(154); + position: absolute; + left: px2rem(33); + top: -0.6rem; + + .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + } + + .tx { + width: px2rem(122); + height: px2rem(122); + border-radius: 50%; + border: px2rem(2) solid #6284FA; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; + } + + .nick { + width: 100%; + color: #fff; + font-size: px2rem(30); + font-weight: 500; + text-align: center; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; + } + + .score { + width: 100%; + color: #fff; + font-size: px2rem(24); + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; + } + } + + .no3 { + width: px2rem(141); + height: px2rem(154); + position: absolute; + right: px2rem(33); + top: -0.6rem; + + .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + } + + .tx { + width: px2rem(122); + height: px2rem(122); + border-radius: 50%; + border: px2rem(2) solid #FF4748; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; + } + + .nick { + width: 100%; + color: #fff; + font-size: px2rem(30); + font-weight: 500; + text-align: center; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; + } + + .score { + width: 100%; + color: #fff; + font-size: px2rem(24); + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; + } + } + } + + ul { + width: px2rem(662); + overflow-y: scroll; + height: 6.3rem; + margin: 0 auto; + + &::-webkit-scrollbar { + display: none; + } + + li { + width: 100%; + height: px2rem(124); + background: url(../images/page1LiBg.png) no-repeat; + background-size: 100% 100%; + margin-bottom: px2rem(8); + box-sizing: border-box; + padding: 0 px2rem(28); + + .num { + width: 0.6rem; + text-align: center; + color: #fff; + font-size: px2rem(40); + font-weight: 500; + margin-right: px2rem(24); + float: left; + height: 100%; + line-height: px2rem(124); + } + + .tx { + width: px2rem(98); + height: px2rem(98); + border-radius: 50%; + display: block; + float: left; + margin-top: px2rem(13); + margin-right: px2rem(23); + border: px2rem(2) solid #FED353; + } + + .nick { + width: px2rem(234); + height: 100%; + line-height: px2rem(124); + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: px2rem(28); + font-weight: 400; + float: left; + } + + .score { + float: right; + height: 100%; + line-height: px2rem(124); + color: #fff; + font-size: px2rem(22); + font-weight: 400; + + } + } + + } + } + + .my { + width: px2rem(750); + height: px2rem(133); + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 0; + background: url(../images/page1Box2My.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(76) 0 px2rem(30); + z-index: 3; + box-sizing: border-box; + + .num { + width: 1.4rem; + text-align: center; + color: #fff; + font-size: px2rem(32); + font-weight: 500; + margin-right: px2rem(24); + float: left; + height: 100%; + line-height: px2rem(133); + } + + .tx { + width: px2rem(98); + height: px2rem(98); + border-radius: 50%; + display: block; + float: left; + margin-top: px2rem(17); + margin-right: px2rem(23); + border: px2rem(2) solid #FED353; + } + + .nick { + width: px2rem(234); + height: 100%; + line-height: px2rem(133); + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: px2rem(28); + font-weight: 400; + float: left; + } + + .score { + float: right; + height: 100%; + line-height: px2rem(133); + color: #fff; + font-size: px2rem(22); + font-weight: 400; + + } + } +} + +.page2 { + display: none; + width: px2rem(702); + height: px2rem(1496); + margin: 0 auto px2rem(0); + background: url(../images/pag2bg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + + .tab { + width: px2rem(522); + height: px2rem(68); + line-height: px2rem(68); + display: flex; + justify-content: space-between; + background: #fff; + border-radius: px2rem(68); + margin: px2rem(37) auto px2rem(60); + + div { + width: 50%; + height: px2rem(68); + text-align: center; + color: #64042E; + font-size: px2rem(28); + font-weight: 500; + overflow: hidden; + } + + .act1 { + background: url(../images/page2TabAct1.png) no-repeat; + background-size: 100% 100%; + text-indent: 4rem; + } + + .act2 { + background: url(../images/page2TabAct2.png) no-repeat; + background-size: 100% 100%; + text-indent: 4rem; + } + } + + .topRoom { + width: px2rem(630); + height: px2rem(160); + margin: px2rem(0) auto px2rem(15); + background: url(../images/page2RoomTop.png) no-repeat; + background-size: 100% 100%; + position: relative; + + .tx { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: px2rem(21); + top: px2rem(20); + } + + .roomName { + width: 6rem; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #000000; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + top: px2rem(51); + left: px2rem(157); + } + + .score { + color: #333333; + font-size: px2rem(20); + font-weight: 400; + position: absolute; + left: px2rem(157); + top: px2rem(91); + + b { + color: #63063E; + font-weight: 500; + } + } + } + + .topLine { + width: px2rem(621); + height: px2rem(30); + line-height: px2rem(30); + border-radius: px2rem(30); + background: #FF994E; + border: px2rem(4) solid #FED353; + position: relative; + margin: 0 auto px2rem(54); + overflow: hidden; + + div { + width: 10%; + height: 100%; + background: linear-gradient(90deg, #DB4A00 0%, #FB712A 100%); + } + + span { + width: 100%; + height: 100%; + text-align: center; + color: #fff; + font-size: px2rem(16); + line-height: px2rem(30); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + + .text { + width: 100%; + text-align: center; + color: #FFFFFF; + font-size: px2rem(18); + margin: 0 auto px2rem(12); + } + + .page2ToRoomBut { + width: px2rem(276); + height: px2rem(113); + display: block; + margin: 0 auto px2rem(55); + } + + .page2NotTopTitle { + width: px2rem(632); + height: px2rem(78); + line-height: px2rem(78); + text-align: center; + color: #fff; + font-size: px2rem(28); + font-weight: 500; + margin: 0 auto px2rem(64); + background: url(../images/page2NotTopTitle.png) no-repeat; + background-size: 100% 100%; + } + + ul { + width: px2rem(630); + height: 9.6rem; + overflow-y: scroll; + margin: 0 auto 0; + + &::-webkit-scrollbar { + display: none; + } + + li { + + width: px2rem(630); + height: px2rem(160); + margin: px2rem(0) auto px2rem(15); + background: url(../images/page2RoomTop.png) no-repeat; + background-size: 100% 100%; + margin-bottom: px2rem(20); + position: relative; + + .tx { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: px2rem(21); + top: px2rem(20); + } + + .roomName { + width: 6rem; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #000000; + font-size: px2rem(24); + font-weight: 500; + position: absolute; + top: px2rem(30); + left: px2rem(157); + } + + .score { + color: #333333; + font-size: px2rem(20); + font-weight: 400; + position: absolute; + left: px2rem(157); + top: px2rem(69); + + b { + color: #63063E; + font-weight: 500; + } + } + + .line_in { + width: px2rem(314); + height: px2rem(26); + line-height: px2rem(26); + border-radius: px2rem(26); + background: #FF994E; + border: px2rem(4) solid #FED353; + overflow: hidden; + position: absolute; + left: px2rem(147); + top: px2rem(104); + + div { + width: 10%; + height: 100%; + background: linear-gradient(90deg, #DB4A00 0%, #FB712A 100%); + } + + span { + width: 100%; + height: 100%; + text-align: center; + color: #fff; + font-size: px2rem(16); + line-height: px2rem(30); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + + .live { + width: px2rem(72); + height: px2rem(24); + line-height: px2rem(24); + text-align: center; + color: #fff; + background: linear-gradient(0deg, #DC4D04 0%, #F1A356 100%); + border-radius: px2rem(24); + position: absolute; + left: px2rem(44); + bottom: px2rem(17); + font-size: px2rem(14); + font-weight: 400; + z-index: 2; + } + + .notGo, + .go { + width: px2rem(114); + height: px2rem(54); + position: absolute; + right: px2rem(14); + top: px2rem(53); + } + } + } +} + +.page3 { + display: none; + width: px2rem(750); + height: px2rem(2836); + margin: 0 auto px2rem(20); + background: url(../images/page3.png) no-repeat; + background-size: 100% 100%; +} + +.page4 { + display: none; + width: px2rem(690); + height: px2rem(1856); + margin: 0 auto px2rem(132); + position: relative; + + .page4_tab { + width: px2rem(576); + height: px2rem(82); + margin: 0 auto px2rem(0); + display: flex; + justify-content: space-between; + + div { + width: 50%; + } + } + + .dayTab { + width: px2rem(198); + height: px2rem(50); + margin: 0.5rem auto px2rem(28); + display: flex; + justify-content: space-between; + + div { + width: px2rem(90); + height: px2rem(50); + line-height: px2rem(50); + color: #fff; + font-size: px2rem(24); + text-align: center; + font-weight: 400; + background: url(../images/day.png) no-repeat; + background-size: 100% 100%; + } + + .act { + color: #FED353; + background: url(../images/dayAct.png) no-repeat; + background-size: 100% 100%; + } + } + + .timeTab { + width: 100%; + height: px2rem(44); + display: flex; + justify-content: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(190); + + div { + width: px2rem(80); + height: px2rem(44); + line-height: px2rem(55); + background: url(../images/timeTab.png) no-repeat; + background-size: 100% 100%; + text-align: center; + color: #fff; + font-size: px2rem(18); + font-weight: 400; + margin-right: px2rem(-10); + } + + .act { + line-height: px2rem(44); + background: url(../images/timeTabAct.png) no-repeat; + background-size: 100% 100%; + color: #FED353; + } + } + + .top3 { + position: relative; + width: px2rem(667); + height: px2rem(236); + margin: px2rem(227) auto px2rem(-5); + background: url(../images/page1Box2TopBg.png) no-repeat; + background-size: 100% 100%; + + .no1 { + width: px2rem(159); + height: px2rem(174); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -1.4rem; + + .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + } + + .tx { + width: px2rem(142); + height: px2rem(142); + border-radius: 50%; + border: px2rem(2) solid #FFCD45; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; + } + + .nick { + width: 100%; + color: #fff; + font-size: px2rem(30); + font-weight: 500; + text-align: center; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.6rem; + } + + .score { + width: 100%; + color: #fff; + font-size: px2rem(24); + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.2rem; + } + } + + .no2 { + width: px2rem(141); + height: px2rem(154); + position: absolute; + left: px2rem(33); + top: -0.6rem; + + .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + } + + .tx { + width: px2rem(122); + height: px2rem(122); + border-radius: 50%; + border: px2rem(2) solid #6284FA; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; + } + + .nick { + width: 100%; + color: #fff; + font-size: px2rem(30); + font-weight: 500; + text-align: center; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; + } + + .score { + width: 100%; + color: #fff; + font-size: px2rem(24); + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; + } + } + + .no3 { + width: px2rem(141); + height: px2rem(154); + position: absolute; + right: px2rem(33); + top: -0.6rem; + + .ts { + position: absolute; + width: 100%; + height: 100%; + z-index: 2; + left: 0; + top: 0; + } + + .tx { + width: px2rem(122); + height: px2rem(122); + border-radius: 50%; + border: px2rem(2) solid #FF4748; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0; + } + + .nick { + width: 100%; + color: #fff; + font-size: px2rem(30); + font-weight: 500; + text-align: center; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.1rem; + } + + .score { + width: 100%; + color: #fff; + font-size: px2rem(24); + font-weight: 400; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.7rem; + } + } + } + + ul { + width: px2rem(662); + overflow-y: scroll; + height: 16.2rem; + margin: 0 auto; + + &::-webkit-scrollbar { + display: none; + } + + li { + width: 100%; + height: px2rem(124); + background: url(../images/page1LiBg.png) no-repeat; + background-size: 100% 100%; + margin-bottom: px2rem(8); + box-sizing: border-box; + padding: 0 px2rem(28); + + .num { + width: 0.6rem; + text-align: center; + color: #fff; + font-size: px2rem(40); + font-weight: 500; + margin-right: px2rem(24); + float: left; + height: 100%; + line-height: px2rem(124); + } + + .tx { + width: px2rem(98); + height: px2rem(98); + border-radius: 50%; + display: block; + float: left; + margin-top: px2rem(13); + margin-right: px2rem(23); + border: px2rem(2) solid #FED353; + } + + .nick { + width: px2rem(234); + height: 100%; + line-height: px2rem(124); + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: px2rem(28); + font-weight: 400; + float: left; + } + + .score { + float: right; + height: 100%; + line-height: px2rem(124); + color: #fff; + font-size: px2rem(22); + font-weight: 400; + + } + } + + } + + .my { + width: px2rem(750); + height: px2rem(133); + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 0; + background: url(../images/page1Box2My.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(76) 0 px2rem(30); + z-index: 3; + box-sizing: border-box; + + .num { + width: 1.4rem; + text-align: center; + color: #fff; + font-size: px2rem(32); + font-weight: 500; + margin-right: px2rem(24); + float: left; + height: 100%; + line-height: px2rem(133); + } + + .tx { + width: px2rem(98); + height: px2rem(98); + border-radius: 50%; + display: block; + float: left; + margin-top: px2rem(17); + margin-right: px2rem(23); + border: px2rem(2) solid #FED353; + } + + .nick { + width: px2rem(234); + height: 100%; + line-height: px2rem(133); + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; + font-size: px2rem(28); + font-weight: 400; + float: left; + } + + .score { + float: right; + height: 100%; + line-height: px2rem(133); + color: #fff; + font-size: px2rem(22); + font-weight: 400; + + } + } + +} + +.page41 { + background: url(../images/page4Bg1.png) no-repeat; + background-size: 100% 100%; +} + +.page42 { + background: url(../images/page4Bg2.png) no-repeat; + background-size: 100% 100%; +} + +.MagicBoxRule { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.6); + display: none; + + .MagicBoxRule_in { + width: px2rem(670); + height: px2rem(1060); + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .tab { + width: px2rem(366); + height: px2rem(86); + display: flex; + justify-content: space-between; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.45rem; + + div { + width: px2rem(168); + height: 100%; + } + } + + .MagicBoxRulePage1 { + // display: none; + width: px2rem(610); + height: px2rem(820); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(162); + } + + .MagicBoxRulePage2 { + display: none; + width: px2rem(610); + height: px2rem(840); + background: url(../images/MagicBoxRule2Bg.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(164); + + ul { + width: px2rem(535); + height: 9rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(110); + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + + li { + width: 100%; + height: px2rem(40); + margin-bottom: px2rem(31); + display: flex; + justify-content: space-between; + + div { + width: 33.3333333%; + text-align: center; + color: #666666; + font-size: px2rem(18); + font-weight: 400; + height: px2rem(40); + + p { + margin-bottom: px2rem(5); + } + + b { + img { + width: px2rem(24); + height: px2rem(24); + display: inline-block; + vertical-align: middle; + } + } + } + + .centen { + line-height: px2rem(40); + } + + .right { + p { + color: #BC294A; + margin-bottom: px2rem(3); + } + + b { + color: #BC294A; + } + } + } + + .not { + width: px2rem(535); + height: 90%; + line-height: 9rem; + text-align: center; + display: block; + } + } + } + } + + .MagicBoxRule1 { + background: url(../images/MagicBoxRule1.png) no-repeat; + background-size: 100% 100%; + } + + .MagicBoxRule2 { + background: url(../images/MagicBoxRule2.png) no-repeat; + background-size: 100% 100%; + } +} + +.rule { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.6); + display: none; + + .rule_in { + width: px2rem(670); + height: px2rem(1060); + background: url(../images/rule.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + + .box { + width: px2rem(614); + height: 11.6rem; + margin: px2rem(163) auto 0; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + + img { + width: 100%; + height: px2rem(7235); + display: block; + } + } + } +} + +.limitedGift { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 99; + background: rgba(0, 0, 0, 0.6); + display: none; + + .limitedGift_in { + width: px2rem(682); + height: px2rem(1071); + background: url(../images/limitedGift.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + + .box { + width: px2rem(570); + height: 11.6rem; + margin: px2rem(171) auto 0; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + + img { + width: 100%; + height: px2rem(1149); + display: block; + } + } } } \ No newline at end of file diff --git a/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule1.png b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule1.png new file mode 100644 index 0000000..2f33806 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule1Bg.png b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule1Bg.png new file mode 100644 index 0000000..c2e421a Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule1Bg.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule2.png b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule2.png new file mode 100644 index 0000000..3ee06a3 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule2Bg.png b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule2Bg.png new file mode 100644 index 0000000..ef8734a Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/MagicBoxRule2Bg.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/day.png b/view/peko/activity/2024-aprilFoolsDay/images/day.png new file mode 100644 index 0000000..82de54e Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/day.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/dayAct.png b/view/peko/activity/2024-aprilFoolsDay/images/dayAct.png new file mode 100644 index 0000000..115eaeb Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/dayAct.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/diamond.png b/view/peko/activity/2024-aprilFoolsDay/images/diamond.png new file mode 100644 index 0000000..359f46a Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/diamond.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/go.png b/view/peko/activity/2024-aprilFoolsDay/images/go.png new file mode 100644 index 0000000..4336e83 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/go.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/header.png b/view/peko/activity/2024-aprilFoolsDay/images/header.png index 9aa7510..cd52932 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/header.png and b/view/peko/activity/2024-aprilFoolsDay/images/header.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/limitedGift.png b/view/peko/activity/2024-aprilFoolsDay/images/limitedGift.png new file mode 100644 index 0000000..610ad9e Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/limitedGift.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/limitedGift_in.png b/view/peko/activity/2024-aprilFoolsDay/images/limitedGift_in.png new file mode 100644 index 0000000..0000146 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/limitedGift_in.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/notGo.png b/view/peko/activity/2024-aprilFoolsDay/images/notGo.png new file mode 100644 index 0000000..ea6d0fc Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/notGo.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pag2bg.png b/view/peko/activity/2024-aprilFoolsDay/images/pag2bg.png new file mode 100644 index 0000000..2738809 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/pag2bg.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1Box1timeBg.png b/view/peko/activity/2024-aprilFoolsDay/images/page1Box1timeBg.png index 224e477..0a11eee 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1Box1timeBg.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1Box1timeBg.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1Box2.png b/view/peko/activity/2024-aprilFoolsDay/images/page1Box2.png index a981340..9ea49d5 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1Box2.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1Box2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1Box2My.png b/view/peko/activity/2024-aprilFoolsDay/images/page1Box2My.png index 654fab5..466e5e2 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1Box2My.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1Box2My.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1Box2TopBg.png b/view/peko/activity/2024-aprilFoolsDay/images/page1Box2TopBg.png index 5870ba5..149496f 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1Box2TopBg.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1Box2TopBg.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1LiBg.png b/view/peko/activity/2024-aprilFoolsDay/images/page1LiBg.png index 4bccde8..62a0516 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1LiBg.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1LiBg.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1Top1.png b/view/peko/activity/2024-aprilFoolsDay/images/page1Top1.png index 568bcb8..45adcc4 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1Top1.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1Top1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1Top2.png b/view/peko/activity/2024-aprilFoolsDay/images/page1Top2.png index a343c16..c8a3858 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1Top2.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1Top2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page1Top3.png b/view/peko/activity/2024-aprilFoolsDay/images/page1Top3.png index c9f8418..9f985e6 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/page1Top3.png and b/view/peko/activity/2024-aprilFoolsDay/images/page1Top3.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page2NotTopTitle.png b/view/peko/activity/2024-aprilFoolsDay/images/page2NotTopTitle.png new file mode 100644 index 0000000..5072909 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page2NotTopTitle.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page2RoomTop.png b/view/peko/activity/2024-aprilFoolsDay/images/page2RoomTop.png new file mode 100644 index 0000000..06f138d Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page2RoomTop.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page2TabAct1.png b/view/peko/activity/2024-aprilFoolsDay/images/page2TabAct1.png new file mode 100644 index 0000000..e3dee6f Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page2TabAct1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page2TabAct2.png b/view/peko/activity/2024-aprilFoolsDay/images/page2TabAct2.png new file mode 100644 index 0000000..5829615 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page2TabAct2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page2ToRoomBut.png b/view/peko/activity/2024-aprilFoolsDay/images/page2ToRoomBut.png new file mode 100644 index 0000000..d09eb5d Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page2ToRoomBut.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page3.png b/view/peko/activity/2024-aprilFoolsDay/images/page3.png new file mode 100644 index 0000000..50099b7 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page3.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page4Bg1.png b/view/peko/activity/2024-aprilFoolsDay/images/page4Bg1.png new file mode 100644 index 0000000..f30e1e0 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page4Bg1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/page4Bg2.png b/view/peko/activity/2024-aprilFoolsDay/images/page4Bg2.png new file mode 100644 index 0000000..63ff0e5 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/page4Bg2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1.png index b31aab4..90883af 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift1.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift1.png index 3bcf223..2996f7b 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift1.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift2.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift2.png index d14f376..c6db588 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift2.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift3.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift3.png index 5737c0a..50300cd 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift3.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift3.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift4.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift4.png index 07c92fe..1ed818c 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift4.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift4.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift5.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift5.png index 860cd2e..92480d1 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift5.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Gift5.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Rule_icon.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Rule_icon.png index 4375b92..5473cc2 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Rule_icon.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1Rule_icon.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qp.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qp.png index 4811838..4a8f772 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qp.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qp.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qpAct.png b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qpAct.png index 8918d64..bbc7787 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qpAct.png and b/view/peko/activity/2024-aprilFoolsDay/images/pageBox1qpAct.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/qualifyGift_icon.png b/view/peko/activity/2024-aprilFoolsDay/images/qualifyGift_icon.png index c15e330..e4842d2 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/qualifyGift_icon.png and b/view/peko/activity/2024-aprilFoolsDay/images/qualifyGift_icon.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/rule.png b/view/peko/activity/2024-aprilFoolsDay/images/rule.png new file mode 100644 index 0000000..6d95169 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/rule.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/rule_icon.png b/view/peko/activity/2024-aprilFoolsDay/images/rule_icon.png index 6c5222e..ad47922 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/rule_icon.png and b/view/peko/activity/2024-aprilFoolsDay/images/rule_icon.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/rule_in.png b/view/peko/activity/2024-aprilFoolsDay/images/rule_in.png new file mode 100644 index 0000000..817add9 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/rule_in.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tab1.png b/view/peko/activity/2024-aprilFoolsDay/images/tab1.png new file mode 100644 index 0000000..286d12f Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/tab1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tab2.png b/view/peko/activity/2024-aprilFoolsDay/images/tab2.png index fb9e449..6eae6cf 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/tab2.png and b/view/peko/activity/2024-aprilFoolsDay/images/tab2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tab3.png b/view/peko/activity/2024-aprilFoolsDay/images/tab3.png index c265f31..dcc276b 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/tab3.png and b/view/peko/activity/2024-aprilFoolsDay/images/tab3.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tab4.png b/view/peko/activity/2024-aprilFoolsDay/images/tab4.png index ba323d0..b93388a 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/tab4.png and b/view/peko/activity/2024-aprilFoolsDay/images/tab4.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tabAct1.png b/view/peko/activity/2024-aprilFoolsDay/images/tabAct1.png index 2d9d00a..8c7552a 100644 Binary files a/view/peko/activity/2024-aprilFoolsDay/images/tabAct1.png and b/view/peko/activity/2024-aprilFoolsDay/images/tabAct1.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tabAct2.png b/view/peko/activity/2024-aprilFoolsDay/images/tabAct2.png new file mode 100644 index 0000000..edb2b9e Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/tabAct2.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tabAct3.png b/view/peko/activity/2024-aprilFoolsDay/images/tabAct3.png new file mode 100644 index 0000000..94dd6d5 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/tabAct3.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/tabAct4.png b/view/peko/activity/2024-aprilFoolsDay/images/tabAct4.png new file mode 100644 index 0000000..46bc42e Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/tabAct4.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/timeTab.png b/view/peko/activity/2024-aprilFoolsDay/images/timeTab.png new file mode 100644 index 0000000..610af2a Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/timeTab.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/images/timeTabAct.png b/view/peko/activity/2024-aprilFoolsDay/images/timeTabAct.png new file mode 100644 index 0000000..54f8034 Binary files /dev/null and b/view/peko/activity/2024-aprilFoolsDay/images/timeTabAct.png differ diff --git a/view/peko/activity/2024-aprilFoolsDay/index.html b/view/peko/activity/2024-aprilFoolsDay/index.html index 2244fe4..47b526d 100644 --- a/view/peko/activity/2024-aprilFoolsDay/index.html +++ b/view/peko/activity/2024-aprilFoolsDay/index.html @@ -14,6 +14,7 @@
+
@@ -21,19 +22,21 @@
+ -
+
+
-
3分钟倒计时: 00 分 00 秒
+
3分钟倒计时: 00 分 00 秒
用戶在送出第一個奇幻魔盒後開啓3分鐘倒計時，
在此期間內點亮所有禮物，可獲得【愚人慶典】禮物*1
@@ -59,7 +62,196 @@
-
+
+ +
+
+ + +
用户昵称
+
奇幻值:0
+
+
+ + +
用户昵称
+
奇幻值:0
+
+
+ + +
用户昵称
+
奇幻值:0
+
+
+ +
    +
  • +
    1.
    + +
    用户昵称
    +
    奇幻值: 20
    +
    • +
+
+ +
+
1.
+ +
用户昵称
+
奇幻值: 20
+
+
+ + +
+ +
+
牌照房间
+
个播房间
+
+ +
+ +
房间昵称
+
房间进度值: 00.0%
+
+ +
+
+ 0/0 +
+ +
房間進度值達到100%，即可開啓紅包雨
+ + +
其他房间推荐
+ +
    +
  • + +
    直播中
    +
    房间昵称
    +
    房间进度值: 00.0%
    +
    +
    + 0/0 +
    + + +
    • +
+
+ + +
+ + +
+ +
+
+
+
+ +
+
日榜
+
总榜
+
+ +
+
3.27
+
3.27
+
3.27
+
3.27
+
3.27
+
3.27
+
+ +
+
+ + +
用户昵称
+
奇幻值:0
+
+
+ + +
用户昵称
+
奇幻值:0
+
+
+ + +
用户昵称
+
奇幻值:0
+
+
+ +
    +
  • +
    1.
    + +
    用户昵称
    +
    奇幻值: 20
    +
    • +
+ + +
+
1.
+ +
用户昵称
+
奇幻值: 20
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
    +
  • +
    +

    2024/3/19

    + 14:07:07 +
    +
    用户昵称
    +
    +

    获得：礼物名称

    + 0 +
    +
    • +
+
+
+
+ + +
+
+
+ +
+
+
+ + +
+
+
+ +
+
diff --git a/view/peko/activity/2024-aprilFoolsDay/js/index.js b/view/peko/activity/2024-aprilFoolsDay/js/index.js index 30860f2..14f4342 100644 --- a/view/peko/activity/2024-aprilFoolsDay/js/index.js +++ b/view/peko/activity/2024-aprilFoolsDay/js/index.js @@ -26,7 +26,16 @@ const toastMsg = (content = '操作完成', time = 2) => { skin: 'msg' }) } - +var page = 1; +var isLock = true; +var timeOut = null; +var countupTime = 0; +var XIAO_CHOU_ROOM = 'XIAO_CHOU_ROOM_1 '; +var rankType = 1; //排行榜類型（1=送禮日榜，2=送禮總榜，3=收禮日榜，4=收禮總榜）; +var data = null;//默認日榜; +var type = 'a';//a:送禮b:收禮; +var type2 = 'a';//a:日榜b:總榜; +var curDate; //當天日期; // 初始化函數 $(function () { getInfoFromClient() @@ -47,18 +56,32 @@ $(function () { window.webkit.messageHandlers.closeWebView.postMessage(null) } }) + getTime(); + getRank(); }, 100) }) -// 獲取接口 -function get () { +// 獲取任务接口 +function getTaskUser () { showLoading() networkRequest({ type: 'get', - url: urlPrefix + '', + url: urlPrefix + '/activity/task/user', + data: { componentCode: "QI_HUAN_MO_HE" }, success (res) { if (res.code === 200) { - + // 渲染愚人盛典礼物 + $('.page1 .box1 .giftBoxs div').remove(); + var str = ''; + res.data[0].children.forEach((res, i) => { + str += ` +
+ + ${res.taskName} +
+ ` + }); + $('.page1 .box1 .giftBoxs').append(str); } else { toastMsg(res.message) } @@ -69,4 +92,456 @@ function get () { toastMsg('網路錯誤，請退出重進') } }) -} \ No newline at end of file +} + +// 獲取倒计时接口 +function getTime () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/act/2024AprilFoolsDay/getTime', + data: { activityCode: "ACT_2024_APRIL_FOOLS_DAY", taskCode: "QI_HUAN_GIFT" }, + success (res) { + if (res.code === 200) { + countupTime = res.data - res.timestamp; + countup(); + getTaskUser(); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤，請退出重進') + } + }) +} + +// 倒計時 +function countup () { + clearTimeout(timeOut) + //獲取當前時間 + var d = 0; + var h = 0; + var m = 0; + var s = 0; + //定義變量 d,h,m,s保存倒計時的時間 + var d, h, m, s; + if (countupTime >= 0) { + d = getzf(Math.floor(countupTime / 1000 / 60 / 60 / 24)); + h = getzf(Math.floor(countupTime / 1000 / 60 / 60 % 24)); + m = getzf(Math.floor(countupTime / 1000 / 60 % 60)); + s = getzf(Math.floor(countupTime / 1000 % 60)); + //將倒計時賦值到div中 + $('.page1 .box1 .time .sp1').text(m); + $('.page1 .box1 .time .sp2').text(s); + countupTime = countupTime - 1000; + //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 + } else { + getTime(); + return + } + timeOut = setTimeout(countup, 1000); +} +//補0操作 +function getzf (num) { + if (parseInt(num) < 10) { + num = '0' + num; + } + return num; +} + +// tab切换 +$('.tabs div').click(function () { + var i = $(this).index() + 1; + $('.tabs div').removeClass('act1').removeClass('act2').removeClass('act3').removeClass('act4'); + $(this).addClass(`act${i}`); + $('.page1,.page2,.page3,.page4').hide(); + $(`.page${i}`).show(); + if (i == 1) { + getRank(); + } else if (i == 2) { + getRooms(); + } else if (i == 4) { + giftGetRank(rankType, data); + } +}) + +// 獲取奇幻榜接口 +function getRank () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/act/2023Halloween/rank/getRank', + data: { rankType: 4 }, + 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) => { + $(`.page1 .box2 .top3 .no${i + 1} .tx`).attr('src', res.avatar); + $(`.page1 .box2 .top3 .no${i + 1} .nick`).text(res.nick); + $(`.page1 .box2 .top3 .no${i + 1} .score`).html('奇幻值
' + unitProcessing(res.score, 10000, 1, 'w')) + }) + // 非前三 + var str = ''; + $('.page1 .box2 ul li').remove(); + notTop3.forEach((res, i) => { + str += ` +
  • +
    ${res.ranking}.
    + +
    ${res.nick}
    +
    奇幻值: ${unitProcessing(res.score, 10000, 1, 'w')}
    +
    • + ` + }) + $('.page1 .box2 ul').append(str); + // 处理自己榜单 + $('.page1 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking); + $('.page1 .my .tx').attr('src', res.data.meRank.avatar); + $('.page1 .my .nick').text(res.data.meRank.nick); + $('.page1 .my .score').text('奇幻值' + unitProcessing(res.data.meRank.score, 10000, 1, 'w')); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤，請退出重進') + } + }) +} + +// 页面2切换 +$('.page2 .tab div').click(function () { + var i = $(this).index() + 1; + $('.page2 .tab div').removeClass('act1').removeClass('act2'); + $(this).addClass(`act${i}`); + XIAO_CHOU_ROOM = i == 1 ? 'XIAO_CHOU_ROOM_1' : 'XIAO_CHOU_ROOM_4'; + getRooms(); +}) + +// 獲取房间榜接口 +function getRooms () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/act/2024AprilFoolsDay/getRooms', + data: { activityCode: "XIAO_CHOU_ROOM_1 ", taskCode: XIAO_CHOU_ROOM }, + success (res) { + if (res.code === 200) { + var top = res.data.slice(0, 1); + if (top.length < 3) { + let arr = new Array(1 - top.length).fill({ + roomAvatar: './images/logo.png', + roomTitle: '虛位以待', + percentage: 0, + activityValue: 0, + conditionValue: 0, + }) + top.push(...arr) + } + console.log(top); + var notTop = res.data.slice(1); + // 第一房间 + $('.page2 .topRoom .tx').attr('src', top[0].roomAvatar); + $('.page2 .topRoom .roomName').text(top[0].roomTitle); + $('.page2 .topRoom .score b').text(top[0].percentage + '%'); + $('.page2 .topLine div').css('width', top[0].percentage); + $('.page2 .topLine span').text(`${top[0].activityValue}/${top[0].conditionValue}`); + $('.page2 .page2ToRoomBut').attr("uid", top[0].roomUid); + $('.page2 .page2ToRoomBut').attr("src", top[0].isUnderway ? './images/page2ToRoomBut.png' : './images/page2ToRoomBut2.png'); + $('.page2 .page2ToRoomBut').attr("isUnderway", top[0].isUnderway); + // 其他房间 + $('.page2 ul li').remove(); + var str = ''; + notTop.forEach(res => { + str += ` +
  • + +
    直播中
    +
    ${res.roomTitle}
    +
    房間進度值: ${res.percentage}%
    +
    +
    + ${res.activityValue}/${res.conditionValue} +
    + + +
    • + ` + }) + $('.page2 ul').append(str); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤，請退出重進') + } + }) +} +// 房间最前面的跳转按钮 +$('.page2 .page2ToRoomBut').click(function () { + var uid = $(this).attr('uid'); + var isUnderway = $(this).attr('isUnderway'); + if (isUnderway) { + if (browser.ios) { + window.webkit.messageHandlers.openRoom.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openRoom(uid); + } + } + } +}) +// 其他房间跳转房间按钮 +$('.page2 ul').on('click', ' li .go', 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); + } + } +}) + +// 页面4切换 +$('.page4 .page4_tab div').click(function () { + var i = $(this).index() + 1; + $('.page4').removeClass('page41').removeClass('page42'); + $('.page4').addClass(`page4${i}`); + if (i == 1) { + type = 'a'; + rankType = type2 == "a" ? 1 : 2; + } else { + type = 'b'; + rankType = type2 == "a" ? 3 : 4; + } + giftGetRank(rankType, data); +}) + +// 页面4 日榜/总榜切换 +$('.page4 .dayTab div').click(function () { + var i = $(this).index() + 1; + $(this).addClass('act').siblings().removeClass('act') + if (i == 1) { + type2 = 'a'; + rankType = type == "a" ? 1 : 3; + $('.page4 .timeTab').show(); + } else { + type2 = 'b'; + rankType = type == "a" ? 2 : 4; + $('.page4 .timeTab').hide(); + } + giftGetRank(rankType, data); +}) + +// 页面4 日期切换 +$('.page4 .timeTab div').click(function () { + var i = $(this).index() + 1; + var datas = $(this).attr('data'); + $(this).addClass('act').siblings().removeClass('act') + rankType = type == "a" ? 1 : 3;//排行榜類型（1=甜蜜日榜，2=甜蜜總榜，3=愛意日榜，4=愛意總榜） + data = datas; + giftGetRank(rankType, data); +}) + +// 獲取愚人榜单接口 +function giftGetRank (rankType, date) { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/act/special/gift/getRank', + data: { rankType, date, pageSize: 30 }, + success (res) { + if (res.code === 200) { + // 設置當天日期 + curDate = res.data.curDate; + // 處理日期 + if (res.data.dateList) { + res.data.dateList.forEach((res, i) => { + $('.page4 .timeTab div').eq(i).text(`${res[5]}${res[6]}.${res[8]}${res[9]}`); + $('.page4 .timeTab div').eq(i).attr('data', res); + if (res == curDate && date == null) { + $('.page4 .timeTab div').removeClass('act') + $('.page4 .timeTab div').eq(i).addClass('act'); + } + }) + } + // 處理前三 + 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) => { + $(`.page4 .top3 .no${i + 1} .tx`).attr('src', res.avatar); + $(`.page4 .top3 .no${i + 1} .nick`).text(res.nick); + $(`.page4 .top3 .no${i + 1} .score`).html(`${rankType == 1 || rankType == 2 ? '愚乐值' : '娱乐值'}
    ` + unitProcessing(res.score, 10000, 1, 'w')) + }) + // 非前三 + var str = ''; + $('.page4 ul li').remove(); + notTop3.forEach((res, i) => { + str += ` +
  • +
    ${res.ranking}.
    + +
    ${res.nick}
    +
    ${rankType == 1 || rankType == 2 ? '愚乐值' : '娱乐值'}: ${unitProcessing(res.score, 10000, 1, 'w')}
    +
    • + ` + }) + $('.page4 ul').append(str); + // 处理自己榜单 + $('.page4 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking); + $('.page4 .my .tx').attr('src', res.data.meRank.avatar); + $('.page4 .my .nick').text(res.data.meRank.nick); + $('.page4 .my .score').text(`${rankType == 1 || rankType == 2 ? '愚乐值' : '娱乐值'}` + unitProcessing(res.data.meRank.score, 10000, 1, 'w')); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤，請退出重進') + } + }) +} + +// 魔盒切换 +$('.MagicBoxRule .MagicBoxRule_in .tab div').click(function () { + var i = $(this).index() + 1; + $('.MagicBoxRule .MagicBoxRule_in').removeClass('MagicBoxRule1').removeClass('MagicBoxRule2'); + $('.MagicBoxRule .MagicBoxRule_in').addClass(`MagicBoxRule${i}`); + $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage1,.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2').hide(); + $(`.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage${i}`).show(); + return false; +}) + +// 獲取魔盒接口 +function getRecordPage () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/activity/task/user/record/page', + data: { + componentCode: "QI_HUAN_MO_HE", + activityCode: 'ACT_2024_APRIL_FOOLS_DAY', + pageNum: page, + pageSize: 20, + }, + success (res) { + if (res.code === 200) { + var str = '' + if (res.data.records.length == 0) { + str = ` +
  • 暂无记录
    • + ` + isLock = false; + } else { + res.data.records.forEach(res => { + str += ` +
  • +
    +

    ${dateFormat(res.createTime, 'yyyy/MM/dd')}

    + ${dateFormat(res.createTime, 'hh:mm:ss')} +
    +
    ${res.nick}
    +
    +

    獲得：${res.rewardName}

    + ${res.showValue} +
    +
    • + ` + }) + isLock = true; + } + $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').append(str); + } else { + toastMsg(res.message) + isLock = true; + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤，請退出重進') + isLock = true; + } + }) +} +// 滚动 +$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').scroll(function () { + let scrollTop = $(this).scrollTop() + let scrollHeight = $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul')[0].scrollHeight + let ulHeight = $(this).innerHeight() + if (scrollTop + ulHeight + 100 >= scrollHeight) { + if (isLock) { + // 請求下一頁 + page = page + 1; + getRecordPage(); + isLock = false; + } + } +}) + +// 打开魔盒规则 +$('.page1 .box1 .pageBox1Rule_icon').click(function () { + $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li').remove(); + getRecordPage(); + $('.MagicBoxRule').show(); + bodyScroolFun(true); +}) + +// 关闭魔盒规则 +$('.MagicBoxRule').click(function () { + $('.MagicBoxRule').hide(); + bodyScroolFun(false); +}) + +// 打开规则 +$('.header .rule_icon').click(function () { + $('.rule').show(); + bodyScroolFun(true); +}) + +// 关闭规则 +$('.rule').click(function () { + $('.rule').hide(); + bodyScroolFun(false); +}) + +// 打开限定礼物规则 +$('.header .qualifyGift_icon').click(function () { + $('.limitedGift').show(); + bodyScroolFun(true); +}) + +// 关闭限定礼物规则 +$('.limitedGift').click(function () { + $('.limitedGift').hide(); + bodyScroolFun(false); +}) \ No newline at end of file