diff --git a/src/assets/css/utils.css b/src/assets/css/utils.css
new file mode 100644
index 00000000..976464db
--- /dev/null
+++ b/src/assets/css/utils.css
@@ -0,0 +1,12 @@
+/* 顶部加载条 */
+.loading-bar {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+/* card action 内的按钮 */
+.card-btn {
+	background: #455167 !important;
+	color: #faf7e8 !important;
+}
diff --git a/src/assets/index.css b/src/assets/index.css
new file mode 100644
index 00000000..b1b9d685
--- /dev/null
+++ b/src/assets/index.css
@@ -0,0 +1,2 @@
+@import "css/utils.css";
+@import "fonts/index.css";
diff --git a/src/main.ts b/src/main.ts
index a836ff27..b5908705 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,6 +8,6 @@ import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
 import { createVuetify } from "vuetify";
 // 全局样式
-import "./assets/fonts/index.css";
+import "./assets/index.css";
 
 createApp(App).use(router).use(store).use(createVuetify()).mount("#app");
diff --git a/src/pages/Achievements.vue b/src/pages/Achievements.vue
index a7d6ea32..324204a0 100644
--- a/src/pages/Achievements.vue
+++ b/src/pages/Achievements.vue
@@ -12,87 +12,91 @@
 			<v-btn @click="exportJson" prepend-icon="mdi-export" class="ms-2 top-btn"> 导出 </v-btn>
 		</template>
 	</v-app-bar>
-	<!-- todo 列表加载速度优化，主要是天地万象的数据量太大了 -->
-	<v-row class="wrap-view">
-		<!-- 左侧菜单 -->
-		<v-col class="left-wrap">
-			<v-card
-				class="left-list"
-				v-for="(series, index) in seriesList"
-				@click="selectSeries(index)"
-				style="margin-bottom: 10px"
-			>
-				<v-list>
-					<v-list-item>
-						<template v-slot:prepend>
-							<v-img width="40px" style="margin-right: 10px" :src="series.icon" />
-						</template>
-						<v-list-item-title>{{ series.name }}</v-list-item-title>
-						<v-list-item-subtitle
-							>{{ series.completed_count }} / {{ series.total_count }}</v-list-item-subtitle
-						>
-					</v-list-item>
-				</v-list>
-			</v-card>
-		</v-col>
-		<!-- 右侧内容-->
-		<v-col cols="9" class="right-wrap">
-			<div class="right-list">
+	<div v-if="loading" class="loading-bar">
+		<v-progress-circular indeterminate color="primary" />
+	</div>
+	<div v-else class="wrap">
+		<v-row class="wrap-view">
+			<!-- 左侧菜单 -->
+			<v-col class="left-wrap">
 				<v-card
-					v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
-					@click="openImg()"
-				>
-					<v-list
-						:style="{
-							backgroundImage: 'url(' + getCardInfo.bg || null + ')',
-							backgroundPosition: 'right',
-							backgroundSize: 'auto 100%',
-							backgroundRepeat: 'no-repeat',
-						}"
-					>
-						<v-list-item>
-							<template v-slot:prepend>
-								<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
-							</template>
-							<v-list-item-title>{{ getCardInfo.name }}</v-list-item-title>
-							<v-list-item-subtitle>{{ getCardInfo.description }}</v-list-item-subtitle>
-						</v-list-item>
-					</v-list>
-				</v-card>
-				<v-divider></v-divider>
-				<v-card
-					v-for="achievement in selectedAchievement"
-					:key="achievement.id"
+					class="left-list"
+					v-for="(series, index) in seriesList"
+					@click="selectSeries(index)"
 					style="margin-bottom: 10px"
 				>
 					<v-list>
 						<v-list-item>
 							<template v-slot:prepend>
-								<v-icon color="rgb(205, 182, 145)">mdi-trophy-variant-outline</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>
-							<template v-slot:append>
-								<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-img width="40px" style="margin-right: 10px" :src="series.icon" />
 							</template>
+							<v-list-item-title>{{ series.name }}</v-list-item-title>
+							<v-list-item-subtitle
+								>{{ series.completed_count }} / {{ series.total_count }}</v-list-item-subtitle
+							>
 						</v-list-item>
 					</v-list>
 				</v-card>
-			</div>
-		</v-col>
-	</v-row>
+			</v-col>
+			<!-- 右侧内容-->
+			<v-col cols="9" class="right-wrap">
+				<div class="right-list">
+					<v-card
+						v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
+						@click="openImg()"
+					>
+						<v-list
+							:style="{
+								backgroundImage: 'url(' + getCardInfo.bg || null + ')',
+								backgroundPosition: 'right',
+								backgroundSize: 'auto 100%',
+								backgroundRepeat: 'no-repeat',
+							}"
+						>
+							<v-list-item>
+								<template v-slot:prepend>
+									<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
+								</template>
+								<v-list-item-title>{{ getCardInfo.name }}</v-list-item-title>
+								<v-list-item-subtitle>{{ getCardInfo.description }}</v-list-item-subtitle>
+							</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-item>
+								<template v-slot:prepend>
+									<v-icon color="rgb(205, 182, 145)">mdi-trophy-variant-outline</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>
+								<template v-slot:append>
+									<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>
+								</template>
+							</v-list-item>
+						</v-list>
+					</v-card>
+				</div>
+			</v-col>
+		</v-row>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -130,9 +134,11 @@ const selectedSeries = ref(-1);
 const selectedAchievement = ref([] as TGAchievement[]);
 const CardsInfo = ref([] as NameCard[]);
 const getCardInfo = ref({} as NameCard);
+const loading = ref(true);
 
-onMounted(() => {
-	loadData();
+onMounted(async () => {
+	await loadData();
+	loading.value = false;
 });
 
 // 加载数据，数据源：合并后的本地数据
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index c252da3a..8910a73e 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -125,13 +125,6 @@ function toOuter(url: string, title: string) {
 </script>
 
 <style lang="css">
-.loading-bar {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
-}
-
 .pool-cards {
 	font-family: Genshin, serif;
 	display: flex;
diff --git a/src/pages/News.vue b/src/pages/News.vue
index 3a58ff2f..6ad70cb7 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -1,74 +1,83 @@
 <template>
-	<v-tabs v-model="tab" align-tabs="start" class="global-font">
-		<v-tab value="notice" title="公告" />
-		<v-tab value="activity" title="活动" />
-		<v-tab value="news" title="新闻" />
-	</v-tabs>
-	<v-window v-model="tab">
-		<v-window-item value="notice">
-			<div class="cards-grid">
-				<v-card
-					v-for="item in postData.notice"
-					class="justify-space-between flex-nowrap"
-					width="320"
-				>
-					<v-img :src="item.cover" cover style="height: 150px"></v-img>
-					<v-card-title>{{ item.title }}</v-card-title>
-					<v-card-actions>
-						<v-btn
-							@click="toPost(item.post_id)"
-							prepend-icon="mdi-arrow-right-circle"
-							class="ms-2 card-btn"
-							>查看</v-btn
-						>
-						<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
-					</v-card-actions>
-				</v-card>
-			</div>
-		</v-window-item>
-		<v-window-item value="activity">
-			<div class="cards-grid">
-				<v-card
-					v-for="item in postData.activity"
-					class="justify-space-between flex-nowrap"
-					width="320"
-				>
-					<v-img :src="item.cover" cover style="height: 150px"></v-img>
-					<v-card-title>{{ item.title }}</v-card-title>
-					<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
-					<v-card-actions>
-						<v-btn
-							@click="toPost(item.post_id)"
-							prepend-icon="mdi-arrow-right-circle"
-							class="ms-2 card-btn"
-							>查看</v-btn
-						>
-						<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
-						<v-btn v-if="item.status === 1" color="ms-2 card-btn-0">进行中</v-btn>
-						<v-btn v-else-if="item.status === 2" color="ms-2 card-btn-2">已结束</v-btn>
-						<v-btn v-else color="ms-2 card-btn-1">评选中</v-btn>
-					</v-card-actions>
-				</v-card>
-			</div>
-		</v-window-item>
-		<v-window-item value="news">
-			<div class="cards-grid">
-				<v-card v-for="item in postData.news" class="justify-space-between flex-nowrap" width="320">
-					<v-img :src="item.cover" cover style="height: 150px"></v-img>
-					<v-card-title>{{ item.title }}</v-card-title>
-					<v-card-actions>
-						<v-btn
-							class="ms-2 card-btn"
-							@click="toPost(item.post_id)"
-							prepend-icon="mdi-arrow-right-circle"
-							>查看</v-btn
-						>
-						<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
-					</v-card-actions>
-				</v-card>
-			</div>
-		</v-window-item>
-	</v-window>
+	<div v-if="loading" class="loading-bar">
+		<v-progress-circular indeterminate color="primary" />
+	</div>
+	<div v-else>
+		<v-tabs v-model="tab" align-tabs="start" class="global-font">
+			<v-tab value="notice" title="公告" />
+			<v-tab value="activity" title="活动" />
+			<v-tab value="news" title="新闻" />
+		</v-tabs>
+		<v-window v-model="tab">
+			<v-window-item value="notice">
+				<div class="cards-grid">
+					<v-card
+						v-for="item in postData.notice"
+						class="justify-space-between flex-nowrap"
+						width="320"
+					>
+						<v-img :src="item.cover" cover style="height: 150px"></v-img>
+						<v-card-title>{{ item.title }}</v-card-title>
+						<v-card-actions>
+							<v-btn
+								@click="toPost(item.post_id)"
+								prepend-icon="mdi-arrow-right-circle"
+								class="ms-2 card-btn"
+								>查看</v-btn
+							>
+							<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
+						</v-card-actions>
+					</v-card>
+				</div>
+			</v-window-item>
+			<v-window-item value="activity">
+				<div class="cards-grid">
+					<v-card
+						v-for="item in postData.activity"
+						class="justify-space-between flex-nowrap"
+						width="320"
+					>
+						<v-img :src="item.cover" cover style="height: 150px"></v-img>
+						<v-card-title>{{ item.title }}</v-card-title>
+						<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
+						<v-card-actions>
+							<v-btn
+								@click="toPost(item.post_id)"
+								prepend-icon="mdi-arrow-right-circle"
+								class="ms-2 card-btn"
+								>查看</v-btn
+							>
+							<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
+							<v-btn v-if="item.status === 1" color="ms-2 card-btn-0">进行中</v-btn>
+							<v-btn v-else-if="item.status === 2" color="ms-2 card-btn-2">已结束</v-btn>
+							<v-btn v-else color="ms-2 card-btn-1">评选中</v-btn>
+						</v-card-actions>
+					</v-card>
+				</div>
+			</v-window-item>
+			<v-window-item value="news">
+				<div class="cards-grid">
+					<v-card
+						v-for="item in postData.news"
+						class="justify-space-between flex-nowrap"
+						width="320"
+					>
+						<v-img :src="item.cover" cover style="height: 150px"></v-img>
+						<v-card-title>{{ item.title }}</v-card-title>
+						<v-card-actions>
+							<v-btn
+								class="ms-2 card-btn"
+								@click="toPost(item.post_id)"
+								prepend-icon="mdi-arrow-right-circle"
+								>查看</v-btn
+							>
+							<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
+						</v-card-actions>
+					</v-card>
+				</div>
+			</v-window-item>
+		</v-window>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -92,6 +101,8 @@ const appStore = useAppStore();
 
 // 渲染模式
 const renderMode = ref(appStore.structureRender);
+// loading
+const loading = ref(true);
 
 // 接口 todo：考虑放到 interface 文件夹下?
 interface CardDataType {
@@ -126,6 +137,7 @@ onMounted(async () => {
 		news: transData(newsRaw, "news"),
 	};
 	tab.value = "notice";
+	loading.value = false;
 });
 
 function transData(rawData: ResponseNewsList, dataType: string): CardDataType[] {
@@ -205,11 +217,6 @@ async function getPost(post_id: string): Promise<ResponsePost> {
 	grid-gap: 20px;
 }
 
-.card-btn {
-	background: #455167 !important;
-	color: #faf7e8 !important;
-}
-
 /* 进行中 */
 .card-btn-0 {
 	background: #3c99aa !important;