diff --git a/view/peko/activity/2024-whiteLove/css/index.css b/view/peko/activity/2024-whiteLove/css/index.css new file mode 100644 index 0000000..52d9374 --- /dev/null +++ b/view/peko/activity/2024-whiteLove/css/index.css @@ -0,0 +1,2024 @@ +html, +body { + width: 100%; + background: #A89AFF; +} + +.back { + position: fixed; + top: 0.93333rem; + left: 0.45333rem; + z-index: 99; + width: 0.82667rem; + height: 0.82667rem; +} + +.back img { + width: 100%; + height: 100%; +} + +.back p { + color: #fff; + font-size: 0.42667rem; + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: 0.82667rem; +} + +.header { + width: 10rem; + height: 10rem; + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto 0rem; +} + +.header .rule_icon { + width: 0.82667rem; + height: 2.34667rem; + position: absolute; + top: 2.4rem; + right: 0; +} + +.tab { + width: 9.6rem; + height: 1.49333rem; + margin: 0 auto 0rem; + display: flex; + justify-content: space-between; +} + +.tab div { + width: 3.2rem; + height: 1.38667rem; + line-height: 1.46667rem; + text-align: center; + color: #521C98; + font-size: 0.42667rem; + font-weight: 500; + background: url(../images/tab2.png) no-repeat; + background-size: 100% 100%; +} + +.tab .act { + height: 1.49333rem; + line-height: 1.49333rem; + background: url(../images/tab1.png) no-repeat; + background-size: 100% 100%; + color: #663803; +} + +.page1 .bg1 { + width: 10rem; + height: 15.14667rem; + background: url(../images/page1_bg1.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; +} + +.page1 .bg1 .title { + width: 3.73333rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.38667rem; +} + +.page1 .bg1 .loveBox { + width: 3.38667rem; + height: 3.33333rem; + left: 50%; + transform: translateX(-50%); + top: 5.86rem; + position: absolute; +} + +.page1 .bg1 .mp { + width: 1.93333rem; + height: 0.53333rem; + position: absolute; + left: 50%; + transform: translateX(-58%); + top: 7.09333rem; +} + +.page1 .bg1 p { + position: absolute; + width: 100%; + left: 50%; + transform: translateX(-50%); + text-align: center; + font-size: 0.32rem; + font-weight: 500; + color: #521C98; +} + +.page1 .bg1 .p1 { + top: 2.37333rem; +} + +.page1 .bg1 .p2 { + top: 2.8rem; +} + +.page1 .bg1 .p3 { + top: 8.74667rem; +} + +.page1 .bg1 .p4 { + width: 6.61333rem; + top: 13.44rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + line-height: 0.45rem; +} + +.page1 .bg1 .giftList { + width: 2.08rem; + height: 2.08rem; + position: absolute; +} + +.page1 .bg1 .giftList .qp { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.page1 .bg1 .giftList .gift { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.page1 .bg1 .giftList .giftName { + width: 100%; + height: 0.45333rem; + line-height: 0.45333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.65333rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; +} + +.page1 .bg1 .giftList .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; +} + +.page1 .bg1 .filter { + filter: grayscale(100%); +} + +.page1 .bg1 .filter .giftName { + color: #E2E2E2; +} + +.page1 .bg1 .filter .giftVAlue { + color: #99999A; +} + +.page1 .bg1 .giftList1 { + left: 2.32rem; + top: 3.78667rem; +} + +.page1 .bg1 .giftList2 { + left: 6.41333rem; + top: 3.78667rem; +} + +.page1 .bg1 .giftList3 { + left: 6.82667rem; + top: 6.69333rem; +} + +.page1 .bg1 .giftList4 { + left: 5.57333rem; + top: 9.6rem; +} + +.page1 .bg1 .giftList5 { + left: 2.34667rem; + top: 9.6rem; +} + +.page1 .bg1 .giftList6 { + left: 1.09333rem; + top: 6.8rem; +} + +.page1 .bg2 { + width: 10rem; + height: 13.86667rem; + background: url(../images/page1_bg2.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto 0.48rem; +} + +.page1 .bg2 .title { + width: 3.73333rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.44rem; +} + +.page1 .bg2 ul { + width: 9.14667rem; + height: 9.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.2rem; + overflow-y: scroll; +} + +.page1 .bg2 ul::-webkit-scrollbar { + width: 0; + display: none; +} + +.page1 .bg2 ul li { + width: 100%; + height: 0.96rem; + line-height: 0.94667rem; + display: flex; + justify-content: space-between; +} + +.page1 .bg2 ul li div { + width: 50%; + text-align: center; + color: #521C98; + font-weight: 400; +} + +.page1 .bg2 ul li .left { + line-height: normal; +} + +.page1 .bg2 ul li .left p { + color: #521C98; + font-size: 0.32rem; + margin-bottom: 0.02667rem; +} + +.page1 .bg2 ul li .left span { + font-size: 0.26667rem; +} + +.page1 .bg2 ul .liTitle div { + font-size: 0.37333rem; + font-weight: 500; + color: #521C98; +} + +.page1 .bg2 ul .null { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: 0.37333rem; + font-weight: 500; + color: #521C98; + text-align: center; + width: 100%; +} + +.page1 .bg2 ul .null div { + width: 100%; +} + +.page2 { + display: none; +} + +.page2 .box { + width: 10rem; + height: 13.14667rem; + margin: 0 auto 1.06667rem; + background: url(../images/page2Bg.png) no-repeat; + background-size: 100% 100%; + position: relative; +} + +.page2 .box .title { + width: 7.84rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.49333rem; +} + +.page2 .box .page2Buy_icon { + width: 2.10667rem; + height: 0.96rem; + position: absolute; + right: 0; + top: 3.89333rem; + z-index: 2; +} + +.page2 .box i { + font-style: normal; + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.page2 .box .i1 { + height: 0.56rem; + line-height: 0.56rem; + border-radius: 0.56rem; + text-align: center; + color: #EAE7FB; + font-size: 0.32rem; + top: 2.53333rem; + background: #9789E9; + padding: 0 0.26667rem; +} + +.page2 .box .i2 { + width: 6.61333rem; + height: 0.90667rem; + text-align: center; + color: #521C98; + font-size: 0.32rem; + line-height: 0.37507rem; + top: 3.33333rem; + font-weight: 500; +} + +.page2 .box .i3 { + width: 100%; + text-align: center; + color: #A78CD2; + font-size: 0.32rem; + top: 4.26667rem; + font-weight: 500; +} + +.page2 .box .tasks { + width: 8.72rem; + height: 3.36rem; + position: absolute; + top: 5.25333rem; + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: 0.21333rem; +} + +.page2 .box .tasks .giftBox { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0.37333rem; + top: 0.32rem; +} + +.page2 .box .tasks .giftBox .qp { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.page2 .box .tasks .giftBox .gift { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.page2 .box .tasks .giftBox .giftName { + width: 100%; + height: 0.45333rem; + line-height: 0.45333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.65333rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; +} + +.page2 .box .tasks .giftBox .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; +} + +.page2 .box .tasks p { + position: absolute; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; + left: 2.82667rem; +} + +.page2 .box .tasks .p1 { + top: 0.45333rem; +} + +.page2 .box .tasks .p2 { + top: 1.22667rem; + color: #7347AD; +} + +.page2 .box .tasks .p3 { + top: 2.34667rem; +} + +.page2 .box .tasks .line { + width: 4.42667rem; + height: 0.32rem; + line-height: 0.32rem; + border-radius: 0.32rem; + position: absolute; + left: 4rem; + top: 1.2rem; + background: #7466c4; +} + +.page2 .box .tasks .line span { + width: 10%; + height: 0.26667rem; + border-radius: 0.26667rem; + position: absolute; + left: 0.02667rem; + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); +} + +.page2 .box .tasks .line .i { + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: 0.32rem; + width: auto; + text-align: right; +} + +.page2 .box .tasks .buy { + width: 3.06667rem; + height: 0.74667rem; + line-height: 0.74667rem; + vertical-align: middle; + text-align: center; + color: #663803; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.18667rem; + left: 5.46667rem; + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; +} + +.page2 .box .tasks .buy img { + display: inline-block; + width: 0.64rem; + height: 0.64rem; +} + +.page2 .box .tasks2 { + width: 8.72rem; + height: 3.36rem; + position: absolute; + top: 8.93333rem; + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: 0.21333rem; +} + +.page2 .box .tasks2 .giftBox { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0.37333rem; + top: 0.32rem; +} + +.page2 .box .tasks2 .giftBox .qp { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.page2 .box .tasks2 .giftBox .gift { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.page2 .box .tasks2 .giftBox .giftName { + width: 100%; + height: 0.45333rem; + line-height: 0.45333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.65333rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; +} + +.page2 .box .tasks2 .giftBox .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; +} + +.page2 .box .tasks2 p { + position: absolute; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; + left: 2.82667rem; +} + +.page2 .box .tasks2 .p1 { + top: 0.45333rem; +} + +.page2 .box .tasks2 .p2 { + top: 1.22667rem; + color: #7347AD; +} + +.page2 .box .tasks2 .p3 { + top: 2.34667rem; +} + +.page2 .box .tasks2 .line { + width: 4.42667rem; + height: 0.32rem; + line-height: 0.32rem; + border-radius: 0.32rem; + position: absolute; + left: 4rem; + top: 1.2rem; + background: #7466c4; +} + +.page2 .box .tasks2 .line span { + width: 98.8%; + height: 0.26667rem; + border-radius: 0.26667rem; + position: absolute; + left: 0.02667rem; + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); +} + +.page2 .box .tasks2 .line .i { + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: 0.32rem; + width: auto; + text-align: right; +} + +.page2 .box .tasks2 .buy { + width: 3.06667rem; + height: 0.74667rem; + line-height: 0.74667rem; + vertical-align: middle; + text-align: center; + color: #663803; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.18667rem; + left: 5.46667rem; + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; +} + +.page2 .box .tasks2 .buy img { + display: inline-block; + width: 0.64rem; + height: 0.64rem; +} + +.page3 { + display: none; +} + +.page3 .box { + width: 10rem; + height: 10.66667rem; + margin: 0 auto 0rem; + background: url(../images/page3boxBg.png) no-repeat; + background-size: 100% 100%; + position: relative; +} + +.page3 .box .page2Buy_icon { + width: 2.10667rem; + height: 0.96rem; + position: absolute; + right: 0; + top: 3.89333rem; + z-index: 2; +} + +.page3 .box i { + font-style: normal; + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.page3 .box .i2 { + width: 6.61333rem; + height: 0.90667rem; + text-align: center; + color: #521C98; + font-size: 0.32rem; + line-height: 0.46667rem; + top: 1.26667rem; + font-weight: 500; +} + +.page3 .box .tasks { + width: 8.72rem; + height: 3.36rem; + position: absolute; + top: 2.77333rem; + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: 0.21333rem; +} + +.page3 .box .tasks .giftBox { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0.37333rem; + top: 0.32rem; +} + +.page3 .box .tasks .giftBox .qp { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/page3ts.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.page3 .box .tasks .giftBox .gift { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.page3 .box .tasks .giftBox .giftName { + width: 100%; + height: 0.45333rem; + line-height: 0.45333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.65333rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; +} + +.page3 .box .tasks .giftBox .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; +} + +.page3 .box .tasks p { + position: absolute; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; + left: 2.82667rem; +} + +.page3 .box .tasks .p1 { + top: 0.45333rem; +} + +.page3 .box .tasks .p2 { + top: 1.22667rem; + color: #7347AD; +} + +.page3 .box .tasks .p3 { + top: 2.34667rem; +} + +.page3 .box .tasks .line { + width: 4.42667rem; + height: 0.32rem; + line-height: 0.32rem; + border-radius: 0.32rem; + position: absolute; + left: 4rem; + top: 1.2rem; + background: #7466c4; +} + +.page3 .box .tasks .line span { + width: 10%; + height: 0.26667rem; + border-radius: 0.26667rem; + position: absolute; + left: 0.02667rem; + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); +} + +.page3 .box .tasks .line .i { + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: 0.32rem; + width: auto; + text-align: right; +} + +.page3 .box .tasks .buy { + width: 2.13333rem; + height: 0.74667rem; + line-height: 0.74667rem; + vertical-align: middle; + text-align: center; + color: #663803; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.18667rem; + left: 6.26667rem; + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; +} + +.page3 .box .tasks .buy img { + display: inline-block; + width: 0.64rem; + height: 0.64rem; +} + +.page3 .box .tasks .act { + background: url(../images/buy_z.png) no-repeat; + background-size: 100% 100%; + color: #fff; +} + +.page3 .box .tasks2 { + width: 8.72rem; + height: 3.36rem; + position: absolute; + top: 6.45333rem; + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: 0.21333rem; +} + +.page3 .box .tasks2 .giftBox { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0.37333rem; + top: 0.32rem; +} + +.page3 .box .tasks2 .giftBox .qp { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/page3qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.page3 .box .tasks2 .giftBox .gift { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.page3 .box .tasks2 .giftBox .giftName { + width: 100%; + height: 0.45333rem; + line-height: 0.45333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.65333rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; +} + +.page3 .box .tasks2 .giftBox .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; +} + +.page3 .box .tasks2 p { + position: absolute; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; + left: 2.82667rem; +} + +.page3 .box .tasks2 .p1 { + top: 0.45333rem; +} + +.page3 .box .tasks2 .p2 { + top: 1.22667rem; + color: #7347AD; +} + +.page3 .box .tasks2 .p3 { + top: 2.34667rem; +} + +.page3 .box .tasks2 .line { + width: 4.42667rem; + height: 0.32rem; + line-height: 0.32rem; + border-radius: 0.32rem; + position: absolute; + left: 4rem; + top: 1.2rem; + background: #7466c4; +} + +.page3 .box .tasks2 .line span { + width: 10%; + height: 0.26667rem; + border-radius: 0.26667rem; + position: absolute; + left: 0.02667rem; + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); +} + +.page3 .box .tasks2 .line .i { + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: 0.32rem; + width: auto; + text-align: right; +} + +.page3 .box .tasks2 .buy { + width: 2.13333rem; + height: 0.74667rem; + line-height: 0.74667rem; + vertical-align: middle; + text-align: center; + color: #663803; + font-size: 0.37333rem; + font-weight: 500; + position: absolute; + top: 2.18667rem; + left: 6.26667rem; + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; +} + +.page3 .box .tasks2 .buy img { + display: inline-block; + width: 0.64rem; + height: 0.64rem; +} + +.page3 .box .tasks2 .act { + background: url(../images/buy_z.png) no-repeat; + background-size: 100% 100%; + color: #fff; +} + +.page3 .top3 { + width: 10rem; + height: 10.45333rem; + margin: 0 auto 0.21333rem; + position: relative; + background: url(../images/pageTop3.png) no-repeat; + background-size: 100% 100%; +} + +.page3 .top3 .title { + width: 100%; + text-align: center; + font-family: Source Han Serif CN, Source Han Serif CN; + text-shadow: 0.02667rem 0.05333rem 0.10667rem rgba(93, 67, 196, 0.8); + color: #fff; + font-size: 0.58667rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.46667rem; +} + +.page3 .top3 .rule_icon { + width: 2.10667rem; + height: 0.96rem; + position: absolute; + right: 0; + top: 1.57333rem; + z-index: 3; +} + +.page3 .top3 .no1 { + width: 8.93333rem; + height: 3.09333rem; + position: absolute; + top: 2.02667rem; + left: 50%; + transform: translateX(-50%); +} + +.page3 .top3 .no1 .ts { + width: 100%; + height: 100%; + z-index: 2; + position: absolute; + left: 0; + top: 0; +} + +.page3 .top3 .no1 .leftlogo { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + top: 1.04rem; + left: 2.77333rem; +} + +.page3 .top3 .no1 .rightlogo { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + top: 1.04rem; + right: 2.77333rem; +} + +.page3 .top3 .no1 .name { + width: 4.53333rem; + position: absolute; + bottom: -0.45333rem; + left: 50%; + transform: translateX(-50%); + color: #521C98; + font-weight: 400; + font-family: PingFang SC, PingFang SC; + font-size: 0.29333rem; + text-align: center; +} + +.page3 .top3 .no1 .name i { + color: #9E82CB; + font-style: normal; +} + +.page3 .top3 .no1 .score { + color: #FFFFFF; + font-size: 0.32rem; + font-weight: 500; + background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%); + width: 2.8rem; + height: 0.45333rem; + white-space: nowrap; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.01333rem; + text-align: center; + line-height: 0.45333rem; +} + +.page3 .top3 .no2 { + width: 4.16rem; + height: 1.92rem; + position: absolute; + top: 6.45333rem; + left: 0.74667rem; +} + +.page3 .top3 .no2 .ts { + width: 100%; + height: 100%; + z-index: 2; + position: absolute; + left: 0; + top: 0; +} + +.page3 .top3 .no2 .leftlogo { + width: 1.28rem; + height: 1.28rem; + border-radius: 50%; + position: absolute; + top: 0.4rem; + left: 0.72rem; +} + +.page3 .top3 .no2 .rightlogo { + width: 1.28rem; + height: 1.28rem; + border-radius: 50%; + position: absolute; + top: 0.4rem; + right: 0.72rem; +} + +.page3 .top3 .no2 .name { + width: 4.53333rem; + position: absolute; + bottom: -0.45333rem; + left: 50%; + transform: translateX(-50%); + color: #521C98; + font-weight: 400; + font-family: PingFang SC, PingFang SC; + font-size: 0.29333rem; + text-align: center; +} + +.page3 .top3 .no2 .name i { + color: #9E82CB; + font-style: normal; +} + +.page3 .top3 .no2 .score { + color: #FFFFFF; + font-size: 0.32rem; + font-weight: 500; + background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%); + width: 2.8rem; + height: 0.45333rem; + white-space: nowrap; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.01333rem; + text-align: center; + line-height: 0.45333rem; +} + +.page3 .top3 .no3 { + width: 4.16rem; + height: 1.92rem; + position: absolute; + top: 6.45333rem; + right: 0.74667rem; +} + +.page3 .top3 .no3 .ts { + width: 100%; + height: 100%; + z-index: 2; + position: absolute; + left: 0; + top: 0; +} + +.page3 .top3 .no3 .leftlogo { + width: 1.28rem; + height: 1.28rem; + border-radius: 50%; + position: absolute; + top: 0.38667rem; + left: 0.76rem; +} + +.page3 .top3 .no3 .rightlogo { + width: 1.28rem; + height: 1.28rem; + border-radius: 50%; + position: absolute; + top: 0.38667rem; + right: 0.74667rem; +} + +.page3 .top3 .no3 .name { + width: 4.53333rem; + position: absolute; + bottom: -0.45333rem; + left: 50%; + transform: translateX(-50%); + color: #521C98; + font-weight: 400; + font-family: PingFang SC, PingFang SC; + font-size: 0.29333rem; + text-align: center; +} + +.page3 .top3 .no3 .name i { + color: #9E82CB; + font-style: normal; +} + +.page3 .top3 .no3 .score { + color: #FFFFFF; + font-size: 0.32rem; + font-weight: 500; + background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%); + width: 2.8rem; + height: 0.45333rem; + white-space: nowrap; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -1.01333rem; + text-align: center; + line-height: 0.45333rem; +} + +.page3 ul { + width: 9.57333rem; + margin: 0 auto 2.13333rem; +} + +.page3 ul li { + width: 100%; + height: 1.86667rem; + background: url(../images/page3Li.png) no-repeat; + background-size: 100% 100%; + margin-bottom: 0.16rem; + position: relative; + box-sizing: border-box; + padding: 0 0.64rem; +} + +.page3 ul li .num { + width: 0.96rem; + height: 0.96rem; + float: left; + margin-top: 0.45333rem; + text-align: center; + line-height: 0.96rem; + color: #521C98; + font-size: 0.37333rem; + font-weight: 500; + background: url(../images/love_z.png) no-repeat; + background-size: 100% 100%; +} + +.page3 ul li .leftTx { + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + position: absolute; + left: 1.81333rem; + top: 0.4rem; + border: 0.02667rem solid #fff; + z-index: 2; + box-sizing: border-box; +} + +.page3 ul li .rightTx { + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + position: absolute; + left: 2.66667rem; + top: 0.4rem; + border: 0.02667rem solid #fff; + box-sizing: border-box; +} + +.page3 ul li .leftName { + width: 2.13333rem; + color: #521C98; + font-size: 0.34667rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 3.94667rem; + top: 0.48rem; +} + +.page3 ul li .rightName { + width: 2.13333rem; + color: #521C98; + font-size: 0.34667rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 3.94667rem; + top: 0.98667rem; +} + +.page3 ul li .score { + float: right; + height: 100%; + line-height: 1.86667rem; + color: #521C98; + font-size: 0.42667rem; + font-weight: 500; +} + +.page3 .my { + position: fixed; + width: 10rem; + height: 2.2rem; + left: 50%; + transform: translateX(-50%); + bottom: 0rem; + z-index: 99; + background: url(../images/myBg2.png) no-repeat; + background-size: 100% 100%; + transition: all .4s; +} + +.page3 .my .icon { + width: 0.85333rem; + height: 1.22667rem; + position: absolute; + right: 0.42667rem; + top: -0.54667rem; +} + +.page3 .my .scroll { + overflow: hidden; + height: 7.74667rem; + margin-top: 0.4rem; +} + +.page3 .my .myBox { + width: 100%; + height: 1.86667rem; + margin-bottom: 0.16rem; + position: relative; + box-sizing: border-box; + padding: 0 0.64rem; +} + +.page3 .my .myBox .num { + width: 0.96rem; + height: 0.96rem; + float: left; + margin-top: 0.45333rem; + text-align: center; + line-height: 0.96rem; + color: #663803; + font-size: 0.37333rem; + font-weight: 500; + background: url(../images/love_h.png) no-repeat; + background-size: 100% 100%; + white-space: nowrap; +} + +.page3 .my .myBox .leftTx { + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + position: absolute; + left: 1.81333rem; + top: 0.4rem; + border: 0.02667rem solid #fff; + z-index: 2; + box-sizing: border-box; +} + +.page3 .my .myBox .rightTx { + width: 1.06667rem; + height: 1.06667rem; + border-radius: 50%; + position: absolute; + left: 2.66667rem; + top: 0.4rem; + border: 0.02667rem solid #fff; + box-sizing: border-box; +} + +.page3 .my .myBox .leftName { + width: 2.13333rem; + color: #521C98; + font-size: 0.34667rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 3.94667rem; + top: 0.48rem; +} + +.page3 .my .myBox .rightName { + width: 2.13333rem; + color: #521C98; + font-size: 0.34667rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: 3.94667rem; + top: 0.98667rem; +} + +.page3 .my .myBox .score { + float: right; + height: 100%; + line-height: 1.86667rem; + color: #521C98; + font-size: 0.42667rem; + font-weight: 500; +} + +.buyRecords { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 99; +} + +.buyRecords .buyRecords_in { + width: 10rem; + height: 13.86667rem; + background: url(../images/page1_bg2.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.buyRecords .buyRecords_in .title { + width: 3.73333rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.44rem; +} + +.buyRecords .buyRecords_in ul { + width: 9.14667rem; + height: 9.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.2rem; + overflow-y: scroll; +} + +.buyRecords .buyRecords_in ul::-webkit-scrollbar { + width: 0; + display: none; +} + +.buyRecords .buyRecords_in ul li { + width: 100%; + height: 0.96rem; + line-height: 0.94667rem; + display: flex; + justify-content: space-between; +} + +.buyRecords .buyRecords_in ul li div { + width: 50%; + text-align: center; + color: #521C98; + font-weight: 400; +} + +.buyRecords .buyRecords_in ul li .left { + line-height: normal; +} + +.buyRecords .buyRecords_in ul li .left p { + color: #521C98; + font-size: 0.32rem; + margin-bottom: 0.02667rem; +} + +.buyRecords .buyRecords_in ul li .left span { + font-size: 0.26667rem; +} + +.buyRecords .buyRecords_in ul .liTitle div { + font-size: 0.37333rem; + font-weight: 500; + color: #521C98; +} + +.buyRecords .buyRecords_in ul .null { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: 0.37333rem; + font-weight: 500; + color: #521C98; + text-align: center; + width: 100%; +} + +.buyRecords .buyRecords_in ul .null div { + width: 100%; +} + +.rule { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 99; +} + +.rule .rule_in { + width: 10rem; + height: 13.86667rem; + background: url(../images/page1_bg2.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.rule .rule_in .title { + width: 3.73333rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.44rem; +} + +.rule .rule_in ul { + width: 9.14667rem; + height: 9.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.2rem; + overflow-y: scroll; +} + +.rule .rule_in ul::-webkit-scrollbar { + width: 0; + display: none; +} + +.rule .rule_in ul li { + width: 100%; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; + line-height: 0.37333rem; + margin-bottom: 0.13333rem; + box-sizing: border-box; + padding: 0 0.61333rem; +} + +.end { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 99; +} + +.end .end_in { + width: 9.36rem; + height: 6rem; + background: url(../images/end.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.end .end_in .title { + width: 4.26667rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.26667rem; +} + +.end .end_in .but { + width: 4.8rem; + height: 1.06667rem; + text-align: center; + line-height: 1.06667rem; + color: #FFFFFF; + font-size: 0.42667rem; + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0.85333rem; + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; +} + +.failureBuy { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 99; +} + +.failureBuy .failureBuy_in { + width: 9.36rem; + height: 6rem; + background: url(../images/end.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.failureBuy .failureBuy_in .title { + width: 3.73333rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.33333rem; +} + +.failureBuy .failureBuy_in .text { + width: 100%; + text-align: center; + color: #521C98; + font-size: 0.4rem; + position: absolute; + top: 2.75rem; + left: 0; +} + +.failureBuy .failureBuy_in .but { + width: 3.68rem; + height: 1.06667rem; + text-align: center; + line-height: 1.06667rem; + font-size: 0.42667rem; + font-weight: 500; + position: absolute; + bottom: 0.85333rem; +} + +.failureBuy .failureBuy_in .close { + left: 0.85333rem; + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; + color: #fff; +} + +.failureBuy .failureBuy_in .ok { + right: 0.85333rem; + background: url(../images/ok.png) no-repeat; + background-size: 100% 100%; + color: #663803; +} + +.success { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 99; +} + +.success .success_in { + width: 9.36rem; + height: 9.2rem; + background: url(../images/buyBgPub.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.success .success_in .title { + width: 3.73333rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.49333rem; +} + +.success .success_in .text { + width: 100%; + text-align: center; + color: #521C98; + font-size: 0.37333rem; + position: absolute; + top: 5.94667rem; + left: 0; + font-weight: 500; +} + +.success .success_in .giftListSuccess { + width: 2.08rem; + height: 2.08rem; + position: absolute; + top: 2.53333rem; + left: 50%; + transform: translateX(-50%); +} + +.success .success_in .giftListSuccess .qp { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.success .success_in .giftListSuccess .gift { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.success .success_in .giftListSuccess .giftName { + width: 100%; + height: 0.45333rem; + line-height: 0.45333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.65333rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; +} + +.success .success_in .giftListSuccess .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; +} + +.success .success_in .but { + width: 4.8rem; + height: 1.06667rem; + text-align: center; + line-height: 1.06667rem; + color: #FFFFFF; + font-size: 0.42667rem; + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0.85333rem; + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; +} + +.sure { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 99; +} + +.sure .sure_in { + width: 9.36rem; + height: 9.2rem; + background: url(../images/buyBgPub.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.sure .sure_in .title { + width: 3.73333rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.33333rem; +} + +.sure .sure_in .text { + width: 100%; + text-align: center; + color: #521C98; + font-size: 0.37333rem; + position: absolute; + top: 6.21333rem; + left: 0; + font-weight: 500; +} + +.sure .sure_in .giftListSuccess { + width: 2.08rem; + height: 2.08rem; + position: absolute; + top: 2.53333rem; + left: 50%; + transform: translateX(-50%); +} + +.sure .sure_in .giftListSuccess .qp { + width: 2.08rem; + height: 2.08rem; + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; +} + +.sure .sure_in .giftListSuccess .gift { + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} + +.sure .sure_in .giftListSuccess .giftName { + width: 100%; + height: 0.45333rem; + line-height: 0.45333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.65333rem; + color: #fff; + font-size: 0.32rem; + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; +} + +.sure .sure_in .giftListSuccess .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: 0.32rem; + font-weight: 500; +} + +.sure .sure_in .but { + width: 3.68rem; + height: 1.06667rem; + text-align: center; + line-height: 1.06667rem; + font-size: 0.42667rem; + font-weight: 500; + position: absolute; + bottom: 0.85333rem; +} + +.sure .sure_in .close { + left: 0.85333rem; + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; + color: #fff; +} + +.sure .sure_in .ok { + right: 0.85333rem; + background: url(../images/ok.png) no-repeat; + background-size: 100% 100%; + color: #663803; +} + +.page3Rule { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 99; +} + +.page3Rule .page3Rule_in { + width: 10rem; + height: 13.86667rem; + background: url(../images/page3RuleBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; +} + +.page3Rule .page3Rule_in .title { + width: 4.90667rem; + height: 0.66667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.44rem; +} + +.page3Rule .page3Rule_in .box { + width: 8.74667rem; + height: 9.2rem; + margin: 2.58667rem auto 0; + overflow-y: scroll; +} + +.page3Rule .page3Rule_in .box::-webkit-scrollbar { + display: none; +} + +.page3Rule .page3Rule_in .box img { + display: block; + width: 8.74667rem; + margin: 0 auto 0.26667rem; +} diff --git a/view/peko/activity/2024-whiteLove/css/index.scss b/view/peko/activity/2024-whiteLove/css/index.scss new file mode 100644 index 0000000..754f463 --- /dev/null +++ b/view/peko/activity/2024-whiteLove/css/index.scss @@ -0,0 +1,2072 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + background: #A89AFF; +} + +// 返回按钮 +.back { + position: fixed; + top: px2rem(70); + left: px2rem(34); + z-index: 99; + width: px2rem(62); + height: px2rem(62); + + img { + width: 100%; + height: 100%; + } + + p { + color: #fff; + font-size: px2rem(32); + position: absolute; + width: 9rem; + left: 0; + top: 0; + height: 100%; + text-align: center; + line-height: px2rem(62); + } +} + +.header { + width: px2rem(750); + height: px2rem(750); + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto px2rem(0); + + .rule_icon { + width: px2rem(62); + height: px2rem(176); + position: absolute; + top: px2rem(180); + right: 0; + } +} + +.tab { + width: px2rem(720); + height: px2rem(112); + margin: 0 auto px2rem(0); + display: flex; + justify-content: space-between; + + div { + width: px2rem(240); + height: px2rem(104); + line-height: px2rem(110); + text-align: center; + color: #521C98; + font-size: px2rem(32); + font-weight: 500; + background: url(../images/tab2.png) no-repeat; + background-size: 100% 100%; + } + + .act { + height: px2rem(112); + line-height: px2rem(112); + background: url(../images/tab1.png) no-repeat; + background-size: 100% 100%; + color: #663803; + } +} + +.page1 { + // display: none; + + .bg1 { + width: px2rem(750); + height: px2rem(1136); + background: url(../images/page1_bg1.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; + + .title { + width: px2rem(280); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(104); + } + + .loveBox { + width: px2rem(254); + height: px2rem(250); + left: 50%; + transform: translateX(-50%); + top: 5.86rem; + position: absolute; + } + + .mp{ + width: px2rem(145); + height: px2rem(40); + position: absolute; + left: 50%; + transform: translateX(-58%); + top: px2rem(532); + } + + p { + position: absolute; + width: 100%; + left: 50%; + transform: translateX(-50%); + text-align: center; + font-size: px2rem(24); + font-weight: 500; + color: #521C98; + } + + .p1 { + top: px2rem(178); + } + + .p2 { + top: px2rem(210); + } + + .p3 { + top: px2rem(656); + } + + .p4 { + width: px2rem(496); + top: px2rem(1008); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + line-height: 0.45rem; + } + + .giftList { + width: px2rem(156); + height: px2rem(156); + position: absolute; + + .qp { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .giftName { + width: 100%; + height: px2rem(34); + line-height: px2rem(34); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(124); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; + + } + + .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + } + } + + .filter { + filter: grayscale(100%); + + .giftName { + color: #E2E2E2; + } + + .giftVAlue { + color: #99999A; + } + } + + .giftList1 { + left: px2rem(174); + top: px2rem(284); + } + + .giftList2 { + left: px2rem(481); + top: px2rem(284); + } + + .giftList3 { + left: px2rem(512); + top: px2rem(502); + } + + .giftList4 { + left: px2rem(418); + top: px2rem(720); + } + + .giftList5 { + left: px2rem(176); + top: px2rem(720); + } + + .giftList6 { + left: px2rem(82); + top: px2rem(510); + } + } + + .bg2 { + width: px2rem(750); + height: px2rem(1040); + background: url(../images/page1_bg2.png) no-repeat; + background-size: 100% 100%; + position: relative; + margin: 0 auto px2rem(36); + + .title { + width: px2rem(280); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(108); + } + + ul { + width: px2rem(686); + height: 9.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.2rem; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 0; + display: none; + } + + li { + width: 100%; + height: px2rem(72); + line-height: px2rem(71); + display: flex; + justify-content: space-between; + + div { + width: 50%; + text-align: center; + color: #521C98; + font-weight: 400; + } + + .left { + line-height: normal; + + p { + color: #521C98; + font-size: px2rem(24); + margin-bottom: px2rem(2); + } + + span { + font-size: px2rem(20); + } + } + } + + .liTitle { + div { + font-size: px2rem(28); + font-weight: 500; + color: #521C98; + } + } + + .null { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: px2rem(28); + font-weight: 500; + color: #521C98; + text-align: center; + width: 100%; + + div { + width: 100%; + } + } + } + } +} + +.page2 { + display: none; + + .box { + width: px2rem(750); + height: px2rem(986); + margin: 0 auto px2rem(80); + background: url(../images/page2Bg.png) no-repeat; + background-size: 100% 100%; + position: relative; + + .title { + width: px2rem(588); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(112); + } + + .page2Buy_icon { + width: px2rem(158); + height: px2rem(72); + position: absolute; + right: 0; + top: px2rem(292); + z-index: 2; + } + + i { + font-style: normal; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + + .i1 { + // width: px2rem(284); + height: px2rem(42); + line-height: px2rem(42); + border-radius: px2rem(42); + text-align: center; + color: #EAE7FB; + font-size: px2rem(24); + top: px2rem(190); + background: #9789E9; + padding: 0 px2rem(20); + } + + .i2 { + width: px2rem(496); + height: px2rem(68); + text-align: center; + color: #521C98; + font-size: px2rem(24); + line-height: px2rem(28.13); + top: px2rem(250); + font-weight: 500; + } + + .i3 { + width: 100%; + text-align: center; + color: #A78CD2; + font-size: px2rem(24); + top: px2rem(320); + font-weight: 500; + } + + .tasks { + width: px2rem(654); + height: px2rem(252); + position: absolute; + top: px2rem(394); + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: px2rem(16); + + .giftBox { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: px2rem(28); + top: px2rem(24); + + .qp { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .giftName { + width: 100%; + height: px2rem(34); + line-height: px2rem(34); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(124); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; + + } + + .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + } + } + + p { + position: absolute; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + left: px2rem(212); + } + + .p1 { + top: px2rem(34); + } + + .p2 { + top: px2rem(92); + color: #7347AD; + } + + .p3 { + top: px2rem(176); + } + + .line { + width: px2rem(332); + height: px2rem(24); + line-height: px2rem(24); + border-radius: px2rem(24); + position: absolute; + left: px2rem(300); + top: px2rem(90); + background: #7466c4; + + span { + width: 10%; + height: px2rem(20); + border-radius: px2rem(20); + position: absolute; + // border-left: px2rem(2) solid #7151CE; + // border-right: px2rem(2) solid #7151CE; + left: px2rem(2); + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); + } + + .i { + // color: #fceb02; + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: px2rem(24); + width: auto; + text-align: right; + } + } + + .buy { + width: px2rem(230); + height: px2rem(56); + line-height: px2rem(56); + vertical-align: middle; + text-align: center; + color: #663803; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(164); + left: px2rem(410); + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; + + img { + display: inline-block; + width: px2rem(48); + height: px2rem(48); + + } + } + } + + .tasks2 { + width: px2rem(654); + height: px2rem(252); + position: absolute; + top: px2rem(670); + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: px2rem(16); + + .giftBox { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: px2rem(28); + top: px2rem(24); + + .qp { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .giftName { + width: 100%; + height: px2rem(34); + line-height: px2rem(34); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(124); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; + + } + + .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + } + } + + p { + position: absolute; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + left: px2rem(212); + } + + .p1 { + top: px2rem(34); + } + + .p2 { + top: px2rem(92); + color: #7347AD; + } + + .p3 { + top: px2rem(176); + } + + .line { + width: px2rem(332); + height: px2rem(24); + line-height: px2rem(24); + border-radius: px2rem(24); + position: absolute; + left: px2rem(300); + top: px2rem(90); + background: #7466c4; + + span { + width: 98.8%; + height: px2rem(20); + border-radius: px2rem(20); + position: absolute; + // border: px2rem(2) solid #7151CE; + left: px2rem(2); + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); + } + + .i { + // color: #fceb02; + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: px2rem(24); + width: auto; + text-align: right; + } + } + + .buy { + width: px2rem(230); + height: px2rem(56); + line-height: px2rem(56); + vertical-align: middle; + text-align: center; + color: #663803; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(164); + left: px2rem(410); + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; + + img { + display: inline-block; + width: px2rem(48); + height: px2rem(48); + + } + } + } + } +} + +.page3 { + display: none; + + .box { + width: px2rem(750); + height: px2rem(800); + margin: 0 auto px2rem(0); + background: url(../images/page3boxBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + + .page2Buy_icon { + width: px2rem(158); + height: px2rem(72); + position: absolute; + right: 0; + top: px2rem(292); + z-index: 2; + } + + i { + font-style: normal; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + + .i2 { + width: px2rem(496); + height: px2rem(68); + text-align: center; + color: #521C98; + font-size: px2rem(24); + line-height: px2rem(35); + top: px2rem(95); + font-weight: 500; + } + + .tasks { + width: px2rem(654); + height: px2rem(252); + position: absolute; + top: px2rem(208); + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: px2rem(16); + + .giftBox { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: px2rem(28); + top: px2rem(24); + + .qp { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 0; + top: 0; + background: url(../images/page3ts.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .giftName { + width: 100%; + height: px2rem(34); + line-height: px2rem(34); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(124); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; + + } + + .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + } + } + + p { + position: absolute; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + left: px2rem(212); + } + + .p1 { + top: px2rem(34); + } + + .p2 { + top: px2rem(92); + color: #7347AD; + } + + .p3 { + top: px2rem(176); + } + + .line { + width: px2rem(332); + height: px2rem(24); + line-height: px2rem(24); + border-radius: px2rem(24); + position: absolute; + left: px2rem(300); + top: px2rem(90); + background: #7466c4; + + span { + width: 10%; + height: px2rem(20); + border-radius: px2rem(20); + position: absolute; + // border: px2rem(2) solid #7151CE; + left: px2rem(2); + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); + } + + .i { + // color: #fceb02; + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: px2rem(24); + width: auto; + text-align: right; + } + } + + .buy { + width: px2rem(160); + height: px2rem(56); + line-height: px2rem(56); + vertical-align: middle; + text-align: center; + color: #663803; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(164); + left: px2rem(470); + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; + + img { + display: inline-block; + width: px2rem(48); + height: px2rem(48); + + } + } + + .act { + background: url(../images/buy_z.png) no-repeat; + background-size: 100% 100%; + color: #fff; + } + } + + + .tasks2 { + width: px2rem(654); + height: px2rem(252); + position: absolute; + top: px2rem(484); + left: 50%; + transform: translateX(-50%); + background: #F1F1FF; + border-radius: px2rem(16); + + .giftBox { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: px2rem(28); + top: px2rem(24); + + .qp { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 0; + top: 0; + background: url(../images/page3qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .giftName { + width: 100%; + height: px2rem(34); + line-height: px2rem(34); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(124); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; + + } + + .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + } + } + + p { + position: absolute; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + left: px2rem(212); + } + + .p1 { + top: px2rem(34); + } + + .p2 { + top: px2rem(92); + color: #7347AD; + } + + .p3 { + top: px2rem(176); + } + + .line { + width: px2rem(332); + height: px2rem(24); + line-height: px2rem(24); + border-radius: px2rem(24); + position: absolute; + left: px2rem(300); + top: px2rem(90); + background: #7466c4; + + span { + width: 10%; + height: px2rem(20); + border-radius: px2rem(20); + position: absolute; + // border: px2rem(2) solid #7151CE; + left: px2rem(2); + top: 50%; + transform: translateY(-50%); + background: linear-gradient(90deg, #B4A8FE 0%, #DBF4FA 100%); + } + + .i { + // color: #fceb02; + color: #c4a8a8; + z-index: 2; + position: absolute; + right: -1.8rem; + height: 100%; + line-height: px2rem(24); + width: auto; + text-align: right; + } + } + + .buy { + width: px2rem(160); + height: px2rem(56); + line-height: px2rem(56); + vertical-align: middle; + text-align: center; + color: #663803; + font-size: px2rem(28); + font-weight: 500; + position: absolute; + top: px2rem(164); + left: px2rem(470); + background: url(../images/page2But.png) no-repeat; + background-size: 100% 100%; + + img { + display: inline-block; + width: px2rem(48); + height: px2rem(48); + + } + } + + .act { + background: url(../images/buy_z.png) no-repeat; + background-size: 100% 100%; + color: #fff; + } + } + } + + .top3 { + width: px2rem(750); + height: px2rem(784); + margin: 0 auto px2rem(16); + position: relative; + background: url(../images/pageTop3.png) no-repeat; + background-size: 100% 100%; + + .title { + width: 100%; + text-align: center; + font-family: Source Han Serif CN, Source Han Serif CN; + text-shadow: px2rem(2) px2rem(4) px2rem(8) rgba(93, 67, 196, 0.8); + color: #fff; + font-size: px2rem(44); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(35); + } + + .rule_icon { + width: px2rem(158); + height: px2rem(72); + position: absolute; + right: 0; + top: px2rem(118); + z-index: 3; + } + + .no1 { + width: px2rem(670); + height: px2rem(232); + position: absolute; + top: px2rem(152); + left: 50%; + transform: translateX(-50%); + + .ts { + width: 100%; + height: 100%; + z-index: 2; + position: absolute; + left: 0; + top: 0; + } + + .leftlogo { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + top: px2rem(78); + left: px2rem(208); + } + + .rightlogo { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + top: px2rem(78); + right: px2rem(208); + } + + .name { + width: px2rem(340); + position: absolute; + bottom: px2rem(-34); + left: 50%; + transform: translateX(-50%); + color: #521C98; + font-weight: 400; + font-family: PingFang SC, PingFang SC; + font-size: px2rem(22); + text-align: center; + + i { + color: #9E82CB; + font-style: normal; + } + } + + .score { + color: #FFFFFF; + font-size: px2rem(24); + font-weight: 500; + background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%); + width: px2rem(210); + height: px2rem(34); + white-space: nowrap; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-76); + text-align: center; + line-height: px2rem(34); + } + + } + + .no2 { + width: px2rem(312); + height: px2rem(144); + position: absolute; + top: px2rem(484); + left: px2rem(56); + + .ts { + width: 100%; + height: 100%; + z-index: 2; + position: absolute; + left: 0; + top: 0; + } + + .leftlogo { + width: px2rem(96); + height: px2rem(96); + border-radius: 50%; + position: absolute; + top: px2rem(30); + left: px2rem(54); + } + + .rightlogo { + width: px2rem(96); + height: px2rem(96); + border-radius: 50%; + position: absolute; + top: px2rem(30); + right: px2rem(54); + } + + .name { + width: px2rem(340); + position: absolute; + bottom: px2rem(-34); + left: 50%; + transform: translateX(-50%); + color: #521C98; + font-weight: 400; + font-family: PingFang SC, PingFang SC; + font-size: px2rem(22); + text-align: center; + + i { + color: #9E82CB; + font-style: normal; + } + } + + .score { + color: #FFFFFF; + font-size: px2rem(24); + font-weight: 500; + background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%); + width: px2rem(210); + height: px2rem(34); + white-space: nowrap; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-76); + text-align: center; + line-height: px2rem(34); + } + + } + + .no3 { + width: px2rem(312); + height: px2rem(144); + position: absolute; + top: px2rem(484); + right: px2rem(56); + + .ts { + width: 100%; + height: 100%; + z-index: 2; + position: absolute; + left: 0; + top: 0; + } + + .leftlogo { + width: px2rem(96); + height: px2rem(96); + border-radius: 50%; + position: absolute; + top: px2rem(29); + left: px2rem(57); + } + + .rightlogo { + width: px2rem(96); + height: px2rem(96); + border-radius: 50%; + position: absolute; + top: px2rem(29); + right: px2rem(56); + } + + .name { + width: px2rem(340); + position: absolute; + bottom: px2rem(-34); + left: 50%; + transform: translateX(-50%); + color: #521C98; + font-weight: 400; + font-family: PingFang SC, PingFang SC; + font-size: px2rem(22); + text-align: center; + + i { + color: #9E82CB; + font-style: normal; + } + } + + .score { + color: #FFFFFF; + font-size: px2rem(24); + font-weight: 500; + background: linear-gradient(90deg, rgba(136, 74, 237, 0) 0%, rgba(136, 74, 237, 0.9) 24%, rgba(97, 74, 237, 0.9) 82%, rgba(97, 74, 237, 0) 100%); + width: px2rem(210); + height: px2rem(34); + white-space: nowrap; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(-76); + text-align: center; + line-height: px2rem(34); + } + + } + } + + ul { + width: px2rem(718); + margin: 0 auto px2rem(160); + + li { + width: 100%; + height: px2rem(140); + background: url(../images/page3Li.png) no-repeat; + background-size: 100% 100%; + margin-bottom: px2rem(12); + position: relative; + box-sizing: border-box; + padding: 0 px2rem(48); + + .num { + width: px2rem(72); + height: px2rem(72); + float: left; + margin-top: px2rem(34); + text-align: center; + line-height: px2rem(72); + color: #521C98; + font-size: px2rem(28); + font-weight: 500; + background: url(../images/love_z.png) no-repeat; + background-size: 100% 100%; + } + + .leftTx { + width: px2rem(80); + height: px2rem(80); + border-radius: 50%; + position: absolute; + left: px2rem(136); + top: px2rem(30); + border: px2rem(2) solid #fff; + z-index: 2; + box-sizing: border-box; + } + + .rightTx { + width: px2rem(80); + height: px2rem(80); + border-radius: 50%; + position: absolute; + left: px2rem(200); + top: px2rem(30); + border: px2rem(2) solid #fff; + box-sizing: border-box; + } + + .leftName { + width: px2rem(160); + color: #521C98; + font-size: px2rem(26); + font-weight: 500; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: px2rem(296); + top: px2rem(36); + } + + .rightName { + width: px2rem(160); + color: #521C98; + font-size: px2rem(26); + font-weight: 500; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: px2rem(296); + top: px2rem(74); + } + + .score { + float: right; + height: 100%; + line-height: px2rem(140); + color: #521C98; + font-size: px2rem(32); + font-weight: 500; + } + } + } + + .my { + position: fixed; + width: px2rem(750); + height: 2.2rem; + // height: 8.74667rem; + left: 50%; + transform: translateX(-50%); + bottom: 0rem; + z-index: 99; + background: url(../images/myBg2.png) no-repeat; + // background: url(../images/myBg.png) no-repeat; + background-size: 100% 100%; + transition: all .4s; + + .icon { + width: px2rem(64); + height: px2rem(92); + position: absolute; + right: px2rem(32); + top: px2rem(-41); + } + + .scroll { + overflow: hidden; + // overflow-y: scroll; + height: 7.74667rem; + margin-top: 0.4rem; + // margin-top: 0.9rem; + } + + .myBox { + width: 100%; + height: px2rem(140); + margin-bottom: px2rem(12); + position: relative; + box-sizing: border-box; + padding: 0 px2rem(48); + + .num { + width: px2rem(72); + height: px2rem(72); + float: left; + margin-top: px2rem(34); + text-align: center; + line-height: px2rem(72); + color: #663803; + font-size: px2rem(28); + font-weight: 500; + background: url(../images/love_h.png) no-repeat; + background-size: 100% 100%; + white-space: nowrap + } + + .leftTx { + width: px2rem(80); + height: px2rem(80); + border-radius: 50%; + position: absolute; + left: px2rem(136); + top: px2rem(30); + border: px2rem(2) solid #fff; + z-index: 2; + box-sizing: border-box; + } + + .rightTx { + width: px2rem(80); + height: px2rem(80); + border-radius: 50%; + position: absolute; + left: px2rem(200); + top: px2rem(30); + border: px2rem(2) solid #fff; + box-sizing: border-box; + } + + .leftName { + width: px2rem(160); + color: #521C98; + font-size: px2rem(26); + font-weight: 500; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: px2rem(296); + top: px2rem(36); + } + + .rightName { + width: px2rem(160); + color: #521C98; + font-size: px2rem(26); + font-weight: 500; + //超出省略号 + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: absolute; + left: px2rem(296); + top: px2rem(74); + } + + .score { + float: right; + height: 100%; + line-height: px2rem(140); + color: #521C98; + font-size: px2rem(32); + font-weight: 500; + } + } + } +} + +.buyRecords { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .8); + z-index: 99; + + .buyRecords_in { + width: px2rem(750); + height: px2rem(1040); + background: url(../images/page1_bg2.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: px2rem(280); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(108); + } + + ul { + width: px2rem(686); + height: 9.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.2rem; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 0; + display: none; + } + + li { + width: 100%; + height: px2rem(72); + line-height: px2rem(71); + display: flex; + justify-content: space-between; + + div { + width: 50%; + text-align: center; + color: #521C98; + font-weight: 400; + } + + .left { + line-height: normal; + + p { + color: #521C98; + font-size: px2rem(24); + margin-bottom: px2rem(2); + } + + span { + font-size: px2rem(20); + } + } + } + + .liTitle { + div { + font-size: px2rem(28); + font-weight: 500; + color: #521C98; + } + } + + .null { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: px2rem(28); + font-weight: 500; + color: #521C98; + text-align: center; + width: 100%; + + div { + width: 100%; + } + } + } + } +} + +.rule { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .8); + z-index: 99; + + .rule_in { + width: px2rem(750); + height: px2rem(1040); + background: url(../images/page1_bg2.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: px2rem(280); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(108); + } + + + + ul { + width: px2rem(686); + height: 9.5rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 2.2rem; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 0; + display: none; + } + + li { + width: 100%; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + line-height: px2rem(28); + margin-bottom: px2rem(10); + box-sizing: border-box; + padding: 0 px2rem(46); + } + } + } +} + +.end { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .8); + z-index: 99; + + .end_in { + width: px2rem(702); + height: px2rem(450); + background: url(../images/end.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: px2rem(320); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(170); + } + + .but { + width: px2rem(360); + height: px2rem(80); + text-align: center; + line-height: px2rem(80); + color: #FFFFFF; + font-size: px2rem(32); + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(64); + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; + } + } +} + +.failureBuy { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .8); + z-index: 99; + + .failureBuy_in { + width: px2rem(702); + height: px2rem(450); + background: url(../images/end.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: px2rem(280); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(100); + } + + .text { + width: 100%; + text-align: center; + color: #521C98; + font-size: px2rem(30); + position: absolute; + top: 2.75rem; + left: 0; + } + + .but { + width: px2rem(276); + height: px2rem(80); + text-align: center; + line-height: px2rem(80); + font-size: px2rem(32); + font-weight: 500; + position: absolute; + bottom: px2rem(64); + } + + .close { + left: px2rem(64); + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; + color: #fff; + } + + .ok { + right: px2rem(64); + background: url(../images/ok.png) no-repeat; + background-size: 100% 100%; + color: #663803; + } + } +} + +.success { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .8); + z-index: 99; + + .success_in { + width: px2rem(702); + height: px2rem(690); + background: url(../images/buyBgPub.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: px2rem(280); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(112); + } + + .text { + width: 100%; + text-align: center; + color: #521C98; + font-size: px2rem(28); + position: absolute; + top: px2rem(446); + left: 0; + font-weight: 500; + } + + .giftListSuccess { + width: px2rem(156); + height: px2rem(156); + position: absolute; + top: px2rem(190); + left: 50%; + transform: translateX(-50%); + + .qp { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .giftName { + width: 100%; + height: px2rem(34); + line-height: px2rem(34); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(124); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; + + } + + .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + } + } + + .but { + width: px2rem(360); + height: px2rem(80); + text-align: center; + line-height: px2rem(80); + color: #FFFFFF; + font-size: px2rem(32); + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(64); + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; + } + } +} + +.sure { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .8); + z-index: 99; + + .sure_in { + width: px2rem(702); + height: px2rem(690); + background: url(../images/buyBgPub.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + .title { + width: px2rem(280); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(100); + } + + .text { + width: 100%; + text-align: center; + color: #521C98; + font-size: px2rem(28); + position: absolute; + top: px2rem(466); + left: 0; + font-weight: 500; + } + + + .giftListSuccess { + width: px2rem(156); + height: px2rem(156); + position: absolute; + top: px2rem(190); + left: 50%; + transform: translateX(-50%); + + .qp { + width: px2rem(156); + height: px2rem(156); + position: absolute; + left: 0; + top: 0; + background: url(../images/qp.png) no-repeat; + background-size: 100% 100%; + z-index: 2; + } + + .gift { + width: px2rem(120); + height: px2rem(120); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + .giftName { + width: 100%; + height: px2rem(34); + line-height: px2rem(34); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(124); + color: #fff; + font-size: px2rem(24); + font-weight: 500; + background: url(../images/giftNameBg.png) no-repeat; + background-size: 100% 100%; + z-index: 3; + + } + + .giftVAlue { + width: 100%; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: -0.45rem; + color: #521C98; + font-size: px2rem(24); + font-weight: 500; + } + } + + .but { + width: px2rem(276); + height: px2rem(80); + text-align: center; + line-height: px2rem(80); + font-size: px2rem(32); + font-weight: 500; + position: absolute; + bottom: px2rem(64); + } + + .close { + left: px2rem(64); + background: url(../images/close.png) no-repeat; + background-size: 100% 100%; + color: #fff; + } + + .ok { + right: px2rem(64); + background: url(../images/ok.png) no-repeat; + background-size: 100% 100%; + color: #663803; + } + } +} + +.page3Rule { + display: none; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, .8); + z-index: 99; + + .page3Rule_in { + width: px2rem(750); + height: px2rem(1040); + background: url(../images/page3RuleBg.png) no-repeat; + background-size: 100% 100%; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + overflow: hidden; + + .title { + width: px2rem(368); + height: px2rem(50); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(108); + } + + .box { + width: px2rem(656); + height: 9.2rem; + margin: px2rem(194) auto 0; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + img{ + display: block; + width: px2rem(656); + margin: 0 auto px2rem(20); + } + } + } +} \ No newline at end of file diff --git a/view/peko/activity/2024-whiteLove/images/1.png b/view/peko/activity/2024-whiteLove/images/1.png new file mode 100644 index 0000000..2a7cba3 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/1.png differ diff --git a/view/peko/activity/2024-whiteLove/images/2.png b/view/peko/activity/2024-whiteLove/images/2.png new file mode 100644 index 0000000..5937d05 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/2.png differ diff --git a/view/peko/activity/2024-whiteLove/images/3.png b/view/peko/activity/2024-whiteLove/images/3.png new file mode 100644 index 0000000..d408c92 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/3.png differ diff --git a/view/peko/activity/2024-whiteLove/images/4.png b/view/peko/activity/2024-whiteLove/images/4.png new file mode 100644 index 0000000..05a1487 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/4.png differ diff --git a/view/peko/activity/2024-whiteLove/images/5.png b/view/peko/activity/2024-whiteLove/images/5.png new file mode 100644 index 0000000..8f6f55d Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/5.png differ diff --git a/view/peko/activity/2024-whiteLove/images/6.png b/view/peko/activity/2024-whiteLove/images/6.png new file mode 100644 index 0000000..021b5cc Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/6.png differ diff --git a/view/peko/activity/2024-whiteLove/images/bottom.png b/view/peko/activity/2024-whiteLove/images/bottom.png new file mode 100644 index 0000000..90ac695 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/bottom.png differ diff --git a/view/peko/activity/2024-whiteLove/images/buyBgPub.png b/view/peko/activity/2024-whiteLove/images/buyBgPub.png new file mode 100644 index 0000000..e54a3f3 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/buyBgPub.png differ diff --git a/view/peko/activity/2024-whiteLove/images/buyTitle.png b/view/peko/activity/2024-whiteLove/images/buyTitle.png new file mode 100644 index 0000000..06d72b8 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/buyTitle.png differ diff --git a/view/peko/activity/2024-whiteLove/images/buy_z.png b/view/peko/activity/2024-whiteLove/images/buy_z.png new file mode 100644 index 0000000..1fc58ed Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/buy_z.png differ diff --git a/view/peko/activity/2024-whiteLove/images/close.png b/view/peko/activity/2024-whiteLove/images/close.png new file mode 100644 index 0000000..a7623a3 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/close.png differ diff --git a/view/peko/activity/2024-whiteLove/images/diamond.png b/view/peko/activity/2024-whiteLove/images/diamond.png new file mode 100644 index 0000000..bf3360d Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/diamond.png differ diff --git a/view/peko/activity/2024-whiteLove/images/end.png b/view/peko/activity/2024-whiteLove/images/end.png new file mode 100644 index 0000000..5cc892a Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/end.png differ diff --git a/view/peko/activity/2024-whiteLove/images/endTitle.png b/view/peko/activity/2024-whiteLove/images/endTitle.png new file mode 100644 index 0000000..dce9a2d Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/endTitle.png differ diff --git a/view/peko/activity/2024-whiteLove/images/failureBuyTitle.png b/view/peko/activity/2024-whiteLove/images/failureBuyTitle.png new file mode 100644 index 0000000..fd631d1 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/failureBuyTitle.png differ diff --git a/view/peko/activity/2024-whiteLove/images/giftNameBg.png b/view/peko/activity/2024-whiteLove/images/giftNameBg.png new file mode 100644 index 0000000..1533e5c Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/giftNameBg.png differ diff --git a/view/peko/activity/2024-whiteLove/images/header.png b/view/peko/activity/2024-whiteLove/images/header.png new file mode 100644 index 0000000..b1c9276 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/header.png differ diff --git a/view/peko/activity/2024-whiteLove/images/logo.png b/view/peko/activity/2024-whiteLove/images/logo.png new file mode 100644 index 0000000..e428641 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/logo.png differ diff --git a/view/peko/activity/2024-whiteLove/images/loveBox.png b/view/peko/activity/2024-whiteLove/images/loveBox.png new file mode 100644 index 0000000..1b45677 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/loveBox.png differ diff --git a/view/peko/activity/2024-whiteLove/images/love_h.png b/view/peko/activity/2024-whiteLove/images/love_h.png new file mode 100644 index 0000000..79b26bf Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/love_h.png differ diff --git a/view/peko/activity/2024-whiteLove/images/love_z.png b/view/peko/activity/2024-whiteLove/images/love_z.png new file mode 100644 index 0000000..a54a07a Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/love_z.png differ diff --git a/view/peko/activity/2024-whiteLove/images/mp.jpg b/view/peko/activity/2024-whiteLove/images/mp.jpg new file mode 100644 index 0000000..1b67069 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/mp.jpg differ diff --git a/view/peko/activity/2024-whiteLove/images/mp.png b/view/peko/activity/2024-whiteLove/images/mp.png new file mode 100644 index 0000000..974f345 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/mp.png differ diff --git a/view/peko/activity/2024-whiteLove/images/myBg.png b/view/peko/activity/2024-whiteLove/images/myBg.png new file mode 100644 index 0000000..e01eaea Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/myBg.png differ diff --git a/view/peko/activity/2024-whiteLove/images/myBg2.png b/view/peko/activity/2024-whiteLove/images/myBg2.png new file mode 100644 index 0000000..1658cd3 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/myBg2.png differ diff --git a/view/peko/activity/2024-whiteLove/images/ok.png b/view/peko/activity/2024-whiteLove/images/ok.png new file mode 100644 index 0000000..55c6d9b Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/ok.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page1Bg1Title.png b/view/peko/activity/2024-whiteLove/images/page1Bg1Title.png new file mode 100644 index 0000000..f933a44 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page1Bg1Title.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page1Bg2Title.png b/view/peko/activity/2024-whiteLove/images/page1Bg2Title.png new file mode 100644 index 0000000..d9617f7 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page1Bg2Title.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page1_bg1.png b/view/peko/activity/2024-whiteLove/images/page1_bg1.png new file mode 100644 index 0000000..763107a Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page1_bg1.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page1_bg2.png b/view/peko/activity/2024-whiteLove/images/page1_bg2.png new file mode 100644 index 0000000..ef3501a Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page1_bg2.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page2Bg.png b/view/peko/activity/2024-whiteLove/images/page2Bg.png new file mode 100644 index 0000000..c6a8945 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page2Bg.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page2But.png b/view/peko/activity/2024-whiteLove/images/page2But.png new file mode 100644 index 0000000..383ad8b Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page2But.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page2Buy_icon.png b/view/peko/activity/2024-whiteLove/images/page2Buy_icon.png new file mode 100644 index 0000000..e9f6c77 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page2Buy_icon.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page2RuleTitle.png b/view/peko/activity/2024-whiteLove/images/page2RuleTitle.png new file mode 100644 index 0000000..6ad1b82 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page2RuleTitle.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page2Title.png b/view/peko/activity/2024-whiteLove/images/page2Title.png new file mode 100644 index 0000000..1e96f43 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page2Title.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3Li.png b/view/peko/activity/2024-whiteLove/images/page3Li.png new file mode 100644 index 0000000..e11043b Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3Li.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3RuleBg.png b/view/peko/activity/2024-whiteLove/images/page3RuleBg.png new file mode 100644 index 0000000..ee1ecff Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3RuleBg.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3Rule_icon.png b/view/peko/activity/2024-whiteLove/images/page3Rule_icon.png new file mode 100644 index 0000000..7e786a9 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3Rule_icon.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3Rule_inBg.png b/view/peko/activity/2024-whiteLove/images/page3Rule_inBg.png new file mode 100644 index 0000000..e76b729 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3Rule_inBg.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3Title.png b/view/peko/activity/2024-whiteLove/images/page3Title.png new file mode 100644 index 0000000..49359fd Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3Title.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3Top1.png b/view/peko/activity/2024-whiteLove/images/page3Top1.png new file mode 100644 index 0000000..96a699b Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3Top1.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3Top2.png b/view/peko/activity/2024-whiteLove/images/page3Top2.png new file mode 100644 index 0000000..1c77104 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3Top2.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3Top3.png b/view/peko/activity/2024-whiteLove/images/page3Top3.png new file mode 100644 index 0000000..fc55481 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3Top3.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3boxBg.png b/view/peko/activity/2024-whiteLove/images/page3boxBg.png new file mode 100644 index 0000000..b0583b8 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3boxBg.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3mp.png b/view/peko/activity/2024-whiteLove/images/page3mp.png new file mode 100644 index 0000000..1cd1d2b Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3mp.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3qp.png b/view/peko/activity/2024-whiteLove/images/page3qp.png new file mode 100644 index 0000000..886f43b Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3qp.png differ diff --git a/view/peko/activity/2024-whiteLove/images/page3ts.png b/view/peko/activity/2024-whiteLove/images/page3ts.png new file mode 100644 index 0000000..e733723 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/page3ts.png differ diff --git a/view/peko/activity/2024-whiteLove/images/pageTop3.png b/view/peko/activity/2024-whiteLove/images/pageTop3.png new file mode 100644 index 0000000..8a645f5 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/pageTop3.png differ diff --git a/view/peko/activity/2024-whiteLove/images/qp.png b/view/peko/activity/2024-whiteLove/images/qp.png new file mode 100644 index 0000000..af7d9e1 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/qp.png differ diff --git a/view/peko/activity/2024-whiteLove/images/ruleTitle.png b/view/peko/activity/2024-whiteLove/images/ruleTitle.png new file mode 100644 index 0000000..219fb57 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/ruleTitle.png differ diff --git a/view/peko/activity/2024-whiteLove/images/sureTitle.png b/view/peko/activity/2024-whiteLove/images/sureTitle.png new file mode 100644 index 0000000..b3028e7 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/sureTitle.png differ diff --git a/view/peko/activity/2024-whiteLove/images/tab1.png b/view/peko/activity/2024-whiteLove/images/tab1.png new file mode 100644 index 0000000..bd2967d Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/tab1.png differ diff --git a/view/peko/activity/2024-whiteLove/images/tab2.png b/view/peko/activity/2024-whiteLove/images/tab2.png new file mode 100644 index 0000000..c36962f Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/tab2.png differ diff --git a/view/peko/activity/2024-whiteLove/images/tasks1.png b/view/peko/activity/2024-whiteLove/images/tasks1.png new file mode 100644 index 0000000..3993b94 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/tasks1.png differ diff --git a/view/peko/activity/2024-whiteLove/images/tasks2.png b/view/peko/activity/2024-whiteLove/images/tasks2.png new file mode 100644 index 0000000..70d2bc5 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/tasks2.png differ diff --git a/view/peko/activity/2024-whiteLove/images/top.png b/view/peko/activity/2024-whiteLove/images/top.png new file mode 100644 index 0000000..020ef62 Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/top.png differ diff --git a/view/peko/activity/2024-whiteLove/images/travel/back.png b/view/peko/activity/2024-whiteLove/images/travel/back.png new file mode 100644 index 0000000..7b81adb Binary files /dev/null and b/view/peko/activity/2024-whiteLove/images/travel/back.png differ diff --git a/view/peko/activity/2024-whiteLove/index.html b/view/peko/activity/2024-whiteLove/index.html new file mode 100644 index 0000000..0e4b09b --- /dev/null +++ b/view/peko/activity/2024-whiteLove/index.html @@ -0,0 +1,391 @@ + + + + + + + 熱戀情人節 + + + + + + +
+ +
+ + +
+
+
+ + +
+
萌動花盒
+
甜蜜升溫
+
熱戀時刻
+
+ + +
+
+ + + + + +

活動期間,開出「萌動花盒」中的6種不同禮物

+

可獲得「初心萌動」限定銘牌

+

今日獎勵已發放

+

獎勵自動發放,每日僅可領取一次,點亮結果和獎勵每日中午12點自動刷新

+ + + +
+
+
+ +
白玫瑰
+
1314鉆
+
+
+
+ +
紅玫瑰
+
1314鉆
+
+
+
+ +
粉玫瑰
+
1314鉆
+
+
+
+ +
彩玫瑰
+
1314鉆
+
+
+
+ +
熾熱愛戀
+
1314鉆
+
+
+
+ +
純白愛戀
+
1314鉆
+
+
+
+ +
+ + + + +
+ +
+ + +
+
+ + + + + + 剩余時間:00天12時12分 + 活動期間送禮到達指定任務值,可解鎖超珍稀限時禮物直購權 + (1鉆石送禮=1禮物值) + +
+
+
+ +
心動一剎
+
13140鉆
+
+

每達到52000禮物值,可解鎖1次直購權

+

禮物值

+

當前可購買: X個

+
+ + 0/1000 +
+
+ + 1314購買 +
+
+
+
+
+ +
絕對寵溺
+
33440鉆
+
+

每達到1314520禮物值,可解鎖1次直購權

+

禮物值

+

當前可購買: X個

+
+ + 0/2000 +
+
+ + 3344購買 +
+
+
+
+ + +
+ +
+ + 突破熱戀值,領取限時裝扮獎勵! + 女性用戶獲得粉色裝扮,男性用戶獲得藍色裝扮 + 每個用戶僅能獲取1次,將自動發放至「我的裝扮」 + +
+
+
+ +
糖果戀人頭飾
+
13140熱戀值
+
+

糖果戀人頭飾-情人節限定

+

熱戀值

+

有效期:24H

+
+ + 0/1000 +
+
+ 未完成 +
+
+
+
+
+ +
糖果戀人氣泡
+
33440熱戀值
+
+

糖果戀人氣泡·情人節限定

+

熱戀值

+

有效期:24H

+
+ + 0/1000 +
+
+ 未完成 +
+
+
+ + +
+ +
熱戀榜單
+ + + +
+ + + +
我是男用戶6... & 我是女用戶6...
+ 9999熱戀值 +
+
+ + + +
我是男用戶6... & 我是女用戶6...
+ 9999熱戀值 +
+
+ + + +
我是男用戶6... & 我是女用戶6...
+ 9999熱戀值 +
+
+ + + + + +
+ +
+
+
4
+ + +
1我是男用戶的...
+
1我是男用戶的...
+
0
+
+
+
+
+ + +
+
+ + + + +
+
+ + +
+
+ + + + +
+
+ +
+
+ +
檢視榜單
+
+
+ + +
+
+ +
鉆石余額不足
+
關閉
+
前往充值
+
+
+ + +
+
+ +
+
+ +
禮物名稱
+
0鉆
+
+
xxxx禮物名*1已發放至「我的背包」
+
知道了
+
+
+ + +
+
+ +
購買成功後將自動發放至「我的背包」
+
+
+ +
禮物名稱
+
0鉆
+
+
下次再說
+
立即購買
+
+
+ + +
+
+ +
+ +
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/view/peko/activity/2024-whiteLove/js/index.js b/view/peko/activity/2024-whiteLove/js/index.js new file mode 100644 index 0000000..c63c061 --- /dev/null +++ b/view/peko/activity/2024-whiteLove/js/index.js @@ -0,0 +1,531 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +let env = EnvCheck(); +if (env == 'test') { + new VConsole(); +} +// 封裝layer消息提醒框 +let layerIndex +const showLoading = (content = '加載中...') => { + layer.open({ + type: 2, + shadeClose: false, + content, + success (e) { + layerIndex = $(e).attr('index') + } + }) +} +const hideLoading = (index) => { + layer.close(index) +} +const toastMsg = (content = '操作完成', time = 2) => { + layer.open({ + content, + time, + skin: 'msg' + }) +} +var activityCode1; +var activityCode2; +var activityCode; +var diamondNum; +var taskCode; +var taskIcon; +var taskName; +var showValue; +var countupTime; +// 初始化函數 +$(function () { + getInfoFromClient() + setTimeout(function () { + // 頁面全屏 + if (browser.app) { + if (browser.android) { + window.androidJsObj.initShowNav(false) + } else { + window.webkit.messageHandlers.initShowNav.postMessage(0) + } + }; + // 頂部返回事件 + $('.back').click(() => { + if (browser.android) { + window.androidJsObj.closeWebView() + } else { + window.webkit.messageHandlers.closeWebView.postMessage(null) + } + }) + getTask_MENG_DONG_HUA_HE(); + getTask_TIAN_MI_SHENG_WEN(); + getRank(); + }, 100) +}) +// 獲取榜單接口 +function getRank () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/act/2024Valentines/cpRank/getRank', + success (res) { + if (res.code === 200) { + // 處理任務 + res.data.cpTaskList.forEach((val, i) => { + console.log(res.status); + if (val.status == 2) { + $(`.page3 .box .tasks${i + 1} .buy`).addClass("act"); + $(`.page3 .box .tasks${i + 1} .buy`).text("已完成"); + $(`.page3 .box .tasks${i + 1} .line .i`).text(`${res.data.score > val.score ? val.score : res.data.score}/${val.score}`); + $(`.page3 .box .tasks${i + 1} .line span`).css('width', `${(res.data.score / val.score) * 100 >= 100 ? 98.8 : (res.data.score / val.score) * 100}%`) + } else { + $(`.page3 .box .tasks${i + 1} .buy`).removeClass("act"); + $(`.page3 .box .tasks${i + 1} .buy`).text("未完成"); + $(`.page3 .box .tasks${i + 1} .line .i`).text(`${res.data.score > val.score ? val.score : res.data.score}/${val.score}`); + $(`.page3 .box .tasks${i + 1} .line span`).css('width', `${(res.data.score / val.score) * 100 >= 100 ? 98.8 : (res.data.score / val.score) * 100}%`) + } + }); + // 處理前三 + 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({ + leftAvatar: './images/logo.png', + rightAvatar: './images/logo.png', + leftNick: '虛位以待', + rightNick: '虛位以待', + score: "0" + }) + top3.push(...arr) + } + top3.forEach((res, i) => { + $(`.page3 .top3 .no${i + 1} .leftlogo`).attr('src', res.leftAvatar); + $(`.page3 .top3 .no${i + 1} .rightlogo`).attr('src', res.rightAvatar); + $(`.page3 .top3 .no${i + 1} .name`).html(`${res.leftNick.length > 6 ? res.leftNick.slice(0, 6) + '...' : res.leftNick} & ${res.rightNick.length > 6 ? res.rightNick.slice(0, 6) + '...' : res.rightNick}`); + $(`.page3 .top3 .no${i + 1} .score`).text(unitProcessing(res.score, 10000, 1, 'w') + '熱戀值') + }) + // 非前三 + var str = ''; + $('.page3 ul li').remove(); + notTop3.forEach((res, i) => { + str += ` +
  • +
    ${res.ranking}
    + + +
    ${res.leftNick}
    +
    ${res.rightNick}
    +
    ${unitProcessing(res.score, 10000, 1, 'w')}
    +
  • + ` + }) + $('.page3 ul').append(str); + // 處理自己榜單排名 + $('.page3 .my .myBox').remove(); + var strMy = ''; + res.data.meRankList.forEach((res, i) => { + strMy += ` +
    +
    ${res.ranking == 0 ? '未上榜' : res.ranking}
    + + +
    ${res.leftNick}
    +
    ${res.rightNick}
    +
    ${unitProcessing(res.score, 10000, 1, 'w')}
    +
    + ` + }) + $('.page3 .my .scroll').append(strMy) + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤,請退出重進') + } + }) +} +// 獲取萌動禮盒點亮任務接口 +function activityInfo () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/activity/info', + data: { activityCode: activityCode2 }, + success (res) { + if (res.code === 200) { + if (res.data.endTime - res.timestamp > 0) { + countup(res.data.endTime - res.timestamp); + } else { + $('.end').show(); + bodyScroolFun(true); + } + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤,請退出重進') + } + }) +} +// 倒計時 +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中 + $('.page2 .box .i1').text(`剩余時間:${d}天${h}時${m}分${s}秒`); + } else { + $('.page2 .box .i1').text(`剩余時間:已結束`); + + } + if (leftTime > 0) { + leftTime = leftTime - 1000; + } + countupTime = setTimeout(function () { + countup(leftTime); + }, 1000); +} +// 獲取萌動禮盒點亮任務接口 +function getTask_MENG_DONG_HUA_HE () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/activity/task/user', + data: { componentCode: "MENG_DONG_HUA_HE" }, + success (res) { + if (res.code === 200) { + // 渲染合成列錶 + $('.page1 .bg1 .giftListBox .giftList').remove(); + var str = ''; + res.data[0].children.forEach((res, i) => { + str += ` +
    +
    + +
    ${res.taskName}
    +
    ${res.taskValue}鉆
    +
    + ` + }); + $('.page1 .bg1 .giftListBox').append(str); + activityCode1 = 'ACT_2024_VALENTINES_DAY'; + recordPage(activityCode1, 'MENG_DONG_HUA_HE',); + if (res.data[0].reward.granted) { + $('.page1 .bg1 .p3').show(); + } else { + $('.page1 .bg1 .p3').hide(); + } + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤,請退出重進') + } + }) +} +// 獲取甜蜜升溫任務接口 +function getTask_TIAN_MI_SHENG_WEN () { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/activity/task/user', + data: { componentCode: "TIAN_MI_SHENG_WEN" }, + success (res) { + if (res.code === 200) { + activityCode2 = 'ACT_2024_VALENTINES_DAY'; + res.data.forEach((res, i) => { + $(`.page2 .box .tasks${i + 1} .giftBox .gift`).attr('src', res.taskIcon); + $(`.page2 .box .tasks${i + 1} .giftBox .giftName`).text(res.reward.rewardName); + $(`.page2 .box .tasks${i + 1} .giftBox .giftVAlue`).text(res.reward.showValue + '鉆'); + $(`.page2 .box .tasks${i + 1} .p1`).text(`每達到${res.taskValue}禮物值,可解鎖1次直購權`); + $(`.page2 .box .tasks${i + 1} .line .i`).text(`${res.completeValue % res.taskValue}/${res.taskValue}`); + $(`.page2 .box .tasks${i + 1} .line span`).css('width', `${(res.completeValue % res.taskValue / res.taskValue) * 100 >= 100 ? 98.8 : (res.completeValue % res.taskValue / res.taskValue) * 100}%`); + $(`.page2 .box .tasks${i + 1} .p3`).text(`當前可購買: ${Math.floor(res.activityValue / res.taskValue)}個`); + $(`.page2 .box .tasks${i + 1} .buy`).html(` + ${res.reward.showValue}購買`); + $(`.page2 .box .tasks${i + 1} .buy`).attr('activityCode', res.activityCode); + $(`.page2 .box .tasks${i + 1} .buy`).attr('taskCode', res.taskCode); + $(`.page2 .box .tasks${i + 1} .buy`).attr('diamondNum', res.reward.showValue); + $(`.page2 .box .tasks${i + 1} .buy`).attr('num', Math.floor(res.activityValue / res.taskValue)); + $(`.page2 .box .tasks${i + 1} .buy`).attr('taskIcon', res.taskIcon); + $(`.page2 .box .tasks${i + 1} .buy`).attr('taskName', res.reward.rewardName); + $(`.page2 .box .tasks${i + 1} .buy`).attr('showValue', res.reward.showValue); + }) + activityInfo(); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤,請退出重進') + } + }) +} +// 購買接口 +function exchange (activityCode, diamondNum, taskCode, taskIcon, taskName, showValue) { + showLoading() + networkRequest({ + type: 'post', + url: urlPrefix + '/activity/task/exchange', + data: { activityCode, diamondNum, taskCode, num: 1 }, + success (res) { + if (res.code === 200) { + $('.success .success_in .giftListSuccess .gift').attr('src', taskIcon); + $('.success .success_in .giftListSuccess .giftName').text(taskName); + $('.success .success_in .giftListSuccess .giftVAlue').text(`${showValue}鉆`); + $('.success .success_in .text').text(`${taskName}*1已發放至「我的背包」`); + $('.success').show(); + getTask_TIAN_MI_SHENG_WEN(); + bodyScroolFun(true); + } else if (res.code == 31005) { + $('.failureBuy').show(); + bodyScroolFun(true); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤,請退出重進') + } + }) +} +// 購買禮物按鈕 +$(`.page2 .box .taskss .buy`).click(function () { + var num = $(this).attr('num'); + activityCode = $(this).attr('activityCode'); + diamondNum = $(this).attr('diamondNum'); + taskCode = $(this).attr('taskCode'); + taskIcon = $(this).attr('taskIcon'); + taskName = $(this).attr('taskName'); + showValue = $(this).attr('showValue'); + if (num > 0) {//true + $('.sure .sure_in .giftListSuccess .gift').attr('src', taskIcon); + $('.sure .sure_in .giftListSuccess .giftName').text(taskName); + $('.sure .sure_in .giftListSuccess .giftVAlue').text(showValue + '鉆'); + $('.sure').show(); + bodyScroolFun(true); + } else { + toastMsg('當前購買次數不足~') + } +}); +// 二次確認彈窗 +$('.sure .sure_in .ok').click(function () { + exchange(activityCode, diamondNum, taskCode, taskIcon, taskName, showValue); + $('.sure').hide(); + bodyScroolFun(false); +}) +// tab切換 +$('.tab div').click(function () { + var i = $(this).index() + 1; + $('.page1,.page2,.page3').hide(); + $(`.page${i}`).show(); + $(this).addClass(`act`).siblings().removeClass('act') + if (i == 3) { + getRank(); + } +}) +// 記錄接口 +function recordPage (activityCode, componentCode) { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/activity/task/user/record/page', + data: { activityCode, componentCode, pageNum: 1, pageSize: 9999 }, + success (res) { + if (res.code === 200) { + var str = ''; + if (componentCode == 'MENG_DONG_HUA_HE') { + $('.page1 .bg2 ul li').remove() + if (res.data.records.length <= 0) { + str = `
  • 暫無點亮記錄,快去集齊禮物吧~
  • ` + } else { + res.data.records.forEach(res => { + str += ` +
  • +
    點亮時間
    +
    獲得獎勵
    +
  • +
  • +
    +

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

    + ${dateFormat(res.createTime, 'hh/mm/ss')} +
    +
    ${res.rewardName}銘牌
    +
  • + `}) + } + $('.page1 .bg2 ul').append(str); + } else if (componentCode == 'TIAN_MI_SHENG_WEN') { + $('.buyRecords .buyRecords_in ul li').remove(); + if (res.data.records.length <= 0) { + str = `
  • 暫無購買記錄~
  • ` + } else { + res.data.records.forEach(res => { + str += ` +
  • +
    購買時間
    +
    購買禮物
    +
  • +
  • +
    +

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

    + ${dateFormat(res.createTime, 'hh/mm/ss')} +
    +
    ${res.rewardName}禮物*1個
    +
  • + `}) + } + $('.buyRecords .buyRecords_in ul').append(str); + } + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error (err) { + hideLoading(layerIndex) + toastMsg('網路錯誤,請退出重進') + } + }) +} +// 打開購買記錄 +$('.page2 .box .page2Buy_icon').click(function () { + recordPage(activityCode2, 'TIAN_MI_SHENG_WEN',); + $('.buyRecords').show(); + bodyScroolFun(true); +}) + +// 關閉購買記錄 +$('.buyRecords').click(function () { + $('.buyRecords').hide(); + bodyScroolFun(false); +}) + +// 打開規則記錄 +$('.header .rule_icon').click(function () { + $('.rule').show(); + bodyScroolFun(true); +}) + +// 關閉規則記錄 +$('.rule').click(function () { + $('.rule').hide(); + bodyScroolFun(false); +}) + +// 自己榜單展開按鈕 +var scrollBool = true; +$('.page3 .my .icon').click(function () { + $('.page3 .my .scroll').scrollTop(0) + if (scrollBool) { + $('.page3 .my').css({ "height": "8.74667rem", "background": "url(./images/myBg.png) no-repeat", "background-size": "100% 100%" }) + $('.page3 .my .scroll').css({ "overflow-y": "scroll" }) + $('.page3 .my .icon').attr('src', './images/bottom.png') + bodyScroolFun(true); + } else { + $('.page3 .my').css({ "height": "2.2rem", "background": "url(./images/myBg2.png) no-repeat", "background-size": "100% 100%" }) + $('.page3 .my .scroll').css({ "overflow-y": "hidden" }) + $('.page3 .my .icon').attr('src', './images/top.png') + bodyScroolFun(false); + } + scrollBool = !scrollBool; +}) + +// 關閉活動結束彈窗 +$('.end .end_in .but').click(function () { + $('.page1,.page2,.page3').hide(); + $(`.page${3}`).show(); + $('.tab div').removeClass('act'); + $('.tab div').eq(2).addClass('act'); + $('.end').hide(); + bodyScroolFun(false); +}) + +// 關閉充值彈窗 +$('.failureBuy .failureBuy_in .close').click(function () { + $('.failureBuy').hide(); + bodyScroolFun(false); +}) + +// 跳轉充值彈窗 +$('.failureBuy .failureBuy_in .ok').click(function () { + $('.failureBuy').hide(); + bodyScroolFun(false); + if (browser.app) { + if (browser.android) { + let channel = pubInfo.deviceInfo.channel; + console.log(pubInfo.deviceInfo); + if (channel == "google") { + window.androidJsObj.openChargePage(6); + } else { + window.androidJsObj.openChargePage(6); + window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4'; + } + } else if (browser.ios) { + let channel = pubInfo.deviceInfo.channel; + if (channel == "appstore") { + window.webkit.messageHandlers.openChargePage.postMessage(null); + } else { + window.webkit.messageHandlers.chargePayClickPage.postMessage(6); + window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4'; + } + } + } else { + toastMsg('請在app內打開') + } +}) + +// 關閉購買成功彈窗 +$('.success .success_in .but').click(function () { + $('.success').hide(); + bodyScroolFun(false); +}) + +// 關閉二次確認彈窗 +$('.sure .sure_in .close').click(function () { + $('.sure').hide(); + bodyScroolFun(false); +}) + +// 關閉榜單獎勵 +$('.page3Rule').click(function () { + $('.page3Rule').hide(); + bodyScroolFun(false); +}) + +// 打開榜單獎勵 +$('.page3 .top3 .rule_icon').click(function () { + $('.page3Rule').show(); + bodyScroolFun(true); +}) + +//補0操作 +function getzf (num) { + if (parseInt(num) < 10) { + num = '0' + num; + } + return num; +} \ No newline at end of file