bocai_supplyChain_pc/src/components/FirstJob/detailYicai.vue

<template>
	<div class="detail-container">
		<!-- 面包屑 -->
		<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 />
								<div v-else class="default_avatar">{{ store.jobName }}</div>
								<!-- <img v-else src="../../../static/img/nopicture.png" alt /> -->
							</div>
							<div class="jobinfobox">
								<div class="jobname">{{ jobDetail.jobName }}</div>
								<div class="jobinfo">
									<span>{{ store.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" v-if="jobDetail.jobSpecialLabelNames != ''">
									<!-- <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)"></div>
									<template v-if="jobDetail.minMonthlyPay">
										<span style="font-size: 16px">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
										<div class="jobpricemonth">
											<span>{{ jobDetail.minMonthlyPayStr }}</span
											>- <span>{{ jobDetail.maxMonthlyPayStr }}</span
											>元/月
										</div>
									</template>
								</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>
					<div class="subsetright">
						<div class="topbox">
							<div>服务费</div>
							<div>
								<span>{{ retrunFee }}</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">
					<div style="font-size: 16px; font-weight: bold">职位详情</div>
					<div style="border: 1px solid #eee; padding: 12px 16px; font-size: 16px; min-height: 64px; position: relative; margin-top: 20px; white-space: pre-line">{{ jobDetail.jobInfo || "-" }}</div>
				</div>
			</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 { getJobDetailYicaiApi } from "../../api/job";
import { disposeJobListData, getSalaryClassifyValue, isNotEmptyCheck, setReturnFee } from "../../utils/commonUtil";
import recommend from "../../components/FirstJob/components/recommend.vue";
import { nationlist } from "../../utils/datalist";
import { getUserManagerApi } from "../../api/userinfo";
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 {
			retrunFee: "",
			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实例
			managerInfo: {},
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */

	beforeCreate() {},
	created() {
		// console.log(this.$router.matcher.match());
		if (sessionStorage.getItem("PAGE_TYPE")) {
			this.id = JSON.parse(sessionStorage.getItem("PAGE_TYPE")).id;
			this.currentPageNum = JSON.parse(sessionStorage.getItem("PAGE_TYPE")).pageNum;

			console.log("PAGE_TYPE", JSON.parse(sessionStorage.getItem("PAGE_TYPE")));
		}
		this.getJobDetail();
		console.log(this.$route); // 获取传过来的params数据
		this.getUserManager();
		// 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 getJobDetailYicaiApi(this.id);
				console.log(data);
				if (data.status === 200) {
					console.log(data.data);
					console.log(disposeJobListData(data.data));
					this.jobDetail = disposeJobListData(data.data);
					this.jobDetail.jobInfo = data.data.jobInfo.replaceAll("*****", "");

					this.jobDetail.maxMonthlyPayStr = this.jobDetail.maxMonthlyPay / 100;
					this.jobDetail.minMonthlyPayStr = this.jobDetail.minMonthlyPay / 100;
					this.store = data.data;
					this.jobDetail.district = disposeJobListData(data.data).district;
					this.retrunFee = setReturnFee(data.data.returnFee, data.data.returnFeeType);

					var districtStr = "";
					if (isNotEmptyCheck(this.store.storeDistrict)) {
						// console.log(item.district);
						var districtArr = this.store.storeDistrict.split(",");
						var districtArr1 = [];
						// console.log(districtArr);
						districtArr.forEach((item1) => {
							if (item1.length != 0) {
								item1 = item1 + "丨";
								districtArr1.push(item1);
							}
						});
						if (districtArr.length < 3) {
							districtStr = districtArr1[districtArr1.length - 1];
						} else {
							districtStr = districtArr1.join("");
						}
						if (this.store.storeDistrict.indexOf("undefined") > -1) {
							districtStr = "-丨";
						}
						//districtStr = districtArr[1] + '丨' + districtArr[2];
					}
					this.store["district"] = districtStr;

					this.skeletonshow = false;
					console.log(this.jobDetail);
					console.log(this.jobPoses);
					let newdata = {
						id: data.data.id,
						storeName: data.data.storeName,
						jobName: data.data.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.imgs.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);
			}
		},
		/**
		 * 获取登录人对应的客户经理信息
		 */
		getUserManager() {
			getUserManagerApi().then(({ data }) => {
				console.log(data);
				// this.$store.commit('setManagerInfo', data.data)
				this.managerInfo = data.data;
				// console.log('+++++++++++++++++++++++++', this.$store)
			});
		},
		// 录单弹出层的关闭
		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: "recordbillYicai", params: this.storeInfo });
			sessionStorage.setItem("CURRENT_FIRM_YICAI", 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,
					signType: 1,
				},
			});
		},
		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: 6px;
			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;
			border-radius: 4px;
			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-radius: 6px;
						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 {
		// position: sticky;
		// top: 0;
		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 {
			overflow: hidden;
			position: relative;
			width: 240px;
			height: 200px;
			// height: 114px;
			// padding: 0 20px 20px 20px;
			border: 1px solid #eee;
			border-radius: 6px;
			background-color: #fff;
			text-align: center;
			p {
				position: absolute;
				width: 100%;
				font-size: 20px;
				color: #ff4400;
				font-weight: 600;
				top: 75%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		.companyinfo {
			overflow: hidden;
			// padding: 0 20px 20px 20px;
			border-radius: 6px;
			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: 6px;
			// 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;
	border-radius: 6px;
}
.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;
		}
	}
}
.rightFixed {
	/deep/.ant-anchor-ink {
		display: none;
	}
}
.default_avatar {
	width: 186px;
	height: 186px;
	display: flex;
	align-items: center;
	text-align: center;
	background-color: #d85043;
	color: #fff;
	font-size: 44px;
	line-height: 1.3;
	padding: 10px;
}
</style>