1

pages/buytickets/selectSite.vue

@@ -23,63 +23,7 @@
 				<span>换向</span>
 			</view> -->
 		</view>
-		<u-popup v-model="show1" mode="center" border-radius="20">
-			<view class="sitePopup">
-				<view class="sitePopup-head">
-					<h4>9路支线</h4>
-					<p>开往：红光路加气站 上车站点：玉桥小区</p>
-				</view>
-				<view class="sitePopup-main">
-					<view class="remind-item-bg remind-item-bg1 ">							
-						<view class="remind-item remind-item1">
-							<u-icon name="icon_tixing-01" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
-							<span>无提醒</span>
-						</view>
-					</view>
-					<view class="remind-item-bg remind-item-bg2 active">	
-						<view class="remind-item remind-item2">
-							<u-icon name="icon_tixing-02" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
-							<span>距离1站</span>
-						</view>
-					</view>
-					<view class="remind-item-bg remind-item-bg3">
-						<view class="remind-item remind-item3">
-							<u-icon name="icon_tixing-03" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
-							<span>距离2站</span>
-						</view>
-					</view>
-				</view>
-				<view class="sitePopup-foot">
-					<view class="sitePopup-btn">取消</view>
-					<view class="sitePopup-btn">确定</view>
-				</view>
-			</view>
-		</u-popup>
-		<u-button @click="show1 = true">打开</u-button>
-		
-		<u-popup v-model="show2" mode="center" closeable="true" border-radius="20">
-			<view class="sitePopup">
-				<view class="sitePopup-head">
-					<h1>六中 → 锣场</h1>
-					<p>首班：6：00 末班：18：00</p>
-				</view>
-				<view class="sitePopup-main">
-					<view class="sitePopup-driver">				
-						<view class="driver-info">
-							<view class="driver-head">
-								<u-avatar :src="src" size="100"></u-avatar>
-							</view>
-							<view class="driver-text">
-								<h2>鄂D12345</h2>
-								<p>李师傅  15512344567</p>
-							</view>
-						</view>
-						<u-icon name="dianhua" custom-prefix="custom-icon" size="80" color="#1778fb"></u-icon>
-					</view>
-				</view>
-			</view>
-		</u-popup>
-		<u-button @click="show2 = true">打开</u-button>
+	
 		
 		<view class="map-route">
 			<view class="map-route-head" >

pages/route/index.js

@@ -19,6 +19,8 @@ export default {
 			//地图居中后的位置
 			longitude: 112.276527,
 			latitude: 30.306427,
+				show1: false,
+						show2: false,
 			shiftInfo: {
 
 			},

pages/route/index.vue

@@ -9,7 +9,63 @@
 					{{caritem.licensePlateNumber}}{{caritem.driverInfo.name}}{{caritem.driverInfo.phone}}
 				</view>
 		</u-modal>
-		
+		<u-popup v-model="show1" mode="center" border-radius="20">
+					<view class="sitePopup">
+						<view class="sitePopup-head">
+							<h4>9路支线</h4>
+							<p>开往：红光路加气站 上车站点：玉桥小区</p>
+						</view>
+						<view class="sitePopup-main">
+							<view class="remind-item-bg remind-item-bg1 ">							
+								<view class="remind-item remind-item1">
+									<u-icon name="icon_tixing-01" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
+									<span>无提醒</span>
+								</view>
+							</view>
+							<view class="remind-item-bg remind-item-bg2 active">	
+								<view class="remind-item remind-item2">
+									<u-icon name="icon_tixing-02" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
+									<span>距离1站</span>
+								</view>
+							</view>
+							<view class="remind-item-bg remind-item-bg3">
+								<view class="remind-item remind-item3">
+									<u-icon name="icon_tixing-03" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
+									<span>距离2站</span>
+								</view>
+							</view>
+						</view>
+						<view class="sitePopup-foot">
+							<view class="sitePopup-btn">取消</view>
+							<view class="sitePopup-btn">确定</view>
+						</view>
+					</view>
+				</u-popup>
+				<u-button @click="show1 = true">打开</u-button>
+				
+				<u-popup v-model="show2" mode="center" closeable="true" border-radius="20">
+					<view class="sitePopup">
+						<view class="sitePopup-head">
+							<h1>六中 → 锣场</h1>
+							<p>首班：6：00 末班：18：00</p>
+						</view>
+						<view class="sitePopup-main">
+							<view class="sitePopup-driver">				
+								<view class="driver-info">
+									<view class="driver-head">
+										<u-avatar :src="src" size="100"></u-avatar>
+									</view>
+									<view class="driver-text">
+										<h2>鄂D12345</h2>
+										<p>李师傅  15512344567</p>
+									</view>
+								</view>
+								<u-icon name="dianhua" custom-prefix="custom-icon" size="80" color="#1778fb"></u-icon>
+							</view>
+						</view>
+					</view>
+				</u-popup>
+				<u-button @click="show2 = true">打开</u-button>
 		
 		<u-navbar :title="title"  >
 			<view class="slot-wrap"></view>
@@ -85,7 +141,86 @@
 	export default   api
 </script>
 	
-<style scoped lang="scss">
+<style scoped lang="scss">
+	.sitePopup{
+			width: 300px;
+			padding: 15px;
+			border: 10px;
+		}
+		.sitePopup-head{
+			h4{
+				font-size: 18px;
+			}
+		}
+		.sitePopup-driver{
+			display: flex;
+			width: 100%;
+			padding-top: 15px;
+			border-top: 1px solid #f7f7f7;
+			justify-content: space-between;
+			.driver-info{
+				display: flex;
+				.driver-text{
+					margin-left: 10px;
+				}
+			}
+		}
+		.sitePopup-main{
+			display: flex;
+			justify-content: space-between;
+			margin-top: 20px;
+			.remind-item{
+				height: 80px;
+				width: 80px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				border-radius: 10px;
+				border: 2px solid #fff;
+				span{
+					color:#fff;
+				}
+			}
+			.remind-item1{
+				background-color: #ff6666;
+			}
+			.remind-item2{
+				background-color: #389e0d;
+			}
+			.remind-item3{
+				background-color: #4291ff;
+			}
+			.remind-item-bg{
+				border: 2px solid #fff;
+			}
+			.remind-item-bg1.active{
+				border: 2px solid #ff6666;
+				border-radius:10px;
+			}
+			.remind-item-bg2.active{
+				border: 2px solid #389e0d;
+				border-radius:10px;
+			}
+			.remind-item-bg3.active{
+				border: 2px solid #4291ff;
+				border-radius:10px;
+			}
+		}
+		.sitePopup-foot{
+			display: flex;
+			justify-content: space-between;
+			margin-top: 20px;
+			.sitePopup-btn{
+				background-color: #ddd;
+				flex: 1;
+				margin: 5px;
+				height: 40px;
+				line-height: 40px;
+				text-align: center;
+				border-radius: 20px;
+			}
+		}
 	.map-route {
 		border-top: 10px solid #f7f7f7;
 		background-color: #fff;