♻️ 完善 box-bg 层级，减少 border

src/pages/User/Gacha.vue

@@ -300,7 +300,6 @@ watch(uidCur, async (newUid) => {
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin-bottom: 10px;
   background: var(--box-bg-1);
@@ -333,7 +332,7 @@ watch(uidCur, async (newUid) => {
   height: calc(100vh - 130px);
   align-items: center;
   justify-content: left;
-  border: 1px solid var(--common-shadow-2);
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   background: var(--box-bg-1);
 }

src/pages/User/Record.vue

@@ -118,7 +118,6 @@ async function shareRecord(): Promise<void> {
   width: 100%;
   flex-direction: column;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-1);
   row-gap: 5px;

src/pages/common/Achievements.vue

@@ -338,7 +338,6 @@ function getIcon(series: number): string | undefined {
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin-bottom: 10px;
   background: var(--box-bg-1);
@@ -394,10 +393,10 @@ function getIcon(series: number): string | undefined {
   right: 0;
   bottom: 0;
   width: 80px;
-  border-radius: 10px 0 0;
-  border-top: 1px inset var(--common-shadow-4);
-  border-left: 1px inset var(--common-shadow-4);
-  background: var(--box-bg-4);
+  border-top: 1px solid var(--common-shadow-1);
+  border-left: 1px solid var(--common-shadow-1);
+  background: var(--box-bg-2);
+  border-top-left-radius: 20px;
   color: var(--tgc-yellow-1);
   font-family: var(--font-title);
   font-size: 10px;
@@ -405,7 +404,6 @@ function getIcon(series: number): string | undefined {
 }
 
 .version-icon-single {
-  border-radius: 5px;
   color: var(--tgc-pink-1);
   font-family: var(--font-title);
   font-size: 10px;
@@ -413,7 +411,6 @@ function getIcon(series: number): string | undefined {
 }
 
 .card-left {
-  border: 1px solid var(--common-shadow-2);
   border-radius: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
@@ -424,10 +421,9 @@ function getIcon(series: number): string | undefined {
 
 /* 成就卡片 */
 .card-right {
-  border: 1px solid var(--common-shadow-2);
   border-radius: 10px;
   margin: 10px;
-  background: var(--box-bg-2);
+  background: var(--box-bg-1);
   color: var(--box-text-7);
 }
 
@@ -437,9 +433,9 @@ function getIcon(series: number): string | undefined {
   top: 0;
   left: 0;
   width: 65px;
-  border-right: 1px solid var(--common-shadow-4);
-  border-bottom: 1px solid var(--common-shadow-4);
-  background: var(--box-bg-1);
+  border-right: 1px solid var(--common-shadow-1);
+  border-bottom: 1px solid var(--common-shadow-1);
+  background: var(--box-bg-2);
   border-bottom-right-radius: 20px;
   color: var(--box-text-3);
   font-family: var(--font-title);

src/pages/common/Config.vue

@@ -18,8 +18,8 @@
       <v-list-item-title>
         应用版本
         <v-btn
-          class="card-btn"
           size="small"
+          variant="outlined"
           @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
         >
           BETA
@@ -48,15 +48,10 @@
         <img class="config-icon" :src="userInfo.avatar" alt="Login" />
       </template>
       <template #append>
-        <v-btn class="card-btn" @click="confirmRefreshUser">
-          <template #prepend>
-            <img src="../../assets/icons/circle-check.svg" alt="check" />
-            刷新数据
-          </template>
-        </v-btn>
+        <v-btn class="config-btn" @click="confirmRefreshUser"> 刷新数据 </v-btn>
       </template>
     </v-list-item>
-    <v-list-subheader :inset="true" class="config-header"> 系统信息</v-list-subheader>
+    <v-list-subheader :inset="true" class="config-header">系统信息</v-list-subheader>
     <v-divider :inset="true" class="border-opacity-75" />
     <v-list-item title="系统平台">
       <template #prepend>
@@ -110,12 +105,7 @@
         :chips="true"
       />
       <template #append>
-        <v-btn class="card-btn" @click="submitHome">
-          <template #prepend>
-            <img src="../../assets/icons/circle-check.svg" alt="check" />
-            确定
-          </template>
-        </v-btn>
+        <v-btn class="config-btn" @click="submitHome"> 确定 </v-btn>
       </template>
     </v-list-item>
     <v-list-item prepend-icon="mdi-content-save" title="数据备份" @click="confirmBackup" />
@@ -673,15 +663,14 @@ function submitHome(): void {
 .config-list {
   border-radius: 10px;
   margin: 10px;
-  background: var(--content-bg-2);
-  color: var(--content-text-3);
-  font-family: Genshin-Light, serif;
+  background: var(--box-bg-1);
+  color: var(--box-text-4);
+  font-family: var(--font-text);
 }
 
 .config-header {
   margin-top: 10px;
-  background: var(--content-bg-2);
-  color: #fec90b;
+  color: var(--common-text-title);
   font-family: Genshin, serif;
   font-size: large;
 }
@@ -690,8 +679,16 @@ function submitHome(): void {
   width: 40px;
   height: 40px;
   padding: 5px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 10px;
   margin-right: 15px;
-  background: var(--content-bg-3);
+  background: var(--box-bg-2);
+}
+
+.config-btn {
+  width: 100px;
+  margin-left: 100px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
 }
 </style>