From bc7e88698791b3d445e5f69e4db9a59b74bd8131 Mon Sep 17 00:00:00 2001
From: shenhai <5213606@qq.com>
Date: Thu, 15 Nov 2018 16:20:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=97=B6=E9=97=B4=E8=BD=B4?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/common/uni.css          |  86 +++++++++-
 .../pages/template/timeline/timeline.vue      | 151 +++---------------
 2 files changed, 111 insertions(+), 126 deletions(-)

diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
index 8dc7b9ac5..d965250e9 100644
--- a/examples/hello-uniapp/common/uni.css
+++ b/examples/hello-uniapp/common/uni.css
@@ -967,4 +967,88 @@ radio-group label, checkbox-group label{
     color: #ffffff;
     padding: 0 10upx;
     border-radius: 5upx;
-}
\ No newline at end of file
+}
+
+/* timeline */
+.uni-timeline {
+		margin: 35upx 0;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+
+
+	.uni-timeline-item {
+		display: flex;
+		flex-direction: row;
+		position: relative;
+		padding-bottom: 20upx;
+		box-sizing: border-box;
+		overflow: hidden;
+
+	}
+
+	.uni-timeline-item .uni-timeline-item-keynode {
+		width: 160upx;
+		flex-shrink: 0;
+		box-sizing: border-box;
+		padding-right: 20upx;
+		text-align: right;
+		line-height: 65upx;
+	}
+
+	.uni-timeline-item .uni-timeline-item-divider {
+		flex-shrink: 0;
+		position: relative;
+		width: 30upx;
+		height: 30upx;
+		top: 15upx;
+		border-radius: 50%;
+		background-color: #bbb;
+	}
+
+
+
+	.uni-timeline-item-divider::before,
+	.uni-timeline-item-divider::after {
+		position: absolute;
+		left: 15upx;
+		width: 1upx;
+		height: 100vh;
+		content: '';
+		background: inherit;
+	}
+
+	.uni-timeline-item-divider::before {
+		bottom: 100%;
+	}
+
+	.uni-timeline-item-divider::after {
+		top: 100%;
+	}
+
+
+	.uni-timeline-last-item .uni-timeline-item-divider:after {
+		display: none;
+	}
+
+	.uni-timeline-first-item .uni-timeline-item-divider:before {
+		display: none;
+	}
+
+	.uni-timeline-item .uni-timeline-item-content {
+		padding-left: 20upx;
+	}
+	
+	.uni-timeline-last-item .bottom-border::after{
+		display: none;
+	}
+	
+	.uni-timeline-item-content .datetime{
+		color: #CCCCCC;
+	}
+	
+	/* 自定义节点颜色 */
+	.uni-timeline-last-item .uni-timeline-item-divider{
+		background-color: #1AAD19;
+	}
\ No newline at end of file
diff --git a/examples/hello-uniapp/pages/template/timeline/timeline.vue b/examples/hello-uniapp/pages/template/timeline/timeline.vue
index 06cea65c5..1789f4e36 100644
--- a/examples/hello-uniapp/pages/template/timeline/timeline.vue
+++ b/examples/hello-uniapp/pages/template/timeline/timeline.vue
@@ -2,49 +2,48 @@
 	<view class="page">
 		<page-head :title="title"></page-head>
 		<view class="">
-			<view class="title">双栏时间轴</view>
-			<view class="timeline" style="padding: 30upx 20upx;background-color: #fff;">
-				<view class="timeline-item timeline-first-item">
-					<view class="timeline-item-keynode">2018.05</view>
-					<view class="timeline-item-divider"></view>
-					<view class="timeline-item-content">uni-app 立项</view>
+			<view class="uni-title uni-center">双栏时间轴</view>
+			<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;">
+				<view class="uni-timeline-item uni-timeline-first-item">
+					<view class="uni-timeline-item-keynode">2018.05</view>
+					<view class="uni-timeline-item-divider"></view>
+					<view class="uni-timeline-item-content">uni-app 立项</view>
 				</view>
-				<view class="timeline-item">
-					<view class="timeline-item-keynode">2018.07</view>
-					<view class="timeline-item-divider"></view>
-					<view class="timeline-item-content">uni-app 正式发布，使用vue技术，开发一次，iOS、Android、微信小程序三端同时生成</view>
+				<view class="uni-timeline-item">
+					<view class="uni-timeline-item-keynode">2018.07</view>
+					<view class="uni-timeline-item-divider"></view>
+					<view class="uni-timeline-item-content">uni-app 正式发布，使用vue技术，开发一次，iOS、Android、微信小程序三端同时生成</view>
 				</view>
-				<view class="timeline-item timeline-last-item">
-					<view class="timeline-item-keynode">2018.10</view>
-					<view class="timeline-item-divider"></view>
-					<view class="timeline-item-content">uni-app 支持使用 npm 安装依赖，支持微信小程序自定义组件</view>
+				<view class="uni-timeline-item uni-timeline-last-item">
+					<view class="uni-timeline-item-keynode">2018.10</view>
+					<view class="uni-timeline-item-divider"></view>
+					<view class="uni-timeline-item-content">uni-app 支持使用 npm 安装依赖，支持微信小程序自定义组件</view>
 				</view>
 			</view>
 
-			<view class="title">单栏时间轴</view>
-			<view class="timeline" style="padding: 30upx 20upx;background-color: #fff;">
-				<view class="timeline-item timeline-first-item">
-					<view class="timeline-item-divider"></view>
-					<view class="timeline-item-content bottom-border">
+			<view class="uni-title uni-center">单栏时间轴</view>
+			<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;">
+				<view class="uni-timeline-item uni-timeline-first-item">
+					<view class="uni-timeline-item-divider"></view>
+					<view class="uni-timeline-item-content">
 						<view>
 							uni-app 立项
 						</view>
 						<view class="datetime">
 							2018.05
 						</view>
-
 					</view>
 				</view>
-				<view class="timeline-item">
-					<view class="timeline-item-divider"></view>
-					<view class="timeline-item-content bottom-border">
+				<view class="uni-timeline-item">
+					<view class="uni-timeline-item-divider"></view>
+					<view class="uni-timeline-item-content">
 						<view>uni-app 正式发布，使用vue技术，开发一次，iOS、Android、微信小程序三端同时生成</view>
 						<view class="datetime">2018.07</view>
 					</view>
 				</view>
-				<view class="timeline-item timeline-last-item">
-					<view class="timeline-item-divider"></view>
-					<view class="timeline-item-content bottom-border">
+				<view class="uni-timeline-item uni-timeline-last-item">
+					<view class="uni-timeline-item-divider"></view>
+					<view class="uni-timeline-item-content">
 						<view>uni-app 支持使用 npm 安装依赖，支持微信小程序自定义组件</view>
 						<view class="datetime">2018.10</view>
 					</view>
@@ -65,104 +64,6 @@
 	}
 </script>
 
-<style>
-	.page {
-		background: #efeff4;
-	}
-
-	.title {
-		padding: 20upx;
-	}
-
-	.timeline {
-		margin: 35upx 0;
-		display: flex;
-		flex-direction: column;
-		position: relative;
-	}
-
-
-	.timeline-item {
-		display: flex;
-		flex-direction: row;
-		position: relative;
-		padding-bottom: 20upx;
-		box-sizing: border-box;
-		overflow: hidden;
-
-	}
-
-	.timeline-item .timeline-item-keynode {
-		width: 180upx;
-		flex-shrink: 0;
-		box-sizing: border-box;
-		padding-right: 20upx;
-		text-align: right;
-	}
-
-	.timeline-item .timeline-item-divider {
-		flex-shrink: 0;
-		position: relative;
-		width: 20upx;
-		height: 20upx;
-		top: 15upx;
-		border-radius: 50%;
-		background-color: #bbb;
-	}
-
-
-
-	.timeline-item-divider::before,
-	.timeline-item-divider::after {
-		position: absolute;
-		left: 10upx;
-		width: 1upx;
-		height: 100vh;
-		content: '';
-		background: inherit;
-	}
-
-	.timeline-item-divider::before {
-		bottom: 100%;
-	}
-
-	.timeline-item-divider::after {
-		top: 100%;
-	}
-
-
-	.timeline-last-item .timeline-item-divider:after {
-		display: none;
-	}
-
-	.timeline-first-item .timeline-item-divider:before {
-		display: none;
-	}
-
-	.timeline-item .timeline-item-content {
-		padding-left: 20upx;
-	}
-	
-	.bottom-border::after{
-		position: absolute;
-		left:40upx;
-		right: 0;
-		height: 1px;
-		content: '';
-		background-color: #bbb;
-	}
-	
-	.timeline-last-item .bottom-border::after{
-		display: none;
-	}
-	
-	.timeline-item-content .datetime{
-		color: #CCCCCC;
-	}
-	
-	/* 自定义节点颜色 */
-	.timeline-last-item .timeline-item-divider{
-		background-color: #1AAD19;
-	}
+<style>
 	
 </style>
-- 
GitLab