<template>
	<view class="detail_container">
		<!-- 头部详情 -->
		<view class="detail_head">
			<image class="head_cover" src="@/static/images/start/login-bg-mob.png" mode="widthFix"></image>
			<view class="nav_item">
				<u-icon name="arrow-left" color="#fff" @click="goBack"></u-icon>
			</view>
		</view>
		
		<!-- 球馆信息卡片 -->
		<view class="arnea_card">
			<view class="arena_box">
				<ArenaDetailCard />
			</view>
		</view>
		
		<!-- 场馆评价 -->
		<EvaluateCard />
		<!-- 拼球信息卡 -->
		<BookingInfoCard />
		<!-- 系统通知 -->
		<SystemTip />
		
	</view>
</template>

<script>
	import SystemTip from '@/components/systemTip.vue'
	import BookingInfoCard from './components/bookingInfoCard.vue'
	import EvaluateCard from './components/evaluateCard.vue'
	import ArenaDetailCard from '@/pages/arenaDetail/components/ArenaDetailCard.vue'
	export default {
		components: { ArenaDetailCard, EvaluateCard, BookingInfoCard, SystemTip },
		data() {
			return {
				status: 'loadmore'
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			goRouter(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail_container{
	background-color: #F6F6F6;
	min-height: 100vh;
	padding-bottom: 60rpx;
	// 头部背景
	.detail_head{
		position: relative;
		height: 396rpx;
		overflow: hidden;
		.head_cover{
			position: absolute;
			top: -344rpx;
			left: 0;
			width: 100%;
		}
		.nav_item{
			width: 100%;
			box-sizing: border-box;
			margin: 68rpx 0 0 40rpx;
		}
	}
	// 球馆信息
	.arnea_card{
		position: relative;
		.arena_box{ 
			margin-top: -172rpx;
		}
	}

}
</style>