style: select样式

src/views/AwardPage/apply.vue

@@ -82,19 +82,29 @@
 									:disabled="readOnly"
 									v-model:value="form[item.key]"
 								/>
-								<a-select
+								<div
+									class="select-container"
 									v-if="item.type === 'select'"
-									:disabled="readOnly"
-									v-model:value="form[item.key]"
-									:options="genderOptions"
 								>
-									<template #suffixIcon>
+									<a-select
+										:disabled="readOnly"
+										v-model:value="form[item.key]"
+										:options="genderOptions"
+									>
+										<template #suffixIcon>
+											<!-- <img
+												class="arrow-down-icon"
+												src="@/assets/images/award/arrow_down.svg"
+											/> -->
+										</template>
+									</a-select>
+									<div class="arrow-wrapper flex flex-center">
 										<img
 											class="arrow-down-icon"
 											src="@/assets/images/award/arrow_down.svg"
 										/>
-									</template>
+									</div>
-								</a-select>
+								</div>
 							</a-form-item>
 						</template>
 					</div>
@@ -411,7 +421,7 @@
 	})
 	const formRef = ref(null)
 	const form = ref({
-		email: 'yhzhang@aidlab.hk',
+		email: '',
 		firstName: '',
 		lastName: '',
 		gender: '',
@@ -1199,14 +1209,25 @@
 							line-height: 6rem;
 						}
 					}
-					:deep(.ant-select-arrow) {
+					// :deep(.ant-select-arrow) {
-						height: 4rem;
+						
-						width: 6.2rem;
+					// 	justify-content: center;
-						justify-content: center;
+					// 	display: flex;
-						display: flex;
+					// 	align-items: center;
-						align-items: center;
+					// }
-						border-left: 0.1rem solid #d5d5d5;
+				}
-					}
+			}
+			.select-container {
+				position: relative;
+				.arrow-wrapper {
+					position: absolute;
+					right: 0;
+					top: 50%;
+					transform: translateY(-50%);
+					width: 6rem;
+					height: 4rem;
+					box-sizing: border-box;
+					border-left: 0.1rem solid #d5d5d5;
 				}
 			}