fix(achievements): 样式优化

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;