1.紧急救援

pages/index/rescue.vue

@@ -1,52 +1,296 @@
-<template>
-	<view class="box">
-		紧急救援
-	</view>
-</template>
+<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>
 
-<script>
-	export default {
-		data() {
-			return {
+			<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,
+			}
 		},
-		methods: {
+		onLoad() {
+			uni.getSystemInfo({
+				success: (res) => {
+					this.mapHeight = res.windowHeight*2 - 664 - 120
+				}
+			})
 			
-		}
-	}
-</script>
-
-<style>
-	.box{
-		min-height: 100vh;
-		background-color: #f4f5f7;
-	}
-	.top{
-		
-		background-color: #FFFFFF;
-		padding: 30rpx 20rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.left{
-		display: flex;
-		align-items: center;
+			
+		},
+		
+		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;
 	}
-	.car{
-		
+	.leftTitle{
+		width: 56rpx;
 		font-size: 28rpx;
-		
-		color: #333333;
+		font-weight: 400;
+		color: #666666;
 		line-height: 40rpx;
-		/* 隐藏文字显示 ...不换行 */
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.brandLogo {
-		width: 42rpx;
-		height: 42rpx;
-	}
+		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>