From 1475dae01863865f996f27560fac5e909752fcec Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 28 Mar 2023 17:02:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(achievements):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Achievements.vue | 47 ++++++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/pages/Achievements.vue b/src/pages/Achievements.vue
index ff1ffd95..46bb0c1f 100644
--- a/src/pages/Achievements.vue
+++ b/src/pages/Achievements.vue
@@ -13,7 +13,9 @@
 			single-line
 			hide-details
 			@click:append="searchCard"
+			@keyup.enter="searchCard"
 		></v-text-field>
+		<v-spacer></v-spacer>
 		<template v-slot:append>
 			<!-- 导入按钮 -->
 			<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">{{
 									achievement.completed_time
 								}}</span>
-								<v-btn width="80px" class="reward-btn">
-									<template v-slot:append>
-										<img
-											src="/source/material/原石.webp"
-											alt="原石"
-											class="icon"
-											style="width: 32px"
-										/>
-									</template>
-									{{ achievement.reward }}
-								</v-btn>
+								<v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')">
+									<v-img src="/source/material/原石.webp" sizes="32" />
+									<div class="reward-num">
+										<span>{{ achievement.reward }}</span>
+									</div>
+								</v-card>
 							</template>
 						</v-list-item>
 					</v-list>
@@ -205,6 +202,9 @@ async function selectSeries(index: number) {
 function openImg() {
 	createTGWindow(getCardInfo.value.profile, "nameCard", getCardInfo.value.name, 840, 400, false);
 }
+function showMaterial(path: string) {
+	createTGWindow(path, "material", "原石", 256, 256, false);
+}
 async function searchCard() {
 	if (search.value === "") {
 		await dialog.message("请输入关键字");
@@ -411,8 +411,27 @@ async function exportJson() {
 }
 
 /* 成就奖励 */
-.reward-btn {
-	background: #565f6f !important;
-	color: #ece5d8 !important;
+.reward-card {
+	position: relative;
+	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>