FE-lab-xcx/pages_safetyCheck/views/planDetail.vue

<!-- 计划详情 -->
<template>
	<view class="planDetail">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="title">
				<view class="title-t">{{newData.data1}}</view>
				<view class="title-b">
					<view v-for="(item,index) in newData.data2" :key="index">{{item}}</view>
				</view>
			</view>
			<view class="box">
				<view class="content-li">
					<view>检查周期</view>
					<view>{{newData.data3}}</view>
				</view>
				<view class="content-li">
					<view>检查范围</view>
					<view>{{newData.data4}}</view>
				</view>
				<view class="content-li">
					<view>检查组织</view>
					<view>{{newData.data5}}</view>
				</view>
				<view class="content-li-tow">
					<view>检查要求</view>
					<view>{{newData.data6}}</view>
				</view>
			</view>
			<view class="small-title">
				<view>材料附件</view>
				<view>
					<text>{{newData.data7}}个</text>
					<img src="@/pages_safetyCheck/images/icon_wd_gd@1x.png">
				</view>
			</view>
			<view class="list" v-for="(item,index) in newData.data8">
				<view class="subscript">{{index+1}}</view>
				<view class="list-li">
					<view>第1次检查</view>
					<view :id="item.status==0?'color-A':(item.status==1?'color-B':'color-C')">{{item.data1}}</view>
				</view>
				<view class="list-li">
					<view>检查开始日期</view>
					<view>{{item.data2}}</view>
				</view>
				<view class="list-li">
					<view>整改期限</view>
					<view class="rectify-term">
						<text class="rectify-term-l" v-if="item.status==4">逾期未完成整改关闭实验室</text>
						<text class="rectify-term-c" v-if="item.status==4">丨</text>
						<text class="rectify-term-r">{{item.data3}}</text>
					</view>
				</view>
				<view class="list-li">
					<view>检查依据</view>
					<view>{{item.data4}}</view>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		chemicalAppletGetStockDetail
	} from '@/pages/api/index.js'
	export default {
		name: "planDetail",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				pageType: 0,
				newData: {
					data1: '计划标题计划标题计划标题计划标题计划标题计标题计划标题计划标题',
					data2: ['校级检查', '全面检查', '交叉检查'],
					data3: '2024-04-01至2024-08-31',
					data4: '共33间实验室',
					data5: '督导组名称',
					data6: '内容内容内容内容内容内容内容内容内内容内容 内容内容容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容',
					data7: '2',
					data8: [{
							data1: '未开始',
							data2: '2024-09-06',
							data3: '2024-09-06',
							data4: '全部检查项',
							status: 0,
						},
						{
							data1: '进行中',
							data2: '2024-09-06',
							data3: '2024-09-06',
							data4: '全部检查项',
							status: 1,
						},
					],
				},
			}
		},
		onLoad(option) {

			this.$set(this, 'newData', JSON.parse(decodeURIComponent(option.infoData)));
		},
		onShow() {

		},
		mounted() {

		},
		methods: {
			//滚动事件
			scrollGet() {},

		}
	}
</script>

<style lang="stylus" scoped>
	.planDetail {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		box-sizing: border-box;

		.title {
			width: 689rpx;
			min-height: 200rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			padding: 20rpx 30rpx 0;
			box-sizing: border-box;

			.title-t {
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
			}

			.title-b {
				display: flex;
				justify-content: flex-start;
				margin-top: 16rpx;

				>view {
					width: 130rpx;
					height: 50rpx;
					background: rgba(1, 131, 250, 0.2);
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-size: 24rpx;
					color: #0183FA;
					line-height: 50rpx;
					text-align: center;
					margin-right: 14rpx;
				}
			}
		}

		.box {
			width: 689rpx;
			min-height: 500rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;

			.content-li {
				height: 80rpx;
				border-bottom: 1rpx solid #E0E0E0;
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 30rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: right;
				}
			}

			.content-li-tow {
				padding: 0 30rpx;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					padding: 20rpx;
					box-sizing: border-box;
					width: 630rpx;
					min-height: 160rpx;
					background: #F5F5F5;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-size: 28rpx;
					color: #666666;
					line-height: 39rpx;
					text-align: left;
				}
			}
		}

		.small-title {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;

			>view:nth-of-type(1) {
				font-size: 30rpx;
				color: #333333;
				line-height: 80rpx;
				text-align: left;
			}

			>view:nth-of-type(2) {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				>text {
					font-size: 28rpx;
					color: #0183FA;
					line-height: 80rpx;
					text-align: left;
				}

				>img {
					width: 24rpx;
					height: 24rpx;
					margin-left: 12rpx;
				}
			}

		}

		.list {
			width: 690rpx;
			height: 323rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			position: relative;

			.subscript {
				position: absolute;
				left: 0;
				top: 0;
				width: 36rpx;
				height: 36rpx;
				background: #0183FA;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
			}

			.list-li {
				border-bottom: 1rpx solid #E0E0E0;
				display: flex;
				justify-content: space-between;

				>view:nth-of-type(1) {
					font-size: 28rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
				}
			}

			.rectify-term {
				.rectify-term-l {
					font-size: 24rpx;
					color: #FF8C00;
					line-height: 34rpx;
					text-align: left;
				}

				.rectify-term-c {
					color: #666666;
				}

				.rectify-term-r {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
				}
			}

			.list-li:last-of-type {
				border: none;
			}
		}

		#color-A {
			color: #FF8C00;
		}

		#color-B {
			color: #0183FA;
		}

		#color-C {
			color: #16B531;
		}
	}
</style>