feat: award表单页面

src/views/AwardPage/components/UploadStatus.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="upload-status">
+		<div class="upload-status-item">
+			<div class="upload-status-item-icon">
+				<img
+					v-if="status === 'uploading'"
+					src="@/assets/images/award/progress.png"
+					alt=""
+					class="progress-icon"
+				/>
+				<img
+					v-if="status === 'success'"
+					src="@/assets/images/award/successful.png"
+					alt=""
+					class="progress-icon successful-icon"
+				/>
+			</div>
+			<div class="text">{{ text }}</div>
+      <div class="tips">{{ tips }}</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, watch } from 'vue'
+	const props = defineProps<{
+		status: string
+		type: 'pdf' | 'video'
+	}>()
+
+	const textMap: Record<string, string> = {
+		idle: '',
+		uploading: 'Upload in progress…',
+		success: 'Uploaded Successfully',
+		error: 'Upload failed'
+	}
+
+	const tips = computed(() => {
+		if (props.type === 'pdf') {
+			return 'PDF file, max 20MB'
+		} else if (props.type === 'video') {
+			return 'Video file (MP4, MOV), 1080p, max 100MB'
+		}
+		return ''
+	})
+
+const text = computed(() => {
+  return textMap[props.status] ?? textMap.uploading
+})
+</script>
+<style scoped lang="less">
+	.upload-status {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.upload-status-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.progress-icon {
+				width: 12rem;
+				height: 12rem;
+			}
+			.text {
+				font-family: Arial;
+				font-weight: 400;
+				color: #585858;
+				font-size: 2.4rem;
+			}
+      .tips{
+        font-family: Arial;
+        font-weight: 400;
+        font-size: 1.8rem;
+        color: #aaa;
+      }
+		}
+	}
+</style>