星际探索:玩法说明重新布局

This commit is contained in:
qf
2023-03-22 19:21:46 +08:00
parent b68c955de9
commit 9f4c3d90c4
5 changed files with 46 additions and 22 deletions

View File

@@ -19,13 +19,19 @@ body {
height: 100%; height: 100%;
background: url("../images/play_explain.png"); background: url("../images/play_explain.png");
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden;
/* <360px */ } /* <360px */ }
.play .tips {
font-size: 0.32rem;
color: #FFFEFE;
width: 8.1066666667rem;
margin: 2.8666666667rem auto 0.6666666667rem;
line-height: 0.48rem; }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {
.play ul { .play ul {
height: 5rem; height: 5rem;
position: absolute; width: 8.2rem;
top: 3.5rem; margin: 0 auto;
left: 1rem;
overflow-y: scroll; } overflow-y: scroll; }
.play ul::-webkit-scrollbar { .play ul::-webkit-scrollbar {
display: none; display: none;
@@ -34,10 +40,8 @@ body {
@media screen and (min-width: 361px) and (max-width: 375px) { @media screen and (min-width: 361px) and (max-width: 375px) {
.play ul { .play ul {
height: 6rem; height: 6rem;
position: absolute; width: 8.2rem;
top: 4.2rem; margin: 0 auto;
left: 50%;
transform: translateX(-50%);
overflow-y: scroll; } overflow-y: scroll; }
.play ul::-webkit-scrollbar { .play ul::-webkit-scrollbar {
display: none; display: none;
@@ -46,10 +50,8 @@ body {
@media screen and (min-width: 376px) { @media screen and (min-width: 376px) {
.play ul { .play ul {
height: 7rem; height: 7rem;
position: absolute; width: 8.2rem;
top: 4.6rem; margin: 0 auto;
left: 50%;
transform: translateX(-50%);
overflow-y: scroll; } overflow-y: scroll; }
.play ul::-webkit-scrollbar { .play ul::-webkit-scrollbar {
display: none; display: none;

View File

@@ -38,14 +38,26 @@ body {
height: 100%; height: 100%;
background: url('../images/play_explain.png'); background: url('../images/play_explain.png');
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden;
.tips {
font-size: px2rem(24, );
color: #FFFEFE;
width: px2rem(608, );
margin: px2rem(215, ) auto px2rem(50, );
line-height: px2rem(36, );
}
/* <360px */ /* <360px */
@media screen and (max-width:360px) { @media screen and (max-width:360px) {
ul { ul {
height: 5rem; height: 5rem;
position: absolute; width: 8.2rem;
top: 3.5rem; // position: absolute;
left: 1rem; // top: 3.5rem;
// top: 0;
// left: 1rem;
margin: 0 auto;
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -58,10 +70,13 @@ body {
@media screen and (min-width:361px) and (max-width:375px) { @media screen and (min-width:361px) and (max-width:375px) {
ul { ul {
height: 6rem; height: 6rem;
position: absolute; width: 8.2rem;
top: 4.2rem; // position: absolute;
left: 50%; // top: 4.2rem;
transform: translateX(-50%); // top: 0;
// left: 50%;
// transform: translateX(-50%);
margin: 0 auto;
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -75,10 +90,13 @@ body {
@media screen and (min-width:376px) { @media screen and (min-width:376px) {
ul { ul {
height: 7rem; height: 7rem;
position: absolute; width: 8.2rem;
top: 4.6rem; // position: absolute;
left: 50%; // top: 4.6rem;
transform: translateX(-50%); // top: 0;
// left: 50%;
// transform: translateX(-50%);
margin: 0 auto;
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 122 KiB

View File

@@ -13,6 +13,10 @@
<body> <body>
<div class="back"><img src="./images/travel/back.png" alt=""></div> <div class="back"><img src="./images/travel/back.png" alt=""></div>
<div class="play"> <div class="play">
<div class="tips">
1.通过星际探索获得的礼物放到礼物包裹,点开礼物面板即可查看; <br>
2.每次探索100%获得礼物。
</div>
<ul class="explain"> <ul class="explain">
<!-- <li> <!-- <li>
<div class="gift_img"> <div class="gift_img">