<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 期刊管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" v-if="pd_role" @click="add_Selection">
					添加</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="title" label="期刊标题"></el-table-column>
				<el-table-column prop="issn" label="issn"></el-table-column>
				<el-table-column label="封面" align="center" width="160">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="IMGdo_Url+'journalicon/'+scope.row.icon"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="realname" label="编辑人员"></el-table-column>
				<el-table-column label="出版周期" width="150" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.cycle=='1'">月刊</span>
						<span v-if="scope.row.cycle=='2'">双月刊</span>
						<span v-if="scope.row.cycle=='3'">季刊</span>
						<span v-if="scope.row.cycle=='4'">连续出版</span>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="权重" width="100" align="center"></el-table-column>
				<el-table-column label="操作" width="300" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-dropdown>
							<span class="el-dropdown-link"
								style="font-size: 12px;margin:0 5px;cursor: pointer;color: #ea9c13;">
								<i class="el-icon-lx-qrcode el-icon--right" style="margin-right: 5px;"></i>更多操作<i
									class="el-icon-arrow-down"></i>
							</span>
							<el-dropdown-menu slot="dropdown" class="topic_dropm">
								<el-dropdown-item>
									<router-link :to="{path:'/joustage',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-read" class="orange colorBtn_topic">分期</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/joutopic',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-favor" class="hispid colorBtn_topic">话题</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/joupaper',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-text" class="scarlet colorBtn_topic">CFP</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/joufotter',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-tag" class="mauve colorBtn_topic">底栏</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/jounotice',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-notice" class="yellow colorBtn_topic">消息</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/jouchain',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-link" class="purple colorBtn_topic">外链</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/jouguest',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-punch" class="grey colorBtn_topic">客座</el-button>
									</router-link>
								</el-dropdown-item>
								<!-- <el-dropdown-item>
									<router-link :to="{path:'/jouboard',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-connection" class="rosered">编委</el-button>
									</router-link>
								</el-dropdown-item> -->
								<el-dropdown-item>
									<router-link :to="{path:'/joutiaxis',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-time" class="blue colorBtn_topic">时间轴</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/jourelant',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-lx-cascades" class="black colorBtn_topic">相关期刊</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/joureport',query: {is_sn: scope.row.issn}}">
										<el-button type="text" icon="el-icon-data-line" class="hispid colorBtn_topic">分析报告</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/jouremail',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-message" class="crimson colorBtn_topic">邮件发送</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="{path:'/jouauthor',query: {top_id: scope.row.journal_id}}">
										<el-button type="text" icon="el-icon-medal" class="sandybrown colorBtn_topic">For Auhtor
										</el-button>
									</router-link>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加" :visible.sync="addVisible" width="800px">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="120px">
				<el-col :span="24">
					<el-form-item label="期刊标题" prop="title">
						<el-input v-model="addForm.title"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="期刊缩写" prop="sx">
						<el-input v-model="addForm.sx" placeholder="eg : TMR"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="期刊简称">
						<el-input v-model="addForm.jabbr"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="finaldecision">
						<el-input v-model="addForm.finaldecision"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="issn" prop="issn" label-width="120px">
						<el-input v-model="addForm.issn"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="editorinchief" prop="editorinchief">
						<el-input v-model="addForm.editorinchief"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="apc" prop="apc" label-width="120px">
						<el-input v-model="addForm.apc"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="submission_url" prop="submission_url">
						<el-input v-model="addForm.submission_url"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="acceptance" label-width="120px">
						<el-input v-model="addForm.acceptance"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="出版周期" prop="cycle">
						<el-select v-model="addForm.cycle" placeholder="请选择出版周期">
							<el-option label="月刊" value="1"></el-option>
							<el-option label="双月刊" value="2"></el-option>
							<el-option label="季刊" value="3"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="13">
					<el-form-item label="单刊文章数量" label-width="120px" prop="art_num">
						<el-input-number v-model="addForm.art_num" :min="0" style="width: 200px;"></el-input-number>
					</el-form-item>
				</el-col>
				<el-row>
					<el-col :span="11">
						<el-form-item label="编委会地址" label-width="120px" prop="board_url">
							<el-input v-model="addForm.board_url"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<el-form-item label="分期封面显示" prop="topic_show_type">
							<el-radio-group v-model="addForm.topic_show_type">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-col :span="24">
					<el-form-item label="简介" label-width="120px" prop="abstract">
						<el-input v-model="addForm.abstract" type="textarea" rows="4"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="编辑人员" prop="editor_id">
						<el-select v-model="addForm.editor_id" filterable placeholder="请选择">
							<el-option v-for="item in options" :key="item.admin_id" :label="item.account"
								:value="item.admin_id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="颜色" prop="system_color">
						<el-color-picker v-model="addForm.system_color" @change="sysColor"></el-color-picker>
					</el-form-item>
					<el-form-item label="权重">
						<el-input-number v-model="addForm.sort" :min="0"></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="封面" label-width="80px">
						<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_file'"
							:show-file-list="false" name="journalicon" :on-success="handleAvatarSuccess"
							:on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="缩略图" label-width="60px">
						<el-upload class="avatar-uploader_small" :action="IMGup_Url+'master/Journal/up_file'"
							:show-file-list="false" name="journalicon" :on-success="handleAvatarSuccess_"
							:on-error="handleAvatarError_" :before-upload="beforeAvatarUpload_">
							<img v-if="imageUrl_" :src="imageUrl_" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false;">取 消</el-button>
				<el-button type="primary" @click="saveAdd(addForm)">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="800px">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="120px">
				
				<el-row>
					<el-col :span="24">
						<el-form-item label="期刊标题" prop="title">
							<el-input v-model="editForm.title"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="11">
						<el-form-item label="期刊缩写" prop="sx">
							<el-input v-model="editForm.sx" placeholder="eg : TMR"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<el-form-item label="期刊简称">
							<el-input v-model="editForm.jabbr"></el-input>
						</el-form-item>
						<!-- 	<el-form-item label="当期">
							<el-select v-model="editForm.publish_stage_id" filterable placeholder="请选择">
								<el-option key="0" label="无" value="0"></el-option>
								<el-option v-for="item in optionx" :key="item.journal_stage_id" :label="item.stage_year+' Vol.'+item.stage_vol+' Issue.'+item.stage_no+' '+item.stage_pagename+item.stage_page"
								 :value="item.journal_stage_id">
								</el-option>
							</el-select>
						</el-form-item> -->
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="11">
						<el-form-item label="finaldecision">
							<el-input v-model="editForm.finaldecision"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<el-form-item label="issn" prop="issn" label-width="120px">
							<el-input v-model="editForm.issn"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="11">
						<el-form-item label="editorinchief" prop="editorinchief">
							<el-input v-model="editForm.editorinchief"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<el-form-item label="apc" prop="apc" label-width="120px">
							<el-input v-model="editForm.apc"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="11">
						<el-form-item label="submission_url" prop="submission_url">
							<el-input v-model="editForm.submission_url"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<el-form-item label="acceptance" label-width="120px">
							<el-input v-model="editForm.acceptance"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="11">
						<el-form-item label="出版周期" prop="cycle">
							<el-select v-model="editForm.cycle" placeholder="请选择出版周期" :disabled="cy_role">
								<el-option label="月刊" :value="1"></el-option>
								<el-option label="双月刊" :value="2"></el-option>
								<el-option label="季刊" :value="3"></el-option>
								<el-option label="连续出版" :value="4"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<el-form-item label="单刊文章数量" label-width="120px" prop="art_num">
							<el-input-number v-model="editForm.art_num" :min="0" style="width: 200px;">
							</el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="11">
						<el-form-item label="编委会地址" prop="board_url">
							<el-input v-model="editForm.board_url"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="分期封面显示" prop="topic_show_type">
							<el-radio-group v-model="editForm.topic_show_type">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="24">
						<el-form-item label="简介" label-width="120px" prop="abstract">
							<el-input v-model="editForm.abstract" type="textarea" rows="4"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="编辑人员" prop="editor_id">
							<el-select v-model="editForm.editor_id" filterable placeholder="请选择">
								<el-option v-for="item in options" :key="item.admin_id" :label="item.account"
									:value="item.admin_id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="颜色" prop="system_color">
							<el-color-picker v-model="editForm.system_color" @change="sysColor"></el-color-picker>
						</el-form-item>
						<el-form-item label="权重">
							<el-input-number v-model="editForm.sort" :min="0"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="封面" label-width="80px">
							<el-upload class="avatar-uploader" :action="IMGup_Url+'master/Journal/up_file'"
								:show-file-list="false" name="journalicon" :on-success="handleEditSuccess"
								:on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="缩略图" label-width="60px">
							<el-upload class="avatar-uploader_small" :action="IMGup_Url+'master/Journal/up_file'"
								:show-file-list="false" name="journalicon" :on-success="handleEditSuccess_"
								:on-error="handleAvatarError_" :before-upload="beforeAvatarUpload_">
								<img v-if="imageUrl_" :src="imageUrl_" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addForm: {
					jabbr: '',
					finaldecision: '',
					acceptance: '',
					sort: 0,
					topic_show_type: 0,
					system_color: '#409EFF'
				},
				tableData: [],
				pd_role: true,
				cy_role: false,
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				imageUrl: '',
				imageUrl_: '',
				editVisible: false,
				addVisible: false,
				aid: -1,
				editForm: {},
				idx: -1,
				id: -1,
				options: [],
				optionx: [],
				editor_id: '',
				rules: {
					title: [{
						required: true,
						message: '请输入文章标题',
						trigger: 'blur'
					}],
					issn: [{
						required: true,
						message: '请输入issn',
						trigger: 'blur'
					}],
					sx: [{
						required: true,
						message: '请输入期刊缩写',
						trigger: 'blur'
					}],
					acceptance: [{
						required: true,
						message: '请输入acceptance',
						trigger: 'blur'
					}],
					finaldecision: [{
						required: true,
						message: '请输入finaldecision',
						trigger: 'blur'
					}],
					apc: [{
						required: true,
						message: '请输入apc',
						trigger: 'blur'
					}],
					abstract: [{
						required: true,
						message: '请输入简介',
						trigger: 'blur'
					}],
					board_url: [{
						required: true,
						message: '请输入编委会地址',
						trigger: 'blur'
					}],
					topic_show_type: [{
						required: true,
						message: '请选择是否有分期封面',
						trigger: 'blur'
					}],
					system_color: [{
						required: true,
						message: '请输入system_color',
						trigger: 'blur'
					}],
					submission_url: [{
						required: true,
						message: '请输入submission_url',
						trigger: 'blur'
					}],
					editorinchief: [{
						required: true,
						message: '请输入editorinchief',
						trigger: 'blur'
					}],
					publish_stage_id: [{
						required: true,
						message: '请选择推广期刊',
						trigger: 'blur'
					}],
					editor_id: [{
						required: true,
						message: '请选择编辑人员',
						trigger: 'blur'
					}],
					cycle: [{
						required: true,
						message: '请选择出版周期',
						trigger: 'blur'
					}],
					art_num: [{
						required: true,
						message: '请输入单刊文章数量',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			// 获取期刊列表数据
			getData() {
				if (localStorage.getItem('admin_role') == "1") {
					this.pd_role = false;
					this.cy_role = true;
				} else {
					this.pd_role = true;
					this.cy_role = false;
				}
				this.$api
					.post('master/Journal/getJournalList', {
						'editor_id': localStorage.getItem('admin_id')
					})
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.journalList;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			//获取编辑人员列表数据
			getEditor() {
				this.$api
					.post('master/Journal/getEditorList')
					.then(res => {
						if (res.code == 0) {
							this.options = res.data.editorList;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 添加操作
			add_Selection(index, row) {
				this.aid = index;
				this.addVisible = true;
				this.getEditor();
				this.imageUrl = "";
			},
			// 保存添加
			saveAdd(addForm) {
				if (this.addForm.icon == undefined) {
					this.$message.error("请插入封面");
				} else {
					this.$refs.add_Form.validate((valid) => {
						if (valid) {
							this.$api
								.post('master/Journal/addJournal', this.addForm)
								.then(res => {
									if (res.code == 0) {
										this.addVisible = false;
										this.$refs.add_Form.resetFields();
										this.$message.success(`添加成功`);
										this.addForm.sort = 0;
										this.imageUrl = "";
										this.getData();
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
								});
						} else {
							this.$message.error('error submit!!');
							return false;
						}
					});
				}
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Journal/delJournal', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.editForm = Object.assign({}, row);
				this.editVisible = true;
				this.getEditor();
				this.imageUrl = this.IMGdo_Url + 'journalicon/' + row.icon;

				if (row.publish_stage_id == '0') {
					this.editForm.publish_stage_id = ''
				}

				this.$api
					.post('master/Journal/getStageList', {
						'journal_id': row.journal_id
					})
					.then(res => {
						if (res.code == 0) {
							this.optionx = res.data.stage_list;

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},
			// 保存编辑
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Journal/editJournalDetail', this.editForm)
							.then(res => {
								if (res.code == 0) {
									this.editVisible = false;
									this.$message.success(`更改第 ${this.idx + 1} 行成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			//选择颜色
			sysColor(val) {
				this.addForm.system_color = val;
			},
			//上传图片
			handleAvatarSuccess(res, file) {
				if (res.code == 0) {
					this.addForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			handleEditSuccess(res, file) {
				if (res.code == 0) {
					this.editForm.icon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl = 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('图片大小不能超过 1M!');
				}
				return isLt2M;
			},
			//上传缩略图
			handleAvatarSuccess_(res, file) {
				if (res.code == 0) {
					this.addForm.licon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl_ = URL.createObjectURL(file.raw);
			},
			handleEditSuccess_(res, file) {
				if (res.code == 0) {
					this.editForm.licon = res.upurl;
				} else {
					this.$message.error(res.msg);
				}
				this.imageUrl_ = URL.createObjectURL(file.raw);
			},
			handleAvatarError_(res, file) {
				// this.$message.error(res);
			},
			beforeAvatarUpload_(file) {
				const isLt2M_ = file.size / 1024 / 1024 < 0.049;
				if (!isLt2M_) {
					this.$message.error('图片大小不能超过 50k!');
				}
				return isLt2M_;
			}
		},
	};
</script>

<style>
	.handle-box {
		margin-bottom: 20px;
	}

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

	.avatar-uploader_small {
		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;
	}

	.avatar-uploader_small .el-upload {
		width: 80px;
		height: 80px;
	}

	.avatar-uploader_small .avatar-uploader-icon {
		line-height: 80px;
		margin-left: -30px;
	}

	.avatar {
		width: 140px;
		height: 140px;
		display: block;
	}

	.el-dialog__body {
		padding: 30px 20px 5px 20px;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}
	
	.topic_dropm li{
		padding: 0 !important;
	}
	
	.topic_dropm li a{
		line-height: 35px;
		padding: 0 16px 0 12px;
		display: block;
	}

	.scarlet {
		color: #ab54c1;
	}

	.mauve {
		color: #d8ba2a;
	}

	.yellow {
		color: #0fa0a3;
	}

	.red {
		color: #ff0000;
	}

	.hispid {
		color: #0fa31d;
	}

	.orange {
		color: #e6a23c;
	}

	.purple {
		color: #8b63f9;
	}

	.grey {
		color: #95aa30;
	}

	.rosered {
		color: #aa3077;
	}

	.black {
		color: #c27031;
	}

	.blue {
		color: #31a5c2;
	}

	.hispid {
		color: #1b7307;
	}

	.crimson {
		color: #d71c1c;
	}

	.sandybrown {
		color: #cd7021;
	}
	
	.colorBtn_topic{
		width: 100%;
		text-align: left;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 50px;
		height: 65px;
	}
</style>
