wisdom/pages/Lighting_data/Lighting_data.vue

<template>
	<view>
		<view class="year-month">
			<button @click="month" class="month">最近一月</button>
			<button @click="year" class="year">最近一年</button>
		</view>
		<view class="chart">
			<month v-show="monthDate"></month>
			<year v-show="yearDate"></year>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Screen: '',
				monthDate: true,
				yearDate: false,
			}
		},
		methods: {
			month() {
				this.monthDate = true
				this.yearDate = false
			},
			year(){
				this.monthDate = false
				this.yearDate = true
			}
		}
	}
</script>

<style lang="scss">
	.year-month {
		width: 100vmax;
		height: 10vmin;
		position: relative;
		margin-top: 3vmin;

		button {
			position: absolute;
			width: 15vmax;
			height: 10vmin;
			font-size: calc(30vmin / 7.5);
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: cornflowerblue;
			color: #ffffff;
			&:active{
				transfORM: scale(0.98);
				box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
			}
		}
	}

	.year {
		left: 30vmax;
	}

	.month {
		left: 5vmax;
	}
	
	.chart{
		width: 90vmax;
		height: 70vmin;
	}
</style>