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

💄 首页按钮样式变更

Browse Source
This commit is contained in:
BTMuli
2023-09-01 22:20:23 +08:00
parent 208aa7cc1a
commit 191fe57b36
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,11 +13,11 @@
:style="{
border: text.week === weekNow ? '1px solid var(--box-text-2)' : 'none',
borderRadius: '5px',
backgroundColor: text.week === btnNow ? 'var(--tgc-yellow)' : 'inherit',
backgroundColor: text.week === btnNow ? 'var(--tgc-yellow-1)' : 'inherit',
color: text.week === btnNow ? 'var(--box-text-4)' : 'inherit',
}"
@click="getContents(text.week)"
variant="tonal"
@click="getContents(text.week)"
>
{{ text.text }}
</v-btn>
@@ -39,7 +39,7 @@
</div>
</div>
<v-divider class="calendar-divider" />
<div class="calendar-grid" v-show="switchType==='avatar'">
<div v-show="switchType === 'avatar'" class="calendar-grid">
<div v-for="item in characterCards" :key="item.id" @click="selectAvatar(item)">
<TibCalendarItem
:data="<TGApp.App.Calendar.Item>item"
@@ -48,7 +48,7 @@
/>
</div>
</div>
<div class="calendar-grid" v-show="switchType!=='avatar'">
<div v-show="switchType !== 'avatar'" class="calendar-grid">
<div v-for="item in weaponCards" :key="item.id" @click="selectWeapon(item)">
<TibCalendarItem
:data="<TGApp.App.Calendar.Item>item"
@@ -180,21 +180,21 @@ async function share(): Promise<void> {
</script>
<style lang="css" scoped>
.calendar-box {
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-1);
display: flex;
flex-direction: column;
gap: 5px;
}
.calendar-title {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-title);
font-size: 20px;
justify-content: space-between;
}
.calendar-title-left {
@@ -219,18 +219,18 @@ async function share(): Promise<void> {
}
.calendar-title-switch {
height: 36px;
display: flex;
height: 36px;
align-items: center;
justify-content: center;
color: var(--box-text-3);
color: var(--box-text-1);
}
.calendar-title-btn {
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
color: var(--box-text-3);
border: 1px solid var(--box-text-3);
cursor: pointer;
background: var(--box-bg-t-4);
color: var(--box-text-5);
}
.calendar-divider {

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

@@ -6,7 +6,12 @@
</div>
<div v-if="!loading" class="position-grid">
<!-- todo hover 效果优化 -->
<v-card v-for="card in positionCards" :key="card.postId" class="position-card" variant="outlined">
<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>
@@ -15,7 +20,7 @@
</v-avatar>
</template>
<template #append>
<v-btn variant="tonal" @click="toPost(card)" class="position-card-btn"> 查看 </v-btn>
<v-btn variant="tonal" class="position-card-btn" @click="toPost(card)"> 查看 </v-btn>
</template>
</v-list-item>
</v-list>
@@ -125,8 +130,8 @@ onUnmounted(() => {
.position-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
background: var(--box-bg-1);
border-radius: 5px;
background: var(--box-bg-1);
}
.position-title {
@@ -151,9 +156,9 @@ onUnmounted(() => {
}
.position-card {
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-2);
border: 1px solid var(--common-shadow-2);
}
.position-list {
@@ -183,8 +188,10 @@ onUnmounted(() => {
}
.position-card-btn {
border-radius: 5px;
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
background: var(--box-bg-t-4);
color: var(--box-text-5);
}
.position-card-text {