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

fix(achievements): 样式优化

Browse Source
This commit is contained in:
BTMuli
2023-03-22 01:19:06 +08:00
parent 03d8fd2344
commit ec0f207730
1 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/Achievements.vue
View File

@@ -25,7 +25,7 @@
@click="selectSeries(index)" @click="selectSeries(index)"
style="margin-bottom: 10px" style="margin-bottom: 10px"
> >
<v-list> <v-list class="card-bg-left">
<v-list-item> <v-list-item>
<template v-slot:prepend> <template v-slot:prepend>
<v-img width="40px" style="margin-right: 10px" :src="series.icon" /> <v-img width="40px" style="margin-right: 10px" :src="series.icon" />
@@ -43,6 +43,7 @@
<div class="right-list"> <div class="right-list">
<v-card <v-card
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17" v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
style="margin-bottom: 10px"
@click="openImg()" @click="openImg()"
> >
<v-list <v-list
@@ -62,22 +63,27 @@
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-card> </v-card>
<v-divider></v-divider>
<v-card <v-card
v-for="achievement in selectedAchievement" v-for="achievement in selectedAchievement"
:key="achievement.id" :key="achievement.id"
style="margin-bottom: 10px" style="margin-bottom: 10px"
> >
<v-list> <v-list class="card-bg-right">
<v-list-item> <v-list-item>
<template v-slot:prepend> <template v-slot:prepend>
<v-icon color="rgb(205, 182, 145)">mdi-trophy-variant-outline</v-icon> <v-icon :color="achievement.completed ? '#FFD22F' : '#393B40'">
{{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }}
</v-icon>
</template> </template>
<v-list-item-title>{{ achievement.name }}</v-list-item-title> <v-list-item-title>
<v-list-item-subtitle>{{ {{ achievement.name }}
achievement.completed ? achievement.completed_time : achievement.description {{ achievement.progress !== 0 ? "| " + achievement.progress : null }}
}}</v-list-item-subtitle> </v-list-item-title>
<v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle>
<template v-slot:append> <template v-slot:append>
<span v-show="achievement.completed" class="right-time">{{
achievement.completed_time
}}</span>
<v-btn width="80px" class="reward-btn"> <v-btn width="80px" class="reward-btn">
<template v-slot:append> <template v-slot:append>
<img <img
@@ -305,6 +311,16 @@ async function exportJson() {
border-bottom: 2px solid #e6e6e6; border-bottom: 2px solid #e6e6e6;
font-family: Genshin, "serif"; font-family: Genshin, "serif";
} }
/* 卡片背景 */
.card-bg-left {
background-image: linear-gradient(90deg, #ffffff 0%, #5c6474 150%);
}
.card-bg-right {
background-image: linear-gradient(90deg, #ffffff 0%, #393b40 150%);
}
/* 左侧系列 */ /* 左侧系列 */
.left-wrap { .left-wrap {
height: 100%; height: 100%;
@@ -317,6 +333,13 @@ async function exportJson() {
overflow: auto; overflow: auto;
} }
/* 成就完成时间 */
.right-time {
margin-right: 10px;
font-size: small;
color: #393b40;
}
/* 成就奖励 */ /* 成就奖励 */
.reward-btn { .reward-btn {
background: #565f6f !important; background: #565f6f !important;