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

💄 完善昨天改的四个 common page

Browse Source
This commit is contained in:
BTMuli
2023-09-02 11:39:36 +08:00
parent b4b1e194d9
commit a8488c04f8
10 changed files with 85 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/index.css
View File

@@ -42,6 +42,7 @@
--tgc-dark-5: #161b22; /* Github web list nav */
--tgc-dark-6: #21262d; /* Github web btn bg */
--tgc-dark-7: #393b40; /* Genshin btn bg */
--tgc-dark-8: #121212; /* Github web bg */
/* color other */
--tgc-blue-1: #3572a5; /* Github web lang bar */
@@ -51,6 +52,9 @@
--tgc-pink-1: #fb7299; /* Bilibili btn bg */
--tgc-yellow-1: #ffcd0c; /* Genshin btn bg */
--tgc-yellow-2: #f4d8a8; /* Genshin confirm text */
/* some css same in dark and default theme */
--tgc-btn-1: var(--tgc-dark-7); /* button bg */
}
/*

29
src/assets/themes/dark.css
View File

@@ -8,31 +8,32 @@
/* dark mode */
html.dark {
/* app container */
--app-page-bg: var(--tgc-dark-4);
--app-page-bg: var(--tgc-dark-8);
--app-page-content: var(--tgc-white-3);
--app-side-bg: var(--tgc-dark-3);
--app-side-content: var(--tgc-white-4);
/* content */
--box-bg-1: var(--tgc-dark-5);
--box-bg-1: var(--tgc-dark-4);
--box-bg-2: var(--tgc-dark-6);
--box-bg-3: var(--tgc-dark-7);
--box-bg-4: var(--tgc-dark-7);
--box-bg-5: var(--tgc-dark-5);
/* box bg transparent */
--box-bg-t-1: var(--tgc-white-3);
--box-bg-t-4: var(--tgc-white-1);
/* text */
--box-text-1: var(--tgc-white-1);
--box-text-2: var(--tgc-white-2);
--box-text-3: var(--tgc-blue-1);
--box-text-4: var(--tgc-white-8);
--box-text-5: var(--tgc-yellow-1);
--box-text-6: var(--tgc-yellow-1);
--box-text-7: var(--tgc-white-9);
/* button */
--btn-text: var(--tgc-yellow-1);
--btn-bg-1: var(--tgc-dark-5);
--btn-text-1: var(--tgc-yellow-1);
/* box-shadow */
--common-shadow-1: rgb(255 255 255 / 10%);
--common-shadow-2: rgb(255 255 255 / 20%);
@@ -49,18 +50,11 @@ html.dark {
--common-bg-1: #3d424b; /* 一级背景色 */
--common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
/* button */
--common-btn-bg-1: #282c34; /* button 背景色 */
--common-btn-bgt-1: #fec90b; /* button 背景色对应的文本色 */
--common-btn-bg-2: #2a3442; /* button 背景色 */
--common-btn-bgt-2: #ece5d8; /* button 背景色对应的文本色 */
/* text */
--common-text-title: #f9e9cd; /* title，米色 */
--common-text-title: var(--tgc-yellow-2); /* title，米色 */
--common-text-content: var(--common-color-white); /* text */
--common-text-quote: var(--common-color-grey); /* quote */
--common-text-quote: var(--tgc-dark-7); /* quote */
--calendar-btn-bg: #1e1e1e;
--back-top-shadow: #000000;
--theme-switch-icon: #e1e1e1;
--post-default-text: #faf7e8;
@@ -70,9 +64,4 @@ html.dark {
--content-text-2: #faf7e8;
--content-text-3: #e1e1e1;
--btn-bg-1: #3b3d3b;
--btn-bg-2: #e1e1e1;
--btn-bg-3: #1e1e1e;
--btn-text-1: #393b40;
}

35
src/assets/themes/default.css
View File

@@ -9,30 +9,32 @@
html.default {
/* app container */
--app-page-bg: var(--tgc-white-1);
--app-page-content: var(--tgc-dark-5);
--app-page-content: var(--tgc-dark-7);
--app-side-bg: var(--tgc-white-5);
--app-side-content: var(--tgc-dark-4);
--app-side-content: var(--tgc-dark-8);
/* box container */
/* page-bg > box-bg-1 > box-bg-2 */
--box-bg-1: var(--tgc-white-3); /* with box-text-1 */
--box-bg-2: var(--tgc-white-7);
--box-bg-2: var(--tgc-white-4);
--box-bg-3: var(--tgc-white-9);
--box-bg-4: var(--tgc-white-1);
--box-bg-5: var(--tgc-yellow-1); /* with box-text-6 */
/* box bg transparent */
--box-bg-t-1: var(--tgc-dark-5);
--box-bg-t-4: var(--tgc-dark-7); /* with box-text-5 */
/* box text */
--box-text-1: var(--tgc-dark-5); /* with box-bg-1 */
--box-text-2: var(--tgc-dark-2);
--box-text-3: var(--tgc-blue-2);
--box-text-4: var(--tgc-blue-3); /* subtitle */
--box-text-5: var(--tgc-yellow-2); /* with box-bg-t-4 */
--box-text-6: var(--tgc-blue-1); /* with box-bg-5 */
--box-text-7: var(--tgc-dark-7); /* quote */
/* button */
--btn-text: var(--tgc-yellow-2); /* with tgc-btn-1 */
--btn-bg-1: var(--tgc-yellow-1);
--btn-text-1: var(--tgc-blue-1);
/* box-shadow */
--common-shadow-1: rgb(0 0 0 / 10%);
--common-shadow-2: rgb(0 0 0 / 20%);
@@ -45,17 +47,11 @@ html.default {
--common-shadow-t-4: rgb(255 255 255 / 40%);
--common-shadow-t-8: rgb(255 255 255 / 80%);
/* button */
--common-btn-bg-1: #fec90b; /* button 背景色 */
--common-btn-bgt-1: #5b738f; /* button 背景色对应的文本色 */
--common-btn-bg-2: #e1d8c6; /* button 背景色 */
--common-btn-bgt-2: #495366; /* button 背景色对应的文本色 */
/* common text color */
--common-text-title: var(--tgc-dark-8); /* title */
--common-text-content: var(--common-color-blue-2); /* text todo */
--common-text-quote: var(--common-color-blue-3); /* quote todo */
--common-text-title: #393b40; /* title */
--common-text-content: var(--common-color-blue-2); /* text */
--common-text-quote: var(--common-color-blue-3); /* quote */
--calendar-btn-bg: #393b40;
--back-top-shadow: #546d8b;
--theme-switch-icon: #393b40;
--post-default-text: #1e1e1e;
@@ -65,9 +61,4 @@ html.default {
--content-text-2: #393b40;
--content-text-3: #546d8b;
--btn-bg-1: #fec90b;
--btn-bg-2: #4a5366;
--btn-bg-3: #546d8b;
--btn-text-1: #faf7e8;
}

2
src/components/func/confirm.vue
View File

@@ -244,7 +244,7 @@ defineExpose({
justify-content: center;
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
color: var(--box-text-5);
color: var(--btn-text);
cursor: pointer;
font-family: var(--font-title);
font-size: 20px;

7
src/components/home/t-calendar.vue
View File

@@ -30,7 +30,7 @@
:label="switchType === 'avatar' ? '角色' : '武器'"
@change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"
/>
<v-btn variant="tonal" class="calendar-title-btn" @click="share">
<v-btn class="calendar-title-btn" @click="share">
<template #prepend>
<v-icon> mdi-share-variant</v-icon>
</template>
@@ -201,6 +201,7 @@ async function share(): Promise<void> {
display: flex;
align-items: center;
justify-content: start;
color: var(--common-text-title);
column-gap: 10px;
}
@@ -229,8 +230,8 @@ async function share(): Promise<void> {
.calendar-title-btn {
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
background: var(--box-bg-t-4);
color: var(--box-text-5);
background: var(--tgc-btn-1);
color: var(--btn-text);
}
.calendar-divider {

3
src/components/home/t-pool.vue
View File

@@ -201,13 +201,14 @@ onUnmounted(() => {
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
background: var(--box-bg-1);
border-radius: 5px;
background: var(--box-bg-1);
gap: 10px;
}
.pool-title {
display: flex;
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
}

7
src/components/home/t-position.vue
View File

@@ -20,7 +20,7 @@
</v-avatar>
</template>
<template #append>
<v-btn variant="tonal" class="position-card-btn" @click="toPost(card)"> 查看 </v-btn>
<v-btn class="position-card-btn" @click="toPost(card)"> 查看 </v-btn>
</template>
</v-list-item>
</v-list>
@@ -138,6 +138,7 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: start;
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
}
@@ -190,8 +191,8 @@ onUnmounted(() => {
.position-card-btn {
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
background: var(--box-bg-t-4);
color: var(--box-text-5);
background: var(--tgc-btn-1);
color: var(--btn-text);
}
.position-card-text {

58
src/pages/common/Achievements.vue
View File

@@ -1,23 +1,20 @@
<template>
<!-- 顶部操作栏 todo 样式调整 -->
<v-app-bar style="background: rgb(0 0 0 / 50%); color: #f4d8a8; font-family: Genshin, serif">
<template #prepend>
<span style="font-size: 30px">{{ title }}</span>
</template>
<v-spacer />
<div class="top-bar">
<div class="top-title">{{ title }}</div>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="搜索"
hide-details
variant="outlined"
@click:append="searchCard"
@keyup.enter="searchCard"
/>
<template #append>
<div class="top-btns">
<v-btn prepend-icon="mdi-import" class="top-btn" @click="importJson"> 导入 </v-btn>
<v-btn prepend-icon="mdi-export" class="top-btn" @click="exportJson"> 导出 </v-btn>
</template>
</v-app-bar>
</div>
</div>
<ToLoading v-model="loading" :title="loadingTitle" />
<div class="wrap">
<!-- 左侧菜单 -->
@@ -333,33 +330,54 @@ function getIcon(series: number): string | undefined {
</script>
<style lang="css" scoped>
/* 顶部按钮 */
.top-bar {
display: flex;
width: 100%;
height: 80px;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-bottom: 10px;
column-gap: 50px;
font-family: var(--font-title);
font-size: 20px;
}
.top-title {
color: var(--common-text-title);
}
.top-btns {
display: flex;
column-gap: 10px;
}
.top-btn {
border-radius: 5px;
margin-left: 15px;
background: var(--box-bg-t-4);
color: var(--box-text-5);
background: var(--tgc-btn-1);
color: var(--btn-text);
}
/* 内容区域 */
.wrap {
display: flex;
justify-content: space-between;
height: calc(100vh - 130px);
column-gap: 10px;
}
/* 左侧系列 */
.left-wrap {
width: 400px;
height: calc(100vh - 100px);
overflow-x: hidden;
height: 100%;
overflow-y: auto;
}
/* 右侧成就 */
.right-wrap {
width: calc(100% - 410px);
height: calc(100vh - 100px);
overflow-x: hidden;
width: 100%;
height: 100%;
overflow-y: auto;
}
@@ -378,7 +396,7 @@ function getIcon(series: number): string | undefined {
border-top: 1px inset var(--common-shadow-4);
border-left: 1px inset var(--common-shadow-4);
background: var(--box-bg-4);
color: var(--box-text-5);
color: var(--tgc-yellow-1);
font-family: var(--font-title);
font-size: 10px;
text-align: center;

7
src/pages/common/Announcements.vue
View File

@@ -145,13 +145,14 @@ async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
<style lang="css" scoped>
.anno-tab {
margin-bottom: 10px;
color: var(--common-text-title);
font-family: var(--font-title);
}
.anno-switch-btn {
height: 40px;
background: var(--box-bg-5);
color: var(--box-text-6);
background: var(--btn-bg-1);
color: var(--btn-text-1);
font-family: var(--font-title);
}
@@ -216,7 +217,7 @@ async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
.anno-dev-btn {
background: var(--box-bg-t-1);
color: var(--box-text-5);
color: var(--btn-text);
font-family: var(--font-title);
}

10
src/views/t-news.vue
View File

@@ -463,19 +463,21 @@ async function searchPost(): Promise<void> {
<style lang="css" scoped>
.news-tab {
margin-bottom: 10px;
color: var(--common-text-title);
font-family: var(--font-title);
}
.news-switch-btn {
height: 40px;
margin-left: 15px;
background: var(--box-bg-5);
color: var(--box-text-6);
background: var(--btn-bg-1);
color: var(--btn-text-1);
font-family: var(--font-title);
}
.news-search {
margin-left: 10px;
color: var(--box-text-1);
}
.news-grid {
@@ -729,7 +731,7 @@ async function searchPost(): Promise<void> {
.load-news button {
border-radius: 5px;
background: var(--box-bg-t-4);
color: var(--box-text-5);
background: var(--tgc-btn-1);
color: var(--btn-text);
}
</style>