zhgdyunapp_vue3/pages/projectEnd/betonManage/workRecord.vue

<template>
	<view>
		<view class="fixedheader">
			<headers :showBack="true">
			<view class="headerName">
				值班记录1#15
			</view>
		</headers>
		</view>
		
		<view class="record_list" :style="{ 'padding-top': statusBarHeight + 68 + 'px' }">
			<div class="record_item" v-for="(item,index) in 10" :key="index">
				<view class="record_item_wrap">
					<view class="left header_item">
						<view class="record_label">值班人：</view>
						<text class="name">梁雪</text>
					</view>
				</view>
				<view class="record_item_wrap">
					<view class="left">
						<view class="record_label">起始时间：</view>
						<text>2021-11-30</text>
					</view>
					<view class="right">
						<view class="record_label">浇筑完成时间：</view>
						<text>2021-11-30</text>
					</view>
				</view>
				<view class="record_item_wrap">
					<view class="left">
						<view class="record_label">浇筑方量：</view>
						<text>5</text>
					</view>
					<view class="right">
						<view class="record_label">28天回弹日期：</view>
						<text>2021-11-30</text>
					</view>
				</view>
				<view class="record_item_wrap">
					<view class="left">
						<view class="record_label">试验负责人：</view>
						<text>梁雪</text>
					</view>
					<view class="right">
						<view class="record_label">最新一次送检组数：</view>
						<text>13</text>
					</view>
				</view>
				<view class="record_item_wrap">
					<view class="left">
						<view class="record_label">最新一次送检报告：</view>
						<text class="pointer_txt">查看</text>
					</view>
					<view class="right">
						<view class="record_label">最新一次送检状态：</view>
						<text class="status status1">合格</text>
					</view>
				</view>
				<view class="record_btn_box">
					<view class="btn_item">点击重试</view>
				</view>
			</div>
		</view>
	
		<view class="add_btn" @click="goAdd">新增值班记录</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				statusBarHeight: 0
			}
		},
		onShow(){
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		},
		methods:{
			goAdd(){
				uni.navigateTo({
					url: './addWorkRecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.record_list{
		padding-bottom: 180rpx;
	}
	.record_item{
		width: 90%;
		margin: 0 auto;
		padding: 30rpx 30rpx 40rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0px 4rpx 11px 0px rgba(212, 220, 236, 0.65);
		.record_item_wrap{
			display: flex;
			margin-bottom: 6rpx;
			.header_item{
				font-size: 28rpx;
				margin-bottom: 12rpx;
			}
			.left{
				flex: 1;
				display: flex;
				font-size: 24rpx;
			}
			.right{
				flex: 1;
				display: flex;
				font-size: 24rpx;
			}
			.record_label{
				color: #2A2B5B;
				opacity: 0.6;
			}
			.name{
				font-weight: 600;
			}
			.pointer_txt{
				color: #5181F6;
			}
		}
		.record_btn_box{
			margin-top: 18rpx;
			font-size: 28rpx;
			color: #5181F6;
			display: flex;
			justify-content: flex-end;
			.btn_item{
				margin-left: 34rpx;
				height: 52rpx;
				padding: 0 20rpx;
				border: 1rpx solid #5181F6;
				border-radius: 26rpx;
				line-height: 52rpx;
			}
		}
		.status{
			padding: 0 20rpx;
			border-radius: 7px;
			height: 32rpx;
			color: #fff;
			line-height: 32rpx;
		}
		.status1{
			background: #44D7B5;
		}
		.status2{
			background: #F65352;
		}
	}
	.add_btn{
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		width: 88%;
		transform: translateX(-50%);
		height: 100rpx;
		background: #5181F6;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
	}
</style>