aiot-app/pages/work/order/order.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="工单管理" @clickLeft="back"></uni-nav-bar>
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in tabList" >
				<span :class="item.class"></span>
				<label>{{item.title}}</label>
				<label class="num">{{item.num}}</label>
			</view>
		</view>
		<Cell v-for="item in orderList" :key="item.id" :title="item.name" cellType="more">
			<view class="cell-list-more" slot="more">
				<view style="color:#ccc" v-text="item.num"></view>
				<uni-icons type="right" size="18" color="#ccc"></uni-icons>
			</view>
		</Cell>
		<view class="btn-submit">历史订单</view>
	</view>
</template>

<script>
	import Cell from '@/components/Cell.vue'
	export default{
		components:{
			Cell
		},
		data() {
			return {
				tabList:[
					{title:'本月完成',num:'100',class: "iconfont icon-xundianjian",},
					{title:'本月在制',num:'100',class:'iconfont icon-xundianjian'},
					{title:'当前延时',num:'100',class:'iconfont icon-xundianjian'},
					{title:'当前警告',num:'100',class:'iconfont icon-xundianjian'},
					{title:'工作量指数',num:'舒适',class:'iconfont icon-xundianjian'}
				],
				orderList:[
					{id: 1,name:'配料报工单',num:1},
					{id: 2,name:'等静压成型报工单',num:1},
					{id: 3,name:'模压成型报工单',num:1},
					{id: 4,name:'挤压成型报工单',num:1},
					{id: 5,name:'自然干燥报工单',num:1},
					{id: 6,name:'升温干燥进柜报工单',num:1},
					{id: 7,name:'升温干燥出柜报工单',num:1},
					{id: 8,name:'半加定长报工单',num:1},
					{id: 9,name:'车加工报工单',num:1},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped> 
.nav{
	width: 94%;
	margin: 35rpx auto 25rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #fff;
	font-size: $uni-font-size-base;
	color: $uni-text-regular-color;
	border-radius: 10rpx;
	.num{
		padding-top: 5rpx;
		//font-size: $uni-font-size-sm;
	}
	.nav-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 5rpx;
		align-items: center;
		flex: 1;
		span{
			padding: 14rpx;
			color: #FFFFFF;
			margin-bottom: 14rpx;
			border-radius: 20rpx;
			font-size: 52rpx;
		}
	}
	.nav-item:nth-child(1) span{
		background-color: $uni-color-success;
	}
	.nav-item:nth-child(2) span{
		background-color: $uni-color-warning;
	}
	.nav-item:nth-child(3) span{
		background-color: $uni-color-primary;
	}
	.nav-item:nth-child(4) span{
		background-color: $uni-color-error;
	}
	.nav-item:nth-child(5) span{
		background-color: $j-primary-green;
	}
}

</style>