Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-19 10:23:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(config): 设置页样式美化

Browse Source
This commit is contained in:
BTMuli
2023-03-31 23:09:44 +08:00
parent 6c8f460e56
commit 74eeaed166
1 changed files with 84 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/Config.vue
View File

@@ -3,8 +3,9 @@
<t-loading /> <t-loading />
</div> </div>
<div v-else> <div v-else>
<v-card class="config-card" title="关于"> <v-list class="config-list">
<v-list> <v-list-subheader inset class="config-header">关于</v-list-subheader>
<v-divider inset class="border-opacity-75" />
<v-list-item> <v-list-item>
<template v-slot:prepend> <template v-slot:prepend>
<img class="config-icon" src="/icon.webp" alt="App" /> <img class="config-icon" src="/icon.webp" alt="App" />
@@ -12,7 +13,7 @@
<v-list-item-title> <v-list-item-title>
应用版本 应用版本
<v-btn <v-btn
color="info" color="#455167"
size="small" size="small"
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')" @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
>Alpha</v-btn >Alpha</v-btn
@@ -38,42 +39,29 @@
<v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle> <v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle>
</template> </template>
</v-list-item> </v-list-item>
</v-list> <v-list-subheader inset class="config-header">设置</v-list-subheader>
</v-card> <v-divider inset class="border-opacity-75" />
<v-card class="config-card" title="配置"> <v-list-item @click="openMergeData" prepend-icon="mdi-folder" title="打开用户数据目录" />
<v-list> <v-list-item @click="deleteData" prepend-icon="mdi-delete" title="清除用户缓存" />
<v-list-item @click="openMergeData" prepend-icon="mdi-folder"> <v-list-item @click="deleteTemp" prepend-icon="mdi-delete" title="清除临时数据" />
<v-list-item-title>打开用户数据目录</v-list-item-title> <v-list-item @click="setDefaultConfig" prepend-icon="mdi-cog" title="恢复默认设置" />
</v-list-item> <v-list-subheader inset class="config-header">调试</v-list-subheader>
<v-list-item @click="deleteData" prepend-icon="mdi-delete"> <v-divider inset class="border-opacity-75" />
<v-list-item-title>清除用户缓存</v-list-item-title> <v-list-item title="开发者模式" subtitle="开启后将显示调试信息">
</v-list-item> <template v-slot:prepend>
<v-list-item @click="deleteTemp" prepend-icon="mdi-delete"> <v-icon>mdi-bug</v-icon>
<v-list-item-title>删除临时数据</v-list-item-title> </template>
</v-list-item>
<v-list-item @click="setDefaultConfig" prepend-icon="mdi-cog">
<v-list-item-title>初始化数据</v-list-item-title>
</v-list-item>
</v-list>
</v-card>
<v-card class="config-card">
<v-list>
<v-list-item>
<v-list-item-title>开发者模式</v-list-item-title>
<v-list-item-subtitle>开启后将显示调试信息</v-list-item-subtitle>
<template v-slot:append> <template v-slot:append>
<v-switch <v-switch
:label="appStore.devMode ? '开启' : '关闭'" :label="appStore.devMode ? '开启' : '关闭'"
inset inset
v-model="appStore.devMode" v-model="appStore.devMode"
color="#0781D8" color="#FAC51E"
/> />
</template> </template>
</v-list-item> </v-list-item>
</v-list> <v-list-subheader inset class="config-header">路径</v-list-subheader>
</v-card> <v-divider inset class="border-opacity-75" />
<v-card class="config-card">
<v-list>
<v-list-item prepend-icon="mdi-folder"> <v-list-item prepend-icon="mdi-folder">
<v-list-item-title>本地应用数据路径</v-list-item-title> <v-list-item-title>本地应用数据路径</v-list-item-title>
<v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle> <v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle>
@@ -83,7 +71,6 @@
<v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle> <v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-card>
</div> </div>
</template> </template>
@@ -178,17 +165,27 @@ async function setDefaultConfig() {
</script> </script>
<style lang="css"> <style lang="css">
.config-card { .config-list {
margin-bottom: 10px; margin: 10px;
font-family: "Genshin", sans-serif; font-family: "Genshin-Light", serif;
background: rgba(0, 0, 0, 0.5);
color: #faf7e8;
border-radius: 10px;
}
.config-header {
margin-top: 10px;
background: #76726c;
color: #f4d8a8;
font-size: large;
} }
.config-icon { .config-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 5px; margin-right: 15px;
padding: 5px; padding: 5px;
background: #393b40; background: #2d2f33;
border-radius: 5px; border-radius: 10px;
} }
</style> </style>