暂存
This commit is contained in:
Dragon
@@ -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 */
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
view/peko/activity/act-2023-qx/images/drop.png
Normal file
BIN
view/peko/activity/act-2023-qx/images/drop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
view/peko/activity/act-2023-qx/images/go.png
Normal file
BIN
view/peko/activity/act-2023-qx/images/go.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
BIN
view/peko/activity/act-2023-qx/images/out.png
Normal file
BIN
view/peko/activity/act-2023-qx/images/out.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
view/peko/activity/act-2023-qx/images/taskIcon.png
Normal file
BIN
view/peko/activity/act-2023-qx/images/taskIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -113,9 +113,54 @@
|
||||
<div class="but1">投放喜鹊*1</div>
|
||||
<!-- 投放喜鹊*10 -->
|
||||
<div class="but10">投放喜鹊*10</div>
|
||||
<!-- 文案展示 -->
|
||||
<p class="text">將喜鵲投入鵲橋，拉近牛郎和織女的距離<br>
|
||||
鵲橋相會後，參與搭建鵲橋的用戶可領取活動獎勵</p>
|
||||
<!-- 进度条 -->
|
||||
<div class="line">
|
||||
<div class="line_in"></div>
|
||||
</div>
|
||||
<!-- 头饰框 -->
|
||||
<div class="ts">
|
||||
<img src="./images/logo.png" alt="" class="">
|
||||
<b>鵲仙橋頭飾*3天</b>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 每日任务 -->
|
||||
<div class="task"></div>
|
||||
<div class="task">
|
||||
<div class="box1">
|
||||
<p class="title">完成每日任務可獲得喜鵲，任務每日0點刷新<br>
|
||||
任務獎勵自動發放</p>
|
||||
<div class="task1">
|
||||
<img src="./images/taskIcon.png" alt="">
|
||||
<div class="but">去完成</div>
|
||||
<b class="p1">訪問活動頁</b>
|
||||
<b class="p2">獎勵：喜鵲*5</b>
|
||||
</div>
|
||||
<div class="task2">
|
||||
<img src="./images/taskIcon.png" alt="">
|
||||
<div class="but">去完成</div>
|
||||
<b class="p1">任意房間發送彈幕（0/3)</b>
|
||||
<b class="p2">獎勵：喜鵲*5</b>
|
||||
</div>
|
||||
<div class="task3">
|
||||
<img src="./images/taskIcon.png" alt="">
|
||||
<div class="but">去完成</div>
|
||||
<b class="p1">在任意直播間停留</b>
|
||||
<div class="line">
|
||||
<div class="line_in"></div>
|
||||
<img src="./images/drop.png" alt="" class="drop1">
|
||||
<img src="./images/drop.png" alt="" class="drop2">
|
||||
<span class="sp1">+2喜鵲</span>
|
||||
<span class="sp2">+3喜鵲</span>
|
||||
<span class="sp3">+5喜鵲</span>
|
||||
<span class="sp4">10分钟</span>
|
||||
<span class="sp5">20分钟</span>
|
||||
<span class="sp6">30分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user