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

---
 src/pages/Achievements.vue | 39 ++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/pages/Achievements.vue b/src/pages/Achievements.vue
index ad50f925..a838d9c6 100644
--- a/src/pages/Achievements.vue
+++ b/src/pages/Achievements.vue
@@ -25,7 +25,7 @@
 					@click="selectSeries(index)"
 					style="margin-bottom: 10px"
 				>
-					<v-list>
+					<v-list class="card-bg-left">
 						<v-list-item>
 							<template v-slot:prepend>
 								<v-img width="40px" style="margin-right: 10px" :src="series.icon" />
@@ -43,6 +43,7 @@
 				<div class="right-list">
 					<v-card
 						v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
+						style="margin-bottom: 10px"
 						@click="openImg()"
 					>
 						<v-list
@@ -62,22 +63,27 @@
 							</v-list-item>
 						</v-list>
 					</v-card>
-					<v-divider></v-divider>
 					<v-card
 						v-for="achievement in selectedAchievement"
 						:key="achievement.id"
 						style="margin-bottom: 10px"
 					>
-						<v-list>
+						<v-list class="card-bg-right">
 							<v-list-item>
 								<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>
-								<v-list-item-title>{{ achievement.name }}</v-list-item-title>
-								<v-list-item-subtitle>{{
-									achievement.completed ? achievement.completed_time : achievement.description
-								}}</v-list-item-subtitle>
+								<v-list-item-title>
+									{{ achievement.name }}
+									{{ achievement.progress !== 0 ? "| " + achievement.progress : null }}
+								</v-list-item-title>
+								<v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle>
 								<template v-slot:append>
+									<span v-show="achievement.completed" class="right-time">{{
+										achievement.completed_time
+									}}</span>
 									<v-btn width="80px" class="reward-btn">
 										<template v-slot:append>
 											<img
@@ -305,6 +311,16 @@ async function exportJson() {
 	border-bottom: 2px solid #e6e6e6;
 	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 {
 	height: 100%;
@@ -317,6 +333,13 @@ async function exportJson() {
 	overflow: auto;
 }
 
+/* 成就完成时间 */
+.right-time {
+	margin-right: 10px;
+	font-size: small;
+	color: #393b40;
+}
+
 /* 成就奖励 */
 .reward-btn {
 	background: #565f6f !important;