From cf62f20398e80aa7151f5092c8c2b457f1a2d659 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 1 Apr 2023 01:48:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(css):=20=E5=BA=94=E7=94=A8=E6=95=B4?=
 =?UTF-8?q?=E4=BD=93=E8=89=B2=E8=B0=83=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/index.css          | 15 +++++++++++++++
 src/components/t-position.vue |  8 ++++----
 src/components/t-sidebar.vue  |  3 +--
 src/pages/Achievements.vue    |  7 ++++---
 src/pages/Config.vue          | 13 +++++++------
 src/pages/Home.vue            |  8 ++++----
 src/pages/News.vue            | 23 ++++-------------------
 7 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index 721aaf61..31d68479 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -19,3 +19,18 @@
 .mys-post-json .jv-toggle {
 	background-color: #faf7e8 !important;
 }
+
+/* card action 内的按钮 */
+.card-btn {
+	background: #546d8b !important;
+	color: #faf7e8 !important;
+}
+
+.card-btn svg {
+	width: 18px;
+	height: 18px;
+}
+
+.card-btn svg path {
+	fill: #faf7e8;
+}
diff --git a/src/components/t-position.vue b/src/components/t-position.vue
index 695fa938..c39d75e9 100644
--- a/src/components/t-position.vue
+++ b/src/components/t-position.vue
@@ -7,9 +7,9 @@
 			<div class="position-grid">
 				<v-card
 					v-for="card in positionCards"
-					style="background: #2d2f33; color: #f4d8a8; border-radius: 10px"
+					style="background: #faf7e8; color: #546d8b; border-radius: 10px"
 				>
-					<v-list style="background: #2d2f33; color: #f4d8a8">
+					<v-list style="background: #faf7e8; color: #546d8b">
 						<v-list-item :title="card.title" :subtitle="card.abstract">
 							<template v-slot:prepend>
 								<v-avatar rounded="0" @click="toPost(card)" style="cursor: pointer">
@@ -112,8 +112,8 @@ async function toPost(card: PositionCard) {
 <style lang="css">
 .position-card {
 	margin: 0 10px;
-	font-family: "Genshin-Light", serif;
-	background: rgba(0, 0, 0, 0.5);
+	font-family: "Genshin", serif;
+	background: #546d8b;
 	border-radius: 10px;
 }
 
diff --git a/src/components/t-sidebar.vue b/src/components/t-sidebar.vue
index e379affc..f1a7d6ad 100644
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -1,6 +1,5 @@
 <template>
-	<!-- todo 侧边栏宽度调整 -->
-	<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #ece5d8">
+	<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #faf7e8">
 		<v-list class="sideList" density="compact" v-model:opened="open" nav>
 			<!-- 负责收缩侧边栏 -->
 			<v-list-item @click="collapse">
diff --git a/src/pages/Achievements.vue b/src/pages/Achievements.vue
index 179dd93a..48aa6241 100644
--- a/src/pages/Achievements.vue
+++ b/src/pages/Achievements.vue
@@ -67,7 +67,8 @@
 				<v-list class="card-right" v-for="achievement in selectedAchievement" :key="achievement.id">
 					<v-list-item>
 						<template v-slot:prepend>
-							<v-icon :color="achievement.completed ? '#FFD22F' : '#393B40'">
+							<v-icon :color="achievement.completed ? '#fec90b' : '#485466'">
+								<!-- todo 图标替换 -->
 								{{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }}
 							</v-icon>
 						</template>
@@ -388,8 +389,8 @@ async function exportJson() {
 .card-right {
 	border-radius: 10px;
 	margin: 10px;
-	background: rgba(0, 0, 0, 0.5);
-	color: #f4d8a8;
+	background: #546d8b;
+	color: #faf7e8;
 }
 
 /* 成就完成时间 */
diff --git a/src/pages/Config.vue b/src/pages/Config.vue
index 3df5949c..02536cd9 100644
--- a/src/pages/Config.vue
+++ b/src/pages/Config.vue
@@ -13,7 +13,7 @@
 				<v-list-item-title>
 					应用版本
 					<v-btn
-						color="#455167"
+						class="card-btn"
 						size="small"
 						@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
 						>Alpha</v-btn
@@ -168,15 +168,16 @@ async function setDefaultConfig() {
 .config-list {
 	margin: 10px;
 	font-family: "Genshin-Light", serif;
-	background: rgba(0, 0, 0, 0.5);
-	color: #faf7e8;
+	background: #faf7e8;
+	color: #546d8b;
 	border-radius: 10px;
 }
 
 .config-header {
 	margin-top: 10px;
-	background: #76726c;
-	color: #f4d8a8;
+	font-family: Genshin, serif;
+	background: #faf7e8;
+	color: #fec90b;
 	font-size: large;
 }
 
@@ -185,7 +186,7 @@ async function setDefaultConfig() {
 	height: 40px;
 	margin-right: 15px;
 	padding: 5px;
-	background: #2d2f33;
+	background: #5b738f;
 	border-radius: 10px;
 }
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 4ab9639a..c9e8e3c8 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -136,17 +136,17 @@ async function toPost(pool: GachaCard) {
 
 .pool-card {
 	margin: 10px;
-	background: rgba(0, 0, 0, 0.5);
+	background: #546d8b;
 	border-radius: 10px;
-	color: #f4d8a8;
+	color: #faf7e8;
 }
 
 .pool-list {
-	background: #76726c;
+	background: #546d8b;
 }
 
 .pool-list-item {
-	background: #76726c;
+	background: #546d8b;
 	font-family: Genshin, serif;
 	color: #fec90b;
 }
diff --git a/src/pages/News.vue b/src/pages/News.vue
index 454f8b8d..3dc02f55 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -11,7 +11,7 @@
 		<v-window v-model="tab">
 			<v-window-item value="notice">
 				<div class="news-grid">
-					<v-card v-for="item in postData.notice" class="news-card" width="320">
+					<v-card v-for="item in postData.notice" class="news-card" width="340">
 						<v-img :src="item.cover" cover style="height: 150px" @click="toPost(item)"></v-img>
 						<v-card-title>{{ item.title }}</v-card-title>
 						<v-card-actions>
@@ -42,7 +42,7 @@
 			</v-window-item>
 			<v-window-item value="activity">
 				<div class="news-grid">
-					<v-card class="news-card" v-for="item in postData.activity" width="320">
+					<v-card class="news-card" v-for="item in postData.activity" width="340">
 						<v-img :src="item.cover" cover style="height: 150px" @click="toPost(item)"></v-img>
 						<v-card-title>{{ item.title }}</v-card-title>
 						<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
@@ -84,7 +84,7 @@
 			</v-window-item>
 			<v-window-item value="news">
 				<div class="news-grid">
-					<v-card class="news-card" v-for="item in postData.news" width="320">
+					<v-card class="news-card" v-for="item in postData.news" width="340">
 						<v-img :src="item.cover" cover style="height: 150px" @click="toPost(item)"></v-img>
 						<v-card-title>{{ item.title }}</v-card-title>
 						<v-card-actions>
@@ -243,7 +243,7 @@ async function toJson(item: NewsCard) {
 .news-grid {
 	font-family: Genshin, serif;
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
 	grid-gap: 20px;
 }
 
@@ -263,21 +263,6 @@ async function toJson(item: NewsCard) {
 	color: #546d8b;
 }
 
-/* card action 内的按钮 */
-.card-btn {
-	background: #546d8b !important;
-	color: #faf7e8 !important;
-}
-
-.card-btn svg {
-	width: 18px;
-	height: 18px;
-}
-
-.card-btn svg path {
-	fill: #faf7e8;
-}
-
 /* load more */
 .load-news {
 	font-family: Genshin, serif;