|
|
@@ -0,0 +1,838 @@
|
|
|
+<template>
|
|
|
+ <div class="collect-info">
|
|
|
+ <div class="user-data-dialog" v-if="showForm">
|
|
|
+ <div class="mask"></div>
|
|
|
+ <div class="dialog-container">
|
|
|
+ <div class="dialog-header">{{dialogTitle}}</div>
|
|
|
+ <div class="dialog-content">
|
|
|
+ <el-form class="user-form" :model="form" :rules="rules" ref="ruleForm">
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <div class="basic clearfix">
|
|
|
+ <div class="form-title">基本信息</div>
|
|
|
+ <div class="form-main clearfix">
|
|
|
+ <div class="short-control fl">
|
|
|
+ <el-form-item label="姓名 :" prop="name">
|
|
|
+ <el-input v-model.trim="form.name" class="data-short-input item-input" placeholder="请输入姓名"
|
|
|
+ @focus="nameFocus" required>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="short-control fr">
|
|
|
+ <el-form-item label="手机号 :" prop="phone">
|
|
|
+ <el-input v-model.trim="form.phone" maxlength="11" @input="inputPhone"
|
|
|
+ class="data-short-input item-input" placeholder="请输入手机号" @focus="phoneFocus"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="short-control fl">
|
|
|
+ <el-form-item label="邮箱 :" prop="mail">
|
|
|
+ <el-input v-model.trim="form.mail" class="data-short-input item-input" placeholder="请输入邮箱"
|
|
|
+ @focus="mailFocus"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="short-control fr" style="display:none;">
|
|
|
+ <el-form-item label="地区 :">
|
|
|
+ <el-cascader v-model="form.region" class="data-short-input item-input" :options="regionData"
|
|
|
+ placeholder="请选择省份城市" clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </div> -->
|
|
|
+ <div class="short-control fr">
|
|
|
+ <el-form-item label="行业 :">
|
|
|
+ <el-cascader popper-class="custom-cascader" v-model="form.industry" class="data-short-input item-input" :options="industryData"
|
|
|
+ placeholder="请选择所属行业" :show-all-levels="false" clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="short-control fr" style="display:none;">
|
|
|
+ <el-form-item label="受雇类型 :">
|
|
|
+ <el-select v-model="form.mold" class="data-short-input item-input">
|
|
|
+ <el-option v-for="item in moldData" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="company clearfix">
|
|
|
+ <div class="form-title">公司信息</div>
|
|
|
+ <div class="form-main">
|
|
|
+ <div class="long-control" style="position: relative;">
|
|
|
+ <el-form-item label="公司名称 :" prop="companyName">
|
|
|
+ <el-input v-model.trim="form.companyName" class="data-long-input item-input company-name"
|
|
|
+ @focus="companyFocus" @input="searchCompany" placeholder="请输入公司名称">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="company-result" v-if="showSearchResult">
|
|
|
+ <div class="company-list" v-for="item in companyList" :key="item" @click="selectCompany(item)"
|
|
|
+ v-html="item"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="long-control">
|
|
|
+ <el-form-item label="公司类型 :" class="company-type">
|
|
|
+ <el-checkbox-group v-model="form.companyType">
|
|
|
+ <el-checkbox label="投标企业"></el-checkbox>
|
|
|
+ <el-checkbox label="招标采购单位"></el-checkbox>
|
|
|
+ <el-checkbox label="厂商"></el-checkbox>
|
|
|
+ <el-checkbox label="招标代理机构"></el-checkbox>
|
|
|
+ <el-checkbox label="经销商"></el-checkbox>
|
|
|
+ <el-checkbox label="服务提供商"></el-checkbox>
|
|
|
+ <el-checkbox label="其他"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="long-control">
|
|
|
+ <el-form-item label="职位 :" prop="job">
|
|
|
+ <el-select popper-class="custom-select" v-model="form.job" placeholder="请选择职位" class="data-short-input item-input job-input" clearable>
|
|
|
+ <el-option v-for="item in jobData" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input v-if="showOtherJob" v-model.trim="form.otherJob" class="data-short-input item-input job-name-iput"
|
|
|
+ @focus="otherFocus" placeholder="请输入职位名称">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="long-control" style="display: none;">
|
|
|
+ <el-form-item label="公司规模 :">
|
|
|
+ <el-select v-model="form.scale" placeholder="请选择公司规模" class="data-short-input item-input" clearable>
|
|
|
+ <el-option v-for="item in scaleData" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="long-control">
|
|
|
+ <el-form-item label="业务范围 :">
|
|
|
+ <el-input type="textarea" autosize resize="none" v-model="form.business" placeholder="请输入业务范围，让合作伙伴充分了解公司业务内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="long-control">
|
|
|
+ <el-form-item label="合作需求 :">
|
|
|
+ <el-input type="textarea" autosize resize="none" v-model="form.need" placeholder="请输入合作需求，从而创造并匹配更多合作交流机会"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="agree-service">
|
|
|
+ <el-checkbox v-model="form.agreeChecked"> 我同意剑鱼标讯将业务范围及合作需求提供给潜在合作伙伴搜索、查看</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button class="cancel-btn" @click="cancelForm">暂不提供</el-button>
|
|
|
+ <el-button class="submit-btn" @click="submitForm('ruleForm')">提交</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="success-dialog" style="display: none;" v-show="showSuccess">
|
|
|
+ <div class="mask"></div>
|
|
|
+ <div class="success-dialog-container">
|
|
|
+ <div class="success-title">提交成功</div>
|
|
|
+ <div class="success-content">我们的客户经理会在24小时内尽快与您联系。</div>
|
|
|
+ <div class="success-footer">
|
|
|
+ <button type="button" class="custom-btn go-know" @click="showSuccess = false">我知道了</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { industryJson, jobJson, companyScaleJson } from '@/assets/js/selector.js'
|
|
|
+import { Form, FormItem, Button, CheckboxGroup, Checkbox, Select, Input, Option, Cascader } from 'element-ui'
|
|
|
+import { mapState } from 'vuex'
|
|
|
+import { debounce } from '@/utils/'
|
|
|
+export default {
|
|
|
+ name: 'collect-info',
|
|
|
+ components: {
|
|
|
+ [Form.name]: Form,
|
|
|
+ [FormItem.name]: FormItem,
|
|
|
+ [Button.name]: Button,
|
|
|
+ [CheckboxGroup.name]: CheckboxGroup,
|
|
|
+ [Checkbox.name]: Checkbox,
|
|
|
+ [Select.name]: Select,
|
|
|
+ [Input.name]: Input,
|
|
|
+ [Option.name]: Option,
|
|
|
+ [Cascader.name]: Cascader
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ var validName = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ return callback(new Error('姓名为必填项'))
|
|
|
+ } else {
|
|
|
+ if (value.length < 2) {
|
|
|
+ return callback(new Error('姓名填写不正确'))
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validPhone = (rule, value, callback) => {
|
|
|
+ var status = /^1[3456789]\d{9}$/.test(value)
|
|
|
+ if (value === '') {
|
|
|
+ return callback(new Error('手机号为必填项'))
|
|
|
+ } else if (!status) {
|
|
|
+ return callback(new Error('手机号填写不正确'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validEmail = (rule, value, callback) => {
|
|
|
+ var status = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
|
|
|
+ if (value === '') {
|
|
|
+ return callback(new Error('邮箱为必填项'))
|
|
|
+ } else {
|
|
|
+ if (!status) {
|
|
|
+ return callback(new Error('邮箱填写不正确'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validCompany = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ return callback(new Error('公司名称为必填项'))
|
|
|
+ } else {
|
|
|
+ if (value.length < 2) {
|
|
|
+ return callback(new Error('公司名称至少输入2个字'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validJob = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ return callback(new Error('职位不能为空'))
|
|
|
+ } else {
|
|
|
+ if (value === '其他' && this.form.otherJob === '') {
|
|
|
+ return callback(new Error('请输入职位'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ dialogTitle: '请完善个人信息，立刻获得全部功能的产品试用',
|
|
|
+ industryData: [], // 行业数据
|
|
|
+ jobData: [], // 职位数据
|
|
|
+ scaleData: [], // 公司规模数据
|
|
|
+ moldData: [{ // 公司类型数据
|
|
|
+ label: '公司',
|
|
|
+ value: '公司'
|
|
|
+ }, {
|
|
|
+ label: '个体经营者',
|
|
|
+ value: '个体经营者'
|
|
|
+ }, {
|
|
|
+ label: '其他',
|
|
|
+ value: '其他'
|
|
|
+ }],
|
|
|
+ form: {
|
|
|
+ name: '', // 姓名
|
|
|
+ phone: '', // 手机号
|
|
|
+ mail: '', // 邮箱
|
|
|
+ region: [], // 地区值
|
|
|
+ industry: [], // 行业值
|
|
|
+ mold: '公司', // 受雇类型值
|
|
|
+ companyName: '', // 公司名称
|
|
|
+ companyType: [], // 公司类型值
|
|
|
+ job: '', // 职位值
|
|
|
+ otherJob: '', // 自定义职位
|
|
|
+ scale: '', // 公司规模
|
|
|
+ business: '', // 业务范围
|
|
|
+ need: '', // 合作需求
|
|
|
+ agreeChecked: true
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{
|
|
|
+ required: true,
|
|
|
+ validator: validName,
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ phone: [{
|
|
|
+ required: true,
|
|
|
+ validator: validPhone,
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ mail: [{
|
|
|
+ required: true,
|
|
|
+ validator: validEmail,
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ companyName: [{
|
|
|
+ required: true,
|
|
|
+ validator: validCompany,
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ job: [{
|
|
|
+ required: true,
|
|
|
+ validator: validJob
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ showSearchResult: false,
|
|
|
+ companyList: [],
|
|
|
+ showForm: false, // 显示表单填写弹框
|
|
|
+ showSuccess: false, // 显示提交成功弹框
|
|
|
+ isForce: false, // 是否强制
|
|
|
+ source: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ info: state => state.user.info
|
|
|
+ }),
|
|
|
+ showOtherJob: function () {
|
|
|
+ return this.form.job === '其他'
|
|
|
+ },
|
|
|
+ showCompany: function () {
|
|
|
+ return this.form.mold === '公司'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ industryJson.forEach((item) => {
|
|
|
+ item.label = item.name
|
|
|
+ item.value = item.name
|
|
|
+ item.children = item.children.map((v) => {
|
|
|
+ return {
|
|
|
+ value: v.name,
|
|
|
+ label: v.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.industryData = industryJson
|
|
|
+ this.jobData = jobJson.map((item) => {
|
|
|
+ return {
|
|
|
+ value: item,
|
|
|
+ label: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.companyScaleData = companyScaleJson.map((item) => {
|
|
|
+ return {
|
|
|
+ value: item,
|
|
|
+ label: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted () {},
|
|
|
+ methods: {
|
|
|
+ nameFocus () {
|
|
|
+ this.$refs.ruleForm.clearValidate(['name'])
|
|
|
+ },
|
|
|
+ phoneFocus () {
|
|
|
+ this.$refs.ruleForm.clearValidate(['phone'])
|
|
|
+ },
|
|
|
+ mailFocus () {
|
|
|
+ this.$refs.ruleForm.clearValidate(['mail'])
|
|
|
+ },
|
|
|
+ // 公司名称获取焦点时
|
|
|
+ companyFocus () {
|
|
|
+ this.$refs.ruleForm.clearValidate(['companyName'])
|
|
|
+ // this.getResult(this.form.companyName)
|
|
|
+ },
|
|
|
+ otherFocus () {
|
|
|
+ this.$refs.ruleForm.clearValidate(['job', 'otherJob'])
|
|
|
+ },
|
|
|
+ // 是否留资
|
|
|
+ isNeedSubmit (source, callback) {
|
|
|
+ console.log(this.source)
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ type: 'POST',
|
|
|
+ url: '/salesLeads/retainedCapital',
|
|
|
+ data: {
|
|
|
+ source: source
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ if (res.data) {
|
|
|
+ if (res.data.retainedCapital) {
|
|
|
+ _this.showForm = true
|
|
|
+ _this.getOldInfo()
|
|
|
+ } else {
|
|
|
+ callback && callback()
|
|
|
+ }
|
|
|
+ _this.isForce = res.data.fource
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 表单提交事件
|
|
|
+ submitForm (formName) {
|
|
|
+ var _this = this
|
|
|
+ this.$refs[formName].validate(function (valid) {
|
|
|
+ if (valid) {
|
|
|
+ _this.formAjax(_this.source)
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 表单提交请求
|
|
|
+ formAjax (source) {
|
|
|
+ var params = {
|
|
|
+ source: source,
|
|
|
+ name: this.form.name,
|
|
|
+ phone: this.form.phone,
|
|
|
+ mail: this.form.mail,
|
|
|
+ industry: this.form.industry.join('_'),
|
|
|
+ company: this.form.companyName, // 公司名称
|
|
|
+ companyType: this.form.companyType.join(','),
|
|
|
+ position: this.form.job === '其他' ? this.form.otherJob : this.form.job,
|
|
|
+ workScope: this.form.business,
|
|
|
+ partnerNeeds: this.form.need,
|
|
|
+ agree: this.form.agreeChecked
|
|
|
+ }
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ type: 'POST',
|
|
|
+ url: '/salesLeads/collectInfo',
|
|
|
+ contentType: 'application/json;charset=utf-8',
|
|
|
+ data: JSON.stringify(params),
|
|
|
+ success: function (res) {
|
|
|
+ if (res.data) {
|
|
|
+ _this.showForm = false
|
|
|
+ _this.showSuccess = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 手机号输入框input事件
|
|
|
+ inputPhone (val) {
|
|
|
+ this.form.phone = val.replace(/[^\d]/g, '')
|
|
|
+ },
|
|
|
+ // 查询表单回显信息
|
|
|
+ getOldInfo () {
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ type: 'POST',
|
|
|
+ url: '/salesLeads/echoInfo?t=' + Date.now(),
|
|
|
+ success: function (res) {
|
|
|
+ if (res.data) {
|
|
|
+ _this.form.name = res.data.name ? res.data.name : ''
|
|
|
+ _this.form.phone = res.data.phone ? res.data.phone : ''
|
|
|
+ _this.form.mail = res.data.mail ? res.data.mail : ''
|
|
|
+ if (res.data.province && res.data.city) {
|
|
|
+ _this.form.region = [res.data.province, res.data.city]
|
|
|
+ } else if (res.data.province && !res.data.city) {
|
|
|
+ _this.form.region = [res.data.province]
|
|
|
+ } else {
|
|
|
+ _this.form.region = []
|
|
|
+ }
|
|
|
+ _this.form.industry = res.data.industry ? res.data.industry.split('_') : []
|
|
|
+ _this.form.mold = res.data.hireType ? res.data.hireType : '公司'
|
|
|
+ _this.form.companyName = res.data.company ? res.data.company : ''
|
|
|
+ _this.form.companyType = res.data.companyType ? res.data.companyType.split(',') : []
|
|
|
+ if (res.data.position) {
|
|
|
+ if (jobJson.indexOf(res.data.position) === -1) {
|
|
|
+ _this.form.job = '其他'
|
|
|
+ _this.form.otherJob = res.data.position
|
|
|
+ } else {
|
|
|
+ _this.form.job = res.data.position
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.form.job = ''
|
|
|
+ }
|
|
|
+ _this.form.scale = res.data.company_size ? res.data.company_size : ''
|
|
|
+ _this.form.business = res.data.workScope ? res.data.workScope : ''
|
|
|
+ _this.form.need = res.data.partnerNeeds ? res.data.partnerNeeds : ''
|
|
|
+ _this.form.agreeChecked = res.data.agree === undefined ? true : res.data.agree
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 企业名称联想
|
|
|
+ getResult (name) {
|
|
|
+ // 名称为空或长度小于2不发请求
|
|
|
+ if (!name || name.length < 2) return
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ type: 'POST',
|
|
|
+ url: '/jypay/user/company/association',
|
|
|
+ data: {
|
|
|
+ name: name
|
|
|
+ },
|
|
|
+ heads: {
|
|
|
+ 'content-type': 'application/x-www-form-urlencoded'
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ if (res.data && res.data.length > 0) {
|
|
|
+ var result = []
|
|
|
+ res.data.map(function (item) {
|
|
|
+ item = _this.brightKeyword(item)
|
|
|
+ result.push(item)
|
|
|
+ return result
|
|
|
+ })
|
|
|
+ _this.companyList = result
|
|
|
+ _this.showSearchResult = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchCompany: debounce(function (val) {
|
|
|
+ if (val === '') {
|
|
|
+ this.showSearchResult = false
|
|
|
+ }
|
|
|
+ this.getResult(val)
|
|
|
+ }, 400),
|
|
|
+ // 选择联想出来的公司名称
|
|
|
+ selectCompany (item) {
|
|
|
+ this.form.companyName = item.replace(/<.*?>/ig, '')
|
|
|
+ this.showSearchResult = false
|
|
|
+ },
|
|
|
+ // 关键词高亮
|
|
|
+ brightKeyword (val) {
|
|
|
+ var name = this.form.companyName
|
|
|
+ if (val.indexOf(name) !== -1) {
|
|
|
+ return val.replace(name, `<font style='color:#2ABED1;'>${name}</font>`)
|
|
|
+ } else {
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 暂不提供
|
|
|
+ cancelForm () {
|
|
|
+ this.showForm = false
|
|
|
+ this.form.name = ''
|
|
|
+ this.form.phone = ''
|
|
|
+ this.form.mail = ''
|
|
|
+ this.form.industry = []
|
|
|
+ this.form.companyName = ''
|
|
|
+ this.form.companyType = []
|
|
|
+ this.form.job = ''
|
|
|
+ this.form.otherJob = ''
|
|
|
+ this.form.scale = ''
|
|
|
+ this.form.business = ''
|
|
|
+ this.form.need = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+/* element-ui reset */
|
|
|
+.custom-cascader{
|
|
|
+ margin-top: 0px!important;
|
|
|
+ border: 1px solid #2CB7CA;
|
|
|
+ .el-cascader-panel{
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ .popper__arrow{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-cascader__dropdown{
|
|
|
+ border: 1px solid #2CB7CA;
|
|
|
+ }
|
|
|
+ .el-cascader-panel {
|
|
|
+ min-width: 240px;
|
|
|
+ }
|
|
|
+ .el-cascader {
|
|
|
+ line-height: 36px;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .el-cascader-menu {
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+ .el-cascader-node {
|
|
|
+ padding: 0 28px 0 6px;
|
|
|
+ }
|
|
|
+ .el-cascader-node__prefix {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-cascader-menu:last-child {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .el-cascader__dropdown {
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ }
|
|
|
+}
|
|
|
+.user-form{
|
|
|
+ .el-checkbox-group{
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .company-type>.el-form-item__label,
|
|
|
+ .company-type>.el-form-item__content {
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .el-form-item__error {
|
|
|
+ padding: 0px 0 0 90px;
|
|
|
+ top: 99%;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ width: 80px;
|
|
|
+ padding: 0;
|
|
|
+ margin-right: 8px;
|
|
|
+ color: #686868;
|
|
|
+ margin-bottom: 0;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-focus {
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ }
|
|
|
+ .el-checkbox {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .el-checkbox__label {
|
|
|
+ padding-left: 3px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
+ color: #1D1D1D;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner,
|
|
|
+ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: #2CB7CA;
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ }
|
|
|
+ .el-checkbox__inner:hover {
|
|
|
+ border-color: #DCDFE6;
|
|
|
+ }
|
|
|
+ .el-cascader-node.in-active-path,
|
|
|
+ .el-cascader-node.is-active,
|
|
|
+ .el-cascader-node.is-selectable.in-checked-path,
|
|
|
+ .el-select-dropdown__item.selected {
|
|
|
+ color: #2CB7CA;
|
|
|
+ }
|
|
|
+ .cancel-btn:focus,
|
|
|
+ .cancel-btn:hover {
|
|
|
+ background: #FFF;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ .el-textarea{
|
|
|
+ width: calc(100% - 90px);
|
|
|
+ }
|
|
|
+ .el-textarea__inner {
|
|
|
+ min-height: 36px;
|
|
|
+ }
|
|
|
+ .el-input.is-active .el-input__inner,
|
|
|
+ .el-input__inner:focus {
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ }
|
|
|
+ .el-select .el-input.is-focus .el-input__inner,
|
|
|
+ .el-select .el-input__inner:focus {
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ }
|
|
|
+ .el-cascader .el-input .el-input__inner:focus,
|
|
|
+ .el-cascader .el-input.is-focus .el-input__inner {
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ }
|
|
|
+
|
|
|
+ li.el-cascader-node,
|
|
|
+ .el-select-dropdown__item{
|
|
|
+ float: none;
|
|
|
+ }
|
|
|
+ .job-input{
|
|
|
+ width: calc(50% - 90px)!important;
|
|
|
+ }
|
|
|
+ .job-name-iput{
|
|
|
+ width: calc(50% - 90px)!important;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.custom-select{
|
|
|
+ margin-top: 0!important;
|
|
|
+ border: 1px solid #2CB7CA;
|
|
|
+ .el-select-dropdown__wrap{
|
|
|
+ max-height: 220px;
|
|
|
+ }
|
|
|
+ .popper__arrow{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-popper[x-placement^=bottom] {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .el-popper[x-placement^=bottom] .popper__arrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+.collect-info{
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, .5);
|
|
|
+ z-index: 1031;
|
|
|
+ }
|
|
|
+ /* 滚动条样式 */
|
|
|
+ .user-data-dialog ::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 6px;
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+ .user-data-dialog ::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #e0e0e0;
|
|
|
+ }
|
|
|
+ .user-data-dialog ::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ box-shadow: inset 0 0 5px #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ .dialog-container {
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ width: 752px;
|
|
|
+ max-height: 680px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 32px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ z-index: 2000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .dialog-header {
|
|
|
+ color: #1D1D1D;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .dialog-content {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .form-title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2CB7CA;
|
|
|
+ }
|
|
|
+ .form-main {
|
|
|
+ margin: 10px 0 14px;
|
|
|
+ }
|
|
|
+ .short-control {
|
|
|
+ width: calc(50% - 16px);
|
|
|
+ }
|
|
|
+ .long-control {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .item-input {
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ .company-result {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(600px - 16px);
|
|
|
+ top: 38px;
|
|
|
+ left: 88px;
|
|
|
+ height: auto;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #2CB7CA;
|
|
|
+ z-index: 100;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .company-list {
|
|
|
+ padding: 0 16px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ cursor: pointer;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .company-list:hover {
|
|
|
+ background: #ECECEC;
|
|
|
+ }
|
|
|
+ .data-short-input {
|
|
|
+ width: calc(100% - 90px);
|
|
|
+ // height: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .data-long-input {
|
|
|
+ width: calc(100% - 90px);
|
|
|
+ // height: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .agree-service {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .agree-service .el-checkbox__label,
|
|
|
+ .agree-service .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
+ color: #686868;
|
|
|
+ }
|
|
|
+ .dialog-footer {
|
|
|
+ padding-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .cancel-btn {
|
|
|
+ width: 132px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ .submit-btn {
|
|
|
+ width: 132px;
|
|
|
+ height: 36px;
|
|
|
+ padding: 0;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 36px;
|
|
|
+ background: #2CB7CA;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #2CB7CA;
|
|
|
+ }
|
|
|
+ .submit-btn:hover {
|
|
|
+ color: #fff;
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ background: #2CB7CA;
|
|
|
+ }
|
|
|
+ .success-dialog-container {
|
|
|
+ position: fixed;
|
|
|
+ width: 380px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ padding: 20px;
|
|
|
+ transform: translateX(-50%) translateY(-50%);
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 2s linear;
|
|
|
+ z-index: 1038;
|
|
|
+ }
|
|
|
+ .success-title {
|
|
|
+ padding: 12px 0 20px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ line-height: 28px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .success-content {
|
|
|
+ text-align: center;
|
|
|
+ color: #686868;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .success-footer {
|
|
|
+ padding: 32px 0 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .custom-btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: 132px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ background: #2cb7ca;
|
|
|
+ border-radius: 6px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .custom-btn:disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .custom-cascader{
|
|
|
+ li{
|
|
|
+ float: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
