From b4e26f172a1c27bf54d446d26fde6bef5d0bec4c Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 1 Apr 2023 01:21:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(lottery):=20=E6=8A=BD=E5=A5=96=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E6=A0=B7=E5=BC=8F=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/t-lottery.vue | 93 ++++++++++++++++++++++++++++-------------
 1 file changed, 64 insertions(+), 29 deletions(-)

diff --git a/src/views/t-lottery.vue b/src/views/t-lottery.vue
index aabf6ae4..f633228c 100644
--- a/src/views/t-lottery.vue
+++ b/src/views/t-lottery.vue
@@ -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>