yizhizan-pc/src/views/resume/resumeInfo.vue

<template>
	<div @click.stop="closeShow()" class="postInfos" style="padding-bottom: 20px;">
		<!-- 岗位详情 -->
		<div class="postInfo flex align-center justify-center">
			<div class="postInfo-box">
				<!-- 岗位名称/薪资 -->
				<div class="postInfo-box-top flex align-center justify-between">
					<div class="postInfo-box-top-l flex align-center">
						<img :src="info.resumesListDtoList ? info.resumesListDtoList.userAvatar :'/default.jpg'" alt="" />
						{{ info.userName }}
						<span>{{ info.resumesListDtoList?.companyName }} </span>
					</div>
					<!-- <div class="postInfo-box-top-r flex align-center">
						<div @click.stop="getShare()" class="postInfo-box-top-r-qr flex align-center">
							<img src="/images/postimg/share.png" alt="" />
							分享简历
							<div v-if="isShowQr" class="postInfo-box-top-r-qrs flex align-center justify-center">
								<img :src="qr" alt="" />
							</div>
						</div>
						<div v-if="info.isShield==0 || !info.isShield" @click.stop="addShield()"
							class="flex align-center">
							<img src="/images/postimg/blackPeop.png" alt="" />
							加入黑名单
						</div>
						<div v-else @click.stop="delShield()" class="flex align-center">
							<img src="/images/postimg/blackPeop.png" alt="" />
							移出黑名单
						</div>
						<div @click.stop="openShow()" class="flex align-center">
							<img src="/images/postimg/jubao.png" alt="" />
							举报
						</div>
					</div> -->
				</div>
				<div class="postInfo-box-status flex align-center">
					<img src="/images/postimg/time.png" alt="" />
					{{ info.resumesStatus == 0 ? '离职＆随时到岗' : info.resumesStatus == 1 ? '在职＆月内到岗' : (info.resumesStatus
					== 2 ? '在职＆考虑机会' :'在职＆暂不考虑')}}
				</div>
				<!-- 地址、要求 -->
				<div class="postInfo-box-ins">
					{{ info.resumesWorkExperience || '0' }}年<el-divider direction="vertical" />{{
					info.resumesListDtoList?.degree || '无' }}<el-divider direction="vertical" />{{
					info.resumesListDtoList?.userAge || '无' }}岁
				</div>
				<!-- 个人优势/操作 -->
				<div class="postInfo-box-labels flex justify-between">
					<div class="postInfo-box-labels-l">
						{{ info.resumesListDtoList?.adv || '暂无个人优势。(最多展示三行)' }}
					</div>
					<div class="postInfo-box-labels-r flex align-center">
						<div @click.stop="setCollection()"
							class="postInfo-box-labels-r-s flex align-center justify-center">
							<el-icon v-if="info.isCollection==0" :size="20" style="margin-right: 6px;">
								<Star />
							</el-icon>
							<el-icon v-else :size="20" style="margin-right: 6px;">
								<StarFilled />
							</el-icon>
							{{info.isCollection==0?'收藏':'已收藏'}}
						</div>
						<div @click.stop="openMeg()" class="postInfo-box-labels-r-l flex align-center justify-center">
							立即沟通
						</div>
					</div>
				</div>
				<div>

				</div>
			</div>
		</div>
		<!-- 工作经历/教育经历 -->
		<div class="postJs flex align-center justify-center">
			<div class="postJs-box">
				<div class="postJs-box-title" v-if="info.intentionList && info.intentionList.length > 0">
					求职期望
				</div>
				<div style="margin: 20px 0;" v-if="info.intentionList && info.intentionList.length > 0">
					<div v-for="(item, index) in info.intentionList" :key="index" class="flex expectation align-center">
						{{ item.ruleClassifyName || '无' }}<el-divider direction="vertical" />{{ item.citys || '无' }}
						<span v-if="item.postType">（{{ item.postType }}）</span>
						<el-divider direction="vertical" />{{ item.salaryRange ? item.salaryRange + '元' : '薪资未填写' }}
					</div>
				</div>
				<div class="postJs-box-title" v-if="info.workExpList && info.workExpList.length>0">
					工作经历
				</div>
				<div style="margin-top: 20px;" v-if="info.workExpList && info.workExpList.length>0">
					<el-timeline style="padding: 0;">
						<el-timeline-item v-for="(activity, index) in info.workExpList" :key="index">
							<div class="timelineItem" style="font-size: 16px;">
								{{ activity.companyName }}
							</div>
							<div v-for="(detail, i) in activity.workExpDetailList" :key="detail.workExpDetailId">
								<div class="timelineItem">
									{{ detail.position || '未填写职位' }}
									<el-divider direction="vertical" />
									{{ detail.startTime ? detail.startTime.slice(0, 7) : '' }} -
									{{ detail.endTime ? detail.endTime.slice(0, 7) : '至今' }}
								</div>
								<div class="timelineItem">
									{{ detail.workContent ? detail.workContent : '暂无工作描述' }}
								</div>

								<div class="timelineItem flex flex-wrap" v-if="detail.skills" style="gap: 4px;">
									<div class="tag" v-for="(tag, j) in JSON.parse(detail.skills)" :key="j">
										{{ tag }}
									</div>
								</div>
							</div>
						</el-timeline-item>
					</el-timeline>
				</div>
				<div class="postJs-box-title">
					教育经历
				</div>
				<div style="margin-top: 20px;">
					<el-timeline style="padding: 0;">
						<el-timeline-item v-for="(activity, index) in info.eduList" :key="index">
							<div class="timelineItem" style="font-size: 16px;">
								{{ activity.school }}
							</div>
							<div class="timelineItem">
								{{ activity.degree }}<el-divider direction="vertical" />{{ activity.profession
								}}<el-divider direction="vertical" />
								{{ activity.startTime ? activity.startTime.split(' ')[0] : '' }} -{{ activity.endTime ?
								activity.endTime.split(' ')[0] : '' }}
							</div>
							<div class="timelineItem">{{ activity.detail }}</div>
						</el-timeline-item>
					</el-timeline>
				</div>

			</div>
		</div>
		<!-- 个人简介 -->
		<div v-if="info.resumesDetails" class="postJs flex align-center justify-center">
			<div class="postJs-box">
				<div class="postJs-box-title">
					自我介绍
				</div>
				<div style="margin-top: 20px;">
					{{info.resumesDetails}}
				</div>
			</div>
		</div>
		<!-- 消息组件 -->
		<messageCom v-if="showMeg" :byUserId="byUserId" :resumesId="resumesId" :postPushId="postPushId"
			:chatConversationId="chatConversationId" :showMeg="showMeg" :userType="2" @closeMeg="closeMeg" />
		<!-- 举报弹窗 -->
		<el-dialog v-model="show" @close="closeJb" :draggable="true" :destroy-on-close="true" align-center center>
			<template #header>
				<div class="my-header flex align-center">
					<div class="my-header-title" style="font-weight: bold;">
						举报
					</div>
				</div>
			</template>
			<div class="jb" v-loading="loading">
				<div class="jb-title">
					问题和意见
				</div>
				<div class="jb-text">
					<el-input resize="none" :input-style="inputStyles" v-model="sendDate.content"
						:autosize="{ minRows: 6, maxRows: 8 }" type="textarea" placeholder="请详细描述你的问题和意见..." />
				</div>
				<div class="jb-title" style="margin-top: 20px;">
					电话/微信
				</div>
				<div class="jb-text jb-texts">
					<el-input :input-style="inputStyles" style="width: 100%;" v-model="sendDate.contact"
						placeholder="方便我们联系您" />
				</div>
				<div class="jb-title" style="margin-top: 20px;">
					上传图片
				</div>
				<div class="jb-text jb-texts" style="background-color: #ffffff;">
					<el-upload v-model:file-list="imgs" :action="action" :on-preview="handlePictureCardPreview"
						:on-remove="handleRemove" list-type="picture-card">
						<el-icon>
							<Plus />
						</el-icon>
					</el-upload>
					<el-dialog v-model="dialogVisible">
						<img w-full :src="dialogImageUrl" style="width: 100%;height: auto;" alt="Preview Image" />
					</el-dialog>
				</div>
				<div class="jb-btn flex align-center">
					<el-button @click.stop="show = false">取消</el-button>
					<el-button type="primary" @click.stop="reportSave">提交</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ROOTPATH,
		ROOTPATH4
	} from '../../../comment/httpUrl.js'
	import axios from 'axios'
	import messageCom from '../../components/messageCom/messageCom.vue'
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	export default {
		components: {
			messageCom
		},
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				action: ROOTPATH4 + 'sqx_fast/alioss/upload',
				show: false,
				sendDate: {
					content: '',
					contact: ''
				},
				byUserId: '',
				chatConversationId: '',
				showMeg: false, //是否打开聊天组件
				inputStyles: {
					border: 'none',
					background: '#F7F7F7',
					borderRadius: '8px',
					boxShadow: 'none',
				},
				resumesId: '', //简历id
				info: {}, //简历详情
				qr: '', //分享二维码
				isShowQr: false, //是否显示分享二维码
				screenHeight: 0, //屏幕高度
				postPushId: '', //岗位id
				imgs: [], //上传图片
				loading: false,
			}
		},
		mounted() {
			this.screenHeight = window.innerHeight
			this.resumesId = this.$route.query.resumesId
			this.postPushId = this.$route.query.postPushId || localStorage.getItem('postPushId')
			let inviterCode = this.$route.query.inviterCode
			if (inviterCode) {
				localStorage.setItem('inviterCode', inviterCode)
			}
			if (this.resumesId) {
				// this.qr = ROOTPATH + '/app/invite/mpPageCreateQr?page=pages/index/game/orderDet&resumesId=' + this
				// 	.resumesId
				this.getJobInfo()
			}

		},
		methods: {
			//移除图片
			handleRemove(e) {
				let imgs = []
				this.imgs.map(item => {
					imgs.push(item.response.data)
				})
				this.sendDate.imgs = imgs.join(',')
			},
			//放大查看
			handlePictureCardPreview(e) {
				this.dialogImageUrl = e.url
				this.dialogVisible = true
			},
			closeJb() {
				this.imgs = []
				this.sendDate = {
					content: '',
					contact: ''
				}
			},
			//提交举报
			reportSave() {
				if (!this.sendDate.content) {
					ElMessageBox.alert('请输入举报内容', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.sendDate.contact) {
					ElMessageBox.alert('请输入联系方式', '提示', {
						confirmButtonText: '确认',
					})
					return
				}

				if (this.imgs.length > 0) {
					let imgs = []
					this.imgs.map(item => {
						imgs.push(item.response.data)
					})
					this.sendDate.imgs = imgs.join(',')
				}
				this.loading = true
				let data = {
					title: this.sendDate.contact,
					content: JSON.stringify(this.sendDate),
					state: 6,
					byUserId: this.resumesId
				}

				this.$Request.post('/app/message/insertMessage', data, {
					type: 'json'
				}).then(res => {
					if (res.code == 0) {
						ElMessage({
							message: '已提交',
							type: 'success',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.loading = false
						this.show = false
					} else {
						this.loading = false
						ElMessageBox.alert(res.msg, '提示', {
							confirmButtonText: '确认'
						})
					}
				})
			},
			//打开举报弹框
			openShow() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				this.sendDate = {
					content: '',
					contact: ''
				}
				this.show = true
			},
			/**
			 * 收藏简历
			 */
			setCollection() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				this.$Request.post("/app/myCollection/saveCollection", {
					resumesId: this.resumesId,
					type: 2
				}).then(res => {
					if (res.code == 0) {
						ElMessage({
							message: res.msg,
							type: 'success',
							duration: 1500
						})
						this.getJobInfo()
					}
				})
			},
			//去登录
			goLogo() {
				this.$router.push({
					name: 'login'
				})
			},
			//加入黑名单
			addShield() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				ElMessageBox.confirm(
					'拉入黑名单后，该用户不会再出现简历推荐中，可从黑名单中移除，确认加入黑名单？',
					'温馨提示', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					let data = {
						shieldType: 2,
						userId: this.info.userId,
						companyId: localStorage.getItem('companyId'),
					}
					this.$Request.post('/app/shieldCompany/insertShieldCompany', data, {
						type: 'json'
					}).then(res => {
						if (res.code == 0) {
							ElMessage({
								message: '已加入黑名单',
								type: 'success',
								duration: 1500,
								offset: this.screenHeight / 2
							})
							this.getJobInfo()

						} else {
							ElMessage({
								message: res.msg,
								type: 'error',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						}
					})

				}).catch(() => {

				})
			},
			//移除黑名单
			delShield() {
				let data = {
					shieldType: 2,
					userId: this.info.userId,
					companyId: localStorage.getItem('companyId'),
				}
				this.$Request.post('/app/shieldCompany/deleteShieldCompany', data).then(res => {
					if (res.code == 0) {
						ElMessage({
							message: '已移出黑名单！',
							type: 'success',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.getJobInfo()

					} else {
						ElMessage({
							message: res.msg,
							type: 'error',
							duration: 1500,
							offset: this.screenHeight / 2
						})
					}
				})
			},
			//关闭子弹窗组件的回调
			closeMeg(data) {
				//关闭聊天组件
				this.showMeg = data
			},
			//打开联系窗口
			openMsgCom() {
				this.getJobInfo()
				this.$Request.post('/app/chat/insertChatConversation', {
					userId: this.info.userId, //用户userid
					focusedUserId: localStorage.getItem('userId'),
					postPushId: this.postPushId,
					resumesId: this.resumesId,
				}, {
					type: 'json'
				}).then(res => {
					if (res.code == 0) {
						this.byUserId = this.info.userId
						this.chatConversationId = res.data.chatConversationId
						this.showMeg = true
					}
				})
			},
			isCheckPay() {
				let that = this
				let data = {
					resumesId: this.resumesId
				}
				this.$Request.get('/app/resumes/checkPower', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						if (res.data.type === 1) { //当前是会员
							if (res.data.nowCount < res.data.maxCount) { //如果免费次数没有使用完
								ElMessageBox.confirm(
										'尊敬的会员，你可以使用会员特权免费联系ta,当前已使用' + res.data.nowCount + '次，总共' +
										res
										.data.maxCount + '次，确认联系吗？',
										'提示', {
											confirmButtonText: '确认联系',
											cancelButtonText: '我再想想',
											type: 'warning',
										}
									)
									.then(() => {
										console.log('确认')
										this.$Request.post('/app/userMoney/countPayResumes', data).then(
											ress => {
												if (ress.code == 0) {
													//购买成功直接联系
													that.openMsgCom()
												} else {
													ElMessage({
														message: ress.msg,
														type: 'error',
														duration: 1500,
														offset: this.screenHeight / 2
													})
												}
											})
									}).catch(() => {
										console.log('取消')
									})
							} else { //已经使用完了
								ElMessageBox.confirm(
										'免费联系次数已使用完，是否支付' + res.data.money + '钻石联系ta？',
										'提示', {
											confirmButtonText: '确认联系',
											cancelButtonText: '我再想想',
											type: 'warning',
										}
									)
									.then(() => {
										console.log('确认')
										this.$Request.post('/app/userMoney/payResumes', data).then(ress => {
											if (ress.code == 0) { //购买成功直接联系
												that.openMsgCom()
											} else {
												ElMessageBox.confirm(
														ress.msg,
														'提示', {
															confirmButtonText: '去充值',
															cancelButtonText: '取消',
															type: 'warning',
														}
													)
													.then(() => {
														this.$router.push({
															name: 'money'
														})
													}).catch(() => {
														console.log('取消')
													})
											}
										})
									}).catch(() => {
										console.log('取消')
									})
							}

						} else { // 不是会员
							if (res.data.nowCount < res.data.maxCount) { //还有免费次数
								ElMessageBox.confirm(
										'免费联系次数已使用' + res.data.nowCount + '次，总共' + res
										.data.maxCount + '次，确认联系吗？',
										'提示', {
											confirmButtonText: '确认联系',
											cancelButtonText: '我再想想',
											type: 'warning',
										}
									)
									.then(() => {
										console.log('确认')
										this.$Request.post('/app/userMoney/countPayResumes', data).then(
											ress => {
												if (ress.code == 0) {
													//购买成功直接联系
													that.openMsgCom()
												} else {
													ElMessage({
														message: ress.msg,
														type: 'error',
														duration: 1500,
														offset: this.screenHeight / 2
													})
												}
											})
									}).catch(() => {
										console.log('取消')
									})
							} else { //没有免费次数
								ElMessageBox.confirm(
										'免费联系次数已使用完，是否支付' + res.data.money + '钻石联系ta？',
										'提示', {
											confirmButtonText: '确认联系',
											cancelButtonText: '我再想想',
											type: 'warning',
										}
									)
									.then(() => {
										console.log('确认')
										this.$Request.post('/app/userMoney/payResumes', data).then(ress => {
											if (ress.code == 0) { //购买成功直接联系
												that.openMsgCom()
											} else {
												ElMessageBox.confirm(
														ress.msg,
														'提示', {
															confirmButtonText: '去充值',
															cancelButtonText: '取消',
															type: 'warning',
														}
													)
													.then(() => {
														this.$router.push({
															name: 'money'
														})
													}).catch(() => {
														console.log('取消')
													})
											}
										})
									}).catch(() => {
										console.log('取消')
									})
							}

						}
					}
				})
			},
			//立即联系
			openMeg() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				if (this.info.isPay === 0) { //需要购买
					this.isCheckPay()
				} else { //已购买的可直接联系
					this.openMsgCom()
				}

			},
			closeShow() {
				this.isShowQr = false
			},
			//分享简历
			getShare() {
				if (!localStorage.getItem('token')) {
					this.goLogo()
					return
				}
				// this.isShowQr = !this.isShowQr
				let url = ROOTPATH4 + '' + this.$route.name + '?resumesId=' + this.$route.query.resumesId +
					'&inviterCode=' + this.$store.state.invitationCode
				ElMessageBox.confirm(
					url,
					'分享简历', {
						confirmButtonText: '一键复制',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					navigator.clipboard.writeText(url)
						.then(() => {
							ElMessage({
								type: 'success',
								message: '复制成功',
								duration: 1500,
								offset: this.screenHeight / 2
							})
						})
						.catch(() => {
							ElMessage({
								type: 'info',
								message: '复制失败',
								duration: 1500,
								offset: this.screenHeight / 2
							})

						})
				}).catch(() => {

				})
			},
			//获取简历详情
			getJobInfo() {
				let data = {
					resumesId: this.resumesId,
					userId: localStorage.getItem('userId'),
				}
				if (localStorage.getItem('companyId') && localStorage.getItem('companyId') != '' & localStorage.getItem(
						'companyId') != null && localStorage.getItem('companyId') != 'null') {
					data.companyId = localStorage.getItem('companyId')
				}
				this.$Request.get('/app/resumes/selectResumesByResumesId', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.info = res.data
						if (this.info.industryName) {
							this.info.industryName = this.info.industryName.split(',')
						} else {
							this.info.industryName = []
						}
						let arr = [{
							name: this.info.school,
							time: this.info.graduationTime,
							major: this.info.major,
							resumesEducation: this.info.resumesEducation
						}]
						this.info.schoolList = arr
					} else {
						ElMessage({
							type: 'info',
							message: '简历不存在',
							duration: 1500,
							offset: this.screenHeight / 2,
						})
						setTimeout(() => {
							this.$router.back()
						}, 1000)
					}


				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$marginTop-60: 120px;

	:deep(.el-input__wrapper) {
		background-color: #F7F7F7 !important;
		box-shadow: none !important;
	}
	:deep(.el-select__wrapper){
		background-color: #F7F7F7 !important;
			box-shadow: none !important;
	}

	:deep(.el-input) {
		--el-input-focus-border: none;
		--el-input-focus-border-color: none;
	}

	:deep(.is-focus) {
		box-shadow: none;
	}

	:deep(.el-textarea__inner) {
		box-shadow: none;
	}

	:deep(.el-input__wrapper:hover) {
		box-shadow: none;
	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		border-radius: 14px 14px 0 0;
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
		padding: 0 !important;
	}

	:deep(.el-dialog__body) {
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		padding: 10px;
		border-radius: 14px 14px 0 0;
	}






	.timelineItem {
		margin-top: 10px;
	}

	.jb {
		width: 100%;

		.jb-title {
			color: #333333;
			font-size: 14px;
			font-weight: 500;
		}

		.jb-text {
			width: 100%;
			margin-top: 10px;
			background-color: #F7F7F7;
			border-radius: 8px;
		}

		.jb-btn {
			margin-top: 40px;
			justify-content: flex-end;
		}
	}

	.postInfo {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.postInfo-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			background-color: #ffffff;
			border-radius: 16px;
			padding: 30px 30px 10px 30px;
		}

		.postInfo-box-top-l {
			font-size: 20px;
			font-weight: 500;

			img {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-right: 10px;
			}

			span {
				margin-left: 30px;
				font-size: 18px;
				color: #00DD9A;
				font-weight: 500;
			}
		}

		.postInfo-box-top-r {
			img {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}

			font-size: 14px;

			div {
				color: #999999;
				margin-left: 30px;
				cursor: pointer;
			}
		}

		.postInfo-box-top-r-qr {
			position: relative;

			.postInfo-box-top-r-qrs {
				position: absolute;
				bottom: -160px;
				left: 15%;
				transform: translate(-50%, 0);
				z-index: 999;
				width: 150px;
				height: 150px;
				background-color: #ffffff;
				border-radius: 10px;
				border: 1px solid #f5f5f5;

				img {
					width: 120px;
					height: 120px;
					margin-right: 0;
				}
			}
		}

		.postInfo-box-status {
			margin-top: 20px;
			color: #00DD9A;
			font-size: 16px;

			img {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}
		}

		.postInfo-box-ins {
			margin-top: 20px;
			font-size: 16px;
			color: #666666;
		}

		.postInfo-box-labels {
			margin-top: 30px;
			width: 100%;
			align-items: flex-end;
		}

		.postInfo-box-labels-l {
			width: 70%;
			height: 40px;
			cursor: pointer;
			margin-bottom: 20px;

			.postInfo-box-labels-l-i {
				padding: 6px 16px;
				border-radius: 4px;
				background-color: #F5F5F5;
				color: #666666;
				font-size: 15px;
				margin-right: 20px;
				margin-bottom: 20px;
				
			}
		}

		.postInfo-box-labels-r {
			width: 30%;
			justify-content: flex-end;
			margin-bottom: 20px;

			.postInfo-box-labels-r-s {
				width: 120px;
				height: 40px;
				box-sizing: border-box;
				border: 1px solid #00DD9A;
				border-radius: 8px;
				color: #00DD9A;
				font-size: 18px;
				cursor: pointer;
			}

			.postInfo-box-labels-r-l {
				width: 210px;
				height: 40px;
				background: #00DD9A;
				border-radius: 8px;
				font-size: 18px;
				color: #ffffff;
				margin-left: 20px;
				cursor: pointer;
			}
		}
	}

	.postJs {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.postJs-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			border-radius: 16px;
			padding: 30px;
			background-color: #ffffff;
		}

		.postJs-box-title {
			font-weight: 500;
			font-size: 18px;
		}

		.postJs-box-tag {
			margin-top: 20px;

			.postJs-box-tag-item {
				margin-right: 20px;
				margin-bottom: 20px;
				padding: 6px 16px;
				border-radius: 4px;
				background-color: #F5F5F5;
				color: #333333;
				font-size: 15px;
				cursor: pointer;
			}
		}

		.postJs-box-content {
			font-size: 16px;
			color: #666666;
		}
	}

	.postGs {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.postGs-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			border-radius: 16px;
			padding: 30px;
			background-color: #ffffff;
		}

		.postGs-box-title {
			font-weight: 500;
			font-size: 18px;
		}

		.postGs-box-info {
			margin-top: 30px;

			img {
				width: 64px;
				height: 64px;
				margin-right: 10px;
				border-radius: 4px;
			}

			.postGs-box-info-r-name {
				color: #666666;
				font-size: 16px;
			}

			.postGs-box-info-r-bottom {
				margin-top: 10px;
				color: #666666;
				font-size: 14px;

				span {
					margin-left: 10px;
				}
			}
		}

		.postMap {
			width: 100%;
			height: 200px;
			border-radius: 10px;
		}

		.postGs-box-address {
			font-size: 14px;
			color: #666666;
			margin-top: 20px;
		}
	}

	.jb {
		width: calc(100% - 20px);
		padding: 0 10px 10px 10px;

		.jb-title {
			color: #333333;
			font-size: 14px;
			font-weight: 500;
		}

		.jb-text {
			width: 100%;
			margin-top: 10px;
			background-color: #F7F7F7;
			border-radius: 8px;
		}

		.jb-btn {
			margin-top: 40px;
			justify-content: flex-end;
		}
	}
	.tag {
		background: rgba(153, 153, 153, 0.1);
		border-radius: 6px;
		padding: 3px;
		color: rgba(102, 102, 102, 1);
		font-size: 14rpx;
		font-weight: 400;
	}
	.expectation{
		color: #303133;
		font-size: 14px;
		margin-top: 10px;
	}
</style>