This commit is contained in:
Dragon
2023-08-01 22:34:20 +08:00
parent ac7a7b51d3
commit 779dddffc8
5 changed files with 69 additions and 74 deletions

View File

@@ -116,7 +116,7 @@ body {
position: relative; position: relative;
} }
.blessingBag .blessingBag_in { .blessingBag .blessingBag_in {
width: 7.9rem; width: 7.8rem;
height: 2rem; height: 2rem;
position: absolute; position: absolute;
left: 50%; left: 50%;
@@ -125,16 +125,10 @@ body {
border-radius: 0.1333333333rem; border-radius: 0.1333333333rem;
overflow: hidden; overflow: hidden;
} }
.blessingBag .blessingBag_in::-webkit-scrollbar {
width: 0;
display: none;
}
.blessingBag .blessingBag_in ul { .blessingBag .blessingBag_in ul {
height: 100%; list-style: none;
width: 11.2rem;
position: absolute; position: absolute;
left: 0; display: flex;
animation: scrollLeft 3s linear infinite;
} }
.blessingBag .blessingBag_in ul li { .blessingBag .blessingBag_in ul li {
width: 1.8666666667rem; width: 1.8666666667rem;
@@ -181,11 +175,8 @@ body {
padding-left: 0.0666666667rem; padding-left: 0.0666666667rem;
} }
@keyframes scrollLeft { @keyframes scrollLeft {
0% {
left: 0;
}
100% { 100% {
left: -3.3rem; transform: translateX(-3.3rem);
} }
} }
@@ -197,4 +188,12 @@ body {
margin: 0 auto 0.4933333333rem; margin: 0 auto 0.4933333333rem;
} }
.task {
width: 9.28rem;
height: 8.88rem;
background: url(../images/task.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto 0.6266666667rem;
}
/*# sourceMappingURL=index.css.map */ /*# sourceMappingURL=index.css.map */

View File

@@ -134,7 +134,8 @@ body {
position: relative; position: relative;
.blessingBag_in { .blessingBag_in {
width: 7.9rem; // width: 7.9rem;
width: px2rem(585, );
height: 2rem; height: 2rem;
position: absolute; position: absolute;
left: 50%; left: 50%;
@@ -142,21 +143,11 @@ body {
top: 2.4rem; top: 2.4rem;
border-radius: px2rem(10, ); border-radius: px2rem(10, );
overflow: hidden; overflow: hidden;
// overflow-x: scroll;
&::-webkit-scrollbar {
width: 0;
display: none;
}
ul { ul {
height: 100%; list-style: none;
width: 11.2rem;
position: absolute; position: absolute;
left: 0; display: flex;
// left: -3.3rem;
// transition: all 0.3s;
animation: scrollLeft 3s linear infinite;
li { li {
width: px2rem(140, ); width: px2rem(140, );
@@ -208,18 +199,15 @@ body {
} }
@keyframes scrollLeft { @keyframes scrollLeft {
0% {
left: 0;
}
100% { 100% {
left: -3.3rem; transform: translateX(-3.3rem);
// transform: translateX(px2rem(-400));
} }
} }
} }
} }
.magpieBridge { .magpieBridge {
width: px2rem(696, ); width: px2rem(696, );
height: px2rem(730, ); height: px2rem(730, );
@@ -227,3 +215,11 @@ body {
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto px2rem(37, ); margin: 0 auto px2rem(37, );
} }
.task {
width: px2rem(696, );
height: px2rem(666, );
background: url(../images/task.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto px2rem(47, );
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

View File

@@ -40,50 +40,49 @@
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
<div class="page1">
<!-- 福袋展示 --> <!-- 福袋展示 -->
<div class="blessingBag"> <div class="blessingBag">
<div class="blessingBag_in"> <div class="blessingBag_in">
<ul> <ul>
<li> <li>
<img src="./images/logo.png" alt="" > <img src="./images/logo.png" alt="">
<p>飛上雲霄</p> <p>飛上雲霄</p>
<b>177 钻</b> <b>177 钻</b>
</li> </li>
<li> <li>
<img src="./images/logo.png" alt="" > <img src="./images/logo.png" alt="">
<p>情意捲軸</p> <p>情意捲軸</p>
<b>377 钻</b> <b>377 钻</b>
</li> </li>
<li> <li>
<img src="./images/logo.png" alt="" > <img src="./images/logo.png" alt="">
<p>桃花灼灼</p> <p>桃花灼灼</p>
<b>1777 钻</b> <b>1777 钻</b>
</li> </li>
<li> <li>
<img src="./images/logo.png" alt="" > <img src="./images/logo.png" alt="">
<p>花色漫漫</p> <p>花色漫漫</p>
<b>2777 钻</b> <b>2777 钻</b>
</li> </li>
<li> <li>
<img src="./images/logo.png" alt="" > <img src="./images/logo.png" alt="">
<p>相思鳥</p> <p>相思鳥</p>
<b>13140 钻</b> <b>13140 钻</b>
</li> </li>
<li> <li>
<img src="./images/logo.png" alt="" > <img src="./images/logo.png" alt="">
<p>緣定今生</p> <p>緣定今生</p>
<b>27777 钻</b> <b>27777 钻</b>
</li> </li>
<li>
<img src="./images/logo.png" alt="" >
<p>飛上雲霄</p>
<b>177 钻</b>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- 鹊桥 --> <!-- 鹊桥 -->
<div class="magpieBridge"></div> <div class="magpieBridge"></div>
<!-- 每日任务 -->
<div class="task"></div>
</div>
</body> </body>
</html> </html>

View File

@@ -47,6 +47,7 @@ $(function () {
window.webkit.messageHandlers.closeWebView.postMessage(null) window.webkit.messageHandlers.closeWebView.postMessage(null)
} }
}) })
$('.blessingBag .blessingBag_in ul').css('animation', 'scrollLeft 3s linear infinite');
}, 100) }, 100)
}) })
}) })