guosen-ldt-client/pagesD/pages/take-order/take-order.vue

<template>
	<view class="page">
		<view class="card u-border-bottom">
			<text>{{vuex_orderInfo.store.shopName}}</text>
			<view class="">
				<view class="cuIcon cu-btn sm btn-icon">
					<u-icon name="phone-fill" color="#FF9447"></u-icon>
				</view>
				<view class="cuIcon cu-btn sm btn-icon margin-left-30">
					<u-icon name="map-fill" color="#FF9447"></u-icon>
				</view>
			</view>
		</view>
		<view class="card" style="flex-direction: column;">
			<view class="center text-bold margin-50" style="font-size: 56rpx;">
				<text>2874</text>
			</view>
			<view class="cu-steps steps-arrow">
				<view class="cu-item" :class="index>1?'text-default':'text-base'" v-for="(item,index) in stepList" :key="index">
					<text style="font-size: 80rpx;margin-bottom: 20rpx;margin-right: 10rpx;" :class="'cuIcon-' + item.icon"></text>
					<text >{{item.name}}</text>
				</view>
			</view>
			
<!-- 			<view class="step">
				<view class="">
					<image src="../../static/icon/step1.png" mode=""></image>
					<view>待付款</view>
				</view>
				
				<view class="">
					<image src="../../static/icon/step1.png" mode=""></image>
					<view>制作中</view>
				</view>
				
				<view class="">
					<image src="../../static/icon/step1.png" mode=""></image>
					<view>已完成</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			stepList:[{
				name:'待付款',
				icon:'pay'
			},
			{
				name:'制作中',
				icon:'time'
			},
			{
				name:'已完成',
				icon:'goods'
			}]
		};
	}
};
</script>

<style lang="scss" scoped>
	.cu-steps.steps-bottom .cu-item::before,
	.cu-steps.steps-bottom .cu-item::after {
		bottom: 20upx;
		top: initial;
	}
	
	.page{
		margin: 20rpx;
	}
	
	.text-default{
		color: #FF9447;
	}
	
	.btn-icon{
		background-color: rgba(255, 148, 71,.3);
		color: #FF9447;
	}
	
	.step{
		display: flex;
		justify-content: space-around;
		
		image{
			width: 88rpx;
			height: 88rpx;
		}
	}
	
	.card {
		padding: 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #f1f1f1;
		display: flex;
		justify-content: space-between;
	}
</style>