bocai_supplyChain_pc/src/components/FirstJob/detail.vue

<template>
  <div class="detail-container">
    <!-- <a-modal
      title="报名"
      :visible="visible"
      class="modal"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      okText="提交"
      cancelText="取消"
      :destroyOnClose="true"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false">
        <a-form-model-item ref="name" label="姓名" prop="name">
          <a-input
            v-model="form.name"
            placeholder="请输入老乡姓名"
            @blur="
              () => {
                $refs.name.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="gender" label="性别" prop="gender">
          <a-select v-model="form.gender" placeholder="请选择性别">
            <a-select-option value="man">男</a-select-option>
            <a-select-option value="woman">女</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="tel" label="年龄" prop="tel">
          <a-input
            v-model="form.age"
            placeholder="请输入年龄"
            @blur="
              () => {
                $refs.tel.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="peoplecard" label="民族" prop="peoplecard">
          <a-select v-model="form.nation" placeholder="请选择民族">
            <a-select-option
              v-for="item in nationlist"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="peoplecard" label="身份证号" prop="peoplecard">
          <a-input v-model="form.peoplecard" placeholder="请输入老乡身份证号" />
        </a-form-model-item>
        <a-form-model-item ref="peoplecard" label="家庭住址" prop="peoplecard">
          <a-input v-model="form.location" placeholder="请输入家庭住址" />
        </a-form-model-item>

        <a-form-model-item ref="username" label="报名企业" prop="username">
          <a-select v-model="form.firm" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="岗位" prop="username">
          <a-select v-model="form.post" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="模式" prop="username">
          <a-select v-model="form.pattern" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="政策" prop="username">
          <a-select v-model="form.policy" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="代理" prop="username">
          <a-select v-model="form.proxy" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="面试时间" prop="username">
          <a-select v-model="form.facedate" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>-->

    <!-- <a-drawer
			title="报名"
			placement="right"
			:closable="true"
			:maskClosable="false"
			:visible="visible"
			labelAlign="right"
			width="480"
			@close="onClose"
		>
			<recordbill :visible.sync="visible" :firminfo="jobDetail"></recordbill>
    </a-drawer>-->
    <!-- 面包屑 -->
    <a-breadcrumb class="w">
      <a-breadcrumb-item href>
        <router-link to="/main">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item href>
        <a @click="toList">
          <span>一手职位</span>
        </a>
      </a-breadcrumb-item>
      <a-breadcrumb-item href>
        <span style="color: #333">企业详情</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 主体区域 -->
    <div class="maincontent w">
      <div class="maincontentleft">
        <div class="subset">
          <a-skeleton avatar active class="skeleton1" v-show="skeletonshow" :paragraph="{ rows: 4 }" />
          <div class="subsetleft" v-show="!skeletonshow">
            <div class="info">
              <div class="imgbox">
                <!-- <a-carousel arrows :autoplay="true" effect="fade" :dots="true" ref="scrollimg" v-if="storeImage.length !== 0">
                <div slot="prevArrow" class="custom-slick-arrow" style="left: 5px; z-index: 99">
                  <a-icon type="left-circle" />
                </div>
                <div slot="nextArrow" class="custom-slick-arrow" style="right: 5px; z-index: 99">
                  <a-icon type="right-circle" />
                </div>
                <img v-for="(item, index) in storeImage" :key="index" :src="item" alt />
                </a-carousel>-->
                <img v-if="store.logo" :src="store.logo" alt />
                <img v-else src="../../../static/img/nopicture.png" alt />
              </div>
              <div class="jobinfobox">
                <div class="jobname">{{ jobDetail.jobName }}</div>
                <div class="jobinfo">
                  <span>{{ jobDetail.district }}</span>
                  <span>{{ jobDetail.gender }}</span>
                  <span>{{ jobDetail.age }}</span>
                </div>
                <div class="jobtag">
                  <!-- <span>返费</span> -->
                  <a-tag :color="labelColor[index % labelColor.length]" v-for="(item, index) in jobDetail.jobRequestLabelNames" :key="index">{{ item }}</a-tag>
                </div>
                <div style="height: 27px" v-if="!jobDetail.jobRequestLabelNames" class="jobtag">
                  <a-tag :color="labelColor[1]">暂无要求</a-tag>
                </div>
                <div class="jobtag1">
                  <!-- <span>返费</span> -->
                  <a-tag v-for="(item, index) in jobDetail.jobSpecialLabelNames" :key="index">{{ item }}</a-tag>
                </div>
                <div style="height: 27px" v-if="!jobDetail.jobSpecialLabelNames" class="jobtag">
                  <a-tag style="backgroundcolor: #f5f5f5">暂无特色</a-tag>
                </div>
                <div style="
                  display: flex;
                  align-items: center;
                  height: 26px;
                  margin-top: 16px;
                ">
                  <div class="jobpricehour" v-html="
                    getSalaryClassifyValue(
                      jobDetail.salaryClassify,
                      jobDetail.salaryClassifyValue
                    )
                  ">
                    <!-- <template v-if="jobDetail.hourlyPay"
                    ><span>{{ jobDetail.hourlyPay }}</span
                    >元/小时</template
                  >
                  <template v-else-if="jobDetail.dayPay"
                    ><span>{{ jobDetail.dayPay }}</span
                    >元/日</template
                    >-->
                  </div>
                  <span style="font-size: 16px">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <div class="jobpricemonth">
                    <span>{{ jobDetail.minMonthlyPay }}</span>-
                    <span>{{ jobDetail.maxMonthlyPay }}</span>元/月
                  </div>
                </div>

                <!-- <div class="billbutton">
                <span>服务费 <i>1.5</i>元/小时</span>
                <a-dropdown class="dropdown" :trigger="['click']">
                  <a
                    class="ant-dropdown-link"
                    @click="(e) => e.preventDefault()"
                  >
                    报名
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item @click="showmodal"> 抽屉 </a-menu-item>
                    <a-menu-item @click="torecord"> 新页面</a-menu-item>
                  </a-menu>
                </a-dropdown>
                </div>-->
              </div>
            </div>
            <div class="swiperBox">
              <div id="swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item, index) in [...storeImage]" :key="index">
                    <img :src="item" alt v-if="isImg(item)" @click="showImage(index)" style="cursor:pointer;" />
                    <div v-if="!isImg(item)">
                      <div style="position: absolute;width: 78px;height: 78px; left: 0;top: 0;z-index: 99;background-color: transparent;cursor: pointer;" @click.stop="handlePreview(item)"></div>
                      <video class="imgSpan" style="width: 80px;height:45px" controls>
                        <source :src="item" type="video/mp4" />
                        <source :src="item" type="video/ogg" />您的浏览器不支持 HTML5 video 标签。
                      </video>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
            <a-modal :visible="previewVisible" wrapClassName="spic" centered :footer="null" @cancel="handleCancel">
              <video style="width: 100%; max-height: calc(100vh - 40px)" id="movie" autoplay :src="previewImage" controls="controls" />
            </a-modal>
            <!-- <div class="swiperBox">
              <div id="swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(item, index) in [...storeImage]" :key="index">
                    <img :src="item" alt @click="showImage(index)" style="cursor:pointer" />
                  </div>
                   <div class="swiper-slide" v-for="(item, index) in [...storeImage]" :key="index">
                    <img :src="item" alt @click="showImage(index)" style="cursor:pointer" />
                  </div>
                </div>
              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>-->
          </div>
          <div class="subsetright">
            <div class="topbox">
              <div>服务费</div>
              <div>
                <span>{{ jobDetail.servetype }}</span>
              </div>
            </div>
            <div class="sub-bottombox">
              <!-- <a-popover title="" trigger="click" placement="bottomRight">
								
								<a-button type="primary" class="jobDesp">职位详单</a-button>
              </a-popover>-->
              <button class="dropdown bottombox1" @click="torecord()" v-if="jobDetail.recruitment == '1'">报名</button>
              <button class="norecruitment bottombox1" v-else>暂时停招</button>
            </div>
          </div>
        </div>

        <!-- <div class="proxy">
          <h1><i>代理政策</i></h1>
          <div>{{ jobDetail.returnFeeDesp }}</div>
        </div>-->
        <div class="jobinformationbox">
          <h1>
            <div class="infotitle">
              <span @click="tabchange = 1" :class="tabchange === 1 ? 'active' : ''">基本信息</span>
              <span @click="tabchange = 0" :class="tabchange === 0 ? 'active' : ''">财务结算</span>
              <span @click="tabchange = 2" :class="tabchange === 2 ? 'active' : ''">职位通告</span>
            </div>
            <span>我的政策更好，给我供人</span>
            <!-- <div class="copy" @click="xiangdanVisible = true">通告</div>
            <a-modal v-model="xiangdanVisible" title="通告" class="xiangdan" :footer="null" @ok="handleOk">
              <template slot="content" class="jobDesp_content">
                <div class="copy" @click="copyText($event)">复制</div>
                <span v-if="jobDetail.jobDesp" class="copyInfo">
                  {{
                  jobDetail.jobDesp
                  }}
                </span>
                <span v-else>暂无详单</span>
              </template>
            </a-modal>-->
          </h1>
          <div class="pay" id="tip" v-show="tabchange === 1">
            <div class="mb12 mt20 titlestyle">温馨提示</div>
            <div class="showInfo" style="width: unset">{{ jobDetail.notes || "-" }}</div>
          </div>
          <div v-if="tabchange === 1" style="display: flex">
            <!-- 薪资 -->
            <div class="baseInfoContent" v-if="tabchange === 1">
              <div class="pay" id="pay">
                <div class="mb12 mt20">薪资待遇</div>
                <a-descriptions bordered size="small" :column="1" class="leftDesc boubleLevel">
                  <!-- <a-descriptions-item class="test1">
                    <span slot="label" class="">工价</span>
                    <span>{{ jobDetail.calculationUnit }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class="">综合月薪</span>
                    <span>{{ jobDetail.combiSalary }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class="">薪资明细</span>
                    <span>{{ jobDetail.salaryDetail }}</span>
                  </a-descriptions-item>-->
                  <a-descriptions-item class="test1">
                    <span slot="label" class>薪资明细</span>
                    <span>{{ jobDetail.salaryDetail || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>薪资发放</span>
                    <span>{{ jobDetail.payDay || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>银行卡</span>
                    <span>{{ jobDetail.bankInfo || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>押金</span>
                    <span>{{ jobDetail.mealCardDeposit || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>培训</span>
                    <span>{{ jobDetail.training || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>试用期</span>
                    <span>{{ jobDetail.probation || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>福利待遇</span>
                    <span>{{ jobDetail.boon || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>薪资说明</span>
                    <span style="white-space: break-spaces">
                      {{
                      jobDetail.salaryDesp || "-"
                      }}
                    </span>
                  </a-descriptions-item>
                  <!-- <a-descriptions-item style="padding: 0">
                    <span slot="label">薪资说明</span>
                    <a-descriptions
                      bordered
                      size="small"
                      :column="1"
                      class="leftDesc noborder"
                    >
                      <a-descriptions-item>
                        <span slot="label" class="">发薪日 </span>
                        <span>{{ jobDetail.payDay }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label" class="">计薪周期 </span>
                        <span>{{ jobDetail.calculationSalaryType }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label" class="">工资卡</span>
                        <span>{{ jobDetail.payCard }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label" class="">费用报销</span>
                        <span>{{
                          jobDetail.reimbursement
                        }}</span> </a-descriptions-item
                      ><a-descriptions-item>
                        <span slot="label" class="">补充说明 </span>
                        <span v-html="jobDetail.salaryDesp"></span>
                      </a-descriptions-item>
                    </a-descriptions>
                  </a-descriptions-item>-->
                </a-descriptions>
              </div>
              <!-- 岗位要求 -->
              <div class="required" id="required">
                <div class="mb12 mt20">招聘要求</div>
                <a-descriptions bordered size="small" :column="1" class="leftDesc">
                  <a-descriptions-item class="test1">
                    <span slot="label" class>性别年龄</span>
                    <span>
                      <span class="man" v-if="jobDetail.minAgeMan">
                        男 {{ jobDetail.minAgeMan }}
                        <span v-if="jobDetail.maxAgeMan">
                          {{
                          "- " + jobDetail.maxAgeMan
                          }}
                        </span>岁 ；
                      </span>
                      <span class="woman" v-if="jobDetail.minAgeWoman">
                        女 {{ jobDetail.minAgeWoman }}
                        <span>{{ "- " + jobDetail.maxAgeWoman }}</span>岁
                      </span>
                    </span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>文化学历</span>
                    <span>{{ jobDetail.education || "-" }}</span>
                  </a-descriptions-item>

                  <a-descriptions-item>
                    <span slot="label" class>证件</span>
                    <span>{{ jobDetail.idCardStr || "-" }}</span>
                  </a-descriptions-item>

                  <a-descriptions-item>
                    <span slot="label" class>疑难杂症</span>
                    <span>{{ jobDetail.otherRequireStr || "-" }}</span>
                  </a-descriptions-item>

                  <a-descriptions-item>
                    <span slot="label" class>体检</span>
                    <span>{{ jobDetail.healthRequire || "-" }}</span>
                  </a-descriptions-item>

                  <!--    <a-descriptions-item>
                    <span slot="label" class="">面试资料</span>
                    <span>{{ jobDetail.idCard || "-" }}</span>
                  </a-descriptions-item>-->
                  <!-- <a-descriptions-item>
                    <span slot="label" class="">证件</span>
                    <span>{{ jobDetail.certificate }}</span>
                  </a-descriptions-item>
                  
                 
                  <a-descriptions-item>
                    <span slot="label" class="">带手机</span>
                    <span>{{ jobDetail.carryTel }}</span>
                  </a-descriptions-item>-->
                  <!--  <a-descriptions-item>
                    <span slot="label" class="">体检要求</span>
                    <span>{{ jobDetail.healthRequire || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class="">其它要求</span>
                    <span>{{ jobDetail.otherRequire || "-" }}</span>
                  </a-descriptions-item>-->
                </a-descriptions>
              </div>
              <!-- 基本信息 -->
              <div class id="contentspecial">
                <div class="mb12 mt20">岗位说明</div>
                <a-descriptions bordered size="small" :column="1" class="leftDesc">
                  <a-descriptions-item class="test1">
                    <span slot="label" class>工作内容</span>
                    <span>{{ jobDetail.workContent || "-" }}</span>
                  </a-descriptions-item>

                  <a-descriptions-item class="test1">
                    <span slot="label" class>工作方式</span>
                    <span>{{ jobDetail.workMode || "-" }}</span>
                  </a-descriptions-item>

                  <a-descriptions-item>
                    <span slot="label" class>班次工时</span>
                    <span>{{ jobDetail.workClasses || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>工作衣</span>
                    <span>{{ jobDetail.workClothes || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>车间</span>
                    <span>{{ jobDetail.securityCheck || "-" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class>保险</span>
                    <span>{{ jobDetail.employeeInsurance || "-" }}</span>
                  </a-descriptions-item>
                  <!-- <a-descriptions-item>
                    <span slot="label" class="">工作时长</span>
                    <span>{{ jobDetail.workDuration }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <span slot="label" class="">倒班频次</span>
                    <span>{{ jobDetail.workByTurns }}</span>
                  </a-descriptions-item>-->
                  <!-- <a-descriptions-item>
                    <span slot="label" class="">换岗调班</span>
                    <span style="white-space: break-spaces">
                      {{
                      jobDetail.otherDesp || "-"
                      }}
                    </span>
                  </a-descriptions-item>-->
                </a-descriptions>
              </div>

              <div class="condition" id="condition">
                <div class="mb12 mt20">吃饭住宿</div>
                <ul class="conditiontable">
                  <li>
                    <span>吃饭</span>
                    <span>{{ jobDetail.workingLunch || "-" }}</span>
                  </li>
                  <li>
                    <span>住宿费用</span>
                    <span>{{ jobDetail.dormitory || "-" }}</span>
                  </li>
                  <li>
                    <span>宿舍设施</span>
                    <span>{{ jobDetail.dormitoryFacilities || "-" }}</span>
                  </li>
                  <li>
                    <span>宿舍距离</span>
                    <span>{{ jobDetail.dormDistance || "-" }}</span>
                  </li>
                  <li>
                    <span>入住条件</span>
                    <span>{{ jobDetail.dormitoryDesp || "-" }}</span>
                  </li>
                  <!-- <li>
                        <span>宿舍距离</span
                        ><span>{{ jobDetail.dormitoryDistance }}</span>
                  </li>-->
                  <!-- <li>
												<span>住宿费</span
												><span>{{ jobDetail.dormitoryCost }}</span>
											</li>
                  -->

                  <!-- <li>
                        <span>单间人数</span
                        ><span>{{ jobDetail.dormitoryPeoples }}</span>
                      </li>
                      <li>
                        <span>硬件设施</span
                        ><span>{{ jobDetail.dormitoryFacilities }}</span>
                  </li>-->
                  <!-- <li>
                        <span>水电费</span
                        ><span>{{ jobDetail.waterAndElec || "-" }}</span>
                  </li>-->
                  <!-- <li>
                        <span>班车</span><span>{{ jobDetail.regularBus }}</span>
                  </li>-->
                  <!--  <li>
                        <span>补充说明</span
                        ><span style="white-space: break-spaces">{{
                          jobDetail.dormitoryDesp || "-"
                        }}</span>
                  </li>-->
                </ul>
                <!-- <a-descriptions
                bordered
                size="small"
                :column="1"
                class="leftDesc"
              >
                <a-descriptions-item class="test1">
                  <span slot="label" class="">工作餐</span>
                  <a-descriptions size="small" :column="1">
                    <a-descriptions-item>
                      <span slot="label" class="">工作餐</span>
                      <span class="">工包早中餐作餐</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <span slot="label" class="">餐费</span>
                      <span class="">收费（先吃后扣）</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <span slot="label" class="">餐补</span>
                      <span class="">无</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <span slot="label" class="">餐卡押金</span>
                      <span class="">10元</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <span slot="label" class="">清真窗口</span>
                      <span class="">有</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <span slot="label" class="">工作餐 说明</span>
                      <span class="">有肉有菜</span>
                    </a-descriptions-item>
                  </a-descriptions>
                </a-descriptions-item>
                <a-descriptions-item>
                  <span slot="label" class="">班次时间</span>
                  <span>9:30-14:00；17:00-22:00</span>
                </a-descriptions-item>
                </a-descriptions>-->
              </div>
              <!-- <div class="otherInfo" id="other">
                <div class="mb12 mt20">其他信息</div>
                <div style="white-space: break-spaces">{{ jobDetail.otherInfo || "-" }}</div>
              </div>-->
              <div class="required" id="abutment">
                <div class="mb12 mt20">对接信息</div>
                <a-descriptions bordered size="small" :column="1" class="leftDesc">
                  <a-descriptions-item class="test1">
                    <span slot="label" class>面试时间</span>
                    <span>{{jobDetail.interviewDuration || '-'}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item class="test1">
                    <span slot="label" class>面试地点</span>
                    <span>{{jobPoses.interview.posContent || '-'}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item class="test1">
                    <span slot="label" class>宿舍地址</span>
                    <span>{{jobPoses.room.posContent ? jobPoses.room.posContent : '-'}}</span>
                  </a-descriptions-item>
                  <!-- <a-descriptions-item class="test1">
                    <span slot="label" class>总包驻场</span>
                    <span>{{jobDetail.onSiteInfo || '-'}}</span>
                  </a-descriptions-item>-->
                  <a-descriptions-item class="test1">
                    <span slot="label" class>面试说明</span>
                    <span>{{jobDetail.interviewDesp || '-'}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item class="test1">
                    <span slot="label" class>入职说明</span>
                    <span>{{jobDetail.entryDesp || '-'}}</span>
                  </a-descriptions-item>
                  <a-descriptions-item class="test1">
                    <span slot="label" class>离职说明</span>
                    <span>{{jobDetail.leaveRequire || '-'}}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
            <a-anchor @click.prevent class="navigation">
              <a-anchor-link href="#tip" title="注意" />
              <a-anchor-link href="#pay" title="薪资" />
              <a-anchor-link href="#required" title="要求" />
              <a-anchor-link href="#contentspecial" title="岗位" />
              <a-anchor-link href="#condition" title="吃住" />
              <a-anchor-link href="#abutment" title="对接" />
            </a-anchor>
          </div>

          <!-- 财务结算 -->
          <div v-else-if="tabchange == 0">
            <!-- <div class="pay" id="tip">
              <div class="mb12 mt20 titlestyle">代理须知</div>
              <div class="showInfo" style="width: 640px">{{ jobDetail.agencyStatement || "-" }}</div>
            </div>-->
            <a-descriptions bordered size="small" :column="1" class="leftDesc mt20" style="width: 900px">
              <a-descriptions-item class="test1">
                <span slot="label" class>服务费详情</span>
                <span>{{ jobDetail.agencyProfit || "-" }}</span>
              </a-descriptions-item>
              <!-- <a-descriptions-item>
              <span slot="label" class="">代理政策</span>
              <span>{{ jobDetail.returnFeeDesp }}</span>
              </a-descriptions-item>-->
              <a-descriptions-item>
                <span slot="label" class>扣税说明</span>
                <span>{{ jobDetail.deductTaxDesp || "-" }}</span>
              </a-descriptions-item>
              <!-- <a-descriptions-item>
                <span slot="label" class="">支付周期</span>
                <span>{{ jobDetail.paymentCycle }}</span>
              </a-descriptions-item>-->
              <a-descriptions-item>
                <span slot="label">
                  <div class="c6">账单日</div>
                  <div class="c6">{{'(出名单时间)'}}</div>
                </span>
                <span>{{ jobDetail.outListTime || "-" }}</span>
              </a-descriptions-item>
              <a-descriptions-item>
                <span slot="label" class>
                  <div class="c6">结算日</div>
                  <div class="c6">{{'(结算时间)'}}</div>
                </span>
                <span>{{ jobDetail.settlementTime || "-" }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div v-else-if="tabchange === 2">
            <div class="pay" id="tip">
              <div class="mb12 mt20 titlestyle">职位通告</div>
              <div class="showInfo" style="width: unset;color: #000 !important;">
                <div class="copy" @click="copyText($event)">复制</div>
                <!--                {{ jobDetail.jobDesp || "-" }}-->
                <div class="copyInfo" style="border: none; padding: 0 0; width: unset;white-space: pre-line;">{{ jobDetail.jobDesp || "-" }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="maincontentright">
        <div class="hotphone">
          <h1 class="bottombox">
            <i>服务热线</i>
          </h1>
          <p>0371-6611 3723</p>
        </div>
        <!-- <div class="jobDetailInfo" style="display:none">
					<h1 class="bottombox"><i>职位详版</i> <span class="copy" @click="copyText">复制</span></h1>
					<p class="copyInfo">{{ jobDetail.jobDesp || "-" }}</p>
        </div>-->
        <div class="companyinfo">
          <div class="companydetail">
            <h1 class="bottombox">
              <i>企业详情</i>
            </h1>
            <!-- <p style="text-align: center">{{ jobDetail.aliasName || '-' }}</p> -->
            <!-- <div class="imgbox">
              <img v-if="storeImage.length !== 0" :src="storeImage[0]" alt />
              <img v-else src="../../../static/img/nopicture.png" alt />
            </div>-->
          </div>
          <div class="companylocation" style="text-align:center;padding:0 20px 20px" v-if="positionInfo.lng">
            <h2 style="padding:16px 0;font-weight:600">{{store.storeName || '-'}}</h2>
            <p style="padding-bottom:20px;border-bottom:1px solid #eee;font-size:16px;text-indent:16px;color:#4d575ecc;white-space:pre-line;text-align:left">{{store.storeInfo || '-' }}</p>
            <!-- <h1 class="bottombox">
              <i>企业位置</i>
            </h1>-->
            <div class="imgbox">
              <!-- <GDMap/> -->
              <GDMap :positionInfo="positionInfo"></GDMap>
              <!-- <img src="../../assets/map.png" alt="" /> -->
            </div>
          </div>
        </div>
        <recommend />
      </div>
    </div>
    <!-- <div class="hotTel">
			<i class="iconfont icon-kefu"></i>
			<p>服务热线</p>
			<div>
				<p>服务热线</p>
				<p>0371-6611 3723</p>
			</div>
    </div>-->
    <div class="mask" v-if="!(jobDetail.recruitment == '1')"></div>
  </div>
</template>
<script>
import { getJobDetailApi } from '../../api/job'
import { disposeJobListData, getSalaryClassifyValue } from '../../utils/commonUtil'
import recommend from '../../components/FirstJob/components/recommend.vue'
import { nationlist } from '../../utils/datalist'
import 'swiper/dist/css/swiper.css'
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import swiper from 'swiper'
import GDMap from '../map.vue'
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
import Clipboard from 'clipboard'
// import map from '../map.vue'
Vue.use(Viewer, {
  defaultOptions: {
    // 需要配置的属性
    toolbar: {
      zoomIn: true,
      zoomOut: true,
      oneToOne: false,
      reset: false,
      prev: true,
      play: {
        show: true,
        size: 'large',
      },
      next: true,
      rotateLeft: true,
      rotateRight: true,
      flipHorizontal: false,
      flipVertical: false,
    },
    title: false,
    navbar: false,
    initialViewIndex: 1,
    isMeetting: false,
  },
})
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {
    recommend,
    GDMap,
    // GDMap
    // recordbill,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      relationList: [],
      jobDetail: {}, // 职位相关信息
      storeImage: [],
      storeInfo: {},
      id: this.$route.query.id,
      currentPageNum: this.$route.query.page,
      visible: false, // 录单模态框的展示
      xiangdanVisible: false, // 详单的弹出
      confirmLoading: false, // 录单提交的loading效果
      positionInfo: {}, // 企业位置信息
      jobPoses: {}, // 职位位置信息
      store: {}, // 职位详情信息
      skeletonshow: true,
      tabchange: 1,
      nationlist,
      imgList: [], // 预览图片列表
      labelColor: ['pink', 'blue', 'purple', 'orange', 'green', 'cyan', 'red', 'purple'],
      form: {
        // 录单数据
        name: '',
        peoplecard: '',
        gender: '',
        nation: '',
        location: '',
        firm: '',
        post: '',
        pattern: '',
        policy: '',
        proxy: '',
        facedate: '',
      },
      storeJob: {},
      // rules: {
      //   // 录单校验规则
      //   name: [{ required: true, message: "请输入姓名", trigger: "submit" }],
      //   // tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
      // },
      apply: {},
      myswiper: null, // 存储swiper实例
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */

  beforeCreate() {},
  created() {
    // console.log(this.$router.matcher.match());
    this.getJobDetail()
    console.log(this.$route) // 获取传过来的params数据
    // Object.defineProperties("window.opener", "sessionStorage", {
    //   LOGIN_DATA: {},
    // });
    // console.log(window.opener);
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    let that = this
    // console.log(this.$refs.scrollimg);
    // this.$refs.scrollimg.goTo(0, false);
    setTimeout(() => {
      this.myswiper = new swiper('#swiper', {
        // loop: true,
        // loopAdditionalSlides: 3,
        // speed: 500,
        // keyboard: true,
        // allowTouchMove: false,
        // slidesPerView: 1,
        slidesPerView: 4,
        slidesPerGroup: 1,
        // loop: true,
        // loopFillGroupWithBlank: true,
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true,
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'swiper-button-disabled',
        },
        // spaceBetween: 100,
        // effect: 'fade',
        // fadeEffect: {
        //   crossFade: true,
        // },
        // autoplay: {
        //   delay: 8000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        on: {
          // slideChangeTransitionEnd() {
          // that.progressPercent = 0
          // },
        },
      })
    }, 1000)
  },
  // 组件方法
  methods: {
    async getJobDetail() {
      try {
        const { data } = await getJobDetailApi(this.id)
        console.log(data)
        if (data.status === 200) {
          console.log(data)
          this.jobDetail = disposeJobListData(data.data.storeJob)
          this.positionInfo = data.data.store
          this.jobPoses = data.data.jobPoses
          this.store = data.data.store
          this.positionInfo.desc = this.positionInfo.detailPosition
          this.positionInfo.containerName = 'mapContainer'
          this.positionInfo.name = this.positionInfo.aliasName
          this.skeletonshow = false
          this.jobDetail.district = disposeJobListData(data.data.store).district
          console.log(this.jobDetail)
          console.log(this.jobPoses)
          let newdata = {
            id: data.data.storeJob.id,
            aliasName: data.data.store.aliasName,
            jobName: data.data.storeJob.jobName,
          }
          this.storeInfo = newdata
          let regs = /\.(jpg|jpeg|png)(\?.*)?$/
          // data.data.storeImage.forEach((item) => {
          //   if (regs.test(item.url.toLowerCase())) {
          //     this.storeImage.push(item.url)
          //   }
          // })
          // console.log(this.storeImage);
          let storeImage = []
          let storeVideo = []
          data.data.storeImage.forEach((item) => {
            console.log(item.url)

            if (regs.test(item.url.toLowerCase())) {
              storeImage.push(item.url)
            } else {
              storeVideo.push(item.url)
            }
          })
          this.storeImage = [...storeImage, ...storeVideo]
        } else {
          this.$message.warning('数据获取失败')
        }

        //  = data.data.recordList;
        // console.log(data);
        // console.log(this.jobDetail);
      } catch (error) {
        console.log(error)
      }
    },
    // 录单弹出层的关闭
    handleCancel() {
      this.visible = false
      this.previewVisible = false
      let movie = document.querySelector('#movie')
      console.dir(movie);
      movie.pause();
      // this.form = {
      //   // 录单数据
      //   name: '',
      //   tel: '',
      //   peoplecard: '',
      //   username: '',
      // }
    },
    // 录单提交按钮的回调
    handleOk() {
      this.$refs.ruleForm.validate((ispass, no) => {
        // console.log(ispass);
        if (ispass) {
          this.confirmLoading = true

          setTimeout(() => {
            this.confirmLoading = false
            this.visible = false
          }, 2000)
        } else {
          // console.log(123);
        }
        console.log(no)
      })
    },
    // 弹出录单模态框
    // showmodal() {
    //   this.visible = true;
    //   console.log(this.id);
    // },
    showmodal() {
      this.visible = true
      // this.apply = item;
      // console.log(this.apply);
      // console.log(id);
    },
    onClose() {
      this.visible = false
      this.form = {
        // 录单数据
        name: '',
        peoplecard: '',
        gender: '', // 性别
        nation: '', // 民族
        location: '', // 家庭住址
        firm: '', // 公司名
        post: '', // 岗位
        pattern: '', // 模式
        policy: '', // 代理政策
        proxy: '', // 代理
        facedate: '', // 面试时间
      }
    },
    torecord(item) {
      // 跳转到路由新页面的方法
      console.log(item)
      // let userinfo = JSON.stringify(item);
      console.log(this.jobDetail)
      console.log(this.storeInfo)
      this.storeInfo.currentPageNum = this.currentPageNum
      console.log(this.storeInfo)
      this.$router.push({ name: 'recordbill', params: this.storeInfo })
      sessionStorage.setItem('CURRENT_FIRM', JSON.stringify(this.storeInfo))
    },
    getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
      return getSalaryClassifyValue(salaryClassify, salaryClassifyValue)
    },
    /**
     *  图片预览点击
     *
     *
     */
    showImage(idx) {
      var that = this
      console.log(that.storeImage)
      that.storeImage.forEach((item, index) => {
        if (that.isImg(item)) {
          that.imgList.push(item)
        }
      })

      this.$viewerApi({
        options: { initialViewIndex: idx },
        images: this.imgList,
      })

      // }
    },
    isImg(str) {
      console.log(str)
      let regs = /\.(jpg|jpeg|png)(\?.*)?$/
      return regs.test(str)
    },

    copyText() {
      console.log(123)
      var clipboard = new Clipboard('.copy', {
        // .copy 是点击的触发元素
        target: function () {
          // 通过target指定要复印的节点
          return document.querySelector('.copyInfo') // .copyInfo 是要复制的目标内容
        },
      })
      clipboard.on('success', (e) => {
        // success 是成功的回调 success => error 可以捕获复制失败的异常信息
        console.log(e)
        this.$message.success('复制成功')
      })
    },
    toList() {
      // 跳转到列表页
      this.$router.push({
        name: 'JobList',
        params: {
          pagenum: this.currentPageNum,
        },
      })
    },
    handlePreview(file) {
      this.previewImage = file
      this.previewVisible = true
    },
  },
}
</script>

<style scoped lang="less">
.detail-container {
  // overflow: hidden;
  // border-top: 1px solid #eeefef;

  // background-color: #f6f6f6;
}
/deep/ .ant-form {
  // overflow: auto;
  margin-bottom: 50px;
}
// 录单模态框样式
/deep/ .ant-drawer-wrapper-body {
  // overflow: none;
  // position: relative;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  .ant-drawer-header {
    position: absolute;
    width: 100%;
    background-color: #fff;
    padding: 12px 24px;
    z-index: 999;
    .ant-drawer-close {
      height: 48px;
      width: 48px;
      line-height: 48px;
    }
  }
  .ant-drawer-body {
    overflow-y: auto;
    margin-top: 47px;
  }
}
// /deep/ .ant-modal {
//   top: 30px !important;
// }
// .modal {
//   .ant-form-item {
//     margin-top: -8px;
//     /deep/ .ant-form-item-label {
//       line-height: 22px;
//     }
//     .ant-input {
//       // width: 430px;
//       height: 40px;
//       // border: none;
//       border: 1px solid #dddddd;
//       box-shadow: none !important;
//       // background-color: #f6f6f6;
//     }
//   }
//   /deep/ .ant-modal-footer {
//     padding: 10px 24px;
//     .ant-btn {
//       &:hover {
//         color: #ff4400;
//         border-color: #ff4400;
//       }
//     }
//     .ant-btn.ant-btn-primary {
//       background-color: #ff4400 !important;
//       border: none;
//       line-height: 32px;
//       margin-left: 12px;
//       color: #fff;
//       box-shadow: none;
//       &:hover {
//         background-color: #ff8025 !important;
//       }
//     }
//   }
//   /deep/ .ant-modal-header {
//     .ant-modal-title {
//       font-size: 20px;
//       // font-weight: normal;
//     }
//   }
//   /deep/ .ant-modal-body {
//     padding: 24px 24px 8px 24px;
//     overflow: auto;
//     height: 630px;
//     max-height: 630px !important;
//   }
// }
/deep/ .maincontent {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  .maincontentleft {
    width: 944px;
    margin-right: 16px;
    text-align: left;
    .subset {
      padding: 20px;
      // margin-bottom: 16px;
      // width: 914px;
      background-color: #fff;
      // height: 302px;
      // border-radius: 4px;
      border: 1px solid #ededed;
      display: flex;
      justify-content: space-between;
      .subsetleft {
        display: flex;
        flex-direction: column;
        .info {
          display: flex;
        }
        .imgbox {
          width: 186px;
          height: 186px;
          margin-right: 20px;
          overflow: hidden;
          position: relative;
          // .slick-active {
          //   button {
          //     background-color: #fe6a00 !important;
          //   }
          // }
          // .slick-track {
          // transition: all 0s ease 0s !important;
          // }
          img {
            position: absolute;
            // width: 100%;
            // height: 100%;
            height: 100%;
            // width: 100%;
            top: 50%;
            left: 50%;
            // left: 0;
            // top: 0;
            // right: 0;
            // bottom: 0;
            // margin: auto;
            transform: translateX(-50%) translateY(-50%);
          }

          .ant-carousel {
            .slick-slide {
              text-align: center;
              height: 186px;
              // height: 160px;
              // line-height: 160px;
              // background: #364d79;
              overflow: hidden;
            }
            .custom-slick-arrow {
              width: 35px;
              height: 35px;
              font-size: 35px;
              margin-top: -20px;
              border-radius: 50%;
              color: #fff;
              background-color: rgba(31, 45, 61, 0.11);
              opacity: 0.6;
            }
            .custom-slick-arrow:before {
              // color: #ff4400;
              display: none;
            }
            .custom-slick-arrow:hover {
              // background-color: #ff6a00cc;
              opacity: 0.8;
            }
            .slick-slide h3 {
              color: #fff;
            }
          }
        }
        .jobinfobox {
          .jobname {
            // margin: 12px 0;
            font-size: 20px;
            font-weight: 600;
            text-align: left;
            color: #333;
            line-height: 30px;
            // &:hover {
            //   color: #ff4400;
            // }
          }
          .jobinfo {
            margin-top: 12px;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            color: #999;
            line-height: 26px;
          }
          .jobtag,
          .jobtag1 {
            margin-top: 12px;
            text-align: left;
            // span:first-child {
            //   color: #ff4400;
            //   background: rgba(254, 97, 0, 0.1);
            // }
            span {
              margin-right: 8px;
              font-size: 14px;
              padding: 0px 12px;
              border: none;
              height: 26px;
              line-height: 26px;
              // background: rgba(51, 51, 51, 0.06);
              // border-radius: 4px;
            }
          }
          .jobtag1 {
            span {
              background-color: #f5f5f5;
              color: #666;
            }
          }
          .jobpricemonth {
            // margin-top: 16px;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            color: #666;
            line-height: 26px;
          }
          .jobpricehour {
            // margin-top: 16px;
            font-size: 16px;
            font-weight: normal;
            text-align: left;
            color: #ff4400;
            // line-height: 24px;
            span {
              vertical-align: baseline;
              font-weight: 600;
              font-size: 22px;
              line-height: 26px;
            }
          }
          .billbutton {
            display: flex;
            justify-content: flex-start;
            margin-top: 15px;
            span {
              padding: 0 16px;
              height: 36px;
              margin-right: 20px;
              // border-radius: 4px;
              background-color: rgba(254, 97, 0, 0.1);
              font-size: 18px;
              font-weight: normal;
              color: #ff4400;
              line-height: 34px;
            }
            // button {
            //   width: 160px;
            //   // padding: 0 16px;
            //   height: 36px;
            //   border: none;
            //   background-color: #ff4400;
            //   color: #fff;
            //   font-weight: normal;
            //   font-size: 18px;
            //   border-radius: 4px;
            //   cursor: pointer;
            //   &:hover {
            //     background-color: #ff7614;
            //   }
            // }
            .dropdown {
              width: 160px;
              padding: 0 16px;
              height: 36px;
              border: none;
              background-color: #ff4400;
              color: #fff;
              font-weight: normal;
              font-size: 18px;
              // border-radius: 4px;
              text-align: center;
              line-height: 36px;
              cursor: pointer;
              &:hover {
                color: #fff;

                background-color: #ff4400cc;
              }
            }
          }
        }
      }
      .subsetright {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .topbox {
          width: 116px;
          height: 54px;
          text-align: center;
          overflow: hidden;
          background: rgba(255, 106, 0, 0.1);
          // border-radius: 4px;
          line-height: 30px;
          div {
            // font-weight: normal;
            font-size: 16px;

            span:first-of-type {
              font-size: 20px;
              // font-weight: normal;
            }
          }
          div:first-child {
            height: 24px;
            background: #ff4400;
            line-height: 21px;
            font-size: 14px;
            color: #ffffff;
            border: 1px solid #ff4400;
            // border-radius: 4px 4px 0px 0px;
          }
          div:last-child {
            font-weight: normal;
            background-color: #fff4e3;
            color: #ff4400;
            font-size: 18px;
            span:last-child {
              font-size: 16px;
            }
          }
        }
        .sub-bottombox {
          font-size: 16px;
          .bottombox1 {
            width: 116px;
            height: 32px;
            line-height: 30px;
            font-size: 16px;
            // border: 1px solid rgba(77, 87, 94, 0.3);
            // border-radius: 4px;
            border: 1px solid #ff4400;
            background-color: #fff;
            color: #ff4400;
            cursor: pointer;
            &:hover {
              color: #fff;

              background-color: #ff4400;
            }
          }
          // .jobDesp {
          // 	width: 116px;
          // 	height: 32px;
          // 	line-height: 30px;
          // 	font-size: 16px;
          // 	margin-right: 20px;
          // 	// border: 1px solid rgba(77, 87, 94, 0.3);
          // 	border-radius: 4px;
          // 	border: 1px solid #ff4400;
          // 	background-color: #fff;
          // 	color: rgba(255, 106, 0, 1);
          // 	transition: none;
          // 	cursor: pointer;
          // 	&:hover {
          // 		color: #fff;

          // 		background-color: #ff791a;
          // 	}
          // }
          .norecruitment {
            border: 1px solid #ccc;
            margin-left: 16px;
            color: #ccc;
            cursor: default;
            &:hover {
              border: 1px solid #ccc;
              background-color: #fff;
              color: #ccc;
            }
          }
        }
      }
    }
    .proxy {
      margin-bottom: 16px;
      div {
        white-space: break-spaces;
      }
      // padding: 20px !important;
    }
    .jobinformationbox,
    .proxy {
      width: 944px;
      // border: 1px solid #eeefef;
      overflow: hidden;
      // border-radius: 4px;
      padding: 20px 0;
      background-color: #fff;

      h1 {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        // margin-bottom: 20px;
        > span {
          font-size: 14px;
          color: #ff4400;
          text-decoration: underline;
          cursor: pointer;
        }
        .infotitle {
          display: flex;
          margin-top: -2px;
          border-bottom: 1px solid #eeefef;
          span {
            margin-bottom: -1px;
            height: 30px;
            padding: 1px 12px 0 12px;
            margin-right: 6px;
            background-color: #fafafa;
            border: 1px solid #ededed;
            border-bottom: none;
            cursor: pointer;
            // border-radius: 4px 4px 0 0;
          }
          .active {
            background-color: #fafafa;
            // font-weight: bold;0
            color: #ff4400;
          }
        }
        span {
          height: 25px;
        }
      }
    }
    #tip,
    #other {
      div:last-child {
        width: 640px;
        padding: 12px 16px;
        font-size: 16px;
        border: 1px solid #ededed;
        color: #333;
      }
    }
    .copy {
      width: 46px !important;
      position: relative;
      padding: 0px 8px !important;
      float: right;
      top: 6px;
      /* right: 20px; */
      bottom: 4px;
      font-size: 14px !important;
      border: 1px solid #ff4400 !important;
      color: #ff4400 !important;
      line-height: 22px;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: #fff !important;
        background-color: #ff4400 !important;
      }
    }
    .jobinformationbox {
      h1 {
        position: relative;
        .copy {
          position: absolute;
          padding: 0px 12px;
          right: 20px;
          bottom: 4px;
          font-size: 14px;
          border: 1px solid #ff4400;
          color: #ff4400;
          // border-radius: 5px;
          line-height: 22px;
          text-align: center;
          cursor: pointer;
          &:hover {
            color: #fff;
            background-color: #ff4400;
          }
        }
      }
      .navigation {
        position: relative;
        flex: 1;
        margin-top: 40px;
        // width: 70px !important;
        .ant-affix {
          left: calc(50% + 156px) !important; // 手动定位固定位置
        }
        .ant-anchor-wrapper {
          padding-left: 5px !important;
        }
        .ant-anchor-ink-ball {
          // border-color: #ff4400;
          width: 12px;
          height: 12px;
          border: 3px solid #ff4400;
        }
        .ant-anchor-link {
          padding: 10px 20px !important;
          a {
            color: #666;
            font-size: 18px;
            font-weight: 600;
          }
        }
        .ant-anchor-link-active {
          a {
            color: #ff4400 !important;
            // font-weight: bold;
          }
        }
      }

      .baseInfoContent {
        width: 748px;
        > div {
          > div:first-child {
            font-size: 16px;
            color: #333;
            font-weight: 600;
          }
        }

        .condition {
          .conditiontable {
            display: flex;
            width: 640px;
            flex-direction: column;
            font-size: 16px;
            border: 1px solid #ededed;
            > li {
              display: flex;
              align-items: center;
              border-bottom: 1px solid #ededed;

              &:last-child {
                border-bottom: 0px;
              }
            }

            li {
              display: flex;
              min-height: 44px;
              width: 100%;
              span:first-child {
                padding: 12px 16px;
                width: 100px;
                text-align: center;
                border-right: 1px solid #ededed;
                color: #666;
                // font-weight: bold;
              }
              span:last-child {
                flex: 1;
                display: flex;
                color: #333;
                padding: 12px 16px;
                white-space: break-space;
                align-items: center;
              }
            }
            li:not(li:last-child) {
              border-bottom: 1px solid #ededed;
            }
          }
        }
      }
    }
  }
  .maincontentright {
    width: 240px;
    > div {
      margin-bottom: 16px;
    }
    .jobDetailInfo {
      width: 240px;
      overflow: hidden;
      // height: 114px;
      // padding: 0 20px 0px 20px;
      // border-radius: 4px;
      background-color: #fff;
      text-align: left;
      h1 {
        position: relative;
        text-align: center;
        margin-bottom: 0;

        span {
          position: absolute;
          right: 10px;
          color: #ff4400;
        }
      }
      p {
        font-size: 16px;
        word-break: break-all;
        white-space: break-spaces;
        padding: 16px 20px;
      }
    }
    .hotphone {
      width: 240px;
      overflow: hidden;
      // height: 114px;
      // padding: 0 20px 20px 20px;
      // border-radius: 4px;
      background-color: #fff;
      text-align: center;
      border: 1px solid #ededed;
      p {
        font-size: 24px;
        color: #ff4400;
        font-weight: 600;
        margin-top: 12px;
        padding: 20px;
      }
    }
    .companyinfo {
      overflow: hidden;
      // padding: 0 20px 20px 20px;
      // border-radius: 4px;
      border: 1px solid #ededed;
      background-color: #fff;

      .companydetail {
        // width: 200px;
        p:first-of-type {
          padding: 20px;
          font-size: 18px;
          font-weight: normal;
          text-align: left;
          color: #4d575e;
          margin-bottom: 12px;
          line-height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .imgbox {
          // width: 230px;
          display: flex;
          align-items: center;
          height: 172px;
          margin-bottom: 12px;
          img {
            width: 100%;
          }
        }
        p:last-of-type {
          font-size: 16px;
          text-align: left;
          color: #788085;
          line-height: 22px;
          margin-bottom: 15px;
        }
      }
      .companylocation {
        // width: 200px;
        h1 {
          // height: 50px;
          // line-height: 50px;
          padding-top: 10px;
          text-align: center;
          // border-top: 1px solid #eeefef;
        }
        .imgbox {
          width: 200px;
          height: 200px;
          margin-top: 20px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .recommendposition {
      border: 1px solid #ededed;
    }
  }
  .leftDesc {
    .ant-descriptions-view {
      width: 640px;
      border-radius: 0px;
      // border: 0 !important;
    }
  }

  .leftDesc.ant-descriptions-bordered table {
    // min-height: 352px !important;
    tbody {
      tr {
        height: 44px;
      }
    }
  }
  .leftDesc.ant-descriptions-bordered .ant-descriptions-item-label {
    width: 124px;
    text-align: center;
    font-weight: normal;
    background-color: #fff;
    padding: 8px 0;
    font-size: 16px;
    color: #666;
    letter-spacing: 1px;
    // padding: 8px 0px;
    /*vertical-align: baseline;*/
  }

  .leftDesc.ant-descriptions-bordered .ant-descriptions-item-content {
    white-space: break-spaces;
    text-align: left;
    // padding-left: 8px;
    font-size: 16px;
    color: #333;
  }
  .boubleLevel > .ant-descriptions-view > table > tbody > .ant-descriptions-row:last-child > .ant-descriptions-item-content {
    // padding: 0 !important;
    .noborder {
      .ant-descriptions-view {
        // border: 0 !important;
      }
    }
  }
  // .right
}
.showInfo {
  width: unset;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: #ff4400 !important;
}
.hotTel {
  position: fixed;
  top: 50%;
  left: calc(50vw + 616px);
  width: 104px;
  height: 110px;
  background-color: #fff;
  box-shadow: 5px 0px 10px 3px #eee;
  text-align: center;
  padding-top: 10px;
  > i {
    font-size: 40px;
  }
  > p {
    font-size: 16px;
    text-align: center;
    color: #ff4400;
  }
  &:hover > div {
    display: block;
  }
  div {
    position: absolute;
    display: none;
    height: 110px;
    width: 200px;
    left: -236px;
    bottom: 0px;
    text-align: center;
    box-shadow: 5px 0px 10px 3px #ddd;
    background-color: #fff;
    > p:first-child {
      padding: 14px 0;
      border-bottom: 1px solid #eee;
    }
    > p:last-child {
      padding: 16px 0;
      font-size: 24px;
      color: #ff4400;
    }
  }
}
.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.06);
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
}
.swiperBox {
  width: 350px;
  margin-top: 20px;
  position: relative;
  .swiper-button-next {
    right: 0px;
    background-image: url(http://matripe.oss-cn-beijing.aliyuncs.com/img/right.svg);
  }
  .swiper-button-prev {
    left: -10px;
    background-image: url(http://matripe.oss-cn-beijing.aliyuncs.com/img/left.svg);
  }
}
#swiper {
  width: 340px;
  overflow: hidden;
  .swiper-wrapper {
    // width: 460px;
  }
  .swiper-slide {
    img {
      width: 80px;
      height: 45px;
      object-fit: cover;
      // width: 100%;
    }
  }
}
.swiper-button-disabled {
  display: none;
}
.spic.ant-modal-wrap {
  text-align: center;
}
/deep/ .spic {
  .ant-modal {
    width: auto !important;
    display: inline-block;
  }
  .ant-modal-close {
    top: 24px;
    right: 6px;
    position: fixed;
    color: #fff;

    .ant-modal-close-x {
      font-size: 30px;
    }
  }
  .ant-modal-content {
    background-color: transparent;

    .ant-modal-body {
      padding: 0;
    }

    img {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }
  }
}
</style>