wxThird/pages/index/rescue.vue

<template>
	<view class="box">
		<map :style="{height:mapHeight + 'rpx'}" :latitude="latitude" :longitude="longitude" :markers="covers"></map>

		<view class="contBox">
			<view class="tab">
				<view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">现在</view>
				<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">预约</view>
			</view>

			<view class="timeBox">
				<view class="time">预约救援时间</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			</view>


			<view class="typeBox">
				<view class="box2">
					<image src="../../static/img/icon_dadian_N.png" mode="" class="typeImg"></image>
					<view class="title">搭电</view>
				</view>
				<view class="box2">
					<image src="../../static/img/icon_tuoche_N.png" mode="" class="typeImg"></image>
					<view class="title">拖车</view>
				</view>
				<view class="box2">
					<image src="../../static/img/icon_luntai_N.png" mode="" class="typeImg"></image>
					<view class="title">换胎</view>
				</view>
			</view>

			<view class="price">服务费用 199元/次</view>

			<view class="shopBox">
				<view class="left">
					<view class="graypoint"></view>
					<view class="leftTitle">门店</view>
					<view class="content">服务门店可修改</view>
				</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>

			</view>

			<view class="shopBox">
				<view class="left">
					<view class="graypoint"></view>
					<view class="leftTitle">位置</view>
					<view class="content">当前位置</view>
				</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			
			</view>
			
			<view class="shopBox">
				<view class="left">
					<view class="graypoint"></view>
					<view class="leftTitle">终点</view>
					<view class="content">目的地</view>
				</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			
			</view>
			
		</view>

		<view class="bottomView">
			<view class="sure" @click="sure">确定</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/img/icon_qidian.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/img/icon_zhongdian.png'
				}],
				tabIndex: 0,
				
				mapHeight:200,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.mapHeight = res.windowHeight*2 - 664 - 120
				}
			})
			
			
		},
		
		methods: {
			tabClick(num) {
				this.tabIndex = num;
				


			},
		}
	}
</script>

<style>
	.box {
		width: 100vw;
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	map {
		width: 750rpx;
		
	}

	.contBox {
		width: 100%;
		height: 664rpx;
	}

	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 230rpx;
		padding-right: 230rpx;
		height: 92rpx;
		line-height: 60rpx;
	}

	.tabLine {

		font-size: 30rpx;
		color: #333333;
		text-align: center;

	}

	.tabActive {

		color: #FF0000;
		font-weight: bold;
		border-bottom: 4rpx solid #FF0000;

	}

	.timeBox {
		padding-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time {

		color: #959595;
		font-size: 24rpx;

	}

	.typeBox {
		padding: 30rpx 115rpx;
		display: flex;
		justify-content: space-between;
	}

	.box2 {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #FFFFFF;
		height: 32rpx;
		border-radius: 10rpx;
		border: 2rpx solid #CCCCCC;
	}

	.typeImg {
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}

	.title {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}


	.price {
		padding-bottom: 30rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #D53533;
		text-align: center;
	}

	.shopBox {
		padding: 30rpx 24rpx;
		border-top: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
	}
	.leftTitle{
		width: 56rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		margin-left: 16rpx;
		margin-right: 30rpx;
	}

	.graypoint {
		width: 14rpx;
		height: 14rpx;
		background: #DDDDDD;
		border-radius: 7rpx;
	}

	.bluepoint {
		width: 14rpx;
		height: 14rpx;

		background: #3F90F7;
		border-radius: 7rpx;
	}

	.redpoint {
		width: 14rpx;
		height: 14rpx;

		background: #FF0000;
		border-radius: 7rpx;
	}
















	.bottomView {
		border-top: 1rpx solid #EEEEEE;
		background-color: #FFFFFF;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.sure {

		background-color: #D53533;
		margin: 23rpx 30rpx;
		height: 74rpx;

		border-radius: 37rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;

		text-align: center;
		line-height: 74rpx;
	}
</style>