成就系统手机端适配,开始界面优化

This commit is contained in:
unanmed 2023-02-22 22:45:33 +08:00
parent 355378de9a
commit 5dbe7654a4
3 changed files with 45 additions and 3 deletions

View File

@ -19,7 +19,7 @@
<div id="list"> <div id="list">
<div id="achievement-list" :style="{ left: `-${offset}%` }"> <div id="achievement-list" :style="{ left: `-${offset}%` }">
<div v-for="t of column" class="achievement-one"> <div v-for="t of column" class="achievement-one">
<Scroll class="list-scroll"> <Scroll class="list-scroll" :width="10">
<div class="list-div"> <div class="list-div">
<div <div
v-for="a of getAllAchievements(t)" v-for="a of getAllAchievements(t)"
@ -316,4 +316,35 @@ function exit() {
white-space: nowrap; white-space: nowrap;
} }
} }
@media screen and (max-width: 600px) {
#achievement {
width: 90vw;
height: 90vh;
font-size: 4.2vw;
}
#column {
font-size: 4.3vw;
}
.list-one {
width: 90%;
.list-content {
height: 15vh;
}
.list-text {
font-size: 3.2vw;
}
.list-end {
margin-bottom: 0.8vh;
.end-info {
font-size: 3.2vw;
}
}
}
}
</style> </style>

View File

@ -104,4 +104,11 @@ onMounted(async () => {
top: -30vh; top: -30vh;
} }
} }
@media screen and (max-width: 600px) {
#complete-box {
width: 90vw;
left: 5%;
}
}
</style> </style>

View File

@ -527,20 +527,24 @@ onUnmounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-start;
right: 5%; right: 5%;
bottom: 10%; bottom: 10%;
font-size: 1.3em; font-size: 1.3em;
z-index: 1; z-index: 1;
width: 50%;
.setting-buttons { .setting-buttons {
margin-left: 40%; margin-left: 4%;
color: white; color: white;
transition: color 0.2s linear; transition: color 0.2s linear;
cursor: pointer; cursor: pointer;
} }
.setting-buttons2 { .setting-buttons2 {
margin-left: 40%; margin-left: 4%;
position: relative;
top: 1px;
} }
#sound { #sound {