uniDataCenter/pages/dateplan/editPlan.vue

<template>
	<view style="background: #F1F5F7;min-height: 100vh;">
		<view class="accountBox">
			<text class="text">账号</text>
			<image class="accountImg" :src="accountInfo.head" mode="widthFix"></image>
			<text class="accountName">{{accountInfo.name}}</text>
		</view>
		<view class="liveTimeBox">
			<view class="itmeIconFont iconfont icon-shijian_icon"></view>
			<view class="flex" :class="main_time_falg?'errTime':''" @click="editEvent('all')">
				<view class="no_worder" v-if="startLiveTime.time==''&&startLiveTime.date==''">开播时间</view>
				<view class="liveStartTimeBox" v-else>
					<view class="time">{{startLiveTime.time}}</view>
					<view class="date">{{startLiveTime.date}}</view>
				</view>
				<image class="liveTimeImg" src="../../static/img/you_icon@2x.png" mode="widthFix"></image>
				<view class="no_worder" v-if="endLiveTime.time==''&&endLiveTime.date==''">下播时间</view>
				<view class="liveStartTimeBox" v-else>
					<view class="time">{{endLiveTime.time}}</view>
					<view class="date">{{endLiveTime.date}}</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height:calc(100vh - 258rpx);margin-top:10rpx">
			<view class="workerBox" style="margin-top:6rpx">
				<view class="wirkerTitle">
					<view class="title">主播</view>
					<view class="iconfont icon-tianjia_icon" @click="addStaffInfo('staff_info_anchor')"></view>
				</view>
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options" :key="index+'anchorliveTimeBoxInfo'"
						v-for="(item,index) in staff_info_anchor" @click="swipeClick(index,'staff_info_anchor')">
						<view class="liveTimeBox">
							<view class="itmeIconFont iconfont icon-shijian_icon"></view>
							<view class="flex" :class="item.err_time?'errTime':''" @click="editEvent('staff_info_anchor',index)">
								<view class="liveStartTimeBox">
									<view class="time">{{item.slefStartTime.time}}</view>
									<view class="date">{{item.slefStartTime.date}}</view>
								</view>
								<image class="liveTimeImg" src="../../static/img/you_icon@2x.png" mode="widthFix"></image>
								<view class="liveStartTimeBox">
									<view class="time">{{item.slefEndTime.time}}</view>
									<view class="date">{{item.slefEndTime.date}}</view>
								</view>
							</view>
						</view>
						<view class="worderSelectBox" @click="plan_enableStaffList('staff_info_anchor',index)">
							<view class="no_worder" v-if="item.staff_name_list&&item.staff_name_list.length==0">请选择主播
							</view>
							<view class="worder" v-else>{{item.staff_name_list.join(',')}}</view>
							<view class="iconfont icon-down_icon"></view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<view class="workerBox">
				<view class="wirkerTitle">
					<view class="title">工作人员</view>
					<view class="iconfont icon-tianjia_icon" @click="addStaffInfo('staff_info_worker')"></view>
				</view>
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options" :key="index+'staff_info_workermeBoxInfo'"
						v-for="(item,index) in staff_info_worker" @click="swipeClick(index,'staff_info_worker')">
						<view class="liveTimeBox" :key="index+'staff_info_workermeBoxInfo'">
							<view class="itmeIconFont iconfont icon-shijian_icon"></view>
							<view class="flex" :class="item.err_time?'errTime':''" @click="editEvent('staff_info_worker',index)">
								<view class="liveStartTimeBox">
									<view class="time">{{item.slefStartTime.time}}</view>
									<view class="date">{{item.slefStartTime.date}}</view>
								</view>
								<image class="liveTimeImg" src="../../static/img/you_icon@2x.png" mode="widthFix"></image>
								<view class="liveStartTimeBox">
									<view class="time">{{item.slefEndTime.time}}</view>
									<view class="date">{{item.slefEndTime.date}}</view>
								</view>
							</view>
						</view>
						<view class="worderSelectBox" @click="plan_enableStaffList('staff_info_worker',index)">
							<view class="no_worder" v-if="item.staff_name_list&&item.staff_name_list.length==0">请选择工作人员
							</view>
							<view class="worder" v-else>{{item.staff_name_list.join(',')}}</view>
							<view class="iconfont icon-down_icon"></view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<view class="buttons">
			<view class="button button1" @click="goBack">取消</view>
			<view class="button button2" @click="livePlan_edit">提交</view>
			<view class="button button3" @click="deleteFlagEvent">删除计划</view>
		</view>
		</scroll-view>
		<!-- 时间选择 -->
		<editPlanTime v-if="editPlanTimeFlag" :editTimeData='editTimeData' @changeTime='changeTime'
			@closeEvent='editPlanTimeFlag=false'></editPlanTime>
		<!-- 工作人员选择 -->
		<view class="worker_mask" v-if="checkboxFlag" @touchmove.stop.prevent="moveStop" @click="clearMask">
			<view class="worker_mask_container" @click.stop="moveStop">
				<view class="operationBox">
					<view class="cancel" @click="clearMask">取消</view>
					<view class="define" @click="submitEvent">确定</view>
				</view>
				<no-data v-if="workerList.length==0" fcolor='#ccc'></no-data>
				<scroll-view scroll-y="true" class="checkboxGroup">
					<checkbox-group @change="checkboxChange" style="display: flex;flex-wrap: wrap;">
						<label class="list_cell" v-for="item in workerList" :key="item.id">
							<view>
								<checkbox style="transform:scale(0.7)" :value="item.id" :checked="item.checked" />
							</view>
							<view>{{item.real_name}}</view>
						</label>
					</checkbox-group>
				</scroll-view>
			</view>
		</view>
		<wm-watermark :text="real_name" :opacity="editPlanTimeFlag?0.1:0.2"></wm-watermark>
	</view>
</template>

<script>
	import editPlanTime from './editPlanTime.vue'
	export default {
		components: {
			editPlanTime
		},
		data() {
			return {
				real_name:'',
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				accountInfo: {},
				date: '',
				editInfo: {},
				startLiveTime: {
					date: '',
					time: ''
				},
				endLiveTime: {
					date: '',
					time: ''
				},
				staff_info_worker: [],
				staff_info_anchor: [],
				editTimeData: {
					type: '',
					index: 0,
					startLiveTime: {
						date: '',
						time: ''
					},
					endLiveTime: {
						date: '',
						time: ''
					},
				},
				editPlanTimeFlag: false,
				workerList: [],
				checkboxFlag: false,
				checkboxData: {},
				main_time_falg:false
			}
		},
		async onLoad(option) {
			await this.$onLaunched;
			this.real_name = uni.getStorageSync('userInfo').info.real_name;
			this.accountInfo = {
				  head: decodeURIComponent(option.head),
				  name:option.name,
				  platform: option.platform,
				  ruled: option.ruled,
				  seller_id: option.seller_id
			}
			console.log(this.accountInfo)
			this.date = option.date;
			this.plan_staffInfo()
		},
		methods: {
			moveStop() {},
			checkboxChange(e) {
				this.checkboxData.data = e.detail.value
			},
			submitEvent() {
				let staff_name_list = []
				this.workerList.forEach((item) => {
					if (this.checkboxData.data.indexOf(JSON.stringify(item.id)) != -1) {
						staff_name_list.push(item.real_name)
					}
				})
				this[this.checkboxData.type][this.checkboxData.index].staff_name_list = staff_name_list;
				this[this.checkboxData.type][this.checkboxData.index].staff_ids = this.checkboxData.data;
				this.checkboxFlag = false;
			},
			clearMask() {
				this.checkboxFlag = false
			},
			plan_enableStaffList(type, index) {
				let operation_data = this[type][index]
				uni.showLoading({
					title: '加载中'
				});
				let params = {
					start_time: operation_data.slefStartTime.date + ' ' + operation_data.slefStartTime.time,
					end_time: operation_data.slefEndTime.date + ' ' + operation_data.slefEndTime.time,
					station_type: type == 'staff_info_anchor' ? 1 : 2, //通过主播、工作人员判断
					seller_id: this.accountInfo.seller_id,
					platform: this.accountInfo.platform,
				}
				if(this.editInfo.plan_id){
					params.plan_id = this.editInfo.plan_id
				}
				this.$req(this.$api.plan_enableStaffList, 'get', params, (res) => {
					uni.hideLoading()
					if (res && res.errno == 0) {
						let data = res.rst;
						let checked_list = [],
							no_checked_list = []
						data.forEach((item, index) => {
							if (operation_data.staff_ids.indexOf(item.id) != -1 || operation_data.staff_ids
								.indexOf(JSON.stringify(item.id)) != -1) {
								item.checked = true
								checked_list.push(item)
							} else {
								no_checked_list.push(item)
							}
						})
						this.workerList = [].concat(checked_list, no_checked_list)
						this.checkboxFlag = true;
						this.checkboxData = {
							type: type,
							index: index
						}
					} else if (res.errno != 4002) {
						uni.showToast({
							title: res.err,
							icon: 'none'
						});
					}
				}, (err) => {
					uni.hideLoading()
				})
			},
			changeTime(val) {
				if (val.type == 'all') {
					this.startLiveTime = val.startLiveTime;
					this.endLiveTime = val.endLiveTime;
				} else {
					this[val.type][val.index].slefStartTime = val.startLiveTime;
					this[val.type][val.index].slefEndTime = val.endLiveTime;
				}
				this.judgeTimeToast(val)
			},
			judgeTimeToast(val){//修改时间后，点击确认时间区间判断
				let start_time = new Date((val.startLiveTime.date + ' ' + val.startLiveTime.time)).getTime();
				let end_time = new Date((val.endLiveTime.date + ' ' + val.endLiveTime.time)).getTime();
				if(start_time >= end_time){
					uni.showToast({
						title: '开始时间大于结束时间，请正确选择时间！',
						icon: 'none'
					});
					return
				}
				if(val.type != 'all'){//非主时间段
					let main_start_time = new Date((this.startLiveTime.date + ' ' + this.startLiveTime.time)).getTime();
					let main_end_time = new Date((this.endLiveTime.date + ' ' + this.endLiveTime.time)).getTime();
					if(start_time<main_start_time||end_time>main_end_time){
						uni.showToast({
							title: '工作时间 超出 直播总时间，请正确选择时间！',
							icon: 'none'
						});
						return
					}
				}
				this.editPlanTimeFlag = false
				this.judgeTime()
			},
			editEvent(type, index) { //时间更改
				if (type == 'all') { //主开播结束时间
					this.editTimeData = {
						type: 'all',
						index: 0,
						startLiveTime: {
							date: this.startLiveTime.date,
							time: this.startLiveTime.time
						},
						endLiveTime: {
							date: this.endLiveTime.date,
							time: this.endLiveTime.time
						}
					}
				} else { //主播、工作人员的开始结束时间
					let data = this[type][index]
					this.editTimeData = {
						type: type,
						index: index,
						startLiveTime: {
							date: data.slefStartTime.date,
							time: data.slefStartTime.time
						},
						endLiveTime: {
							date: data.slefEndTime.date,
							time: data.slefEndTime.time
						}
					}
				}
				this.editPlanTimeFlag = true;
			},
			addStaffInfo(type) { //添加工作人员时间
				if (this.startLiveTime.date == '' || this.startLiveTime.time == '' || this.endLiveTime.date == '' || this
					.endLiveTime.time == '') {
					uni.showToast({
						title: '请正确选择开播/下播时间',
						icon: 'none'
					});
					return
				}
				if (type == 'staff_info_anchor') {
					this.staff_info_anchor.push({
						slefStartTime: {
							date: this.startLiveTime.date,
							time: this.startLiveTime.time
						},
						slefEndTime: {
							date: this.endLiveTime.date,
							time: this.endLiveTime.time
						},
						begin_time: '',
						finish_time: '',
						staff_ids: [],
						staff_name_list: [],
						charge_person: 1,
						staff_role: 1,
						timeFlag: false,
					})
				}
				if (type == 'staff_info_worker') {
					this.staff_info_worker.push({
						slefStartTime: {
							date: this.startLiveTime.date,
							time: this.startLiveTime.time
						},
						slefEndTime: {
							date: this.endLiveTime.date,
							time: this.endLiveTime.time
						},
						begin_time: '',
						finish_time: '',
						staff_ids: [],
						staff_name_list: [],
						charge_person: 1,
						staff_role: 4,
						timeFlag: false,
					})
				}
			},
			swipeClick(index, type) {
				this[type].splice(index, 1)
			},
			judgeTime(){
				// 主时间时间段判断
				let main_start_time = new Date((this.startLiveTime.date + ' ' + this.startLiveTime.time)).getTime();
				let main_end_time = new Date((this.endLiveTime.date + ' ' + this.endLiveTime.time)).getTime();
				if(main_start_time>=main_end_time){
					this.main_time_falg = true
					return
				}
				this.main_time_falg = false;
				// 主播和工作人员时间判断
				this.staff_info_anchor.forEach((item)=>{
					item.err_time = false
					let start_time = new Date((item.slefStartTime.date + ' ' + item.slefStartTime.time)).getTime();
					let end_time = new Date((item.slefEndTime.date + ' ' + item.slefEndTime.time)).getTime();
					if(start_time > end_time){
						item.err_time = true
					}
					if(start_time < main_start_time || end_time > main_end_time){
						item.err_time = true
					}
				})
				this.staff_info_worker.forEach((item)=>{
					item.err_time = false
					let start_time = new Date((item.slefStartTime.date + ' ' + item.slefStartTime.time)).getTime();
					let end_time = new Date((item.slefEndTime.date + ' ' + item.slefEndTime.time)).getTime();
					if(start_time > end_time){
						item.err_time = true
					}
					if(start_time < main_start_time || end_time > main_end_time){
						item.err_time = true
					}
				})
			},
			plan_staffInfo() {
				uni.showLoading({
					title: '加载中'
				});
				this.$req(this.$api.plan_staffInfo, 'post', {
					date: this.date,
					company_id: uni.getStorageSync('userInfo').info.company_id,
					sellerId: this.accountInfo.seller_id
				}, (res) => {
					uni.hideLoading()
					if (res && res.errno == 0) {
						let data = res.rst;
						if (!data || data.length == 0) {
							this.startLiveTime.date = this.date;
							this.startLiveTime.time = '00:00';
							this.endLiveTime.date = this.date;
							this.endLiveTime.time = '23:00';
							return
						};
						this.editInfo = data;
						// 直播开始 - 结束时间
						this.startLiveTime.date = data.complete_start_time.split(' ')[0]
						this.startLiveTime.time = data.complete_start_time.split(' ')[1]
						this.endLiveTime.date = data.complete_end_time.split(' ')[0]
						this.endLiveTime.time = data.complete_end_time.split(' ')[1]
						// 主播
						if (data.anchor.length != 0) {
							this.staff_info_anchor = []
							data.anchor.forEach((item) => {
								let staff_list = [];
								let staff_name_list = [];
								item.staff_list.forEach((item) => {
									staff_list.push(item.staff_id)
									staff_name_list.push(item.staff_name)
								})
								this.staff_info_anchor.push({
									slefStartTime: {
										date: item.time.complete_start_time.split(' ')[0],
										time: item.time.complete_start_time.split(' ')[1],
									},
									slefEndTime: {
										date: item.time.complete_end_time.split(' ')[0],
										time: item.time.complete_end_time.split(' ')[1],
									},
									begin_time: '',
									finish_time: '',
									staff_ids: staff_list,
									staff_name_list: staff_name_list,
									charge_person: 1,
									staff_role: 1,
									timeFlag: false
								})
							})
						}
						// 工作人员
						if (data.normal.length != 0) {
							this.staff_info_worker = []
							data.normal.forEach((item) => {
								let staff_list = [];
								let staff_name_list = [];
								item.staff_list.forEach((item1) => {
									staff_list.push(item1.staff_id)
									staff_name_list.push(item1.staff_name)
								})
								this.staff_info_worker.push({
									slefStartTime: {
										date: item.time.complete_start_time.split(' ')[0],
										time: item.time.complete_start_time.split(' ')[1],
									},
									slefEndTime: {
										date: item.time.complete_end_time.split(' ')[0],
										time: item.time.complete_end_time.split(' ')[1],
									},
									begin_time: '',
									finish_time: '',
									staff_ids: staff_list,
									staff_name_list: staff_name_list,
									charge_person: 1,
									staff_role: 4,
									timeFlag: false
								})
							})
						}
						this.judgeTime()
					} else if (res.errno != 4002) {
						uni.showToast({
							title: res.err,
							icon: 'none'
						});
					}
				}, (err) => {
					uni.hideLoading()
				})
			},
			livePlan_edit() { //提交计划
				if (this.main_time_falg || this.startLiveTime.date == '' || this.startLiveTime.time == '' || this.endLiveTime.date == '' || this
					.endLiveTime.time == '') {
					uni.showToast({
						title: '请正确选择开播/下播时间',
						icon: 'none'
					});
					return
				}
				let anchor_flag = false;
				let err_time_flag = false;
				let worker_arr = [];
				worker_arr = worker_arr.concat(this.staff_info_anchor, this.staff_info_worker)
				worker_arr.forEach((item) => {
					if(item.err_time){
						err_time_flag = true
					}
					if (!item.staff_ids || item.staff_ids == '' || item.staff_ids.length == 0) {
						anchor_flag = true
					}
					item.begin_time = item.slefStartTime.date + ' ' + item.slefStartTime.time;
					item.finish_time = item.slefEndTime.date + ' ' + item.slefEndTime.time;
				})
				if(err_time_flag){
					uni.showToast({
						title: '请正确选择工作时间！',
						icon: 'none'
					});
					return
				}
				if (anchor_flag) {
					uni.showToast({
						title: '请正确填写工作时间设置！工作时间对应工作人员必填！',
						icon: 'none'
					});
					return
				}

				let rule_id = false;
				let old_time_arr = [];
				if (this.editInfo && this.editInfo.length != 0) {
					this.editInfo.anchor&&this.editInfo.anchor.forEach((item) => {
						old_time_arr.push(item.time.complete_start_time + ' ~ ' + item.time.complete_end_time)
					})
					this.editInfo.normal&&this.editInfo.normal.forEach((item) => {
						old_time_arr.push(item.time.complete_start_time + ' ~ ' + item.time.complete_end_time)
					})
				}

				let now_time_arr = []
				worker_arr.forEach((item) => {
					now_time_arr.push(item.begin_time + ' ~ ' + item.finish_time)
				})
				if (JSON.stringify(old_time_arr) == JSON.stringify(now_time_arr)) {
					rule_id = true
				}
				var params = {
					start_time: this.startLiveTime.date + ' ' + this.startLiveTime.time,
					end_time: this.endLiveTime.date + ' ' + this.endLiveTime.time,
					company_id: uni.getStorageSync('userInfo').info.company_id,
					sellerId: this.accountInfo.seller_id,
					plat_type: this.accountInfo.platform,
					staff_info: JSON.stringify(worker_arr),
					rule_id: rule_id ? (this.editInfo.rule_id ? this.editInfo.rule_id : 0) : 0,
					id: this.editInfo.plan_id
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$req(this.$api.livePlan_edit, 'post', params, (res) => {
					uni.hideLoading()
					if (res && res.errno == 0) {
						uni.showToast({
							title: '编辑成功！',
							icon: 'none'
						});
						this.goBack('load')
					} else if (res.errno != 4002) {
						uni.showToast({
							title: res.err,
							icon: 'none'
						});
					}
				}, (err) => {
					uni.hideLoading()
				})
			},
			deleteFlagEvent() { //删除计划
				uni.showModal({
					title: '提示',
					content: '确定要删除该直播计划？',
					confirmText: '确定',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});
							this.$req(this.$api.plan_livePlanDestroyV2, 'post', {
								seller_id: this.accountInfo.seller_id,
								plat_type: this.accountInfo.platform,
								date: this.date
							}, (res) => {
								uni.hideLoading()
								if (res && res.errno == 0) {
									uni.showToast({
										title: '删除成功！',
										icon: 'none'
									});
									this.goBack('load')
								} else if (res.errno != 4002) {
									uni.showToast({
										title: res.err,
										icon: 'none'
									});
								}
							}, (err) => {
								uni.hideLoading()
							})
						} else if (res.cancel) {}
					}
				})
			},
			goBack(type) {
				if (type == 'load') {
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; // 前一个页面
					uni.navigateBack({
						success: function() {
							beforePage.onLoad(); // 执行前一个页面的onLoad方法
						},
					});
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.accountBox {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 32rpx 28rpx 20rpx;
		border-bottom: 2rpx solid #E8E8E8;

		.text {
			color: #303239;
			font-size: 32rpx;
			line-height: 44rpx;
			font-weight: bold;
		}

		.accountImg {
			margin-left: 36rpx;
			height: 70rpx;
			width: 70rpx;
			border-radius: 50%;
			margin-right: 18rpx;
		}

		.accountName {
			color: #303239;
			font-size: 32rpx;
			line-height: 44rpx;
		}
	}

	.liveTimeBox {
		padding: 20rpx 28rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;

		.itmeIconFont {
			font-size: 34rpx;
			color: #979797;
			width: 80rpx;
		}

		.liveTimeImg {
			width: 20rpx;
			margin-left: -40rpx;
			margin-right: 40rpx;
		}

		.liveStartTimeBox {
			flex: 1;

			.time {
				color: #000000;
				font-size: 32rpx;
				line-height: 44rpx;
				font-weight: bold;
			}

			.date {
				color: #34383A;
				font-size: 32rpx;
				line-height: 44rpx;
				margin-top: 4rpx;
			}
		}
	}
	.errTime{
		.liveStartTimeBox{
			.time,.date{
				color: red;
			}
		}
	}
	.no_worder {
		color: #9FA3AB;
		font-size: 28rpx;
		line-height: 40rpx;
		flex: 1
	}

	.workerBox {
		background: #FFFFFF;
		margin-top: 16rpx;

		.wirkerTitle {
			padding: 20rpx 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				color: #303239;
				font-size: 32rpx;
				line-height: 44rpx;
			}

			.iconfont {
				color: #646E8E;
				font-size: 32rpx;
			}
		}

		.liveTimeBox {
			border-top: 2rpx solid #E8E8E8;
		}

		.worderSelectBox {
			margin-left: 108rpx;
			width: calc(100vw - 140rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #E8E8E8;
			padding: 14rpx 0 26rpx;

			.worder {
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: 500;
				color: #447CFD;
			}



			.iconfont {
				color: #616161;
				font-size: 14rpx;
			}
		}
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		padding: 90rpx 0;
		margin-top: 15rpx;

		.button {
			width: 156rpx;
			height: 70rpx;
			border-radius: 8rpx;
			border: 2rpx solid #979797;
			color: #747474;
			font-size: 28rpx;
			line-height: 66rpx;
			text-align: center;
			margin: 0 22rpx;
		}

		.button2 {
			background: #5B80F4;
			border-color: #5B80F4;
			color: #FFFFFF;
		}

		.button3 {
			background: #E7605A;
			border-color: #E7605A;
			color: #FFFFFF;
		}
	}

	.worker_mask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;

		.worker_mask_container {
			position: absolute;
			left: 0;
			bottom: 0;
			background: #FFFFFF;
			width: 100%;
			height: 700rpx;
			border-top-left-radius: 38rpx;
			border-top-right-radius: 38rpx;

			.operationBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 36rpx;
				border-bottom: 2rpx solid #E8E8E8;

				.cancel,
				.define {
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.cancel {
					color: #747474;
				}

				.define {
					color: #1F2126;
				}
			}

			.checkboxGroup {
				height: 570rpx;
				overflow-y: auto;
			}

			.list_cell {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #555555;
				padding: 30rpx 0 30rpx 20rpx;
				border-bottom: 2rpx solid #E8E8E8;
				width: 25%;
				box-sizing: border-box;
			}
		}
	}
</style>