Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 fix(calendar): 布局美化，好看很多了

Browse Source
This commit is contained in:
BTMuli
2023-04-09 01:26:23 +08:00
parent 274894f532
commit 4c0041b3e4
1 changed files with 67 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/t-calendar.vue
View File

@@ -19,11 +19,12 @@
{{ text.text }} {{ text.text }}
</v-btn> </v-btn>
</v-list-item-title> </v-list-item-title>
<div v-if="!loading" class="calendar-grid"> <div v-if="!loading" class="calendar-box">
<div class="calendar-single"> <div class="calendar-single">
<div class="card-title"> <div class="card-title">
天赋培养 天赋培养
</div> </div>
<div class="calendar-grid">
<div <div
v-for="character of characterCards" v-for="character of characterCards"
:key="character.title" :key="character.title"
@@ -54,10 +55,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="calendar-single"> <div class="calendar-single">
<div class="card-title"> <div class="card-title">
武器突破 武器突破
</div> </div>
<div class="calendar-grid">
<div <div
v-for="weapon of weaponCards" v-for="weapon of weaponCards"
:key="weapon.title" :key="weapon.title"
@@ -89,6 +92,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</v-list-item> </v-list-item>
</v-list> </v-list>
</template> </template>
@@ -199,14 +203,18 @@ function getContents (day: number) {
border-radius: 10px; border-radius: 10px;
} }
.calendar-box {
margin:5px;
}
.calendar-grid { .calendar-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-gap: 10px; grid-gap: 10px;
margin: 10px;
} }
.calendar-single { .calendar-single {
margin-bottom: 10px;
background: #faf7e8; background: #faf7e8;
color: #546d8b; color: #546d8b;
border-radius: 10px; border-radius: 10px;
@@ -216,13 +224,14 @@ function getContents (day: number) {
font-size: 1.5rem; font-size: 1.5rem;
font-family: Genshin, serif; font-family: Genshin, serif;
color: #546D8B; color: #546D8B;
padding: 10px; padding-left: 15px;
padding-top: 10px;
} }
.calendar-content { .calendar-content {
background: #546D8B; background: #546D8B;
color:#faf7e8; color:#faf7e8;
margin: 10px; margin: 5px;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
} }