hotelorder_student_h5/pages/default/default.vue

<template>
	<div ref="container" class="default-page">
		<img :src="getImagePath('default.png')" alt="Image" class="mimg" />
		<p class="mp">{{ description }}</p>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				description: "酒店预订系统正在升级，预计很快将重新开放。"
			};
		},
		mounted() {
			const screenHeight = this.getScreenHeight();
			this.$refs.container.style.height = `${screenHeight}px`;
		},
		methods: {
			getImagePath(imageName) {
				return require(`@/static/images/${imageName}`);
			},
			getScreenHeight() {
				const screenHeight = window.innerHeight;
				return screenHeight;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.default-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		box-sizing: border-box;
		text-align: center;
		background-color: #fff;

		.mimg {
			height: 50%;
			box-sizing: border-box;
			width: auto;
			margin-bottom: 20rpx;
		}

		.mp {
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			line-height: 2.8rem;
			height: 50%;
			box-sizing: border-box;
			color: rgba(87, 146, 240, 1);
			text-align: center;
			vertical-align: top;
		}
	}

	@media screen and (orientation: landscape) {
		.default-page {
			flex-direction: row;

			.mimg {
				width: 50%;
				box-sizing: border-box;
				height: auto;
			}

			.mp {
				margin: 1rem;
			}
		}
	}
</style>