对接数据

pages/Launches/components/SwitchMonth.vue

@@ -0,0 +1,84 @@
+<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">{{ monthName }}</div>
+		<div class="btn" @click="nextYear">
+			<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
+		</div>
+	</div>
+</template>
+
+<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';
+import IconPrevDisabled from '@/static/launches/icon_prev_disabled.png';
+
+export default {
+	data() {
+		return {
+		}
+	},
+	props: {
+		value: {
+			type: Number,
+			default: () => new Date().getMonth() + 1
+		}
+	},
+	methods: {
+		prevYear() {
+			if (this.value > 1) {
+				this.$emit('input', this.value - 1);
+			}
+		},
+		nextYear() {
+			if (this.value < 12) {
+				this.$emit('input', this.value + 1);
+			}
+		}
+	},
+	computed: {
+		monthName() {
+			const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+			return months[this.value - 1];
+		},
+		prevIcon() {
+			return this.value > 1 ? IconPrev : IconPrevDisabled;
+		},
+		nextIcon() {
+			return this.value < 12 ? IconNext : IconNextDisabled;
+		},
+		isNextDisabled() {
+			return this.value >= 12;
+		}
+	},
+}
+</script>
+
+<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>