Web_TracerMethodology/pages/checkMainPoints/checkMainPoints.vue

<template>
	<view class="checkMainPoints">
		<u-navbar :title="ifSearchMod?'':'查核要点'" title-color="#292C33">
			<view v-if="ifSearchMod" class="slot-wrap" back-icon-size="25rpx">
				<input confirm-type="search" class="searchBar" type="text" v-model="searchKey" @input="filterFromName"
					placeholder-class="searchBarHolder" placeholder="搜索查核要点或查核项" />
				<image @click="clearSearch" v-if="searchKey" class="clearIcon" src="../../static/text-clear.png"
					mode=""></image>
			</view>
			<view v-if="ifSearchMod" class="navbar-right" slot="right">
				<text @click="cancelSearchMod" class="searchActiveBtn">取消</text>
			</view>
		</u-navbar>
		<uni-popup ref="popup" type="center" :maskClick="true" @change="onMaskChange"></uni-popup>
		<tm-top-menu v-if="!ifSearchMod">
			<template v-if="situationType != 2">
				<view class="top-search">
					<view class="search">
						<input confirm-type="search" @input="filterFromName" placeholder="搜索查核要点或查核项" />
						<image src="../../static/search.png"></image>
					</view>
					<view class="top-btn-wrap">
						<view class="btn-list" v-if="nowPermission == 3">
							<com-button v-for="(item, index) in btnArr" :btnText="item.label"
								:type="active === item.id ? 'pramary':'default'" v-on:btnClick="btnClick(item.id)" />
						</view>
						<view class="select-wrap" v-else-if="nowPermission == 2 || nowPermission == 1"
							@click="toggleModal(!showModal)">
							<text>{{getCheckPointName}}</text>
							<image :src="`../../static/${showModal?'open':'close'}-icon.png`"></image>
						</view>
					</view>
				</view>
			</template>
			<!-- 			// -->
			<template v-if="situationType == 2">
				<view class="top-search-two">
					<view class="rowOne" v-if="nowPermission == 3 && situationType == 2">
						<view class="selectPeople" @click="toSelectVisiter">
							<template v-if="investigationUsers.length>0">
								<image v-if="currentSelectedInvestigationUser&&currentSelectedInvestigationUser['investigationStatus'] != 1"
									class="completePeopleIcon" src="../../static/peopleIcon.png" mode=""></image>
								<image v-if="currentSelectedInvestigationUser&&currentSelectedInvestigationUser['investigationStatus'] == 1"
									class="completePeopleIcon" src="../../static/completePeopleIcon.png" mode="">
								</image>
								<text
									class="peopleName">{{currentSelectedInvestigationUser?currentSelectedInvestigationUser['investigationUserName']:''}}</text>
								<image class="fullArrow" src="../../static/close-icon.png" mode=""></image>
							</template>
							<template v-if="investigationUsers.length==0">
								<image @click="toSelectVisiter" class="addPeopleBtn" src="../../static/icon-add.png"
									mode=""></image>
							</template>
						</view>
						<view class="btnGroup">
							<image @click="toSearch" class="searchBtn" src="../../static/search.png" mode=""></image>
							<image @click="openFilter" class="filterBtn" src="../../static/filterIcon.png" mode="">
							</image>
						</view>
					</view>
					<view class="rowTwo" v-if="nowPermission == 3" :animation="animationData">
						<text class="rowTwoName">查核状态</text>
						<view class="filterBtnWrap">
							<com-button v-for="(item, index) in btnArr" :btnText="item.label" :width="350" :height="80"
								:type="active === item.id ? 'pramary':'default'" v-on:btnClick="btnClick(item.id)" />
						</view>
					</view>
				</view>
			</template>

		</tm-top-menu>
		<tm-modal v-show="showModal" v-on:click="toggleModal(false)">
			<view class="content-list">
				<view class="list-item" v-for="(item, index) in point"
					:class="{active: checkPointId === item.checkPointId}" @click="checkPointHandle(item.checkPointId)">
					<text>{{item.checkPointName}}</text>
					<image class="check-img" v-if="checkPointId === item.checkPointId"
						src="../../static/checkStatus.png"></image>
				</view>
			</view>
		</tm-modal>
		<view class="contentContainer">
			<scroll-view @scroll="scrollHandle" scroll-y="true"
				:class="(detailList.length>0&&active != 2&&finishedStatus != 1)?'scroll-Y':'scroll-Y noBtn'">
				<view class="list" v-for="(item, index) in detailList" :key="index">
					<view class="title" v-if="item.responseList.length > 0">查核要点：{{item.checkPointName}}</view>
					<view class="item" v-for="(child, n) in item.responseList"
						@click="childClick(child,item.checkPointId)" :key="n">
						<view class="top-box">
							<view class="top-box-left">
								<view :class="[child.completeFlag?'index-icon done':'index-icon']">{{n + 1}}</view>
								<text>{{child.checkItemName}}</text>
								<!-- <text>ICU病房查看危重病人的抢救全过程(访谈)ICU病房查看危重病人的抢救全过程(访谈)ICU病房查看危重病人的抢救全过程(访谈)的抢救全过程(访谈)</text> -->
							</view>
							<view class="topRightGroup">
								<view class="checkStatus" @click.stop="checkNoApplicable(child)">
									<image v-if="child.isNoApplicable&&!notApplicableList.includes(child.id)" class="checkIcon"
										src="../../static/check-no.png" mode=""></image>
									<image v-if="notApplicableList.includes(child.id)||!child.isNoApplicable" class="checkIcon"
										src="../../static/check-checkbox.png" mode=""></image>
									<text class="checkStatusText">{{child.notApplicableName}}</text>
								</view>
								<image src="../../static/tuli.png"
									@tap.stop="goLegendDetails($event ,child.checkItemId, item.checkPointId)"></image>
							</view>
						</view>
						<view class="children">
							<view class="child">
								<text>{{child.deptName || '--'}}</text>
								<text>查核单位</text>
							</view>
							<view class="child">
								<text>{{child.checkModelName || '--'}}</text>
								<text>查核方式</text>
							</view>
							<view class="child">
								<text :style="{color:`#${child.lastResultColor}`}">{{child.lastResult || '--'}}</text>
								<text>上次结果</text>
							</view>
							<view class="child">
								<text :style="{color:`#${child.checkResultColor}`}">{{child.checkResult || '--'}}</text>
								<text>本次结果</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<tm-callback-listpage />
		<view class="bottomBtnGroup" v-if="!ifSearchMod">
			<view class="score">
				<view class="box">
					<text class="label">得分</text>
					<text class="currentScore">{{currentScore}}</text>
				</view>
				<view class="midLine"></view>
				<view class="box">
					<text class="label">总分</text>
					<text class="totalScore">{{totalScore}}</text>
				</view>
			</view>
			<view v-if="detailList.length>0&&active != 2&&finishedStatus != 1" @click="onkeyCheckHandle"
				class="botOneKeyCheck">完成</view>
		</view>
		<!-- <view v-if="detailList.length>0&&active != 2&&finishedStatus != 1" @click="onkeyCheckHandle" class="botOneKeyCheck">完成</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		_stopPropagation
	} from "../../utils/compatible.js";

	export default {

		data() {
			return {

				btnArr: [{
						id: 0,
						label: '全部'
					},
					{
						id: 1,
						label: '未查核'
					},
					{
						id: 2,
						label: '已查核'
					},
				],
				showModal: false,
				detailList: [],
				ifFromChildPage: false,
				copyDetailList: [],
				point: [{
					checkPointId: 'all',
					checkPointName: '全部要点'
				}],
				checkPointId: 'all',
				nowPermission: uni.getStorageSync('nowPermission'),
				active: 0,
				checkId: '',
				deptId: '',
				currentScrollHeight: 0,
				finishedStatus: 0, //所有计划里的查核项是否都以完成
				totalScore: 0,
				currentScore: 0,
				animationData: {}, //动画对象
				ifOpenFilter: false,
				searchKey: '', //搜索关键字
				ifSearchMod: false, //搜索模式
				applicable: true, //是否适用
				situationType: null, //情境类型
				notApplicableList:[],//保存本次check的查核项id

			};
		},
		computed: {
			...mapState({
				investigationUsers: state => state.checkMainPoints.investigationUsers,
				currentSelectedInvestigationUser: state => state.checkMainPoints.currentSelectedInvestigationUser,
				ifShowBindPeopleDialog:state => state.checkMainPoints.ifShowBindPeopleDialog,
			}),
			getCheckPointName() {
				let item = this.point.find((item) => item.checkPointId === this.checkPointId);
				return item ? item.checkPointName : '';
			},
		},
		watch: {
			currentSelectedInvestigationUser(newVal,oldVal) {
				if (this.situationType == 2) {
					//更换受访对象时拉取新数据
					if(newVal&&newVal.investigationUserName==''){
						//已删除所有访查对象
						this.$store.commit('checkMainPoints/comChangeState', {
							key: 'detailList',
							data:[]
						});
						this.detailList=[];
					}else {
						this.loadItemData();
					}
			    }		
			}
		},
		onLoad: function({
			checkId,
			deptId,
			finishedStatus,
			situationType
		}) {

			this.deptId = deptId;
			this.checkId = checkId;
			this.finishedStatus = finishedStatus;
			this.situationType = situationType;

			if (situationType == 2) {
				this.getInvestigationUsers();
			}
			//非分页情况下
			if (situationType != 2) {
				this.loadItemData();
			}
		},
		onUnload() {
			this.$store.commit('checkMainPoints/comChangeState',{key:'ifShowBindPeopleDialog',data:true});
		},
		onShow: function() {
			const {
				checkMainPoints: {
					ifUpdate
				}
			} = this.$store.state;

			if (ifUpdate) {
				//页面重新拉取数据
				this.loadItemData();
			}
			//创建动画实例
			const animation = uni.createAnimation({
				duration: 300,
				timingFunction: 'ease',
			})

			this.animation = animation;
		
		},
		beforeDestroy() {
			this.ifFromChildPage = false;
		},
		methods: {
			loadItemData(){
				this.checkTaskDetailList({
					'deptId': this.deptId,
					'checkId': this.checkId,
					'situationType': this.situationType,
					'investigationUserName':this.currentSelectedInvestigationUser&&this.currentSelectedInvestigationUser.investigationUserName
				})
			},
			//不适用回调
			checkNoApplicable({
				id,isNoApplicable
			}) {
				this.$store.dispatch({
					type: 'checkMainPoints/commActions',
					key: 'oneKeyNotApplicable',
					data: id
				}).then(data => {
					if (data) {
						//重新拉去列表数据
						this.loadItemData();
					}
				})
			},
			toSelectVisiter() {
				//更新受访对象状态，可能已经是进行中了
				this.$store.dispatch({
					type: 'checkMainPoints/commActions',
					key: 'getInvestigationUsers',
					data: {
						checkId: this.checkId,
						situationType: this.situationType,
						deptId:this.deptId
					}
				}).then(data => {
					this.$store.commit('checkMainPoints/comChangeState', {
						key: 'investigationUsers',
						data: data
					});
					
					uni.navigateTo({
						url: `/pages/selectVisitPerson/selectVisitPerson?checkId=${this.checkId}&situationType=${this.situationType}&deptId=${this.deptId}`
					});
				});
			},
			toSearch() {
				this.ifSearchMod = true;
				this.detailList = [];
			},
			cancelSearchMod() {
				this.ifSearchMod = false;
				this.detailList = [...this.copyDetailList];

			},
			onMaskChange({
				show
			}) {
				if (!show) {
					this.ifOpenFilter = false;
					this.animation.height(0).step();
					this.animationData = this.animation.export()
				}
			},
			openFilter() {
				const status = this.ifOpenFilter;
				if (!status) {
					this.$refs.popup.open();
					this.ifOpenFilter = true;
					this.animation.height('11vh').step();
				} else {
					this.$refs.popup.close();
					this.ifOpenFilter = false;
					this.animation.height(0).step();
				}
				this.animationData = this.animation.export()
			},
			//滚动监听事件，记录滚动高度
			scrollHandle(e) {
				this.currentScrollHeight = e.detail.scrollTop;
			},
			//一键查核
			onkeyCheckHandle() {
				uni.showModal({
					title: '注意',
					content: '确定所有未填写查核结果项默认无缺失结果吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.oneKeyCheckCommit();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			oneKeyCheckCommit() {
				let ids = [];
				// console.log('this.detailList',this.detailList);
				this.detailList.forEach(item => {
					// console.log(item.responseList);
					//筛选掉已查核项
					const temp = item.responseList.filter(v => !v.checkResult);
					const arr = temp.map(v => v.id);
					ids = ids.concat(arr);
				});
				this.$store.dispatch({
					type: 'checkMainPoints/commActions',
					key: 'oneKeyCheck',
					data: ids
				}).then(data => {
					if (data) {
						uni.showModal({
							title: '查核完成！',
							content: '',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				});
			},
			btnClick(id) {
				// console.log({id});
				this.active = id;
				this.filterCompleteFlag(id);
			},
			//获取访查对象列表
			getInvestigationUsers() {
				this.$store.dispatch({
					type: 'checkMainPoints/commActions',
					key: 'getInvestigationUsers',
					data: {
						checkId: this.checkId,
						situationType: this.situationType,
						deptId:this.deptId
					}
				}).then(data => {
					this.$store.commit('checkMainPoints/comChangeState', {
						key: 'investigationUsers',
						data: data
					});
					this.$store.commit('checkMainPoints/comChangeState', {
						key: 'currentSelectedInvestigationUser',
						data: data[0]
					})
				});
			},
			checkTaskDetailList({
				checkId,
				deptId,
				situationType,
				investigationUserName
			}) {
				const params = {
					checkId,
					deptId,
					situationType,
				}
				const pages = getCurrentPages();
				// console.log('pages',pages);
				//增加受访人
				if (situationType == 2) params['investigationUser'] = investigationUserName;

				this.dispatch('checkTaskDetailList', {
					...params
				}).then((data) => {
					if (data) {
						
						if(!data.checkDetailMapResponses)return;
						
						const nowPermission = JSON.parse(uni.getStorageSync('nowPermission'));
						this.$store.commit('checkMainPoints/comChangeState', {
							key: 'detailList',
							data: data.checkDetailMapResponses
						});
						if (!data.isBindResponsible && data.checkDetailMapResponses.length > 0 && nowPermission ==
							3) {
							//当未绑定当事人状态为false,可查核项大于0且当前角色是查核组员时
							//只有从查核列表进来才提示
							if (pages.length > 1&&this.ifShowBindPeopleDialog) {
								// console.log(pages[pages.length-2].route);
								// console.log(pages.length);
								if (pages[pages.length - 2].route && pages[pages.length - 2].route ==
									"pages/checkList/checkList") {
									uni.showModal({
										title: '提示',
										content: '目前未批量分配当事人，是否前往选择？',
										success: (res) => {
											if (res.confirm) {
												uni.navigateTo({
													url: `/pages/responsibleList/responsibleList?deptId=${this.deptId}&isFromCheckMainPoints=true`,
												});
											} else if (res.cancel) {
												// console.log('用户点击取消');
												this.$store.commit('checkMainPoints/comChangeState',{key:'ifShowBindPeopleDialog',data:false});
											}
										}
									});
								}
							}
						}

						this.detailList = data.checkDetailMapResponses;
						this.copyDetailList = data.checkDetailMapResponses;
						this.currentScore = data.getScore;
						this.totalScore = data.totalScore;
						data.checkDetailMapResponses.map(({
							checkPointId,
							checkPointName
						}) => {
							this.point.push({
								checkPointId,
								checkPointName
							});
						});
						
						//页面获取完数据时，保持筛选
						this.filterCompleteFlag(this.active);
					}
				});
			},
			childClick(child, checkPointId) {
				// 查核者，管理员
				if (this.nowPermission == 1 || this.nowPermission == 3) {
					let str = '',
						that = this;

					if (child.checkResult && !child.allowEdit) {
						// 当存在查核结果且不允许再修改时 跳转到查核项详情
						str = 'auditItemDetails/auditItemDetails';
					} else {
						if (this.nowPermission == 1) {
							uni.showModal({
								title: '提示',
								content: '请切换至查核者角色再进行查核操作！',
								showCancel: false
							});
							return;
						} else {
							// 跳转到查核结果提交
							str = 'mainPointsDetail/mainPointsDetail';
						}
					}
					uni.navigateTo({
						url: `/pages/${str}?id=${child.id}&checkPointId=${checkPointId}&checkItemId=${child.checkItemId}&situationType=${this.situationType}`,
						success: function(res) {
							const currentGroup = that.detailList.filter(item => item.checkPointId ==
								checkPointId);
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('acceptDataFromOpenerPage', {
								data: currentGroup
							});
						}
					});
				}
			},
			toggleModal(flage) {
				this.showModal = flage;
			},
			checkPointHandle(id) {
				this.checkPointId = id;
				if (id === 'all') {
					this.detailList = [...this.copyDetailList];
				} else {
					this.detailList = this.copyDetailList
						.filter((item) => item.checkPointId === id);
				}
			},
			filterCompleteFlag(btnId) {
				if (btnId === 0) {
					this.detailList = [...this.copyDetailList];
				} else {
					let completeFlag = btnId === 1 ? false : true;
					this.detailList = this.copyDetailList.map((item) => {
						return {
							...item,
							responseList: item.responseList
								.filter((child) => child.completeFlag === completeFlag)
						}
					});
				}
			},
			clearSearch() {
				this.searchKey = '';
				this.detailList = [...this.copyDetailList];
			},
			filterFromName(e) {
				const {
					value
				} = e.detail;
				this.searchKey = value;
				if (value === '') {
					this.detailList = [...this.copyDetailList];
				} else {
					this.detailList = [];
					this.copyDetailList.map((item) => {
						let responseList = item.responseList
							.filter((child) => child.checkItemName.indexOf(value) >= 0);
						if (item.checkPointName.indexOf(value) >= 0) {
							this.detailList.push({
								...item
							});
						} else if (responseList.length > 0) {
							this.detailList.push({
								...item,
								responseList
							});
						}
					});
				}
			},
			goLegendDetails(e, checkItemId, checkPointId) {
				_stopPropagation(e);
				//跳转到图例详情
				uni.navigateTo({
					url: `/pages/legendDetails/legendDetails?checkItemId=${checkItemId}&checkPointId=${checkPointId}`
				});
			},
			dispatch(key, data) {
				return this.$store.dispatch({
					type: 'checkList/commActions',
					key,
					data
				});
			},
		}
	}
</script>

<style lang="less">
	.checkMainPoints {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		// font-size: 22.5rpx;
		// line-height: 33.75rpx;
		background-color: #F5F6FA;

		.slot-wrap {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			background: #F0F2F7;
			border-radius: 44px;
			padding-left: 20rpx;

			.searchBar {
				flex: 1;
				width: 100%;
				height: 55rpx;
				font-size: 22.5rpx;
			}

			.clearIcon {
				width: 25rpx;
				height: 25rpx;
				margin: 0 20.5rpx;
			}

			.searchBarHolder {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #A1A7B3;
			}
		}

		.navbar-right {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25rpx;

			.searchActiveBtn {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #292C33;
			}
		}

		.botOneKeyCheck {
			text-align: center;
			height: 75rpx;
			width: 100%;
			line-height: 75rpx;
			font-size: 22.5rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			background: #3377FF;
		}

		.bottomBtnGroup {
			// position: fixed;
			width: 100%;
			// left:0;
			// bottom: 0;
			display: flex;
			flex-direction: row;
			border-top: 1px solid #DADEE6;
			background-color: #fff;

			.score {
				display: flex;
				width: 50%;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 75rpx;

				.box {
					width: 50%;
					text-align: center;
					white-space: nowrap;
					vertical-align: bottom;

					.label {
						color: #666E80;
						font-size: 17.5rpx;
						margin-right: 10rpx;
					}

					.currentScore {
						font-size: 30rpx;
						font-weight: bold;
						color: #3377FF;
					}

					.totalScore {
						font-size: 30rpx;
						font-weight: bold;
						color: #292C33;
					}
				}

				.midLine {
					height: 17.5rpx;
					border-left: 0.62rpx solid #DADEE6;
				}
			}

			.botOneKeyCheck {
				text-align: center;
				height: 75rpx;
				flex-grow: 1;
				line-height: 75rpx;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
				background: #3377FF;
			}
		}

		.top-search {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 25rpx;
			background-color: #fff;
			box-shadow: 0 3.75rpx 12.5rpx 0 rgba(0, 13, 51, 0.1);

			.search {
				position: relative;
				width: 100%;
				height: 55rpx;
				line-height: 55rpx;
				background-color: #F0F2F7;

				input {
					padding: 0 45rpx 0 15rpx;
					height: 55rpx;
					line-height: 55rpx;
					font-size: 22.5rpx;
				}

				image {
					position: absolute;
					top: 16.87rpx;
					right: 15rpx;
					width: 21.25rpx;
					height: 21.25rpx;
				}
			}

			.top-btn-wrap {
				padding-left: 25rpx;

				.btn-list {
					display: flex;
					flex-direction: row;

					.com-button {
						margin-left: 5rpx;

						&:first-child {
							margin-left: 0;
						}
					}
				}

				.select-wrap {
					display: flex;
					flex-direction: row;
					align-items: center;
					white-space: nowrap;

					image {
						margin-left: 9.37rpx;
						width: 12.5rpx;
						height: 12.5rpx;
					}
				}
			}
		}

		.top-search-two {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 25rpx;
			background-color: #fff;
			box-shadow: 0 3.75rpx 12.5rpx 0 rgba(0, 13, 51, 0.1);

			.rowOne {
				display: flex;
				width: 100%;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.selectPeople {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.completePeopleIcon {
						width: 50rpx;
						height: 50rpx;
						margin-right: 15rpx;
					}

					.peopleName {
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #292C33;
					}

					.fullArrow {
						width: 11.25rpx;
						height: 7.5rpx;
						margin-left: 15rpx;
					}

					.addPeopleBtn {
						width: 30rpx;
						height: 30rpx;
						margin-right: 12.5rpx;
					}

				}

				.btnGroup {
					.searchBtn {
						width: 30rpx;
						height: 30rpx;
						margin-right: 50rpx;
					}

					.filterBtn {
						width: 30rpx;
						height: 27.5rpx;
					}
				}
			}

			.rowTwo {
				display: flex;
				width: 100%;
				height: 0;
				overflow: hidden;
				flex-direction: column;
				box-sizing: border-box;

				.rowTwoName {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666F80;
					margin-bottom: 12.5rpx;
					padding-top: 50rpx;
				}

				.filterBtnWrap {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}
		}

		.content-list {
			// padding-top: 105rpx;
			width: 100%;
			background-color: #fff;

			.list-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #DADEE6;
				padding: 0 25rpx;
				width: 100%;
				height: 87.5rpx;
				font-size: 22.5rpx;
				line-height: 33.75rpx;
				color: #292C33;

				.check-img {
					float: right;
					width: 19.37rpx;
					height: 14.37rpx;
				}

				&.active {
					color: #3377FF;
				}
			}
		}

		.contentContainer {
			display: flex;
			flex: 1;
			height: 100%;
			overflow: hidden;

			.scroll-Y {
				height: 100%;

				&.noBtn {
					height: 100%;
				}
			}
		}

		.list {
			.title {
				padding-left: 25rpx;
				width: 100%;
				height: 62.5rpx;
				line-height: 62.5rpx;
				color: #666F80;
			}

			.item {
				margin-top: 15rpx;
				padding: 25rpx 0;
				min-height: 167.5rpx;
				background-color: #fff;

				&:nth-child(2) {
					margin-top: 0;
				}

				.top-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.top-box-left {
						display: flex;
						flex-direction: row;
						width: calc(100% - 55rpx);

						.index-icon {
							margin-right: 15rpx;
							border-radius: 0 62.5rpx 62.5rpx 0;
							width: 50rpx;
							height: 35rpx;
							line-height: 35rpx;
							text-align: center;
							color: #fff;
							background-color: #66B2FE;

							&.done {
								background-color: rgba(195, 202, 217, 1);
							}
						}

						>text {
							display: -webkit-box;
							overflow: hidden;
							width: calc(100% - 65rpx);
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
						}
					}

					.topRightGroup {
						display: flex;
						flex-direction: row;

						.checkStatus {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							width: 125rpx;
							height: 40rpx;
							margin-right: 15rpx;
							background: #F2F4F7;
							border-radius: 20rpx;

							.checkIcon {
								width: 25rpx;
								height: 25rpx;
								margin-right: 10rpx;
							}

							.checkStatusText {
								font-size: 20rpx;
								font-family: SourceHanSansCN-Normal, SourceHanSansCN;
								font-weight: 400;
								color: #292C33;
							}
						}

						image {
							margin-right: 15rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.children {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 18.75rpx;

					.child {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex: 1;
						border-right: 1px solid #DADEE6;

						text {
							font-weight: 500;

							&:last-child {
								font-size: 17.5rpx;
								line-height: 26.25rpx;
								color: #7A8599;
								font-weight: 400;
							}
						}

						&:last-child {
							border-right: 0;
						}
					}
				}
			}
		}
	}
</style>