diff --git a/view/peko/activity/act-2023-qx/css/index.css b/view/peko/activity/act-2023-qx/css/index.css
index 54aa02e..32d263b 100644
--- a/view/peko/activity/act-2023-qx/css/index.css
+++ b/view/peko/activity/act-2023-qx/css/index.css
@@ -107,7 +107,10 @@ body {
background-size: 100% 100%;
}
-.blessingBag {
+.page1 {
+ padding-bottom: 0.6266666667rem;
+}
+.page1 .blessingBag {
width: 8.88rem;
height: 5.04rem;
background: url(../images/blessingBag.png) no-repeat;
@@ -115,7 +118,7 @@ body {
margin: 0 auto 0.4933333333rem;
position: relative;
}
-.blessingBag .blessingBag_in {
+.page1 .blessingBag .blessingBag_in {
width: 7.8rem;
height: 2rem;
position: absolute;
@@ -125,13 +128,13 @@ body {
border-radius: 0.1333333333rem;
overflow: hidden;
}
-.blessingBag .blessingBag_in ul {
+.page1 .blessingBag .blessingBag_in ul {
list-style: none;
position: absolute;
display: flex;
animation: scrollLeft 11s linear infinite;
}
-.blessingBag .blessingBag_in ul li {
+.page1 .blessingBag .blessingBag_in ul li {
width: 1.8666666667rem;
height: 1.8666666667rem;
background: url(../images/blessingBagLiBg.png) no-repeat;
@@ -140,7 +143,7 @@ body {
margin-top: 0.045rem;
position: relative;
}
-.blessingBag .blessingBag_in ul li img {
+.page1 .blessingBag .blessingBag_in ul li img {
position: absolute;
left: 51%;
top: 50%;
@@ -149,7 +152,7 @@ body {
height: 1.2533333333rem;
transform: translate(-50%, -50%);
}
-.blessingBag .blessingBag_in ul li b {
+.page1 .blessingBag .blessingBag_in ul li b {
padding: 0 0.0933333333rem;
height: 0.2666666667rem;
line-height: 0.2666666667rem;
@@ -162,7 +165,7 @@ body {
top: 0.1066666667rem;
right: 0.0666666667rem;
}
-.blessingBag .blessingBag_in ul li p {
+.page1 .blessingBag .blessingBag_in ul li p {
width: 1.68rem;
height: 0.3146666667rem;
line-height: 0.3146666667rem;
@@ -180,8 +183,7 @@ body {
transform: translateX(-11.2rem);
}
}
-
-.magpieBridge {
+.page1 .magpieBridge {
width: 9.28rem;
height: 9.7333333333rem;
background: url(../images/magpieBridge.png) no-repeat;
@@ -189,7 +191,7 @@ body {
margin: 0 auto 0.4933333333rem;
position: relative;
}
-.magpieBridge .magpieBridgeBg {
+.page1 .magpieBridge .magpieBridgeBg {
width: 8.9066666667rem;
height: 6.5466666667rem;
position: absolute;
@@ -197,7 +199,7 @@ body {
transform: translateX(-50%);
top: 0.2rem;
}
-.magpieBridge .birdNum {
+.page1 .magpieBridge .birdNum {
height: 0.4533333333rem;
line-height: 0.4533333333rem;
position: absolute;
@@ -205,17 +207,17 @@ body {
top: 1.3466666667rem;
vertical-align: middle;
}
-.magpieBridge .birdNum .bird {
+.page1 .magpieBridge .birdNum .bird {
display: inline-block;
width: 0.4533333333rem;
height: 0.4266666667rem;
margin-right: 0rem;
}
-.magpieBridge .birdNum b {
+.page1 .magpieBridge .birdNum b {
color: #CA56A9;
font-size: 0.2933333333rem;
}
-.magpieBridge .but1 {
+.page1 .magpieBridge .but1 {
width: 2.9066666667rem;
height: 1.16rem;
line-height: 1.0666666667rem;
@@ -230,7 +232,7 @@ body {
background-size: 100% 100%;
text-shadow: 0px 0.0533333333rem 0.0266666667rem rgba(193, 64, 253, 0.67);
}
-.magpieBridge .but10 {
+.page1 .magpieBridge .but10 {
width: 2.9066666667rem;
height: 1.16rem;
line-height: 1.0666666667rem;
@@ -245,13 +247,305 @@ body {
background-size: 100% 100%;
text-shadow: 0px 0.0533333333rem 0.0266666667rem rgba(193, 64, 253, 0.67);
}
-
-.task {
+.page1 .magpieBridge .text {
+ width: 6.8rem;
+ text-align: center;
+ color: #CA56A9;
+ font-size: 0.2933333333rem;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 5.7866666667rem;
+ line-height: 0.45rem;
+}
+.page1 .magpieBridge .line {
+ width: 6.5333333333rem;
+ height: 0.52rem;
+ box-sizing: border-box;
+ padding: 0.12rem 0.1066666667rem 0.1333333333rem;
+ position: absolute;
+ left: 0.92rem;
+ top: 6.9466666667rem;
+ background: url(../images/lineBg.png) no-repeat;
+ background-size: 100% 100%;
+}
+.page1 .magpieBridge .line .line_in {
+ width: 10%;
+ height: 100%;
+ background: linear-gradient(0deg, #F772D1, #A639D1);
+ border-radius: 0.224rem;
+}
+.page1 .magpieBridge .ts {
+ width: 0.9333333333rem;
+ height: 0.9333333333rem;
+ background: url(../images/lineTx.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: 0.9066666667rem;
+ top: 6.7333333333rem;
+}
+.page1 .magpieBridge .ts img {
+ position: absolute;
+ width: 0.72rem;
+ height: 0.72rem;
+ border-radius: 50%;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -53%);
+}
+.page1 .magpieBridge .ts b {
+ position: absolute;
+ text-align: center;
+ font-size: 0.2133333333rem;
+ color: #BE4A98;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: -0.36rem;
+ white-space: nowrap;
+}
+.page1 .task {
width: 9.28rem;
height: 8.88rem;
background: url(../images/task.png) no-repeat;
background-size: 100% 100%;
- margin: 0 auto 0.6266666667rem;
+ margin: 0 auto 0rem;
+ position: relative;
+}
+.page1 .task .box1 .title {
+ width: 6.4rem;
+ position: absolute;
+ top: 1.72rem;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #CA56A9;
+ font-size: 0.32rem;
+ text-align: center;
+ line-height: 0.45rem;
+}
+.page1 .task .box1 .task1 {
+ width: 8.5066666667rem;
+ height: 1.44rem;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 2.9333333333rem;
+}
+.page1 .task .box1 .task1 .but {
+ width: 1.5733333333rem;
+ height: 0.5066666667rem;
+ line-height: 0.5066666667rem;
+ text-align: center;
+ color: #fff;
+ font-size: 0.2933333333rem;
+ background: url(../images/go.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: 0.4133333333rem;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.page1 .task .box1 .task1 .out {
+ color: #DB5593;
+ background: url(../images/out.png) no-repeat;
+ background-size: 100% 100%;
+}
+.page1 .task .box1 .task1 img {
+ width: 0.9066666667rem;
+ height: 1.04rem;
+ position: absolute;
+ left: 0.5333333333rem;
+ top: 0.2666666667rem;
+}
+.page1 .task .box1 .task1 .p1 {
+ color: #CA56A9;
+ font-size: 0.32rem;
+ left: 1.7066666667rem;
+ top: 0.3466666667rem;
+ font-weight: bold;
+ position: absolute;
+}
+.page1 .task .box1 .task1 .p2 {
+ color: #CA56A9;
+ font-size: 0.2666666667rem;
+ left: 1.72rem;
+ top: 0.84rem;
+ position: absolute;
+}
+.page1 .task .box1 .task2 {
+ width: 8.5066666667rem;
+ height: 1.44rem;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 4.6666666667rem;
+}
+.page1 .task .box1 .task2 .but {
+ width: 1.5733333333rem;
+ height: 0.5066666667rem;
+ line-height: 0.5066666667rem;
+ text-align: center;
+ color: #fff;
+ font-size: 0.2933333333rem;
+ background: url(../images/go.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: 0.4133333333rem;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.page1 .task .box1 .task2 .out {
+ color: #DB5593;
+ background: url(../images/out.png) no-repeat;
+ background-size: 100% 100%;
+}
+.page1 .task .box1 .task2 img {
+ width: 0.9066666667rem;
+ height: 1.04rem;
+ position: absolute;
+ left: 0.5333333333rem;
+ top: 0.2666666667rem;
+}
+.page1 .task .box1 .task2 .p1 {
+ color: #CA56A9;
+ font-size: 0.32rem;
+ left: 1.7066666667rem;
+ top: 0.3466666667rem;
+ font-weight: bold;
+ position: absolute;
+}
+.page1 .task .box1 .task2 .p2 {
+ color: #CA56A9;
+ font-size: 0.2666666667rem;
+ left: 1.72rem;
+ top: 0.84rem;
+ position: absolute;
+}
+.page1 .task .box1 .task3 {
+ width: 8.5066666667rem;
+ height: 2.1066666667rem;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 6.4rem;
+}
+.page1 .task .box1 .task3 .but {
+ width: 1.5733333333rem;
+ height: 0.5066666667rem;
+ line-height: 0.5066666667rem;
+ text-align: center;
+ color: #fff;
+ font-size: 0.2933333333rem;
+ background: url(../images/go.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: 0.4133333333rem;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.page1 .task .box1 .task3 .out {
+ color: #DB5593;
+ background: url(../images/out.png) no-repeat;
+ background-size: 100% 100%;
+}
+.page1 .task .box1 .task3 img {
+ width: 0.9066666667rem;
+ height: 1.04rem;
+ position: absolute;
+ left: 0.5333333333rem;
+ top: 0.6rem;
+}
+.page1 .task .box1 .task3 .p1 {
+ position: absolute;
+ color: #CA56A9;
+ font-size: 0.32rem;
+ font-weight: bold;
+ left: 1.72rem;
+ top: 0.3466666667rem;
+}
+.page1 .task .box1 .task3 .line {
+ width: 3.7333333333rem;
+ height: 0.1866666667rem;
+ background: #A722AC;
+ position: absolute;
+ left: 1.6266666667rem;
+ top: 1.2666666667rem;
+ border-radius: 0.1866666667rem;
+}
+.page1 .task .box1 .task3 .line .line_in {
+ width: 10%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: linear-gradient(0deg, #F772D1, #A639D1);
+ border-radius: 0.1866666667rem;
+}
+.page1 .task .box1 .task3 .line .drop1 {
+ width: 0.24rem;
+ height: 0.24rem;
+ position: absolute;
+ z-index: 2;
+ left: 1.8666666667rem;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.page1 .task .box1 .task3 .line .drop2 {
+ width: 0.24rem;
+ height: 0.24rem;
+ position: absolute;
+ z-index: 2;
+ left: 94%;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.page1 .task .box1 .task3 .line .sp1 {
+ color: #CA56A9;
+ font-size: 0.24rem;
+ position: absolute;
+ left: 0.0933333333rem;
+ top: -0.4666666667rem;
+ white-space: nowrap;
+}
+.page1 .task .box1 .task3 .line .sp2 {
+ color: #CA56A9;
+ font-size: 0.24rem;
+ position: absolute;
+ left: 1.5333333333rem;
+ top: -0.4666666667rem;
+ white-space: nowrap;
+}
+.page1 .task .box1 .task3 .line .sp3 {
+ color: #CA56A9;
+ font-size: 0.24rem;
+ position: absolute;
+ left: 3.0266666667rem;
+ top: -0.4666666667rem;
+ white-space: nowrap;
+}
+.page1 .task .box1 .task3 .line .sp4 {
+ color: #CA56A9;
+ font-size: 0.24rem;
+ position: absolute;
+ left: 0.0933333333rem;
+ bottom: -0.4666666667rem;
+ white-space: nowrap;
+}
+.page1 .task .box1 .task3 .line .sp5 {
+ color: #CA56A9;
+ font-size: 0.24rem;
+ position: absolute;
+ left: 1.5333333333rem;
+ bottom: -0.4666666667rem;
+ white-space: nowrap;
+}
+.page1 .task .box1 .task3 .line .sp6 {
+ color: #CA56A9;
+ font-size: 0.24rem;
+ position: absolute;
+ left: 3.0266666667rem;
+ bottom: -0.4666666667rem;
+ white-space: nowrap;
}
/*# sourceMappingURL=index.css.map */
diff --git a/view/peko/activity/act-2023-qx/css/index.scss b/view/peko/activity/act-2023-qx/css/index.scss
index 8258449..828e156 100644
--- a/view/peko/activity/act-2023-qx/css/index.scss
+++ b/view/peko/activity/act-2023-qx/css/index.scss
@@ -126,164 +126,497 @@ body {
background-size: 100% 100%;
}
-.blessingBag {
- width: px2rem(666, );
- height: px2rem(378, );
- background: url(../images/blessingBag.png) no-repeat;
- background-size: 100% 100%;
- margin: 0 auto px2rem(37, );
- position: relative;
+.page1 {
+ padding-bottom: px2rem(47, );
- .blessingBag_in {
- width: px2rem(585, );
- // width: px2rem(560, );
- height: 2rem;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- top: 2.4rem;
- border-radius: px2rem(10, );
- overflow: hidden;
+ .blessingBag {
+ width: px2rem(666, );
+ height: px2rem(378, );
+ background: url(../images/blessingBag.png) no-repeat;
+ background-size: 100% 100%;
+ margin: 0 auto px2rem(37, );
+ position: relative;
- ul {
- list-style: none;
+ .blessingBag_in {
+ width: px2rem(585, );
+ // width: px2rem(560, );
+ height: 2rem;
position: absolute;
- display: flex;
- animation: scrollLeft 11s linear infinite;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 2.4rem;
+ border-radius: px2rem(10, );
+ overflow: hidden;
- li {
- width: px2rem(140, );
- height: px2rem(140, );
- background: url(../images/blessingBagLiBg.png) no-repeat;
- background-size: 100% 100%;
- float: left;
- margin-top: 0.045rem;
- position: relative;
+ ul {
+ list-style: none;
+ position: absolute;
+ display: flex;
+ animation: scrollLeft 11s linear infinite;
- img {
- position: absolute;
- left: 51%;
- top: 50%;
- border-radius: 50%;
- width: px2rem(94, );
- height: px2rem(94, );
- transform: translate(-50%, -50%);
+ li {
+ width: px2rem(140, );
+ height: px2rem(140, );
+ background: url(../images/blessingBagLiBg.png) no-repeat;
+ background-size: 100% 100%;
+ float: left;
+ margin-top: 0.045rem;
+ position: relative;
+
+ img {
+ position: absolute;
+ left: 51%;
+ top: 50%;
+ border-radius: 50%;
+ width: px2rem(94, );
+ height: px2rem(94, );
+ transform: translate(-50%, -50%);
+ }
+
+ b {
+ padding: 0 px2rem(7, );
+ height: px2rem(20, );
+ line-height: px2rem(20, );
+ text-align: center;
+ color: #fff;
+ background: linear-gradient(0deg, #DC87FF, #BF2BED, #DD89FF);
+ font-size: px2rem(13, );
+ border-radius: 0px px2rem(10, ) 0px px2rem(19, );
+ position: absolute;
+ top: px2rem(8, );
+ right: px2rem(5, );
+ }
+
+ p {
+ width: px2rem(126, );
+ height: px2rem(23.6, );
+ line-height: px2rem(23.6, );
+ background: linear-gradient(90deg, #FB80C3, rgba(253, 252, 254, 0.1));
+ position: absolute;
+ left: px2rem(7, );
+ bottom: px2rem(22, );
+ color: #fff;
+ font-size: px2rem(13, );
+ box-sizing: border-box;
+ padding-left: px2rem(5, );
+ }
}
+ }
- b {
- padding: 0 px2rem(7, );
- height: px2rem(20, );
- line-height: px2rem(20, );
- text-align: center;
- color: #fff;
- background: linear-gradient(0deg, #DC87FF, #BF2BED, #DD89FF);
- font-size: px2rem(13, );
- border-radius: 0px px2rem(10, ) 0px px2rem(19, );
- position: absolute;
- top: px2rem(8, );
- right: px2rem(5, );
- }
-
- p {
- width: px2rem(126, );
- height: px2rem(23.6, );
- line-height: px2rem(23.6, );
- background: linear-gradient(90deg, #FB80C3, rgba(253, 252, 254, 0.1));
- position: absolute;
- left: px2rem(7, );
- bottom: px2rem(22, );
- color: #fff;
- font-size: px2rem(13, );
- box-sizing: border-box;
- padding-left: px2rem(5, );
+ @keyframes scrollLeft {
+ 100% {
+ // transform: translateX(-3.4rem);
+ transform: translateX(px2rem(-840));
}
}
}
+ }
- @keyframes scrollLeft {
- 100% {
- // transform: translateX(-3.4rem);
- transform: translateX(px2rem(-840));
+ .magpieBridge {
+ width: px2rem(696, );
+ height: px2rem(730, );
+ background: url(../images/magpieBridge.png) no-repeat;
+ background-size: 100% 100%;
+ margin: 0 auto px2rem(37, );
+ position: relative;
+
+ .magpieBridgeBg {
+ width: px2rem(668, );
+ height: px2rem(491, );
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: px2rem(15, );
+ }
+
+ .birdNum {
+ height: px2rem(34, );
+ line-height: px2rem(34, );
+ position: absolute;
+ right: px2rem(44, );
+ top: px2rem(101, );
+ vertical-align: middle;
+
+ .bird {
+ display: inline-block;
+ width: px2rem(34, );
+ height: px2rem(32, );
+ margin-right: px2rem(0, );
+ }
+
+ b {
+ color: #CA56A9;
+ font-size: px2rem(22, );
}
}
- }
-}
-.magpieBridge {
- width: px2rem(696, );
- height: px2rem(730, );
- background: url(../images/magpieBridge.png) no-repeat;
- background-size: 100% 100%;
- margin: 0 auto px2rem(37, );
- position: relative;
-
- .magpieBridgeBg {
- width: px2rem(668, );
- height: px2rem(491, );
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- top: px2rem(15, );
- }
-
- .birdNum {
- height: px2rem(34, );
- line-height: px2rem(34, );
- position: absolute;
- right: px2rem(44, );
- top: px2rem(101, );
- vertical-align: middle;
-
- .bird {
- display: inline-block;
- width: px2rem(34, );
- height: px2rem(32, );
- margin-right: px2rem(0, );
+ .but1 {
+ width: px2rem(218, );
+ height: px2rem(87, );
+ line-height: px2rem(80, );
+ text-align: center;
+ color: #FFFFFF;
+ font-size: px2rem(30, );
+ font-weight: bold;
+ position: absolute;
+ bottom: px2rem(34, );
+ left: px2rem(112, );
+ background: url(../images/1.png) no-repeat;
+ background-size: 100% 100%;
+ text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
}
- b {
+ .but10 {
+ width: px2rem(218, );
+ height: px2rem(87, );
+ line-height: px2rem(80, );
+ text-align: center;
+ color: #FFFFFF;
+ font-size: px2rem(30, );
+ font-weight: bold;
+ position: absolute;
+ bottom: px2rem(34, );
+ right: px2rem(112, );
+ background: url(../images/10.png) no-repeat;
+ background-size: 100% 100%;
+ text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
+ }
+
+ .text {
+ width: px2rem(510, );
+ text-align: center;
color: #CA56A9;
font-size: px2rem(22, );
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: px2rem(434, );
+ line-height: 0.45rem;
+ }
+
+ .line {
+ width: px2rem(490, );
+ height: px2rem(39, );
+ box-sizing: border-box;
+ padding: px2rem(9, ) px2rem(8, ) px2rem(10, );
+ position: absolute;
+ left: px2rem(69, );
+ top: px2rem(521, );
+ background: url(../images/lineBg.png) no-repeat;
+ background-size: 100% 100%;
+
+ .line_in {
+ width: 10%;
+ height: 100%;
+ background: linear-gradient(0deg, #F772D1, #A639D1);
+ border-radius: px2rem(16.8, );
+ }
+ }
+
+ .ts {
+ width: px2rem(70, );
+ height: px2rem(70, );
+ background: url(../images/lineTx.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: px2rem(68, );
+ top: px2rem(505, );
+
+ img {
+ position: absolute;
+ width: px2rem(54, );
+ height: px2rem(54, );
+ border-radius: 50%;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -53%);
+ }
+
+ b {
+ position: absolute;
+ text-align: center;
+ font-size: px2rem(16, );
+ color: #BE4A98;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: px2rem(-27, );
+ white-space: nowrap;
+ }
}
}
- .but1 {
- width: px2rem(218, );
- height: px2rem(87, );
- line-height: px2rem(80, );
- text-align: center;
- color: #FFFFFF;
- font-size: px2rem(30, );
- font-weight: bold;
- position: absolute;
- bottom: px2rem(34, );
- left: px2rem(112, );
- background: url(../images/1.png) no-repeat;
+ .task {
+ width: px2rem(696, );
+ height: px2rem(666, );
+ background: url(../images/task.png) no-repeat;
background-size: 100% 100%;
- text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
- }
+ margin: 0 auto px2rem(0, );
+ position: relative;
- .but10 {
- width: px2rem(218, );
- height: px2rem(87, );
- line-height: px2rem(80, );
- text-align: center;
- color: #FFFFFF;
- font-size: px2rem(30, );
- font-weight: bold;
- position: absolute;
- bottom: px2rem(34, );
- right: px2rem(112, );
- background: url(../images/10.png) no-repeat;
- background-size: 100% 100%;
- text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
- }
-}
+ .box1 {
+ .title {
+ width: px2rem(480, );
+ position: absolute;
+ top: px2rem(129, );
+ left: 50%;
+ transform: translateX(-50%);
+ color: #CA56A9;
+ font-size: px2rem(24, );
+ text-align: center;
+ line-height: 0.45rem;
+ }
-.task {
- width: px2rem(696, );
- height: px2rem(666, );
- background: url(../images/task.png) no-repeat;
- background-size: 100% 100%;
- margin: 0 auto px2rem(47, );
+ .task1 {
+ width: px2rem(638, );
+ height: px2rem(108, );
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: px2rem(220, );
+
+ .but {
+ width: px2rem(118, );
+ height: px2rem(38, );
+ line-height: px2rem(38, );
+ text-align: center;
+ color: #fff;
+ font-size: px2rem(22, );
+ background: url(../images/go.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: px2rem(31, );
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .out {
+ color: #DB5593;
+ background: url(../images/out.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ img {
+ width: px2rem(68, );
+ height: px2rem(78, );
+ position: absolute;
+ left: px2rem(40, );
+ top: px2rem(20, );
+ }
+
+ .p1 {
+ color: #CA56A9;
+ font-size: px2rem(24, );
+ left: px2rem(128, );
+ top: px2rem(26, );
+ font-weight: bold;
+ position: absolute;
+ }
+
+ .p2 {
+ color: #CA56A9;
+ font-size: px2rem(20, );
+ left: px2rem(129, );
+ top: px2rem(63, );
+ position: absolute;
+ }
+ }
+
+ .task2 {
+ width: px2rem(638, );
+ height: px2rem(108, );
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: px2rem(350, );
+
+ .but {
+ width: px2rem(118, );
+ height: px2rem(38, );
+ line-height: px2rem(38, );
+ text-align: center;
+ color: #fff;
+ font-size: px2rem(22, );
+ background: url(../images/go.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: px2rem(31, );
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .out {
+ color: #DB5593;
+ background: url(../images/out.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ img {
+ width: px2rem(68, );
+ height: px2rem(78, );
+ position: absolute;
+ left: px2rem(40, );
+ top: px2rem(20, );
+ }
+
+ .p1 {
+ color: #CA56A9;
+ font-size: px2rem(24, );
+ left: px2rem(128, );
+ top: px2rem(26, );
+ font-weight: bold;
+ position: absolute;
+ }
+
+ .p2 {
+ color: #CA56A9;
+ font-size: px2rem(20, );
+ left: px2rem(129, );
+ top: px2rem(63, );
+ position: absolute;
+ }
+ }
+
+ .task3 {
+ width: px2rem(638, );
+ height: px2rem(158, );
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: px2rem(480, );
+
+ .but {
+ width: px2rem(118, );
+ height: px2rem(38, );
+ line-height: px2rem(38, );
+ text-align: center;
+ color: #fff;
+ font-size: px2rem(22, );
+ background: url(../images/go.png) no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ right: px2rem(31, );
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .out {
+ color: #DB5593;
+ background: url(../images/out.png) no-repeat;
+ background-size: 100% 100%;
+ }
+
+ img {
+ width: px2rem(68, );
+ height: px2rem(78, );
+ position: absolute;
+ left: px2rem(40, );
+ top: px2rem(45, );
+ }
+
+ .p1 {
+ position: absolute;
+ color: #CA56A9;
+ font-size: px2rem(24, );
+ font-weight: bold;
+ left: px2rem(129, );
+ top: px2rem(26, );
+ }
+
+ .line {
+ width: px2rem(280, );
+ height: px2rem(14, );
+ background: #A722AC;
+ position: absolute;
+ left: px2rem(122, );
+ top: px2rem(95, );
+ border-radius: px2rem(14, );
+
+ .line_in {
+ width: 10%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: linear-gradient(0deg, #F772D1, #A639D1);
+ border-radius: px2rem(14, );
+ }
+
+ .drop1 {
+ width: px2rem(18, );
+ height: px2rem(18, );
+ position: absolute;
+ z-index: 2;
+ left: px2rem(140, );
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .drop2 {
+ width: px2rem(18, );
+ height: px2rem(18, );
+ position: absolute;
+ z-index: 2;
+ left: 94%;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .sp1 {
+ color: #CA56A9;
+ font-size: px2rem(18, );
+ position: absolute;
+ left: px2rem(7, );
+ top: px2rem(-35, );
+ white-space: nowrap;
+ }
+
+ .sp2 {
+ color: #CA56A9;
+ font-size: px2rem(18, );
+ position: absolute;
+ left: px2rem(115, );
+ top: px2rem(-35, );
+ white-space: nowrap;
+ }
+
+ .sp3 {
+ color: #CA56A9;
+ font-size: px2rem(18, );
+ position: absolute;
+ left: px2rem(227, );
+ top: px2rem(-35, );
+ white-space: nowrap;
+ }
+
+ .sp4 {
+ color: #CA56A9;
+ font-size: px2rem(18, );
+ position: absolute;
+ left: px2rem(7, );
+ bottom: px2rem(-35, );
+ white-space: nowrap;
+ }
+
+ .sp5 {
+ color: #CA56A9;
+ font-size: px2rem(18, );
+ position: absolute;
+ left: px2rem(115, );
+ bottom: px2rem(-35, );
+ white-space: nowrap;
+ }
+
+ .sp6 {
+ color: #CA56A9;
+ font-size: px2rem(18, );
+ position: absolute;
+ left: px2rem(227, );
+ bottom: px2rem(-35, );
+ white-space: nowrap;
+ }
+ }
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/view/peko/activity/act-2023-qx/images/drop.png b/view/peko/activity/act-2023-qx/images/drop.png
new file mode 100644
index 0000000..9bf3e6a
Binary files /dev/null and b/view/peko/activity/act-2023-qx/images/drop.png differ
diff --git a/view/peko/activity/act-2023-qx/images/go.png b/view/peko/activity/act-2023-qx/images/go.png
new file mode 100644
index 0000000..cdeece7
Binary files /dev/null and b/view/peko/activity/act-2023-qx/images/go.png differ
diff --git a/view/peko/activity/act-2023-qx/images/line.png b/view/peko/activity/act-2023-qx/images/line.png
deleted file mode 100644
index 67e7b30..0000000
Binary files a/view/peko/activity/act-2023-qx/images/line.png and /dev/null differ
diff --git a/view/peko/activity/act-2023-qx/images/out.png b/view/peko/activity/act-2023-qx/images/out.png
new file mode 100644
index 0000000..5908793
Binary files /dev/null and b/view/peko/activity/act-2023-qx/images/out.png differ
diff --git a/view/peko/activity/act-2023-qx/images/taskIcon.png b/view/peko/activity/act-2023-qx/images/taskIcon.png
new file mode 100644
index 0000000..cccf122
Binary files /dev/null and b/view/peko/activity/act-2023-qx/images/taskIcon.png differ
diff --git a/view/peko/activity/act-2023-qx/index.html b/view/peko/activity/act-2023-qx/index.html
index 2e4ac9c..2544ffe 100644
--- a/view/peko/activity/act-2023-qx/index.html
+++ b/view/peko/activity/act-2023-qx/index.html
@@ -113,9 +113,54 @@
投放喜鹊*1
投放喜鹊*10
+
+ 將喜鵲投入鵲橋，拉近牛郎和織女的距離
+ 鵲橋相會後，參與搭建鵲橋的用戶可領取活動獎勵
+
+
+
+
+
+
鵲仙橋頭飾*3天
+
+
+
完成每日任務可獲得喜鵲，任務每日0點刷新
+ 任務獎勵自動發放
+
+
+
去完成
+
訪問活動頁
+
獎勵：喜鵲*5
+
+
+
+
去完成
+
任意房間發送彈幕（0/3)
+
獎勵：喜鵲*5
+
+
+
+
去完成
+
在任意直播間停留
+
+
+
+
+
+2喜鵲
+
+3喜鵲
+
+5喜鵲
+
10分钟
+
20分钟
+
30分钟
+
+
+
+