顺带件简单交互

css/shundaijian.css

@@ -1,10 +1,10 @@
 .row {
     background: white;
     width: 100%;
-    height: 140px;
+    height: 150px;
     border-bottom: 1px solid #ebebeb;
     position: relative;
-    margin-bottom: 5px;
+    margin-bottom: 6px;
 }
 
 .block{
@@ -20,8 +20,8 @@
 .name {
 	font-size: 1.2rem;
 	color: black;
-	line-height: 36px;
-    height: 36px;
+	line-height: 32px;
+    height: 32px;
 	overflow: hidden;
 	padding-left: 5px;
 	font-weight: bolder;
@@ -29,8 +29,14 @@
 }
 
 .row_foot {
-	line-height: 36px;
-	height: 36px;
+	line-height: 32px;
+	height: 32px;
+	display: flex;
+}
+
+.row_header {
+	line-height: 24px;
+	height: 24px;
 	display: flex;
 }
 
@@ -47,28 +53,19 @@
 .loc_range {
 	font-size: 1.1rem;
 	color: black;
-	line-height: 32px;
-    height: 32px;
+	line-height: 28px;
+    height: 28px;
 	display: flex;
 	justify-content: space-between;
 }
 
-.loc_range .between::before {
-	content: '';
-	height: 1px;
-	background-color: black;
-	width: calc(50vw - 100px);
-	position: absolute;
-	display: block;
-	top: 60%;
-}
-
 .loc_range .between {
-	display: inline-block;
 	width: calc(50vw - 100px);
 	text-align: center;
-	line-height: 22px;
+	height: 18px;
+	line-height: 16px;
 	position: relative;
+	border-bottom: 1px solid black;
 }
 
 .loc_range .with_img {
@@ -76,8 +73,8 @@
 }
 
 .loc_range .with_img img {
-	width: 32px;
-	height: 32px;
+	width: 24px;
+	height: 24px;
 }
 
 .name ._text {
@@ -85,8 +82,8 @@
 }
 
 .name ._img {
-	width: 36px;
-	height: 36px;
+	width: 32px;
+	height: 32px;
 }
 
 .name ._img > img {

templete/shundaijian.html

@@ -43,6 +43,9 @@
 		</div>
 		<div id="app" v-cloak>
 			<div class="row clearfix" v-for="(each, index) in orderList" :data-id="each.id">
+				<div class="row_header">
+					{{each.before}}前送达
+				</div>
 				<div class="name">
 					<span class="_text">店铺：{{each.from_address}}</span>
 					<span class="_img" @click="window.open(`tel:${each.shop_phone}`)">