Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-15 09:48:14 +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

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

@@ -2,9 +2,10 @@
<div v-if="loading"> <div v-if="loading">
<t-loading :empty="loadingEmpty" :title="loadingTitle" /> <t-loading :empty="loadingEmpty" :title="loadingTitle" />
</div> </div>
<div v-else class="mys-post-body"> <div v-else>
<v-card title="抽奖详情" class="lottery-card"> <div class="lottery-div">
<v-list> <div class="lottery-title">抽奖详情</div>
<v-list class="lottery-list">
<v-list-item> <v-list-item>
<template v-slot:prepend> <template v-slot:prepend>
<v-avatar> <v-avatar>
@@ -21,20 +22,17 @@
<template v-slot:append>抽奖 ID</template> <template v-slot:append>抽奖 ID</template>
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-card-actions>
<v-btn class="lottery-back" @click="backPost">返回</v-btn> <v-btn class="lottery-back" @click="backPost">返回</v-btn>
</v-card-actions> </div>
</v-card> <div class="lottery-div">
<v-card title="中奖名单" class="lottery-card"> <div class="lottery-title">奖品详情</div>
<v-card v-for="reward in lotteryCard.rewards"> <div v-for="reward in lotteryCard.rewards">
<v-list> <v-list class="lottery-list">
<v-list-item :title="reward.rewardName" :subtitle="'中奖人数' + reward.winnerNumber" />
</v-list>
<div class="lottery-grid">
<v-list v-for="user in reward.users" class="lottery-sub-list">
<v-list-item> <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> <template v-slot:prepend>
<v-avatar> <v-avatar>
<v-img :src="user.avatar_url" /> <v-img :src="user.avatar_url" />
@@ -43,8 +41,9 @@
{{ user.nickname }} {{ user.nickname }}
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-card> </div>
</v-card> </div>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -93,13 +92,49 @@ onMounted(async () => {
}); });
</script> </script>
<style lang="css"> <style lang="css">
.lottery-card { .lottery-div {
background: #546d8b;
border-radius: 10px;
margin: 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 { .lottery-back {
margin: 10px; margin: 10px;
background: #5c6474 !important; font-family: Genshin, serif;
color: #f4d8a8 !important; 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> </style>