diff --git a/components/uni-steps/uni-steps.vue b/components/uni-steps/uni-steps.vue
new file mode 100644
index 0000000..557fd21
--- /dev/null
+++ b/components/uni-steps/uni-steps.vue
@@ -0,0 +1,254 @@
+<template>
+	<view class="uni-steps">
+		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
+			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
+				<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
+					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
+					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
+				</view>
+			</view>
+			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
+				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
+				 :key="index">
+					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
+					 :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
+					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
+						<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
+					</view>
+					<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
+					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
+					 :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Steps 步骤条
+	 * @description 评分组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
+	 * @property {Number} active 当前步骤
+	 * @property {String} direction = [row|column] 当前步骤
+	 * 	@value row 横向
+	 * 	@value column 纵向
+	 * @property {String} activeColor 选中状态的颜色
+	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
+	 */
+
+	export default {
+		name: 'UniSteps',
+		props: {
+			direction: {
+				// 排列方向 row column
+				type: String,
+				default: 'row'
+			},
+			activeColor: {
+				// 激活状态颜色
+				type: String,
+				default: '#1aad19'
+			},
+			deactiveColor: {
+				// 未激活状态颜色
+				type: String,
+				default: '#999999'
+			},
+			active: {
+				// 当前步骤
+				type: Number,
+				default: 0
+			},
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			} // 数据
+		},
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-steps {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__column {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row-reverse;
+	}
+
+	.uni-steps__row-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: flex-end;
+		margin-bottom: 8px;
+	}
+
+	.uni-steps__column-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+	}
+
+	.uni-steps__row-text {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.uni-steps__column-text {
+		padding: 8px 0px;
+		// border-bottom-style: solid;
+		// border-bottom-width: 1px;
+		// border-bottom-color: $uni-border-color;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row-title {
+		font-size: $uni-font-size-base;
+		line-height: 16px;
+		text-align: center;
+	}
+
+	.uni-steps__column-title {
+		font-size: $uni-font-size-base;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-desc {
+		font-size: 12px;
+		line-height: 14px;
+		text-align: center;
+	}
+
+	.uni-steps__column-desc {
+		font-size: $uni-font-size-sm;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-steps__column-container {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		width: 30px;
+		flex-direction: column;
+	}
+
+	.uni-steps__row-line-item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		height: 14px;
+		line-height: 14px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__column-line-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__row-line {
+		flex: 1;
+		height: 1px;
+		background-color: $uni-text-color-grey;
+	}
+
+	.uni-steps__column-line {
+		width: 1px;
+		background-color: $uni-text-color-grey;
+	}
+
+	.uni-steps__row-line--after {
+		transform: translateX(1px);
+	}
+
+	.uni-steps__column-line--after {
+		flex: 1;
+		transform: translate(0px, 1px);
+	}
+
+	.uni-steps__row-line--before {
+		transform: translateX(-1px);
+	}
+
+	.uni-steps__column-line--before {
+		height: 6px;
+		transform: translate(0px, -1px);
+	}
+
+	.uni-steps__row-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 100px;
+		background-color: $uni-text-color-grey;
+		margin: 0px 3px;
+	}
+
+	.uni-steps__column-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 100px;
+		background-color: $uni-text-color-grey;
+		margin: 4px 0px 5px 0px;
+	}
+
+	.uni-steps__row-check {
+		margin: 0px 6px;
+	}
+
+	.uni-steps__column-check {
+		height: 14px;
+		line-height: 14px;
+		margin: 2px 0px;
+	}
+</style>
diff --git a/pages.json b/pages.json
index a2df9a7..8aca22b 100644
--- a/pages.json
+++ b/pages.json
@@ -475,6 +475,13 @@
 				"navigationBarTitleText": "等待用户支付"	,
 				"navigationStyle":"custom"
 			}
+		},
+		{
+			"path": "pages/order/newdetail/logistics",
+			"style": {
+				"navigationBarTitleText": "物流详情"	,
+				"navigationStyle":"custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/order/newdetail/logistics.vue b/pages/order/newdetail/logistics.vue
new file mode 100644
index 0000000..25872f0
--- /dev/null
+++ b/pages/order/newdetail/logistics.vue
@@ -0,0 +1,89 @@
+<template>
+	<view>
+		<lf-nav title="物流详情" :showIcon="true"></lf-nav>
+		<view class="top">
+			<image class="img" src="https://picsum.photos/200/300" mode="aspectFill"></image>
+			<view>已签收</view>
+		</view>
+		<view class="head">
+			<view class="lf-flex">
+				<image class="avatar" src="https://picsum.photos/200/300" mode="aspectFill"></image>
+				<view class="name">邮政快递包裹 8374938754389</view>
+			</view>
+			<view class="copy" @click="copy">复制</view>
+		</view>
+		<view>
+			<uni-steps :options="options" active-color="#15716E" direction="column" :active="0"></uni-steps>
+		</view>
+		<view style="height: 90rpx;"></view>
+	</view>
+</template>
+
+<script>
+	import uniSteps from '@/components/uni-steps/uni-steps.vue';
+	export default {
+		components: {
+			uniSteps
+		},
+		data(){
+			return {
+				options: [
+					{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
+					{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
+					{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
+					{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'}]
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			copy(){
+				uni.setClipboardData({
+					data: '你好'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.top{
+		width: 750rpx;
+		height: 100rpx;
+		background: #15716E;
+		display: flex;
+		align-items: center;
+		padding: 0 32rpx;
+		font-size: 36rpx;
+		color: #FFFFFF;
+		.img{
+			border-radius: 5rpx;
+			width: 70rpx;
+			height: 70rpx;
+			margin-right: 20rpx;
+		}
+	}
+	.head{
+		width: 750rpx;
+		height: 130rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 32rpx;
+		.avatar{
+			width: 70rpx;
+			height: 70rpx;
+			border-radius: 50%;
+			margin-right: 20rpx;
+		}
+		.name{
+			font-size: 28rpx;
+			color: #222222;
+		}
+		.copy{
+			font-size: 28rpx;
+			color: #777;
+		}
+	}
+</style>