Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-11 09:08: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

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

@@ -19,38 +19,40 @@
{{ 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 <div class="calendar-grid">
v-for="character of characterCards" <div
:key="character.title" v-for="character of characterCards"
class="calendar-content" :key="character.title"
> class="calendar-content"
<div class="content-title"> >
{{ character.title }} <div class="content-title">
</div> {{ character.title }}
<div class="content-material"> </div>
<v-img <div class="content-material">
v-for="material of character.materials" <v-img
:key="material.content_id" v-for="material of character.materials"
alt="material.content_id" :key="material.content_id"
:src="material.icon" alt="material.content_id"
class="calendar-icon" :src="material.icon"
@click="showContent(material)" class="calendar-icon"
/> @click="showContent(material)"
</div> />
<div class="content-detail"> </div>
<v-img <div class="content-detail">
v-for="content of character.contents" <v-img
:key="content.content_id" v-for="content of character.contents"
alt="content.content_id" :key="content.content_id"
:src="content.icon" alt="content.content_id"
class="calendar-icon" :src="content.icon"
@click="showContent(content)" class="calendar-icon"
/> @click="showContent(content)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -58,33 +60,35 @@
<div class="card-title"> <div class="card-title">
武器突破 武器突破
</div> </div>
<div <div class="calendar-grid">
v-for="weapon of weaponCards" <div
:key="weapon.title" v-for="weapon of weaponCards"
class="calendar-content" :key="weapon.title"
> class="calendar-content"
<div class="content-title"> >
{{ weapon.title }} <div class="content-title">
</div> {{ weapon.title }}
<div class="content-material"> </div>
<v-img <div class="content-material">
v-for="material of weapon.materials" <v-img
:key="material.content_id" v-for="material of weapon.materials"
alt="material.content_id" :key="material.content_id"
:src="material.icon" alt="material.content_id"
class="calendar-icon" :src="material.icon"
@click="showContent(material)" class="calendar-icon"
/> @click="showContent(material)"
</div> />
<div class="content-detail"> </div>
<v-img <div class="content-detail">
v-for="content of weapon.contents" <v-img
:key="content.content_id" v-for="content of weapon.contents"
alt="content.content_id" :key="content.content_id"
:src="content.icon" alt="content.content_id"
class="calendar-icon" :src="content.icon"
@click="showContent(content)" class="calendar-icon"
/> @click="showContent(content)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -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;
} }