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

♻️ 首页颜色替换完成

Browse Source
This commit is contained in:
BTMuli
2023-09-01 20:39:52 +08:00
parent 386085f8c3
commit 6f22326a88
6 changed files with 110 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/index.css
View File

@@ -22,13 +22,17 @@
--common-color-yellow: #fec90b;
--common-color-grey: #96979a;
--common-color-grey-2: #b3b3b3;
/* color white */
--tgc-white-1: #ffffff; /* normal white */
--tgc-white-2: #f0f1f6; /* Github mobile bg */
--tgc-white-3: #f6f8fa; /* Github web bg */
--tgc-white-4: #f4f6f7; /* Github web option */
/* color grey */
--tgc-white-5: #eff3f6; /* Miyoushe side bar */
--tgc-white-6: #f8f8f8; /* Miyoushe bottom bar */
--tgc-white-7: #f0f1f5; /* Miyoushe tag */
--tgc-white-8: #faf7e8; /* Genshin text */
--tgc-white-9: #ece5d8; /* Genshin text */
/* color dark */
--tgc-dark-1: #000000; /* normal dark */
@@ -37,15 +41,15 @@
--tgc-dark-4: #0d1117; /* Github web bg */
--tgc-dark-5: #161b22; /* Github web list nav */
--tgc-dark-6: #21262d; /* Github web btn bg */
--tgc-dark-7: #393b40; /* Genshin btn bg */
/* color other */
--tgc-green-1: #238636; /* Github web btn */
--tgc-blue-1: #3572a5; /* Github web lang bar */
--tgc-blue-2: #00aeec; /* Bilibili btn bg */
--tgc-blue-3: #4b5466; /* Genshin icon bg */
--tgc-green-1: #238636; /* Github web btn */
--tgc-pink-1: #fb7299; /* Bilibili btn bg */
/* text color */
--tgc-text-1: #faf7e8; /* Genshin color from ? */
--tgc-yellow: #ffcd0c; /* Genshin btn bg */
}
html {

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

@@ -14,7 +14,15 @@ html.dark {
--app-side-content: var(--tgc-white-4);
/* content */
--content-box-bg-1: var(--tgc-dark-5);
--box-bg-1: var(--tgc-dark-5);
--box-bg-2: var(--tgc-dark-6);
--box-bg-3: var(--tgc-dark-7);
/* 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-shadow */
--common-shadow-1: rgb(255 255 255 / 10%);

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

@@ -8,13 +8,21 @@
/* default(light) theme */
html.default {
/* app container */
--app-page-bg: var(--tgc-white-3);
--app-page-bg: var(--tgc-white-1);
--app-page-content: var(--tgc-dark-5); /* todo 这边直接反色，需要调整 */
--app-side-bg: var(--tgc-white-4);
--app-side-bg: var(--tgc-white-5);
--app-side-content: var(--tgc-dark-4);
/* content */
--content-box-bg-1: var(--tgc-white-4);
/* box container */
--box-bg-1: var(--tgc-white-3);
--box-bg-2: var(--tgc-white-7);
--box-bg-3: var(--tgc-white-9);
/* box text */
--box-text-1: var(--tgc-dark-5);
--box-text-2: var(--tgc-dark-2);
--box-text-3: var(--tgc-blue-2);
--box-text-4: var(--tgc-blue-3);
/* box-shadow */
--common-shadow-1: rgb(0 0 0 / 10%);
@@ -28,10 +36,6 @@ html.default {
--common-shadow-t-4: rgb(255 255 255 / 40%);
--common-shadow-t-8: rgb(255 255 255 / 80%);
/* box bg */
--common-bg-1: #faf7e8; /* 一级背景色 */
--common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
/* button */
--common-btn-bg-1: #fec90b; /* button 背景色 */
--common-btn-bgt-1: #5b738f; /* button 背景色对应的文本色 */

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

@@ -2,29 +2,44 @@
<div class="calendar-box">
<div class="calendar-title">
<div class="calendar-title-left">
<v-icon size="small"> mdi-calendar-clock </v-icon>
<v-icon size="small"> mdi-calendar-clock</v-icon>
<span>今日素材</span>
<span>{{ dateNow }}</span>
<v-btn variant="outlined" class="calendar-title-btn" @click="share">
<template #prepend>
<v-icon> mdi-share-variant </v-icon>
</template>
<span>分享</span>
</v-btn>
</div>
<div class="calendar-title-right">
<div class="calendar-title-mid">
<v-btn
v-for="text of btnText"
:key="text.week"
:class="btnNow === text.week ? 'calendar-btn-selected' : 'calendar-btn'"
:style="{
border: text.week === weekNow ? '1px solid var(--box-text-2)' : 'none',
borderRadius: '5px',
backgroundColor: text.week === btnNow ? 'var(--tgc-yellow)' : 'inherit',
color: text.week === btnNow ? 'var(--box-text-4)' : 'inherit',
}"
@click="getContents(text.week)"
variant="tonal"
>
{{ text.text }}
</v-btn>
</div>
<div class="calendar-title-right">
<v-switch
class="calendar-title-switch"
color="grey"
variant="outline"
:label="switchType === 'avatar' ? '角色' : '武器'"
@change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"
/>
<v-btn variant="tonal" class="calendar-title-btn" @click="share">
<template #prepend>
<v-icon> mdi-share-variant</v-icon>
</template>
<span>分享</span>
</v-btn>
</div>
</div>
<TSubLine>角色突破</TSubLine>
<div class="calendar-grid">
<v-divider class="calendar-divider" />
<div class="calendar-grid" v-show="switchType==='avatar'">
<div v-for="item in characterCards" :key="item.id" @click="selectAvatar(item)">
<TibCalendarItem
:data="<TGApp.App.Calendar.Item>item"
@@ -33,8 +48,7 @@
/>
</div>
</div>
<TSubLine>武器突破</TSubLine>
<div class="calendar-grid">
<div class="calendar-grid" v-show="switchType!=='avatar'">
<div v-for="item in weaponCards" :key="item.id" @click="selectWeapon(item)">
<TibCalendarItem
:data="<TGApp.App.Calendar.Item>item"
@@ -49,7 +63,6 @@
<script lang="ts" setup>
// vue
import { computed, onMounted, ref } from "vue";
import TSubLine from "../main/t-subline.vue";
import ToCalendar from "../overlay/to-calendar.vue";
import TibCalendarItem from "../itembox/tib-calendar-item.vue";
// data
@@ -73,6 +86,7 @@ const weaponCards = ref<TGApp.App.Calendar.Item[]>([]);
// calendar item
const showItem = ref<boolean>(false);
const switchType = ref<string>("avatar");
const selectedItem = ref<TGApp.App.Calendar.Item>(<TGApp.App.Calendar.Item>{});
const selectedType = ref<"avatar" | "weapon">("avatar");
@@ -159,7 +173,8 @@ function getContents(day: number): void {
async function share(): Promise<void> {
// todo 唤起外部 loading
const div = <HTMLElement>document.querySelector(".calendar-box");
const title = `【今日素材】${dateNow.value}-${btnNow.value}`;
const showType = switchType.value === "avatar" ? "角色" : "武器";
const title = `【今日素材】${showType}${btnNow.value}`;
await generateShareImg(title, div);
}
</script>
@@ -168,18 +183,18 @@ async function share(): Promise<void> {
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--common-shadow-t-2);
background: var(--box-bg-1);
display: flex;
flex-direction: column;
gap: 5px;
}
.calendar-title {
display: flex;
align-items: center;
justify-content: start;
padding-bottom: 5px;
color: var(--common-text-title);
column-gap: 2rem;
font-family: var(--font-title);
font-size: 20px;
justify-content: space-between;
}
.calendar-title-left {
@@ -189,29 +204,38 @@ async function share(): Promise<void> {
column-gap: 10px;
}
.calendar-title-btn {
border-radius: 5px;
color: var(--common-text-content);
cursor: pointer;
}
.calendar-title-right {
.calendar-title-mid {
display: flex;
align-items: center;
justify-content: start;
column-gap: 15px;
}
.calendar-btn {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
.calendar-title-right {
display: flex;
align-items: center;
justify-content: start;
gap: 15px;
}
.calendar-btn-selected {
.calendar-title-switch {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--box-text-3);
}
.calendar-title-btn {
border-radius: 5px;
background: var(--common-btn-bg-1);
color: var(--common-btn-bgt-1);
color: var(--box-text-3);
border: 1px solid var(--box-text-3);
cursor: pointer;
}
.calendar-divider {
margin: 10px 0;
opacity: 0.2;
}
.calendar-grid {

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

@@ -201,6 +201,7 @@ onUnmounted(() => {
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
background: var(--box-bg-1);
border-radius: 5px;
gap: 10px;
}
@@ -232,7 +233,7 @@ onUnmounted(() => {
overflow: hidden;
width: 50%;
border-radius: 5px;
box-shadow: 0 0 5px var(--common-shadow-4);
box-shadow: 0 5px 5px var(--common-shadow-4);
}
.pool-cover {
@@ -310,7 +311,7 @@ onUnmounted(() => {
align-items: flex-start;
justify-content: flex-start;
margin-right: 10px;
color: var(--tgc-text-1);
color: var(--tgc-white-1);
font-size: 12px;
gap: 10px;
text-align: left;

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

@@ -5,7 +5,8 @@
<span>近期活动</span>
</div>
<div v-if="!loading" class="position-grid">
<v-card v-for="card in positionCards" :key="card.postId" class="position-card">
<!-- todo hover 效果优化 -->
<v-card v-for="card in positionCards" :key="card.postId" class="position-card" variant="outlined">
<v-list class="position-list">
<v-list-item :title="card.title" :subtitle="card.abstract">
<template #prepend>
@@ -14,27 +15,23 @@
</v-avatar>
</template>
<template #append>
<v-btn variant="outlined" @click="toPost(card)"> 查看 </v-btn>
<v-btn variant="tonal" @click="toPost(card)" class="position-card-btn"> 查看 </v-btn>
</template>
</v-list-item>
</v-list>
<v-divider class="border-opacity-75" />
<v-divider />
<v-card-text>
<div class="position-card-text">
<v-icon>mdi-calendar-clock</v-icon>
<span>{{ card.time.start }} ~ {{ card.time.end }}</span>
<span>{{ card.time.start }}~{{ card.time.end }}</span>
</div>
<div class="position-card-text">
<v-icon>mdi-clock-outline</v-icon>
<span>剩余时间：</span>
<!-- 玉鈫蓝 -->
<span v-if="positionTimeGet[card.postId] !== '已结束'" style="color: #126e82">{{
<span v-if="positionTimeGet[card.postId] !== '已结束'">{{
positionTimeGet[card.postId]
}}</span>
<!-- 粉红 -->
<span v-if="positionTimeGet[card.postId] === '已结束'" style="color: #f2b9b2"
>已结束</span
>
<span v-else>已结束</span>
</div>
</v-card-text>
</v-card>
@@ -128,6 +125,7 @@ onUnmounted(() => {
.position-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
background: var(--box-bg-1);
border-radius: 5px;
}
@@ -154,8 +152,8 @@ onUnmounted(() => {
.position-card {
border-radius: 5px;
background: var(--content-box-bg-1);
color: var(--common-bgt-1);
background: var(--box-bg-2);
border: 1px solid var(--common-shadow-2);
}
.position-list {
@@ -176,21 +174,22 @@ onUnmounted(() => {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s;
transition: all 0.5s;
}
.position-icon :hover {
cursor: pointer;
scale: 1.5;
scale: 1.2;
}
.position-card-btn {
border-radius: 5px;
border: 1px solid var(--common-shadow-4);
}
.position-card-text {
display: inline-block;
min-width: 200px;
align-items: center;
}
.position-card-text :nth-child(1) {
margin: 0 5px;
align-items: flex-start;
}
</style>