Homestay_manage_app/pages/detail/detail.vue

<template>
	<view class="container">
		<!-- 顶部民宿图片区域 -->
		<view class="banner">
			<img class="img" src="../../static/index/banner.png" />

			<view class="slogan">
				<img src="../../static/index/slogan.png" />
			</view>
		</view>

		<!-- 民宿详细信息区域 -->
		<view class="detail">
			<view class="detail_name">民宿名称</view>

			<view class="detail_info">
				<view class="info_left">2021年装修|2023年开业</view>
				<view class="info_right">
					设施/详情
					<img src="../../static/index/right.png" />
				</view>
			</view>

			<view class="detail_group">
				<view class="group_item">
					<img src="../../static/index/meeting.png" />
					会议室
				</view>
				<view class="group_item">
					<img src="../../static/index/brekker.png" />
					含早
				</view>
				<view class="group_item">
					<img src="../../static/index/parking.png" />
					免费停车场
				</view>
			</view>

			<view class="address">
				<view class="address_left">宜春市靖安县北高速路口什么路899号</view>
				<view class="address_right">
					<view class="right_box">
						<img src="../../static/index/map.png" />
					</view>
					<view class="right_box">
						<img src="../../static/index/phone.png" />
					</view>
				</view>
			</view>

			<view class="distance">距离我520km</view>
		</view>

		<!-- 房型信息区域 -->
		<view class="body">
			<view class="body_header">123</view>
			<view class="body_content">456</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	onLoad(options) {
		// console.log(JSON.parse(options.info))
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 100vh;
	background-color: #ebeced;

	.banner {
		position: relative;
		margin-top: 20rpx;
		width: 750rpx;
		height: 422rpx;

		.img {
			width: 100%;
			height: 100%;
		}

		.slogan {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 163rpx;
			height: 60rpx;
			background-color: rgba(255, 255, 255, 0.4);

			img {
				width: 125rpx;
				height: 44rpx;
			}
		}
	}

	.detail {
		position: absolute;
		top: 265rpx;
		left: 20rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 710rpx;
		height: 254rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.detail_name {
			margin-top: 25rpx;
			font-size: 34rpx;
			font-weight: bold;
		}

		.detail_info {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;

			.info_left {
				color: #999999;
				font-size: 20rpx;
			}

			.info_right {
				display: flex;
				align-items: center;
				color: #096562;
				font-size: 24rpx;

				img {
					margin-left: 6rpx;
					width: 10rpx;
					height: 20rpx;
				}
			}
		}

		.detail_group {
			display: flex;
			flex-wrap: wrap;
			margin-top: 5rpx;

			.group_item {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
				color: #999999;
				font-size: 20rpx;

				img {
					margin-right: 5rpx;
					width: 22rpx;
					height: 22rpx;
				}
			}
		}

		.address {
			display: flex;
			justify-content: space-between;
			margin-top: 8rpx;
			font-size: 28rpx;
			font-weight: bold;

			.address_left {
				width: 480rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.address_right {
				display: flex;

				.right_box {
					margin-left: 28rpx;
					width: 50rpx;
					height: 78rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.distance {
			margin-top: -35rpx;
			color: #999999;
			font-size: 24rpx;
		}
	}

	.body {
		position: absolute;
		top: 539rpx;
		left: 20rpx;
		width: 710rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.body_header {
			height: 150rpx;
			border-radius: 10rpx 10rpx 0 0;
			background-color: skyblue;
		}

		.body_content {
		}
	}
}
</style>