1

pages/news/details.vue

@@ -0,0 +1,41 @@
+<template>
+	<view>
+		<view class="new-title">
+			<h3>标题标题标题标题标题标题标题标题标题标题标题</h3>
+			<p>推送时间：2021-01-20 19:30</p>
+		</view>
+		<view class="new-content">
+			<p>推送时间推送时间推送时间推送时间推送时间推送时间推送时间推送时间</p>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.new-title{
+		padding: 10px;
+		border-bottom: 1px solid #eee;
+		h3{
+			font-size: 22px;
+		}
+		p{
+			color:#999;
+			margin-top: 5px;
+		}
+	}
+	.new-content{
+		padding: 10px;
+	}
+</style>

pages/news/index.vue

@@ -1,6 +1,53 @@
 <template>
 	<view>
-		
+		<view class="new-time">
+			03-30 12:33
+		</view>
+		<view class="new-item">
+			<view class="new-head">
+				<h4>补缴车票通知</h4>
+				<p>已经过您的预定下车站点，请重新选择下车站点并补缴车票。</p>
+			</view>
+			<view class="new-main">
+				<view class="new-main-row">
+					<p>站点：</p><span>玉桥</span>
+				</view>
+				<view class="new-main-row">
+					<p>线路：</p><span>玉桥</span>
+				</view>
+				<view class="new-main-row">
+					<p>状态：</p><span>玉桥</span>
+				</view>
+			</view>
+			<view class="new-foot">
+				<p>查看详情</p>
+				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
+			</view>
+		</view>
+		<view class="new-time">
+			03-30 12:33
+		</view>
+		<view class="new-item">
+			<view class="new-head">
+				<h4>补缴车票通知</h4>
+				<p>已经过您的预定下车站点，请重新选择下车站点并补缴车票。</p>
+			</view>
+			<view class="new-main">
+				<view class="new-main-row">
+					<p>站点：</p><span>玉桥</span>
+				</view>
+				<view class="new-main-row">
+					<p>线路：</p><span>玉桥</span>
+				</view>
+				<view class="new-main-row">
+					<p>状态：</p><span>玉桥</span>
+				</view>
+			</view>
+			<view class="new-foot">
+				<p>查看详情</p>
+				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -16,7 +63,51 @@
 		}
 	}
 </script>
-
 <style>
-
+	page{
+		background-color: #f7f7f7;
+	}
+</style>
+<style scoped lang="scss">
+	.new-time{
+		text-align: center;
+		margin-top:10px;
+		color:#999;
+	}
+	.new-item{
+		background-color: #fff;
+		margin: 10px;
+		border-radius: 10px;
+		border: 1px solid #eee;
+		.new-head{
+			padding: 10px;
+			h4{
+				font-size: 16px;
+			}
+			p{
+				color:#999;
+				margin-top: 3px;
+			}
+		}
+		.new-main{
+			padding: 10px;
+			.new-main-row{
+				display: flex;
+				align-items: center;
+				margin-bottom: 10px;
+				p{
+					width: 60px;
+					color:#999;
+				}
+			}
+		}
+		.new-foot{
+			padding: 10px;
+			border-top: 1px solid #eee;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			
+		}
+	}
 </style>

pages/route/index.vue

@@ -164,10 +164,10 @@
 		.map-route-name{
 			position: absolute;
 			top: 50px;
-			width: 20px;
+			width: 16px;
 			line-height: 16px; 
 			z-index: 999;
-			left: 2px;
+			left: 3px;
 		}
 	}
 	.map-route-item{
@@ -197,10 +197,10 @@
 		.map-route-name{
 			position: absolute;
 			top: 50px;
-			width: 20px;
+			width: 16px;
 			line-height: 16px; 
 			z-index: 999;
-			right: -5px;
+			right: -3px;
 			text-align: center;
 		}
 	}