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

♻️ 又改了一些页面样式

Browse Source
This commit is contained in:
BTMuli
2023-09-01 23:51:46 +08:00
parent 191fe57b36
commit 296350473a
7 changed files with 82 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/index.css
View File

@@ -60,7 +60,7 @@ html {
/*
* @description 侧边滚动条样式
* @since Alpha v0.2.1
* @since Beta v0.3.0
*/
::-webkit-scrollbar {
width: 8px;
@@ -69,25 +69,16 @@ html {
::-webkit-scrollbar-track {
border-radius: 5px;
background: #faf7e8;
background: var(--common-shadow-2);
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #686868;
background: var(--common-shadow-2);
}
::-webkit-scrollbar-thumb:hover {
background: #606060;
}
/* dark mode */
.dark ::-webkit-scrollbar-track {
background: #424242;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #7b7b7b;
background: var(--common-shadow-4);
}
/* card action 内的按钮 */

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

@@ -18,8 +18,10 @@ html.dark {
--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 */
@@ -28,6 +30,8 @@ html.dark {
--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);
/* box-shadow */
--common-shadow-1: rgb(255 255 255 / 10%);

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

@@ -9,25 +9,29 @@
html.default {
/* app container */
--app-page-bg: var(--tgc-white-1);
--app-page-content: var(--tgc-dark-5); /* todo 这边直接反色，需要调整 */
--app-page-content: var(--tgc-dark-5);
--app-side-bg: var(--tgc-white-5);
--app-side-content: var(--tgc-dark-4);
/* box container */
--box-bg-1: var(--tgc-white-3);
--box-bg-1: var(--tgc-white-3); /* with box-text-1 */
--box-bg-2: var(--tgc-white-7);
--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-4: var(--tgc-dark-7);
--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);
--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);
--box-text-5: var(--tgc-yellow-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 */
/* box-shadow */
--common-shadow-1: rgb(0 0 0 / 10%);

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

@@ -202,7 +202,7 @@ defineExpose({
.confirm-subtitle {
width: 100%;
color: var(--content-text-2);
color: var(--box-text-4);
font-family: var(--font-text);
font-size: 20px;
text-align: center;

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

@@ -1,5 +1,5 @@
<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>
@@ -14,8 +14,8 @@
@keyup.enter="searchCard"
/>
<template #append>
<v-btn prepend-icon="mdi-import" class="ms-2 top-btn" @click="importJson"> 导入 </v-btn>
<v-btn prepend-icon="mdi-export" class="ms-2 top-btn" @click="exportJson"> 导出 </v-btn>
<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>
<ToLoading v-model="loading" :title="loadingTitle" />
@@ -53,8 +53,9 @@
backgroundRepeat: 'no-repeat',
margin: '10px',
borderRadius: '10px 50px 50px 10px',
color: '#485466',
fontFamily: 'Genshin,serif',
border: '1px solid var(--common-shadow-2)',
color: 'var(--tgc-dark-6)',
fontFamily: 'var(--font-title)',
cursor: 'pointer',
position: 'relative',
}"
@@ -78,7 +79,7 @@
</div>
<v-list-item>
<template #prepend>
<v-icon :color="achievement.isCompleted ? '#fec90b' : '#485466'">
<v-icon :color="achievement.isCompleted ? 'var(--tgc-green-1)' : 'var(--tgc-blue-3)'">
<!-- todo 图标替换 -->
{{ achievement.isCompleted ? "mdi-check-circle" : "mdi-circle" }}
</v-icon>
@@ -334,8 +335,10 @@ function getIcon(series: number): string | undefined {
<style lang="css" scoped>
/* 顶部按钮 */
.top-btn {
background: #393b40;
color: #faf7e8 !important;
border-radius: 5px;
margin-left: 15px;
background: var(--box-bg-t-4);
color: var(--box-text-5);
}
/* 内容区域 */
@@ -349,7 +352,7 @@ function getIcon(series: number): string | undefined {
width: 400px;
height: calc(100vh - 100px);
overflow-x: hidden;
overflow-y: scroll;
overflow-y: auto;
}
/* 右侧成就 */
@@ -357,7 +360,7 @@ function getIcon(series: number): string | undefined {
width: calc(100% - 410px);
height: calc(100vh - 100px);
overflow-x: hidden;
overflow-y: scroll;
overflow-y: auto;
}
.list-empty {
@@ -372,37 +375,39 @@ function getIcon(series: number): string | undefined {
bottom: 0;
width: 80px;
border-radius: 10px 0 0;
border-top: #fff 2px solid;
border-left: #fff 2px solid;
background: #546d8b;
color: #fec90b;
font-family: Genshin, serif;
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);
font-family: var(--font-title);
font-size: 10px;
text-align: center;
}
.version-icon-single {
border-radius: 5px;
color: #ff6d6d;
font-family: Genshin, serif;
color: var(--tgc-pink-1);
font-family: var(--font-title);
font-size: 10px;
text-align: center;
}
.card-left {
border: 1px solid var(--common-shadow-2);
border-radius: 10px;
margin: 10px;
background: #485466;
color: #fec90b;
background: var(--box-bg-1);
color: var(--box-text-1);
cursor: pointer;
}
/* 成就卡片 */
.card-right {
border: 1px solid var(--common-shadow-2);
border-radius: 10px;
margin: 10px;
background: #546d8b;
color: #faf7e8;
background: var(--box-bg-2);
color: var(--box-text-7);
}
/* 成就进度 */
@@ -411,12 +416,12 @@ function getIcon(series: number): string | undefined {
top: 0;
left: 0;
width: 65px;
border-right: #fff 2px solid;
border-bottom: #fff 2px solid;
background: #8ba5c5;
border-right: 1px solid var(--common-shadow-4);
border-bottom: 1px solid var(--common-shadow-4);
background: var(--box-bg-1);
border-bottom-right-radius: 20px;
color: #485466;
font-family: Genshin, serif;
color: var(--box-text-3);
font-family: var(--font-title);
font-size: 10px;
text-align: center;
}
@@ -424,7 +429,7 @@ function getIcon(series: number): string | undefined {
/* 成就完成时间 */
.right-time {
margin-right: 10px;
color: #faf7e8;
color: var(--box-text-4);
font-size: small;
}
@@ -448,7 +453,7 @@ function getIcon(series: number): string | undefined {
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 50%);
color: #faf7e8;
color: var(--tgc-white-1);
font-size: 8px;
}
</style>

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

@@ -18,19 +18,18 @@
<div class="anno-cover" @click="toPost(item)">
<img :src="item.banner" alt="cover" />
</div>
<v-card-title class="anno-card-title">
<v-card-title class="anno-card-title" :title="item.title">
{{ item.title }}
</v-card-title>
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
<v-card-actions>
<v-btn class="anno-btn" @click="toPost(item)">
<v-btn class="anno-btn" variant="outlined" @click="toPost(item)">
<img :src="item.tagIcon || '../assets/icons/arrow-right.svg'" alt="right" />
<span>查看</span>
</v-btn>
<v-card-subtitle v-show="!appStore.devMode">
<v-icon>mdi-calendar</v-icon>
{{ item.startTime.split(" ")[0] }} -
{{ item.endTime.split(" ")[0] }}
{{ item.startTime.split(" ")[0] }}~{{ item.endTime.split(" ")[0] }}
</v-card-subtitle>
<v-card-subtitle v-show="appStore.devMode"> id: {{ item.id }} </v-card-subtitle>
<v-btn v-show="appStore.devMode" class="anno-dev-btn" @click="toJson(item)">
@@ -47,17 +46,16 @@
<div class="anno-cover" @click="toPost(item)">
<img :src="item.banner" alt="cover" />
</div>
<v-card-title class="anno-card-title">{{ item.title }}</v-card-title>
<v-card-title class="anno-card-title" :title="item.title">{{ item.title }}</v-card-title>
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
<v-card-actions>
<v-btn class="anno-btn" @click="toPost(item)">
<v-btn class="anno-btn" variant="outlined" @click="toPost(item)">
<img :src="item.tagIcon || '../assets/icons/arrow-right.svg'" alt="right" />
<span>查看</span>
</v-btn>
<v-card-subtitle v-show="!appStore.devMode">
<v-icon>mdi-calendar</v-icon>
{{ item.startTime.split(" ")[0] }} -
{{ item.endTime.split(" ")[0] }}
{{ item.startTime.split(" ")[0] }}~{{ item.endTime.split(" ")[0] }}
</v-card-subtitle>
<v-card-subtitle v-show="appStore.devMode"> id: {{ item.id }} </v-card-subtitle>
<v-btn v-show="appStore.devMode" class="anno-dev-btn" @click="toJson(item)">
@@ -147,14 +145,13 @@ 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(--common-btn-bg-1);
color: var(--common-btn-bgt-1);
background: var(--box-bg-5);
color: var(--box-text-6);
font-family: var(--font-title);
}
@@ -168,8 +165,8 @@ async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
.anno-card {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
background: var(--box-bg-1);
color: var(--box-text-1);
}
.anno-cover {
@@ -199,23 +196,6 @@ async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
.anno-card-title {
position: relative;
height: 50px;
transition:
padding-top 0.3s linear,
padding-bottom 0.3s linear,
background 0.3s linear,
font-size 0.3s linear,
line-height 0.3s linear,
white-space 0.3s linear;
}
.anno-card-title:hover {
display: flex;
height: 50px;
padding: 5px;
background: var(--common-shadow-2);
font-size: 16px;
line-height: normal;
white-space: normal;
}
.anno-btn {
@@ -223,9 +203,8 @@ async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
height: 30px;
align-items: center;
justify-content: center;
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
background: var(--common-btn-bg-2);
color: var(--common-btn-bgt-2);
}
.anno-btn img {
@@ -236,8 +215,8 @@ async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
}
.anno-dev-btn {
background: var(--common-btn-bg-2);
color: var(--common-btn-bgt-2);
background: var(--box-bg-t-1);
color: var(--box-text-5);
font-family: var(--font-title);
}
@@ -247,7 +226,7 @@ async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
padding: 2px;
border-radius: 50%;
margin-right: 5px;
background: var(--common-shadow-2);
background: var(--common-shadow-t-4);
object-fit: cover;
}
</style>

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

@@ -32,7 +32,7 @@
<div class="news-cover" @click="toPost(item)">
<img :src="item.cover" alt="cover" />
</div>
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
<v-card-title class="news-card-title" :title="item.title">{{ item.title }}</v-card-title>
<div class="news-card-info">
<div class="news-card-user">
<div class="ncu-left">
@@ -120,7 +120,7 @@
</div>
</div>
</div>
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
<v-card-title class="news-card-title" :title="item.title">{{ item.title }}</v-card-title>
<div class="news-card-info">
<div class="news-card-user">
<div class="ncu-left">
@@ -194,7 +194,7 @@
<div class="news-cover" @click="toPost(item)">
<img :src="item.cover" alt="cover" />
</div>
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
<v-card-title class="news-card-title" :title="item.title">{{ item.title }}</v-card-title>
<div class="news-card-info">
<div class="news-card-user">
<div class="ncu-left">
@@ -463,15 +463,14 @@ 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(--common-btn-bg-1);
color: var(--common-btn-bgt-1);
background: var(--box-bg-5);
color: var(--box-text-6);
font-family: var(--font-title);
}
@@ -489,8 +488,8 @@ async function searchPost(): Promise<void> {
.news-card {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
background: var(--box-bg-1);
color: var(--box-text-1);
}
.news-cover {
@@ -514,24 +513,6 @@ async function searchPost(): Promise<void> {
.news-card-title {
position: relative;
height: 50px;
color: var(--common-text-title);
transition:
padding-top 0.3s linear,
padding-bottom 0.3s linear,
background 0.3s linear,
font-size 0.3s linear,
line-height 0.3s linear,
white-space 0.3s linear;
}
.news-card-title:hover {
display: flex;
height: 50px;
padding: 5px;
background: var(--common-shadow-2);
font-size: 16px;
line-height: normal;
white-space: normal;
}
/* news item info */
@@ -549,7 +530,7 @@ async function searchPost(): Promise<void> {
max-width: 235px;
height: 50px;
align-items: center;
color: var(--common-text-content);
color: var(--box-text-4);
}
.ncu-left {
@@ -627,8 +608,8 @@ async function searchPost(): Promise<void> {
background: rgb(0 0 0/20%);
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 10px rgb(0 0 0);
color: #faf7e8;
box-shadow: 0 0 10px var(--tgc-dark-1);
color: var(--tgc-white-1);
}
.news-card-forum img {
@@ -643,6 +624,7 @@ async function searchPost(): Promise<void> {
}
.news-dev-btn {
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
margin-left: auto;
font-family: var(--font-title);
@@ -678,7 +660,7 @@ async function searchPost(): Promise<void> {
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--common-text-quote);
color: var(--box-text-7);
font-size: 12px;
gap: 5px;
opacity: 0.6;
@@ -705,7 +687,7 @@ async function searchPost(): Promise<void> {
justify-content: flex-start;
padding: 5px 30px 5px 5px;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
color: #faf7e8;
color: var(--tgc-white-1);
&::after {
position: absolute;
@@ -730,7 +712,7 @@ async function searchPost(): Promise<void> {
align-items: center;
justify-content: flex-start;
margin: 5px;
color: #faf7e8;
color: var(--tgc-white-1);
gap: 5px;
opacity: 0.8;
}
@@ -747,7 +729,7 @@ async function searchPost(): Promise<void> {
.load-news button {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
background: var(--box-bg-t-4);
color: var(--box-text-5);
}
</style>