style: 竞赛主页样式修改

src/views/AwardPage/components/PrizesSection.vue

@@ -24,10 +24,13 @@
 		>
 			<div
 				class="prize-item flex flex-col flex-center"
+				:class="{ smaller: item.smaller }"
 				v-for="item in prizes"
 				:key="item.name"
 			>
-				<div class="prize-money">{{ item.money }}</div>
+				<div class="prize-money">
+					{{ item.money }}
+				</div>
 				<div class="prize-name">{{ item.name }}</div>
 				<div class="prize-desc flex flex-col flex-center">
 					<div
@@ -49,23 +52,24 @@
 	const prizes = [
 		{
 			money: 'US$5000',
-			name: 'Grand Prize',
+			name: 'Grand Awards',
 			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
 		},
 		{
 			money: 'US$3000',
-			name: 'First Runner-Up',
+			name: 'Gold Awards',
 			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
 		},
 		{
 			money: 'US$2000',
-			name: 'Second Runner-Up',
+			name: 'Silver Awards',
 			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
 		},
 		{
-			money: 'Certification',
+			money: 'Award\nCertification',
 			name: 'Finalists',
-			desc: ['Award Ceritificate', 'Global Media Exposure']
+			desc: ['Award Ceritificate', 'Global Media Exposure'],
+			smaller: true
 		}
 	]
 
@@ -214,10 +218,22 @@
 						no-repeat;
 					background-size: 100% 100%;
 				}
+				&.smaller {
+					.prize-money {
+						font-size: 3.6rem;
+						line-height: 3.8rem;
+					}
+				}
 				.prize-money {
 					font-family: 'PoppinsBold';
 					font-weight: bold;
 					font-size: 4rem;
+					white-space: pre-line;
+					text-align: center;
+					line-height: 7.6rem;
+					&.smaller {
+						font-size: 3.6rem;
+					}
 				}
 				.prize-name {
 					font-family: 'PoppinsMedium';