Skip to content

Commit

Permalink
♻️ 首页颜色替换完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@BTMuli
BTMuli committed Sep 1, 2023
1 parent 386085f commit 6f22326
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 68 deletions.
16 changes: 10 additions & 6 deletions src/assets/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 {
Expand Down
10 changes: 9 additions & 1 deletion src/assets/themes/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
20 changes: 12 additions & 8 deletions src/assets/themes/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand All @@ -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 背景色对应的文本色 */
Expand Down
88 changes: 56 additions & 32 deletions src/components/home/t-calendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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");
Expand Down Expand Up @@ -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>
Expand All @@ -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 {
Expand All @@ -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-mid {
display: flex;
align-items: center;
justify-content: start;
column-gap: 15px;
}
.calendar-title-right {
display: flex;
align-items: center;
justify-content: start;
column-gap: 15px;
gap: 15px;
}
.calendar-btn {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
.calendar-title-switch {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--box-text-3);
}
.calendar-btn-selected {
.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 {
Expand Down
5 changes: 3 additions & 2 deletions src/components/home/t-pool.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
37 changes: 18 additions & 19 deletions src/components/home/t-position.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -128,6 +125,7 @@ onUnmounted(() => {
.position-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
background: var(--box-bg-1);
border-radius: 5px;
}
Expand All @@ -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 {
Expand All @@ -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>

0 comments on commit 6f22326

Please sign in to comment.