对接数据

pages/Launches/components/SwitchYear.vue

@@ -0,0 +1,78 @@
+<script>
+import IconPrev from '@/static/launches/icon_prev.png';
+import IconNext from '@/static/launches/icon_next.png';
+import IconNextDisabled from '@/static/launches/icon_next_disabled.png';
+
+export default {
+	props: {
+		value: {
+			type: Number,
+			default: () => new Date().getFullYear()
+		}
+	},
+	data() {
+		return {}
+	},
+	computed: {
+		year() {
+			return this.value;
+		},
+		prevIcon() {
+			return IconPrev;
+		},
+		nextIcon() {
+			return this.year === new Date().getFullYear() ? IconNextDisabled : IconNext;
+		},
+		isNextDisabled() {
+			return this.year === new Date().getFullYear();
+		}
+	},
+	methods: {
+		prevYear() {
+			this.$emit('input', this.year - 1);
+		},
+		nextYear() {
+			if (!this.isNextDisabled) {
+				this.$emit('input', this.year + 1);
+			}
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="flex-center box">
+		<div class="btn" @click="prevYear">
+			<img :src="prevIcon" alt="Previous Year" />
+		</div>
+		<div style="width: 60px;text-align: center">{{ year }}</div>
+		<div class="btn" @click="nextYear">
+			<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.box {
+	gap: 16px;
+	color: #3A4A65;
+	font-size: 24px;
+	font-family: 'Poppins-SemiBold', serif;
+	.btn {
+		width: 48px;
+		height: 48px;
+		cursor: pointer;
+		background-color: #FFFFFF;
+		border-radius: 4px;
+
+		&:active {
+			opacity: 0.8;
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>