ec.uniapp-master/pages/order/newdetail/logistics.vue

<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>