Homestay_manage_app/pages/detailInfo/detailInfo.vue

<template>
	<view class="container">
		<!-- 顶部民宿信息区域 -->
		<view class="header">
			<img src="../../static/my/headerImg.png" />
			<!-- 标题区域 -->
			<view class="header_title">设施详情</view>
			<!-- 返回图标区域 -->
			<img class="header_icon" src="../../static/index/left.png" @click="handleBack" />
			<!-- 民宿名称区域 -->
			<view class="header_name">民宿名称</view>
			<!-- 开业时间区域 -->
			<view class="header_info">2017年开业 I 2017年装修 I 114间客房</view>
			<!-- 类型区域 -->
			<view class="header_types">
				<view class="types_item">包吃住型</view>
			</view>
		</view>

		<!-- 主体内容详细民宿信息区域 -->
		<view class="body">
			<view class="body_title">基本信息</view>
			<view class="body_towns">所属乡镇：宝峰镇</view>
			<view class="body_address">
				<view class="address_text">地址：</view>
				<view>
					宝峰镇宝峰镇宝峰镇宝峰镇宝峰镇宝峰镇宝峰镇
					<img src="../../static/index/address.png" />
				</view>
			</view>
			<view class="body_phone" @click="handlePhone('18320846714')">联系电话：13656895689</view>

			<view class="body_title">政策</view>
			<view class="body_box">
				<img class="box_icon" src="../../static/index/time.png" />
				<view class="box_text">入离时间</view>
			</view>
			<view class="body_time">
				<view class="time_start">入住时间：14:00以后</view>
				<view class="time_end">离店时间：12点以前</view>
			</view>
			<view class="body_box">
				<img class="box_icon2" src="../../static/index/info.png" />
				<view class="box_text">民宿介绍</view>
			</view>

			<view class="body_desc">
				酒店共18层，设有豪华客房与套房共一百余间。房内优异的观景角度，绝不会错过外滩白昼与黑夜截然不同的精彩。秉承璞硯“一城一画”的美学理念，酒店以兼具东方风情与现代意识的空间营造，完美呈现外滩传承百年的海派文化风骨——现代亦怀旧，摩登亦复古。在这片旧时的十里洋场，今日的金融枢纽中心，璞硯用现代的笔触细致地描摹着岁月迭代的点滴：空间内局部传统造型的精彩沿用、细节工艺的精致雕琢，尽承东方雅贵；整体色调明暗的和谐共处，线条延伸的极简艺术，兼容现代韵律。种种设计巧思，在现代与传统中不断的创建微妙平衡，一如老上海兼容并蓄的文化脉络。
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods: {
		handleBack() {
			uni.navigateBack(1)
		},
		handlePhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	overflow: hidden;
	background-color: #fff;

	.header {
		position: relative;
		height: 480rpx;
		color: #fff;
		overflow: hidden;

		img {
			width: 100%;
		}

		.header_title {
			position: absolute;
			top: 65rpx;
			left: 308rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.header_icon {
			position: absolute;
			top: 76rpx;
			left: 5rpx;
			width: 47rpx;
			height: 47rpx;
		}

		.header_name {
			position: absolute;
			top: 155rpx;
			left: 30rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.header_info {
			position: absolute;
			top: 230rpx;
			left: 30rpx;
			font-size: 24rpx;
		}

		.header_types {
			position: absolute;
			top: 281rpx;
			left: 30rpx;
			display: flex;
			font-size: 20rpx;

			.types_item {
				box-sizing: border-box;
				padding: 0 10rpx;
				margin-right: 15rpx;
				height: 30rpx;
				border-radius: 9rpx;
				background-color: rgba(255, 255, 255, 0.2);
			}
		}
	}

	.body {
		position: absolute;
		top: 350rpx;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 0 30rpx 50rpx;
		height: calc(100vh - 350rpx);
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		overflow-y: auto;

		.body_title {
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.body_towns {
			line-height: 55rpx;
			font-size: 28rpx;
		}

		.body_address {
			display: flex;
			height: auto;
			line-height: 55rpx;

			.address_text {
				width: 125rpx;
			}

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

		.body_phone {
			line-height: 55rpx;
			font-size: 28rpx;
		}

		.body_box {
			display: flex;
			align-items: center;

			.box_icon {
				width: 36rpx;
				height: 36rpx;
			}

			.box_icon2 {
				margin-top: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.box_text {
				margin-left: 16rpx;
				font-size: 28rpx;
			}
		}

		.body_time {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			color: #808080;
			font-size: 24rpx;

			.time_start {
				margin-left: 50rpx;
				margin-right: 60rpx;
			}
		}

		.body_desc {
			margin: 10rpx 0 0 50rpx;
			line-height: 45rpx;
			color: #808080;
			font-size: 24rpx;
		}
	}
}
</style>