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

fix(home): 首页样式美化

Browse Source
This commit is contained in:
BTMuli
2023-03-31 22:44:10 +08:00
parent a4a55309bd
commit 6c8f460e56
4 changed files with 45 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -90,7 +90,7 @@ async function writeIndex() {
<style lang="css">
.app-main {
min-height: 100vh;
background: rgba(255, 255, 255, 75%);
background: #ece5d8;
backdrop-filter: blur(20px);
}
</style>

19
src/components/t-position.vue
View File

@@ -1,19 +1,24 @@
<template>
<v-list class="position-card">
<v-list-item>
<v-list-item-title style="color: #fec90b; margin-left: 10px">近期活动</v-list-item-title>
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif"
>近期活动</v-list-item-title
>
<div class="position-grid">
<v-card v-for="card in positionCards" style="background: #5c6474; color: #faf7e8">
<v-list style="background: #5c6474; color: #f4d8a8">
<v-card
v-for="card in positionCards"
style="background: #2d2f33; color: #f4d8a8; border-radius: 10px"
>
<v-list style="background: #2d2f33; color: #f4d8a8">
<v-list-item :title="card.title" :subtitle="card.abstract">
<template v-slot:prepend>
<v-avatar>
<v-img :src="card.icon" />
<v-avatar rounded="0" @click="toPost(card)" style="cursor: pointer">
<v-img :src="card.icon" style="border-radius: 10px" />
</v-avatar>
</template>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-divider class="border-opacity-75"></v-divider>
<v-card-text>
<span style="width: 60%">
<v-icon>mdi-calendar-clock</v-icon>
@@ -107,7 +112,7 @@ async function toPost(card: PositionCard) {
<style lang="css">
.position-card {
margin: 0 10px;
font-family: "Genshin", serif;
font-family: "Genshin-Light", serif;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}

4
src/components/t-sidebar.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- todo 侧边栏宽度调整 -->
<v-navigation-drawer permanent :rail="rail">
<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #ece5d8">
<v-list class="sideList" density="compact" v-model:opened="open" nav>
<!-- 负责收缩侧边栏 -->
<v-list-item @click="collapse">
@@ -79,7 +79,7 @@ function submenu(value: string) {
<style lang="css">
.sideList {
font-family: "Genshin", serif;
font-family: "Genshin-Light", serif;
}
.sideIcon {

61
src/pages/Home.vue
View File

@@ -10,23 +10,21 @@
</div>
<div class="pool-cards" v-else>
<v-card v-for="pool in poolCards" class="pool-card">
<template v-slot:prepend>
<v-img
:src="pool.voice.icon"
width="80px"
height="80px"
alt="voice"
style="display: inline-block"
/>
<v-card-title style="display: inline-block; color: #fec90b">{{
pool.title
}}</v-card-title>
</template>
<template v-slot:append>
<audio :src="pool.voice.url" controls />
</template>
<v-list class="pool-list">
<v-list-item :title="pool.title" :subtitle="pool.subtitle" class="pool-list-item">
<template v-slot:prepend>
<v-img
:src="pool.voice.icon"
style="transform: translate(0, -10px); width: 60px; height: 60px"
/>
</template>
<template v-slot:append>
<audio :src="pool.voice.url" controls />
</template>
</v-list-item>
</v-list>
<!-- 卡池封面 -->
<v-row class="Home-pool">
<v-row>
<div class="pool-cover" @click="toPost(pool)">
<img :src="pool.cover" alt="cover" />
</div>
@@ -35,12 +33,7 @@
<img :src="character.icon" class="pool-icon" alt="character" />
</div>
<div class="pool-clock">
<v-progress-circular
:model-value="poolTimePass[pool.post_id]"
size="100"
color="blue-lighten-3"
width="10"
>
<v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10">
{{ poolTimeGet[pool.post_id] }}
</v-progress-circular>
</div>
@@ -135,7 +128,7 @@ async function toPost(pool: GachaCard) {
<style lang="css">
.pool-cards {
font-family: Genshin, serif;
font-family: Genshin-Light, serif;
display: flex;
flex-direction: row;
align-items: center;
@@ -145,25 +138,30 @@ async function toPost(pool: GachaCard) {
margin: 10px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
color: #faf7e8;
color: #f4d8a8;
}
.Home-pool {
margin-left: 10px;
margin-right: 10px;
.pool-list {
background: #76726c;
}
.pool-list-item {
background: #76726c;
font-family: Genshin, serif;
color: #fec90b;
}
.pool-cover {
width: 690px;
height: auto;
margin-bottom: 10px;
width: 100%;
height: 330px;
margin: 20px;
overflow: hidden;
border-radius: 10px;
}
.pool-cover img {
width: 100%;
height: auto;
height: 330px;
transition: all 0.5s;
border-radius: 10px;
}
@@ -175,6 +173,7 @@ async function toPost(pool: GachaCard) {
}
.pool-character {
margin: 0 20px;
width: 100%;
height: 80px;
display: flex;