yizhizan-h5/pages/index/game/order.vue

<template>
	<view style="padding: 148rpx 40rpx 40rpx 40rpx;">
		<!-- 固定顶部导航 -->
		<view class="fixed-nav" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-leftward" color="rgba(51, 51, 51, 1)" style="font-size: 38rpx;"></u-icon>
			</view>

				<view class="nav-title">职位详情</view>


			<view class="nav-right">
				<view class="nav-icons">
					<view class="nav-icon" @click="setCollection">
						<image v-if="info.isCollection==0" src="/static/images/index/guanzhu.svg" class="icon-img"></image>
						<image v-else src="/static/images/index/gzActive.svg" style="width: 52rpx;height: 52rpx;"></image>
					</view>
					<view class="nav-icon" @click="showShare">
						<image src="/static/images/index/fenxiang.svg" style="width: 60rpx;height: 60rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		</view>
		
		<!-- 岗位要求 -->
		<view class="job flex justify-center">
			<view class="job-info flex justify-center">
				<view class="job-info-c">
					<view class="job-info-c-top flex align-center justify-between">
						<view class="job-info-c-title">
							<!-- <block v-if="isSameName(info.ruleClassifyName,info.stationName)">
								{{info.ruleClassifyName}}-
							</block> -->
							<block>
								{{info.ruleClassifyName}}
							</block>
						</view>
						<view class="job-info-c-price" v-if="info.salaryRange">
							{{info.salaryRange}}
						</view>
					</view>
					<view class="enterprise-box-c-bto flex align-center justify-between" @click.stop="gotoMap()">
						<view class="enterprise-box-c-bto-l flex align-center gap-10rpx">
							<u-icon name="map" color="rgba(58, 57, 67, 1)" style="margin-right: 10rpx;"
								size="24"></u-icon>
							{{info.province?info.province:''}}{{info.city?info.city:''}}{{info.county?info.county:''}}{{info.address?info.address:''}}
						</view>
						<!-- <view class="enterprise-box-c-bto-r">
							<u-icon name="arrow-right" color="#016BF6" style="margin-right: 20rpx;" size="28"></u-icon>
						</view> -->
					</view>
					<view class="job-info-c-label flex align-center flex-wrap">
						<view class="job-info-c-label-item" v-if="info.county">
							{{info.county}}
						</view>
						<view class="job-info-c-label-item" v-if="info.experience">
							{{info.experience}}
						</view>
						<view class="job-info-c-label-item" v-if="info.education">
							{{info.education}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 急聘 -->
		<view v-if="info.isDue==1" class="urgent-banner">
			<view class="urgent-icon">
				<image src="/static/images/index/jipin2.svg" class="icon-img"></image>
			</view>
			<view class="urgent-text">
				<view class="urgent-title">该招聘为急聘职位</view>
				<view class="urgent-subtitle">急清职位可在下方点击一键投递简历</view>
			</view>
		</view>

		<!-- 企业信息 -->
		<view class="enterprise-box-c-info flex align-start justify-between">
			<view class="enterprise-left flex align-center">
				<view class="avatar-container">
					<image :src="info.hr&&info.hr.hrImg||'../../../static/logo.png'"
						style="width: 95rpx;height: 95rpx;border-radius: 50%;" mode=""></image>
					<view class="online-dot"></view>
				</view>
				<view class="enterprise-box-c-info-n">
					<view class="">
						{{info.user?info.user.userName:''}}
					</view>
					<view class="">
						{{info.hr&&info.hr.hrPosition||''}}
					</view>
				    <view>
						{{info.respondTime||'未沟通'}}
					</view>
				</view>
			</view>
			<view class="more-jobs flex align-center" @click="goToMoreJobs">
				<text>更多职位</text>
				<u-icon name="arrow-right" color="rgba(51, 51, 51, 1)" size="28"></u-icon>
			</view>
		</view>

		<!-- 岗位介绍 -->
		<view class="jobRemarks flex justify-center">
			<!-- <skeleton type="round" bgColor="#ffffff"> -->
			<view class="jobRemarks-box flex justify-center">
				<view class="jobRemarks-box-c">
					<view class="jobRemarks-box-c-title flex align-center">
						<image src="/static/images/index/ins.png" class="title-icon"></image>
						<text>职位说明</text>
					</view>
					<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-if="info.tag">
						<view class="jobRemarks-box-c-label-item" v-for="(item,index) in info.tag.split(',')"
							:key="index">
							{{item}}
						</view>
					</view>
					
					
					<view class="jobRemarks-box-c-con" v-if="info.positionDetails">
						<view class="jobRemarks-box-c-con-item" v-html="info.positionDetails">
						</view>
					</view>

					<view class="jobRemarks-box-c-line"></view>

					<view class="jobRemarks-box-c-title flex align-center" style="margin-top: 25rpx;">
						<image src="/static/images/index/welfare.png" class="title-icon"></image>
						<text>岗位福利</text>
					</view>
					<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-if="info.welfareTag">
						<view class="jobRemarks-box-c-label-item"
							v-for="(item,index) in info.welfareTag?info.welfareTag.split(';'):[]"
							:key="index">
							{{item}}
						</view>
					</view>
					<view class="jobRemarks-box-c-label flex align-center flex-wrap" v-else>
						<view class="jobRemarks-box-c-label-item">
							暂无
						</view>
					</view>

					<view class="job-description">
						<view class="description-item">{{info.positionWelfare}}</view>
					</view>
				</view>
			</view>
			<!-- </skeleton> -->
		</view>
		
		<!-- 企业简介 -->
		<view class="enterprise" v-if="info.lng">
			<!-- 公司介绍卡片 -->
			<view class="company-intro-card" @click="goInfo(info.company.companyId)">
				<view class="company-avatar">
					<image :src="info.company&&info.company.companyLogo||'../../../static/logo.png'"
						style="width: 95rpx;height: 95rpx;border-radius: 50%;" mode="aspectFill"></image>
				</view>
				<view class="company-info">
					<view class="company-name">{{info.company?info.company.companyName:''}}</view>
					<view class="company-details">{{info.company?info.company.companyPeople:''}} · {{info.company?info.company.companyScope:''}}</view>
				</view>
				<view class="company-arrow">
					<u-icon name="arrow-right" color="rgba(51, 51, 51, 1)" size="32"></u-icon>
				</view>
			</view>
			
			<!-- 地图区域 -->
			<view class="enterprise-box flex justify-center">
				<view class="enterprise-box-c">
					<!-- #ifndef APP -->
					<view class="enterprise-box-c-map">
						<map style="width: 100%; height: 100%;" scale="14" @tap.stop="gotoMap()" :latitude="info.lat"
							:longitude="info.lng" :markers="covers">
						</map>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="caozuo flex justify-center align-center">
			<view v-if="info&&info.isDue==1" class="caozuo-box-l flex justify-center align-center" @click="attachmentShow=true">
				一键投递
			</view>
			<view class="caozuo-box-r flex justify-center align-center" @click="bindphone(2)">
				立即沟通
			</view>
<!-- 			<view class="caozuo-box flex align-center justify-between">
				<view class="caozuo-box-l flex align-center">
					<!-- #ifdef MP-WEIXIN -->
					<view class="caozuo-box-l-item flex align-center flex-wrap">
						<button open-type="share">
							<u-icon name="share" color="#333333" size="50"></u-icon>
							<text style="margin-top: 16rpx;">分享</text>
						</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="caozuo-box-l-item flex align-center flex-wrap" @click="shar()">
						<u-icon name="share" color="#333333" size="50"></u-icon>
						<view class="">
							分享
						</view>
					</view>
					#endif
					#ifdef APP-PLUS
					<view class="caozuo-box-l-item flex align-center flex-wrap" @click="shows = true">
						<u-icon name="share" color="#333333" size="50"></u-icon>
						<view class="">
							分享
						</view>
					</view>
					<!-- #endif -->
					<view class="caozuo-box-l-item flex align-center flex-wrap" @click="goJuBao()">
						<u-icon name="warning" color="#333333" size="50"></u-icon>
						<view class="">
							举报
						</view>
					</view>
					<view @click="setCollection()" class="caozuo-box-l-item flex align-center flex-wrap">
						<u-icon name="star" v-if="info.isCollection==0" color="#333333" size="50"></u-icon>
						<u-icon name="star-fill" v-else color="#016BF6" size="50"></u-icon>
						<view class="">
							{{info.isCollection==0?'收藏':'取消'}}
						</view>
					</view>
				</view>
			</view> -->
		</view>


		<u-popup v-model="shows" z-index="99999" mode="bottom" border-radius="14" height="300rpx">
			<view class="shar flex justify-center">
				<view class="shar-box flex justify-around">
					<view class="shar-box-item" @click="appShare('WXSceneSession')">
						<u-icon name="weixin-circle-fill" color="#45b630" style="margin-left: 10rpx;" size="70">
						</u-icon>
						<view class="">
							微信好友
						</view>
					</view>
					<view class="shar-box-item" @click="appShare('WXSenceTimeline')">
						<u-icon name="moments-circel-fill" color="#6dbf30" size="70" style="margin-left: 20rpx;">
						</u-icon>
						<view class="">
							微信朋友圈
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="sharNo" @click="shows = false">
				取消
			</view>
		</u-popup>
		<!-- 返回首页按钮 -->
		<!-- #ifdef H5 -->
			<!-- 
				<view class="backHome" @click="goHome()">
					<image src="../../../static/images/index/backHome.png" mode=""></image>
				</view>	
			-->
		<!-- #endif -->
		<u-popup v-model="attachmentShow" z-index="99999" mode="bottom" border-radius="14" height="auto" :closeable="true">
			<attachment @select="selectAttachment" :content="content"></attachment>
		</u-popup>
	</view>

</template>

<script>
	import config from '../../../common/config.js'
	import attachment from '../../../components/attachment.vue'
	export default {
		//分享
		onShareAppMessage(res) {
			return {
				path: '/pages/index/game/order?postPushId=' + this.postPushId + '&invitation=' + uni.getStorageSync(
					'invitationCode'),
				title: this.info.stationName,
			}
		},
		/*
		 * uniapp微信小程序分享页面到微信朋友圈
		 */
		onShareTimeline(res) {
			return {
				path: '/pages/index/game/order?postPushId=' + this.postPushId + '&invitation=' + uni.getStorageSync(
					'invitationCode'),
				title: this.info.stationName,
			}
		},
		components: {
			attachment
		},
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				loading: true,
				shows: false,
				attachmentShow:false,
				postPushId: '',
				info: {}, //岗位详情
				token: uni.getStorageSync('token'),
				covers: [{
					id: 1,
					latitude: '',
					longitude: '',
					width: 20,
					height: 20,
					iconPath: '../../../static/images/mapMarker.png',
					callout: {
						content: '',
						color: '#000', //文字颜色
						fontSize: 10, //文本大小
						padding: 10, //附近留白
						borderRadius: 24, //边框圆角
						bgColor: '#FFFFFF', //背景颜色
						display: 'ALWAYS', //常显
					}
				}],
				sharType: 0,
				sharMsg: '',
				content:[]
			};
		},
		onLoad(option) {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// 获取邀请码保存到本地
			if (option.invitation) {
				this.$queue.setData('inviterCode', option.invitation);
			}
			// #ifdef MP-WEIXIN
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				this.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif
			//小程序分享版本
			this.$Request.getT('/app/common/type/340').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.sharType = res.data.value
					}
				}
			});
			//小程序分享图片
			this.$Request.getT('/app/common/type/341').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.sharMsg = res.data.value
					}
				}
			});
			this.$Request.get("/app/resumes/getAttachment").then(res => {
				if (res.code == 0) {
					this.content=res.data
				}
				uni.hideLoading();
			});
			
			uni.showLoading({
				title: '加载中'
			})
			this.postPushId = option.postPushId
			this.getInfo()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 显示分享选项
			showShare() {
				this.shows = true;
			},
			//判断岗位名称与职位名称是否相同（不区分大小写）
			isSameName(className, name) {
				let str1 = className.trim();
				let str2 = name.trim();
				if (str1.length !== str2.length) {
					return true;
				}
				return str1.toLowerCase() !== str2.toLowerCase();
			},
			goHome() {
				let pages = getCurrentPages(); // 获取页面栈
				console.log(pages)
				if (pages.length > 1) { //有上一页
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			//app分享
			appShare(scene) {
				let that = this
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
				uni.share({
					provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
					scene: scene, //场景，可取值参考下面说明。
					type: 5, //分享形式 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
					// href: curRoute, //跳转链接
					// imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
					imageUrl: that.sharMsg,
					title: that.info.stationName, //分享内容的标题
					miniProgram: {
						id: 'gh_d531be6accdb', //分享的小程序原始id
						path: curRoute, //分享的小程序的页面路径
						webUrl: "https://ask.dcloud.net.cn/article/287", //地址
						type: that.sharType, //微信小程序的版本  0-正式版； 1-测试版； 2-体验版。 默认值为0。
					},
					success: function(res) {
						that.shows = false; //成功后关闭底部弹框
					},
					fail: function(err) {
						console.log(err, '分享失败回调')
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						that.shows = false;
					}
				});
			},
			getShowModal() {
				uni.showModal({
					title: '提示',
					content: '请登录后联系企业',
					showCancel: true,
					cancelText: '取消',
					confirmText: '去登录',
					complete: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/public/login'
							})
						}

					}
				});
			},
			shar() {
				if (this.token) {
					let that = this
					// h5分享
					// #ifdef H5
					let url = config.WSHOST4 + '/pages/index/game/order?postPushId=' + this.postPushId
					// let url = 'http://192.168.0.109:8081/pages/index/game/order?postPushId=' + this.postPushId
					// alert(url)
					uni.setClipboardData({
						data: url,
						success() {
							uni.showToast({
								title: '分享链接已复制'
							})
						}
					})
					// #endif

				} else {
					this.getShowModal()
				}

			},
			goJuBao() {
				if (this.token) {
					uni.navigateTo({
						url: '/my/feedback/jubao?postPushId=' + this.postPushId
					})
				} else {
					this.getShowModal()
				}

			},
			//在线联系
			bindphone(phone, index) {
				if(!this.info.user||!this.info.user.userId)
					return this.$queue.showToast('岗位发布者已不知所踪，请联系管理员😂😂😂😂😂😂')
				if (uni.getStorageSync('token')) {
					this.$Request.get('/app/resumes/selectResumesByUserId').then(res => {
						if (res.code == 0) {
							let obj = res.data
							if (JSON.stringify(obj) == '{}' || obj == null) {
								uni.showModal({
									title: '提示',
									content: '暂无简历，请完善简历!',
									confirmText: '去完善',
									confirmColor: '#016BF6',
									complete(ret) {
										if (ret.confirm) {
											uni.navigateTo({
												url: '/package/my/resume'
											})
										}
									}
								})
							} else {
								console.log(this.info)
								if(uni.getStorageSync('userId')==this.info.user.userId)
									return this.$queue.showToast('自己无法与自己聊天')
								this.$Request.postJson('/app/chat/insertChatConversation', {
									userId: uni.getStorageSync('userId'), //用户userid
									focusedUserId: this.info.user.userId, //企业userid
									type: 1,
									postPushId: this.info.postPushId,
									resumesId: res.data.resumesId
								}).then(res => {
									if (res.code == 0) {
										uni.navigateTo({
											url: '/pages/msg/im?byUserId=' + this.info.user
												.userId + '&chatConversationId=' + res.data
												.chatConversationId + '&postPushId=' + res.data
												.postPushId
										})
									}
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录后联系企业',
						showCancel: true,
						cancelText: '取消',
						confirmText: '去登录',
						complete: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}

						}
					});
				}

			},
			//拉起地图导航
			gotoMap() {
				let that = this
				uni.openLocation({
					latitude: that.info.lat,
					longitude: that.info.lng,
					address: that.info.province + '' + that.info.city + '' + that.info.county + '' + that.info
						.address,
					name: that.info.address,
					complete(ret) {

					}
				})
			},
			/**
			 * 收藏岗位
			 */
			setCollection() {
				this.$Request.postT("/app/myCollection/saveCollection", {
					postPushId: this.postPushId,
					type: 1
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg
						})
						this.getInfo()
					}
				})
			},
			/**
			 * 获取岗位详情
			 */
			getInfo() {
				this.$Request.getT("/app/postPush/selectPostPushDetails", {
					userId: uni.getStorageSync('userId'),
					postPushId: this.postPushId
				}).then(res => {
					if (res.code == 0) {
						this.info = res.data
						this.covers = [{
							id: 1,
							latitude: this.info.lat,
							longitude: this.info.lng,
							width: 20,
							height: 20,
							iconPath: '../../../static/images/mapMarker.png',
							callout: {
								content: this.info.city + '' + this.info.county + '' + this.info.address,
								color: '#000', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 24, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							}
						}]
					}
					uni.hideLoading()
				})
			},
			//跳转企业详情
			goInfo(companyId) {
				uni.navigateTo({
					url: '/my/enterpriseInfo/enterpriseInfo?companyId=' + companyId
				})
			},
			//跳转更多职位
			goToMoreJobs() {
				uni.navigateTo({
					url: '/my/enterpriseInfo/enterpriseInfo?companyId=' + this.info.company.companyId
				})
			},
			selectAttachment(item){
				//console.log(item)
				this.attachmentShow=false
				this.oneClickApply(item)
			},
			//一键投递
			oneClickApply(item) {
				if(!this.info.user||!this.info.user.userId)
					return this.$queue.showToast('岗位发布者已不知所踪，请联系管理员😂😂😂😂😂😂')
				if (uni.getStorageSync('token')) {
					this.$Request.get('/app/resumes/selectResumesByUserId').then(res => {
						if (res.code == 0) {
							let obj = res.data
							if (JSON.stringify(obj) == '{}' || obj == null) {
								uni.showModal({
									title: '提示',
									content: '暂无简历，请完善简历!',
									confirmText: '去完善',
									confirmColor: '#016BF6',
									complete(ret) {
										if (ret.confirm) {
											uni.navigateTo({
												url: '/package/my/resume'
											})
										}
									}
								})
							} else {
								// 执行一键投递逻辑
								this.$Request.postT("/app/resumes/sendResumes", {
									to: this.info.user.userId, //接收人的userId
									postPushId: this.postPushId, //岗位id
									resumesAttachmentId:item.resumesAttachmentId
								}).then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '投递成功',
											icon: 'success'
										})
									} else {
										uni.showToast({
											title: res.msg || '投递失败',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录后投递简历',
						showCancel: true,
						cancelText: '取消',
						confirmText: '去登录',
						complete: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #F2F2F7;
		padding-bottom: 200rpx;
	}

	.fixed-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background-color: #ffffff;
		padding: 0 32rpx;
		// padding-top 已改为动态计算，在模板中通过 :style 设置
	}

	.urgent-banner {
		width: 100%;
		height: 120rpx;
		background: linear-gradient(90deg, rgba(255, 65, 86, 1) 0%, rgba(255, 102, 0, 0.35) 100%);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		margin: 0 auto 20rpx auto;

		.urgent-icon {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			flex-shrink: 0;
		}

		.urgent-text {
			flex: 1;
			text-align: left;

			.urgent-title {
				color: #ffffff;
				font-family: DM Sans;
				font-size: 26rpx;
				font-weight: 400;
				letter-spacing: 0px;
			}

			.urgent-subtitle {
				color: rgba(255, 255, 255, 1);
				font-family: DM Sans;
				font-size: 18rpx;
				font-weight: 400;
				text-align: left;
			}
		}
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.nav-left {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 96rpx;
		}

		.nav-title {
			flex: 1;
			color: rgba(51, 51, 51, 1);
			font-family: DM Sans;
			font-size: 32rpx;
			font-weight: 700;
			line-height: 26px;
			text-align: center;
		}

		.nav-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 96rpx;
		}

		.nav-icons {
			display: flex;
			align-items: center;
			gap: 24rpx;
		}

		.nav-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 36rpx;
			height: 36rpx;
		}

		.icon-img {
			width: 42rpx;
			height: 42rpx;
		}

		.icon-img.active {
			filter: hue-rotate(120deg) saturate(1.5);
		}
	}

	button {
		background: #ffffff;
		border: none !important;
		width: 120rpx;
		font-size: 24rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-content: flex-start;
		flex-wrap: wrap;
		margin: 0;
		padding: 0 !important;
		line-height: 0 !important;
	}

	button:after {
		border: none !important;
	}

	.backHome {
		position: fixed;
		right: 30rpx;
		bottom: 160rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}

	.shar {
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;

		.shar-box {
			width: 686rpx;
			height: 100%;

			.shar-box-item {
				font-size: 24rpx;
			}
		}
	}

	.line {
		width: 100%;
		border: 1rpx solid #F2F2F7;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.sharNo {
		width: 100%;
		color: #cccccc;
		font-size: 24rpx;
		text-align: center;
	}

	.job {
		width: 100%;
		margin-top: 30rpx;

		.job-info {
			// width: 686rpx;
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
			background-color: #ffffff;

			.job-info-c {
				// width: 626rpx;
				width: 100%;
				height: 100%;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.enterprise-box-c-bto {
				width: 100%;
				border-radius: 30rpx;
				margin-top: 34rpx;
				color: rgba(156, 164, 171, 1);
				font-family: DM Sans;
				font-size: 12px;
				font-weight: 400;
				line-height: 12px;
				letter-spacing: 0.5%;
			}

			.job-info-c-title {
				color: rgba(58, 57, 67, 1);
				font-family: DM Sans;
				font-size: 26px;
				font-weight: 700;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: left;
			}

			.job-info-c-label {
				margin-top: 30rpx;

				.job-info-c-label-item {
					margin-right: 30rpx;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					padding: 4px;
					border-radius: 6px;
					background: rgba(198, 198, 198, 0.1);
				}
			}

			.job-info-c-price {
				color: rgba(1, 107, 246, 1);
				font-family: DM Sans;
				font-size: 18px;
				font-weight: 700;
				line-height: 20px;
				letter-spacing: 0.5%;
				text-align: right;
			}
		}
	}

	.enterprise-box-c-info {
				width: 100%;
				height: auto;
				padding: 16px;
				border: 0.5px solid rgba(227, 231, 236, 1);
				border-radius: 6px;
				background: rgba(253, 253, 253, 1);
				// margin-top: 40rpx;

				.enterprise-left {
					flex: 1;
				}

				.avatar-container {
					position: relative;
					display: inline-block;
				}

				.online-dot {
					position: absolute;
					bottom: 4rpx;
					right: 4rpx;
					width: 20rpx;
					height: 20rpx;
					background: #00D26A;
					border: 2rpx solid #ffffff;
					border-radius: 50%;
				}

				.more-jobs {
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 400;
					gap: 8rpx;
				}

				.enterprise-box-c-info-n {
					margin-left: 18rpx;

					view:nth-of-type(1) {
						color: #333333;
						font-size: 24rpx;
						font-weight: 600;
					}

					view:nth-of-type(2) {
						color: #999999;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 8rpx;
					}

					view:nth-of-type(3) {
						display: inline-block;
						width: auto;
						border-radius: 6px;
						padding: 4rpx 12rpx;
						background: rgba(236, 225, 253, 1);
						color: rgba(107, 85, 214, 0.96);
						font-size: 20rpx;
						font-weight: 500;
						margin-top: 8rpx;
						white-space: nowrap;
					}
				}
			}

	.jobRemarks {
		width: 100%;

		.jobRemarks-box {
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;

			.jobRemarks-box-c {
				width: 100%;
				height: 100%;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.jobRemarks-box-c-title {
				color: rgba(1, 107, 246, 1);
				font-size: 32rpx;
				padding: 8px 12px;
				border-radius: 36px;
				font-weight: 500;
				background: rgba(246, 246, 246, 1);

				.title-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.job-description {
				margin-top: 20rpx;
				margin-bottom: 20rpx;

				.description-item {
					color: rgba(97, 110, 124, 1);
					font-family: DM Sans;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 16px;
					letter-spacing: 0px;
					text-align: left;
					margin-bottom: 8rpx;
				}
			}

			.jobRemarks-box-c-label {
				width: 100%;
				margin-top: 25rpx;

				.jobRemarks-box-c-label-item {
					color: rgba(1, 107, 246, 1);
					font-size: 20rpx;
					padding: 10rpx 15rpx;
					background-color: #F6F6F6;
					border-radius: 10rpx;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
					background: rgba(252, 233, 220, 1);
				}
			}

			.jobRemarks-box-c-con {
				width: 100%;
				margin-top: 25rpx;

				.jobRemarks-box-c-con-item {
					margin-bottom: 10rpx;
					color: #141414;
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.jobRemarks-box-c-line {
				width: 100%;
				border: 1rpx solid #E6E6E6;
				margin-top: 25rpx;
			}
		}
	}

	.enterprise {
		width: 100%;
		margin-top: 25rpx;

		.company-intro-card {
			width: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 12rpx 24rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			border: 0.5px solid rgba(227, 231, 236, 1);

			.company-avatar {
				flex-shrink: 0;
				margin-right: 24rpx;
			}

			.company-info {
				flex: 1;

				.company-name {
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-weight: 600;
					line-height: 1.4;
					margin-bottom: 8rpx;
				}

				.company-details {
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-weight: 400;
					line-height: 1.4;
				}
			}

			.company-arrow {
				flex-shrink: 0;
				margin-left: 48rpx;
			}
		}

		.enterprise-box {
			width: 100%;
			background-color: #ffffff;
			height: 100%;
			padding-bottom: 25rpx;
			border-radius: 24rpx;

			.enterprise-box-c {
				width: 100%;
				height: 100%;
			}

			.enterprise-box-c-map {
				width: 100%;
				margin-top: 20rpx;
				height: 400rpx;
			}
		}
	}

	.caozuo {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		padding: 0 40rpx;
		gap: 20rpx;
		
		.caozuo-box-l {
			flex: 0.8;
			height: 80rpx;
			color: #ffffff;
			border-radius: 45rpx;
			background: linear-gradient(90deg, rgba(255, 65, 86, 1) 0%, rgba(255, 102, 0, 0.35) 100%);
			font-size: 32rpx;
			font-weight: 400;
		}
		
		.caozuo-box-r {
			flex: 1.2;
			height: 80rpx;
			color: #ffffff;
			border-radius: 45rpx;
			/* #ifndef APP-PLUS */
			background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
			/* #endif */
			/* #ifdef APP-PLUS */
			background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
			line-height: 80rpx;
			text-align: center;
			/* #endif */
			font-size: 32rpx;
			font-weight: 400;
		}

		// .caozuo-box {
		// 	width: 686rpx;
		// 	height: 80rpx;

		// 	.caozuo-box-l {

		// 		.caozuo-box-l-item {
		// 			width: 60rpx;
		// 			font-size: 24rpx;
		// 			color: #242424;
		// 			font-weight: 500;
		// 			margin-right: 50rpx;
		// 		}
		// 	}
		// }
	}
</style>