Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-18 10:18: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="{ :style="{
border: text.week === weekNow ? '1px solid var(--box-text-2)' : 'none', border: text.week === weekNow ? '1px solid var(--box-text-2)' : 'none',
borderRadius: '5px', 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', color: text.week === btnNow ? 'var(--box-text-4)' : 'inherit',
}" }"
@click="getContents(text.week)"
variant="tonal" variant="tonal"
@click="getContents(text.week)"
> >
{{ text.text }} {{ text.text }}
</v-btn> </v-btn>
@@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<v-divider class="calendar-divider" /> <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)"> <div v-for="item in characterCards" :key="item.id" @click="selectAvatar(item)">
<TibCalendarItem <TibCalendarItem
:data="<TGApp.App.Calendar.Item>item" :data="<TGApp.App.Calendar.Item>item"
@@ -48,7 +48,7 @@
/> />
</div> </div>
</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)"> <div v-for="item in weaponCards" :key="item.id" @click="selectWeapon(item)">
<TibCalendarItem <TibCalendarItem
:data="<TGApp.App.Calendar.Item>item" :data="<TGApp.App.Calendar.Item>item"
@@ -180,21 +180,21 @@ async function share(): Promise<void> {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.calendar-box { .calendar-box {
display: flex;
flex-direction: column;
padding: 10px; padding: 10px;
border: 1px solid var(--common-shadow-2); border: 1px solid var(--common-shadow-2);
border-radius: 5px; border-radius: 5px;
background: var(--box-bg-1); background: var(--box-bg-1);
display: flex;
flex-direction: column;
gap: 5px; gap: 5px;
} }
.calendar-title { .calendar-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
justify-content: space-between;
} }
.calendar-title-left { .calendar-title-left {
@@ -219,18 +219,18 @@ async function share(): Promise<void> {
} }
.calendar-title-switch { .calendar-title-switch {
height: 36px;
display: flex; display: flex;
height: 36px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--box-text-3); color: var(--box-text-1);
} }
.calendar-title-btn { .calendar-title-btn {
border: 1px solid var(--common-shadow-4);
border-radius: 5px; border-radius: 5px;
color: var(--box-text-3); background: var(--box-bg-t-4);
border: 1px solid var(--box-text-3); color: var(--box-text-5);
cursor: pointer;
} }
.calendar-divider { .calendar-divider {

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

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