Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-15 09:48:14 +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

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>