diff --git a/view/peko/activity/2024-lover/css/index.css b/view/peko/activity/2024-lover/css/index.css new file mode 100644 index 0000000..52d9374 --- /dev/null +++ b/view/peko/activity/2024-lover/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-lover/css/index.scss b/view/peko/activity/2024-lover/css/index.scss new file mode 100644 index 0000000..754f463 --- /dev/null +++ b/view/peko/activity/2024-lover/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-lover/images/1.png b/view/peko/activity/2024-lover/images/1.png new file mode 100644 index 0000000..2a7cba3 Binary files /dev/null and b/view/peko/activity/2024-lover/images/1.png differ diff --git a/view/peko/activity/2024-lover/images/2.png b/view/peko/activity/2024-lover/images/2.png new file mode 100644 index 0000000..5937d05 Binary files /dev/null and b/view/peko/activity/2024-lover/images/2.png differ diff --git a/view/peko/activity/2024-lover/images/3.png b/view/peko/activity/2024-lover/images/3.png new file mode 100644 index 0000000..d408c92 Binary files /dev/null and b/view/peko/activity/2024-lover/images/3.png differ diff --git a/view/peko/activity/2024-lover/images/4.png b/view/peko/activity/2024-lover/images/4.png new file mode 100644 index 0000000..05a1487 Binary files /dev/null and b/view/peko/activity/2024-lover/images/4.png differ diff --git a/view/peko/activity/2024-lover/images/5.png b/view/peko/activity/2024-lover/images/5.png new file mode 100644 index 0000000..8f6f55d Binary files /dev/null and b/view/peko/activity/2024-lover/images/5.png differ diff --git a/view/peko/activity/2024-lover/images/6.png b/view/peko/activity/2024-lover/images/6.png new file mode 100644 index 0000000..021b5cc Binary files /dev/null and b/view/peko/activity/2024-lover/images/6.png differ diff --git a/view/peko/activity/2024-lover/images/bottom.png b/view/peko/activity/2024-lover/images/bottom.png new file mode 100644 index 0000000..90ac695 Binary files /dev/null and b/view/peko/activity/2024-lover/images/bottom.png differ diff --git a/view/peko/activity/2024-lover/images/buyBgPub.png b/view/peko/activity/2024-lover/images/buyBgPub.png new file mode 100644 index 0000000..e54a3f3 Binary files /dev/null and b/view/peko/activity/2024-lover/images/buyBgPub.png differ diff --git a/view/peko/activity/2024-lover/images/buyTitle.png b/view/peko/activity/2024-lover/images/buyTitle.png new file mode 100644 index 0000000..06d72b8 Binary files /dev/null and b/view/peko/activity/2024-lover/images/buyTitle.png differ diff --git a/view/peko/activity/2024-lover/images/buy_z.png b/view/peko/activity/2024-lover/images/buy_z.png new file mode 100644 index 0000000..1fc58ed Binary files /dev/null and b/view/peko/activity/2024-lover/images/buy_z.png differ diff --git a/view/peko/activity/2024-lover/images/close.png b/view/peko/activity/2024-lover/images/close.png new file mode 100644 index 0000000..a7623a3 Binary files /dev/null and b/view/peko/activity/2024-lover/images/close.png differ diff --git a/view/peko/activity/2024-lover/images/diamond.png b/view/peko/activity/2024-lover/images/diamond.png new file mode 100644 index 0000000..bf3360d Binary files /dev/null and b/view/peko/activity/2024-lover/images/diamond.png differ diff --git a/view/peko/activity/2024-lover/images/end.png b/view/peko/activity/2024-lover/images/end.png new file mode 100644 index 0000000..5cc892a Binary files /dev/null and b/view/peko/activity/2024-lover/images/end.png differ diff --git a/view/peko/activity/2024-lover/images/endTitle.png b/view/peko/activity/2024-lover/images/endTitle.png new file mode 100644 index 0000000..dce9a2d Binary files /dev/null and b/view/peko/activity/2024-lover/images/endTitle.png differ diff --git a/view/peko/activity/2024-lover/images/failureBuyTitle.png b/view/peko/activity/2024-lover/images/failureBuyTitle.png new file mode 100644 index 0000000..fd631d1 Binary files /dev/null and b/view/peko/activity/2024-lover/images/failureBuyTitle.png differ diff --git a/view/peko/activity/2024-lover/images/giftNameBg.png b/view/peko/activity/2024-lover/images/giftNameBg.png new file mode 100644 index 0000000..1533e5c Binary files /dev/null and b/view/peko/activity/2024-lover/images/giftNameBg.png differ diff --git a/view/peko/activity/2024-lover/images/header.png b/view/peko/activity/2024-lover/images/header.png new file mode 100644 index 0000000..b1c9276 Binary files /dev/null and b/view/peko/activity/2024-lover/images/header.png differ diff --git a/view/peko/activity/2024-lover/images/logo.png b/view/peko/activity/2024-lover/images/logo.png new file mode 100644 index 0000000..e428641 Binary files /dev/null and b/view/peko/activity/2024-lover/images/logo.png differ diff --git a/view/peko/activity/2024-lover/images/loveBox.png b/view/peko/activity/2024-lover/images/loveBox.png new file mode 100644 index 0000000..1b45677 Binary files /dev/null and b/view/peko/activity/2024-lover/images/loveBox.png differ diff --git a/view/peko/activity/2024-lover/images/love_h.png b/view/peko/activity/2024-lover/images/love_h.png new file mode 100644 index 0000000..79b26bf Binary files /dev/null and b/view/peko/activity/2024-lover/images/love_h.png differ diff --git a/view/peko/activity/2024-lover/images/love_z.png b/view/peko/activity/2024-lover/images/love_z.png new file mode 100644 index 0000000..a54a07a Binary files /dev/null and b/view/peko/activity/2024-lover/images/love_z.png differ diff --git a/view/peko/activity/2024-lover/images/mp.jpg b/view/peko/activity/2024-lover/images/mp.jpg new file mode 100644 index 0000000..1b67069 Binary files /dev/null and b/view/peko/activity/2024-lover/images/mp.jpg differ diff --git a/view/peko/activity/2024-lover/images/mp.png b/view/peko/activity/2024-lover/images/mp.png new file mode 100644 index 0000000..974f345 Binary files /dev/null and b/view/peko/activity/2024-lover/images/mp.png differ diff --git a/view/peko/activity/2024-lover/images/myBg.png b/view/peko/activity/2024-lover/images/myBg.png new file mode 100644 index 0000000..e01eaea Binary files /dev/null and b/view/peko/activity/2024-lover/images/myBg.png differ diff --git a/view/peko/activity/2024-lover/images/myBg2.png b/view/peko/activity/2024-lover/images/myBg2.png new file mode 100644 index 0000000..1658cd3 Binary files /dev/null and b/view/peko/activity/2024-lover/images/myBg2.png differ diff --git a/view/peko/activity/2024-lover/images/ok.png b/view/peko/activity/2024-lover/images/ok.png new file mode 100644 index 0000000..55c6d9b Binary files /dev/null and b/view/peko/activity/2024-lover/images/ok.png differ diff --git a/view/peko/activity/2024-lover/images/page1Bg1Title.png b/view/peko/activity/2024-lover/images/page1Bg1Title.png new file mode 100644 index 0000000..f933a44 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page1Bg1Title.png differ diff --git a/view/peko/activity/2024-lover/images/page1Bg2Title.png b/view/peko/activity/2024-lover/images/page1Bg2Title.png new file mode 100644 index 0000000..d9617f7 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page1Bg2Title.png differ diff --git a/view/peko/activity/2024-lover/images/page1_bg1.png b/view/peko/activity/2024-lover/images/page1_bg1.png new file mode 100644 index 0000000..763107a Binary files /dev/null and b/view/peko/activity/2024-lover/images/page1_bg1.png differ diff --git a/view/peko/activity/2024-lover/images/page1_bg2.png b/view/peko/activity/2024-lover/images/page1_bg2.png new file mode 100644 index 0000000..ef3501a Binary files /dev/null and b/view/peko/activity/2024-lover/images/page1_bg2.png differ diff --git a/view/peko/activity/2024-lover/images/page2Bg.png b/view/peko/activity/2024-lover/images/page2Bg.png new file mode 100644 index 0000000..c6a8945 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page2Bg.png differ diff --git a/view/peko/activity/2024-lover/images/page2But.png b/view/peko/activity/2024-lover/images/page2But.png new file mode 100644 index 0000000..383ad8b Binary files /dev/null and b/view/peko/activity/2024-lover/images/page2But.png differ diff --git a/view/peko/activity/2024-lover/images/page2Buy_icon.png b/view/peko/activity/2024-lover/images/page2Buy_icon.png new file mode 100644 index 0000000..e9f6c77 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page2Buy_icon.png differ diff --git a/view/peko/activity/2024-lover/images/page2RuleTitle.png b/view/peko/activity/2024-lover/images/page2RuleTitle.png new file mode 100644 index 0000000..6ad1b82 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page2RuleTitle.png differ diff --git a/view/peko/activity/2024-lover/images/page2Title.png b/view/peko/activity/2024-lover/images/page2Title.png new file mode 100644 index 0000000..1e96f43 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page2Title.png differ diff --git a/view/peko/activity/2024-lover/images/page3Li.png b/view/peko/activity/2024-lover/images/page3Li.png new file mode 100644 index 0000000..e11043b Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3Li.png differ diff --git a/view/peko/activity/2024-lover/images/page3RuleBg.png b/view/peko/activity/2024-lover/images/page3RuleBg.png new file mode 100644 index 0000000..ee1ecff Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3RuleBg.png differ diff --git a/view/peko/activity/2024-lover/images/page3Rule_icon.png b/view/peko/activity/2024-lover/images/page3Rule_icon.png new file mode 100644 index 0000000..7e786a9 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3Rule_icon.png differ diff --git a/view/peko/activity/2024-lover/images/page3Rule_inBg.png b/view/peko/activity/2024-lover/images/page3Rule_inBg.png new file mode 100644 index 0000000..e76b729 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3Rule_inBg.png differ diff --git a/view/peko/activity/2024-lover/images/page3Title.png b/view/peko/activity/2024-lover/images/page3Title.png new file mode 100644 index 0000000..49359fd Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3Title.png differ diff --git a/view/peko/activity/2024-lover/images/page3Top1.png b/view/peko/activity/2024-lover/images/page3Top1.png new file mode 100644 index 0000000..96a699b Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3Top1.png differ diff --git a/view/peko/activity/2024-lover/images/page3Top2.png b/view/peko/activity/2024-lover/images/page3Top2.png new file mode 100644 index 0000000..1c77104 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3Top2.png differ diff --git a/view/peko/activity/2024-lover/images/page3Top3.png b/view/peko/activity/2024-lover/images/page3Top3.png new file mode 100644 index 0000000..fc55481 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3Top3.png differ diff --git a/view/peko/activity/2024-lover/images/page3boxBg.png b/view/peko/activity/2024-lover/images/page3boxBg.png new file mode 100644 index 0000000..b0583b8 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3boxBg.png differ diff --git a/view/peko/activity/2024-lover/images/page3mp.png b/view/peko/activity/2024-lover/images/page3mp.png new file mode 100644 index 0000000..1cd1d2b Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3mp.png differ diff --git a/view/peko/activity/2024-lover/images/page3qp.png b/view/peko/activity/2024-lover/images/page3qp.png new file mode 100644 index 0000000..886f43b Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3qp.png differ diff --git a/view/peko/activity/2024-lover/images/page3ts.png b/view/peko/activity/2024-lover/images/page3ts.png new file mode 100644 index 0000000..e733723 Binary files /dev/null and b/view/peko/activity/2024-lover/images/page3ts.png differ diff --git a/view/peko/activity/2024-lover/images/pageTop3.png b/view/peko/activity/2024-lover/images/pageTop3.png new file mode 100644 index 0000000..8a645f5 Binary files /dev/null and b/view/peko/activity/2024-lover/images/pageTop3.png differ diff --git a/view/peko/activity/2024-lover/images/qp.png b/view/peko/activity/2024-lover/images/qp.png new file mode 100644 index 0000000..af7d9e1 Binary files /dev/null and b/view/peko/activity/2024-lover/images/qp.png differ diff --git a/view/peko/activity/2024-lover/images/ruleTitle.png b/view/peko/activity/2024-lover/images/ruleTitle.png new file mode 100644 index 0000000..219fb57 Binary files /dev/null and b/view/peko/activity/2024-lover/images/ruleTitle.png differ diff --git a/view/peko/activity/2024-lover/images/sureTitle.png b/view/peko/activity/2024-lover/images/sureTitle.png new file mode 100644 index 0000000..b3028e7 Binary files /dev/null and b/view/peko/activity/2024-lover/images/sureTitle.png differ diff --git a/view/peko/activity/2024-lover/images/tab1.png b/view/peko/activity/2024-lover/images/tab1.png new file mode 100644 index 0000000..bd2967d Binary files /dev/null and b/view/peko/activity/2024-lover/images/tab1.png differ diff --git a/view/peko/activity/2024-lover/images/tab2.png b/view/peko/activity/2024-lover/images/tab2.png new file mode 100644 index 0000000..c36962f Binary files /dev/null and b/view/peko/activity/2024-lover/images/tab2.png differ diff --git a/view/peko/activity/2024-lover/images/tasks1.png b/view/peko/activity/2024-lover/images/tasks1.png new file mode 100644 index 0000000..3993b94 Binary files /dev/null and b/view/peko/activity/2024-lover/images/tasks1.png differ diff --git a/view/peko/activity/2024-lover/images/tasks2.png b/view/peko/activity/2024-lover/images/tasks2.png new file mode 100644 index 0000000..70d2bc5 Binary files /dev/null and b/view/peko/activity/2024-lover/images/tasks2.png differ diff --git a/view/peko/activity/2024-lover/images/top.png b/view/peko/activity/2024-lover/images/top.png new file mode 100644 index 0000000..020ef62 Binary files /dev/null and b/view/peko/activity/2024-lover/images/top.png differ diff --git a/view/peko/activity/2024-lover/images/travel/back.png b/view/peko/activity/2024-lover/images/travel/back.png new file mode 100644 index 0000000..7b81adb Binary files /dev/null and b/view/peko/activity/2024-lover/images/travel/back.png differ diff --git a/view/peko/activity/2024-lover/index.html b/view/peko/activity/2024-lover/index.html new file mode 100644 index 0000000..e4ebb1f --- /dev/null +++ b/view/peko/activity/2024-lover/index.html @@ -0,0 +1,391 @@ + + + +
+ + +活動期間,開出「萌動花盒」中的6種不同禮物
+可獲得「初心萌動」限定銘牌
+今日獎勵已發放
+獎勵自動發放,每日僅可領取一次,點亮結果和獎勵每日中午12點自動刷新
+ +2024/2/1
+ 00:00:00 +每達到52000禮物值,可解鎖1次直購權
+禮物值
+當前可購買: X個
+每達到1314520禮物值,可解鎖1次直購權
+禮物值
+當前可購買: X個
+糖果戀人頭飾-情人節限定
+熱戀值
+有效期:24H
+糖果戀人氣泡·情人節限定
+熱戀值
+有效期:24H
+2024/2/1
+ 00:00:00 +${dateFormat(res.createTime, 'yyyy/MM/dd')}
+ ${dateFormat(res.createTime, 'hh/mm/ss')} +${dateFormat(res.createTime, 'yyyy/MM/dd')}
+ ${dateFormat(res.createTime, 'hh/mm/ss')} +