wx_mini_app/pages/roomService/roomService.vue

<template>
	<view>
		<u-navbar title="客房服务" :bgColor="'#00AAFF'" :titleStyle="{color:'#fff'}" placeholder>
			<view class="u-nav-slot" slot="left">
			</view>
		</u-navbar>
		<div class="avatar">
			<u-avatar size="80" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
			<div style="color:#fff;margin-left:10px;">
				暂未入住
			</div>
		</div>
		<div class="ability-top">
			<div>
				<div style="font-size:18px;font-weight: bold;">
					房务功能
				</div>
				<div class="ability-top-grid">
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/xuzhu.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">续住</span>
						</div>
						<div style="color:#00000040;margin-top:5px;">
							续住功能
						</div>
					</div>
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/liuyan.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">留言</span>
						</div>
						<div style="color:#00000040;margin-top:5px;">
							对酒店进行留言
						</div>
					</div>
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/wifi.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">WIFI</span>
						</div>
						<div style="color:#00000040;margin-top:5px;">
							一键连接WIFI
						</div>
					</div>
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/hujiaofuwuyuan.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">呼叫服务</span>
						</div>
						<div style="color:#00000040;margin-top:5px;">
							呼叫酒店提供服务
						</div>
					</div>
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/weixiu.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">维修</span>
						</div>
						<div style="color:#00000040;margin-top:5px;font-size:15px;">
							房间物品损坏进行维修
						</div>
					</div>
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/kaipiaowancheng.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">预约开票</span>
						</div>
						<div style="color:#00000040;margin-top:5px;font-size:15px;">
							一键预约开取发票功能
						</div>
					</div>
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/lianxiqiantai.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">联系前台</span>
						</div>
						<div style="color:#00000040;margin-top:5px;">
							联系酒店前台
						</div>
					</div>
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/tuifang.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">一键退房</span>
						</div>
						<div style="color:#00000040;margin-top:5px;">
							点击进行退房
						</div>
					</div>
				</div>
			</div>
			<div style="margin-top:20px;">
				<div style="font-size:18px;font-weight: bold;">
					点单服务
				</div>
				<div class="ability-top-grid">
					<div class="ability-top-grid-box">
						<div style="display:flex;align-items:center;">
							<u--image :showLoading="true" src="/static/roomService/diancan.svg" width="38px" height="38px" @click="click"></u--image>
							<span style="margin-left:5px;">点餐</span>
						</div>
						<div style="color:#00000040;margin-top:5px;">
							点餐，购买商品
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.avatar{
	width: 100vw;
	height: 60px;
	display: flex;
	align-items: center;
	background: #00aaff;
	padding: 20px;
}
.ability-top{
	padding: 20px;
}
.ability-top-grid{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px 30px;
	margin-top: 10px;
}
.ability-top-grid-box{
	padding: 10px;
	background: #f9f9f9;
	border-radius: 8px;
}
</style>