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

fix(lottery): 抽奖详情页样式美化

Browse Source
This commit is contained in:
BTMuli
2023-04-01 01:21:43 +08:00
parent 77bd6fe77c
commit b4e26f172a
1 changed files with 64 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/t-lottery.vue
View File

@@ -2,9 +2,10 @@
<div v-if="loading">
<t-loading :empty="loadingEmpty" :title="loadingTitle" />
</div>
<div v-else class="mys-post-body">
<v-card title="抽奖详情" class="lottery-card">
<v-list>
<div v-else>
<div class="lottery-div">
<div class="lottery-title">抽奖详情</div>
<v-list class="lottery-list">
<v-list-item>
<template v-slot:prepend>
<v-avatar>
@@ -21,30 +22,28 @@
<template v-slot:append>抽奖 ID</template>
</v-list-item>
</v-list>
<v-card-actions>
<v-btn class="lottery-back" @click="backPost">返回</v-btn>
</v-card-actions>
</v-card>
<v-card title="中奖名单" class="lottery-card">
<v-card v-for="reward in lotteryCard.rewards">
<v-list>
<v-list-item>
<v-list-item-title>{{ reward.rewardName }}</v-list-item-title>
<template v-slot:append>
<v-list-item-subtitle>中奖人数：{{ reward.winnerNumber }}</v-list-item-subtitle>
</template>
</v-list-item>
<v-list-item v-for="user in reward.users" width="50%">
<template v-slot:prepend>
<v-avatar>
<v-img :src="user.avatar_url" />
</v-avatar>
</template>
{{ user.nickname }}
</v-list-item>
<v-btn class="lottery-back" @click="backPost">返回</v-btn>
</div>
<div class="lottery-div">
<div class="lottery-title">奖品详情</div>
<div v-for="reward in lotteryCard.rewards">
<v-list class="lottery-list">
<v-list-item :title="reward.rewardName" :subtitle="'中奖人数' + reward.winnerNumber" />
</v-list>
</v-card>
</v-card>
<div class="lottery-grid">
<v-list v-for="user in reward.users" class="lottery-sub-list">
<v-list-item>
<template v-slot:prepend>
<v-avatar>
<v-img :src="user.avatar_url" />
</v-avatar>
</template>
{{ user.nickname }}
</v-list-item>
</v-list>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
@@ -93,13 +92,49 @@ onMounted(async () => {
});
</script>
<style lang="css">
.lottery-card {
.lottery-div {
background: #546d8b;
border-radius: 10px;
margin: 10px;
padding: 10px;
}
.lottery-title {
font-family: Genshin, serif;
font-size: 20px;
color: #faf7e8;
margin: 10px;
}
.lottery-list {
background: #faf7e8;
border-radius: 10px;
margin: 10px;
color: #546d8b;
font-family: Genshin-Light, serif;
}
.lottery-sub-list {
background: #546d8b;
border-radius: 10px;
margin: 10px;
color: #faf7e8;
font-family: Genshin-Light, serif;
}
.lottery-back {
margin: 10px;
background: #5c6474 !important;
color: #f4d8a8 !important;
font-family: Genshin, serif;
color: #546d8b !important;
background: #faf7e8 !important;
}
.lottery-grid {
background: #faf7e8;
border-radius: 10px;
margin: 10px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
}
</style>