<template>
	<!-- 跑腿下单页面 -->
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<view class="viewport">
			<view class="buttonList">
				<button class="btn_style">帮我送</button>
				<button class="btn_style">帮我取</button>
				<button class="btn_style">帮我买</button>
			</view>
			<view class="address">
				<view class="sent"> 
					<p class="addressNow">填写目前地址</p>
				</view>
				<view class="sent">
					<p class="addressNow">填写收获地址</p>
				</view>
				<button class="order">去下单</button>
			</view>
		</view>		
</template>

<script>
export default {
	data() {
		return {
			id:0, 
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '../../static/ip_blue.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				iconPath: '../../static/ip_green.png'
			}]
		}
	},
	methods: {

	}
}
</script>


<style>
page {
  background-color: #f4f4f4;
}
.viewport {
	width: 90%;
	height: 330px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10px;
}
.btn_style {
	display: inline-block;
	width: 100px;
	background-color: #9abbd9;
	border-radius: 15px;
	margin-left: 15px;
	margin-top: 10px;
	color: #fff;
}
.address {
	width: 100%;
	height: 250px;
}
.sent {
	width: 85%;
	height: 80px;
	background-color: #c1c1c1;
	border-radius: 15px;
	margin: 0 auto;
	margin-top: 10px;
}
.addressNow {
	font-size: 25px;
	color: #fff;
	line-height: 80px;
	padding-left: 25px;
}
.order {
	width: 85%;
	height: 50px;
	background-color: #9abbd9;
	border-radius: 15px;
	margin: 0 auto;
	color: #fff;
	margin-top: 15px;
}
</style>
