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 19:30:01 +08:00
parent 45bba5a16e
commit cccf1f87c8
2 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,16 @@
<template>
<v-list class="position-card">
<v-list-item>
<v-list-item-title style="color: #fec90b">近期活动</v-list-item-title>
<v-list-item-title style="color: #fec90b; margin-left: 10px">近期活动</v-list-item-title>
<div class="position-grid">
<v-card v-for="card in positionCards" style="background: #5c6474;color: #f4d8a8">
<v-list style="background: #5c6474;color: #f4d8a8">
<v-card v-for="card in positionCards" style="background: #5c6474; color: #faf7e8">
<v-list style="background: #5c6474; color: #f4d8a8">
<v-list-item :title="card.title" :subtitle="card.abstract">
<template v-slot:prepend>
<v-avatar>
<v-img :src="card.icon" />
</v-avatar>
</template>
<template v-slot:prepend>
<v-avatar>
<v-img :src="card.icon" />
</v-avatar>
</template>
</v-list-item>
</v-list>
<v-divider></v-divider>

16
src/pages/Home.vue
View File

@@ -18,7 +18,9 @@
alt="voice"
style="display: inline-block"
/>
<v-card-title style="display: inline-block">{{ pool.title }}</v-card-title>
<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 />
@@ -100,7 +102,8 @@ onMounted(async () => {
await setInterval(() => {
poolCards.value.map(pool => {
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
poolTimePass.value[pool.post_id] = (pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp) * 100;
poolTimePass.value[pool.post_id] =
((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
});
}, 1000);
loading.value = false;
@@ -140,6 +143,9 @@ async function toPost(pool: GachaCard) {
.pool-card {
margin: 10px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
color: #faf7e8;
}
.Home-pool {
@@ -152,12 +158,14 @@ async function toPost(pool: GachaCard) {
height: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 10px;
}
.pool-cover img {
width: 100%;
height: auto;
transition: all 0.5s;
border-radius: 10px;
}
.pool-cover :hover {
@@ -172,6 +180,10 @@ async function toPost(pool: GachaCard) {
display: flex;
}
.pool-character img {
border-radius: 10px;
}
.pool-icon {
width: 80px;
height: 80px;