xy-file/src/renderer/components/home.vue

<template>
	<div>
		<el-container style="height: 100vh;">	
			<el-header height="45px" style="user-select: none; background-color: #fafafa; padding: 0 10px;">
				<soft-header ref="headerRef" @update-soft="updateSoft()" @export-file="exportFile"></soft-header>
			</el-header>
			<el-main ref="el-main" style="background-color: #fafafa; position: relative;">

				<div class="content-top">
					<el-row>
						<el-button type="primary" size="small" @click="pickDir()">添加文件路径</el-button>
						<el-input readonly ref="search-input" size="small" placeholder="搜索目录路径" v-model="searchDir" style="width:400px;" prefix-icon="el-icon-folder"></el-input>
						<el-checkbox v-model="subFolder" size="mini">搜索多级子文件夹</el-checkbox>
					</el-row>
					
					<el-row type="flex" style="align-items: center;">
						<el-button type="info" size="small" style="margin-left: 20px;" @click="clearList()">重置</el-button>
					</el-row>
				</div>
				
				<div class="soft-content">
					<!-- 设置区域 -->
					<div class="content-right">
						
						<div class="handle-item">
							<b>检索方式：</b>
							<el-select size="mini" style="width: 160px;" v-model="findType" placeholder="请选择检索方式">
								<el-option value="1" label="按文件名检索"></el-option>
								<el-option value="2" label="按创建时间检索"></el-option>
								<el-option value="3" label="按修改时间检索"></el-option>
							</el-select>
						</div>
						
						<template v-if="findType == '1'">
							<div class="handle-item" style="margin-bottom: 5px;">
								<p><b>文件名检索清单：</b><span style="color: #F56C6C; font-size: 12px;">(一行填一个,首尾空格清除)</span></p>
							</div>
							<el-input class="find-textarea" type="textarea" placeholder="查找文件名清单,多个请换行显示:
							名称1
							名称2
							名称3" v-model="handleData.findText"></el-input>
						</template>
						<template v-else>
							<div class="handle-item">
								<b>开始时间：</b>
								<el-date-picker type="datetime" v-model="handleData.startTime" placeholder="开始时间" style="width:160px;" size="mini"></el-date-picker>
							</div>
							<div class="handle-item">
								<b>结束时间：</b>
								<el-date-picker type="datetime" v-model="handleData.endTime" placeholder="结束时间" style="width:160px;" size="mini"></el-date-picker>
							</div>
							<div class="find-textarea" style="height: calc(100% - 258px);">
								
							</div>
						</template>
						
						<div style="position: relative; margin: 10px 0;">
							<el-button type="danger" size="mini" style="position: absolute; right: 0; top: 0;" :loading="searchLoading" @click="search()">搜索</el-button>
							<div style="padding: 10px; font-weight: 600;">检索方式：</div>
							<el-radio-group class="line-radio" v-model="handleData.rule" size="small">
								<el-radio label="1">精确(文件名相同)</el-radio>
								<el-radio label="2">模糊(包含文件名)</el-radio>
								<el-radio label="3">精确到格式(文件名和格式都相同)</el-radio>
							</el-radio-group>
						</div>
					</div>
					
					<div class="content-left" v-loading="searchLoading">
						<div class="handle-item" style="margin-bottom: 5px; display: flex; flex-wrap: nowrap; justify-content: space-between;">
							<p>
								<b>文件名检索结果：</b>
								<span style="color: #F56C6C; font-size: 12px;" >共有 {{fileList.length}} 个文件，搜索耗时 {{times / 1000}} 秒</span>
							</p>
							
							<el-button size="mini" :disabled="fileList.length == 0" title="检索结果导出到excel表格中" :loading="xlsxLoading" @click="exportXlsx()">导出检索结果</el-button>
						</div>
						<div class="table-scroll">
							<vxe-table ref="xTable" :column-config="{resizable: true}" size="mini"
								show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :loading="tabLoading"
								:loading-config="{icon: 'vxe-icon-indicator roll', text: '任务处理中...'}" :row-config="{isHover: true}"
								:edit-config="{trigger: 'click', mode: 'cell'}" :data="fileList" :scroll-y="{enabled: true}">
								<vxe-column type="seq" width="60" title="编号" align="center"></vxe-column>
								<vxe-column field="match" title="匹配词" width="150" min-width="120" align="center"></vxe-column>
								<vxe-column field="path" title="文件位置/名称">
									<template #default="{ row }">
										<img v-if="row.isDirectory" src="../assets/image/folder.png" style="width: 20px; vertical-align: middle;"/>
										<img v-else src="../assets/image/file.png" style="width: 20px; vertical-align: middle;"/>
										<span>{{row.path}}</span>
									</template>
								</vxe-column>
								<vxe-column field="status" title="操作" width="50" min-width="50" max-width="50" align="center">
									<template #default="{ rowIndex }">
										<el-link type="warning" @click="delFile(rowIndex)" style="font-size: 12px;">忽略</el-link>
									</template>
								</vxe-column>
								<vxe-column field="status" title="状态" width="80" max-width="80" min-width="80" align="center">
									<template #default="{ row }">
										<template v-if="row.status == '1'">
											<!-- <i class="el-icon-info" style="font-size: 13px; color: #999;"></i> -->
											<span style="font-size: 12px;">待操作</span>
										</template>
										<template v-if="row.status == '2'">
											<!-- <i class="el-icon-success" style="font-size: 12px; color: #19be6b;"></i> -->
											<span style="font-size: 12px;color: #19be6b;">复制成功</span>
										</template>
										<template v-if="row.status == '3'">
											<!-- <i class="el-icon-success" style="font-size: 12px; color: #19be6b;"></i> -->
											<span style="font-size: 12px;color: #19be6b;">剪切成功</span>
										</template>
										<template v-if="row.status == '4'">
											<!-- <i class="el-icon-success" style="font-size: 12px; color: #19be6b;"></i> -->
											<span style="font-size: 12px;color: #19be6b;">删除成功</span>
										</template>
										<template v-if="row.status == '5'">
											<!-- <i class="el-icon-success" style="font-size: 12px; color: #19be6b;"></i> -->
											<span style="font-size: 12px;color: #19be6b;">覆盖成功</span>
										</template>
										<template v-if="row.status == '6'">
											<!-- <i class="el-icon-error" style="font-size: 12px; color: #ed4014;"></i> -->
											<span style="font-size: 12px;color: #ed4014;">处理失败</span>
										</template>
										<template v-if="row.status == '7'">
											<!-- <i class="el-icon-error" style="font-size: 12px; color: #ed4014;"></i> -->
											<span style="font-size: 12px;color: #ed4014;">覆盖失败</span>
										</template>
									</template>
								</vxe-column>
							</vxe-table>
						</div>
						
						<div style="position: relative; margin-top: 20px;">
							<div class="handle-item" v-if="handleData.type != '4'">
								<label class="handle-label">存储位置：</label>
								<el-input :title="downloadDir" ref="upload-input" readonly size="small" placeholder="选择存储位置" v-model="downloadDir" style="width:291px;" prefix-icon="el-icon-folder"></el-input>
								<el-button type="primary" size="small" slot="reference"  @click="pickPath()">选择</el-button>
								<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开存储位置">
									<!-- <i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i> -->
									<el-button type="primary" size="small" slot="reference"  @click="openFolder()">打开</el-button>
								</el-popover>
								<el-checkbox style="margin-left: 20px;" v-model="macthWords" size="mini">匹配词分类存储</el-checkbox>
							</div>
							<div class="handle-item" v-if="handleData.type == '4'">
								<label class="handle-label">覆盖文件：</label>
								<el-input :title="coverFile" ref="cover-input" size="small" @focus="pickFile" placeholder="点击选择覆盖文件" v-model="coverFile" readonly style="width:300px;" prefix-icon="el-icon-document"></el-input>
								<el-link :underline="false" type="info" style="font-size: 12px;"> （覆盖文件的名称格式需和搜索结果保持一致，否则将无法覆盖）</el-link>
							</div>
							<div class="handle-item">
								<label class="handle-label">操作方式：</label>
								<el-radio-group v-model="handleData.type" size="small">
									<el-radio label="1" border>复制</el-radio>
									<el-radio label="2" border>剪切</el-radio>
									<el-radio label="3" border>删除</el-radio>
									<el-radio label="4" border>覆盖</el-radio>
								</el-radio-group>
							</div>
							<div class="handle-item">
								<label v-if="handleData.type != '1'" class="handle-label"><el-link icon="el-icon-warning" :underline="false" type="danger"></el-link></label>
								<el-link style="font-weight: 600;" v-if="handleData.type == '2'" :underline="false" type="danger">当前为"剪切"操作，剪切后文件无法恢复原来位置，您可以做好备份后操作。</el-link>
								<el-link style="font-weight: 600;" v-if="handleData.type == '3'" :underline="false" type="danger">当前为"删除"操作，删除后文件无法恢复原来位置，您可以做好备份后操作。</el-link>
								<el-link style="font-weight: 600;" v-if="handleData.type == '4'" :underline="false" type="danger">当前为"覆盖"操作，覆盖后原文件将无法恢复，您可以做好备份后操作。</el-link>
							</div>
							
							<el-button type="danger" style="position: absolute; top: 40px; right: 10px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
						</div>
					</div>
				</div>
				
			</el-main>
			<el-footer height="48px">
				<!-- 更新 -->
				<soft-update ref="updateRef" :showDowload="dowloadModel"
					:dowloadFinish="finishModel"></soft-update>
			</el-footer>

		</el-container>
	</div>
</template>

<script>
import os from 'os';
import fs from 'fs';
import path from 'path';
import electronApi from '@/utils/electronApi';
import softUpdate from './update.vue';
import softHeader from './header.vue';
import pjson from '/package.json';
import fse from 'fs-extra';
const fg = require('fast-glob');
import xlsx from 'node-xlsx';
import { v4 as uuidv4 } from 'uuid';

let separator = '';
if (os.platform == 'linux') {
	separator = '/'
} else {
	separator = '\\'
}

export default {
	name: 'landing-page',
	components: {
		softUpdate,
		softHeader
	},
	data() {
	    return {
			imgUrl: this.$api.imgUrl,
			menuIndex: '1', // 重命名类型 1 or 2
			fileList: [], // 文件列表
			downloadDir: '', //os.userInfo().homedir + separator + "Downloads",
			searchDir:  '', //'D:\\桌面\\images',
			coverFile: '',
			handleData: {
				type: '1',
				rule: '1',
				findText: '',
				startTime: '',
				endTime: '',
			},
			findType: '1',
			exportLoading: false,
			searchLoading: false,
			tabLoading: false,
			times: 0,
			subFolder: true,
			macthWords: false,
			
	        dowloadModel: false,
			finishModel: false,
			loadingModal: false,
			
			execlimit: 5,
			xlsxLoading: false,
	    };
	},
	mounted() {
		this.$refs.updateRef.updateSoft(true);
		
		let __dirname = os.userInfo().homedir;
		if(fs.existsSync(__dirname + separator + "Desktop")){
			this.handleData.newPath = __dirname + separator + "Desktop"
		} else{
			this.handleData.newPath = __dirname + separator + "Downloads"
		}
		
	    // 打开浏览器
	    const { shell } = require('electron');
	    const links = document.querySelectorAll('a[href]');
	    links.forEach(link => {
	        link.addEventListener('click', e => {
	            const url = link.getAttribute('href');
	            e.preventDefault();
	            shell.openExternal(url);
	        });
		});
		
		this.loadingModal = true;
	},
	methods: {
		// 选择导出目录
		pickPath() {
			this.$refs['upload-input'].blur();
			electronApi.call('pickDir', []).then((path) => {
				if (path) {
					this.downloadDir = path;
				}
			});
		},
		// 选择搜索目录
		async pickDir(){
			const spinLoad = this.$loading();
			await electronApi.call('pickDir', []).then((path) =>{
				if(path){
					this.searchDir = path;
				}
				spinLoad.close();
			}).catch(err => {
				spinLoad.close();
			});
		},
		// 打开自定义目录
		openFolder(){
			let path = this.downloadDir;
			electronApi.call('showItemInfolder',[path+'\\tty.tty'])
		},
		// 清除列表
		clearList() {
			this.$confirm('确认重置参数并清空搜索结果?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.searchDir = '';
				this.handleData = {
					type: '1',
					rule: '1',
					findText: '',
				};
				this.fileList = [];
			}).catch(() => {
					  
			});
		},
		// 忽略文件
		delFile(rowIndex){
			this.fileList.splice(rowIndex, 1);
		},
		async pickFile(){
			this.$refs['cover-input'].blur();
			const spinLoad = this.$loading();
			await electronApi.call('pickFile', ['*', false]).then(async(files) =>{
				if(files.length > 0){
					this.coverFile = files[0];
				}
				spinLoad.close();
			}).catch(err => {
				spinLoad.close();
			});
		},
		// 软件更新
		updateSoft(){
			this.$refs.updateRef.updateSoft();
		},
		// 开通会员
		openVip(){
			this.$refs.headerRef.openVip();
		},
		// 搜索
		search(){
			if(!this.searchDir){
				this.$message({message: '请先选择搜索目录' , type: 'error'});
				return false;
			}
			if(!this.handleData.findText && this.findType == '1'){
				this.$message({message: '请输入要查找的文件搜索清单' , type: 'error'});
				return false;
			}
			if(this.findType != '1' && !this.handleData.startTime && !this.handleData.endTime){ // 根据时间搜索
				this.$message({message: '请选择搜索的时间范围' , type: 'error'});
				return false;
			}
			
			(async () => {
				let startTime = new Date().getTime();
				this.searchLoading = true;
				setTimeout(() => {
					this.searchLoading = false;
				}, 2000)
				let findText = this.handleData.findText.split('\n');
				let searchDir = this.searchDir.replace(/\\/g, '/');
				let paramArr = []; // 匹配规则1
				let paramArr2 = []; // 匹配规则2 - 文件名称中带.
				for(let i=0; i< findText.length; i++){
					if(findText[i].trim()){
						if(findText[i].indexOf('.') > -1){
							paramArr2.push(this.filterReg(findText[i].trim()));
						}else{
							paramArr.push(this.filterReg(findText[i].trim()));
						}
						
					}
				}
				let params = paramArr.join(',');
				let params2 = paramArr2.join(',');
				let ruleStr = [];
				let subStr = '/';
				if(this.subFolder){ // 是否匹配子文件夹内文件
					subStr = '/**/'
				}
				switch(this.handleData.rule){
					case '1': //相同文件名
						if(paramArr.length > 0){
							ruleStr.push(searchDir + subStr + '{' + params + ',<}?(.[!.]+)');
						}
						if(paramArr2.length > 0){
							ruleStr.push(searchDir + subStr + '{' + params2 + ',<}.[!.]+');
						}
						break;
					case '2': //包含文件名
						if(paramArr.length > 0){
							ruleStr.push(searchDir + subStr + '*{' + params + ',<}*.[!.]+');
							ruleStr.push(searchDir + subStr + '{' + params + ',<}');
							ruleStr.push(searchDir + subStr + '[!.]+{' + params + ',<}');
							ruleStr.push(searchDir + subStr + '{' + params + ',<}[!.]+');
							ruleStr.push(searchDir + subStr + '[!.]+{' + params + ',<}[!.]+');
						}
						if(paramArr2.length > 0){
							ruleStr.push(searchDir + subStr + '*{' + params2 + ',<}*.[!.]+');
						}
						break;
					case '3': //文件名格式相同
						if(paramArr.length > 0){
							ruleStr.push(searchDir + subStr + '{' + params + ',<}');
						}
						if(paramArr2.length > 0){
							ruleStr.push(searchDir + subStr + '{' + params2 + ',<}');
						}
						break;
				}
				console.log('----验证规则----', ruleStr);
				try{
					const files = await fg(ruleStr, { dot: true, onlyFiles:true, objectMode: true,markDirectories: true});
					let regExp = new RegExp(paramArr.join('|'));
					let regExp2 = new RegExp(paramArr2.join('|'));
					this.fileList = [];
					files.map(item => {
						let isDirectory = item.dirent.isDirectory();
						let filename = item.name;//item.substr(item.lastIndexOf('/')+1);
						let title = filename.substr(0, filename.lastIndexOf('.'));
						let suffix = filename.substr(filename.lastIndexOf('.'));
						if(filename.indexOf('.') < 0){
							title = filename;
							suffix = '';
						}
						let res = regExp.exec(filename);
						if(!res){
							res = regExp2.exec(filename);
						}
						this.fileList.push({
							title: title,
							isDirectory: isDirectory,
							suffix: suffix, // 带.
							name: filename,
							match: res,
							path: item.path,
							status: '1'
						});
					});
					this.searchLoading = false;
					let endTime = new Date().getTime();
					this.times = endTime - startTime;
					// console.log('----查找结果----', files);
				}catch(e){
					this.showError(e);
				}
				
			})();
			
		},
		// 导出检索结果
		exportXlsx(){
			this.xlsxLoading = true;
			let filename = '文件检索结果' + new Date().getTime() +'.xlsx';
			let sheet1 = [['编号','匹配词','文件位置/名称','类型']];
			let sheet2 = [];
			
			let findText = this.handleData.findText.split('\n');
			for(let i = 0; i < this.fileList.length; i++){
				let item = this.fileList[i];
				let info = [i+1, item.match, item.path, item.isDirectory ? '文件夹' : '文件'];
				sheet1.push(info);
				
				if(findText.indexOf(item.match[0]) > -1){ // 匹配到了
					let removeIndex = findText.indexOf(item.match[0]);
					findText.splice(removeIndex, 1);
				}
			}
			findText.map(fitem => {
				sheet2.push([fitem]);
			})
			
			let buffer = xlsx.build([
				{
					name: '检索成功',
					data: sheet1
				},
				{
					name: '未检索',
					data: sheet2
				}
			]);
			fs.writeFileSync(this.handleData.newPath + separator + filename, buffer, {'flag':'w'});
			this.xlsxLoading = false;
			this.$message({message: '文件导出成功！', type: 'success'});
			electronApi.call('showItemInfolder',[this.handleData.newPath + separator + filename])
		},
		// 导出
	    exportFile(flag) {
			let authority = this.$refs.headerRef.authority;
			if (this.fileList.length > 0) {
	            if (!authority.isAuthority && !flag) { // 非会员点击转换弹出提示框
					this.$refs.headerRef.memberModel = true;
					this.$refs.headerRef.isClick = true;
					return false;
				} else {
					this.$refs.headerRef.memberModel = false;
				}
				this.exportLoading = true;
				setTimeout(() => {
					this.exportLoading = false;
				}, 3000);
				
				let size = 999999999;
				if(!authority.isAuthority){
					size = this.execlimit;
				}
				
				if(this.handleData.type != '4' && !this.downloadDir){
					this.$notify.error({
						title: '提示',
						message: '请选择文件存储位置后再操作！'
					});
					return false;
				}
				let newPath = this.downloadDir;
				
				if(this.handleData.type == '4' && !this.coverFile){
					this.$notify.error({
						title: '提示',
						message: '请选择覆盖文件后再操作！'
					});
					return false;
				}
				
				this.tabLoading = true;
				
				setTimeout(() => {
					for(let i = 0; i < this.fileList.length; i++){
						if(i < size){
							let item = this.fileList[i];
							let middlePath = separator;
							if(this.macthWords){
								middlePath = separator + item.match + separator;
								try{
									fse.ensureDirSync(newPath + separator + item.match);
								}catch(e){
									let str = e.toString();
									if(str.indexOf('already exists') > -1 && str.indexOf(item.match) > -1){
										this.$notify.error({
											title: '提示',
											message: '无法创建目录'+newPath + separator + item.match+',因为同名文件或目录已存在！'
										});
										this.tabLoading = false;
										return false;
									}
								}
								
							}
							let newFilePath = newPath + middlePath + item.name;
							try {
								if(this.handleData.type == '1'){ // 复制
									try{
										fse.copySync(item.path, newFilePath, { overwrite: false, errorOnExist: true });
										item.status = '2';
									}catch(e){
										let str = e.toString();
										if(str.indexOf('already exists') > -1 && str.indexOf(item.name) > -1){
											newFilePath = newPath + middlePath + item.title + '重复文件' + uuidv4().substr(0, 18) + i.toString() + item.suffix;
											fse.copy(item.path, newFilePath).then(() => {
												item.status = '2';
											}).catch(err => {
												item.status = '6';
											})
										}
									}
								}
								
								if(this.handleData.type == '2'){ // 剪切
									try{
										fse.moveSync(item.path, newFilePath);
										item.status = '3'
									}catch(e){
										let str = e.toString();
										if(str.indexOf('already exists') > -1){
											newFilePath = newPath + middlePath + item.title + '重复文件' + uuidv4().substr(0, 18) + i.toString() + item.suffix;
											fse.move(item.path, newFilePath).then(() => {
												item.status = '3';
											}).catch(err => {
												item.status = '6';
											})
										}
									}
								}
								
								if(this.handleData.type == '3'){ // 删除
									//异步
									fse.remove(item.path).then(() => {
										item.status = '4';
									}).catch(err => {
										item.status = '6';
									})
								}
								
								if(this.handleData.type == '4'){ // 覆盖
									let filename = this.coverFile.substr(this.coverFile.lastIndexOf('\\')+1);
									if(filename == item.name){
										fse.copy(this.coverFile, item.path).then(() => {
											item.status = '5';
										}).catch(err => {
											item.status = '7';
										})
									}else{
										item.status = '7';
									}
									
								}
								
							} catch (err) {
								console.error(err);
								item.status = '6';
							}
							
							this.nums++;
						}
					}
					
					setTimeout(() => {
						this.tabLoading = false;
					}, 500)
					
				}, 100);
				
			}
	    },
		
		// 是否包含特殊字符
		containsAnyChar(str, charsArray) {
		    for (let i = 0; i < charsArray.length; i++) {  
		        if (str.includes(charsArray[i])) {  
		            return true;
		        }  
		    }  
		    return false; 
		},
		// 处理正则表达式特殊字符
		filterReg(data){
			// let specialChar = ["$", "(", ")", "+", ".", "[", "^", "{", "|"]; // 特殊字符 正则匹配
			let specialChar2 = ["$", "(", ")", "^", "*", "+", "?", "[", "]", '|', '/', '\\', ',']; // 特殊字符 正则匹配
			let regStr = '';
			let expArr = data.split('');
			expArr.map(item => {
				if(specialChar2.indexOf(item) > -1){
					item = '\\' + item;
				}
				regStr += item;
			})
			
			return regStr;
		},
		
		// 错误提示
		showError(e){
			let str = e.toString().substr(0, 100);
			this.loading = false;
			this.$notify.error({
				title: '提示',
				message: str
			});
		},
		
	}
	
};
</script>
<style lang="scss">
	@import "../assets/css/fontx/iconfont.css";
	@import "../assets/css/home.scss";

	.ivu-input-number-controls-outside-btn i {
		font-weight: 800;
	}

	.update-point {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background: #ff0000;
		top: 14px;
		position: absolute;
		left: -13px;
	}

	.menu-item {
		padding: 8px 0;
		font-size: 14px;

		.iconfont {
			font-size: 32px;
		}

		&:hover,
		&.active {
			color: #ed4014;
		}
	}

	.ivu-progress-show-info .ivu-progress-outer {
		padding-right: 40px !important;
		margin-right: -40px !important;
	}

	.tips {
		text-align: center;
		padding: 10px 0;
		color: #ed4014;
		font-size: 12px;
	}

	.handle-desc {
		display: inline-block;
		width: calc(100% - 100px);
		overflow: hidden;
	}

	.ivu-menu-submenu-title {
		font-weight: 600;
	}

	.ivu-menu .ivu-menu-item {
		line-height: 1;
	}

	// new-el
	.el-menu {
		border-right: none !important;
	}

	.cmenu-item {
		margin-bottom: 30px;

		.cmenu-title {
			font-size: 18px;
			font-weight: 600;
			padding-bottom: 20px;
		}

		.citem-nav {
			text-align: center;
			border-radius: 10px;
			min-height: 110px;
			padding: 25px 0;
			background-color: #fff;
			font-size: 15px;
			cursor: pointer;
			box-shadow: 3px 3px 6px #ccc, -3px -3px 6px #ccc;
			border: 1px solid #ffffff00;

			&:hover {
				transform: scale(1.02);
				border: 1px solid #2F74FF;
			}

			.citem-img {
				width: 55%;
				margin-bottom: 20px;
			}
			
			.citem-name{
				font-size: 22px;
				font-weight: 600;
				padding-bottom: 10px;
			}
		}
		
		.citem-nav2{
			text-align: center;
			border-radius: 10px;
			min-height: 110px;
			padding: 25px 0;
			font-size: 15px;
			box-shadow: 3px 3px 6px #ccc, -3px -3px 6px #ccc;
			
			.citem-img {
				width: 55%;
				margin-bottom: 20px;
			}
			
			.citem-name{
				font-size: 22px;
				font-weight: 600;
				color: #999;
				padding-bottom: 10px;
			}
		}
	}
	
	.popper-open{
		text-align: center !important;
		padding: 10px !important;
		background: #303133 !important;
		color: #fff !important;
		min-width: 120px !important;
	}
	
	.popper-open[x-placement^=bottom] .popper__arrow::after{
		border-bottom-color: #303133 !important;
	}
	
	.popper-open[x-placement^=left] .popper__arrow::after{
		border-left-color: #303133 !important;
	}
	
	.el-tabs__header{
		margin-bottom: 0 !important;
	}
	.el-tabs__item{
		padding: 0 13px !important;
	}
	
	.sort-btn{
		padding: 7px !important;
	}
	
	.upload-img{
		width: 220px;
	}
	
	.el-tabs__item.is-active{
		color: #F56C6C !important;
	}
	
	.el-tabs__active-bar{
		background-color: #F56C6C !important;
	}
	
	.el-tabs__item:hover{
		color: #F56C6C !important;
	}
	
	.el-input__inner{
		padding: 0 10px !important;
	}
	
	.el-input--prefix .el-input__inner{
		padding-left: 30px !important;
	}
	
	.el-divider__text{
		font-weight: 800 !important;
	}
	
	.el-input-number .el-input__inner{
		text-align: left !important;
	}
	
	.el-time-panel{
		left: -25px !important;
	}
	
	.icon-back{
		font-size: 26px;
		font-weight: 600 !important;
		vertical-align: middle !important;
		cursor: pointer;
	}
	
	.icon-back-grey{
		color: #ccc;
		cursor: not-allowed;
	}
	
	.tab-img{
		width: 20px;
		margin-right: 5px;
		vertical-align: middle;
	}
	
	.eq-tips{
		text-align: center;
		color: #F56C6C;
		font-size: 14px;
		margin: 5px 0;
	}
	
	.el-icon-question{
		color: #888;
		margin-left: 5px;
	}
	
	.i-tips{
		margin-top: 10px; 
		text-decoration: underline;
		cursor: pointer;
		color: #777; 
		text-align: center;
	}
	
	.line-radio .el-radio{
		line-height: 2;
	}
	
	.find-textarea{
		height: calc(100% - 216px);
		
		textarea{
			height: 100%;
		}
	}
	
	.vxe-cell{
		padding: 0 2px !important;
	}
</style>