v3-lab-xcx/pages_manage/views/laboratory/accessRecord.vue

<!-- 进出记录 -->
<template>
	<view class="accessRecord">
		<view class="title">
			<view v-for="(item,index) in statisticsData" :key="index">
				<view>{{item.num}}</view>
				<view>{{item.name}}</view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in dataList" :key="index">
			<view class="list-t">{{item.time}}</view>
			<view class="list-b" v-for="(item2,index2) in item.child" :key="index2">
				<view class="list-b-t">
					<img :src="item2.avatar">
					<view>{{item2.name}}</view>
					<view>{{item2.phone}}</view>
					<view :class="item2.status==0?'color-A':(item2.status==1?'color-B':(item2.status==2?'color-C':''))">
					{{item2.status==0?'实验中':(item2.status==1?'已离开':(item2.status==2?'未离开考勤违规':''))}}
					</view>
				</view>
				<img class="list-b-img" src="@/pages_manage/images/for_min_bg.png">
				<view class="list-b-b">
					<view>签到时间：{{item2.time1}}</view>
					<view>离开时间：{{item2.time2}}</view>
					<view>停留时间：{{item2.time3}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {} from '@/pages_manage/api/index.js'
	export default {
		name: "accessRecord",
		props: {
			subjectData: {},
		},
		data() {
			return {
				statisticsData:[
					{name:'当前实验人数',num:'1'},
					{name:'今日累计人次',num:'23'},
					{name:'当月累计人次',num:'302'},
				],
				newData:{
					
				},
				dataList:[
					{
						time:'2023年12月',
						child:[
							{
								avatar:require('@/pages_manage/images/icon_yw_yc.png'),
								name:'姓名',
								phone:'123456987',
								status:0,	
								time1:'2023-12-14  12:20',	
								time2:'2023-12-14  14:56',	
								time3:'2小时26分钟',	
							}
						],
						
					},
					{
						time:'2023年12月',
						child:[
							{
								avatar:require('@/pages_manage/images/icon_yw_yc.png'),
								name:'姓名',
								phone:'123456987',
								status:1,	
								time1:'2023-12-14  12:20',	
								time2:'2023-12-14  14:56',	
								time3:'2小时26分钟',	
							}
						],
						
					},
					{
						time:'2023年12月',
						child:[
							{
								avatar:require('@/pages_manage/images/icon_yw_yc.png'),
								name:'姓名',
								phone:'123456987',
								status:2,	
								time1:'2023-12-14  12:20',	
								time2:'2023-12-14  14:56',	
								time3:'2小时26分钟',	
							}
						],
						
					}
				]
			}
		},
		created() {

		},
		mounted() {
			
		},
		methods: {
			
		},
	}
</script>

<style lang="stylus" scoped>
	.accessRecord {
		width: 750rpx;
		.title{
			width: 750rpx;
			height: 160rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			>view{
				flex: 1;
				>view:nth-of-type(1){
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #0183FA;
					line-height: 30rpx;
					text-align: center;
					margin: 30rpx 0 34rpx 0;
				}
				>view:nth-of-type(2){
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					line-height: 30rpx;
					text-align: center;
					border-right: 1rpx solid #E0E0E0;
				}
			}
			>view:last-child{
				>view:nth-of-type(2){
					border-right: none;
				}
			}
		}
		.list{
			padding: 0 20rpx;
			box-sizing: border-box;
			.list-t{
				height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 80rpx;
			}
			.list-b{
				.list-b-t{
					background: #FFFFFF;
					border-radius:20rpx 20rpx 0 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 30rpx 26rpx 16rpx 30rpx;
					box-sizing: border-box;
					>img{
						width: 70rpx;
						height: 70rpx;
						border-radius: 35rpx;
					}
					>view:nth-of-type(1){
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 30rpx;
						margin-left: 22rpx;
					}
					>view:nth-of-type(2){
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 30rpx;
						margin-left: 44rpx;
					}
					>view:nth-of-type(3){
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						line-height: 30rpx;
						flex: 1;
						text-align: right;
					}
					.color-A{
						color: #0183FA;
					}
					.color-B{
						color: #999999;
					}
					.color-C{
						color: #FFAE00;
					}
				}
				.list-b-img{
					width: 710rpx;
					height: 32rpx;
				}
				.list-b-b{
					background: #FFFFFF;
					border-radius:0 0 20rpx 20rpx;
					padding-top: 32rpx;
					box-sizing: border-box;
					overflow: hidden;
					>view{
						margin: 0 0 26rpx 20rpx;	
					}
				}
			}
		}
	}
</style>