v3-lab-xcx/pages/views/photoInspectionInfo.vue

<!-- 拍照检查 -->
<template>
	<view id="photoInspectionInfo">
		<view class="header">
			<view class="header-t">
				<img class="header-t-l" src="@/pages/images/icon_01.png" />
				<view class="header-t-c">刘瑶瑶 13233556655</view>
				<view class="header-t-r">实验中</view>
			</view>
			<img class="header-line" src="@/pages/images/for_min_bg.png" />
			<view class="header-b">
				<view class="header-li">签到时间：2024-03-15 13:00</view>
				<view class="header-li">离开时间：-</view>
				<view class="header-li">停留时间：-</view>
			</view>

		</view>
		<view class="small-title">检查项</view>
		<view class="main-li" v-if="pageType==1">
			<img class="main-li-t" src="@/pages/images/img_bg_cjcx.png" />
			<view class="main-li-b">实验室照片</view>
		</view>
		<view class="photo-b" v-if="pageType==2">
			<view v-for="(item,index) in photoList" :key="index" @click="photoClick(item)" class="list-li"
				:class="!item.type?'color-A':'color-B'">
				<view>{{item.name}}</view>
				<img v-if="item.type" :src="item.icon">
			</view>
		</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	export default {
		components: {

		},
		data() {
			return {
				pageType: 1,
				baseUrl: config.base_url,
				newData: {
					
				},
				photoList: [{
						type: false,
						name: '实验室照片',
						icon: require('@/pages_basics/images/icon_pzjc_xz.png')
					},
					{
						type: false,
						name: '垃圾桶清理后照片',
						icon: require('@/pages_basics/images/icon_pzjc_xz.png')
					},
				],

			}
		},
		onLoad(option) {

		},
		onShow() {

		},
		methods: {
			photoClick(item) {
				item.type = !item.type;
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#photoInspectionInfo {
		padding: 0 30rpx;
		box-sizing: border-box;

		.header {
			.header-t {
				height: 116rpx;
				background: #fff;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-radius: 10rpx 10rpx 0rpx 0rpx;

				.header-t-l {
					width: 70rpx;
					height: 70rpx;
					border-radius: 35rpx;
					margin: 0 22rpx 0 30rpx;
				}

				.header-t-c {
					flex: 1;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 41rpx;
				}

				.header-t-r {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #0183FA;
					line-height: 41rpx;
					margin-right: 38rpx;
				}
			}

			.header-line {
				width: 100%;
				height: 30rpx;
			}

			.header-b {
				width: 100%;
				height: 222rpx;
				background: #fff;
				padding: 20rpx 30rpx 0;
				box-sizing: border-box;
				border-radius: 0rpx 0rpx 10rpx 10rpx;

				.header-li {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 28rpx;
					text-align: left;
				}

				.header-li:nth-of-type(1) {
					margin-bottom: 42rpx;
				}

				.header-li:nth-of-type(2) {
					margin-bottom: 42rpx;
				}
			}
		}

		.small-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			margin: 30rpx 0;
		}

		.main-li {
			margin-bottom: 20rpx;

			.main-li-t {
				width: 690rpx;
				height: 250rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}

			.main-li-b {
				width: 690rpx;
				height: 82rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				border: 2rpx dashed #E0E0E0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 82rpx;
				text-align: left;
				padding-left: 28rpx;
				box-sizing: border-box;
			}
		}

		.photo-b {
			padding-bottom: 140rpx;

			.list-li {
				width: 690rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				>view {
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 100rpx;
					text-align: left;
					padding-left: 28rpx;
				}

				>img {
					width: 60rpx;
					height: 60rpx;
					margin-top: 44rpx;
				}

			}

			.color-A {
				border: 2rpx dotted #E0E0E0;
			}

			.color-B {
				border: 2rpx dotted #0183FA;
			}
		}
	}
</style>