<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-user"></i> <span class="top_dao"> Personal Center</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" style="padding: 30px 20px;">
			<el-row :gutter="30" style="min-width: 1000px;">
				<el-col :span="6">
					<div class="consumer">
						<div class="portrait" @click="coreVisible=true">
							<img src="../../assets/img/userImg.jpg" alt="" style="cursor: pointer;">
							<div class="ptmark">Upload avatar</div>
						</div>
						<p style="font-size: 26px;font-weight: bold;margin-top: 20px;">{{coreTable.account}}</p>
						<p style="margin-top: 10px;">{{coreTable.realname}}</p>
						<p style="margin-top: 10px;">{{coreTable.email}}</p>
						<el-button type="primary" plain @click="coreVisible=true" size="mini" style="margin-top: 15px;">
							<i class="el-icon-setting"></i>
							Personal settings
						</el-button>
					</div>
					<!-- 统计数据 -->
					<div class="numeric">
						<!-- <div class="numerItem">
							<b @click="JumpPage(1)">456</b>
							<p>Index</p>
						</div> -->
						<div class="numerItem">
							<b @click="JumpPage(2)">86</b>
							<p>Published articles</p>
						</div>
						<div class="numerItem">
							<b @click="JumpPage(3)">40</b>
							<p>Accepted articles</p>
						</div>
						<!-- <div class="numerItem">
					 		<b @click="JumpPage(4)">456</b>
					 		<p>Review volume</p>
					 	</div>
					 	<div class="numerItem">
					 		<b @click="JumpPage(5)">456</b>
					 		<p>Number of references</p>
					 	</div> -->
					</div>
					<!-- H指数信息 -->
					<div class="exponent">
						<h2>H-index Information</h2>
						<div>
							<div class="expTit">
								H Index :
							</div>
							<div class="expInde">
								<b style="font-size: 20px;color: #006699;">5</b>
							</div>
							<br clear="both">
						</div>
						<div>
							<div class="expTit">
								Google account :
							</div>
							<div class="expInde">
								<!-- <b class="el-icon-check"
									style="font-size: 20px;font-weight: bold;color: #2a9916;margin-right: 5px;"></b>
								<a class="webLink">Personal homepage</a> -->
								<el-button type="success" @click="H_Index" plain size="mini">Binding</el-button>
							</div>
							<br clear="both">
						</div>
					</div>

				</el-col>
				<el-col :span="18">
					<!-- 审稿人信息 -->
					<div class="chunking" :class="this.usercap.includes('reviewer')?'':'chunkGrey'"
						style="margin-top: 25px;">
						<!-- <el-divider></el-divider> -->
						<h2 class="infor_title" v-if="this.usercap.includes('reviewer')">As Reviewer</h2>
						<h2 class="infor_title" v-if="!this.usercap.includes('reviewer')">No Reviewer identity</h2>
						<el-button type="primary" @click="reviewPoint(1)" v-if="this.usercap.includes('reviewer')"
							size="mini" class="infor_edit">
							<i class="el-icon-edit"></i>
							Edit Reviewer Information
						</el-button>
						<el-button type="warning" @click="reviewPoint(2)" v-if="!this.usercap.includes('reviewer')"
							size="mini" class="infor_edit">
							<i class="el-icon-plus"></i>
							Apply Reviewer
						</el-button>
						<div class="chunkPiece">
							<div style="margin: 20px 0 30px 55px;line-height:24px;font-size: 14px;">
								<div v-if="this.usercap.includes('reviewer')">
									<p>
										You are already the reviewer of the Journal of
										<b v-for="index in items_journal" style="margin-left: 3px;">
											{{index.title}} ,
										</b>
									</p>
									<p>You can modify the following information.</p>
									<p style="margin-top: 5px;">
										<b class="depresBtn" @click="JumpPage(6)">{{reviewTable.count}}</b>
										manuscripts reviewed.
									</p>
								</div>
							</div>
						</div>
					</div>

					<!-- 编委信息 -->
					<div :class="this.usercap.includes(',board')?'':'chunkGrey'" class="chunking"
						style="margin-top: 50px;">
						<h2 class="infor_title" v-if="this.usercap.includes(',board')">As Editorial Board Member</h2>
						<h2 class="infor_title" v-if="!this.usercap.includes(',board')">No Editorial Board Member
							identity</h2>
						<el-button type="warning" size="mini" class="infor_edit" @click="boardPoint(2)"
							v-if="!this.usercap.includes(',board')">
							<i class="el-icon-plus"></i>
							Apply Editorial Board Member
						</el-button>
						<div class="chunkPiece">
							<div style="margin: 20px 0 30px 55px;line-height:24px;font-size: 14px;">

							</div>
						</div>
					</div>

					<!-- 主编信息 -->
					<div :class="this.usercap.includes('chief')?'':'chunkGrey'" class="chunking"
						style="margin-top: 50px;">
						<h2 class="infor_title" v-if="this.usercap.includes('chief')">As Editor-in-Chief</h2>
						<h2 class="infor_title" v-if="!this.usercap.includes('chief')">No Editor-in-Chief identity</h2>
						<el-button type="warning" size="mini" class="infor_edit" @click="chiefPoint(2)"
							v-if="!this.usercap.includes('chief')">
							<i class="el-icon-plus"></i>
							Apply Editor-in-Chief
						</el-button>
						<div class="chunkPiece">
							<div style="margin: 20px 0 30px 55px;line-height:24px;font-size: 14px;">

							</div>
						</div>
					</div>

				</el-col>
			</el-row>
		</div>

		<!-- 修改密码弹出框 -->
		<el-dialog title="Change Password" :visible.sync="pwdVisible" width="500px">
			<el-form :model="pwdForm" :rules="rules" ref="pwd_form" label-width="150px">
				<el-form-item label="Old password :" prop="password">
					<el-input type="password" placeholder="Please enter..." v-model="pwdForm.password"></el-input>
				</el-form-item>
				<el-form-item label="New password :" prop="new_password">
					<el-input type="password" placeholder="Please enter..." v-model="pwdForm.new_password">
					</el-input>
				</el-form-item>
				<el-form-item label="Confirm password :" prop="re_password">
					<el-input type="password" placeholder="Please enter..." v-model="pwdForm.re_password">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pwdVisible = false">Cancel</el-button>
				<el-button type="primary" @click="save_pwd(pwdForm)">OK</el-button>
			</span>
		</el-dialog>

		<!-- 绑定谷歌账号弹出框 -->
		<el-dialog title="Bind Google account" :visible.sync="bindVisible" width="550px">
			<p style="padding:0 0 20px 5px;font-weight: bold;">
				Please select one and press the OK button.</p>
			<div v-for="item in geogleList" :class="bindForm.g_author == item.author_id?'gugeList gu_col':'gugeList'"
				@click="choseGego(item)">
				<p style="font-weight: bold;letter-spacing: -0.5px;">{{item.name}}</p>
				<p>
					<font>Email :</font>{{item.email}}
				</p>
				<p>
					<font>Affiliations :</font>{{item.affiliations}}
				</p>
				<p><a :href="item.link" target="_blank">{{item.link}}</a></p>
				<i class="kuangGeo"></i>
				<b class="el-icon-check"></b>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="bindVisible = false">Cancel</el-button>
				<el-button type="primary" @click="save_bind(bindForm)">OK</el-button>
			</span>
		</el-dialog>

		<!-- 个人信息弹出框 -->
		<el-dialog title="Change Essential Information" :visible.sync="coreVisible" width="600px">
			<el-form :model="coreForm" :rules="rules" ref="core_Form" label-width="140px">
				<el-form-item label="Account :" prop="account">
					<span>{{coreForm.account}}</span>
				</el-form-item>
				<el-form-item label="Email :">
					<span>{{coreForm.email}}</span>
				</el-form-item>
				<el-form-item label="head portrait :">
					<el-upload class="avatar-uploader" :action="baseUrl+'master/Journal/up_topic_file'"
						:show-file-list="false" name="journaltopic" :on-success="handleAvatarSuccess"
						:on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
						<img v-if="pictureUrl" :src="pictureUrl" class="avatar" accept=".png,.jpg">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="Change Password :">
					<el-button type="success" @click="psw_word" plain>Change Password</el-button>
				</el-form-item>
				<el-form-item label="Realname :" prop="realname">
					<el-input type="text" placeholder="Please enter..." v-model="coreForm.realname"></el-input>
				</el-form-item>
				<el-form-item label="Gender :" prop="gender">
					<el-radio-group v-model="coreTable.gender">
						<el-radio :label="1">Male</el-radio>
						<el-radio :label="2">Female</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="Phone :" prop="phone">
					<el-input type="text" placeholder="Please enter..." v-model="coreForm.phone">
					</el-input>
				</el-form-item>
				<el-form-item label="H Index :">
					<el-input-number :min="0" v-model="coreForm.Hindex"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="coreVisible = false">Cancel</el-button>
				<el-button type="primary" @click="onSubmit_core(coreForm)">Save</el-button>
			</span>
		</el-dialog>

		<!-- 审稿人弹出框 -->
		<el-dialog title="Change Reviewer Information" :visible.sync="reviewVisible" width="650px">
			<el-form :model="reviewForm" :rules="rules" ref="review_Form" label-width="120px">
				<el-form-item label="Title :" prop="title">
					<el-select v-model="reviewForm.title" filterable placeholder="Please select a title"
						value-key="groupID" style="width: 320px;">
						<el-option v-for="item in df_technical" :key="item.label" :label="item.label"
							:value="item.label"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Country :" prop="country">
					<el-select v-model="reviewForm.country" filterable placeholder="Please select a country"
						value-key="groupID" style="width: 320px;">
						<el-option v-for="item in df_country" :label="item.en_name" :key="item.en_name"
							:value="item.en_name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Major :" prop="maj_cn">
					<el-cascader v-model="reviewForm.maj_cn" :options="jl_major" :props="defaultParams"
						placeholder="Please select major" @change="ched_id" style="width: 450px;"></el-cascader>
				</el-form-item>
				<el-form-item label="Field :" prop="field">
					<el-input v-model="reviewForm.field" type="textarea" style="width: 450px;"></el-input>
				</el-form-item>
				<el-form-item label="Orcid :">
					<el-input v-model="reviewForm.orcid" style="width: 450px;"></el-input>
				</el-form-item>
				<el-form-item label="Introduction :">
					<el-input v-model="reviewForm.introduction" type="textarea" style="width: 450px;">
					</el-input>
				</el-form-item>
				<el-form-item label="Affiliation :">
					<el-input v-model="reviewForm.company" style="width: 450px;"></el-input>
				</el-form-item>
				<!-- 简历 -->
				<el-form-item label="CV. :" prop="Qualifications">
					<el-upload class="upload-demo" :action="baseUrl+'api/Reviewer/up_cv_file'"
						:on-success="handleFileSuccess1" name="reviewerCV" type="reviewerCV" :on-error="handleFileError"
						:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
						:on-change="handleChange1" accept=".pdf" :on-exceed="handleExceed" :file-list="fileL_pdf1"
						ref="upload">
						<el-button type="text" style="font-weight: bolder;"><b class="el-icon-lx-top"
								style="font-weight: bolder;"></b>upload</el-button>
					</el-upload>
					<span style="font-size: 12px; color: #aaa;">Only compressed files can be
						uploaded(.pdf)</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reviewVisible = false">Cancel</el-button>
				<el-button type="primary" @click="onSubmit_review(reviewForm)">Save</el-button>
			</span>
		</el-dialog>

		<!-- 申请编委弹出框 -->
		<el-dialog title="Apply Editorial board member" :visible.sync="boardVisible" width="650px">
			<el-form :model="boardForm" :rules="rules" ref="board_Form" label-width="120px">

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="boardVisible = false">Cancel</el-button>
				<el-button type="primary" @click="onSubmit_board(boardForm)">Save</el-button>
			</span>
		</el-dialog>

		<!-- 申请主编弹出框 -->
		<el-dialog title="Apply Editor-in-Chief" :visible.sync="chiefVisible" width="650px">
			<el-form :model="chiefForm" :rules="rules" ref="chief_Form" label-width="120px">

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="chiefVisible = false">Cancel</el-button>
				<el-button type="primary" @click="onSubmit_chief(chiefForm)">Save</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				user_id: localStorage.getItem('U_id'),
				username: localStorage.getItem('U_name'),
				userrole: localStorage.getItem('U_status'),
				usercap: localStorage.getItem('U_role'),
				imageUrl: '',
				coreTable: {},
				reviewTable: {},
				reviewVisible: false,
				coreVisible: false,
				bindVisible: false,
				boardVisible: false,
				chiefVisible: false,
				coreForm: {},
				reviewForm: {},
				bindForm: {},
				boardForm: {},
				chiefForm: {},
				pwdForm: {
					account: localStorage.getItem("U_name"),
					password: '',
					new_password: '',
					re_password: ''
				},
				geogleList: [],
				items_journal: [],
				jl_major: [],
				df_country: [],
				df_technical: [{
					label: 'Prof',
				}, {
					label: 'Associate Prof.',
				}, {
					label: 'Assistant Prof.',
				}, {
					label: 'Ph.D.',
				}, {
					label: 'Others',
				}],
				fileL_pdf1: [],
				defaultParams: {
					label: 'title',
					value: 'major_id',
					children: 'children'
				},
				pwdVisible: false,
				rules: {
					email: [{
						required: true,
						message: 'Please enter email',
						trigger: 'blur'
					}, {
						validator: function(rule, value, callback) {
							if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false) {
								callback(new Error("Please enter the correct email format"));
							} else {
								callback();
							}
						},
						trigger: "blur"
					}],
					phone: [{
						required: true,
						message: 'Please enter phone',
						trigger: 'blur'
					}, {
						validator: function(rule, value, callback) {
							if (/^1[34578]\d{9}$/.test(value) == false) {
								callback(new Error("Please enter the correct phone format"));
							} else {
								callback();
							}
						},
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: 'Please enter old password',
						trigger: 'blur'
					}],
					new_password: [{
						required: true,
						message: 'Please enter new password ',
						trigger: 'blur'
					}],
					re_password: [{
						required: true,
						message: 'Please enter the new password again',
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						message: 'Please select gender',
						trigger: 'blur'
					}],
					maj_cn: [{
						required: true,
						message: 'Please select major',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: 'Please select title',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: 'Please select country',
						trigger: 'blur'
					}],
					field: [{
						required: true,
						message: 'Please input field',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: 'Please input realname',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取个人信息，数据列表
			getData() {
				this.$api
					.post('api/User/getUserDetail', {
						'user_id': this.user_id
					})
					.then(res => {
						if (res.code == 0) {
							this.coreTable = JSON.parse(JSON.stringify(res.data.user))
							this.coreForm = JSON.parse(JSON.stringify(res.data.user))
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('api/Reviewer/getAllMajor')
					.then(res => {
						this.jl_major = res.data.majors;
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('api/Reviewer/getCountrys')
					.then(res => {
						this.df_country = res.countrys;
					})
					.catch(err => {
						this.$message.error(err);
					});

				if (this.usercap.includes('reviewer')) {
					this.$api
						.post('api/Journal/getJournalInReviewer', {
							username: this.username
						})
						.then((res) => {
							this.items_journal = res.data.journals;
						})
						.catch((err) => {
							console.log(err);
						});

					this.$api
						.post('api/Reviewer/getReviewerListHistory', {
							user_id: this.user_id,
							pageIndex: 1,
							pageSize: 10
						})
						.then(res => {
							if (res.code == 0) {
								this.reviewTable.count = res.data.count || 0;
								this.$forceUpdate()
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},

			// 统计图跳转
			JumpPage(e) {
				if (e == 2) {
					this.$router.push({
						path: 'articleList'
					});
				} else if (e == 3) {
					this.$router.push({
						path: 'articleList'
					});
				} else if (e == 4) {
					this.$router.push({
						path: 'perhistory'
					});
				} else if (e == 6) {
					this.$router.push({
						path: 'peerewer'
					});
				}
			},

			// 点击修改密码
			psw_word() {
				this.pwdVisible = true;
			},

			// 点击提交密码
			save_pwd(pwdForm) {
				this.$refs.pwd_form.validate((valid) => {
					if (valid) {
						if (pwdForm.new_password == pwdForm.re_password) {
							this.$api
								.post('master/Admin/changepasswd', this.pwdForm)
								.then(res => {
									if (res.code == 0) {
										this.$message.success('Password modified successfully!');
										this.pwdVisible = false;
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});
						} else {
							this.$message.error("The two new password entries are inconsistent!");
						}
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 点击绑定谷歌账号
			H_Index() {
				this.bindVisible = true
			},

			// 选择谷歌账号
			choseGego(e) {
				this.bindForm.g_author = e.author_id
				this.bindForm.g_website = e.link
				this.$forceUpdate()
			},

			// 点击提交个人基本信息
			onSubmit_core(coreTable) {
				this.$refs.core_Form.validate((valid) => {
					if (valid) {
						// 二次确认
						this.$confirm('Are you sure you want to modify your basic personal information？', 'Tips', {
								type: 'warning'
							})
							.then(() => {
								// this.$api
								// 	.post('master/Admin/editAdminBase', this.coreTable)
								// 	.then(res => {
								// 		if (res.code == 0) {
								// 			this.$message.success('Personal information modified successfully！');
								// 			this.getData();
								// 		} else {
								// 			this.$message.error(res.msg);
								// 		}
								// 	})
								// 	.catch(err => {
								// 		this.$message.error(err);
								// 	});
							})
							.catch(() => {});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 审稿人弹出框
			reviewPoint(e) {
				this.reviewVisible = true
			},

			// 点击提交审稿人信息
			onSubmit_review(reviewTable) {
				this.$refs.review_Form.validate((valid) => {
					if (valid) {
						// 二次确认
						this.$confirm('Are you sure you want to modify reviewer information？', 'Tips', {
								type: 'warning'
							})
							.then(() => {

							})
							.catch(() => {});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 编委弹出框
			boardPoint() {
				this.boardVisible = true
			},
			// 点击提交编委信息
			onSubmit_board(boardForm) {

			},

			// 主编弹出框
			chiefPoint() {
				this.chiefVisible = true
			},

			// 点击提交主编信息
			onSubmit_chief(chiefForm) {

			},

			// 下拉级联添加
			ched_id(event) {
				this.reviewForm.major = event[0];
				this.reviewForm.cmajor = event[1];
			},
			ched_id_old(event) {
				this.reviewForm.major = event[0];
				this.reviewForm.cmajor = event[1];
			},
			ched_id_edit(event) {
				this.reviewForm.major = event[0];
				this.reviewForm.cmajor = event[1];
			},

			//上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.pictureUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.pictureUrl = URL.createObjectURL(file.raw);
			},
			handleAvatarError(res, file) {
				// this.$message.error(res);
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 1;
				if (!isLt2M) {
					this.$message.error('Picture size cannot exceed 1M!');
				}
				return isLt2M;
			},

			// 上传文件
			handleChange1(file, fileList) {
				if (fileList.length > 0) {
					this.fileL_pdf1 = [fileList[fileList.length - 1]]
				}
			},
			handleFileSuccess1(res, file) {
				if (res.code == 0) {
					this.reviewForm.cv = res.upurl;
					this.reviewForm.qualifications = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`Remove ${ file.name }？`)
			},
			handleFileError(res, file) {

			},

			handleRemove(file, fileList) {

			},
			handlePreview(file) {
				window.open(file.url);
			},
			handleExceed(files, fileList) {
				this.$message.warning("The current limit is 1 file. Please delete the current file first！");
			},
		}
	};
</script>

<style scoped>
	.join_bth {
		color: #fff;
		text-align: center;
		border-radius: 4px;
		width: 320px;
		height: 50px;
		line-height: 50px;
		background-color: #006699;
		font-size: 20px;
	}

	.consumer {
		text-align: center;
		color: #40485b;
	}

	.consumer .portrait {
		width: 200px;
		height: 200px;
		border-radius: 110px;
		border: 4px solid #EEE;
		margin: 0 auto;
		cursor: pointer;
		position: relative;
	}

	.consumer .portrait .ptmark {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #00000033;
		color: #fff;
		border-radius: 110px;
		font-size: 20px;
		line-height: 208px;
		display: none;
	}

	.consumer .portrait:hover .ptmark {
		display: block;
	}

	.consumer img {
		width: 200px;
		height: 200px;
		border-radius: 110px;
	}

	.consumer>p {}



	.numeric {
		margin-bottom: 50px;
		display: flex;
	}

	.numeric .numerItem {
		width: 50%;
		font-size: 16px;
		text-align: center;
		margin-top: 30px;
	}

	.numeric .numerItem>b {
		color: #066999;
		font-size: 20px;
		margin-bottom: 15px;
		display: block;
	}

	.numeric .numerItem>b:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.numeric .numerItem>p {
		font-size: 14px;
		color: #40485b;
	}

	.exponent h2 {
		font-size: 16px;
		border-bottom: 1px solid #DCE3E8;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	.exponent>div {
		line-height: 25px;
		margin-bottom: 5px;
	}

	.exponent .expTit {
		float: left;
		margin-right: 10px;
		color: #606266;
		font-size: 14px;
	}

	.exponent .expInde {
		float: left;
	}

	.chunking {
		position: relative;
	}

	.chunking .infor_title {
		position: absolute;
		background-color: #fff;
		border: 2px solid rgba(0, 102, 153, 0.15);
		padding: 8px 15px;
		font-size: 15px;
		letter-spacing: -0.5px;
		border-radius: 5px;
		top: -16px;
		left: 50px;
	}

	.chunking .infor_edit {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.chunking .chunkPiece {
		background-color: #f8fbff;
		border: 2px solid rgba(0, 102, 153, 0.15);
		border-radius: 10px;
		padding-top: 40px;
	}

	.chunking .chunkPiece .chunkItem {
		overflow: auto;
		font-size: 14px;
		line-height: 32px;
		margin-bottom: 18px;
	}



	.chunking .chunkPiece .depresBtn {
		cursor: pointer;
		color: #006699;
		font-size: 20px;
		margin-right: 5px;
	}

	.chunking .chunkPiece .depresBtn:hover {
		text-decoration: underline;

	}

	.chunkGrey .infor_title {
		color: #999;
		border: 2px solid rgba(124, 124, 124, 0.15);
	}

	.chunkGrey .chunkPiece {
		background-color: #f9f9f9;
		border: 2px solid rgba(124, 124, 124, 0.15);
	}

	.gugeList {
		font-size: 14px;
		border: 2px dashed #eee;
		cursor: pointer;
		margin: 0 5px 20px 5px;
		padding: 10px 30px 10px 15px;
		position: relative;
	}

	.gugeList:hover {
		background-color: #fdfdfd;
	}

	.gugeList>p {
		margin-bottom: 5px;
		line-height: 20px;
	}

	.gugeList>p>font {
		margin-right: 5px;
		color: #999;
	}

	.gugeList>p>a {
		color: #006699;
	}

	.gugeList>p>a:hover {
		text-decoration: underline;
	}

	.gugeList>b {
		display: none;
	}

	.gugeList>.kuangGeo {
		display: block;
		position: absolute;
		width: 15px;
		height: 15px;
		border: 2px solid #eee;
		top: 10px;
		right: 10px;
	}

	.gugeList.gu_col {
		border: 2px solid #006699;
		background-color: #ebf4f9;
		position: relative;
	}

	.gugeList.gu_col>b {
		display: block;
		position: absolute;
		top: 5px;
		right: 5px;
		color: #069;
		font-weight: 700;
		font-size: 25px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		height: 140px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 140px;
		height: 140px;
		line-height: 140px;
		text-align: center;
	}
</style>
