售票详情

pages/order/info.vue

@@ -3,6 +3,68 @@
 		<u-navbar   title="售票详情" :is-back="true" >
 				<view class="slot-wrap"></view>	
 		</u-navbar>
+		<view class="von-sp-info">
+			<!-- bgblue支付宝 bggreen微信支付 bgorange现金购票 bgred纸质车票 -->
+			<h3 class="flex-spal bggreen">
+				订单编号：1234567812345678<text>微信支付</text>
+			</h3>
+			<view class="von-form">
+				<view class="von-form-text">
+					<p><text>成人票</text>6.00</p>
+					<p><text>货票</text>20.00</p>
+				</view>
+				<h4 class="flex-sp">实际票价<text class="red">￥26.00</text></h4>
+			</view>
+			<view class="von-forme">
+				<view class="von-forme-item">
+					<label>行程</label>
+					<text>玉桥 - 宿架转盘玉桥 - 宿架转盘玉桥 - 宿架转盘玉桥 - 宿架转盘</text>
+				</view>
+				<view class="von-forme-item">
+					<label>车票状态</label>
+					<text>乘车中/已过期</text>
+				</view>
+				<view class="von-forme-item">
+					<label>创建时间</label>
+					<text>2021-03-30 12:00:00</text>
+				</view>
+				<view class="von-forme-item">
+					<label>支付时间</label>
+					<text>2021-03-30 12:00:00</text>
+				</view>
+				<view class="von-forme-item">
+					<label>关闭时间</label>
+					<text>2021-03-30 12:00:00</text>
+				</view>
+			</view>
+			<view class="von-forme">
+				<view class="von-forme-item">
+					<label>线路</label>
+					<text>1号线</text>
+				</view>
+				<view class="von-forme-item">
+					<label>起止站点</label>
+					<text>六中 - 罗场</text>
+				</view>
+				<view class="von-forme-item">
+					<label>收发班时间</label>
+					<text>06:05 - 18:10</text>
+				</view>
+				<view class="von-forme-item">
+					<label>车牌号码</label>
+					<text>湘J01981</text>
+				</view>
+				<view class="von-forme-item">
+					<label>当值司机</label>
+					<text>李蔚然</text>
+				</view>
+				<view class="von-forme-item">
+					<label>联系方式</label>
+					<text class="blue">15512344567</text>
+				</view>
+			</view>
+		</view>
+		
 	</view>
 </template>
 
@@ -12,5 +74,7 @@
 </script>
 
 <style>
-
+	page{
+			background-color:#eee;
+		}
 </style>

static/css/style.css

@@ -1,6 +1,9 @@
 .text-center{
 	text-align: center;
 }
+.text-right{
+	text-align: right;
+}
 .mt-1{
 	margin-top:1rem
 }
@@ -38,6 +41,18 @@
 .red{
 	color:#FF6666
 }
+.bgblue{
+	background:#096DD9
+}
+.bggreen{
+	background:#22AC38
+}
+.bgorange{
+	background:#FF6200
+}
+.bgred{
+	background:#FF6666
+}
 .cxd-login{
 	padding:0 15%;
 	
@@ -49,7 +64,7 @@
 	border-radius: 12px;
 }
 .cxd-login .text-center{
-	margin:8rem 0 1.5rem
+	padding:8rem 0 1.5rem
 }
 .cxd-login h2{
 	margin-top:0.2rem
@@ -162,4 +177,47 @@
 }
 .von-sp-text text{
 	color:#888888
+}
+.von-sp-info h3{
+	color:white;
+	padding:15px;
+}
+.von-form,
+.von-forme{
+	padding:0 15px;
+	background:white;
+	margin-bottom:10px
+}
+.von-form-text{
+	border-bottom:1px solid #F1F1F1;
+	padding:8px 0
+}
+
+.von-form h4{
+	padding:10px 0
+}
+.von-form-text p{
+	line-height:2;
+}
+.von-form .u-form-item[data-v-5e7216f1]{
+	padding:5px 0
+}
+.von-forme-item{
+	display: flex;
+	justify-content: space-between;
+	padding:10px 0;
+	border-bottom:1px solid #F1F1F1;
+}
+.von-forme-item label{
+	width:30%
+}
+.von-forme-item text{
+	width:70%;
+	flex:1;
+	text-align: right;
+}
+@media screen and (max-width: 360px) {
+	.von-sp-info h3{
+		font-size:14px
+	}
 }