💄 设置页样式变更

src/pages/common/Config.vue

@@ -1,6 +1,7 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
   <ToGameLogin v-model="scan" />
+  <div class="config-box">
     <v-list class="config-list">
       <v-list-subheader :inset="true" class="config-header" title="应用信息" />
       <v-divider :inset="true" class="border-opacity-75" />
@@ -12,24 +13,6 @@
           <v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
         </template>
       </v-list-item>
-    <v-list-item>
-      <template #prepend>
-        <img class="config-icon" src="/icon.webp" alt="App" />
-      </template>
-      <v-list-item-title>
-        应用版本
-        <v-btn
-          size="small"
-          variant="outlined"
-          @click="toOuter('https://github.com/BTMuli/TeyvatGuide/releases/latest')"
-        >
-          BETA
-        </v-btn>
-      </v-list-item-title>
-      <template #append>
-        <v-list-item-subtitle>{{ versionApp }}.{{ buildTime }}</v-list-item-subtitle>
-      </template>
-    </v-list-item>
       <v-list-item title="成就版本">
         <template #prepend>
           <img class="config-icon" src="../../assets/icons/achievements.svg" alt="Achievements" />
@@ -145,6 +128,20 @@
         :subtitle="appStore.dataPath.userDataDir"
       />
     </v-list>
+    <div class="config-app">
+      <img class="config-app-icon" src="/icon.webp" alt="App" />
+      <div
+        class="config-app-info click"
+        title="点击前往 Github Release"
+        @click="toOuter('https://github.com/BTMuli/TeyvatGuide/releases/latest')"
+      >
+        TeyvatGuide Beta
+      </div>
+      <div class="config-app-info">
+        v{{ versionApp }}.{{ buildTime === "" ? "Dev" : buildTime }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -636,9 +633,14 @@ function submitHome(): void {
 </script>
 
 <style lang="css" scoped>
+.config-box {
+  position: relative;
+  display: compact;
+}
+
 .config-list {
   border-radius: 10px;
-  margin: 10px;
+  margin-right: 220px;
   background: var(--box-bg-1);
   color: var(--box-text-4);
   font-family: var(--font-text);
@@ -670,4 +672,36 @@ function submitHome(): void {
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }
+
+.config-app {
+  position: fixed;
+  top: 16px;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border-radius: 10px;
+  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
+  box-shadow: 0 0 5px var(--common-shadow-4);
+}
+
+.config-app-icon {
+  width: 200px;
+  aspect-ratio: 1 / 1;
+}
+
+.config-app-info {
+  color: var(--tgc-white-1);
+  font-family: var(--font-title);
+  font-size: 14px;
+  text-align: center;
+  text-shadow: 0 0 5px var(--common-shadow-4);
+}
+
+.config-app-info.click {
+  border-bottom: 1px inset var(--tgc-white-4);
+  cursor: pointer;
+}
 </style>