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

fix(achievements): 优化样式

Browse Source
This commit is contained in:
BTMuli
2023-03-28 17:02:01 +08:00
parent de1b5cdc2b
commit 1475dae018
1 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/Achievements.vue
View File

@@ -13,7 +13,9 @@
single-line single-line
hide-details hide-details
@click:append="searchCard" @click:append="searchCard"
@keyup.enter="searchCard"
></v-text-field> ></v-text-field>
<v-spacer></v-spacer>
<template v-slot:append> <template v-slot:append>
<!-- 导入按钮 --> <!-- 导入按钮 -->
<v-btn @click="importJson" prepend-icon="mdi-import" class="ms-2 top-btn">导入</v-btn> <v-btn @click="importJson" prepend-icon="mdi-import" class="ms-2 top-btn">导入</v-btn>
@@ -91,17 +93,12 @@
<span v-show="achievement.completed" class="right-time">{{ <span v-show="achievement.completed" class="right-time">{{
achievement.completed_time achievement.completed_time
}}</span> }}</span>
<v-btn width="80px" class="reward-btn"> <v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')">
<template v-slot:append> <v-img src="/source/material/原石.webp" sizes="32" />
<img <div class="reward-num">
src="/source/material/原石.webp" <span>{{ achievement.reward }}</span>
alt="原石" </div>
class="icon" </v-card>
style="width: 32px"
/>
</template>
{{ achievement.reward }}
</v-btn>
</template> </template>
</v-list-item> </v-list-item>
</v-list> </v-list>
@@ -205,6 +202,9 @@ async function selectSeries(index: number) {
function openImg() { function openImg() {
createTGWindow(getCardInfo.value.profile, "nameCard", getCardInfo.value.name, 840, 400, false); createTGWindow(getCardInfo.value.profile, "nameCard", getCardInfo.value.name, 840, 400, false);
} }
function showMaterial(path: string) {
createTGWindow(path, "material", "原石", 256, 256, false);
}
async function searchCard() { async function searchCard() {
if (search.value === "") { if (search.value === "") {
await dialog.message("请输入关键字"); await dialog.message("请输入关键字");
@@ -411,8 +411,27 @@ async function exportJson() {
} }
/* 成就奖励 */ /* 成就奖励 */
.reward-btn { .reward-card {
background: #565f6f !important; position: relative;
color: #ece5d8 !important; width: 32px;
height: 42px;
background: #414244;
border-radius: 5px;
}
.reward-num {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 15px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
display: flex;
font-size: 10px;
font-family: Genshin, serif;
border-radius: 0 0 5px 5px;
justify-content: center;
align-items: center;
} }
</style> </style>