dd_pc/src/views/common/taskDetailsPopup.vue

<template>
	<div>
		<!-- 任务详情弹窗 -->
		<el-drawer :visible.sync="Delay_to_open" :with-header="false" :size="'500px'" :before-close="handleClose"
			:custom-class="'drawer_details'">
			<div class="details_title flex-box-ce">
				<span class="flex-1">{{ title }}</span>
				<!-- <span><el-button type="primary" v-if="  workDetailData.status==1" size="small" @click.stop="completeBtn()">完成</el-button></span> -->
			</div>
			<div class="details_content" v-if="workDetailData" v-loading="loading">
				<div class="flex-box flex-v-ce">
					<userImage class="user_img person_imghead" width="46px" height="46px"
						:user_name="workDetailData.employee_name" :img_url="workDetailData.img_url"></userImage>
					<div class="d_userMessage">
						<div>{{ workDetailData.employee_name }}</div>
						<div v-if="detailType != 2 && workDetailData.dept_list[0]">{{
							workDetailData.dept_list[0].dept_name }}</div>
					</div>
					<div style="margin-left: 5px;" class="flex-box flex-v-ce">
						<div v-if="workDetailData.point_config.base_point > 0" class="green">+{{
							workDetailData.point_config.base_point }}</div>
						<div v-else class="red">{{ workDetailData.point_config.base_point }}</div>
						<div style="margin-left: 5px;">{{ $getTypsName(workDetailData.pt_id) }}</div>
					</div>
					<div class="flex-1"></div>


					<el-popover v-if="workDetailData.reviews.length>0" placement="bottom-start" trigger="click">
						<div class="record" style="margin: 20px 0;width: 400px;">
							<div @click="openDetail(item)" v-for="(item, index) in workDetailData.reviews" :key="index"
								class="recordList"
								:class="[workDetailData.reviews.length - index > 1 ? 'record-list' : '']">
								<div class="flex-box-ce record-date fontColorB">
									<!-- <div class="record-name">{{ item.reviewer_name }}</div> -->
									<div class="flex-1">
										<span v-if="item.review_status == 0" class="fontColorB">待审批</span>
										<span v-else-if="item.review_status == 1" class="green">已通过</span>
										<span v-else class="red">已驳回</span>
									</div>
									<span class="fontColorC">{{item.review_time}}</span>
								</div>
								<div class="record-content">
									<div class="pre fontColorC">{{ item.remark || '无备注' }}</div>
								</div>
							</div>
						</div>
						<div slot="reference" class="blue" style="cursor: pointer;">查看审批记录</div>
					</el-popover>
				</div>

				<ul>
					<li class="flex-box">
						<div class="label">任务内容</div>
						<div class="content_text">{{ workDetailData.task_name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">任务备注</div>
						<textarea class="flex-1" disabled="disabled" v-model="workDetailData.task_remark"
							style="border: none;height:100px"></textarea>
					</li>
					<li class="flex-box"
						v-if="workDetailData.task_file_list && workDetailData.task_file_list.length > 0">
						<div class="label"></div>
						<div class="content_text">
							<el-image v-for="(item, index) in workDetailData.task_file_list" :key="index"
								style="width: 100px; height: 100px;margin-right:8px" :src="item"
								:preview-src-list="workDetailData.task_file_list"></el-image>
						</div>
					</li>
					<li class="flex-box">
						<div class="label">积分种类</div>
						<div class="content_text">{{ workDetailData.pt_name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">任务积分</div>
						<div class="content_text">{{ workDetailData.point_config.base_point }}{{ workDetailData.pt_name
							}}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.review_point">
						<div class="label">最终分</div>
						<div class="content_text">{{ workDetailData.point_config.review_point }}</div>
					</li>
					<li class="flex-box">
						<div class="label">审批人</div>
						<div class="content_text">{{ workDetailData.reviewer_name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">发布人</div>
						<div class="content_text">{{ workDetailData.publisher_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.create_time">
						<div class="label">发布时间</div>
						<div class="content_text">{{ workDetailData.create_time }}</div>
					</li>
					<li class="flex-box">
						<div class="label">截止时间</div>
						<div class="content_text">{{ workDetailData.expire_time }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.ahead_award_point > 0">
						<div class="label">提前奖分</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }} B分/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.timeout_deduction_point > 0">
						<div class="label">逾期扣分</div>
						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point }} B分/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.time">
						<div class="label">完成时间</div>
						<div class="content_text">{{$moment(workDetailData.complete_task.time).format('YYYY-MM-DD
							HH:mm')}}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.remark">
						<div class="label">完成备注</div>
						<div class="content_text">{{workDetailData.complete_task.remark }}</div>
					</li>
					<li class="flex-box"
						v-if="workDetailData.complete_task && workDetailData.complete_task.files && workDetailData.complete_task.files.length > 0">
						<div class="label"></div>
						<div class="content_text">
							<el-image v-for="(item, index) in workDetailData.complete_task.files" :key="index"
								style="width: 100px; height: 100px;margin-right:8px" :src="item"
								:preview-src-list="workDetailData.complete_task.files"></el-image>
						</div>
					</li>
				</ul>

				<div v-show="workDetailData.point_config && workDetailData.point_config.item_info">
					<p class="row_title">规则依据</p>
					<el-row :gutter="10" v-if="workDetailData.point_config.rule_info">
						<el-col :span="4">规则分类</el-col>
						<el-col :span="19">{{ workDetailData.point_config.rule_info.name }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分规则</el-col>
						<el-col :span="19">{{ workDetailData.point_config.item_info.remark }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分</el-col>
						<el-col :span="19"
							v-show="workDetailData.point_config.item_info.min_point == workDetailData.point_config.item_info.max_point">
							{{ workDetailData.point_config.item_info.min_point }} {{ workDetailData.pt_name }}
						</el-col>
						<el-col :span="19"
							v-show="workDetailData.point_config.item_info.min_point != workDetailData.point_config.item_info.max_point">
							{{ workDetailData.point_config.item_info.min_point }} ~ {{
							workDetailData.point_config.item_info.max_point }} {{ workDetailData.pt_name }}
						</el-col>
					</el-row>
				</div>
				<div v-show="showWork" style="border-top: 2px solid #f8f8f8;">
					<div class="d_progress">
						<div class="flex-box ">
							<div class="flex-1">工作进度（{{ workDetailData.progress }}%）</div>
							<div class="addJf blue" @click="sliderShow"
								v-if="workDetailData.employee_id == userId && workDetailData.status == 1">+更新进度</div>
						</div>
						<el-progress :percentage="workDetailData.progress"></el-progress>
					</div>
					<div>
						<el-tabs v-model="activeName">
							<el-tab-pane label="工作记录" name="work">
								<div class="flex-box">
									<div class="flex-1"></div>
									<div class="addJf blue" @click="isOne = true"
										v-if="workDetailData.employee_id == userId && workDetailData.status < 3">
										+记一条工作记录</div>
								</div>
								<div class="work_box" style="padding-top:10px">
									<div class="work_item" v-for="(item, index) in text_list" :key="index"
										style="margin: 0 0 15px 0">
										<div class="flex-box">
											<userImage class="user_img person_imghead" width="40px" height="40px"
												:user_name="item.recorder" :img_url="item.img_url"></userImage>
											<div style="width: 100%;" class="d_name">
												<div class="flex-box flex-d-center">
													<div class="flex-1">
														{{ item.recorder }}
														<span v-if="item.point * 1 > 0">+{{ item.point }}</span>
														<span v-if="item.point * 1 < 0">{{ item.point }}</span>
													</div>
													<div class="d_date fontColorC">
														{{ item.time }}
														<span class="delete_jfjl"
															v-if="item.recorder_id == userId && workDetailData.status < 3"
															@click="deletejf_cli(index, 0)">
															<i class="el-icon-delete"></i>
														</span>
													</div>
												</div>
												<div class="fontColorB" style="margin-top: 5px;word-break: break-all;">
													{{ item.remark }}</div>
											</div>
										</div>
									</div>
									<div v-if="text_list.length == 0" class="fontColorC" style="text-align: center;">
										暂无工作记录</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="记分记录" name="participation">
								<div class="flex-box" style="padding-bottom: 10px;border-bottom: 1px solid #f1f1f1;">
									<div class="flex-1 blue">
										<span v-if="point_total > 0">合计：+{{ point_total }}</span>
										<span v-else>合计：{{ point_total }}</span>
									</div>
									<div class="addJf blue" @click="isIntegral = true" v-if="keepTheScore">+记分</div>
								</div>
								<div class="work_box" style="padding-top:10px">
									<div class="work_item" v-for="(item, index) in point_list" :key="index"
										style="margin: 0 0 15px 0">
										<div class="flex-box">
											<userImage class="user_img person_imghead" width="40px" height="40px"
												:user_name="item.recorder" :img_url="item.img_url"></userImage>
											<div style="width: 100%;" class="d_name">
												<div class="flex-box flex-d-center">
													<div class="flex-1">
														{{ item.recorder }}
														<span class="red" v-if="item.point * 1 > 0">+{{ item.point
															}}</span>
														<span class="green" v-if="item.point * 1 < 0">{{ item.point
															}}</span>
													</div>
													<div class="d_date fontColorC">
														{{ item.time }}
														<span class="delete_jfjl"
															v-if="userId == item.recorder_id && workDetailData.status < 3"
															@click="deletejf_cli(index, 1)">
															<i class="el-icon-delete"></i>
														</span>
													</div>
												</div>
												<div class="fontColorB" style="margin-top: 5px;word-break: break-all;">
													{{ item.remark }}</div>
											</div>
										</div>
									</div>
									<div v-if="point_list.length == 0" class="fontColorC" style="text-align: center;">
										暂无积分记录</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</div>
		</el-drawer>
		<examinePopup :title="'审核详情'" :id="detail_id" :show.sync="detailShow"></examinePopup>

		<!-- 更新进度 -->
		<el-dialog title="更新进度" :close-on-click-modal="false" :visible.sync="isSlider" :before-close="publicClose"
			width="40%">
			<div class="slider">
				<div class="fontColorC">拖动滑杆更新进度</div>
				<el-slider v-model="progress"></el-slider>
			</div>
			<span slot="footer">
				<el-button @click="publicClose()">取消</el-button>
				<el-button type="primary" @click="sliderSend">完成</el-button>
			</span>
		</el-dialog>
		<!-- 记一条 -->
		<el-dialog title="记一条" :close-on-click-modal="false" :visible.sync="isOne" destroy-on-close
			:before-close="publicClose" width="40%">
			<div class="flex-box">
				<div style="width: 80px;">工作记录</div>
				<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
			</div>
			<span slot="footer">
				<el-button @click="publicClose()">取消</el-button>
				<el-button type="primary" @click="onerecord">完成</el-button>
			</span>
		</el-dialog>
		<!-- 记分记录 -->
		<el-dialog title="记分" :visible.sync="isIntegral" :before-close="publicClose" width="40%" destroy-on-close
			:close-on-click-modal="false">
			<el-form :model="integral" ref="integral" label-width="80px" :rules="formRules">
				<el-form-item label="记录" prop="text" :rules="[{ required: true, message: '记录不能为空' }]">
					<el-input type="textarea" :rows="3" v-model="integral.text"></el-input>
				</el-form-item>
				<!-- 记分不能为空 -->
				<el-form-item label="记分" prop="num">
					<!-- <el-form-item label="记分"  prop="num" :rules="[{ required: false, message: '记分不能为空'},{ type: 'number', message: '积分必须为数字值'}]"> -->
					<div class="num" :class="[integral.type == '1' ? 'add' : 'jian']"></div>
					<el-input placeholder="请输入内容" type="Number" v-model.number="integral.num" @input="
							val => {
								integral.num = val.replace(/[^\d]/g, '');
							}
						">
						<el-select v-model="integral.type" slot="prepend" placeholder="请选择" style="width: 80px;">
							<el-option label="奖分" value="1"></el-option>
							<el-option label="扣分" value="2"></el-option>
						</el-select>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="publicClose()">取消</el-button>
				<el-button type="primary" @click="integralSend('integral')">完成</el-button>
			</span>
		</el-dialog>

		<el-dialog title="完成任务" :visible.sync="completeShow" :close-on-click-modal="false" destroy-on-close width="50%">
			<el-form :model="detail_form" ref="detail_form" label-width="80px">
				<el-form-item label="任务备注" prop="remark"
					:rules="[{ required: true, message: '请填写任务备注(限200字)', trigger: 'blur' }]">
					<el-input v-model="detail_form.remark" type="textarea" :rows="4" maxlength="200"
						show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="图片">
					<upload :headers="Xtoken" class="avatar-uploader"
						:action="'https://' + 'integralsys.oss-cn-shenzhen.aliyuncs.com'" :show-file-list="true"
						:file-list="detail_form.fileList" :on-success="handleFilesSuccess" :on-preview="onFilePreView"
						:before-upload="beforeUpload" :on-remove="onFileRemove" :limit="3" accept="image/jpeg,image/png"
						:multiple="true" ref="clearPicture">
						<el-button size="small" type="primary">点击上传</el-button>
						（最多选择3张）
					</upload>
				</el-form-item>
			</el-form>
			<div class="flex-box-end">
				<el-button @click="resetForm('detail_form')">取消</el-button>
				<el-button type="primary" @click="onSubmit('detail_form')">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
const validatorNoZero = (rule, value, callback) => {
	//设置记分的验证
	if (value === 0) {
		return callback(new Error('记分不能为0'));
	} else if (value === '') {
		return callback(new Error('记分不能为空'));
	} else if (isNaN(value)) {
		return callback(new Error('积分必须为数字值'));
	} else {
		callback();
	}
};
import examinePopup from '@/components/examinePopup.vue';
import upload from '@/components/upload';
export default {
	name: 'taskDetailsPopup',
	components: { examinePopup,upload },
	props: {
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: false
		},
		id: {
			type: Number,
			default: 0
		},
		showWork: {
			type: Boolean,
			default: true
		},
		detailType: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			Delay_to_open: false, //打开抽屉

			loading: false,
			workDetailData: {
				reviews: [],
				process: [],
				dept_list: [],
				point_config: {
					base_point: '0'
				}
			},
			// itemId: getId,
			isOne: false,
			text_list: [],
			isIntegral: false,

			point_total: 0,
			point_list: [],
			activeName: 'work',
			getDataUrl: '/api/integral/work',
			params: {},

			userId: this.$getUserData().id,
			isSlider: false, //更新进度弹窗
			progress: 0, //更新进度modus
			isOne: false, //记一条
			textarea: '', //记录一条内容
			isIntegral: false, //记分记录
			integral: {
				text: '',
				num: 0,
				type: '1'
			},
			formRules: {
				//记分验证
				num: [
					{
						required: true,
						validator: validatorNoZero,
						trigger: 'blur'
					}
				]
			},
			keepTheScore: false,
			employeeMe: {},
			detailShow: false,
			detail_id: 0,
			detail_form: {
				id: '',
				remark: '',
				fileList: [],
				files: [],
			},
			completeShow:false,
			//图片附件
			Xtoken: { 'X-Token': this.$getToken() },
		};
	},
	mounted() {
		this.detailType == 2 ? (this.getDataUrl = '/api/integral/schedule') : (this.getDataUrl = '/api/integral/work');
		this.$nextTick(() => {
			this.getData();
			this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
		});
	},
	methods: {
		//提交完成任务
		onSubmit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let data = {
						work_id: this.detail_form.id,
						progress: '100',
						remark: this.detail_form.remark,
						state: '1',
						files: this.detail_form.files
					};
					this.$axios('post', '/api/integral/work', data).then(res => {
						this.$message.success(res.data.msg);
						this.resetForm(formName);
						this.getData();
					});
				}
			});
		},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.completeShow = false;
			this.detail_form.fileList = []
			this.detail_form.files = []
		},
		handleFilesSuccess(response, file, fileList) {
			let fileListData=fileList.filter(e=>{
			  return e.url
			})
			this.fileFun(file, fileList)
		},
		onFilePreView(file) {
			if (file.response) {
				window.open(file.response.url, '_blank');
			}
		},
		onFileRemove(file, fileList) {
			this.fileFun(file, fileList)
		},
		fileFun(file, fileList){
			this.detail_form.fileList = fileList;
			this.detail_form.files = []
			fileList.forEach((item, index) => {
				this.detail_form.files.push(item.url);
			});
		},
		// 附件上传
		beforeUpload(file) {
			const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
			const isLt2M = file.size / 1024 / 1024 < 5;
			if (!isJPG) {
				this.$message.error('上传图片只能是 JPEG,PNG,JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 5MB!');
			}
			return isJPG && isLt2M;
		},
		// 点击完成
		completeBtn() {
			this.detail_form.id = this.workDetailData.id;
			this.completeShow = true;
		},
		openDetail(item) {
			this.detailShow = true;
			this.detail_id = item.id;
		},
		employee_me(data) {
			let params = {
				id: data.employee_id
			};
			this.$axios('get', '/api/employee/info', params).then(res => {
				this.employeeMe = res.data.data;
				this.keepTheScore = this.keepThe_score(data);
			});
		},
		keepThe_score(cer) {
			if (cer.status > 2) {
				return false;
			}
			if (this.userId == cer.reviewer_id) {
				return true;
			}
			return this.employeeMe.employee_detail.superior_list.some(x => {
				if (this.userId == x.id) {
					return true;
				}
			});
		},
		deletejf_cli(cor, cur) {
			this.$confirm('确定永久删除此项?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let lier = cur == 1 ? this.point_list : this.text_list;
					let libf = cur == 1 ? this.text_list : this.point_list;
					lier.splice(cor, 1);
					let data = {
						work_id: this.workDetailData.id,
						process: []
					};
					data.process = lier.concat(libf);
					if (data.process.length == 0) {
						data.process = '[1]';
					} else {
						data.process = JSON.stringify(data.process);
					}
					this.$axios('post', '/api/integral/work', data).then(res => {
						if (res.data.code == 1) {
							this.getData();
						}
					});
				})
				.catch(() => {});
		},
		//记分记录
		integralSend(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					var items = this.workDetailData.process.list || [];
					var process = {
						img_url: this.$getUserData().img_url,
						point: this.integral.type == '1' ? this.integral.num : '-' + this.integral.num,
						recorder_id: this.$getUserData().id,
						recorder: this.$getUserData().name,
						remark: this.integral.text,
						time: this.$moment().format('YYYY-MM-DD HH:mm')
					};
					var data = {
						work_id: this.workDetailData.id,
						process: []
					};
					items.unshift(process);
					data.process = JSON.stringify(items);
					this.$axios('post', '/api/integral/work', data).then(res => {
						if (res.data.code == 1) {
							this.publicClose();
							this.getData();
						}
					});
				}
			});
		},
		//记一条
		onerecord() {
			if (!this.textarea) {
				this.$message.error('请输入备注内容');
				return;
			}
			var items = this.workDetailData.process.list || [];
			var process = {
				img_url: this.$getUserData().img_url,
				point: 0,
				recorder_id: this.$getUserData().id,
				recorder: this.$getUserData().name,
				remark: this.textarea,
				time: this.$moment().format('YYYY-MM-DD HH:mm')
			};
			var data = {
				work_id: this.workDetailData.id,
				process: []
			};
			items.unshift(process);
			data.process = JSON.stringify(items);
			this.$axios('post', '/api/integral/work', data).then(res => {
				if (res.data.code == 1) {
					this.publicClose();
					this.getData();
				}
			});
		},
		//更新进度
		sliderShow() {
			this.progress = this.workDetailData.progress;
			this.isSlider = true;
		},
		sliderSend() {
			var self = this;
			let data = {
				work_id: self.workDetailData.id,
				progress: self.progress
			};
			self.$axios('post', '/api/integral/work', data).then(res => {
				if (res.data.code == 1) {
					this.getData();
					self.isSlider = false;
				}
			});
		},
		publicClose() {
			this.textarea = '';
			this.integral = {
				text: '',
				num: 0,
				type: '1'
			};
			this.isSlider = false;
			this.isOne = false;
			this.isIntegral = false;
		},
		// 关闭弹窗
		handleClose() {
			this.$emit('update:visible', false);
		},
		// 获取数据
		getData() {
			this.loading = true;
			let data = this.detailType == 2 ? { schedule_id: this.id } : { work_id: this.id };
			this.$axios('get', this.getDataUrl, data, this.detailType == 2 ? '' : 'v2')
				.then(res => {
					this.workDetailData = res.data.data;
					this.employee_me(res.data.data);
					let text_list = [];
					let point_list = [];
					this.point_total = 0;
					if (this.workDetailData.process.list && this.workDetailData.process.list.length > 0) {
						for (let i in this.workDetailData.process.list) {
							this.point_total += this.workDetailData.process.list[i].point * 1;
							if (this.workDetailData.process.list[i].point != 0) {
								point_list.push(this.workDetailData.process.list[i]);
							} else {
								if (this.workDetailData.process.list[i].recorder_id == this.workDetailData.employee_id) {
									text_list.push(this.workDetailData.process.list[i]);
								}
							}
						}
					}
					setTimeout(() => {
						this.text_list = text_list;
						this.point_list = point_list;
					}, 500);
				})
				.finally(() => {
					this.loading = false;
				});
		}
	}
};
</script>
<style lang="scss" scoped="scoped">
.recordList {
	padding: 10px 0;
	cursor: pointer;
	border-radius: 5px;
}
.recordList:hover {
	// background-color: #F7F8FA;
}
.textarea ::v-deep textarea {
	background-color: #f7f8fa;
	border: none;
	padding: 0;
	width: 500px;
	color: #222 !important;
}
.record-message {
	font-size: 13px;
	margin: 5px 60px;
}
.record-list {
	position: relative;
}
.record-list::after {
	content: '';
	position: absolute;
	width: 2px;
	top: 5px;
	left: 3px;
	bottom: -15px;
	background-color: #ccc;
}
.record-title {
	padding: 16px 0;
	font-size: 16px;
}
.record-date {
	padding-left: 20px;
	position: relative;
	font-size: 13px;
}
.record-date::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: #ccc;
	left: 0;
	top: 50%;
	margin-top: -4px;
	border-radius: 50%;
	z-index: 2;
}
.record-content {
	background-color: #f7f8fa;
	padding: 6px;
	border-radius: 5px;
	margin-left: 20px;
	margin-top: 10px;
	// margin-bottom: 10px;
}
.record-name {
	margin-right: 10px;
	/* margin-left: 10px; */
	color: #141c28;
	font-weight: 600;
}
.details_content {
	& .d_userMessage {
		margin-left: 10px;
	}
	& .d_userMessage div:nth-child(1) {
		font-size: 16px;
	}
	& .d_userMessage div:nth-child(2) {
		font-size: 12px;
		color: #909399;
	}
	& .d_progress {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		margin-bottom: 10px;
	}
	& ul {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		& li {
			padding: 6px 0;
		}
		& .label {
			width: 80px;
			text-align: left;
			color: #909399;
		}
		& .content_text {
			flex: 1;
		}
	}
}
.details_content {
	padding: 20px;
	height: calc(100vh - 60px);
	overflow: auto;
	padding-bottom: 100px;
	.row_title {
		position: relative;
		margin: 0 0 20px 0;
		padding-top: 12px;
		font-size: 16px;
		color: #303133;
		line-height: 22px;
	}
	.row_title:before {
		position: absolute;
		top: 0;
		content: ' ';
		width: 100%;
		border-top: 1px #f8f8f8 solid;
	}
	.el-row {
		margin-bottom: 10px;
		font-size: 14px;
		.el-col-4 {
			color: #606266;
		}
	}
}
.details_title {
	font-size: 18px;
	padding: 18px 20px;
	border-bottom: 1px #efefef solid;
}
.d_name {
	margin-left: 10px;
}
.d_content {
	margin-left: 50px;
}
.addJf {
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 5px;
	padding: 5px;
	transition: all 0.3s;
}
.addJf:hover {
	color: #26a2ff !important;
}
.num {
	position: absolute;
	height: 22px;
	width: 20px;
	z-index: 999;
	left: 85px;
	line-height: 40px !important;
}
.add:before {
	position: absolute;
	content: '+';
	color: #f56c6c;
}
.jian:before {
	position: absolute;
	content: '-';
	color: #67c23a;
}
.delete_jfjl {
	transition: 0.3s all;
	cursor: pointer;
	margin: 0 0 0 10px;
}
.delete_jfjl:hover {
	color: #26a2ff;
}
</style>