mes_mobile/pages/deviceRepair/deviceRepair.vue

<template>
	<!-- 设备报修 -->
	<view class="page_padding bot_padding">
		<view v-for="(item,index) in list" :key="index">	
			<view class="page_list contentboxsty font13">
				<view class="list_top flex_layout">
					<view class="top_left flex_layout">
						<view class="iconfont icon-gengduo-1"></view>
						<view class="">双头带锯</view>
					</view>
					<view class="top_right">故障中</view>
				</view>
				<view class="list_centre">
					<view class="row_data">
						<view class="row_name">值班工程师</view>
						<view class="row_content">章三</view>
					</view>
					<view class="row_data">
						<view class="row_name">故障时间</view>
						<view class="row_content">2024-01-11 13:09:11</view>
					</view>
					<view class="row_data">
						<view class="row_name">报修人</view>
						<view class="row_content">李四</view>
					</view>
					<view class="row_data">
						<view class="row_name">故障时间</view>
						<view class="row_content">3.5H</view>
					</view>
					<view class="row_data">
						<view class="row_name">处理状态</view>
						<view class="row_content">故障处理中</view>
					</view>
					<view class="row_data">
						<view class="row_name">故障解除时间</view>
						<view class="row_content">2024-01-11 14:09:07</view>
					</view>
				</view>
				<view class="list_below flex_layout">
					<view class="below_left" @click="toRepairOrder()">
						维修单
					</view>
					<view class="below_right">
						修改
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="page_bottom_button">
		<view class="page_add"  @click="toAddRepairReport()">
		<!-- 	<view class="name_left font14">
				系统设备管理
			</view> -->
			<view class="iconfont icon-tianjia font24"></view>
			<text>添加</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{name:"双头立锯"},
				{name:"双头立锯"},
				{name:"双头立锯"},
				{name:"双头立锯"},
				{name:"双头立锯"},
				{name:"双头立锯"},
				{name:"双头立锯"},
				{name:"双头立锯"},
				{name:"双头立锯"},
				]
			}
		},
		methods: {
			//新增报修页面
			toAddRepairReport(){
					uni.navigateTo({
						url:'/pages/deviceRepair/RepairReport'
					})
			},
			//维修页面
			toRepairOrder(){
				uni.navigateTo({
					url:'/pages/deviceRepair/repairOrder'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.page_list{
		.list_top{line-height: 44px;align-items: center;border-bottom: 1px solid #2D3A6F;
			.top_left{flex: 1;}
		}
		.list_centre{
			.row_name{width: 30%;}
			.row_data{display: flex;display: flex;padding: 6px 0;}
		}
		.list_below{line-height: 49px;align-items: center;border-top: 1px solid #2D3A6F;
			view{width: 50%;    text-align: center;}
			.below_left{border-right: 1px solid #2D3A6F;}
		}

	}
</style>