diff --git a/view/molistar/activity/2024-cpActive/css/index.css b/view/molistar/activity/2024-cpActive/css/index.css new file mode 100644 index 0000000..366c348 --- /dev/null +++ b/view/molistar/activity/2024-cpActive/css/index.css @@ -0,0 +1,1518 @@ +@charset "UTF-8"; +html, +body { + width: 100%; + background: #6A46BC; +} + +.rabbit { + z-index: 999; + width: 0.8rem; + height: 0.8rem; +} + +.back { + width: 100%; + height: 0.58667rem; + line-height: 0.58667rem; + position: fixed; + left: 0; + top: 0.86667rem; + text-align: center; + color: #FFFFFF; + font-size: 0.50667rem; + font-weight: bold; + z-index: 10; +} + +.back img { + width: 0.58667rem; + height: 0.58667rem; + position: absolute; + left: 0.24rem; + top: 0rem; +} + +.header { + width: 10rem; + height: 16rem; + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto 0rem; + overflow: hidden; + /* 动画 */ + /* 动画 */ + /* 动画 */ +} + +.header .music { + position: absolute; + top: 1.6rem; + left: 0.4rem; + width: 0.72rem; + height: 0.72rem; + background: url(../images/open.png) no-repeat; + background-size: 100% 100%; + display: none; +} + +.header .notOpen { + position: absolute; + top: 1.6rem; + left: 0.4rem; + width: 0.72rem; + height: 0.72rem; + z-index: 2; + display: none; +} + +.header .rule_icon { + width: 1.62667rem; + height: 0.72rem; + line-height: 0.64rem; + background: url(../images/rule_icon.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 4.56rem; + right: 0; + text-align: center; + color: #fff; + font-size: 0.34667rem; + font-weight: 600; + text-indent: 0.3rem; +} + +.header .carousel { + width: 8.8rem; + height: 8.8rem; + background: url(../images/carousel.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.30667rem; + /* 无限旋转 */ + animation: rotateWheel 20s linear infinite; + z-index: 2; +} + +.header .carousel .carouselTitle { + width: 3.84rem; + height: 3.84rem; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + /* 无限旋转 */ + animation: rotateWheel_Title 20s linear infinite; +} + +.header .carousel div { + width: 2.66667rem; + height: 2.4rem; + position: absolute; + background: url(../images/carousel_in.png) no-repeat; + background-size: 100% 100%; + /* 无限旋转 */ + animation: rotateWheel_in 20s linear infinite; +} + +.header .carousel div img { + position: absolute; + width: 1.16rem; + height: 1.16rem; + border-radius: 50%; + top: 0.77333rem; + border: 0.04rem solid #FFFAC5; + box-sizing: border-box; +} + +.header .carousel div .tx1 { + left: 0; +} + +.header .carousel div .tx2 { + right: 0; +} + +.header .carousel .carousel_in1 { + left: 3.06667rem; + top: -0.42667rem; +} + +.header .carousel .carousel_in2 { + left: 6.14667rem; + top: 1.52rem; +} + +.header .carousel .carousel_in3 { + left: 6.14667rem; + top: 4.98667rem; +} + +.header .carousel .carousel_in4 { + left: 3.06667rem; + top: 6.62667rem; +} + +.header .carousel .carousel_in5 { + left: -0.09333rem; + top: 4.98667rem; +} + +.header .carousel .carousel_in6 { + left: -0.09333rem; + top: 1.52rem; +} + +.header .carouselBoom { + width: 8.64rem; + height: 5.44rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 9.46667rem; +} + +@keyframes rotateWheel { + from { + transform: translateX(-50%) rotate(0deg); + } + to { + transform: translateX(-50%) rotate(360deg); + } +} + +@keyframes rotateWheel_Title { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + to { + transform: translate(-50%, -50%) rotate(-360deg); + } +} + +@keyframes rotateWheel_in { + from { + transform: rotate(0deg); + } + to { + transform: rotate(-360deg); + } +} + +.header .timeBox { + width: 8rem; + height: 1.62667rem; + box-sizing: border-box; + padding: 0 0.66667rem; + position: absolute; + top: 13.96rem; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; +} + +.header .timeBox div { + width: 1.2rem; + height: 1.06667rem; + background: url(../images/timeIcon.png) no-repeat; + background-size: 100% 100%; + position: relative; + text-align: center; + line-height: 1.06667rem; +} + +.header .timeBox div b { + color: #fff; + font-size: 0.58667rem; + font-weight: 600; + font-family: PingFang SC; +} + +.header .timeBox div span { + width: 2.4rem; + height: 0.48rem; + line-height: 0.48rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.54667rem; + text-align: center; + color: #fff; + font-size: 0.37333rem; + font-weight: 400; + font-family: PingFang SC; +} + +.header .timeBox .colon { + width: 0.21333rem; + height: 0.53333rem; + background: url(../images/colon.png) no-repeat; + background-size: 100% 100%; + margin: 0 0.22667rem; + margin-top: 0.54667rem; +} + +.tabBox { + width: 10rem; + height: 0.93333rem; + line-height: 0.86667rem; + text-align: center; + display: flex; + justify-content: space-between; + margin: 0 auto 0.18667rem; +} + +.tabBox div { + width: 3.25333rem; + height: 100%; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; + color: #FFE3E9; + font-size: 0.42667rem; + font-weight: 600; +} + +.tabBox .act { + background: url(../images/act.png) no-repeat; + background-size: 100% 100%; + color: #671D00; +} + +.page1 .top { + width: 9.86667rem; + height: 4rem; + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + margin-bottom: 0; + position: relative; + margin: 0 auto 0; +} + +.page1 .top p { + width: 8.10667rem; + line-height: 0.53333rem; + color: #FFFFFF; + font-size: 0.42667rem; + font-weight: 600; + margin: 0 auto; + text-align: center; + margin-top: 2rem; +} + +.page1 .content { + width: 9.86667rem; + height: auto; + background: url(../images/content.png) no-repeat; + background-size: 100% 100%; + margin: -0.53333rem auto 0rem; + box-sizing: border-box; + overflow: hidden; + position: relative; +} + +.page1 .content .timeTitle { + width: 6.93333rem; + height: 0.34667rem; + display: block; + margin: 0 auto 0.29333rem; +} + +.page1 .content .times { + width: 100%; + text-align: center; + color: #FFFFFF; + font-weight: 400; + font-size: 0.42667rem; + margin-bottom: 0.37333rem; +} + +.page1 .content .topBox { + width: 8.74667rem; + height: 10.21333rem; + margin: 0 auto 0.49333rem; + position: relative; +} + +.page1 .content .topBox .top1 { + width: 8.74667rem; + height: 5.6rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/top1.png) no-repeat; + background-size: 100% 100%; +} + +.page1 .content .topBox .top1 .tsL { + width: 2.34667rem; + height: 2.34667rem; + z-index: 2; + position: absolute; + top: 0.8rem; + left: 2rem; +} + +.page1 .content .topBox .top1 .tsR { + width: 2.34667rem; + height: 2.34667rem; + z-index: 2; + position: absolute; + top: 0.8rem; + right: 2rem; +} + +.page1 .content .topBox .top1 .txL { + width: 1.6rem; + height: 1.6rem; + position: absolute; + top: 1.17333rem; + left: 2.37333rem; +} + +.page1 .content .topBox .top1 .txR { + width: 1.6rem; + height: 1.6rem; + position: absolute; + top: 1.17333rem; + right: 2.37333rem; +} + +.page1 .content .topBox .top1 .nameL { + width: 2.25333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.04rem; + left: 2.04rem; + text-align: center; +} + +.page1 .content .topBox .top1 .nameR { + width: 2.25333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.04rem; + right: 2.04rem; + text-align: center; +} + +.page1 .content .topBox .top1 .idL { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.42667rem; + left: 2.04rem; + text-align: center; +} + +.page1 .content .topBox .top1 .idR { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.42667rem; + right: 2.04rem; + text-align: center; +} + +.page1 .content .topBox .top1 .sclore { + min-width: 2.28rem; + height: 0.48rem; + line-height: 0.48rem; + border-radius: 0.48rem; + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: 0.37333rem; + position: absolute; + top: 3.86667rem; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.3); + padding: 0 0.14667rem; +} + +.page1 .content .topBox .top1 .sclore img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin: 0.04rem 0.09333rem; +} + +.page1 .content .topBox .top2 { + width: 4.37333rem; + height: 4.61333rem; + position: absolute; + left: 0; + top: 5.6rem; + background: url(../images/top2.png) no-repeat; + background-size: 100% 100%; +} + +.page1 .content .topBox .top2 .tsL { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + left: 0.10667rem; +} + +.page1 .content .topBox .top2 .tsR { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + right: 0.10667rem; +} + +.page1 .content .topBox .top2 .txL { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + left: 0.44rem; +} + +.page1 .content .topBox .top2 .txR { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + right: 0.44rem; +} + +.page1 .content .topBox .top2 .nameL { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + left: 0.08rem; + text-align: center; +} + +.page1 .content .topBox .top2 .nameR { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + right: 0.08rem; + text-align: center; +} + +.page1 .content .topBox .top2 .idL { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + left: 0rem; + text-align: center; +} + +.page1 .content .topBox .top2 .idR { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + right: 0rem; + text-align: center; +} + +.page1 .content .topBox .top2 .sclore { + min-width: 2.28rem; + height: 0.48rem; + line-height: 0.48rem; + border-radius: 0.48rem; + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: 0.37333rem; + position: absolute; + top: 3.50667rem; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.3); + padding: 0 0.14667rem; +} + +.page1 .content .topBox .top2 .sclore img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin: 0.04rem 0.09333rem; +} + +.page1 .content .topBox .top3 { + width: 4.37333rem; + height: 4.61333rem; + position: absolute; + right: 0; + top: 5.6rem; + background: url(../images/top3.png) no-repeat; + background-size: 100% 100%; +} + +.page1 .content .topBox .top3 .tsL { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + left: 0.10667rem; +} + +.page1 .content .topBox .top3 .tsR { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + right: 0.10667rem; +} + +.page1 .content .topBox .top3 .txL { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + left: 0.44rem; +} + +.page1 .content .topBox .top3 .txR { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + right: 0.44rem; +} + +.page1 .content .topBox .top3 .nameL { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + left: 0.08rem; + text-align: center; +} + +.page1 .content .topBox .top3 .nameR { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + right: 0.08rem; + text-align: center; +} + +.page1 .content .topBox .top3 .idL { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + left: 0.22667rem; + text-align: center; +} + +.page1 .content .topBox .top3 .idR { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + right: 0.22667rem; + text-align: center; +} + +.page1 .content .topBox .top3 .sclore { + min-width: 2.28rem; + height: 0.48rem; + line-height: 0.48rem; + border-radius: 0.48rem; + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: 0.37333rem; + position: absolute; + top: 3.50667rem; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.3); + padding: 0 0.14667rem; +} + +.page1 .content .topBox .top3 .sclore img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin: 0.04rem 0.09333rem; +} + +.page1 .bottom { + width: 9.86667rem; + height: 2.17333rem; + background: url(../images/bottom.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; +} + +.page2 { + display: none; +} + +.page2 .top { + width: 9.86667rem; + height: 4rem; + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + margin-bottom: 0; + position: relative; + margin: 0 auto 0; +} + +.page2 .top p { + width: 8.10667rem; + line-height: 0.53333rem; + color: #FFFFFF; + font-size: 0.42667rem; + font-weight: 600; + margin: 0 auto; + text-align: center; + margin-top: 2rem; +} + +.page2 .content { + width: 9.86667rem; + height: auto; + background: url(../images/content.png) no-repeat; + background-size: 100% 100%; + margin: -0.53333rem auto 0rem; + box-sizing: border-box; + overflow: hidden; + position: relative; +} + +.page2 .content .topBox { + width: 8.74667rem; + height: 10.21333rem; + margin: 0 auto 0.49333rem; + position: relative; +} + +.page2 .content .topBox .top1 { + width: 8.74667rem; + height: 5.6rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/top1.png) no-repeat; + background-size: 100% 100%; +} + +.page2 .content .topBox .top1 .tsL { + width: 2.34667rem; + height: 2.34667rem; + z-index: 2; + position: absolute; + top: 0.8rem; + left: 2rem; +} + +.page2 .content .topBox .top1 .tsR { + width: 2.34667rem; + height: 2.34667rem; + z-index: 2; + position: absolute; + top: 0.8rem; + right: 2rem; +} + +.page2 .content .topBox .top1 .txL { + width: 1.6rem; + height: 1.6rem; + position: absolute; + top: 1.17333rem; + left: 2.37333rem; +} + +.page2 .content .topBox .top1 .txR { + width: 1.6rem; + height: 1.6rem; + position: absolute; + top: 1.17333rem; + right: 2.37333rem; +} + +.page2 .content .topBox .top1 .nameL { + width: 2.25333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.04rem; + left: 2.04rem; + text-align: center; +} + +.page2 .content .topBox .top1 .nameR { + width: 2.25333rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.04rem; + right: 2.04rem; + text-align: center; +} + +.page2 .content .topBox .top1 .idL { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.42667rem; + left: 2.04rem; + text-align: center; +} + +.page2 .content .topBox .top1 .idR { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.42667rem; + right: 2.04rem; + text-align: center; +} + +.page2 .content .topBox .top1 .sclore { + min-width: 2.28rem; + height: 0.48rem; + line-height: 0.48rem; + border-radius: 0.48rem; + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: 0.37333rem; + position: absolute; + top: 3.86667rem; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.3); + padding: 0 0.14667rem; +} + +.page2 .content .topBox .top1 .sclore img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin: 0.04rem 0.09333rem; +} + +.page2 .content .topBox .top2 { + width: 4.37333rem; + height: 4.61333rem; + position: absolute; + left: 0; + top: 5.6rem; + background: url(../images/top2.png) no-repeat; + background-size: 100% 100%; +} + +.page2 .content .topBox .top2 .tsL { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + left: 0.10667rem; +} + +.page2 .content .topBox .top2 .tsR { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + right: 0.10667rem; +} + +.page2 .content .topBox .top2 .txL { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + left: 0.44rem; +} + +.page2 .content .topBox .top2 .txR { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + right: 0.44rem; +} + +.page2 .content .topBox .top2 .nameL { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + left: 0.08rem; + text-align: center; +} + +.page2 .content .topBox .top2 .nameR { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + right: 0.08rem; + text-align: center; +} + +.page2 .content .topBox .top2 .idL { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + left: 0rem; + text-align: center; +} + +.page2 .content .topBox .top2 .idR { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + right: 0rem; + text-align: center; +} + +.page2 .content .topBox .top2 .sclore { + min-width: 2.28rem; + height: 0.48rem; + line-height: 0.48rem; + border-radius: 0.48rem; + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: 0.37333rem; + position: absolute; + top: 3.50667rem; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.3); + padding: 0 0.14667rem; +} + +.page2 .content .topBox .top2 .sclore img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin: 0.04rem 0.09333rem; +} + +.page2 .content .topBox .top3 { + width: 4.37333rem; + height: 4.61333rem; + position: absolute; + right: 0; + top: 5.6rem; + background: url(../images/top3.png) no-repeat; + background-size: 100% 100%; +} + +.page2 .content .topBox .top3 .tsL { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + left: 0.10667rem; +} + +.page2 .content .topBox .top3 .tsR { + width: 2rem; + height: 2rem; + z-index: 2; + position: absolute; + top: 0.70667rem; + right: 0.10667rem; +} + +.page2 .content .topBox .top3 .txL { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + left: 0.44rem; +} + +.page2 .content .topBox .top3 .txR { + width: 1.33333rem; + height: 1.33333rem; + position: absolute; + top: 1.04rem; + right: 0.44rem; +} + +.page2 .content .topBox .top3 .nameL { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + left: 0.08rem; + text-align: center; +} + +.page2 .content .topBox .top3 .nameR { + width: 2.04rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.68rem; + right: 0.08rem; + text-align: center; +} + +.page2 .content .topBox .top3 .idL { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + left: 0rem; + text-align: center; +} + +.page2 .content .topBox .top3 .idR { + width: 2.25333rem; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 3.06667rem; + right: 0rem; + text-align: center; +} + +.page2 .content .topBox .top3 .sclore { + min-width: 2.28rem; + height: 0.48rem; + line-height: 0.48rem; + border-radius: 0.48rem; + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: 0.37333rem; + position: absolute; + top: 3.50667rem; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.3); + padding: 0 0.14667rem; +} + +.page2 .content .topBox .top3 .sclore img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin: 0.04rem 0.09333rem; +} + +.page2 .content ul { + width: 8.66667rem; + margin: 0 auto 0.37333rem; +} + +.page2 .content ul li { + width: 8.66667rem; + height: 2.08rem; + background: url(../images/liBg.png) no-repeat; + background-size: 100% 100%; + padding: 0 0.4rem; + box-sizing: border-box; + overflow: hidden; + margin-bottom: 0.22667rem; +} + +.page2 .content ul li .num { + width: 0.53333rem; + height: 100%; + line-height: 2.08rem; + color: #FFFFFF; + font-size: 0.4rem; + font-weight: 500; + float: left; +} + +.page2 .content ul li .txL { + width: 2.04rem; + margin-top: 0.2rem; + float: left; +} + +.page2 .content ul li .txL img { + display: block; + width: 1.17333rem; + height: 1.17333rem; + border-radius: 50%; + border: 0.04rem solid #FFFAC5; + margin: 0 auto 0.12rem; +} + +.page2 .content ul li .txL p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + text-align: center; +} + +.page2 .content ul li .loves { + width: 1.33333rem; + height: 1.33333rem; + display: block; + float: left; + margin: 0.13333rem -0.4rem 0; +} + +.page2 .content ul li .txR { + width: 2.04rem; + margin-top: 0.2rem; + float: left; +} + +.page2 .content ul li .txR img { + display: block; + width: 1.17333rem; + height: 1.17333rem; + border-radius: 50%; + border: 0.04rem solid #FFFAC5; + margin: 0 auto 0.12rem; +} + +.page2 .content ul li .txR p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: 0.37333rem; + font-weight: 500; + text-align: center; +} + +.page2 .content ul li .scores { + min-width: 2.28rem; + height: 0.48rem; + line-height: 0.48rem; + border-radius: 0.48rem; + float: right; + margin-top: 0.8rem; + background: rgba(0, 0, 0, 0.3); + text-align: center; + color: #FFEA00; + font-size: 0.37333rem; + font-weight: 500; +} + +.page2 .content ul li .scores img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + margin-top: 0.04rem; +} + +.page2 .content .more { + width: 1.84rem; + padding: 0 0.48rem; + height: 0.56rem; + line-height: 0.56rem; + text-align: center; + color: #671D00; + font-size: 0.37333rem; + font-weight: 500; + margin: 0 auto 0rem; + background: #FFC761; + border-radius: 0.56rem; + border: 0.02667rem solid #fff; +} + +.page2 .bottom { + width: 9.86667rem; + height: 2.17333rem; + background: url(../images/bottom.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; +} + +.page3 { + display: none; +} + +.page3 .top { + width: 9.86667rem; + height: 4rem; + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + margin-bottom: 0; + position: relative; + margin: 0 auto 0; +} + +.page3 .top .timeTitle { + width: 6.93333rem; + height: 0.34667rem; + display: block; + margin: 1.7rem auto 0.29333rem; +} + +.page3 .top .title { + width: 100%; + text-align: center; + color: #FFFFFE; + font-weight: 600; + font-size: 0.53333rem; +} + +.page3 .content { + width: 9.86667rem; + height: auto; + background: url(../images/content.png) no-repeat; + background-size: 100% 100%; + margin: -0.53333rem auto 0rem; + box-sizing: border-box; + overflow: hidden; + position: relative; +} + +.page3 .content .timeTitle { + width: 6.93333rem; + height: 0.34667rem; + display: block; + margin: 0 auto 0.25333rem; +} + +.page3 .content .title { + width: 100%; + text-align: center; + color: #FFFFFE; + font-weight: 600; + font-size: 0.53333rem; + margin-bottom: 0.32rem; +} + +.page3 .content .times { + width: 8.10667rem; + text-align: center; + color: #FFFFFF; + font-weight: 400; + font-size: 0.34667rem; + margin: -0.13333rem auto 0.37333rem; + line-height: 0.53333rem; + opacity: 0.8; +} + +.page3 .content .topBox1 { + width: 9.06667rem; + height: 13.41333rem; + background: url(../images/topBox1.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto 0.73333rem; +} + +.page3 .content .topBox1 .bo { + width: 0.69333rem; + height: 0.69333rem; + position: absolute; + left: 1.93333rem; + top: 8.05333rem; + z-index: 2; +} + +.page3 .content .topBox1 .bo2 { + width: 0.69333rem; + height: 0.69333rem; + position: absolute; + right: 1.16rem; + top: 11.94667rem; + z-index: 2; +} + +.page3 .content .topBox1 .ts1 { + width: 2.4rem; + height: 2.4rem; + position: absolute; + left: 0.33333rem; + top: 10.2rem; +} + +.page3 .content .topBox2 { + width: 9.06667rem; + height: 10.22667rem; + background: url(../images/topBox2.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto 0.73333rem; +} + +.page3 .content .topBox2 .bo { + width: 0.69333rem; + height: 0.69333rem; + position: absolute; + left: 2.16rem; + top: 7.73333rem; + z-index: 2; +} + +.page3 .content .topBox2 .bo2 { + width: 0.69333rem; + height: 0.69333rem; + position: absolute; + right: 1.72rem; + top: 8.73333rem; + z-index: 2; +} + +.page3 .content .topBox2 .ts2 { + width: 2.33333rem; + height: 2.33333rem; + position: absolute; + right: 0.93333rem; + top: 0.17333rem; +} + +.page3 .content .topBox3 { + width: 9.06667rem; + height: 10.22667rem; + background: url(../images/topBox3.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto 0.73333rem; +} + +.page3 .content .topBox3 .bo { + width: 0.69333rem; + height: 0.69333rem; + position: absolute; + left: 2.16rem; + top: 7.73333rem; + z-index: 2; +} + +.page3 .content .topBox3 .bo2 { + width: 0.69333rem; + height: 0.69333rem; + position: absolute; + right: 1.72rem; + top: 8.73333rem; + z-index: 2; +} + +.page3 .content .topBox3 .ts3 { + width: 2.33333rem; + height: 2.33333rem; + position: absolute; + right: 0.93333rem; + top: 0.17333rem; +} + +.page3 .bottom { + width: 9.86667rem; + height: 2.17333rem; + background: url(../images/bottom.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; +} + +.rule { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + display: none; +} + +.rule .ruleIn { + width: 9.65333rem; + height: 8.69333rem; + background: url(../images/ruleBg.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.rule .ruleIn .close { + width: 0.90667rem; + height: 0.90667rem; + position: absolute; + right: 0.34667rem; + top: -0.26667rem; +} + +.rule .ruleIn .title { + width: 4.05333rem; + height: 1.33333rem; + line-height: 1.33333rem; + text-align: center; + color: #671D00; + font-size: 0.48rem; + font-weight: 600; + background: url(../images/ruleTitle.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.rule .ruleIn .texts { + width: 7.74667rem; + height: 5.8rem; + overflow-y: scroll; + margin: 2.05333rem auto 0; +} + +.rule .ruleIn .texts::-webkit-scrollbar { + display: none; +} + +.rule .ruleIn .texts p { + color: #fff; + font-size: 0.37333rem; + font-weight: 500; + margin-bottom: 0.1rem; + line-height: 0.5rem; +} + +.zjvideo1, +.xzvideo1, +.zjvideo2, +.xzvideo2, +.zjvideo3, +.xzvideo3 { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 99; + display: none; +} + +.zjvideo1 video, +.xzvideo1 video, +.zjvideo2 video, +.xzvideo2 video, +.zjvideo3 video, +.xzvideo3 video { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 65%; +} + +.zjvideo1 .close, +.xzvideo1 .close, +.zjvideo2 .close, +.xzvideo2 .close, +.zjvideo3 .close, +.xzvideo3 .close { + width: 0.90667rem; + height: 0.90667rem; + position: absolute; + top: 10%; + right: 0.93333rem; + z-index: 9; +} diff --git a/view/molistar/activity/2024-cpActive/css/index.scss b/view/molistar/activity/2024-cpActive/css/index.scss new file mode 100644 index 0000000..595819d --- /dev/null +++ b/view/molistar/activity/2024-cpActive/css/index.scss @@ -0,0 +1,1524 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + background: #6A46BC; +} + +.rabbit { + z-index: 999; + width: px2rem(60); + height: px2rem(60); +} + +.back { + width: 100%; + height: px2rem(44); + line-height: px2rem(44); + position: fixed; + left: 0; + top: px2rem(65); + text-align: center; + color: #FFFFFF; + font-size: px2rem(38); + font-weight: bold; + z-index: 10; + + img { + width: px2rem(44); + height: px2rem(44); + position: absolute; + left: px2rem(18); + top: px2rem(0); + } +} + +.header { + width: px2rem(750); + height: px2rem(1200); + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto px2rem(0); + overflow: hidden; + + .music { + position: absolute; + top: px2rem(120); + left: px2rem(30); + width: px2rem(54); + height: px2rem(54); + background: url(../images/open.png) no-repeat; + background-size: 100% 100%; + display: none; + } + + .notOpen { + position: absolute; + top: px2rem(120); + left: px2rem(30); + width: px2rem(54); + height: px2rem(54); + z-index: 2; + display: none; + } + + .rule_icon { + width: px2rem(122); + height: px2rem(54); + line-height: px2rem(48); + background: url(../images/rule_icon.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: px2rem(342); + right: 0; + text-align: center; + color: #fff; + font-size: px2rem(26); + font-weight: 600; + text-indent: 0.3rem; + } + + .carousel { + width: px2rem(660); + height: px2rem(660); + background: url(../images/carousel.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(323); + /* 无限旋转 */ + animation: rotateWheel 20s linear infinite; + z-index: 2; + + .carouselTitle { + width: px2rem(288); + height: px2rem(288); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + /* 无限旋转 */ + animation: rotateWheel_Title 20s linear infinite; + } + + div { + width: px2rem(200); + height: px2rem(180); + position: absolute; + background: url(../images/carousel_in.png) no-repeat; + background-size: 100% 100%; + /* 无限旋转 */ + animation: rotateWheel_in 20s linear infinite; + + img { + position: absolute; + width: px2rem(87); + height: px2rem(87); + border-radius: 50%; + top: px2rem(58); + border: px2rem(3) solid #FFFAC5; + box-sizing: border-box; + } + + .tx1 { + left: 0; + } + + .tx2 { + right: 0; + } + } + + .carousel_in1 { + left: px2rem(230); + top: px2rem(-32); + } + + .carousel_in2 { + left: px2rem(461); + top: px2rem(114); + } + + .carousel_in3 { + left: px2rem(461); + top: px2rem(374); + } + + .carousel_in4 { + left: px2rem(230); + top: px2rem(497); + } + + .carousel_in5 { + left: px2rem(-7); + top: px2rem(374); + } + + .carousel_in6 { + left: px2rem(-7); + top: px2rem(114); + } + } + + .carouselBoom { + width: px2rem(648); + height: px2rem(408); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(710); + } + + /* 动画 */ + @keyframes rotateWheel { + from { + transform: translateX(-50%) rotate(0deg); + } + + to { + transform: translateX(-50%) rotate(360deg); + } + } + + /* 动画 */ + @keyframes rotateWheel_Title { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + + to { + transform: translate(-50%, -50%) rotate(-360deg); + } + } + + /* 动画 */ + @keyframes rotateWheel_in { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(-360deg); + } + } + + .timeBox { + width: 8rem; + height: px2rem(122); + box-sizing: border-box; + padding: 0 px2rem(50); + position: absolute; + top: px2rem(1047); + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: space-between; + + div { + width: px2rem(90); + height: px2rem(80); + background: url(../images/timeIcon.png) no-repeat; + background-size: 100% 100%; + position: relative; + text-align: center; + line-height: px2rem(80); + + b { + color: #fff; + font-size: px2rem(44); + font-weight: 600; + font-family: PingFang SC; + } + + span { + width: px2rem(180); + height: px2rem(36); + line-height: px2rem(36); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-41); + text-align: center; + color: #fff; + font-size: px2rem(28); + font-weight: 400; + font-family: PingFang SC; + // background: url(../images/timeBg.png) no-repeat; + // background-size: 100% 100%; + } + } + + .day { + // margin-right: px2rem(59); + } + + .colon { + width: px2rem(16); + height: px2rem(40); + background: url(../images/colon.png) no-repeat; + background-size: 100% 100%; + margin: 0 px2rem(17); + margin-top: px2rem(41); + } + } +} + +.tabBox { + width: px2rem(750); + height: px2rem(70); + line-height: px2rem(65); + text-align: center; + display: flex; + justify-content: space-between; + margin: 0 auto px2rem(14); + + div { + width: px2rem(244); + height: 100%; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; + color: #FFE3E9; + font-size: px2rem(32); + font-weight: 600; + } + + .act { + background: url(../images/act.png) no-repeat; + background-size: 100% 100%; + color: #671D00; + } +} + +.page1 { + // display: none; + + .top { + width: px2rem(740); + height: px2rem(300); + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + margin-bottom: 0; + position: relative; + margin: 0 auto 0; + + p { + width: px2rem(608); + line-height: px2rem(40); + color: #FFFFFF; + font-size: px2rem(32); + font-weight: 600; + margin: 0 auto; + text-align: center; + margin-top: 2rem; + } + } + + .content { + width: px2rem(740); + height: auto; + background: url(../images/content.png) no-repeat; + background-size: 100% 100%; + margin: px2rem(-40) auto px2rem(-00); + box-sizing: border-box; + overflow: hidden; + position: relative; + + .timeTitle { + width: px2rem(520); + height: px2rem(26); + display: block; + margin: 0 auto px2rem(22); + } + + .times { + width: 100%; + text-align: center; + color: #FFFFFF; + font-weight: 400; + font-size: px2rem(32); + margin-bottom: px2rem(28); + } + + .topBox { + width: px2rem(656); + height: px2rem(766); + margin: 0 auto px2rem(37); + position: relative; + + .top1 { + width: px2rem(656); + height: px2rem(420); + position: absolute; + left: 0; + top: 0; + background: url(../images/top1.png) no-repeat; + background-size: 100% 100%; + + .tsL { + width: px2rem(176); + height: px2rem(176); + z-index: 2; + position: absolute; + top: px2rem(60); + left: px2rem(150); + } + + .tsR { + width: px2rem(176); + height: px2rem(176); + z-index: 2; + position: absolute; + top: px2rem(60); + right: px2rem(150); + } + + .txL { + width: px2rem(120); + height: px2rem(120); + position: absolute; + top: px2rem(88); + left: px2rem(178); + } + + .txR { + width: px2rem(120); + height: px2rem(120); + position: absolute; + top: px2rem(88); + right: px2rem(178); + } + + .nameL { + width: px2rem(169); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(228); + left: px2rem(153); + text-align: center; + } + + .nameR { + width: px2rem(169); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(228); + right: px2rem(153); + text-align: center; + } + + .idL { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(257); + left: px2rem(153); + text-align: center; + } + + .idR { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(257); + right: px2rem(153); + text-align: center; + } + + .sclore { + min-width: px2rem(171); + height: px2rem(36); + line-height: px2rem(36); + border-radius: px2rem(36); + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: px2rem(28); + position: absolute; + top: px2rem(290); + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, .3); + padding: 0 px2rem(11); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + margin: px2rem(3) px2rem(7); + } + } + } + + .top2 { + width: px2rem(328); + height: px2rem(346); + position: absolute; + left: 0; + top: px2rem(420); + background: url(../images/top2.png) no-repeat; + background-size: 100% 100%; + + .tsL { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + left: px2rem(8); + } + + .tsR { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + right: px2rem(8); + } + + .txL { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + left: px2rem(33); + } + + .txR { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + right: px2rem(33); + } + + .nameL { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + left: px2rem(6); + text-align: center; + } + + .nameR { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + right: px2rem(6); + text-align: center; + } + + .idL { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + left: px2rem(0); + text-align: center; + } + + .idR { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + right: px2rem(0); + text-align: center; + } + + .sclore { + min-width: px2rem(171); + height: px2rem(36); + line-height: px2rem(36); + border-radius: px2rem(36); + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: px2rem(28); + position: absolute; + top: px2rem(263); + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, .3); + padding: 0 px2rem(11); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + margin: px2rem(3) px2rem(7); + } + } + } + + .top3 { + width: px2rem(328); + height: px2rem(346); + position: absolute; + right: 0; + top: px2rem(420); + background: url(../images/top3.png) no-repeat; + background-size: 100% 100%; + + .tsL { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + left: px2rem(8); + } + + .tsR { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + right: px2rem(8); + } + + .txL { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + left: px2rem(33); + } + + .txR { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + right: px2rem(33); + } + + .nameL { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + left: px2rem(6); + text-align: center; + } + + .nameR { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + right: px2rem(6); + text-align: center; + } + + .idL { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + left: px2rem(17); + text-align: center; + } + + .idR { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + right: px2rem(17); + text-align: center; + } + + .sclore { + min-width: px2rem(171); + height: px2rem(36); + line-height: px2rem(36); + border-radius: px2rem(36); + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: px2rem(28); + position: absolute; + top: px2rem(263); + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, .3); + padding: 0 px2rem(11); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + margin: px2rem(3) px2rem(7); + } + } + } + } + } + + .bottom { + width: px2rem(740); + height: px2rem(163); + background: url(../images/bottom.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + } +} + +.page2 { + display: none; + + .top { + width: px2rem(740); + height: px2rem(300); + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + margin-bottom: 0; + position: relative; + margin: 0 auto 0; + + p { + width: px2rem(608); + line-height: px2rem(40); + color: #FFFFFF; + font-size: px2rem(32); + font-weight: 600; + margin: 0 auto; + text-align: center; + margin-top: 2rem; + } + } + + .content { + width: px2rem(740); + height: auto; + background: url(../images/content.png) no-repeat; + background-size: 100% 100%; + margin: px2rem(-40) auto px2rem(-00); + box-sizing: border-box; + overflow: hidden; + position: relative; + + .topBox { + width: px2rem(656); + height: px2rem(766); + margin: 0 auto px2rem(37); + position: relative; + + .top1 { + width: px2rem(656); + height: px2rem(420); + position: absolute; + left: 0; + top: 0; + background: url(../images/top1.png) no-repeat; + background-size: 100% 100%; + + .tsL { + width: px2rem(176); + height: px2rem(176); + z-index: 2; + position: absolute; + top: px2rem(60); + left: px2rem(150); + } + + .tsR { + width: px2rem(176); + height: px2rem(176); + z-index: 2; + position: absolute; + top: px2rem(60); + right: px2rem(150); + } + + .txL { + width: px2rem(120); + height: px2rem(120); + position: absolute; + top: px2rem(88); + left: px2rem(178); + } + + .txR { + width: px2rem(120); + height: px2rem(120); + position: absolute; + top: px2rem(88); + right: px2rem(178); + } + + .nameL { + width: px2rem(169); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(228); + left: px2rem(153); + text-align: center; + } + + .nameR { + width: px2rem(169); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(228); + right: px2rem(153); + text-align: center; + } + + .idL { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(257); + left: px2rem(153); + text-align: center; + } + + .idR { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(257); + right: px2rem(153); + text-align: center; + } + + .sclore { + min-width: px2rem(171); + height: px2rem(36); + line-height: px2rem(36); + border-radius: px2rem(36); + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: px2rem(28); + position: absolute; + top: px2rem(290); + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, .3); + padding: 0 px2rem(11); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + margin: px2rem(3) px2rem(7); + } + } + } + + .top2 { + width: px2rem(328); + height: px2rem(346); + position: absolute; + left: 0; + top: px2rem(420); + background: url(../images/top2.png) no-repeat; + background-size: 100% 100%; + + .tsL { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + left: px2rem(8); + } + + .tsR { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + right: px2rem(8); + } + + .txL { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + left: px2rem(33); + } + + .txR { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + right: px2rem(33); + } + + .nameL { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + left: px2rem(6); + text-align: center; + } + + .nameR { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + right: px2rem(6); + text-align: center; + } + + .idL { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + left: px2rem(0); + text-align: center; + } + + .idR { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + right: px2rem(0); + text-align: center; + } + + .sclore { + min-width: px2rem(171); + height: px2rem(36); + line-height: px2rem(36); + border-radius: px2rem(36); + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: px2rem(28); + position: absolute; + top: px2rem(263); + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, .3); + padding: 0 px2rem(11); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + margin: px2rem(3) px2rem(7); + } + } + } + + .top3 { + width: px2rem(328); + height: px2rem(346); + position: absolute; + right: 0; + top: px2rem(420); + background: url(../images/top3.png) no-repeat; + background-size: 100% 100%; + + .tsL { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + left: px2rem(8); + } + + .tsR { + width: px2rem(150); + height: px2rem(150); + z-index: 2; + position: absolute; + top: px2rem(53); + right: px2rem(8); + } + + .txL { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + left: px2rem(33); + } + + .txR { + width: px2rem(100); + height: px2rem(100); + position: absolute; + top: px2rem(78); + right: px2rem(33); + } + + .nameL { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + left: px2rem(6); + text-align: center; + } + + .nameR { + width: px2rem(153); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(201); + right: px2rem(6); + text-align: center; + } + + .idL { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + left: px2rem(0); + text-align: center; + } + + .idR { + width: px2rem(169); + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(230); + right: px2rem(0); + text-align: center; + } + + .sclore { + min-width: px2rem(171); + height: px2rem(36); + line-height: px2rem(36); + border-radius: px2rem(36); + text-align: center; + color: #FFEA00; + font-weight: 500; + font-size: px2rem(28); + position: absolute; + top: px2rem(263); + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, .3); + padding: 0 px2rem(11); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + margin: px2rem(3) px2rem(7); + } + } + } + } + + ul { + width: px2rem(650); + margin: 0 auto px2rem(28); + + li { + width: px2rem(650); + height: px2rem(156); + background: url(../images/liBg.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(30); + box-sizing: border-box; + overflow: hidden; + margin-bottom: px2rem(17); + + .num { + width: px2rem(40); + height: 100%; + line-height: px2rem(156); + color: #FFFFFF; + font-size: px2rem(30); + font-weight: 500; + float: left; + } + + .txL { + width: px2rem(153); + margin-top: px2rem(15); + float: left; + + img { + display: block; + width: px2rem(88); + height: px2rem(88); + border-radius: 50%; + border: px2rem(3) solid #FFFAC5; + margin: 0 auto px2rem(9); + } + + p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + text-align: center; + } + } + + .loves { + width: px2rem(100); + height: px2rem(100); + display: block; + float: left; + margin: px2rem(10) px2rem(-30) 0; + } + + .txR { + width: px2rem(153); + margin-top: px2rem(15); + float: left; + + img { + display: block; + width: px2rem(88); + height: px2rem(88); + border-radius: 50%; + border: px2rem(3) solid #FFFAC5; + margin: 0 auto px2rem(9); + } + + p { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFFFFF; + font-size: px2rem(28); + font-weight: 500; + text-align: center; + } + } + + .scores { + min-width: px2rem(171); + height: px2rem(36); + line-height: px2rem(36); + border-radius: px2rem(36); + float: right; + margin-top: px2rem(60); + background: rgba(0, 0, 0, .3); + text-align: center; + color: #FFEA00; + font-size: px2rem(28); + font-weight: 500; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + margin-top: px2rem(3); + } + } + } + } + + .more { + width: px2rem(138); + padding: 0 px2rem(36); + height: px2rem(42); + line-height: px2rem(42); + text-align: center; + color: #671D00; + font-size: px2rem(28); + font-weight: 500; + margin: 0 auto px2rem(0); + background: #FFC761; + border-radius: px2rem(42); + border: px2rem(2) solid #fff; + } + } + + .bottom { + width: px2rem(740); + height: px2rem(163); + background: url(../images/bottom.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + } +} + +.page3 { + display: none; + + .top { + width: px2rem(740); + height: px2rem(300); + background: url(../images/top.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + margin-bottom: 0; + position: relative; + margin: 0 auto 0; + + .timeTitle { + width: px2rem(520); + height: px2rem(26); + display: block; + margin: 1.7rem auto px2rem(22); + } + + .title { + width: 100%; + text-align: center; + color: #FFFFFE; + font-weight: 600; + font-size: px2rem(40); + } + } + + .content { + width: px2rem(740); + height: auto; + background: url(../images/content.png) no-repeat; + background-size: 100% 100%; + margin: px2rem(-40) auto px2rem(-00); + box-sizing: border-box; + overflow: hidden; + position: relative; + + .timeTitle { + width: px2rem(520); + height: px2rem(26); + display: block; + margin: 0 auto px2rem(19); + } + + .title { + width: 100%; + text-align: center; + color: #FFFFFE; + font-weight: 600; + font-size: px2rem(40); + margin-bottom: px2rem(24); + } + + .times { + width: px2rem(608); + text-align: center; + color: #FFFFFF; + font-weight: 400; + font-size: px2rem(26); + margin: px2rem(-10) auto px2rem(28); + line-height: px2rem(40); + opacity: 0.8; + } + + .topBox1 { + width: px2rem(680); + height: px2rem(1006); + background: url(../images/topBox1.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto px2rem(55); + + .bo { + width: px2rem(52); + height: px2rem(52); + position: absolute; + left: px2rem(145); + top: px2rem(604); + z-index: 2; + } + + .bo2 { + width: px2rem(52); + height: px2rem(52); + position: absolute; + right: px2rem(87); + top: px2rem(896); + z-index: 2; + } + + .ts1 { + width: px2rem(180); + height: px2rem(180); + position: absolute; + left: px2rem(25); + top: px2rem(765); + } + } + + .topBox2 { + width: px2rem(680); + height: px2rem(767); + background: url(../images/topBox2.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto px2rem(55); + + .bo { + width: px2rem(52); + height: px2rem(52); + position: absolute; + left: px2rem(162); + top: px2rem(580); + z-index: 2; + } + + .bo2 { + width: px2rem(52); + height: px2rem(52); + position: absolute; + right: px2rem(129); + top: px2rem(655); + z-index: 2; + } + + .ts2 { + width: px2rem(175); + height: px2rem(175); + position: absolute; + right: px2rem(70); + top: px2rem(13); + } + } + + .topBox3 { + width: px2rem(680); + height: px2rem(767); + background: url(../images/topBox3.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto px2rem(55); + + .bo { + width: px2rem(52); + height: px2rem(52); + position: absolute; + left: px2rem(162); + top: px2rem(580); + z-index: 2; + } + + .bo2 { + width: px2rem(52); + height: px2rem(52); + position: absolute; + right: px2rem(129); + top: px2rem(655); + z-index: 2; + } + + .ts3 { + width: px2rem(175); + height: px2rem(175); + position: absolute; + right: px2rem(70); + top: px2rem(13); + } + } + } + + .bottom { + width: px2rem(740); + height: px2rem(163); + background: url(../images/bottom.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + } +} + +.rule { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, .5); + z-index: 999; + display: none; + + .ruleIn { + width: px2rem(724); + height: px2rem(652); + background: url(../images/ruleBg.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .close { + width: px2rem(68); + height: px2rem(68); + position: absolute; + right: px2rem(26); + top: px2rem(-20); + } + + .title { + width: px2rem(304); + height: px2rem(100); + line-height: px2rem(100); + text-align: center; + color: #671D00; + font-size: px2rem(36); + font-weight: 600; + background: url(../images/ruleTitle.png) no-repeat; + background-size: 100% 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .texts { + width: px2rem(581); + height: 5.8rem; + overflow-y: scroll; + margin: px2rem(154) auto 0; + + &::-webkit-scrollbar { + display: none; + } + + p { + color: #fff; + font-size: px2rem(28); + font-weight: 500; + margin-bottom: 0.1rem; + line-height: 0.5rem; + } + } + } +} + +.zjvideo1, +.xzvideo1, +.zjvideo2, +.xzvideo2, +.zjvideo3, +.xzvideo3 { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .5); + z-index: 99; + display: none; + + video { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 65%; + } + + .close { + width: px2rem(68); + height: px2rem(68); + position: absolute; + top: 10%; + right: px2rem(70); + z-index: 9; + } +} \ No newline at end of file diff --git a/view/molistar/activity/2024-cpActive/images/TimeTitle.png b/view/molistar/activity/2024-cpActive/images/TimeTitle.png new file mode 100644 index 0000000..8dcac9e Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/TimeTitle.png differ diff --git a/view/molistar/activity/2024-cpActive/images/act.png b/view/molistar/activity/2024-cpActive/images/act.png new file mode 100644 index 0000000..5f0db9f Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/act.png differ diff --git a/view/molistar/activity/2024-cpActive/images/bo.png b/view/molistar/activity/2024-cpActive/images/bo.png new file mode 100644 index 0000000..8256dcb Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/bo.png differ diff --git a/view/molistar/activity/2024-cpActive/images/bootm.png b/view/molistar/activity/2024-cpActive/images/bootm.png new file mode 100644 index 0000000..ce7a177 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/bootm.png differ diff --git a/view/molistar/activity/2024-cpActive/images/bottom.png b/view/molistar/activity/2024-cpActive/images/bottom.png new file mode 100644 index 0000000..1c8ddaa Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/bottom.png differ diff --git a/view/molistar/activity/2024-cpActive/images/carousel.png b/view/molistar/activity/2024-cpActive/images/carousel.png new file mode 100644 index 0000000..250cc6f Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/carousel.png differ diff --git a/view/molistar/activity/2024-cpActive/images/carouselBoom.png b/view/molistar/activity/2024-cpActive/images/carouselBoom.png new file mode 100644 index 0000000..26627e4 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/carouselBoom.png differ diff --git a/view/molistar/activity/2024-cpActive/images/carouselTitle.png b/view/molistar/activity/2024-cpActive/images/carouselTitle.png new file mode 100644 index 0000000..ed9f41a Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/carouselTitle.png differ diff --git a/view/molistar/activity/2024-cpActive/images/carousel_in.png b/view/molistar/activity/2024-cpActive/images/carousel_in.png new file mode 100644 index 0000000..735b974 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/carousel_in.png differ diff --git a/view/molistar/activity/2024-cpActive/images/close.png b/view/molistar/activity/2024-cpActive/images/close.png new file mode 100644 index 0000000..f568fa0 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/close.png differ diff --git a/view/molistar/activity/2024-cpActive/images/content.png b/view/molistar/activity/2024-cpActive/images/content.png new file mode 100644 index 0000000..5e0bf06 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/content.png differ diff --git a/view/molistar/activity/2024-cpActive/images/header.png b/view/molistar/activity/2024-cpActive/images/header.png new file mode 100644 index 0000000..a46f29d Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/header.png differ diff --git a/view/molistar/activity/2024-cpActive/images/liBg.png b/view/molistar/activity/2024-cpActive/images/liBg.png new file mode 100644 index 0000000..d271d65 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/liBg.png differ diff --git a/view/molistar/activity/2024-cpActive/images/love.png b/view/molistar/activity/2024-cpActive/images/love.png new file mode 100644 index 0000000..d1ca99d Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/love.png differ diff --git a/view/molistar/activity/2024-cpActive/images/loveIcon.png b/view/molistar/activity/2024-cpActive/images/loveIcon.png new file mode 100644 index 0000000..3b7ef6b Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/loveIcon.png differ diff --git a/view/molistar/activity/2024-cpActive/images/loves.png b/view/molistar/activity/2024-cpActive/images/loves.png new file mode 100644 index 0000000..44d7989 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/loves.png differ diff --git a/view/molistar/activity/2024-cpActive/images/notOpen.png b/view/molistar/activity/2024-cpActive/images/notOpen.png new file mode 100644 index 0000000..3c4c3af Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/notOpen.png differ diff --git a/view/molistar/activity/2024-cpActive/images/null.png b/view/molistar/activity/2024-cpActive/images/null.png new file mode 100644 index 0000000..ada4e31 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/null.png differ diff --git a/view/molistar/activity/2024-cpActive/images/open.png b/view/molistar/activity/2024-cpActive/images/open.png new file mode 100644 index 0000000..990d887 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/open.png differ diff --git a/view/molistar/activity/2024-cpActive/images/ruleBg.png b/view/molistar/activity/2024-cpActive/images/ruleBg.png new file mode 100644 index 0000000..47ce60b Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/ruleBg.png differ diff --git a/view/molistar/activity/2024-cpActive/images/ruleTitle.png b/view/molistar/activity/2024-cpActive/images/ruleTitle.png new file mode 100644 index 0000000..8beded1 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/ruleTitle.png differ diff --git a/view/molistar/activity/2024-cpActive/images/rule_icon.png b/view/molistar/activity/2024-cpActive/images/rule_icon.png new file mode 100644 index 0000000..46d4101 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/rule_icon.png differ diff --git a/view/molistar/activity/2024-cpActive/images/tab.png b/view/molistar/activity/2024-cpActive/images/tab.png new file mode 100644 index 0000000..2f2c19e Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/tab.png differ diff --git a/view/molistar/activity/2024-cpActive/images/timeIcon.png b/view/molistar/activity/2024-cpActive/images/timeIcon.png new file mode 100644 index 0000000..04754e5 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/timeIcon.png differ diff --git a/view/molistar/activity/2024-cpActive/images/top.png b/view/molistar/activity/2024-cpActive/images/top.png new file mode 100644 index 0000000..7b9546e Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/top.png differ diff --git a/view/molistar/activity/2024-cpActive/images/top1.png b/view/molistar/activity/2024-cpActive/images/top1.png new file mode 100644 index 0000000..a367b21 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/top1.png differ diff --git a/view/molistar/activity/2024-cpActive/images/top2.png b/view/molistar/activity/2024-cpActive/images/top2.png new file mode 100644 index 0000000..4a1df6f Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/top2.png differ diff --git a/view/molistar/activity/2024-cpActive/images/top3.png b/view/molistar/activity/2024-cpActive/images/top3.png new file mode 100644 index 0000000..60db63d Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/top3.png differ diff --git a/view/molistar/activity/2024-cpActive/images/topBox1.png b/view/molistar/activity/2024-cpActive/images/topBox1.png new file mode 100644 index 0000000..decbe36 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/topBox1.png differ diff --git a/view/molistar/activity/2024-cpActive/images/topBox2.png b/view/molistar/activity/2024-cpActive/images/topBox2.png new file mode 100644 index 0000000..195f5a6 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/topBox2.png differ diff --git a/view/molistar/activity/2024-cpActive/images/topBox3.png b/view/molistar/activity/2024-cpActive/images/topBox3.png new file mode 100644 index 0000000..786fdd7 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/topBox3.png differ diff --git a/view/molistar/activity/2024-cpActive/images/travel/back.png b/view/molistar/activity/2024-cpActive/images/travel/back.png new file mode 100644 index 0000000..2b3812d Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/travel/back.png differ diff --git a/view/molistar/activity/2024-cpActive/images/travel/backB.png b/view/molistar/activity/2024-cpActive/images/travel/backB.png new file mode 100644 index 0000000..92e190c Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/travel/backB.png differ diff --git a/view/molistar/activity/2024-cpActive/images/travel/backGold.png b/view/molistar/activity/2024-cpActive/images/travel/backGold.png new file mode 100644 index 0000000..3e13ccf Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/travel/backGold.png differ diff --git a/view/molistar/activity/2024-cpActive/images/ts1.png b/view/molistar/activity/2024-cpActive/images/ts1.png new file mode 100644 index 0000000..071310c Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/ts1.png differ diff --git a/view/molistar/activity/2024-cpActive/images/ts23.png b/view/molistar/activity/2024-cpActive/images/ts23.png new file mode 100644 index 0000000..70e2ba5 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/images/ts23.png differ diff --git a/view/molistar/activity/2024-cpActive/index.html b/view/molistar/activity/2024-cpActive/index.html new file mode 100644 index 0000000..f6c219d --- /dev/null +++ b/view/molistar/activity/2024-cpActive/index.html @@ -0,0 +1,295 @@ + + + + + + + Love Ferris wheel + + + + + + + +
+ +
+ +
+ +
Rules
+ + + + + +
+
+ 00 + Day +
+
+ 00 + Hour +
+
+ 00 + Min +
+
+ 00 + Sec +
+
+ +
+ +
+ + +
+ +
+
CP Square
+
CP List
+
CP Rewards
+
+ +
+
+

Top three users on the history list will be displayed here

+
+
+
+ +
2024.09.09-2024.09.16
+
+
+ + + + +
虚位以待
+
虚位以待
+
ID:0
+
ID:0
+
0K
+
+
+ + + + +
虚位以待
+
虚位以待
+
ID:0
+
ID:0
+
0K
+
+
+ + + + +
虚位以待
+
虚位以待
+
ID:0
+
ID:0
+
0K
+
+
+
+
+
+
+ +
+
+

Send CP gifts and you and your love may be on the list!

+
+
+
+
+ + + + +
虚位以待
+
虚位以待
+
ID:0
+
ID:0
+
0K
+
+
+ + + + +
虚位以待
+
虚位以待
+
ID:0
+
ID:0
+
0K
+
+
+ + + + +
虚位以待
+
虚位以待
+
ID:0
+
ID:0
+
0K
+
+
+ +
More
+
+
+
+ +
+
+ +
TOP1
+
+
+
Top 1 user on the weekly list can get the following rewards
+
+ + +
+
+ +
TOP2
+
Top 2 user on the weekly list can get the following rewards
+
+ + +
+
+ +
TOP3
+
Top 3 user on the weekly list can get the following rewards
+
+ + +
+
+
+
+
+ +
+
+ +
Rules
+
+

1. Event time: Monday 0:00-Sunday 23:59 (GMT+3)

+

2. Send 1 coin CP gift to get 1 love value. The more gifts you send, the more love value you get.

+

3. The top three users on the weekly statistical list will get generous gifts.

+

4. Recharge agent users do not participate in this event.

+

5. This event has nothing to do with Google and Apple.

+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/2024-cpActive/js/index.js b/view/molistar/activity/2024-cpActive/js/index.js new file mode 100644 index 0000000..24c4cc7 --- /dev/null +++ b/view/molistar/activity/2024-cpActive/js/index.js @@ -0,0 +1,363 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +let env = EnvCheck(); +if (env == 'test') { + new VConsole(); +} +// 封裝layer消息提醒框 +let layerIndex +var langReplace; +var localLang; +const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => { + layer.open({ + type: 2, + shadeClose: false, + content, + success(e) { + layerIndex = $(e).attr('index') + } + }) +} +const hideLoading = (index) => { + layer.close(index) +} +const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => { + layer.open({ + content, + time, + skin: 'msg' + }) +} +var countupTime; +var thisWeekCpRankTop3 = [] +var thisWeekCpRank = [] +// 初始化函數 +$(function () { + getInfoFromClient(); + fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 + setTimeout(function () { + // 頁面全屏 + if (browser.app) { + if (browser.android) { + window.androidJsObj.initShowNav(false) + } else { + window.webkit.messageHandlers.initShowNav.postMessage(0) + } + }; + // 頂部返回事件 + $('.back img').click(() => { + if (browser.android) { + window.androidJsObj.closeWebView() + } else { + window.webkit.messageHandlers.closeWebView.postMessage(null) + } + }) + fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 + langReplace = window.lang.replace; + localLang = window.lang; + translateFun() + get(); + var audio = document.getElementById("musics"); + // 尝试自动播放音频 + audio.play().then(function () { + // 如果自动播放成功 + $('.header .music').show(); + console.log('成功'); + }).catch(function (error) { + $('.header .notOpen').show(); + console.log('失败'); + }) + }, 100) +}) +function translateFun() { + var langReplace = window.lang.replace; + var localLang = window.lang; + // $('.text1').text(langReplace(localLang.demoModule.text1)); +} +// 处理SVGA +document.addEventListener('DOMContentLoaded', function () { + function loadSVGA(containerId, svgaPath) { + var container = document.getElementById(containerId); + var player = new SVGA.Player(container); + + var parser = new SVGA.Parser(); + parser.load(svgaPath, function (videoItem) { + player.setVideoItem(videoItem); + player.startAnimation(); + }); + } + loadSVGA('ts1', './svga/ts1.svga'); + loadSVGA('ts2', './svga/ts2.svga'); + loadSVGA('ts3', './svga/ts3.svga'); +}); +// 接口 +function get() { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/activity/h5/cp/rank', + success(res) { + if (res.code === 200) { + // 渲染倒计时 + countup(res.data.endTime - res.timestamp); + // 处理摩天轮榜单 + res.data.topCpList.forEach((res, i) => { + $(`.header .carousel .carousel_in${i + 1} .tx1`).attr("src", res.leftAvatar); + $(`.header .carousel .carousel_in${i + 1} .tx2`).attr("src", res.rightAvatar); + }) + // 处理第一个tab的榜单 + $('.contentBox .content').remove(); + var squareCpListStr = ''; + res.data.squareCpList.forEach((res, i) => { + squareCpListStr += ` +
+ +
${dateFormat(res.beginDate, 'yyyy.MM.dd')}-${dateFormat(res.beginDate, 'yyyy.MM.dd')}
+
${squareCpListStrFun(res.cpUserVos)}
+
+ ` + }) + $('.contentBox').append(squareCpListStr); + // 处理第二个榜单 + thisWeekCpRankTop3 = splitArray(res.data.thisWeekCpRank).firstThree; + thisWeekCpRank = splitArray(res.data.thisWeekCpRank).pages; + // 处理前三 + var listTo3 = thisWeekCpRankTop3; + if (listTo3.length < 3) { + let arr = new Array(3 - listTo3.length).fill({ + leftAvatar: './images/null.png', + rightAvatar: './images/null.png', + leftNick: "", + rightNick: "", + leftErbanNo: "", + rightErbanNo: "", + totalNum: "" + }) + listTo3.push(...arr) + } + listTo3.forEach((res, i) => { + $(`.page2 .content .topBox .top${i + 1} .txL`).attr('src', res.leftAvatar); + $(`.page2 .content .topBox .top${i + 1} .txR`).attr('src', res.rightAvatar); + $(`.page2 .content .topBox .top${i + 1} .nameL`).text(res.leftNick); + $(`.page2 .content .topBox .top${i + 1} .nameR`).text(res.rightNick); + $(`.page2 .content .topBox .top${i + 1} .idL`).text(res.leftErbanNo == "" ? "" : 'ID:' + res.leftErbanNo); + $(`.page2 .content .topBox .top${i + 1} .idR`).text(res.rightErbanNo == "" ? "" : 'ID:' + res.rightErbanNo); + $(`.page2 .content .topBox .top${i + 1} .sclore`).html(`${unitProcessingAr(res.totalNum, 2)}`) + }) + // 非前三 + $('.page2 .content ul li').remove(); + var str = '' + if (thisWeekCpRank[0]) { + thisWeekCpRank[0].forEach(res => { + str += ` +
  • +
    ${res.rank}
    +
    + +

    ${res.leftNick}

    +
    + +
    + +

    ${res.rightNick}

    +
    +
    + + ${unitProcessingAr(res.totalNum, 2)} +
    +
    • + ` + }) + $('.page2 .content ul').append(str); + } + if (thisWeekCpRank.length <= 1) { + $('.page2 .content .more').hide(); + } + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error(err) { + hideLoading(layerIndex) + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} +function squareCpListStrFun(arr) { + var str = ''; + var listTo3 = arr.slice(0, 3); + if (listTo3.length < 3) { + let arr = new Array(3 - listTo3.length).fill({ + leftAvatar: './images/null.png', + rightAvatar: './images/null.png', + leftNick: "", + rightNick: "", + leftErbanNo: "", + rightErbanNo: "", + totalNum: "" + }) + listTo3.push(...arr) + } + listTo3.forEach((res, i) => { + str += ` +
    + + + + +
    ${res.leftNick}
    +
    ${res.rightNick}
    +
    ${res.leftErbanNo == "" ? '' : "ID:" + res.leftErbanNo}
    +
    ${res.rightErbanNo == "" ? '' : "ID:" + res.rightErbanNo}
    +
    ${unitProcessingAr(res.totalNum, 2)}
    +
    + `}) + return str; +} +function splitArray(arr) { + // 获取前三个元素 + const firstThree = arr.slice(0, 3); + + // 剩余的元素 + const remainingElements = arr.slice(3); + + // 将剩余元素每10个分成一组 + const pages = []; + for (let i = 0; i < remainingElements.length; i += 10) { + const chunk = remainingElements.slice(i, i + 10); + pages.push(chunk); + } + + return { firstThree, pages }; +} +// 倒計時 +function countup(leftTime) { + clearTimeout(countupTime) + //獲取當前時間 + // var now = nowTime; + var d = 0; + var h = 0; + var m = 0; + var s = 0; + //定義變數 d,h,m,s保存倒計時的時間 + var d, h, m, s; + //遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果 + if (leftTime > 0) { + d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24)); + h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24)); + m = getzf(Math.floor(leftTime / 1000 / 60 % 60)); + s = getzf(Math.floor(leftTime / 1000 % 60)); + //將倒計時賦值到div中 + $('.header .timeBox .day b').text(d); + $('.header .timeBox .hour b').text(h); + $('.header .timeBox .min b').text(m); + $('.header .timeBox .sec b').text(s); + } else { + // get(); + } + if (leftTime > 0) { + leftTime = leftTime - 1000; + } + countupTime = setTimeout(function () { + countup(leftTime); + }, 1000); +} +//补0操作 +function getzf(num) { + if (parseInt(num) < 10) { + num = '0' + num; + } + return num; +} +// 打开音乐 +$('.header .music').click(function () { + $('.header .music').hide(); + $('.header .notOpen').show(); + var audio = document.getElementById("musics"); + audio.pause(); +}) +// 关闭音乐 +$('.header .notOpen').click(function () { + $('.header .notOpen').hide(); + $('.header .music').show(); + var audio = document.getElementById("musics"); + audio.play(); +}) +// tab切换 +$('.tabBox div').click(function () { + var i = $(this).index() + 1; + $(this).addClass('act').siblings().removeClass('act') + $('.page1,.page2,.page3').hide(); + $(`.page${i}`).show(); +}) +// 关闭规则 +$('.header .rule_icon').click(function () { + $('.rule').show(); + bodyScroolFun(true); +}) +// 关闭规则 +$('.rule .ruleIn .close').click(function () { + $('.rule').hide(); + bodyScroolFun(false); +}) + +// 打开mp4弹窗 +$('.page3 .content .topBox1 .bo').click(function () { + var video = document.getElementById('zjvideo1'); + video.play(); + bodyScroolFun(true); + $('.zjvideo1').show(); +}) +// 打开mp4弹窗 +$('.page3 .content .topBox1 .bo2').click(function () { + var video = document.getElementById('xzvideo1'); + video.play(); + bodyScroolFun(true); + $('.xzvideo1').show(); +}) +// 打开mp4弹窗 +$('.page3 .content .topBox2 .bo').click(function () { + var video = document.getElementById('zjvideo2'); + video.play(); + bodyScroolFun(true); + $('.zjvideo2').show(); +}) +// 打开mp4弹窗 +$('.page3 .content .topBox2 .bo2').click(function () { + var video = document.getElementById('xzvideo2'); + video.play(); + bodyScroolFun(true); + $('.xzvideo2').show(); +}) +// 打开mp4弹窗 +$('.page3 .content .topBox3 .bo').click(function () { + var video = document.getElementById('zjvideo3'); + video.play(); + bodyScroolFun(true); + $('.zjvideo3').show(); +}) +// 打开mp4弹窗 +$('.page3 .content .topBox3 .bo2').click(function () { + var video = document.getElementById('xzvideo3'); + video.play(); + bodyScroolFun(true); + $('.xzvideo3').show(); +}) +// 关闭mp4弹窗 +$('.zjvideo1 .close,.xzvideo1 .close,.zjvideo2 .close,.xzvideo2 .close,.zjvideo3 .close,.xzvideo3 .close').click(function () { + var video = document.getElementById('zjvideo1'); + var video1 = document.getElementById('xzvideo1'); + var video2 = document.getElementById('zjvideo2'); + var video3 = document.getElementById('xzvideo2'); + var video4 = document.getElementById('zjvideo3'); + var video5 = document.getElementById('xzvideo3'); + video.pause(); + video1.pause(); + video2.pause(); + video3.pause(); + video4.pause(); + video5.pause(); + bodyScroolFun(false); + $('.zjvideo1,.xzvideo1,.zjvideo2,.xzvideo2,.zjvideo3,.xzvideo3').hide(); +}) \ No newline at end of file diff --git a/view/molistar/activity/2024-cpActive/js/wow.js b/view/molistar/activity/2024-cpActive/js/wow.js new file mode 100644 index 0000000..462da4a --- /dev/null +++ b/view/molistar/activity/2024-cpActive/js/wow.js @@ -0,0 +1,46 @@ +var baba = document.querySelector('body'); +baba.addEventListener('click', function (e) { + // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" }); + tianJia(e); +}) + +var erZi = []; +function tianJia (e) { + var sunZi = document.createElement('div'); + sunZi.className = 'rabbit'; + // sunZi.innerHTML = ''; + sunZi.innerHTML = ''; + baba.appendChild(sunZi); + erZi.push({ + el: sunZi, + top: e.pageY - 30, + left: e.pageX - 20, + opacity: 1, + scale: 1, + color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})` + }); + move(); +}; +function move () { + for (var i = 0; i < erZi.length; i++) { + if (erZi[i].opacity <= 0) { + baba.removeChild(erZi[i].el); + erZi.splice(i, 1); + return; + } + erZi[i].top--; + erZi[i].opacity = erZi[i].opacity - 0.02; + // erZi[i].scale = erZi[i].scale + 0.0001; + erZi[i].el.style.cssText = ` + top: ${erZi[i].top}px; + left: ${erZi[i].left}px; + color: ${erZi[i].color}; + opacity: ${erZi[i].opacity}; + transform: scale(${erZi[i].scale}); + position: absolute; + ` + + } + window.requestAnimationFrame(move); + // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" }); +} \ No newline at end of file diff --git a/view/molistar/activity/2024-cpActive/local/ar.js b/view/molistar/activity/2024-cpActive/local/ar.js new file mode 100644 index 0000000..a5a200f --- /dev/null +++ b/view/molistar/activity/2024-cpActive/local/ar.js @@ -0,0 +1,9 @@ +// 阿拉伯 +langAr = { + // 模块 + demoModule: { + layerIndex1: `جاري التحميل...`, + layerIndex2: `نجاح`, + layerIndex3: `خطأ في الشبكة`, + } +} \ No newline at end of file diff --git a/view/molistar/activity/2024-cpActive/local/en.js b/view/molistar/activity/2024-cpActive/local/en.js new file mode 100644 index 0000000..71dfb6e --- /dev/null +++ b/view/molistar/activity/2024-cpActive/local/en.js @@ -0,0 +1,7 @@ +langEn = { + demoModule: { + layerIndex1: `Loading...`, + layerIndex2: `Success`, + layerIndex3: `Network error`, + }, +} diff --git a/view/molistar/activity/2024-cpActive/local/zh.js b/view/molistar/activity/2024-cpActive/local/zh.js new file mode 100644 index 0000000..9f26e52 --- /dev/null +++ b/view/molistar/activity/2024-cpActive/local/zh.js @@ -0,0 +1,9 @@ +// 中文 +langZh = { + // 模塊 + demoModule: { + layerIndex1: `加载中...`, + layerIndex2: `成功`, + layerIndex3: `网络错误`, + } +} \ No newline at end of file diff --git a/view/molistar/activity/2024-cpActive/mp4/topBox1.png b/view/molistar/activity/2024-cpActive/mp4/topBox1.png new file mode 100644 index 0000000..f7d41c4 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/topBox1.png differ diff --git a/view/molistar/activity/2024-cpActive/mp4/topBox2.png b/view/molistar/activity/2024-cpActive/mp4/topBox2.png new file mode 100644 index 0000000..0c28d07 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/topBox2.png differ diff --git a/view/molistar/activity/2024-cpActive/mp4/topBox3.png b/view/molistar/activity/2024-cpActive/mp4/topBox3.png new file mode 100644 index 0000000..6a08916 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/topBox3.png differ diff --git a/view/molistar/activity/2024-cpActive/mp4/xz1.mp4 b/view/molistar/activity/2024-cpActive/mp4/xz1.mp4 new file mode 100644 index 0000000..e5d8b51 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/xz1.mp4 differ diff --git a/view/molistar/activity/2024-cpActive/mp4/xz2.mp4 b/view/molistar/activity/2024-cpActive/mp4/xz2.mp4 new file mode 100644 index 0000000..0ca67de Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/xz2.mp4 differ diff --git a/view/molistar/activity/2024-cpActive/mp4/xz3.mp4 b/view/molistar/activity/2024-cpActive/mp4/xz3.mp4 new file mode 100644 index 0000000..0d45f8f Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/xz3.mp4 differ diff --git a/view/molistar/activity/2024-cpActive/mp4/zj1.mp4 b/view/molistar/activity/2024-cpActive/mp4/zj1.mp4 new file mode 100644 index 0000000..e060339 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/zj1.mp4 differ diff --git a/view/molistar/activity/2024-cpActive/mp4/zj23.mp4 b/view/molistar/activity/2024-cpActive/mp4/zj23.mp4 new file mode 100644 index 0000000..34d2b94 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/mp4/zj23.mp4 differ diff --git a/view/molistar/activity/2024-cpActive/music/music.mp3 b/view/molistar/activity/2024-cpActive/music/music.mp3 new file mode 100644 index 0000000..d20f36e Binary files /dev/null and b/view/molistar/activity/2024-cpActive/music/music.mp3 differ diff --git a/view/molistar/activity/2024-cpActive/svga/ts1.svga b/view/molistar/activity/2024-cpActive/svga/ts1.svga new file mode 100644 index 0000000..4e90a20 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/svga/ts1.svga differ diff --git a/view/molistar/activity/2024-cpActive/svga/ts2.svga b/view/molistar/activity/2024-cpActive/svga/ts2.svga new file mode 100644 index 0000000..39ab425 Binary files /dev/null and b/view/molistar/activity/2024-cpActive/svga/ts2.svga differ diff --git a/view/molistar/activity/2024-cpActive/svga/ts3.svga b/view/molistar/activity/2024-cpActive/svga/ts3.svga new file mode 100644 index 0000000..68ce25d Binary files /dev/null and b/view/molistar/activity/2024-cpActive/svga/ts3.svga differ