dd_jx_pc/src/components/evaluate/Flow - 副本.vue

<template>
	<div class="all">
		<div class="main">
			<div class="main-top flex-box">
				<div class="flex-box-v flex-d-wrap">
					<div
						@click="activeFlow(item.index)"
						class="flex-box-v flex-center-center flow-item  flex-d-wrap"
						:class="[isActive == item.index ? 'isActive' : '']"
						v-for="(item, index) in flowList"
						:key="index"
						v-show="item.isShow"
					>
						<div class="fontColorZ">{{ item.name }}</div>
						<div class="fontColorF" style="font-size: 13px;" v-if="item.stateText">{{ item.stateText }}</div>
						<!-- <i class="el-icon-right fontColorT" v-if="flowList.length != index + 1" style="font-size: 26px;margin: 0 20px;"></i> -->
					</div>
				</div>
				<div>
					<!-- 目标制定 -->
					<div v-show="isActive == 1">
						<div class="nweTitle">目标制定</div>
						<el-form label-width="120px">
							<el-form-item label="制定人:">
								<el-radio-group v-model="target.type">
									<el-radio :label="1">系统（使用考核模板）</el-radio>
									<el-radio :label="2">被考核人</el-radio>
									<el-radio :label="3">指定成员</el-radio>
									<el-radio :label="4">管理员（指定一级）</el-radio>
								</el-radio-group>
								<div class="flex-box-ce" style="margin-top: 10px;" v-show="target.type == 4">
									<span>被考评人的</span>
									<el-select v-model="target.manager_level" placeholder="请选择级别" style="margin: 0 10px;">
										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
									<el-tooltip class="item" effect="dark" content="找不到确认人时，由上级管理员替代" placement="top-start">
										<i class="fontColorF el-icon-warning"></i>
									</el-tooltip>
								</div>
								<div class="border flex-box-ce" style="position: relative;" v-show="target.type == 3">
									<div class="fontColorF flex-1" v-if="target.employeeList.length == 0">请选择指定人员</div>
									<div v-else style="width: 180px;" class="font-flex-word">
										<span v-for="(j, index2) in target.employeeList" :key="index2">
											<i v-if="index2 != 0">,</i>
											{{ j.name }}
										</span>
									</div>
									<span v-if="target.employeeList.length > 0" class="blue">{{ target.employeeList.length }}人</span>
									<i class="el-icon-arrow-down icon-right" v-else></i>
									<div @click="setEmployeeList(target.employeeList)" class="inputDc"></div>
								</div>
							</el-form-item>
							<el-form-item label="制定人多人时:" v-if="target.type == 3 || target.type == 4">
								<el-radio-group v-model="target.multi_executor">
									<el-radio :label="1">依次制定</el-radio>
									<el-radio :label="2">任一人制定即可</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-form>
					</div>
					<!-- 执行中 -->
					<div v-show="isActive == 2">
						<div class="flex-box-v flex-center-center" style="margin-top: 10%;">
							<img src="@/assets/image/invite_new_company.png" style="width: 200px;height: 200px;margin-bottom: 10px;" />
							<div class="fontColorF" style="line-height: 30px;">
								1、目标制定并确认后，将自动进入此节点；
								<br />
								2、执行节点中，执行人可以制定执行计划，管理者可以添加管理跟踪记录；
								<br />
								3、管理员设置【开始评分】后，自动进入评分节点
							</div>
						</div>
					</div>
					<!-- 评分:上级评分 -->
					<SuperiorFlow v-show="isActive == 3" ref="SuperiorFlow" @setInput="setInput" :data="superiorFlow"></SuperiorFlow>
					<!-- 评分:指定评分人 -->
					<div v-show="isActive == 4">
						<div class="nweTitle">
							指定评分人
							<el-tooltip effect="dark" content="当指标有指定评分人时，应用以下配置" placement="top"><i class="el-icon-warning blue"></i></el-tooltip>
						</div>
						<div class="flex-box-ce" style="margin-left: 13px;margin-bottom: 20px;">
							<span class="label">评分人：</span>
							<div style="color: #606266;">指定评分人</div>
						</div>
						<div class="flex-box-ce" style="margin-left: 13px;">
							<span class="label">必填项：</span>
							<el-checkbox v-model="special_scorer.comment">指标评分说明</el-checkbox>
							<!-- <el-checkbox v-model="special_scorer.summar">评分总结</el-checkbox> -->
						</div>
					</div>
					<!-- 审批节点 -->
					<Examine v-show="isActive == 5" ref="Examine" @setIs="setIs" :data="examine"></Examine>
					<!-- 抄送 -->
					<div v-show="isActive == 6">
						<div class="nweTitle">
							抄送
							<el-switch v-model="cc.enable" style="margin-left: 10px;" :active-value="1" :inactive-value="0"></el-switch>
						</div>
						<el-form :model="cc" label-width="120px" v-show="cc.enable == 1">
							<el-form-item label="抄送人:">
								<el-radio-group v-model="cc.type">
									<el-radio :label="1">管理员</el-radio>
									<el-radio :label="2">指定成员</el-radio>
								</el-radio-group>
								<div class="flex-box-ce" style="margin-top: 10px;" v-show="cc.type == 1">
									<span>被考评人的</span>
									<el-select v-model="cc.manager_level" placeholder="请选择级别" style="margin: 0 10px;">
										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</div>
								<div class="border flex-box-ce" style="position: relative;" v-show="cc.type == 2">
									<div class="fontColorF flex-1" v-if="cc.employeeList.length == 0">请选择指定人员</div>
									<div style="width: 180px;" class="font-flex-word" v-if="cc.employeeList[0]">
										<span v-for="(j, index2) in cc.employeeList" :key="index2">
											<i v-if="index2 != 0">,</i>
											<span v-if="j.name">{{ j.name }}</span>
										</span>
									</div>
									<span v-if="cc.employeeList.length > 0" class="blue">{{ cc.employeeList.length }}人</span>
									<i class="el-icon-arrow-down icon-right" v-else></i>
									<div @click="setEmployeeList(cc.employeeList)" class="inputDc"></div>
								</div>
							</el-form-item>
							<el-form-item label="抄送条件:">
								<el-radio-group v-model="cc.condition">
									<el-radio :label="1">得出结果后抄送</el-radio>
									<!-- <el-radio :label="2">公布结果后抄送</el-radio> -->
								</el-radio-group>
							</el-form-item>
						</el-form>
					</div>
					<!-- 目标确认 -->
					<Affirm v-show="isActive == 7" ref="Affirm" @setIs="setIs" :data="confirm"></Affirm>
				</div>
			</div>
		</div>
		<!-- 同步规则 -->
		<el-dialog title="同步规则" :visible.sync="isRule" width="700px" :close-on-click-modal="false">
			<div>
				<div class="dialog-title">将考核表规则同步到已发起的考核:</div>
				<div class="flex-box-ce dialog-item">
					<span>1</span>
					<div class="label">选择同步的考核</div>
					<div style="position: relative;">
						<el-input v-model="isRule" placeholder="请选择考核" style="width:250px"></el-input>
						<div @click="isChecks = true" class="inputDc"></div>
					</div>
				</div>
				<div class="flex-box-ce dialog-item">
					<span>2</span>
					<div class="label">选择同步的被考核人</div>
					<div style="position: relative;">
						<el-input v-model="isRule" placeholder="请选择考核人" style="width:250px"></el-input>
						<div @click="isRule2 = true" class="inputDc"></div>
					</div>
				</div>
				<div class="flex-box-ce dialog-item">
					<span>3</span>
					<div class="label">评分节点同步</div>
					<div>
						评分节点同步
						<el-tooltip effect="dark" placement="top">
							<div slot="content">
								<i class="el-icon-caret-right" style="color: #fff;"></i>
								已经进入评分的流程会重置到第一个评分环节继续评分
								<br />
								<i class="el-icon-caret-right" style="color: #fff;"></i>
								未开始评分的评分流程直接更新
							</div>
							<i class="el-icon-warning blue"></i>
						</el-tooltip>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<div class="flex-box-ce">
					<div class="flex-1 yellow" style="text-align: left;">注意：24h内仅允许对该考核表相同人员同步一次</div>
					<div>
						<el-button @click="isRule = false">取 消</el-button>
						<el-button type="primary" @click="isRule = false">保存考核表并同步</el-button>
					</div>
				</div>
			</span>
		</el-dialog>

		<!-- 选择考核 -->
		<BrawerBox drawerTitle="选择考核" :showDrawer.sync="isChecks">
			<template slot="main">
				<el-input placeholder="搜索考核" v-model="radio"></el-input>
				<ul class="ul">
					<li v-for="(item, index) in gzList" :key="index" class="flex-box-ce li">
						<el-checkbox class="flex-1" v-model="item.check" :label="item.label" @change="actionCheck($event, item)"></el-checkbox>
						<div class="blue" v-if="item.num > 0">{{ item.num }} 人</div>
					</li>
				</ul>
			</template>
			<template slot="footer">
				<el-button plain @click="isChecks = false">取消</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm('detailForm')">确定</el-button>
			</template>
		</BrawerBox>

		<!-- 选择同步人员 -->
		<EmployeeSelector :selected="selected" :is_filtration_creator="false" :visible.sync="setAdministrator" @confirm="confirmAdministrator" />
	</div>
</template>
<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import BrawerBox from '@/components/public/BrawerBox';
import SuperiorFlow from '@/components/flow/SuperiorFlow';
import Examine from '@/components/flow/Examine';
import Affirm from '@/components/flow/Affirm';
export default {
	components: { EmployeeSelector, BrawerBox, SuperiorFlow, Examine, Affirm },
	name: 'Flow',
	props: {
		isShowScore: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: {}
		}
	},
	watch: {
		data(val) {
			if (val.process) {
				this.recoverData();
			}
		},
		'target.type'(val) {
			this.flowList.forEach((item, index) => {
				if (item.index == 1) {
					let str = '系统';
					if (val == 1) {
						str = '系统';
					} else if (val == 2) {
						str = '被考核人';
					} else if (val == 3) {
						str = '指定成员';
					} else {
						str = '管理员';
					}
					this.$set(this.flowList[index], 'stateText', str);
				}
			});
		},
		isShowScore(val) {
			//根据是否有指定评分人，来是否显示指定评分人模块
			if (!val) {
				if (this.isActive == 4) {
					this.isActive = 1;
				}
			}
			this.setExamineShow(val);
		},
		'cc.enable'(val) {
			this.flowList.forEach((item, index) => {
				if (item.index == 6) {
					this.$set(this.flowList[index], 'stateText', val == 1 ? '' : '已禁用');
				}
			});
		}
	},
	data() {
		return {
			radio: 1,
			isActive: 1,
			checkbox: true,
			gzList: [1],
			loading: false,
			isChecks: false,
			isRule: false, //同步规则
			isRule2: false, //同步规则

			superiorFlow: {}, //上级评分（编辑）
			examine: {}, //审批节点（编辑）
			confirm: {}, //目标确认（编辑）

			selected: { employee: [], dept: [] }, //执行者列表
			setAdministrator: false,
			type: 1, //流程方式 1-按评分人设置流程(默认) 2-按指标设置流程

			// 下面是流程的数据
			target: {
				//目标制定
				enable: 1, //是否启用 1-启用 0-禁用
				type: 1, //制定者类型 1-系统(默认模板,不可制定目标直接进入下一步) 2-被考核人 3-制定成员 4-主管
				action: {
					//可执行动作(允许编辑内容)
					score_type: 1, //评分方式是否可编辑 1-可以 0-不可以
					result_source: 1, //结果值数据来源 1-可以 0-不可以
					reviewer: 1 //制定评分人 1-可以 0-不可以
				},
				multi_executor: 1, //执行人多人时处理方式 1-依次制定 2-任一人制定即可
				manager_level: 1, //上级等级
				supervisor_confirm: 1, //是否有上级主管代替 1-是 0-否
				employee_ids: [], //制定成员id列表
				employeeList: []
			},

			special_scorer: {
				//指定评分人(只有维度数据中有指定评分人的指标才会有)
				enable: 1, //是否启用 1-启用 0-禁用
				action: ['comment', 'summar'], //必填项 'comment', //指标评分说明'summar
				comment: false, //必填项 'comment',
				summar: false //指标评分说明'summar'
			},
			cc: {
				//抄送配置
				enable: 0, //是否启用 1-启用 0-禁用
				type: 1, //抄送人类型 1-主管 2-指定成员 3-角色
				manager_level: 1, //主管等级(只有抄送人类型为主管时有效)
				employee_ids: [], //指定成员id列表(只有抄送人类型为指定成员时有效)
				employeeList: [],
				// role_name: "creator",        //角色名称(只有抄送人类型为角色时有效)
				condition: 1 //抄送结果 1-得出总分 2-公示结果
			},
			ruleForm: {
				type: 1, //流程方式 1-按评分人设置流程(默认) 2-按指标设置流程
				target: {
					//目标制定配置结果
					enable: 1, //是否启用 1-启用 0-禁用
					type: 1, //制定者类型 1-系统(默认模板,不可制定目标直接进入下一步) 2-被考核人 3-制定成员 4-主管
					action: {
						//可执行动作(允许编辑内容)
						score_type: 1, //评分方式是否可编辑 1-可以 0-不可以
						result_source: 1, //结果值数据来源 1-可以 0-不可以
						reviewer: 1 //制定评分人 1-可以 0-不可以
					},
					multi_executor: 1, //执行人多人时处理方式 1-依次制定 2-任一人制定即可
					manager_level: 1, //上级等级
					supervisor_confirm: 1, //是否有上级主管代替 1-是 0-否
					employee_ids: [] //制定成员id列表
				},
				confirm: {
					//目标确认配置结果
					enable: 0, //是否启用 1-启用 0-禁用
					confirmor: [
						//确认人员列表
						{
							type: 1, //确认人类型 1-主管 2-指定成员 3-被考核人 4-角色
							manager_level: 1, //主管级别
							supervisor_confirm: 1, //找不到确认人,有上级主管代替 1-是 0-否
							multi_executor: 1, //确认人多人时处理方式 1-依次确认 2-任一人确认 3-均需确认
							action: [
								//允许确认人动作
								'index', //修改指标
								'transfer' //转交
							],
							employee_ids: [], //指定成员用户id列表(类型为指定成员时)
							role_name: 'creator' //角色名称(类型为指定角色时)
						}
					],
					unique: 1 //重复去重
				},
				execution: {
					//执行中制定配置结果
					enable: 1 //是否启用 1-启用 0-禁用
				},
				score_self: {
					//自评指定配置结果
					enable: 0, //是否启用 1-启用 0-禁用
					weight: 0, //权重
					action: [
						//必填项动作
						'comment', //指标评分说明
						'summary' //评分总结
					],
					rating: 0, //是否手动评级
					unique: 1 //评分人去重
				},
				score_mutual: {
					//互评配置结果
					enable: 0 //是否启用 1-启用 0-禁用
				},
				score_supervisor: {
					//上级评分
					enable: 1, //是否启用 1-启用 0-禁用
					unique: 1, //评分人去重 1-是 0-否
					supervisor: [
						//上级配置列表
						{
							type: 1, //评分人类型 1-主管 2-指定成员 3-角色
							manager_level: 1, //主管等级(只有评分人类型为主管时有效)
							supervisor_confirm: 1, //找不到确认人时是否由上级主管代替(只有评分人类型为主管时有效) 1-是 0-否
							role_name: 'creator', //角色名(只有评分人类型为角色时有效)
							employee_ids: [], //用户id列表(只有评分人类型为指定人员时有效)
							weight: 10, //权重
							multi_executor: 1, //评分人多人时 1-各自评分 2-任一人评分
							rule: 1, //评分规则 1-指标均要评分 2-评分总结
							action: [
								//必填项
								'comment', //指标评分说明
								'summary' //评分总结
							],
							rating: 0, //是否手动评分 1-是 0-否
							transfer: 1 //是否允许转交 1-是 0-否
						}
					]
				},
				special_scorer: {
					//指定评分人(只有维度数据中有指定评分人的指标才会有)
					enable: 1, //是否启用 1-启用 0-禁用
					action: ['comment', 'summar'] //必填项 'comment', //指标评分说明'summar ' //评分总
				},
				review: {
					//审批节点
					enable: 1, //是否启用 1-启用 0-禁用
					unique: 1, //评分人去重 1-是 0-否
					reviewer: [
						//审批人配置列表
						{
							type: 1, //用户种类 1-主管 2-指定成员 3-被考核人 4-角色
							action: ['transfer', 'refuse'], //转交//驳回                  //允许审批人动作
							manager_level: 1, //主管级别(只有用户种类为主管有效)
							supervisor_confirm: 1, //找不到审批人时,是否由上级主管代替(只有用户种类为主管有效)
							multi_executor: 1, //审批人多人时选项 1-依次确认 2-任一人审批 3-均需审批(只有用户种类为主管、指定成员、角色时有效)
							employee_ids: [], //用户id列表(只有用户种类为指定成员时有效)
							role_name: 'creator' //角色名(只有用户种类为角色时有效)
						}
					]
				},
				cc: {
					//抄送配置
					enable: 1, //是否启用 1-启用 0-禁用
					employee: {
						//抄送人员配置
						type: 1, //抄送人类型 1-主管 2-指定成员 3-角色
						manager_level: 1, //主管等级(只有抄送人类型为主管时有效)
						employee_ids: [1, 2], //指定成员id列表(只有抄送人类型为指定成员时有效)
						role_name: 'creator', //角色名称(只有抄送人类型为角色时有效)
						condition: 1 //抄送结果 1-得出总分 2-公示结果
					}
				}
			},
			flowList: [
				{ name: '目标制定', stateText: '系统', index: 1, isShow: true },
				{ name: '目标确认', stateText: '已禁用', index: 7, isShow: true },
				{ name: '执行中', stateText: '', index: 2, isShow: true },
				{ name: '评分:上级评分', stateText: '已禁用', index: 3, isShow: true },
				{ name: '评分:指定评分人', stateText: '', index: 4, isShow: false },
				{ name: '审批', stateText: '已禁用', index: 5, isShow: true },
				{ name: '抄送', stateText: '已禁用', index: 6, isShow: true }
			],
			options: [
				{
					value: 1,
					label: '直接管理员'
				},
				{
					value: 2,
					label: '二级管理员'
				},
				{
					value: 3,
					label: '三级管理员'
				},
				{
					value: 4,
					label: '四级管理员'
				},
				{
					value: 5,
					label: '五级管理员'
				},
				{
					value: 6,
					label: '六级管理员'
				}
			]
		};
	},
	created() {},
	mounted() {},
	methods: {
		recoverData() {
			let data = this.data.process;
			let employeeMap = this.$getEmployeeList();
			this.type = data.type; //流程方式 1-按评分人设置流程(默认) 2-按指标设置流程
			let target = data.target;
			// 目标制定
			this.target = {
				//目标制定
				enable: 1, //是否启用 1-启用 0-禁用
				type: target.type, //制定者类型 1-系统(默认模板,不可制定目标直接进入下一步) 2-被考核人 3-制定成员 4-主管
				action: {
					//可执行动作(允许编辑内容)
					score_type: 1, //评分方式是否可编辑 1-可以 0-不可以
					result_source: 1, //结果值数据来源 1-可以 0-不可以
					reviewer: 1 //制定评分人 1-可以 0-不可以
				},
				multi_executor: target.multi_executor, //执行人多人时处理方式 1-依次制定 2-任一人制定即可
				manager_level: target.manager_level, //上级等级
				supervisor_confirm: 1, //是否有上级主管代替 1-是 0-否
				employee_ids: target.employee_ids, //制定成员id列表
				employeeList: target.employee_ids.map(item => {
					return employeeMap[item];
				})
			};
			// 目标确认
			this.confirm = data.confirm;
			// 上级评分
			this.superiorFlow = data.score_supervisor;

			// 审批节点
			this.examine = data.review;

			//指定评分人(只有维度数据中有指定评分人的指标才会有)
			this.special_scorer = {
				enable: data.special_scorer.enable, //是否启用 1-启用 0-禁用
				action: data.special_scorer.action, //必填项 'comment', //指标评分说明'summar
				comment: data.special_scorer.action.indexOf('comment') >= 0 ? true : false, //必填项 'comment',
				summar: data.special_scorer.action.indexOf('summar') >= 0 ? true : false //指标评分说明'summar'
			};
			//抄送配置
			let employee = data.cc.employee;
			this.cc.enable = data.cc.enable;
			this.cc.type = employee.type;
			this.cc.manager_level = employee.manager_level;
			this.cc.condition = employee.condition;
			this.cc.employee_ids = employee.employee_ids;
			this.cc.employeeList = employee.employee_ids.map(item => {
				return employeeMap[item];
			});
		},
		setEmployeeList(item) {
			this.selected.employee = item[0] ? item : [];
			this.setAdministrator = true;
		},
		confirmAdministrator(e) {
			if (this.isActive == 1) {
				this.target.employeeList = e.employee.length > 0 ? e.employee : [];
			} else {
				this.cc.employeeList = e.employee.length > 0 ? e.employee : [];
			}
		},
		setExamineShow(is) {
			this.flowList.forEach((item, index) => {
				if (item.index == 4) {
					this.$set(this.flowList[index], 'isShow', is);
				}
			});
		},
		//设置审批节点的状态
		setIs(str, itemIndex) {
			this.flowList.forEach((item, index) => {
				if (item.index == itemIndex) {
					this.$set(this.flowList[index], 'stateText', str);
				}
			});
		},
		// 设置上级评分人的权重
		setInput(num, is) {
			this.flowList.forEach((item, index) => {
				if (item.index == 3) {
					if (is) {
						this.$set(this.flowList[index], 'stateText', '评分权重:' + num + '%');
					} else {
						this.$set(this.flowList[index], 'stateText', '已禁用');
					}
				}
			});
		},
		activeFlow(index) {
			this.isActive = index;
		},
		actionCheck(e, obj) {
			if (obj.child) {
				obj.child.forEach(item => {
					item.check = true;
				});
			}
		},
		submitForm() {}
	}
};
</script>
<style scoped="scoped">
.all {
	font-size: 14px;
	min-height: 600px;
}
.header {
	border-bottom: 1px solid #ebebeb;
	padding: 20px;
	font-size: 16px;
}
.main-top,
.main-bottom {
	padding: 20px 0px;
}
::v-deep :focus {
	outline: 0;
}
.flow-item {
	background-color: #f4f6f9;
	border-radius: 3px;
	width: 140px;
	min-width: 120px;
	height: 60px;
	margin-right: 60px;
	position: relative;
	margin-top: 30px;
	box-sizing: border-box;
	cursor: pointer;
}
.flow-item:hover {
	background-color: #409eff;
	color: #fff !important;
}
.flow-item:hover .fontColorZ {
	color: #fff !important;
}
.flow-item:hover .fontColorF {
	color: #fff !important;
}
.flow-item .el-icon-right {
	position: absolute;
	right: -60px;
}
.flow-item .fontColorF {
	margin-top: 10px;
}
.isActive {
	background-color: #409eff;
	color: #fff !important;
}
.isActive .fontColorZ,
.isActive .fontColorF {
	color: #fff !important;
}
.nweTitle {
	margin: 30px 0;
	padding-left: 10px;
	border-left: 3px solid #409eff;
}
.radio {
	position: relative;
	top: 2px;
}
.label {
	width: 80px;
	text-align: left;
}
.inputDc {
	position: absolute;
	top: 0;
	width: 250px;
	left: 0;
	bottom: 0;
	z-index: 9;
}
::v-deep .el-dialog__body {
	padding: 20px;
}
.dialog-title {
	font-size: 15px;
	margin-bottom: 20px;
}
.dialog-item {
	margin-bottom: 10px;
	height: 45px;
}
.dialog-item span {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid #409eff;
	color: #409eff;
	display: inline-block;
	line-height: 22px;
	font-size: 12px;
	text-align: center;
}
.dialog-item .label {
	width: 130px;
	margin: 0 10px;
}
.ul {
	margin: 20px 0;
}
.li {
	padding: 15px 0;
	border-bottom: 1px solid #f1f1f1;
}
.li:hover {
	background-color: #f5f7fa;
}
.border {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #606266;
	font-size: inherit;
	height: auto;
	outline: 0;
	padding: 0 15px;
	width: 250px;
	position: relative;
	margin-top: 10px;
}
</style>